social media slideshare ~ MAS ARIE69

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..

Code CSS here..

#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/AVvXsEjvxCio72K2bqfP8FWVh8KDpjwDr51PrJY50zquvQBwjeCj0PAJldkMfupb9dxrDWr_TncpAtXpdCjGYcTJEft2O_apXXC9V_OutTnsqJ6c5ejxRcCeJI1p5619s6kPDeCZq14tvCeiGnM/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/AVvXsEhpH3oX_b1tXZ8QN86VETLAU9TjgKKaYWOqx0u3emiLgJ6TsU_YOllwm8xfxsed0xFoI1lczbiaBsOLLYjWyv-_ZULhdYsTwO6DaGXHF4XQmnwg8tUSZL8sKVbLrG0gx8wa8cAhyphenhyphenbKsnqg/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/AVvXsEj3x_oBAY_7GemmNTsCq7GJHlvpF2F_-dUQJq7F5JlTGDdNSBiEN5SVdjfHavJoPXMlmM6Sdgm58BrVHqXn1426yCCQB6yCUndbtTMC0-Rml9nqOT3u0bTeen2IUx7R82PlgbbXFtuooWU/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/AVvXsEgQ-8XW8mIlSEYsKZrYZyXfmfjHRd1E58C0tUpZUxU9tJR71FL2DdZyEpQzWyKLmNcQuYuGYKRmOsPQ1t7wldFFo5fTKmocxFgWDdWYd-b2BxZZh0dISx9bDulhwL3xwzVwGLUHope_3mo/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/AVvXsEhel6FionFxGG6oLuHMBKWdpqu_egMRXE2fGdTq2-SzjpTwPIlpfiFNrZvzucD6Q2CwnTWPxtZVhOnab4rasTTV0qS-2G2e5NOiP09gQ1GD8L-dkt_0fM__YTcLqlscCdzoP47CJ8373IQ/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;}

Code HTML here..

 <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>

 

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....

MAS ARIE69

Saturday, March 1, 2014