Menambahkan Tombol Share Pada Template Revoltify

\
Selamat malam sobat blogger, kali ini Saya akan berbagi cara memasang tombol share di halaman utama blog pada template Revoltify.

Ilustrasi

Ilustrasi

                                                                 

Postingan ini Saya buat atas permintaan sobat blogger disini tentang bagaimana cara menambahkan tombol share yang muncul ketika kursor mouse digeser ke postingan seperti yang ada di blog ini. Tentunya sobat sudah tahu dengan fungsi dari tombol share ini dan disini Saya tidak akan menjelaskan tentang fungsinya melainkan cara penerapannya, sobat tidak perlu khawatir tentang loading halaman karena tombol ini cukup ringan yang hanya menggunakan CSS dan Markup saja.


Berikut cara penerapannya :

Buka dashboard Blogger
Klik Template
Klik Edit HTML
Terapkan kode 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 kode di bawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.thumbnailUrl'>

Terapkan kode di bawah ini tepat setelah kode di atas

<ul class='twitfbshare'>
  <li>
   <a class='f-like' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + 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='&quot;http://twitter.com/share?url=&quot; + 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='&quot;http://plus.google.com/share?url=&quot; + 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 seperti ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.thumbnailUrl'>
 <ul class='twitfbshare'>
  <li>
   <a class='f-like' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + 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='&quot;http://twitter.com/share?url=&quot; + 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='&quot;http://plus.google.com/share?url=&quot; + 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 sobat ingin memasang tombol share tersebut pada template lain, silahkan disesuaikan kembali.

cukup sekian dan semoga bermanfaat.