widget share

Widget share dengan efek sliding up, merupakan widget share elegan style, cara membuat widget share ini pun sudah di desain agar lebih mudah anda pasang pada halaman blog kesayangan anda., tampilan yang menarik dan elegan serta memiliki struktur kode yang ringan dan ditambah satu widget subscribe yang menyempurnakan widget share ini menjadi suatu widget share yang handal untuk keperluan blogging. Bila anda berkenan silahkan klik demonya, tulisan " Widget share demo " dan uji kemanpuan widget share ini, jangan lupa isimak penjelasan cara membuat widget share ini dihalaman blog, langsung saja menuju TKP:

Demo

Referensi Artikel

• Widget share style efect
• Widget share hover sliding up
• Cara membuat widget share image hover
• Widget Floating share
• Widget fermalink with social share
• Jquery sliding tab with share sicial media
• Related Post with social share
• Widget social share with subscribe
• Widget social share image sliding

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : Wiget Share sliding hover up with subscribe
By : Rivai Silaban | Blog Design
Update : Sabtu, 19 Oktober 2013
******************************************/
#BDRS-widget {
width: 580px;
margin: 5px auto;
border:solid #999 1px;
height:40px;
background-color: #CCCCCC;
text-shadow: 0 -2 2px #999;
}
#BDRS-widget .social-bookmarks {
padding: 0 0 0 10px;
margin-top:-25px;
list-style-type: none;
}
#BDRS-widget .section-title .social-bookmarks {
float: right;
}
#BDRS-widget .social-bookmarks li, .widget .social-bookmarks li, #footer .social-bookmarks li {
float: left;
margin-bottom: 2px;
padding: 0px;
background-color: #B6B6B6;
display: inline;
width: auto;
border:solid #000 1px;
box-shadow:0 0 2px 4px #fff inset;
margin:-20px 2px;
}
#BDRS-widget .social-bookmarks li a {
-moz-transition: all 0.3s ease 0s;
display: block;
float: left;
height: 100%;
margin: 0;
padding: 0;
width: 40px;
height: 40px;
text-indent: -9999px;
}
#BDRS-widget .social-bookmarks li.digg a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQrGmYVX3v1Y2CqyniOTlWdUss1zrXIyQtAXz3fnejDsAM35SO2QC_kvJUK4azuhA1cejeE_Ou8Z9HS_WeAz2ahZyAC_p47QDvYZ9w2hkIuY4Tvnf_3ausQA3p1Zpwx0fQhZUI8_ZZUyI/s1600/digg.png') no-repeat 0 0;
}
#BDRS-widget .social-bookmarks li.digg a:hover {
background-color: #2882c6;
}

#BDRS-widget .social-bookmarks li.facebook a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrkSf4UMjt1dmBGN2MmrhFIN0XxgkKlg4yR7BVa6dOdtO-c7jdbhEs0sNrb1vITBPd67zl27anWuYngqvD9a3Y0qH6tTRKxMHOQc643NttWguyn_tQ7xN9ULEDjnx9TwI82-SQitj5uz0/s1600/facebook.png') no-repeat 0 0;
}
#BDRS-widget .social-bookmarks li.facebook a:hover {
background-color: #3b5998;
}

#BDRS-widget .social-bookmarks li.googleplus a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAcUDhc12f-lq-8kmaBQC79IXhdz05LqUu3l8yEPJTXYyREOWV6djnJVkKfbRVUKPFVdu1VXwFgTZMfE-FG-3gZ3Y45s35SCSEpzureHoWFbSir3wr1rgvjUkSATCopwjDZ1uO1d6-8po/s1600/googleplus.png') no-repeat 0 0;
}
#BDRS-widget .social-bookmarks li.googleplus a:hover {
background-color: #d94a39;
}

