Berikut ini seocips.com akan membagikan tutorial blog tentang bagaimana cara memasang widget Feedburner plus Sosial Share button Slide Effect di bawah postingan blog. Widget seperti ini sudah pernah saya pasang di template simplecips yang sudah dibagikan sebelumnya.

Tentu saja widget ini sangat berguna jika dipasang di blog, dimana widget berlangganan artikel blog dipadukan dengan tombol sosial media Facebook, twitt, dan Google plus. Sobat tahukan pengaruhnya sosial media di blog sobat? Kalau belum coba search Google dulu, intinya sobat dapat menarik pengunjung blog melalui sosial media ini. Jika sobat tertarik ingin memasangnya silahkan ikuti tutorial berikut ini.

Membuat Widget Feedburner Sekaligus tombol Sosial Share efek Slide diBlog

Membuat widget Feedburner dengan Tombol Sosial

1. Log In ke Blogger
2. Di Dasbor Pilih Template
3. Jangan lupa Backup template atau simpan kode template ke dalam notepad agar supaya jika terjadi kesalahan dapat dengan mudah di kembalikan.
4. Lalu Klik Edit HTML
5. Cari kode ]]></b:skin> (Gunakan Ctrl+F untuk memudahkan pencarian kode) dan pasang kode di bawah ini di atas atau sebelum kode ]]></b:skin> ( jika tidak ada kode ]]></b:skin> coba letakan diatas kode </style> )
.kotakRSS1 {background-color: rgb(255, 255, 255); -moz-border-radius: 5px;-webkit-border-radius:5px; border: 1px solid #cccccc; padding:5px 5px; margin: 0 0 5px 0; } .seocips33 { background: url('http://3.bp.blogspot.com/_jeu1dUw9AK4/TS1nXs3efdI/AAAAAAAAAQk/vMny_o0OLEI/s1600/maskolis.co.cc.jpg') no-repeat bottom right; } .seocips33 a { background: none;}  .inpseocips33 { border: 1px solid #B9C1C6; width: 170px;height: 16px; font-size: 12px; padding:3px 4px 4px 10px;-moz-border-radius:5px;-webkit-border-radius: 5px;} .sbmtseocips33 {background:#9b9b9b;border: 1px #9b9b9b solid;color:#FFF;font-size:13,5px;font-family:Arial,Tahoma,Verdana;margin-left:5px;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:7px;-webkit-border-radius: 7px;} .cips33subs table {border-collapse: inherit; border: none;} .cips33subs tr { border:0;} .cips33subs td { border:0;} .cips33subs th { border:0;} .clear { clear: both; }
#button-count-share { width: 100%; overflow: hidden; background: transparent; margin: 0 auto; padding: 3px;}
#button-count-share span { float: left; position: relative; font-size: 13px; color: #fff; margin: 12px 5px 12px 5px;border-bottom:1px solid #4eabff;}
.button-share {background: #dce0e0;position: relative;display: block;float: left;height: 40px;overflow: hidden; width: 140px; margin: 4px; border-radius: 3px;}
.ikons { display: block; float: left; position: relative; z-index: 3; height: 100%; vertical-align: top; width: 38px;
    text-align: center;}
.ikons i {  color: #fff; line-height: 33px;}
.slide-share { z-index: 2;display: block;height: 100%;left: 38px;position: absolute;width: 108px; margin: 0;}
.slide-share p { font-family: Verdana; font-weight: 400; border-left: 1px solid rgba(255,255,255,0.35); color: #fff;  font-size: 14px;  left: 0;  position: absolute; text-align: center; top: 10px; width: 100%; margin: 0;}
.button-share .slide-share { transition: all 0.4s ease-in-out;}
.facebook .fb_iframe_widget {display: block; position: absolute; right: 5px; top: 0;  z-index: 1;}
.twitter iframe { left: 50px; top: 10px; z-index: 1; display: block; position: absolute;}
.google #___plusone_0 { width: 90px!important; top: 10px; right: 5px; position: absolute; display: block; z-index: 1;}
.facebook .ikons,.facebook .slide-share {background: #4f79bc;}
.twitter .ikons,.twitter .slide-share { background: #63cef2;}
.google .ikons,.google .slide-share { background: #f36261;}
.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share {  left: 180px; opacity: 0.6;}
6. Berikutnya cari kode </head> dan letakkan kode dibawah ini diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
No 7. Cari kode <data:post.body/>   dan letakan kode di bawah ini setelah atau di bawah kode <data:post.body/> . Jika kode nya ada 2 atau lebih di coba satu persatu. Atau misalnya di template blog anda ada widget share ke sosial media coba letakan sesudah kode sosial ini, atau jika ditemplate sobat ada related postnya silahkan letakan diatas kode relatedpost sobat.
<div class='kotakRSS1'>
<div class='seocips33'>
<div class='clear'/>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<div class='slide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;id&#39;};
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
<div class='slide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
<div class='clear'/>
Jika Anda menyukai Artikel di blog ini, Silahkan <a href='http://feeds.feedburner.com/seocips' target='_blank' title='Berlangganan'>
<b>klik disini</b></a> untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a>
<div class='cips33subs'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=seocips&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpseocips33' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketikkan email anda disini'/>
<input name='uri' type='hidden' value='seocips'/>
<input name='title' type='hidden' value='seocips'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='sbmtseocips33' type='submit' value='Subscribe'/></div>
</form></td><td align='left' style='padding:6px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/seocips'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/seocips?bg=9b9b9b&amp;fg=fffffff&amp;anim=0' style='border:0' width='88'/></a></td></tr></table></div></div></div><div class='clear'/>
8. Terakhir simpan template untuk melihat hasilnya di blog.

Baca juga Bro!!

UPDATE

Untuk menjawab komentar yang ditanyakan Renaldy Ramadani di artikel ini, mengenai bagaimana cara menampilkan Widget ini hanya di halaman posting saja, karena widgetnya muncul di homepage dan halaman statis.

Komentar di cara membuat Widget Feedburner + Sosial Media

Maka berikut ini adalah caranya.
Tambahkan kode tag kondisional dibawah ini di paling atas pada kode No 7 diatas.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Dan tambahkan kode penutup di bawah ini pada bagian paling bawah pada kode No 7 diatas
</b:if>
Sehingga kode No 7 diatas menjadi seperti dibawah ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='kotakRSS1'>
<div class='seocips33'>
<div class='clear'/>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<div class='slide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;id&#39;};
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
<div class='slide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>
Jika Anda menyukai Artikel di blog ini, Silahkan <a href='http://feeds.feedburner.com/seocips' target='_blank' title='Berlangganan'>
<b>klik disini</b></a> untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di <a class='sitename' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a>
<div class='cips33subs'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=seocips&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpseocips33' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketikkan email anda disini'/>
<input name='uri' type='hidden' value='seocips'/>
<input name='title' type='hidden' value='seocips'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='sbmtseocips33' type='submit' value='Subscribe'/></div>
</form></td><td align='left' style='padding:6px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/seocips'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/seocips?bg=9b9b9b&amp;fg=fffffff&amp;anim=0' style='border:0' width='88'/></a></td></tr></table></div></div></div><div class='clear'/>
</b:if>
Nah bagaimana keren bukan? jangan lupa untuk Tutorial blog terbaru dari seocips, dan semoga cara membuat widget Feedburner dengan tombol Sosial Share efek Slide di bawah postingan Blog Blogger ini bermanfaat. Terimakasih.
9 Komentar untuk "Cara Membuat Widget Feedburner dengan Sosial Share Efek Slide"

selamat Sore Mas, karena ini kunjungan Perdana jadi saya ijin dulu follow blognya, kalau ada waktu kesebelah juga Mas dan Follback jika berkenan. Saya ingin mencoba memasang widgetnya Mas, tapi sebelumnya saya mau tanya apa widget ini tidak membuat blog berat ?

Ok thanks :) . Widget diatas gak berat kok biasa aja, toh penting juga untuk blog, misalnya tombol like facebook dan G+ ( terutama G+ ) juga widget berlangganan via email.

Gan, supaya widgetnya itu hanya muncul di posting saja, tidak di halaman statis gimana gan, terus kalo muncul di halaman statis malah widgetnya di atas? help me :D renaldyways.blogspot.com

Silahkan baca ulang postingan di atas gan, jawabannya ada dibagian Update.

Icon twitternya gak bekerja gan, mohon diperbaiki. thanks

gan itu yang menghilangkan subscribe us dan juga feed burner dari seo cips gimana ya??? saya mau gunakan ikon social button share aja gan...thanks infonya

terima kasih banyak gan... akhirnya terlihat cantik juga blog saya dengan tampilan slider share yang menarik pengunjung untuk datang...

terima kasih..
kalau agan berminat kunjungi balik blog saya..
http://r-oren.blogspot.com