Menambahkan Tombol Share Pada Template Revoltify - Arlina Design
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.

    Menambahkan Tombol Share Pada Template Revoltify

    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.
      Portal Bola Online

      Related Post

      Portal Bola Online
      Disqus Codes
      • To write a bold letter please use <strong></strong> or <b></b>
      • To write a italic letter please use <em></em> or <i></i>
      • To write a underline letter please use <u></u>
      • To write a strikethrought letter please use <strike></strike>
      • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
        And use parse tool below to easy get the style.
      Show Parser Box

      strong em u strike
      pre code pre code spoiler
      embed

      Subscribe Our Newsletter

      Notifications

      Disqus Logo