Berbagai Artikel Menarik > » » » Artikel Tentang Cara Membuat “Share Button” di bawah Entri Posting Blog

Thursday, May 1, 2014

Artikel Tentang Cara Membuat “Share Button” di bawah Entri Posting Blog

Fungsi dan kegunaan dari “Share Button” atau “Tombol Share” pada setiap Entri Posting Blog adalah mempermudah Anda maupun pengunjung Blog Anda untuk membagikan setiap artikel yang telah Anda Publikasikan. Pada kesempatan berikut ini, saya akan membagi Artikel menarik tentang bagaimana cara membuat “Share Button” atau “Tombol Share” di bawah setiap Entri Posting Blog. Jadi, dengan memasang “Share Button” Anda tentunya akan mendapatkan banyak menfaat.  Nah sekarang, Bagaimana cara membuat atau memasang “Share Button” di bawah setiap Entri Posting Blog ? Bagi Anda yang berminat memasang “Share Button” tersebut, Anda bisa mengikuti cara atau langkah-langkah di bawah ini.
cara membuat share button pada blog
Cara membuat atau memasang share button dibawah post pada blog.
  • Sebagai langkah awal, silakan Login pada Akun Blogger Anda.
  • Pilih “Template”, lalu klik “Edit HTML”.
  • Temukan kode “]]></b:skin>” pada template blog Anda. (Tekan tombol Ctrl+F pada template blog untuk mempermudah pencarian kode tersebut.)
  • Silakan Anda copy kemudian pastekan kode di bawah ini tepat di atas “]]></b:skin>”. Kode tersebut  adalah sebagai berikut :
