Cara Pasang Tombol Share Di Blogspot

Cara Mudah Pasang Tombol Share di Blogspot.

Pada postingan kali ini saya akan berbagi beberapa share button pada postingan yang dipakai untuk blog anda. Tutorial ini Saya buat untuk membantu para blogger yang masih bingung mencari-cari tombol share yang cocok.

Tujuan kita membuat share button ini adalah untuk memudahkan pengunjung yang ingin berbagi artikel yang dirasa bermanfaat ke jaring sosial media mereka. Seperti Facebook, Twitter, Google plus, Linkedin dan lain sebagainya. Tapi yang saya bagikan dipostingan kali ini diantaranya Share button Facebook, Twitter, Google Plus dan Linkedin. Share Button ini nantinya akan muncul di setiap postingan blog anda.

( Baca Juga Cara Membuat Tombol Follow Me Twitter Di Blogspot )

Pemasangan Share Button ini selain berguna untuk meningkatkan trafik ke Blog kita juga berguna untuk membuat Blog kita lebih tampak indah jika diposisikan dengan baik. Telah banyak Postingan yang memberikan cara memasang Share Button ini di dalam postingan, namun tidak sedikit pula mereka yang tidak mengerti cara memasangnya. Hal ini pula yang menimpa saya waktu awal-awal mengenal dunia blog.

Maka dari itu pada postingan kali ini saya akan mengajak anda untuk belajar memasang Share Button di blogspot dengan mudah. Share Button yang akan kita pasang kali ini ada 3 jenis yang akan diterapkan di blog anda. Diantara Share Button yang saya berikan kali ini, salah satunya ada yang unik dari tombol sosial media ini yaitu di bagian sebelah kanan terdapat gambar emoticon / smile yang disertai slogan bebagi gratis, hal itu tentu saja akan menarik perhatian pengunjung untuk mengklik dan membagikanya. Dan tentu saja dampak postifnya adalah jika yang di klik itu google plus, maka nilai SEO artikel kita akan mempunyai kelebihan di mata google.

( Baca Juga Cara Mudah Membuat Tab Menu Bar Di Blogspot )

OK lah.....Untuk itu kita langsung aja ke tahapannya.

I. Share Button Part I.
Pada Share Button ini, anda bisa melihatnya pada gambar di bawah ini :

Berikut Langkah-langkah Pemasangannya:

1. Login ke Blogger > Template > Klik Edit HTML > Kemudian cari kode di bawah ini dan pilih yang ke dua dalam markup post (bukan mobile post).
<data:post.body/>
2. Apabila sudah ketemu, salin kode di bawah ini tepat setelah kode yang disebutkan tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='tombol-berbagi-arlina'>

<div class='tombol-berbagi-arlina-fb'>

<a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>

<a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>

</div>

<div class='tombol-berbagi-arlina-tw'>

<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>

<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>

</div>

<div class='tombol-berbagi'>

<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>

<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>

</div>

<div class='tombol-berbagi'>

<a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>

<a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>

</div>

</div>

</b:if>

3. Setelah terpasang, kemudian terapkan kode di bawah ini tepat sebelum
]]></b:skin> atau </style>.

/* CSS Share Button */

.tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}

.tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}

.tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}

.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}

.tombol-berbagi-fb-label{color:#2d609b}

.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}

.tombol-berbagi-tw{background-position:0 -43px}

