Membuat tombol Share KEREN dengan icon Font Awesome

Hilyakimi Auliya Sa'adah |
0
Mau bikin tombol share yang keren di blog? Mudah sekali.....! Gunakan icon pada font awesome ! Meskipun mudah, tapi ternyata masih ada diantara blogger yang belum mengerti caranya. Langsung saja, berikut ini akan kami beritahukan caranya!

Cara Membuat tombol Share dengan Font Awesome

Tombol share (berbagi) yang dimaksud adalah dibawah judul artikel seperti berikut ini:


Langkah-langkahnya adalah sebagai berikut:

  1. Cadangkan dulu tema blog, sebagai langkah antisipasi
  2. Buka mode edit html blog
  3. Cari kode </head> kemudian letakkan script <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' rel='stylesheet'/> diatasnya.
  4. Cari kode </header> kemudian letakkan kode ini dibawahnya.
    5. <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='pbtsharethisbutt'>

    <i class='fa fa-share-alt' style='color: #052201'/>

    <span style='font-size: 1.4rem;'><span style='background-color: white; font-family: &quot;Noto Serif&quot;, sans-serif;'>  Share:  </span></span><a expr:href='&quot;https://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot;' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' target='_blank' title='Share this on Facebook'><i class='fab fa-facebook' style='color: #4167B2'/></a>
      
      <a expr:href='&quot;https://twitter.com/home?status=&quot; + &quot; -- &quot; + data:post.url' rel='nofollow' target='_blank' title='Tweet This!'><i class='fab fa-twitter' style='color: #039BE6'/></a>
      
      <a class='social-iconnbt' expr:href='&quot;https://api.whatsapp.com/send?phone=&amp;text=&quot; + &quot;%20%2D%20&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on WhatsApp'><i class='fab fa-whatsapp-square' style='color: #2CB742'/></a>
      
      <a class='social-iconnbt' expr:href='&quot;https://t.me/share/url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot;' rel='nofollow' target='_blank' title='Share on Telegram'><i class='fab fa-telegram' style='color: #1E96D4'/></a>
      
      <a class='social-iconnbt' expr:href='&quot;https://pinterest.com/pin/create/button/?source_url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot;' rel='nofollow' target='_blank' title='Share on Pinterest'><i class='fab fa-pinterest' style='color: #E60024'/></a>
    </div>
    </b:if>
  5. Simpan template. SELESAI !!
Tags:

إرسال تعليق

Tulis Komentar (0)

أحدث أقدم