Cara Memasang Tombol Social Share Button di Blog

Banyak para blogger yang mencari tutorial cara membuat share button yang sederhana. Kali ini saya akan berbagi tutorial tersebut. Untuk blog yang simple sederhana share button ini sangatlah cocok karena sama-sama sederhana. Sosial share button ini akan kita buat dengan menggunakan CSS dan font awesome.

Jika blog belum menerapkan font awesome silakan anda buka link berikut Cara Memasang dan Menggunakan Font Awesome Di Blog. Memasang tombol sosial share button merupakan cara yang bagus untuk meningkatkan visitor blog anda. Ketika pengunjung menemukan artikel yang bermanfaat di blog anda maka mereka akan membagikannya ke media sosial.

Dengan memasang sosial share button ini maka pengunjung dengan mudah bisa membagikan artikel anda ke media sosial dengan begitu maka akan meningkat views blog anda.

Manfaat Memasang Sosial Share Button

Untuk manfaat memasang sosial share button mungkin tidak perlu dijelaskan panjang lebar. Manfaat yang mungkin bisa anda rasakan adalah anda akan mendapatkan views dari pengunjung yang membagikan artikel anda. Memang itulah manfaat yang bisa dirasakan.

Namun selain bertambahnya pengunjung artikel yang dibagikan juga akan mendapatkan kedudukan tersendiri di mesin pencari. Jika suatu artikel sering dibagikan maka artikel tersebut sangat membantu oleh sebab itu artikel tersebut memiliki kedudukan tersensiri di google. 

Cara Memasang Sosial Share Button

Langkah 

Silakan masuk ke blogger, buka Template → Edit HTML. Salin kode dibawah ini dan letakkan diatas kode ]]></b:skin>

/* CSS Share Button */
.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}

Langkah 2 (Jika sudah memasang font awesome lompati langkah 1)

Salin kode dibawah ini lalu letakkan diatas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah 3 

Silakan anda cari kode <data:post.body/> dan salin kode dibawah ini lalu letakkan dibawah kode <data:post.body/>

<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&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;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 + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>

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

Jika anda menemukan kode <data:post.body/>  lebih dari satu di template blog anda,silakan sesuaikan dengan template blog anda jika sosial share button tidak muncul. Coba satu persatu.

Lalu simpan template

Jika share button sudah muncul mungkin cukup sekian yang bisa saya bagikan. Semoga membantu dan bermanfaat.