.tombol-berbagi-tw-label{color:#00c3f3}

.tombol-berbagi-gp{background-position:0 -86px}

.tombol-berbagi-gp-label{color:#f00}

.tombol-berbagi-lin{background-position:0 -129px}

.tombol-berbagi-arlina a{color:#999;transition:all .3s;}

.tombol-berbagi-arlina a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){

.tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}

.tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

4. Langkah berikutnya klik tombol save Template dan lihatlah hasilnya.

( Baca Juga Cara Membuat Read More/Bacaan Selanjutnya Di Blogspot )

II. Share Button Part II.
Pada Share Button ini, anda bisa melihatnya pada gambar di bawah ini :

Berikut Langkah-langkah Pemasangannya:
1. Login ke Blogger > Template > Klik Edit HTML > Kemudian cari kode di bawah ini dan pilih yang ke dua dalam markup post (bukan mobile post).
<data:post.body/>

2. Setelah menemukannya, kemungkinan besar di blog Anda akan ada dua atau lebih kode seperti diatas. Pilih yang pertama dan copy script dibawah ini.

<b:if cond='data:blog.pageType == "item"'>

<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>

<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>

Share on :

</div>

<div style='float:left;padding-left:10px;'>

<a name='fb_share' type='button_count'/>

<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share'

type='text/javascript'>

</script></div>

<div style='float:left;padding-left:10px;'>

<a class='twitter-share-button' data-count='horizontal'

data-via='User Name'

href='http://twitter.com/share'>Tweet</a><script

src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</div>

<div style='float:left;padding-left:10px;'>

<!-- Place this tag where you want the +1 button to render -->

<g:plusone size="medium"></g:plusone>

<!-- Place this render call where appropriate -->

<script type="text/javascript">

(function() {

var po = document.createElement('script'); po.type =

'text/javascript'; po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(po, s);

})();

</script>

</div>

</div>

</b:if>

Untuk memasangnya ada dua cara, jika ingin tombol share ada dibawah judul postingan, paste script diatas ini tepat diatas kode <data:post.body/> tapi jika ingin memasang tombol share dibawah postingan, paste script diatas tepat dibawah <data:post.body/>.

( Baca Juga Cara Membuat Kotak Script Di Posting Blogspot )

III. Share Button Part III.
Pada Share Button ini, anda bisa melihatnya pada gambar di bawah ini :

Ikuti langkah-langkahnya di bawah ini :
1. Seperti biasanya , anda login ke blogger dan pilih template => Edit Html.

2. Salin dan tempelkan kode dibawah ini diatas kode ]]></b:skin>.

/* social share buttons */

.social-buttons-box {

height: 67px;

background: url(http://1.bp.blogspot.com/-OYT-JDviP2k/VHrWc3ofkiI/AAAAAAAAEJs/yyNAhuCUELA/s1600/rect3799.png) no-repeat 200px 0px;

margin:20px 0 15px;

overflow:hidden;

}

.social-buttons {

margin:0 0;

height:67px;

float:left;

}

.social-buttons .share {

float:left;

margin-right:10px;

display:inline-block;

}

.share-btn {

margin:15px 0 25px;

height:20px;

overflow:hidden;

}

3. Selanjutnya copy kode berikut ini, lalu taruh di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'>.

<div class='social-buttons-box'>

<div class='social-buttons'>

<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>

<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>

<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>

</div>

</div>

<!-- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>-->

<div style='clear: both;'/>

4. Kemudian kita pasang kode js pemanggil sosmed tadi , caranya cari kode </body> dan pasang kode dibawah ini diats kode tersebut :

<script>

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>

<script>

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);

</script><div id='fb-root'/>

<script type='text/javascript'>

//<![CDATA[

(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

//]]>

</script>

5. Terkahir Klik Save dan lihat hasilnya.

Taraa kini anda sudah bisa mebuat sendiri share button yang keren banget.

( Baca Juga Cara Daftar Dan Memasang Histats Di Blog Terbaru Cepat Dan Mudah )

Itulah beberapa Share Button beserta penjelasan dan Cara untuk memasangnya ke blog, semoga tutorial ini bermanfaat untuk anda, oh iya jika anda masih bingung dan mengalami kendala diatas, silahkan berkomentar dibawah ini siapa tahu saya bisa membantu mengatasi masalah widget Share Button diatas, namun jika anda mengikuti caranya diatas mudah-mudahan tidak terjadi apa-apa gak. Semoga bermanfaat dan Terimakasih....