ul.social_satu-untuk-semuanya{list-style:none;display:inline-block;margin:15px auto}ul.social_satu-untuk-semuanya li{display:inline;float:left;background-repeat:no-repeat}ul.social_satu-untuk-semuanya li a{display:block;width:50px;height:50px;padding-right:10px;position:relative;text-decoration:none}ul.social_satu-untuk-semuanya li a strong{font-weight:400;position:absolute;left:20px;top:-1px;color:#fff;z-index:9999;text-shadow:1px 1px 0 rgba(0,0,0,0.75);background-color:rgba(0,0,0,0.7);-moz-border-radius:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5);padding:3px}ul.social_satu-untuk-semuanya li.abfacebook{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh83YsLRSto-r1onC3iDYffXCAGkxiZ7PyYOjFc3Q-WdjIHesFOC5ryc07uqfefLnbk_-e8nTkEU8eDzpVYAVCm2y60r144FIpbz4recGi163iV7gdMb7pvLktkP2__J4CuC9mUmvRzx4w/s1600/Facebook.png)}ul.social_satu-untuk-semuanya li.abtwitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJAnZf9nAuZDtqA7ub4At9mmIVrAVwsY-QJknPy9AGLEusr3GTEx4lp-hJApXtPqnNPlDFqtxbuHkOeIU5ijWrmqEnXj1XHnLKtUXKtY9oHlR7EdQ8vH0JUoL-ud_2Ok-Sy-KU9HqJN88/s1600/Twitter.png)}ul.social_satu-untuk-semuanya li.abgoogleplus{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9pzseIjj9kw-q45RIfZEeb52v_5bQbb7Acl4sjr7q0dmxnEk3Q9ytiOGEYZiH7PQGqqbPTILmg3_BdBB2DD9jo4Dv024HWUMmfx7CYCskbsp7iM60wU00OnoxcZ4OZA5FL1QEVrYiUjg/s1600/Google+.png)}ul li.abreddit{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL2B6ja9L9XBt8xwC5TOr6hvJ8oR8jL-yW1PDaD_dgfwGxIJ3EjuJKD3QHTZ1wukE5F50CUFmbZZaq8EtBH30Yzi_UYjQv1YlXdPkbR1Vkv0HJs55ZCsV6c_ScGWghFgw45RB1A3A5KPY/s1600/reddit.PNG)}ul.social_satu-untuk-semuanya li.abstumbleupon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoSrW0U1aC6YwdtcHk-bZ6gySJxDo7bhL2B-xR-tLMo4_t-hQK1CSsesV9Xsd0DJ-DcQcDRbmzHPAp3gDjn8jIJDSSI72nkFdo5ihYu-OpgiQsI5Q7wHjdCqoi4MqRKK-fXsscnG7QvOg/s1600/StumbleUpon.png)}ul.social_satu-untuk-semuanya li.abdig{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhng8-BglrzhyphenhyphenRWwm2q7o8dauiuqNpSJJ6I6EdEhsh74u2qUfluva6QEiNrq9pMMop13YNbNNZK9XZ95-p8Mjodw8Zg3aZVB4Z1Z8W1qwnCAXGnaAdOmw8gGyowhV96W57gta2QkSnMJe8/s1600/digg.png)}ul.social_satu-untuk-semuanya li.ablinkedin{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRSCZmJtz2WByuURhpJENedAdBcDU4N2rQ8VnStPeglDLvRhEnJo3zlbAZzUtFKsTt1Kc2_wKG6GJE9ImMuT4RETNNzQ2AgIPlklG5kpXaIkeJo9nrqTgmMUshWL-RPl14ag4uPE4ioWs/s1600/LinkedIn.png)}#animation_satu-untuk-semuanya:hover li{opacity:.2}#animation_satu-untuk-semuanya li{-webkit-transition-property:opacity;-webkit-transition-duration:500ms;-moz-transition-property:opacity;-moz-transition-duration:500ms}#animation_satu-untuk-semuanya li a strong{opacity:0;-webkit-transition-property:opacity,top;-webkit-transition-duration:300ms;-moz-transition-property:opacity,top;-moz-transition-duration:300ms}#animation_satu-untuk-semuanya li:hover{opacity:1}#animation_satu-untuk-semuanya li:hover a strong{opacity:1;top:-10px}
  • Jika Anda telah selesai menempatkan atau memasang kode tersebut di atas dengan baik, maka proses selanjutnya adalah temukan kode “<data:post.body/>” pada template blog Anda.
  • Setelah menemukan kode di atas, selanjutnya silakan copy lalu pastekan kode di bawah ini tepat di bawah kode “<data:post.body/> “. Kode tersebut adalah sebagai berikut :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;'><b> Share this article to your friends : </b></div>
<ul class='social_satu-untuk-semuanya' id='animation_satu-untuk-semuanya'>
<li class='abfacebook'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Via-Facebook</strong></a>
</li>
<li class='abtwitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Via-Twitter</strong></a>
</li>
<li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Via-Google+</strong></a>
</li>
<li class='abreddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Via-Reddit</strong></a>
</li>
<li class='abstumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Via-Stumbleupon</strong></a>
</li>
<li class='abdig'>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Via-Digg</strong></a>
</li>
<li class='ablinkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>Via-LinkedIn</strong></a>
</li>
</ul>
</b:if>
  • Setelah Anda memasukkan kedua kode tersebut di atas dengan baik dan benar, silahkan anda “Pratinjau Template” Blog Anda.
  • Klik “ Simpan Template”, untuk menyimpan dan menerapkan perubahan pada template blog Anda.
Keterangan tambahan :
Apabila pada template blog Anda telah terpasang “Read More” Otomatis, maka gunakan kode “<data:post.body/>” yang kedua yang ada pada template Blog Anda.
Tampilan “Share Button”atau “Tombol Share” bisa Anda lihat  pada bagian bawah setiap Entri Posting pada Blog ini.

 Demikianlah Artikel yang saya publikasikan pada Blog Berbagai Artikel Menarik yang mengulas tentang “Cara Membuat “Share Button” di bawah Entri Posting Blog”. Semoga Artikel ini menarik dan bermanfaat untuk Anda.

Baca juga :
Berbagai Artikel Menarik
Share this article to your friends :
5/01/2014 12:46:00 AM
Posted by at
Labels: ,