Tutorial Membuat Tombol Share Button Pada Blogger

  • Whatsapp

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

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

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

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

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

Cara Memasang Tombol Share Button Blogger

  1. Pertama-tama kamu harus masuk kedalam halaman dasboard blogger kamu.
  2. Kemudian Pilih Menu Tema » Edit HTMLMembuat Tombol Share Button Blogger
  3. Kemudian Cari Code 
    <data:post.body/>
    Gunakan perpaduan tombol CTRL+F untuk mempermudah mencarinya.
  4. Jika sudah ketemu letakkan code dibawah ini tepat 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 tepat 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 kamu lakukan, Tinggal Save Template deh.
  7. Selesai

Gimana Mudahkan, Buat teman-teman yang mau belajar ngeblog silahkan daftarkan email teman-teman di blog ini agar teman-teman selalu mendapatkan update artikel terbaru blog LapakLama.com

Terimakasih Telah Membaca Artikel Tutorial Membuat Tombol Share Button Pada Blogger

Nilai Kualitas Konten

Pos terkait

Loading...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *