Cara memasang Tombol Share di Blogger, Responsive!

Oke, pada kali ini saya akan berbagi tips yaitu Cara Membuat dan Memasang Tombol Share diatas Related Post. Pada postingan kemaren saya memposting Cara Memasang Related Post Bergambar. Sekarang saya akan membahas Tombol Share di Blogger. Mungkin tombol share ini sudah tidak asing lagi dikalangan web atau situs, karena ini memang dibutuhkan. Hal ini sangat bermanfaat, diantaranya adalah agar pengunjung dapat membagikan sebuah postingan anda di web atau situs atau juga Blogger. Mungkin saya rasa cukup ya, mungkin kalian semua pada faham lah apa kegunaan Tombol Share ini. Karena sudah faham, jadi gausah panjang lebar lagi untuk dijelasin. Langsung saja deh kita praktekan.

    Pastikan anda mem-backup terlebih dahulu Template anda, misalkan pindahkan ke Notepad!, Karena jika tidak sesuai dengan keinginan anda Tombol Share ini, maka dengan mudah membalikan seperti semula.

Screenshoot :

    Cara memasang Tombol Share dan Efek Slide Blogger.

Cara Pertama :

1. Masuk ke Blogger - Login.
2. Template -> Edit HTML.
3. Temukan kode ]]></b:skin> atau </style> .
4. Copy - Paste kode berikut ini, dan letak kan diatas kode ]></b:skin> atau </style> .

#button-count-share { width:100%; overflow:hidden; background:transparent; margin:0 auto; padding:3px; }
#button-count-share span { float:left; position:relative; font-size:13px; color:#fff; margin:12px 5px 12px 5px; }
.button-share { background:#dce0e0; position:relative; display:block; float:left; height:40px; overflow:hidden; width:140px; margin:4px; border-radius:3px; }
.ikons { display:block; float:left; position:relative; z-index:3; height:100%; vertical-align:top; width:38px; text-align:center; }
.ikons i { color:#fff; line-height:33px; }
.slide-share { z-index:2; display:block; height:100%; left:38px; position:absolute; width:108px; margin:0; }
.slide-share p { font-family:Verdana; font-weight:400; border-left:1px solid rgba(255,255,255,0.35); color:#fff; font-size:14px; left:0; position:absolute; text-align:center; top:10px; width:100%; margin:0; }
.button-share .slide-share { transition:all 0.4s ease-in-out; }
.facebook .fb_iframe_widget { display:block; position:absolute; right:5px; top:0; z-index:1; }
.twitter iframe { left:50px; top:10px; z-index:1; display:block; position:absolute; }
.google #___plusone_0 { width:90px !important; top:10px; right:5px; position:absolute; display:block; z-index:1; }
.facebook .ikons,.facebook .slide-share { background:#4f79bc; }
.twitter .ikons,.twitter .slide-share { background:#63cef2; }
.google .ikons,.google .slide-share { background:#f36261; }
.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share { left:180px; opacity:0.6; }

5. Jika sudah? Temukan kode <data:post.body/> dan letakkan kode dibawah ini tepat dibawahnya.
Biasanya kode <data:post.body/> lebih dari satu kode, silakan anda pilih saja yang kedua, atau yang ketiga. Menurut saya sih kode yang kedua, soalnya saya udah nyoba Work!

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clear'/>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Share</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>Like</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<div class='slide-share'>
<p>G+</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;id&#39;};

  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
<div class='slide-share'>
<p>Tweet</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</div>
<div class='clear'/>
</b:if>

6. Terakhir, Memasang Font Awesomse sesuai dengan Screenshoot. Temukan lagi kode </head> . Dan letakkan kode dibawah ini tepat diatasnya.

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

7. Selesai!
8. Silakan anda, klik postingan anda dan lihat dibagian bawah.

Mudah bukan? Kebetulan sekali blog saya tidak memasang Widget ini, saya menggunakan yang sederhana saja, karena saya mengujinya di Blogger saya yang tidak terpakai dan jadi bahan pengujian saya^.^ . Jika anda masih bingung? Silakan komentar dibawah ini, pasti akan saya jawab pertanyaan anda. Saya rasa cukup, Semoga artikel ini Bermanfaat!

Blogger itu menyenangkan^.^

Share this post

Related Post