Sliding social media share

Sliding social media share atau tutorial cara membuat Sliding social media share di blogspot dengan tampilan menarik. Sliding social media share hanya compatible pada platform blogspot, tapi bila ada yang berminat untuk mamasang di platform wordpress mungkin ada perombakan code link. Untuk melihat tampilan Sliding social media share silahkan klik demo dibawah ini, nah bila anda tertarik memasangnya silahkan simak tutorial Sliding social media share dibawah ini langsung saja menuju TKP...

Halaman demo : DEMO
Halaman Sumber : Sumber
Install CSS code Sliding social media share

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]>
4. Copy Code script CSS dibawah ini, pastekan diatas code
   
   Code:

   ]]></b:skin>
   

   tadi atau bila template blog anda memakai
   
   Code:

   <style>
   

   silahkan pastekan kode CSSnya sebelum
   
   Code:

   </style>
   

   template anda. Edit code tersebut dan save template anda.

Spoiler

Code:

/**************************
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("http://1.bp.blogspot.com/-ZXAdQPhrGPI/UnY1jy86NFI/AAAAAAAAB_E/w9k1NSlv7qY/s1600/FACEBOOK.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }
#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("http://1.bp.blogspot.com/-6kXAR8gUIJI/UnY1juBh0PI/AAAAAAAAB_A/k2VxWHM0Lco/s1600/googleplus.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }
#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("http://1.bp.blogspot.com/-Tdm-eNud6rU/UnY1jYdKh9I/AAAAAAAAB-8/cS-j5ZdWPf8/s1600/TWITTER.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }
#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("http://4.bp.blogspot.com/-2OHUHeGD494/UnY1l485tVI/AAAAAAAAB_U/l9JGli_YD7c/s1600/rssbd.png") no-repeat 0 -40px; }
#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }
#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("http://3.bp.blogspot.com/-ZU4mfmIGylA/UnY1uNPlQyI/AAAAAAAAB_c/H7vh2EablVQ/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 */

Install HTML code Sliding social media share

1. Cari code
   
   Code:

   <data:post.body/>
   

   pada template anda.
2. Biasanya
   
   Code:

   <data:post.body/>
   

   ini ada 2, silahkan anda pasang setelah code
   
   Code:

   <data:post.body/>
   

   pada halaman postingan anda
3. Copy dan pastekan code HTML dibawah ini setelah code
   
   Code:

   <data:post.body/>
   

   , save template anda dan lihat hasilnya, semoga bermanfaat... salam ...

Spoiler

Code:

<div id="socialbdrssliding"><div class="titles">Share article width social media</div><ul><li class="bdrs-gplus"><a expr:href='"https://plus.google.com/share?url=" + 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='"http://www.facebook.com/sharer.php?u=" + 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='"http://twitter.com/share?url=" + 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>

Silahkan edit codenya sesuai dengan kebutuhan anda, bila ada yang perlu dipertanyakan silahkan berikan komentar, untuk melihat informasi lainnya mengenai tutorial ini silahkan kunjungi halaman sumbernya, semoga bermanfaat salam blogger..

 

agak berat nih kayakanya :v

agak berat nih kayakanya :v

 

yoi, bikin berat loading gak

yoi, bikin berat loading gak nih gan?

 

yup gan...

iya gan soalnya sistem "href" nya compatibel terhadap blogspot,

 

ngak juga...

ngak juga gan soalnya code programnya hanya memakai html biasa, dan ukuran bite gambarpun kecil...

 

tidak....

ngak juga gan... codenya ringan termasuk bite imagenya, transisinya atau efectnya itu hanya sistem CSS 3 bukan memakai script sebagai motoriknya...

 

berat buat fakir bandwidth

berat buat fakir bandwidth

 

Maksudnya apabila dirender bandwidth

kalo soal bandwidth menurut saya code diatas masih ringanlah, apalagi saat ini sudah banyak penyedia hosting dengan fasilitas bandwidth unlimited atau paling rendahnya rata2 1GB jadi masih bisalah dirender, apalagi link imagenya langsung disimpan di server hostingnya yah makin enak loadingnya. alasan saya mengatakan demikian bahwa pada server blogspot saja masih ringan apalagi pada server sendiri dan ipakai sendiri yah makin cepatlah... ini menurut saya gan , mungkin ada pendapat teman yang lain ...

 

Cakep tombol sosmednya

Cakep tombol sosmednya

 

Thx gan...

makasih atas pendapatnya gan..

 

This is fantastic!

Great design! Can you please help me to insert these social buttons on my wordpress blog?

 

krasen wrote:

thank you for your opinion ...
buttons social media how to shape ..
hopefully I can help ..

for a social media icon with a type like this, it can also be installed on the wordpress platform, only the link is replaced. wordpress platform function for making the share link my code a little overwhelmed ..

 

Itu bikin berat blog gak gan?

Itu bikin berat blog gak gan? kalau gak bikin berat blog, boleh juga tuh widgetnya

 

Nice Share

Panduan yang bermanfaat, segera uji coba di blog demo dulu om.



—
Salam Hangat
? Aluha-Web.com
? Facebook Fanspage
? Twitter Fanspage

 

udah dibahas sebelumnya....

pertanyaan ini sudah dijawab sebelumnya gan, yang pastinya tidaklah, atau coba di lihat lagi komentar diatasnya gan biar lebih detail...

 

Thx gan

thx gan.. untuk link situsnya atau blognya silahkan di pasang di signature gan.. coba ke profil agan kemudian bagian signatur silahkan pasang link situs agan, soalnya bila di postingan sedikit ribet cape buatnya tiap buat postingan buat signature..

 

awesome!

Thanks for your time, Rivaiblog! I was searching for quality sharing buttons before 2-3 weeks without success... I will try these now. I hope to make it work Thanks again!

 

same...

It takes only post data retrieval system on wordpress database to be used as a link, the system may code snippet will also serve, at the same bro ..

 

Wah manteb tuh mas...klu

Wah manteb tuh mas...klu gambarnya pake css sprite/ganti font icon kayaknya lebih OK lagi deh buat menghemat request http pada gambar

 

Malah tambah berat gan..

memang sih gan tapi masih sedikit beda bagian loadingnya,
masih lebih berat sistem font CSS untuk di render gan...

request http tidak terpengaruh kalilah...
thx atas pendapatnya...