social media slideshare

Social media slideshare - Tutorial cara membuat social media slideshare di blogspot. Tampilan social media slideshare sangat menarik dan memiliki code yang ringan, social media slideshare sangat cocok buat para blogger mania yang membutuhkan desain desain social share yang unik dan menarik. Untuk melihat tampilan social media slideshare silahkan klik demo dibawah ini kemudian lihat tampilan social media slideshare pada halaman demo, bila anda tertarik untuk memasang social media slideshare di blogspot anda silahkan simak tutorial dibawah ini..

Demo

Code CSS here..

/**************************
Name : social media slideshare
Update : Selasa 25 February 2014
Design : Rivai Silaban
Site : www.rivai.org
Publish : www.ideblogspot.com
**************************/
#socialbdrssliding a{font-family: Arial;width: 40px;transition:width 0.4s;-webkit-transition:width 0.4s;-moz-transition:width 0.4s;overflow: hidden;
}#socialbdrssliding a:hover{width: 100px;overflow: hidden;
}#socialbdrssliding {position: relative;height: 40px;width: 300px;
}#socialbdrssliding ul { margin: 0; }
.titles {color: #990000;}
#socialbdrssliding li,
#socialbdrssliding li a,
#socialbdrssliding li .bdrs-thumb,
#socialbdrssliding li .bdrs-title {display: block;position: relative;width: 40px;height: 40px;
}#socialbdrssliding li,
#socialbdrssliding li a,
#socialbdrssliding li .bdrs-title {float: left;width: auto;overflow: hidden;
}#socialbdrssliding li a {width: 40px;line-height: 40px;color: #E9E9E9;font-size: 11px;font-weight: bold;text-shadow: 1px 2px 2px #000;
text-decoration: none;cursor: default;
}#socialbdrssliding li .bdrs-thumb { float: left; }
#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }
#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtLbhc0o1REVHFcMlYTckwV8XXBQsI-rarSpxK_PO5_D9uW7BlBI0KMk1jxMHI5mbiOwjyRVmo2w1Cciks1NyWeMZG35vg5AvD-BTEkUhxR9YbZbdQswwYJ_6C-oNuq67mFKvEgodzgJI/s1600/FACEBOOK.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }
#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMKxsyTGWOEYn58zR5jU17EghYLwEsAAgRGimdfLzI_bEJ1ZYQcRtwBX4fA6lfqNHhfH-BormrGQ9K7YxX_Me9vUrJZ1xsmD0DH0UwEVIZ1e6jxmvyuRKF2ox_2tpzQvrt7nCk3RT0Mqw/s1600/googleplus.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }
#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgekUIZbGCDNCZWwQOU19PI3sa17vrWKJay0KcDmcQqrCdPe_ZzuFCd88_gUS5Cb1oArLRMFhGs2PhhO0RYRqz-qWQyKjsNu8bibR5AbmfMs7lLEAlBWilrFGxdHl1-qDHH9Qrn5vnWAfk/s1600/TWITTER.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }
#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2OCvpXjQT0wSkYoYerAZa5OBzS5Niipw9zvwN_z6OG4F_85vO831J1VhSkHcOSyolVDZE1bHVp7OCitmqStniKzm8x8bTWy_jQyGfCqMeCt1DtWOrh-PvznKNxA_T05qe-veVc__F7zQ/s1600/rssbd.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }
#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioucRy3QURm7ZXwbYrdPb5z_c-mGRMVHxnB7b6kKTMOYjSU0GLARZbf0zA9zoS0FvGdflSn0unJgasQ9uF8lKp4I8uPhC6E1xEJYjlTYjRjxv5pId2eUxsQFvr_ZTWdNWmXZWNoDppt3s/s1600/youtube.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {background-color:#666;}
/* social media slideshare end code */

Code HTML here..

<!-- social media slideshare - Ide Blogspot -->
<div id="socialbdrssliding"><div class="titles">Share article width social media</div><ul><li class="bdrs-gplus"><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"><div class="bdrs-thumb"></div><div class="bdrs-title">Gplus</div></a></li>
<li class="bdrs-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'><div class="bdrs-thumb"></div><div class="bdrs-title">Facebook</div></a></li>
<li class="bdrs-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'><div class="bdrs-thumb"></div><div class="bdrs-title">Twitter</div></a></li><li class="bdrs-rss"><a href="http://feeds.feedburner.com/idblogspot" target="_blank" rel="nofollow" title="rss feed"><div class="bdrs-thumb"></div><div class="bdrs-title">RSS</div></a></li>
<li class="bdrs-youtube"><a href="https://www.youtube.com/channel/UCxLE683fC-YfQnRRWaPtWjQ" target="_blank" rel="nofollow" title="youtube"><div class="bdrs-thumb"></div><div class="bdrs-title">YouTube</div></a></li></ul></div>
<!-- social media slideshare - Ide Blogspot -->

Code diatas merupakan code CSS dan code tag HTML dari widget social media slideshare yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama seperti saya silahkan klik link tata cara pemasangan widget social media slideshare....

http://www.ideblogspot.com/2014/02/social-media-slideshare.html

widget share

• social media slideshare
• share blogspot style
• widget share
• widget profil share
• widget share hover sliding up
• widget share image sliding
• cara membuat widget share image hover
• Cara membuat tombol share twitter valid html 5
• Cara membuat like button facebook dan share valid html 5
• Cara membuat button share google plus valid html 5

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 : 3:45 PM