Cara Membuat Tombol Share Button Di Blogspot

Oleh:   Unknown   |   5/19/2016 12:14:00 PM

Bagikan Tweet Share Email

Pada Kesempatan kali ini saya ingin berbagi cara membuat atau memasang tombol share button di bawah postingan (artikel) blogspot, sebelum melanjutkan ke tutorial ini saya ingin menjelaskan fungsi dari tombol share ini. Tombol share button ini berfungsi memudahkan pengunjung blog yang ingin berbagi artikel atau informasi penting yang dapat berguna bagi orang lain ke jaringan (sosial media) yang mereka punya.

Tombol share disini terdapat 5 macam media sosial seperti RSS, Facebook, Twitter, Google+ dan Linkedin. Ketika anda akan membagikan suatu postingan tinggal pilih salah satu dari tombol share button tersebut. untuk membuatnya sangat mudah dan gampang di pahami, yuk simak artikel singkat ini. Cmiiw

Berikut Cara Penerapannya Pada Blog:
1. Masuk Ke Blogger Anda > Pilih Template > Klik Edit HTML > Cari kode di bawah ini kemudian pilih kode yang kedua dalam markup html dengan menekan CTRL + F pada keyboard anda > Paste > Lalu enter

<data:post.body/>

2. Salin kode html di bawah ini tepat setelah kode yang di sebutkan pada langkah pertama

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-12">
<ul class="social-network social-circle">
<li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>              
</div>
</b:if>

3. Selanjutnya terapkan kode css di bawah ini tepat sebelum ]]></b:skin> atau </style>

ul.social-network {
    list-style: none;
    display: inline;
    margin-left:0 !important;
    padding: 0;
}
ul.social-network li {
    display: inline;
    margin: 0 5px;
}
.social-network a.icoRss:hover {
    background-color: #F56505;
}
.social-network a.icoFacebook:hover {
    background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
    background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
    background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
    background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
    background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
    color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
    color:#44BCDD;
}
.social-circle li a {
    display:inline-block;
    position:relative;
    margin:0 auto 0 auto;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    text-align:center;
    width: 50px;
    height: 50px;
    font-size:20px;
}
.social-circle li i {
    margin:0;
    line-height:50px;
    text-align: center;
}
.social-circle li a:hover i, .triggeredHover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms--transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
}
.social-circle i {
    color: #fff;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
}
a {
 background-color: #D3D3D3; 
}

4. Apabila sudah menerapkan dengan benar silahkan klik save template

Demikianlah cara memasang tombol share button pada blogspot, kurang lebihnya saya mohon maaf, selamat mencoba dan semoga sukses.