Cara Memasang Tombol Share Facebook, Twitter, Google Plus, LinkedIn Pada Blog

Cara Memasang Tombol Share Facebook, Twitter, Google Plus, LinkedIn Pada Blog - Didalam sebuah artikel, memasang tombol share sangat penting. Memang pada template bawaan blogger telah tersedia tombol share, namun karena berbagai hal kita harus mengganti tombol share tersebut. Salah satunya mungkin karena tampilannya yang tidak sesuai dengan keinginan kita, kemudian menyebabkan loading blog lambat dan lain sebagainya.

Berikut ini merupakan tombol share yang saya gunakan sendiri yang akan saya bagikan. Mungkin gambarnya jadi kurang jelas karena saya telah men-setting ukuran gambarnya sama pada semua postingan. Untuk lebih jelasnya bisa lihat dari Tombol Share yang saya pakai. Tombol share ini saya peroleh dari Mbak Arlina. Mudah - mudahan sahabat juga menyukai tombol share yang akan saya bagikan ini. Memasang tombol share ini berfungsi untuk meningkatkan page view pada blog kita. Karena menurut informasi yang saya peroleh lalu lintas paling banyak selain Google merupakan bersumber dari Sosial Media seperti Facebook dan Twitter. Maka dari itulah Tombol share ini menjadi wajib ada pada sebuah blog.

Langkah - langkah memasang Tombol Share yaitu :

Login ke Dash Board Blogger Anda
Pilih Template > Html
Selanjutnya cari kode ]]></b:skin atau </style>, untuk mempermudah pencarian tekan Ctrl F. setelah di temukan tempatkan kode di bawah ini diatasnya :

/* 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}}

Langkah selanjutnya silahkan Anda cari kode <data:post.body/> . Terdapat beberapa kode tersebut, cari kode yang berada pada Post. Tempatkan kode di bawah ini di bawah kode <data:post.body/>

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

<div id='related-postsku'>

<font style='font-size:19px;color:#808080;font-family:Arial;'><b>Artikel Terkait: </b>

</font><font color='#fff'><b:loop values='data:post.labels' var='label'><data:label.name/>

<b:if cond='data:label.isLast != "true"'/><b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>

</b:if></b:loop></font>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>

</div>

</b:if>

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

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

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

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

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

<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='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'/>

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

<div class='tombol-berbagi'>

<a class='tombol-berbagi-lin' 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'/>

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

</div>

</b:if>

Sebelum Anda menyimpan kode yang telah Anda pastekan, jangan lupa untuk melihat Pratinjau untuk memastikan tidak terjadi eror pada template Anda. Setelah semuanya tidak ada masalah Anda dapat menyimpan. Dan lihat sekarang Anda telah memiliki tombol share media seperti yang ada pada blog ini.

Baca Juga : Cara Mengubah Template Bawaan Blogger Jadi Responsive

Belajar Blog

August 8, 2016

Cara Memasang Tombol Share Facebook, Twitter, Google Plus, LinkedIn Pada Blog

Trending

TOKOPEDIA