Pada tutorial kali ini saya akan berbagi sebuah Widget Berlangganan Di bawah Posting Blogger Anda.
Widget ini pasti akan meningkatkan jumlah subscribers sosial Anda. Anda menulis posting yang baik dan mengharapkan lebih banyak jumlah pelanggan maka widget ini pasti akan membantu Anda. Widget ini berisi formulir berlangganan email, facebook seperti tombol, twitter dan beberapa ikon sosial yang indah di bagian kanan dari widget. Widget ini dapat diinstal dalam satu langkah, Anda hanya perlu copy yang saya berikan dan paste kode di template Anda. Jadi mari kita lihat bagaimana untuk menambahkannya ke blog blogger Anda!



Cara Tambahkan Widget Berlangganan Di bawah Posting Blogger


1. Login ke akun blogger Anda.
2. Pada Dasbor klick Template ➨ Edit HTML.
3. Centang  Expand Template Widget ➨ Backup template Anda.
4. Sekarang temukan kode <data:post.body/> (Bila kesulitan mencari kode HTML coba klick DISINI)
5. Lalu letakkan kode berikut ini di bawah kode tersebut (Bila menemukan kode tersebut lebih dari dua maka pilih yang ke dua)

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
form.feedburner {
    margin: 20px 0 0;
    display: block;
    clear: both;
}
.OW {
    background: url(http://2.bp.blogspot.com/-VAeqMInOHYU/UB_WIfUBuLI/AAAAAAAAFXk/uUv5iUItmH4/s1600/otowebsite.blogspot.com-email-icon.png) no-repeat scroll 4px center transparent;
    padding: 7px 15px 7px 35px;
    color: #666;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #D3D3D3;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}
.OWsubmit {
    color: #666;
    font-weight: bold;
    text-decoration: none;
    padding: 6px 15px;
    border: 1px solid #D3D3D3;
    cursor: pointer;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -goog-ms-border-radius: 4px;
    border-radius: 4px;
    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='
    #FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#OW-widget {
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -goog-ms-border-radius: 10px 10px 10px 10px;
    border-radius: 10px;
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    padding: 8px;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 480px;
    -webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: inset    0px 0px 8px rgba(50, 50, 50, 0.75);
    box-shadow: inset         0px 0px 8px rgba(50, 50, 50, 0.75);
    -webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;
}
#OW-widget:hover {
    background: none repeat scroll 0 0 #FFF;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}
#OW-widget td {
    padding: 3px 0;
}
</style>
<center><br/><div id='OW-widget'>
 <div id='emailwidget'>
  <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
  <tbody>
  <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
   <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '>
     Get free daily email updates!
    </p>
    <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
     <input name='uri' type='hidden' value='otowebsite'/>
     <input name='loc' type='hidden' value='en_US'/>
     <input class='OWstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>
     <input alt='' class='OWsubmit' title='' type='submit' value='Submit'/>
    </form>
   </td>
   <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>
     Follow us!
    </p>
    <a href='http://feeds.feedburner.com/otowebsite' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://2.bp.blogspot.com/-C5mNLTut5bc/UB_WvXavPiI/AAAAAAAAFX0/SclkwRirzko/s1600/otowebsite.blogspot.com-rss.png'/></a>
    <a href='http://twitter.com/otowebsite' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://3.bp.blogspot.com/-mPPQizch570/UB_WwoS3GYI/AAAAAAAAFX8/Z5BBG6MMsZc/s1600/otowebsite.blogspot.com-twitter.png'/></a>
    <a href='http://www.facebook.com/dekrif' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://4.bp.blogspot.com/-Q9uPVIm2C1k/UB_WutvshSI/AAAAAAAAFXs/eya8kYiZ6-4/s1600/otowebsite.blogspot.com-fb.png'/></a>
    <a href='https://plus.google.com/115780777398536909642/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://2.bp.blogspot.com/-pklB8VWY0Wc/UB_XSUIJ0PI/AAAAAAAAFYE/kvxa1FHtCPM/s1600/otowebsite.blogspot.com-gplus.png'/></a>
   </td>
  </tr>
  </tbody>
  </table>
  <div align='right'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.otowebsite.blogspot.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>
  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fdekrif&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true">
  </iframe>
  <a class='twitter-follow-button' href='http://twitter.com/otowebsite' rel='nofollow'></a>
  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
 </div>
</div>
</center>
</b:if>

Keterangan:
  • Ganti semua (tiga) otowebsite dengan Nama Pengguna Feedburner
  • Ganti semua (dua) dekrif dengan Nama Pengguna Facebook
  • Ganti semua (dua) otowebsite dengan Nama Pengguna Twitter
  • Ganti  115780777398536909642 dengan ID Google +.
  • Anda dapat menyesuaikan widget ini dengan menggunakan OW - HTML Editor.
5. Akhirnya menyimpan template.

Sekarang Anda dapat melihat widget ini di bawah setiap postingan blog Anda.

Jika Anda masih mendapatkan masalah tentang widget ini maka jangan ragu untuk menyebutkannya melalui komentar, saya akan membalas sesegera mungkin.

Poskan Komentar Blogger Disqus

  1. kren gan hatur tang Q u gan visit di andasites.blogspot.com

    BalasHapus
  2. Ramai pengunjung nihhhhh....!!!

    BalasHapus
  3. cara membuat subcribe kyk punya agan, gimana ? :D pengen ini
    www.crawl-xime.blogspot.com

    BalasHapus
  4. mas sy udh coba namun pas sya pratinjau gagal parse trus, letak ksalannya d mna ya,,
    mohon pncerahannya!!

    BalasHapus
  5. @Divianis OktaviyaniItu menggunakan generator, Mohon sabar akan secepatnya saya bahas!

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top