Cara Menciptakan Kotak Widget Subscribe Keren Di Blog

Banyak situs atau blog yang menampilkan icon feed untuk memberitahukan bahwa di situs tersebut tersedia RSS feed. RSS (Really Simple Syndication) yakni teknologi yang dipakai secara luas oleh hampir semua website isu atau blog untuk membuatkan ringkasan goresan pena terbaru, kadang kala juga menyertakan artikel lengkap dan bahkan ada berserta gambar dan suara. RSS membantu pengunjung untuk dengan gampang mengikuti informasi terbaru dari situs favoritnya. Menghemat waktu alasannya tidak perlu mengunjungi setiap situs favorit satu persatu. Jadi kesimpulan memasangwidget subscribe di blog semoga bisa meningkatkan pengujung dengan memberitahu pengujung untuk mau mengujungi artikel terbaru kita, setiap kita memposting sebuah artikel maka nanti akan ada pesan email yang dikirim kepada pelanggan blog kita. Nah Jika dinilai dari segi SEO maka terang ini termasuk, oleh alasannya itu aku menyarankan untuk memasang feedburner ini diblog Anda. Widget subscribe ini mempunyai tampilan yang keren dan menarik karna juga di lengkapi dengan tombol sosial media yang mana fungsinya menjadi lebih bermanfaat lagi, jadi tidak sia-sialah apabila di pasang diblog Anda. Nah kemudian bagaimana cara memasangnya widget keren dan menarik ini? simak aja tutorialnya berikut.

1. Pertama silahkan Anda login dulu ke Blogger

2. Klik Template → Edit HTML

3. Cari kode ]]></b:skin> atau </style>

4. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode ]]></b:skin> atau </style>

 body {     background: #333;     margin: 0 auto 0;     color: #444;     font-family: 'PT Sans', arial, sans-serif;     font-size: 13px;     font-weight: 400;     text-align: center; } #subscribebox {background:#314d5b; padding:20px;font-family: 'PT Sans', sans-serif; width:300px;} .widget_follow_subscribe .widget-detail {   padding: 36px 30px 40px 30px;}  #subscribebox p { color: white;     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 0.2s ease-in-out;  -moz-transition: color 0.2s ease-in-out;  -ms-transition: color 0.2s ease-in-out;  -o-transition: color 0.2s ease-in-out;  transition: color 0.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: 0.928571em;  background-color: #ffffff;   text-align: center;   color:efefef; }  .subscribe-email:focus {  outline: 0; }  /* Placeholder color */ form.subscribe .placeholder { /* Internet Explorer 9 */  color: #cacaca; }  form.subscribe input:-ms-input-placeholder { /* Internet Explorer 10+ */  color: #cacaca; }  form.subscribe input::-webkit-input-placeholder { /* WebKit browsers */     color: #cacaca; }  form.subscribe input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */     color: #fafafa; }  form.subscribe input::-moz-placeholder { /* Mozilla Firefox 19+ */     color: #fafafa; }  .subscribe-button {  height: 45px;  font-weight: 700; font-size:16px;  color: #fff;  text-transform: uppercase;  border: none;  background-color:#ea5217;    -webkit-transition: background-color 0.2s ease-in-out;  -moz-transition: background-color 0.2s ease-in-out;  -ms-transition: background-color 0.2s ease-in-out;  -o-transition: background-color 0.2s ease-in-out;  transition: background-color 0.2s ease-in-out; }  .subscribe-button:hover {  background-color: #f4b458; }  .subscribe-button:focus {  outline: 0; }  .creadit a {background:#F35D5C;color:white;margin-top:30px;padding:20px;font-size:15px;}

5.Lalu masuk Ke "Tata Letak atau Layout" kemudian pilih Add a Gadget/ Tambahkan Gadget, pasang di tempat mana saja yang Anda suka.

6. Nanti akan muncul pop-up browser, sesudah itu pilih HTML/Javascript

7. Setelah itu masukan aba-aba dibawah ini di kolom HTML/Javascript.

Baca Juga

 <center> <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> <img border="0" alt="Banyak situs atau blog yang menampilkan icon feed untuk memberitahukan bahwa di situs ters Cara Membuat Kotak Widget Subscribe Keren di Blog" src="http://dateinacrate.com/wp-content/uploads/2015/06/icon-subscribe.png" width="100" height="100" /> <p>Subscribe to my Newsletter</p> <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=Lk21News' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Msdesign92, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='Lk21News'/> <input name='loc' type='hidden' value='en_US'/> <input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/> <input class="subscribe-button" type="submit" value="Subscribe" /> </form> <p style="font-size:60%;">We will not share your information with anyone</p> </div> </center>

Silahkan ganti "Lk21News" yang ditandai dengan username feedburner Anda atau url Feedburner Anda. Anda juga bisa memasukan link sosial media Anda menyerupai fanspage atau yang lainnya.

8. Lalu Simpan atau Save, dan lihat hasilnya.

[Preview ##eye##]

Sekian dari tutorial ini, kalau ada yang ingin Anda tanyakan atau mengalami persoalan silahkan komentar dibawah ini terima kasih.