Kali ini saya mau berbagi sedikit tentang ilmu blogging, ilmu yang pastinya sesuai dengan judul diatas. Mumpung lagi puasa, siapa tahu barokah, dan dapat banyak pahala. Amin.
Tombol berbagi adalah sebuah tombol yang berfungsi untuk membagikan sebuah artikel/konten ke sosial media yang diinginkan. dengan cara mengklik salah satu tombol icon media sosial. contohnya : media sosial facebook, google plus, twitter, digg, tumblr serta media sosial lainnya.
Memasang share button di blog sebenarnya sangat penting untuk blog karena tombol ini adalah salah satu langkah untuk memajukan blog dan meningkatkan trafik blog. Dengan memasang tombol share di bawah postingan ini ketika pengunjung mengunjungi blog kita, kemudian menyukai artikel pada blog kita, maka tombol ini berguna untuk pengunjung membagikan artikel kita ke teman-temannya. Yahh.. barangkali artikel kita dapat membantu teman dalam menemukan solusi dalam mengatasi masalah.
Okelah... Gak pake lama-lama, langsung Aja... Check this out.
Langkah #1. Silahkan login dan masuk ke dalam dashboard blogger sobat. Setelah itu masuk ke bagian menu Template > Edit HTML.
Langkah #2. Tambahkan kode CSS dibawah ini tepat diatas kode </b:skin> atau kode </style>.
/* share button ala Badpeole */
#share-this{overflow:hidden;margin:10px 18px;line-height:1.4em}#share-this a{float:left;display:block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}#share-this a.this-fb{background:#395796;}#share-this a.this-tw{background:#4cb0ea;}#share-this a.this-gp{background:#de3425;width:44px;padding:0;text-align:center;height:41px;overflow:hidden;}#share-this a.this-gp i{margin:5px 0 0;text-align:center;padding:0}#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-gp:hover {opacity:.9}#share-this i {margin-right:12px}
.this-fb i,.this-tw i,.this-gp i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh26_g_ebLrv3o5zDCQkHYjyaBN3OTNiU6uBMS4goY45E4eR-cUa_9g1OcSPw4bPRZp9qBED0LCOzhtBgmW3tFRuJ0Rd9pfW2-ZVwYhbOYTNBaBwtERYVRDRDfarM_6oU3euUVBvax_eLE/s1600/sosmed22.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}.gp-del{display:none}
.this-fb i{background-position:0 -100px;margin-top:-4px}.this-tw i{background-position:0 -150px}.this-gp i{background-position:0 -200px}.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}
@media screen and (max-width:414px){#share-this{margin:10px 15px}.gp-del{display:block}#share-this a{min-width:100%;padding:0;text-align:center !important;height:45px;line-height:45px;margin:0 auto 3px !important}#share-this a.this-gp i, #share-this i{display:none}#share-this a.this-gp{height:auto;margin:0 auto;padding:0}}
Langkah #3. Cari lagi kode <data:post.body/> (yang terakhir) lalu letakkan kode di bawah ini tepat di bawahnya
<div id="share-this">
<a class="this-fb" expr:href=""http://www.facebook.com/sharer.php?u=" + data:blog.url" href="https://www.blogger.com/null" onclick="window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;" rel="nofollow" target="_blank" title="Facebook"><i class="fb-1">Share on Facebook</i></a><a class="this-tw" expr:href=""http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"" href="https://www.blogger.com/null" onclick="window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;" rel="nofollow" target="_blank" title="Twitter"><i class="tw-2">Tweet on Twitter</i></a><a class="this-gp" expr:href=""https://plus.google.com/share?url=" + data:blog.url" href="https://www.blogger.com/null" onclick="window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;" rel="nofollow" target="_blank" title="Google+"><i class="gp-2"><span class="gp-del">Plus on Google+</span></i></a></div>
<a class="this-fb" expr:href=""http://www.facebook.com/sharer.php?u=" + data:blog.url" href="https://www.blogger.com/null" onclick="window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;" rel="nofollow" target="_blank" title="Facebook"><i class="fb-1">Share on Facebook</i></a><a class="this-tw" expr:href=""http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"" href="https://www.blogger.com/null" onclick="window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;" rel="nofollow" target="_blank" title="Twitter"><i class="tw-2">Tweet on Twitter</i></a><a class="this-gp" expr:href=""https://plus.google.com/share?url=" + data:blog.url" href="https://www.blogger.com/null" onclick="window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;" rel="nofollow" target="_blank" title="Google+"><i class="gp-2"><span class="gp-del">Plus on Google+</span></i></a></div>
Gimana? Mudah bukan?
Jika ada pertanyaan, komentar aj dibawah sob ☺
- Melupakan mantan pacar itu susah! Kata siapa?
- Lakukan 5 Hal Ini Jika Pacar Lo Selingkuh, No.3 Paling Nyes!
- Bagaimana Sih Membuat Wanita Senang?
- Cara Membuat Teks "TERIMAKASIH" Dibawah Artikel
- Membuat dan Mengedit Template Blog Via Android
- Cara Membuat Tombol Berbagi Sederhana Dan Responsif Ala Badpeople
- Cara menambahkan komentar facebook ke blog
- Cara Membuat Tombol Berbagi Keren Dan Super Responsif Ala Badpeople
- TUTORIAL MENGHAPUS AKUN FACEBOOK SECARA PERMANEN
- CIRI CIRI ORANG GAK SUKA SAMA KITA
0 Response to "Cara Membuat Tombol Berbagi Keren Dan Super Responsif Ala Badpeople"
Post a Comment
Baca dulu sebelum berkomentar :
1. Berkomentar lah dengan baik dan sopan.
2. Komentar harus sesuai topik, Jika tidak sesuai dengan topik atau menyimpang dan sejenisnya saya anggap SPAM, dan akan saya hapus.
3. Makasih ☺