BloggARsTombol share sangat memudahkan bagi pengunjung yang ingin membagikan artikel pada blog Anda ke sosial medianya dan itupun sangat menguntungkan bagi Anda dan blog Anda karena dengan artikel dibagikan oleh pengunjung maka sangat memungkinkan artikel dibaca oleh banyak orang atau teman dari orang yang membagikan artikel tersebut.
Membuat Tombol Share Ringan dan Responsive di Blog
Namun ingat pastikan css diatas dengan versi 4.5 atau lebih seperti 4.7 untuk versi sekarang ini. Setelah terdapat link stylesheet font awesome maka lakukan penjelasan berikut. Sebelumnya untuk demo anda bisa lihat pada syntax demo dibawah ini dan Anda bisa mencoba untuk menkliknya.<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
- Masih pada Edit HTML, pertama tekan keyboard "Ctrl+F" dan cari kode script seperti berikut.
- Ada beberapa kode tersebut pada html template, simpan kode HTML berikut dibawah kode script point 1 pada akhirannya. Cobalah dibeberapa kode sampai tombol share benar-benar dibawah postingan blog.
- Setelah itu jangan lupa untuk memasukan kode CSS untuk tampilan tombol share. Cari terlebih dahulu kode ]]></b:skin> kemudian salin dan simpan kode css berikut tepat diatasnya.
- Setelah semua kode script maupun css yang saya berikan sudah dipasang pada template blog maka klik "Simpan template" dan lihat hasilnya pada postingan blog Anda.
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='bg-teks'>Bagikan ke orang lain!!</div>
<div class='tombol-berbagi'>
<a class='berbagi-gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google
</a>
<a class='berbagi-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='blank'>
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook
</a>
<a class='berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='blank'>
<i class="fa fa-twitter" aria-hidden="true"></i> Twitter
</a>
<a class='berbagi-in' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='blank'>
<i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin
</a>
</div>
</b:if>
<div class='bg-teks'>Bagikan ke orang lain!!</div>
<div class='tombol-berbagi'>
<a class='berbagi-gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>
<i class="fa fa-google-plus" aria-hidden="true"></i> Google
</a>
<a class='berbagi-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='blank'>
<i class="fa fa-facebook" aria-hidden="true"></i> Facebook
</a>
<a class='berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='blank'>
<i class="fa fa-twitter" aria-hidden="true"></i> Twitter
</a>
<a class='berbagi-in' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='blank'>
<i class="fa fa-linkedin" aria-hidden="true"></i> Linkedin
</a>
</div>
</b:if>
/*--Tombol Share Bloggars.com Design--*/
.tombol-berbagi {border-top: 2px solid;padding: 5px 10px 10px 5px;width: 100%;}
.tombol-berbagi a {color:#FFF;}
.tombol-berbagi a i {border-right: 1px solid;padding-right: 5px;}
.bg-teks {font-size: 16px;margin: 5px;text-align: left;font-weight: bold;}
.berbagi-gp, .berbagi-fb, .berbagi-tw, .berbagi-in {color: #fff;display: inline-block;font-size: 13px;line-height: 100%;margin: 7px;border-radius: 5px;margin: 2px;padding: 7px;text-align: center;}
.berbagi-gp {background: #dc4e41;}
.berbagi-fb {background:#3d5b99;}
.berbagi-tw {background:#1da1f2;}
.berbagi-in {background:#0077b5;}
@media only screen and (max-width:480px){
.berbagi-gp, .berbagi-fb, .berbagi-tw, .berbagi-in {width: 100px;}}
.tombol-berbagi {border-top: 2px solid;padding: 5px 10px 10px 5px;width: 100%;}
.tombol-berbagi a {color:#FFF;}
.tombol-berbagi a i {border-right: 1px solid;padding-right: 5px;}
.bg-teks {font-size: 16px;margin: 5px;text-align: left;font-weight: bold;}
.berbagi-gp, .berbagi-fb, .berbagi-tw, .berbagi-in {color: #fff;display: inline-block;font-size: 13px;line-height: 100%;margin: 7px;border-radius: 5px;margin: 2px;padding: 7px;text-align: center;}
.berbagi-gp {background: #dc4e41;}
.berbagi-fb {background:#3d5b99;}
.berbagi-tw {background:#1da1f2;}
.berbagi-in {background:#0077b5;}
@media only screen and (max-width:480px){
.berbagi-gp, .berbagi-fb, .berbagi-tw, .berbagi-in {width: 100px;}}
Baca juga "Cara Memasang Back To Top pada HTML Blog"
Apabila tidak terdapat tombol share maka biasanya kesalah pada point ke-2 yaitu penyimpanan kode html pada <data:post.body/> tidak tepat, cari kembali kode point ke-1 dan simpan kembali kode html pada point ke-2 dan coba satu persatu sampai berhasil dipasang tombol share ringan dan responsive yang saya berikan pada artikel ini.
Begitulah artikel kali ini yang menjelaskan "Cara Membuat Tombol Share Ringan dan Responsive di Blog", apabila masih ada yang ingin ditanyakan silakan tanyakan pada kolom komentar atau bisa hubungi saya secara pribadi di sosial media saya, terima kasih.
11 Comments :
Fail bagaimana kang?
Makasih gan, Tombol share nya keren... good!
Sama-sama kang.
Tombol sharenya bagus gan
Terima kasih kang.
terima kasih gan, mohon ijin pakai
Silakan kang.
keren manstaav boskuh
Dulu ndak bisa krn masih newbie, skrng bisa hehe
Kok tombol sharenya di hp ga mnuncul hanya di browser saja,,,apa solusinya
Tidak ada tombolnya di tampilan handpone, gimana cara memunculkannya
Beri komentar dengan menggunakan Bahasa yang Baik dan Sopan!
Didalam komentar dilarang mencantumkan link hidup dan apabila Anda melakukannya maka Admin berhak menghapusnya.