#BDRS-widget .social-bookmarks li.reddit a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq9o4TFOejDHylTqOob-C8v0AHhHxOQGnYWVs0bRKw8GPW4QiDkM2s-SsJvRGlLKETUCOqcVEGWYp5v53QXWz5nQzdZToJjJShcyxiyzaHOMnSWk_A2drYZw9ZdagaTYeH9iAy3xDdzCE/s1600/reddit.png') no-repeat 0 0;
}
#BDRS-widget .social-bookmarks li.reddit a:hover {
background-color: #bfd0e2;
}
#BDRS-widget .social-bookmarks li.rss a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMXaJGHdZjAAera4ndnuxWcrXaCtw9ttV-qsx5wQovnZHtGwQEj_GmPHzeYW6ePGzzQ-mQsLbrZEUe6ac-GXP6GFN_P2l_n4EmZOhLghYp60OTwJ66hvn7GiVCP92Qh4E41lsu1X7fJp4/s1600/rss.png') no-repeat 0 0;
}
#BDRS-widget .social-bookmarks li.rss a:hover {
background-color: #fe9900;
}
#BDRS-widget .social-bookmarks li.twitter a {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNOU24WRWYG844XbCzLiQNet5oInw156keut_nlABbnsXIyU-gK2NpXlaEQfxk2YPpXwwnhPvx9g-Bl8jFDrqAEIvoz_AYSfxaGdBNio79OjkT8h21tneoBtCUreg2N8W93MqzPMpHXJI/s1600/twitter.png') no-repeat 0 0;
}
#BDRS-widget .social-bookmarks li.twitter a:hover {
background-color: #48c4d2;
}
#BDRS-widget .social-bookmarks li a:hover {
background-position: 0 -40px;
}
#BDRS-widget input.BDmail {
border: 1px solid;
color: #666666;
padding: 5px;
width: 150px;
border-radius: 3px 0 0 3px;
font-size: 13px;
border-color: #990000;
padding:5px
}
#BDRS-widget input.BDmail:hover {
box-shadow:0 0 2px #FF0000;
}
#BDRS-widget .BD_tumb {
border: 0px solid #dedede;
background-color: #990000;
border-radius:0 5px 5px 0;
color: #FFFFFF;padding:5px;
box-shadow:0 0 3px 1px #000 inset;
}
#BDRS-widget .BD_tumb:hover { background-color: #CC0000; cursor: inherit;box-shadow:0 0 3px #000 inset;}

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  <div class='post-footer-line post-footer-line-2'/>
  atau Kode
  <div class='post-footer-line post-footer-line-3'/>
  
  
• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
• Copy Code HTML dibawah ini, paste di bawah code
  <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda seperti memasang wiget Relate post.
• Save template anda dan lihat hasilnya, selamat berkarya.

<!-- Rivai Silaban | BLOG DESIGN CODE SHARE start -->
<div id="BDRS-widget"> <div style="margin:13px 0 -10px 5px; font-family:verdana; font-size:10px; font-weight:bold; text-shadow: -1px -1px 1px #fff; color:#000">Share : </div><div class="social-bookmarks"><ul>
<li class="twitter"><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel='nofollow' target='_blank' title='Share this on twitter'>twitter</a></li>
<li class="googleplus"><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Gplus">googleplus</a></li>
<li class="facebook"><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;" rel='nofollow' target='_blank' title='Share this on facebook'>facebook</a></li>
<li class="digg"><a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Digg">digg</a></li>
<li class="reddit"><a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' onClick="window.open
(this.href,'sharer','toolbar=0,status=0,width=626,height=436');
return false;" rel="nofollow" title="Share this on Reddit">reddit</a></li>
<li class="rss"><a target="_blank" href="URL RSS ANDA " title="rss">rss</a></li>
</ul></div>
<div style="text-align:right; margin-top:-35px;margin-right:5px;"><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onSubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri= ID FEEDBUENER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class="BDmail" name="email" placeholder="Enter email here.." type="text" /><input class="BD_tumb" value="Subscribe" type="submit" /><input name="uri" value=" ID FEEDBUENER" type="hidden" /><input name="loc" value="en_US" type="hidden" /></form></div></div>
<!-- Rivai Silaban | BLOG DESIGN CODE SHARE End -->

Kesimpulan

Widget share dengan efect sliding menjai suatu tampilan yang menarik untuk widget share ini. Lihat kode HTML warna merah, ganti dengan link anda sesuai dengan yang tertulis..

Bila anda mengalami masalah dalam pemasangan widget share hover sliding up ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.

Widget share for Blogspot
Sabtu, 19 Oktober 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:38 PM