Hanya Ingin Berbagi Informasi - Terakhir kali kami bertemu dengan Abdul Wali di posting sebelumnya dan saya juga mengatakan kepada Anda semua bahwa kami telah merancang widget lain yang saya akan berbagi di sini. Widget Berlangganan penting untuk setiap blog untuk meningkatkan pelanggan dan penggemar. Ada ton desain gratis yang dapat digunakan oleh siapa saja tapi di sini kami memberikan widget profesional untuk Anda semua. Ini adalah desain stylish di mana kita telah menambahkan judul di atas, kedua itu adalah memiliki ikon sosial yang mengesankan yang dapat membantu dalam mendapatkan penggemar yang lebih sosial. Pada bagian ketiga, ada sedikit pesan untuk berlangganan bahwa apa yang akan mereka dapatkan setelah berlangganan. Pada yang terakhir, itu adalah memiliki formulir berlangganan responsif dengan nama, email dan lapangan tombol. Field input mengalami efek stylish ketika seseorang datang untuk menulis atau fokus pada itu dan itu tombol ini juga ditata.
Mengapa Menggunakan Widget ini?
Jika Anda ingin membuat blog Anda lebih responsif dan bergaya kemudian menggunakannya. Ini dapat membantu Anda mendapatkan pengikut sosial bersama dengan pelanggan email. Ini adalah membangun dengan HTML murni dan CSS3 dan juga bekerja di hampir semua browser.
kredit
Widget ini dirancang oleh Blogger Yard, sehingga semua kredit pergi ke kita. Bahkan kali ini kita tidak meminta untuk link kredit apapun di widget jadi ini adalah seratus persen gratis. Tetapi jika Anda berbagi ini ke dalam blog Anda maka Anda akan perlu untuk menghubungkan kembali kami. Satu hal yang saya ingin memberitahu Anda bahwa silahkan menghormati upaya desainer dan tidak melanggar. Terima kasih.
tutorial
Pergi Untuk Blogger >> Tata Letak >> Tambah Gadget
Pilih "HTML / JavaScript"
Paste Kode Berikut Di Isi Box
<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Source Sans Pro:200,200italic,300,300italic,regular,italic,600,600italic,700,700italic,900,900italic&subset=latin' rel='stylesheet' type='text/css'/>
<style>
#byard-socialsub {
width:300px;
height:350px;
background:whitesmoke;
border:1px solid #eaeaea;
box-shadow:0 0 2px 2px #ccc;
}
.byard-socialsub-title {
font-size:20px;
font-family: 'Oleo Script', cursive;
background:hsl(198, 100%, 49%);
padding:5px;
border-bottom: 2px solid #444;
color:white;
text-align:center;
}
#byard-socialsub-icons{
padding-top: 8px;
padding-left: 4px;
padding-bottom: 15px;
border-bottom: 2px dotted hsl(0, 0%, 27%);
}
ul.byard-socialsub-icons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.byard-socialsub-icons li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: -px;
background: none;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
padding-left:10px;
}
ul.byard-socialsub-icons li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.byard-socialsub-icons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.byard-socialsub-icons li a img{
border-width: 0;
}
ul.byard-socialsub-icons li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: none;
}
ul.byard-socialsub-icons li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.byard-socialemailsub {
font-size:14px;
padding:5px;
color:#444;
font-family: Arial;
font-family:bold;
}
.byard-socialemailsubname {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBL07NkD2-82Hf8MMiZY9BynXQ0bU4NG-S4GJDnF1np5z4mfNOANJbgamOA1LZgsh7AhGjJn2q9UWNLEPUA3DbDBVhv7fZMKtSu3Q4UrXdX5FQjmZ8S6c61WEELHm6gA1Ho1HTh48X-KM/s320/name.png) no-repeat 7px 8px;
border:1px solid #ddd;
font-family:Arial,sans-serif;
font-size:13px;
font-weight:bold;
color:hsla(0,0%,27%,0.69);
width:225px;
height:25px;
padding:5px 15px 5px 28px;
margin-left:10px;
display:inline-block;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.byard-socialemailsubemail {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpb8sYVw-zq4tuT3CPAiHyV46dJAbRoGgpQzF3HBtPUPutCBY0ZJ2mIH5vYu1weTTmLSRkd52oUYFUAaTvKzWY0zbf_i8eSlqafLGMbLT1Qem_dGJpVjVTGln2kElp3gNcwB-yrpzz5sk/s320/email.png) no-repeat 7px 10px;
border:1px solid #ddd;
font-family:Arial,sans-serif;
font-size:13px;
font-weight:bold;
color:hsla(0,0%,27%,0.69);
width:225px;
height:25px;
margin-top:10px;
padding:5px 15px 5px 28px;
margin-left:10px;
display:inline-block;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
.byard-socialemailsubname:hover,.byard-socialemailsubemail:hover {
border:1px solid #bebebe;
box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);
}
.byard-socialemailsubname:focus, .byard-socialemailsubemail:focus{
border-color: hsl(198, 100%, 49%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);
outline: 0 none;
}
.byard-socialemailsubbutton {
-moz-box-shadow: 3px 4px 0px 0px #1564ad;
-webkit-box-shadow: 3px 4px 0px 0px #1564ad;
box-shadow: 3px 4px 0px 0px #1564ad;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
background-color:#79bbff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #337bc4;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:17px;
font-weight:bold;
padding:8px 70px;
text-decoration:none;
margin-top:10px;
margin-left:35px;
text-shadow:0px 1px 0px #528ecc;
}
.byard-socialemailsubbutton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
background-color:#378de5;
}
.byard-socialemailsubbutton:active {
position:relative;
top:1px;
}
</style>
<div id='byard-socialsub'>
<div class='byard-socialsub-title'>
Get In Touch With Us
</div>
<div id='byard-socialsub-icons'>
<ul class="byard-socialsub-icons">
<li>
<a href="http://www.facebook.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirtSZb-iNCOaK5eeoALAVAvfZOlVbECqvuXOVcdTRhDmp1LvbhyphenhyphendXQIe7ZhyphenhyphenVTOYzfNVZ1R-axa2JcD_T_uOzF6HRnvWr1dbTsaOPipCymxigvUC6IpL2qKmuJ2NXXP964ulk_ns0R4rc/s64/blueprint-social-03.png" title="Add to Facebook" />
</a>
</li>
<li>
<a href="https://plus.google.com/101996924620264617682">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ2NvCkfaHXZoKi1Z2olYMC07iqmTPkRUzsVX4kS2vw4GHtD1JPhUyZsbB5mJjDLsLsjyhSARM_B2Pdn1D9O2cLaDtGsHrySs5HI3pr9RZING7m2rF5-w4OUK7HD6r0h8L95xbiRMtEEo/s64/blueprint-social-04.png" title="Google plus" />
</a>
</li>
<li>
<a href="http://www.twitter.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3UvwA5PoZULuEfkTQj4_0a_l40_lpR8rg4qHTdSg4B4W3WNKqHhCAlz_9kP-76KlpqYEGGQaRAErnTLIjOSwobo26_AeBp0bW1CyshV7p_s2gYXfEUStRZl1R0DwDXiroGZysUU5IvAA/s64/blueprint-social-01.png" title="Add to Twitter" />
</a>
</li>
<li>
<a href="http://feeds2.feedburner.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJkncm5oGYHP4WjXqeOvcSjtPGQDjNCmUM5qzuLcW4Bws-yfCbiefehHW2jJwRHVc3BXxXSL8ECJTKmFJMbUcobyQ7qc8jHyHeC2tqJbiUZOcEwNWXx2hQl6adAwaKhjz1ptK2xX6CG-0/s64/blueprint-social-10.png" title="Add RSS Feed" />
</a>
</li>
</ul>
</div>
<div class='byard-socialemailsub'>
<p style='padding-top:5px;padding-bottom:10px;font-size: 14px;padding: 10px;font-family:Source Sans Pro;'>
Sign Up For Free To Get Blogging Tips, Blogger Resources, Search Engine Optimization Tips, Templates and Widgets Straight In Inbox.
</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard' class='byard-subsbox-form' method='post' target='_new'>
<input class='byard-socialemailsubname' name='name' placeholder='Your Name' type='text'/>
<input class='byard-socialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
<input class='byard-socialemailsubbutton' type='submit' value='Sign Up!'/>
</form>
</div>
</div>
Blogger
Google+
Facebook
Twitter