Cara Membuat Share Button Keren di Linkmagz

Cara Membuat Share Button Keren di Linkmagz

Pada artikel kali ini admin akan berbagi tentang Cara Membuat Share Button Keren di Linkmagz, yang bisa anda terapkan di template sejuta umat blogger yaitu template Linkmagz buatan Sugeng.id. Template yang memiliki tampilan keren, simpel, dan elegan.

Memiliki tampilan blog yang responsive, keren, dan unik pasti hal yang paling di inginkan bagi seorang blogger, adanya rasa kurang puas membuat redesign menjadi hal yang diutamakan agar memiliki tampilan yang paling unik dan keren dari blog lain.

Pembahasan


Adanya tombol share merupakan hal terpenting jika ingin membangun sebuah website agar visitor dapat membantu publisher untuk membagikan ulang apa yang telah dibacanya tanpa harus menyertakan link sumber secara manual.

Share Button sendiri biasanya terletak pada bagian bawah artikel, dan memiliki berbagai macam opsi sosial media umum seperti contoh Facebook, Twitter, Whatsapp, dan lain-lain. Tanpa kita sadari adanya fitur ini pada sebuah website dapat meningkatkan trafik secara signifikan yang tentu akan memberikan keuntungan lebih bagi seorang publisher.

Cara Pemasangan

  1. Login ke Blogger.com
  2. Pada menu dashboard, pilih menu Tema > Edit HTML
  3. Kemudian cari kode CSS seperti dibawah ini,
    #share-container{margin:20px auto 30px;overflow:hidden}.share-title{position:relative}.share-title:before{content:"";border-top:4px dotted rgba(121,128,136,.24);position:absolute;top:12px;left:0;right:0}.share-this-pleaseeeee{font-weight:700;margin:0 0 1rem;display:inline-block;position:relative;padding-right:7px}#share{width:100%;text-align:center}#share a{width:25%;height:40px;display:block;font-size:24px;color:#fff;-webkit-transition:opacity .15s linear;transition:opacity .15s linear;float:left}#share a:hover{opacity:.8}#share a svg{width:24px;height:24px;margin-top:7px}#share a svg path{fill:#fff}.facebook{background:#3b5998}.twitter{background:#55acee}.linkedin{background:#0077b5}.pinterest{background:#cb2027}.whatsapp{background:#25d366}
  4. Ganti kode diatas dengan kode CSS dibawah ini,
    /* Share button */
    .share-this-pleaseeeee {
    display: inline-block;
    margin: 0;
    color: inherit;
    text-transform: uppercase;
    font-size: 16px;
    color: #000000;
    background: #ffffff;
    z-index: 1;
    position: relative;
    padding: 0 10px;
    font-weight: bold;
    margin-top: 3px;
    }
    #share-container {
    margin: 20px auto 30px;
    overflow: hidden;
    }
    #share {
    width: 100%;
    text-align: center;
    }
    #share a{width:25%;height:40px;display:block;font-size:24px;color:#fff;transition:opacity .15s linear;float:left}
    #share i{position:relative;top:50%;transform:translateY(-50%)}
    .facebook{border-color:#3a579a;border-top-style:solid;border-top-width:3px}
    .facebook:hover{background:#3a579a}
    #share svg{width:24px;height:24px;vertical-align:-12px}
    #share a:hover svg path{fill:#fff}
    .twitter{border-color:#55acee;border-top-width:3px;border-top-style:solid}
    .twitter:hover{background:#55acee}
    .linkedin{background:#0077b5}
    .pinterest{border-color:#cb2027;border-top-width:3px;border-top-style:solid}
    .pinterest:hover{background:#cb2027}
    .whatsapp{border-color:#25d366;border-top-width:3px;border-top-style:solid}
    .whatsapp:hover{background:#25d366}
  5. Kemudian cari kode seperti dibawah ini,
    <div class='share-title'>
                            <p class='share-this-pleaseeeee'><data:messages.share/></p>
                        </div>
                        <div id='share'>
                        <!-- facebook -->
                            <a aria-label='facebook' class='facebook' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:blog.url' rel='nofollow noopener' target='_blank' title='facebook'>
                                <svg viewBox='0 0 24 24'>
                                    <path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z'/>
                                </svg>  
                            </a>
                            <!-- twitter -->
                            <a aria-label='twitter' class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow noopener' target='_blank' title='twitter'>
                                <svg viewBox='0 0 24 24'>
                                    <path d='M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z'/>
                                </svg> 
                            </a>
                            <a aria-label='pinterest' class='pinterest' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + data:post.title' rel='nofollow noopener' target='_blank' title='pinterest'>
                                <svg viewBox='0 0 24 24'>
                                    <path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z'/>
                                </svg>  
                            </a> 
                            <a aria-label='whatsapp' class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?phone=&amp;text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' rel='nofollow noopener' target='_blank' title='whatsapp'>
                                <svg viewBox='0 0 24 24'>
                                    <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z'/>
                                </svg>
                            </a>
                        </div>
  6. Kemudian ganti kode diatas, dengan kode HTML berikut ini,
    <div id='share'>
      <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'>
    <svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z' fill='#3a579a'/>
    </svg>
    </a>
      <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>
    <svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z' fill='#55acee'/>
    </svg>
    </a>
      <a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + data:post.title' rel='nofollow' target='_blank'>
    <svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z' fill='#cb2027'/>
    </svg>
    </a>
      <a class='whatsapp' expr:href='&quot;https://wa.me/?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'>
    <svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z' fill='#25d366'/>
    </svg>
    </a>
    </div>
  7. Simpan Tema
Mudah bukan? jika mengalami kesulitan atau kurang paham dengan tutorial yang kami berikan, bisa kalian tanyakan melalui kolom komentar dibawah artikel ini, sebisa mungkin akan kami balas secepatnya jika tidak ada kesibukan.

Untuk preview lebih jelas bisa anda lihat share button di blog ini. Mungkin sekian dulu artikel dari Cara Membuat Share Button Keren di Linkmagz, semoga bermanfaat, dan menambah pengetahuan anda.
Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

5 komentar

  1. Engga work gan, saya pakai linkmagz versi 1.6

    BalasHapus
  2. Sama gan tidak work, padahal udah pakai versi 1.8

    BalasHapus
    Balasan
    1. ini saya work kok, dan saya pakai di blog ini

      Hapus
  3. Punyaku gk bisa melayang ya, linkznag 2.6.0

    BalasHapus

Posting Komentar