Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Tuesday, February 25, 2014

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

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

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 3:45 PM

4 comments :

  1. Selamat sore Bang Rivai, apa kabar nya Bang semoga baik-baik saja
    Bagus nih Social media slide share nya, ijin coba dan terapkan di blog
    Saya Terima kasih sudah berbagi. salam sukses Bang Rivai :)

    ReplyDelete
    Replies
    1. sehat gan, semoga juga abang sehat selalu..
      silahkan dicoba gan..
      sama sama...

      Delete
  2. mkasi mas..!, sukses diterapkan..!

    ReplyDelete
  3. mas mau tanya buat fans fb yang valid gimana?

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog