√ Tutorial Menciptakan Tombol Share Button Pada Blogger

Membuat Tombol Share Button Blogger » Pada kesempatan kali ini admin LapakLama.com ingin menyebarkan code untuk menciptakan tombol Share Button Pada Blogger/Blogspot. dan tombol share button yang akan admin bagikan merupakan versi Material Design.

Sebelum menciptakan artikel ini admin juga pernah menciptakan artikel Cara Memasang Tombol Reaksi di Blogspot Jika teman-teman berminat membacanya, Silahkan klik disini untuk membacanya.

Tombol share button sangat mempunyai kegunaan untuk membantu pengunjung blog kita yang suka dengan konten kita dan ingin membagikanya di media umum yang mereka miliki.

Tombol Share Button ini terletak dibagian bawah artikel dan Nah, pada tutorial ini hanya terdapat 3 tombol saja, yakni tombol untuk share ke Facebook, Twitter, dan Google Plus. Silahkan sobat kreasikan dengan impian sobat biar lebih cocok pada blog sobat.

#Note: Template yang kau gunakan harus sudah memasang Font Awesome.

Cara Memasang Tombol Share Button Blogger

1. Pertama-tama kau harus masuk kedalam halaman dasboard blogger kamu.


2. Kemudian Pilih Menu Tema » Edit HTML


3. Kemudian Cari Code 
   <data:post.body/>
   Gunakan perpaduan tombol CTRL+F untuk mempermudah mencarinya.


4. Jika sudah ketemu letakkan code dibawah ini sempurna dibawah code <data:post.body/> 
    <h4 class=’post-bawah’>Bagikan Yuk!!</h4>
   
   <div class=’sharepost’>
   
   <ul>
   
   <li>
   
   <a class=’facebook’ expr:href=’&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url’ rel=’nofollow’ target=’_blank’ title=’Facebook Share’><i class=’fa fa-facebook’ /></a>
   
   </li>
   
   <li>
   
   <a class=’twitter’ expr:href=’&quot;http://twitter.com/share?url=&quot; + data:post.url’ rel=’nofollow’ target=’_blank’ title=’Twitter Tweet’><i class=’fa fa-twitter’ /></a>
   
   </li>
   
   <li>
   
   <a class=’gplus’ expr:href=’&quot;http://plus.google.com/share?url=&quot; + data:blog.url’ rel=’nofollow’ target=’_blank’ title=’Google Plus Share’><i class=’fa fa-google-plus’ /></a>
   
   </li>
   
   </ul>
   
   </div>


5. Cari lagi code 
    ]]></b:skin>
   Kemudian Letakkan Code dibawah ini sempurna diatas code tersebut 
    h4.post-bawah {
   
   text-align: center;
   
   }
   
   .sharepost {
   
   padding: 20px;
   
   text-align: center;
   
   }
   
   .sharepost li a {
   
   padding: 10px;
   
   width: 20px;
   
   height: 20px;
   
   color: #fff;
   
   display: inline-block;
   
   border-radius: 50%;
   
   margin: 0 10px;
   
   transition: all 0.5s;
   
   box-shadow: 0px 1px 5px rgba(0,0,0,0.5);
   
   }
   
   .sharepost li a:hover {
   
   box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
   
   }
   
   .sharepost li a.facebook {
   
   background: #3A5795;
   
   }
   
   .sharepost li a.twitter {
   
   background: #1DA1F2;
   
   }
   
   .sharepost li a.gplus {
   
   background: #DB4437;
   
   }


6. Jika semua sudah kau lakukan, Tinggal Save Template deh.


7. Selesai

Gimana Mudahkan, Buat teman-teman yang mau mencar ilmu ngeblog silahkan daftarkan email teman-teman di blog ini biar teman-teman selalu mendapat update artikel terbaru blog LapakLama.com

Terimakasih Telah Membaca Artikel Tutorial Membuat Tombol Share Button Pada Blogger

Sumber aciknadzirah.blogspot.com