Cara Membuat Tombol Share Pada Blogger

Tombol share merupakan salah satu fitur yang wajib Anda gunakan pada blog kesayangan Anda. Tombol share berguna untuk memudahkan pengunjung blog Anda untuk membagikan artikel yang sedang pengunjung baca.

Tombol share yang akan Saya akan bagi ini terletak di tepat bawah artikel blog Anda dan hanya terdapat 3 tombol share saja, seperti Facebook, Twitter, dan Google Plus.

Sebelum Anda menggunakan fitur ini, terlebih dahulu Anda harus menempatkan kode Font Awesome pada blog Anda. Jika Anda tertarik untuk menggunakan tombol share pada blog Anda, silahkan Anda simak langkah-langkah dibawah ini.

1. Login ke blogger
2. Klik "Template" kemudian klik "Edit HTML"
3. Selanjutnya cari kode </head> . Gunakan Ctrl + F agar lebih mudah.
4. Setelah itu masukkan kode bawah ini tepat diatas kode </head>

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

5. Selanjutnya cari kode <data:post.body/> dan letakkan kode dibawah ini tepat dibawah kode <data:post.body/>

<h4 class='post-bawah'>Bagikan Yuk!!</h4>
<div class='sharepost'>
    <ul>
        <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' /></a>
        </li>
        <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' /></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' /></a>
        </li>
    </ul>
</div>

6. Setelah itu cari lagi kode ]]></b:skin> dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

h4.post-bawah {
    text-align: center;
}
.sharepost {
    padding: 20px;
    text-align: center;
}
.sharepost li a {
    padding: 10px;
    width: 20px;
    height: 20px;
    color: #fff;
    display: inline-block;
    border-radius: 50%;
    margin: 0 10px;
    transition: all 0.5s;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
}
.sharepost li a:hover {
    box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
.sharepost li a.facebook {
    background: #3A5795;
}
.sharepost li a.twitter {
    background: #1DA1F2;
}
.sharepost li a.gplus {
    background: #DB4437;
}

6. Langkah terakhir yaitu klik "Simpan Template"

Itulah tutorial cara membuat tombol share pada blogger. Semoga artikel ini bermanfaat dan terima kasih telah mengunjungi blog sederhana Saya.
Source: http://www.bloggerku.com/2016/05/membuat-share-button-pada-blogger.html