Bloggerku Logo

BLOGGERKU

Bloggerku Logo
BLOGGERKU
AboutDisclaimerPrivacyTOS
Membuat Share Button Pada Blogger Material Design

Membuat Share Button Pada Blogger Material Design

Dihak M Nur A
di May 08, 2016
Membuat Share Button Pada Blogger Material Design - Kali ini bloggerku akan membagikan sebuah kode untuk membuat tombol share, pada tutorial ini tombol share yang akan saya bagikan adalah versi Material Design.

Share Button ini terletak pada bagian bawah artikel, ini sangat berguna untuk memudahkan pengunjung untuk membagikan artikel yang dibacanya ke Social Media. Nah, pada tutorial ini hanya terdapat 3 tombol saja, yaitu tombol untuk share ke Facebook, Twitter, dan Google Plus. Silahkan sobat kreasikan dengan keinginan sobat agar lebih cocok pada blog sobat.

Oke, kita lanjut ke langkah pemasangan

Note :
Template yang digunakan harus sudah memasang Font Awesome. Bila belum, silahkan baca artikel ini Cara Memasang Font Awesome Di Blogger

Cara Memasang Share Button :


  1. Seperti biasa sobat login dulu ke blog sobat
  2. Setelah itu masuk ke Template > Edit HTML
  3. Tambahkan kode di bawah ini di tempat yang sobat inginkan, untuk menambahkannya di bawah artikel bisa cari kode <data:post.body/>
  4. Lalu copykan kode ini tepat di bawahnya
    <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>
  5. Setelah itu tambahkan CSS di bawah ini tepat di atas 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 Save & Lihat hasilnya

Nah, sekial artikel tentang Membuat Share Button Pada Blogger Material Design, jangan lupa tinggalkan komentar yh..
Bagi yang kesulitan bisa berkomentar di kolom komentar, Insyallah akan kami bantu..
0
Shares