Menambahkan Tombol Share Pada Template Revoltify - Selamat malam teman blogger, kali ini Saya akan membuatkan cara memasang tombol share di halaman utama blog pada template Revoltify.
Postingan ini Saya buat atas ajakan teman blogger disini wacana bagaimana cara menambahkan tombol share yang muncul saat kursor mouse digeser ke postingan menyerupai yang ada di blog ini. Tentunya teman sudah tahu dengan fungsi dari tombol share ini dan disini Saya tidak akan menjelaskan wacana fungsinya melainkan cara penerapannya, teman tidak perlu khawatir wacana loading halaman alasannya tombol ini cukup ringan yang hanya memakai CSS dan Markup saja.
Berikut cara penerapannya :
Buka dashboard Blogger
Klik Template
Klik Edit HTML
Terapkan arahan di bawah ini di dalam CSS khusus homepage / halaman utama
/* CSS Homepage Share */ ul.twitfbshare{clear:both;float:left;list-style:none outside none;position:absolute;z-index:10;margin:0;padding:0;top:20px;left:20px;line-height:normal;overflow:hidden;} ul.twitfbshare li{text-align:left;float:left;margin-bottom:0;margin-top:-30px;opacity:0;padding:0;transition:all 0.3s;} .post:hover .twitfbshare li{opacity:1;margin-top:0;} ul.twitfbshare li a{background-clip:padding-box;background-repeat:no-repeat;display:block;overflow:hidden;text-align:center;text-transform:uppercase;white-space:nowrap;width:30px;height:30px;line-height:30px;position:relative;margin:0;padding:0;font-size:14px;font-weight:normal;background-color:#fff;color:#aaa;transition:all 0.3s;} ul.twitfbshare li a:hover{color:#fff;} ul.twitfbshare li a.f-like:hover {background-color:#5379b7;} ul.twitfbshare li a.t-share:hover {background-color:#59c2e7;} ul.twitfbshare li a.gplus-share:hover {background-color:#f35d5c;}Kemudian cari arahan di bawah ini
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.thumbnailUrl'>Terapkan arahan di bawah ini sempurna sesudah arahan di atas
<ul class='twitfbshare'> <li> <a class='f-like' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Share On Facebook'><i class='fa fa-facebook'/></a> </li> <li> <a class='t-share' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Tweet On Twitter'><i class='fa fa-twitter'/></a> </li> <li> <a class='gplus-share' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share On Google Plus'><i class='fa fa-google-plus'/></a> </li> </ul>Setelah diterapkan akan terlihat menyerupai ini
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:post.thumbnailUrl'> <ul class='twitfbshare'> <li> <a class='f-like' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Share On Facebook'><i class='fa fa-facebook'/></a> </li> <li> <a class='t-share' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Tweet On Twitter'><i class='fa fa-twitter'/></a> </li> <li> <a class='gplus-share' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share On Google Plus'><i class='fa fa-google-plus'/></a> </li> </ul>Terakhir simpan template dan lihat hasilnya.
Jika teman ingin memasang tombol share tersebut pada template lain, silahkan diadaptasi kembali. Cukup sekian dan biar bermanfaat.