Sebelumnya, saya ingin berterima kasih kepada blog.pustakamadrasah.web.id yang telah memberikan code widget subscribe box untuk blogger secara gratis.
Oke kali ini IDNoobers akan memberikan widget subscribe untuk blog. Widget ini berfungsi untuk memberikan Newsletter kepada para visitor blog agar nantinya selalu mendapat update artikel terbaru dari blog yang disubscribe.
Widget ini saya berikan 100 persen gratis karena saya juga mendapatkannya secara gratis berkat hasil browsing sana sini. Widget ini juga terlihat keren dengan tampilan sederhana nan elegannya. Dengan mengusung gaya Flat Design widget ini akan sangat menarik bagi para visitor blog.
Oke langsung saja, langkah yang bisa kalian lakukan untuk memasang widget ini yaitu:
1. login ke Dashboard Blogger
2. Pilih menu Theme > Edit HTML
3. Lalu masukan script berikut tepat dibawah kode <head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/> <link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
4. Selanjutnya letakkan script CSS berikut tepat dibawah kode </style>
#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;} .widget_follow_subscribe .widget-detail{padding:36px 30px 40px} #subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700} .follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px} .follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center} .follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none} .follow-subscribe-social ul li:last-child{margin:0} .follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out} .follow-subscribe-social ul li a:hover{color:#fff} form.subscribe{margin-top:-7px} form.subscribe input{display:block;width:100%} .subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff} .subscribe-email:focus{outline:0} form.subscribe .placeholder{color:#cacaca} form.subscribe input:-ms-input-placeholder{color:#cacaca} form.subscribe input::-webkit-input-placeholder{color:#cacaca} form.subscribe input:-moz-placeholder{color:#fafafa} form.subscribe input::-moz-placeholder{color:#fafafa} .subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out} .subscribe-button:hover{background-color:#f1d640} .subscribe-button:focus{outline:0} .creadit a{color: #A7A6A6; float: right; font-size: 8px;}
5. Lalu Simpan
Kita tinggalkan sejenak menu Edit HTML, selanjutnya
6. Pilih Layout > Add Widget ditempat dimana anda ingin menempatkan widget
7. Lalu Pilih HTML/Javascript
8. Lalu masukkan script berikut
<div id="subscribebox"> <div class="follow-subscribe-social"> <ul> <li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li> <li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> <p>Subscribe to my Newsletter</p> <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='YOUR-USER-NAME'/> <input name='loc' type='hidden' value='en_US'/> <input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/> <input class="subscribe-button" type="submit" value="Subscribe" /> </form> </div> <div class="creadit"> <a href="http://ngonline06.blogspot.com" rel="dofollow" target="_blank"> Get This Widget</a></div>
Keterangan
YOUR-USER-NAME : Isi dengan ID Feedburner anda
Ganti '#' dengan link Social media anda.
Itu dia cara memasang widget Subscirbe. Terima kasih telah berkunjung, apabila ada pertanyaan silahkan berkomentar.
