Cara Pasang Tombol Share Di Blogspot

Cara Mudah Pasang Tombol Share di Blogspot.

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

Tujuan kita membuat share button ini yakni untuk memudahkan pengunjung yang ingin menyebarkan artikel yang dirasa bermanfaat ke jaring sosial media mereka. Seperti Facebook, Twitter, Google plus, Linkedin dan lain sebagainya. Tapi yang gue 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 memiliki kegunaan untuk meningkatkan trafik ke Blog kita juga memiliki kegunaan untuk membuat Blog kita lebih tampak cantik kalau diposisikan dengan baik. Telah banyak Postingan yang menunjukkan cara memasang Share Button ini di dalam postingan, namun tidak sedikit pula mereka yang tidak mengerti cara memasangnya. Hal ini pula yang menimpa gue waktu awal-awal mengenal dunia blog.

Maka dari itu pada postingan kali ini gue akan mengajak anda untuk berguru 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 gue berikan kali ini, salah satunya ada yang unik dari tombol sosial media ini yaitu di bab 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 yakni kalau 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 pribadi aja ke tahapannya.

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

Berikut Langkah-langkah Pemasangannya:

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

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

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

</div>

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

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

</div>

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

</div>

</b:if>

3. Setelah terpasang, kemudian terapkan instruksi di bawah ini sempurna 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwb6gkB8tHnDAFI7JZ16tJH9Hqs5G1nHJINmGp-iuAc-iiEcIpg51e9KhDcAD0WolOkU8sdEVql9fBB8r8kHyZnxDX7-9BaEsggeBzpv1sYx5vszrhCKKPhyphenhyphengVyeyNsYIjzwux0O2iv-jW/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 mampu melihatnya pada gambar di bawah ini :

Berikut Langkah-langkah Pemasangannya:
1. Login ke Blogger > Template > Klik Edit HTML > Kemudian cari instruksi 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 instruksi menyerupai diatas. Pilih yang pertama dan copy script dibawah ini.

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

Share on :

</div>

type='text/javascript'>

</script></div>

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

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

(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>

</b:if>

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

( Baca Juga Cara Membuat Kotak Script Di Posting Blogspot )

III. Share Button Part III.
Pada Share Button ini, anda mampu 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 instruksi dibawah ini diatas kode ]]></b:skin>.

/* social share buttons */

.social-buttons-box {

height: 67px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXFnd8eElF1OwSFEBhHaoqNWvRjqQ-2cT494vrcZw7Yo7eqAw0e1d6PoeQZRso4zpTvaxAt8u2LvmD1ObB41UX_i2uv3xKiBJVAmz7rvd2BOfEJBZYwCWMixP9nLiFc4EuozOj5GThab58/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 instruksi berikut ini, lalu taruh di bawah kode <data:post.body/> atau mampu juga <div class='post-footer'>.

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

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

window.___gcfg = {lang: 'id'};

(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>

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

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

//<![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 mampu 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, supaya tutorial ini bermanfaat untuk anda, oh iya kalau anda masih galau dan mengalami kendala diatas, silahkan berkomentar dibawah ini siapa tahu gue mampu membantu mengatasi problem widget Share Button diatas, namun kalau anda mengikuti caranya diatas mudah-mudahan tidak terjadi apa-apa gak. Semoga bermanfaat dan Terimakasih....

Cara Pasang Tombol Share Di Blogspot

Unknown

0 komentar:

SOCIAL BOOKMARK

Cara Pasang Tombol Share Di Blogspot

Unknown

Related Post

comment 0 komentar:

0 komentar: