Memasang Flat Design Social Share Button di Blog

Trafik yang ramai pada blog adalah impian semua blogger termasuk saya. Lalu bagaimana cara membuat trafik blog meningkat? Selain artikel yang berkualitas dan backlink, peranan lalu lintas dari sosial media juga memiliki peran yang sangat penting.

Bagi seorang blogger yang baru saja terjun di dunia per-blogan (seperti saya sendiri) ini tidak akan langsung mendapatkan pengunjung organik begitu saja. Apa itu pengunjung organik? Pengunjung organik yaitu pengunjung yang datangnya langsung dari Mesin Pencari seperti google, bing, dan lain-lain.

Sosial media akan menjadi pilihan lain sebelum para pengunjung blog datang dari mesin pencari google, yahoo ataupu mesin pencari lainnya. Untuk itu anda memerlukan apa itu yang namanya “Share Button Social Media"

Share Button atau sering disebut juga Tombol Bagikan. Fungsi dari tombol bagikan ini adalah untuk membagikan/share artikel anda ke sosial media sehingga artikel anda akan dibaca pengunjung yang melihat artikel anda di sosial media.

Flat Design Social Media Share Button

1. Login Blogger

2. Tema - Edit HTML

3. Simpan kode di bawah ini sebelum kode </head>

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

Tidak perlu memasang kode di atas apabila pada template anda sudah terpasang kode tersebut agar tidak terdoubling.

4. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

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

5. Simpan kode di bawah ini di bawah kode  <data:post.body/>

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

Simpan tema, selesai.

Terimakasih telah membaca artikel Flat Design Social Media Share Button yang juga dapat mempercantik tampilan blog anda. Jangan lupa Subscribe blog ini untuk mendapatkan update artikel terbaru yang akan langsung dikirim via email Farhan Web. Cara Subscribe Blog Farhan Web.