Cara Mudah Membuat Tombol Share di Blog : Lengkap

0
19
views

Cara buat tombol share di blog –  Media Sosial merupakan salah satu cara untuk mempromosikan sebuah blog agar memiliki banyak pengunjung.

Jika anda pintar dalam memanfaatkan media sosial seperti Facebook, Twitter, Instagram, Google+ atau yang lainnya, bukan hal yang sulit untuk mendapatkan laporan pengunjung blog anda agar terlihat runcing karena lonjakan pengunjung yang tinggi.

Untuk mengoptimalkan penggunaan media sosial itu, anda juga dapat memberikan fasilitas kepada pengunjung blog anda agar memudahkan mereka untuk membagikan artikel hanya dengan sekali klik saja dan tanpa perlu membuka situs media sosial terlebih dahulu.

Jika anda tidak memfasilitasi hal tombol share media sosial, ini akan mengakibatkan pengunjung anda malas untuk membagikan artikel anda. Kecuali memang benar-benar artikel anda berkualitas dan sangat menarik.

Untuk itu saya sarankan anda untuk menmasang tombol social share di blog Anda.

Seperti apa yang sudah anda baca pada judul artikel ini “Cara Mudah Membuat Tombol Share di Blog : Lengkap”. Saya akan membagikan tombol social share seperti yang saya pakai diblog ini.

Untuk lebih lengkapnya silahkan anda ikuti langkah-langkah dibawah ini :

Cara Membuat Tombol Share di Blog

Cara Mudah Membuat Tombol Share di Blog : Lengkap
Gamabr diatas merupakan tombol share yang dipake di blog ini, gimana menarik kan? pada tutorial kali ini saya memasang tombol share tersebut di akhir postingan. Anda dapat menyesuaikannya sendiri.
CARA PEMASANGAN : 
1. Pertama silahkan anda masuk ke dashboard blogger anda.
2. Kemudian menuju ke template – edit html.
3. Lalu cari kode <head> (atau anda dapat menekan tombol ctrl+f kemudian cari kode tadi dikolom pencarian)
4. Setelah ketemu, copy dan paste script dibawah ini tepat dibawah kode tadi.
<link href=’https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css’ rel=’stylesheet’/>

5. Selanjutnya cari kode <data:post.body/> ,biasanya ada lebih dari 1 kode. Anda cari saja kode kedua atau ketiga.
6. Jika sudah ketemu, kemudian copy paste script dibawah ini tepat dibawah kode <data:post.body/> untuk menempatkan tombol social share di akhir 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 == &quot;item&quot;’>
<div class=’sharepost’>
<ul>
<li><a class=’twitter’ expr:href=’&quot;http://twitter.com/share?url=&quot; + data:post.url’ rel=’nofollow’ target=’_blank’ title=’Twitter Tweet’><i class=’fa fa-twitter’/>Tweet</a></li><li><a class=’facebook’ expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url’ rel=’nofollow’ target=’_blank’ title=’Facebook Share’><i class=’fa fa-facebook’/>Share</a></li><li><a class=’gplus’ expr:href=’&quot;http://plus.google.com/share?url=&quot; + 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=’&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’ target=’_blank’><i class=’fa fa-linkedin’/>Share</a></li>

<li><a class=’pinterest’ expr:href=’&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;’ target=’_blank’><i class=’fa fa-pinterest’/>Share</a></li>

</ul>
</div> </b:if>

7. Kemudian Simpan.

Selesai, silahkan anda cek apakah tombol nya sudah muncul di blog anda.

PENUTUP
Nah, kurang lebih seperti itulah bagaimana cara memasang tombol social share di blog.

Jika anda memiliki keluhan dalam artikel ini, bisa anda tanyakan di kolom komentar.  Dan hanya itu saja yang dapat saya sampaikan hari ini. Semoga hari anda menyenangkan. Jangan lupa share ya! thanks

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here