Info Sekitar Kita Blogger Pemula Cara Memasang Tombol Share Keren di Blogspot Lengkap

Cara Memasang Tombol Share Keren di Blogspot Lengkap

Unknown 5:05 PM Blogger Pemula

Heoyuuuu teman.

Media Sosial adalah salah satu ajang untuk mempromosilan blog atau website kita ke orang banyak. Jika kamu jeli untuk memanfaatkan media sosial, bukan tidak mungkin blog atau webiste kita akan semakin banyak pengunjung.

Maka dari itu, untuk memudahkan para pengunjung atau kalian sendiri untuk mempromosikan blog atau website, kalian harus memasang sebuah widget tombol share media sosial di setiap postinngan atau artikel yang kalian buat. Barangkali saja ada pengunjung yang berbaik hati untuk membagikan postingan atau artikel kalian ke media sosial. Jadi kalian tidak terlalu repot untuk membuat traffic blog kamu menjadi ramai. Seiring waktu berjalan, blog kamu akan semakin banyak pengunjung.

Nah, bagaimana caranya untuk menambahkan tombol share di setiap postingan atau artikel yang kita buat di blog?

Ikutilah langkah-langkah berikut ini :

1. Masuk ke Dashboar Blogspot.

2. Pilih Menu Template.

3. Klik Edit Html

4. Cari kode <head>

5. Copy lalu Paste kode berikut tepat dibawah kode <head>

6. Kemudai cari kode <data:post.body/>

loading...

7. Copy lalu paste kode berikut ini tepat diatas kode <data:post.body/> jika ingin tombol share muncul di bawah Judul Postingan.
Atau Paste tepat dibawah kode <data:post.body/> jjika ingin tombol share muncul diakhir artikel atau postingan.

<style>
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li .twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li .gplus{background-color:#dd4b39;}
.sharepost li .pinterest{background-color:#cc2127;}
.sharepost li .linkedin{background-color:#0976b4;}
.sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType == "item"'>
        <div class='sharepost'>
                <ul>
<li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
</ul>
</div>
</b:if>

8. Klik tombol Simpan.

9. Selamat, tombol share sudah muncul di setiap artikelmu.

Semoga bermanfaat.

Author : Unknown

Share this

Mohon berkomentar dengan Sopan. Terima kasih

Subscribe to: Post Comments (Atom)