Menambahkan Tombol Share Pada Template Revoltify

2/21/2015
Menambahkan Tombol Share Pada Template Revoltify

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.

Menambahkan Tombol Share Pada Template Revoltify

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.

    Artikel Terkait

    Next Article
    « Prev Post
    Previous Article
    Next Post »
    Penulisan markup di komentar
    • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
    • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
    • Untuk menulis huruf underline gunakan <u></u>.
    • Untuk menulis huruf strikethrought gunakan <strike></strike>.
    • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

    Blogger
    Disqus
    Pilih Sistem Komentar Yang Anda Sukai

    No comments

    Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.