Cara Menambahkan Tombol Share di Blog

Malestea
Malestea
Cara Menambahkan Tombol Share di Blog

Halo sobat Malestea pada kesempatan kali ini saya akan membahas tentang tutorial Blogger yaitu "Membuat Tombol Share di Blog", Tombol share yang saya maksud disini yaitu memiliki tampilan yang dinamis dan enak untuk digunakan dan memiliki fungsi seperti Copy URL sama halnya dengan tampilan dari Google News seperti itu.

Untuk membuatnya kita tidak memerlukan bantuan dari javascript hanya menggunakan fungsi dari checkbox saja dan tidak akan membuat situs menjadi lambat dengan penerapan tombol share ini. Tapi bila ingin lebih simple kodenya kalian bisa mengubahnya sendiri lewat bantuan jQuery ataupun javaScript dengan fungsi Click.

Membuat Tombol Share di Blog

Bila ingin melihat bagaimana tampilan dari hasil Tutorial kali ini, bisa cek terlebih dahulu tombol demo, untuk melihat keseluruhan nya. Demo

Untuk tombol share ini memang sudah di desain sederhana dengan tampilan dinamis tapi yang masih belum bisa saya kembangkan adalah menambahkan fitur untuk menghitung jumlah orang yang melakukan share artikel pada situs, mungkin nanti akan saya update lagi ketika sudah paham betul logika dan algoritma nya.

Untuk menerapkan pada website Anda, silahkan disimak baik-baik penjelasan dan langkah pemasang seperti berikut :

  1. Silahkan masuk kebagian Dashboard blog terlebih dahulu blogger.com
  2. Selanjutnya klik Tema > klik icon seperti titik tiga > klik Edit HTML
  3. Kemudian tambahkan terlebih dahulu kode CSS dibawah, tepat diatas kode </b:skin> atau </style>
  4. .social-share{display:flex;align-items:center;margin:40px auto 0 auto}
    .social-share .share-header{position:relative;display:flex;align-items:center;flex-flow:row nowrap;flex-shrink:0;justify-content:center}
    .social-share .sharelabel-icon{margin-right:7px;color:#666}
    .social-share .share-content{position:relative;display:flex;align-items:center;font-size:15px;flex-flow:row wrap;margin-left:auto}
    .social-share .share-content>*{display:flex;align-items:center;justify-content:center;border-radius:4px;background:rgba(0,0,0,.025);width:50px;height:50px;margin:5px;color:#222}
    .social-share .share-content .more label{cursor:pointer}
    .social-share .share-content .icon-label{display:block;margin-left:7px;white-space:nowrap}
    .social-share .share-label{font-size:11px;font-weight:700;margin-left:7px;letter-spacing:.1em;text-transform:uppercase;color:#666}
    .social-share .share-this .share-more{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;transition:all .4s ease-in-out;visibility:hidden;opacity:0;z-index:2}
    .social-share .share-this .check:checked~.share-more{opacity:1;visibility:visible}
    .social-share .share-this .check:checked~.share-more .close{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;background:rgba(0,0,0,.25);transition:all .4s ease-in-out;opacity:1;visibility:visible;z-index:1}
    .social-share .share-box{background:white;padding-bottom:10px;display:block;margin:auto;width:calc(100% - 20px);max-width:500px;overflow:hidden;position:relative;border-radius:10px;box-shadow:0 9px 46px 8px rgb(0 0 0 / 14%),0 11px 15px -7px rgb(0 0 0 / 12%),0 24px 38px 3px rgb(0 0 0 / 20%);transform:translateY(160%);transition:all .8s ease-in-out,transform .8s;z-index:2}
    .social-share .share-this .check:checked~.share-more .share-box{transform:translateY(0)}
    .social-share .share-close{padding:12px 30px;display:flex;justify-content:space-between;align-items:center;vertical-align:middle}
    .social-share .share-closeTitle{position:relative;font-size:15px;font-weight:700}
    .social-share .share-closeBtn label{cursor:pointer}
    .social-share .share-wrapper{display:grid;grid-template-columns:4fr 1fr;grid-gap:10px;position:relative;padding:15px 35px;margin:10px 0;background:rgba(128 128 128 / .07);justify-content:space-between}
    .social-share .share-heading{display:grid;grid-template-columns:1fr;grid-gap:10px}
    .social-share .share-headingTitle{font-size:15px;text-transform:capitalize;font-weight:600;margin-bottom:10px;color:#222}
    .social-share .share-headingTitle a{color:currentColor}
    .social-share .share-tags{align-self:center}
    .social-share .share-tags a{font-size:13px;background:rgba(226 221 239 / .36);color:#222;font-weight:400;line-height:22px;padding:4px 7px;margin:5px 7px 18px 0;border-radius:4px}
    .social-share .share-tags a:before{content:'#'}
    .social-share .share-thumb{position:relative;width:140px;height:100px;margin:0;border-radius:7px;overflow:hidden}
    .social-share .share-thumb a{position:relative;display:block;margin:0;padding-bottom:75%}
    .share-thumb a img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;object-fit:cover;object-position:center}
    .social-share .share-link{padding:0 5%}
    .social-share .share-link ul{position:relative;display:grid;grid-template-columns:repeat(6,1fr);grid-gap:0;margin:0;padding:0;list-style:none;justify-content:center;align-items:center;text-align:center}
    .social-share .share-link li{text-align:center}
    .social-share .share-link a{display:inline-block;margin:8px 0;font-size:12px;text-align:center;color:#222;transition:all .4s ease-in-out}
    .social-share .share-link a .link-icon{padding:12px;background:rgba(226 221 239 / .36);display:block;border-radius:12px;margin:0 0 7px;width:25px;height:25px;box-sizing:initial}
    .social-share .share-link a input{margin:0;padding:0;border:0;outline:0;width:1px;height:0;opacity:0;position:absolute}
    .share-notif{display:flex;position:fixed;bottom:90px}
    .share-notif span{position:relative;left:-15%;width:100%;margin:0 auto;padding:4px 10px;border-radius:3px;font-size:10px;background:rgba(0,0,0,.9);color:#fefefe;opacity:0;transition:all .4s ease-in-out;animation:slidein 2s ease forwards}
    @-webkit-keyframes slidein{0%{opacity:0}20%{opacity:1}50%{opacity:1}80%{opacity:1}100%{opacity:0;bottom:-200px;visibility:hidden}}
    @keyframes slidein{0%{opacity:0}20%{opacity:1}50%{opacity:1}80%{opacity:1}100%{opacity:0}}
    .share-notif:after{display:none}
    .social-share .share-content .facebook svg path{fill:#568fce}
    .social-share .share-content .twitter svg path{fill:#27c2f5}
    .social-share .share-content .whatsapp svg path{fill:#58ce56}
    .social-share .share-content .more svg path{fill:#666}
    .social-share .share-link .facebook a:hover{color:#005af0}
    .social-share .share-link .twitter a:hover{color:#00acee}
    .social-share .share-link .whatsapp a:hover{color:#3fbb50}
    .social-share .share-link .pinterest a:hover{color:#ca2127}
    .social-share .share-link .line a:hover{color:#3fbb50}
    .social-share .share-link .copy a:hover{color:#3b6978}
    @media only screen and (max-width:768px){.social-share .share-content>*{line-height:40px;width:40px;height:40px}.social-share .share-content .icon-label{display:none}}
    @media (min-width:800px){.social-share .share-content>a:nth-child(1),.social-share .share-content>a:nth-child(2){flex-shrink:0;width:auto;min-width:min-content;padding:0 20px}}
    @media (max-width:480px){.social-share .share-tags a{font-size:9px;font-weight:500}.social-share .share-thumb{width:110px;height:80px}.social-share .share-link ul{grid-template-rows:80px}.social-share .share-link a{font-size:10px}.social-share .share-link a .link-icon{display:inline-flex;padding:7px;align-items:center;justify-content:center}}
  5. Setelah beres menambahkan CSS, tambahkan kode HTML dibawah tepat diatas kode <b:includable id='main' var='this'>.
  6. <b:includable id='shareContent' var='post'> 
        <div class='social-share'>
            <div class='share-header'>
                <span class='sharelabel-icon'>
                    <svg fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                        <path d='M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' />
                    </svg>
                </span>
                <span class='share-label'>
                    Share on
                </span>
            </div>
            <div class='share-content'>
                <a class='share-icon facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='noreferrer' target='_blank' title='Share to Facebook'>
                    <span class='icon'>
                        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                            <path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z' fill='currentColor' />
                        </svg>
                    </span>
                    <span class='icon-label'>
                        Share on Facebook
                    </span>
                </a>
                <a class='share-icon twitter' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' rel='noreferrer' target='_blank' title='Share to Twitter'>
                    <span class='icon'>
                        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                            <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='currentColor' />
                        </svg>
                    </span>
                    <span class='icon-label'>
                        Share on Twitter
                    </span>
                </a>
                <a class='share-icon whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url.canonical' rel='noreferrer' target='_blank' title='Share to Whatsapp'>
                    <span class='icon'>
                        <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                            <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='currentColor' />
                        </svg>
                    </span>
                </a>
                <span class='share-icon more'>
                    <span class='icon'>
                        <label for='shareMore'>
                            <svg height='24' viewBox='0 -28 453.99791 453' width='24' xmlns='http://www.w3.org/2000/svg'>
                                <path d='m345.375 3.410156c-2.863281-2.847656-7.160156-3.695312-10.890625-2.144531s-6.164063 5.191406-6.164063 9.234375v53.359375c-54.003906 2.152344-81.054687 24.535156-85.191406 28.261719-27.25 22.363281-45.855468 53.527344-52.613281 88.121094-3.378906 16.714843-3.984375 33.871093-1.785156 50.78125l.007812.058593c.019531.148438.042969.300781.066407.449219l2.125 12.214844c.714843 4.113281 3.914062 7.351562 8.019531 8.117187 4.109375.765625 8.257812-1.105469 10.40625-4.683593l6.367187-10.613282c19.5625-32.53125 43.941406-54.09375 72.46875-64.089844 12.867188-4.546874 26.5-6.546874 40.128906-5.882812v55.265625c0 4.046875 2.441407 7.699219 6.183594 9.242187 3.746094 1.546876 8.050782.679688 10.90625-2.191406l105.675782-106.210937c3.894531-3.914063 3.878906-10.246094-.035157-14.140625zm0 0' />
                                <path d='m417.351562 294.953125c-5.519531 0-10 4.476563-10 10v42.265625c-.015624 16.558594-13.4375 29.980469-30 30h-327.351562c-16.5625-.019531-29.980469-13.441406-30-30v-238.246094c.019531-16.5625 13.4375-29.980468 30-30h69.160156c5.523438 0 10-4.476562 10-10 0-5.523437-4.476562-10-10-10h-69.160156c-27.601562.03125-49.96875 22.398438-50 50v238.246094c.03125 27.597656 22.398438 49.964844 50 50h327.351562c27.601563-.035156 49.96875-22.402344 50-50v-42.265625c0-5.523437-4.476562-10-10-10zm0 0' />
                            </svg>
                        </label>
                    </span>
                </span>
            </div>
            <div class='share-this'>
                <input class='check' id='shareMore' type='checkbox' />
                <div class='share-more'>
                    <div class='share-box'>
                        <div class='share-close'>
                            <span class='share-closeTitle'>
                                Share This Post
                            </span>
                            <span class='share-closeBtn'>
                                <label class='icon' for='shareMore'>
                                    <svg fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                                        <path d='M6 18L18 6M6 6l12 12' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' />
                                    </svg>
                                </label>
                            </span>
                        </div>
                        <div class='share-wrapper'>
                            <div class='share-heading'>
                                <div class='share-headingTitle'>
                                    <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title ? data:post.title : data:messages.noTitle'>
                                        <b:eval expr='data:post.title ? data:post.title : data:messages.noTitle' />
                                    </a>
                                </div>
                                <div class='share-tags'>
                                    <b:if cond='data:post.labels'>
                                        <b:loop values='data:post.labels limit 2' var='label'>
                                            <a expr:href='data:label.url + &quot;?max-results=8&quot;' expr:title='data:label.name' rel='category tag'>
                                                <b:class expr='data:label.name' expr:name='data:label.name' />
                                                <data:label.name />
                                            </a>
                                        </b:loop>
                                        <b:else />
                                        <span>Unlabelled</span>
                                    </b:if>
                                </div>
                            </div>
                            <div class='share-thumb'>
                                <a expr:href='data:post.link ? data:post.link : data:post.url' expr:title='data:post.title ? data:post.title : data:messages.noTitle'>
                                    <b:if cond='data:post.thumbnailUrl'>
                                        <img class='lazy' expr:alt='data:post.title ? data:post.title : data:messages.image' expr:data-src='data:post.featuredImage ? resizeImage(data:post.featuredImage, 640, &quot;2:3&quot;) : &quot;https://1.bp.blogspot.com/-T_uP1VfOA8o/X9yFNh_qVxI/AAAAAAAAFp8/77VjeFOCXrAp9oTFThPsVRrrRDBQYwl_ACLcBGAsYHQ/s1600/error-404.jpg&quot;' expr:srcset='sourceSet(data:post.featuredImage, [240,360,640], &quot;2:3&quot;)' expr:title='data:post.title ? data:post.title : data:messages.image' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' />
                                    </b:if>
                                </a>
                            </div>
                        </div>
                        <div class='share-link'>
                            <ul class='share-linkItem'>
                                <li class='share-linkIcon facebook'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='noreferrer' target='_blank' title='Share to Facebook'>
                                        <div class='link-icon'>
                                            <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                                                <path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z' fill='currentColor' />
                                            </svg>
                                        </div>
                                        <div class='link-label'>
                                            <span>Facebook</span>
                                        </div>
                                    </a></li>
                                <li class='share-linkIcon twitter'><a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' rel='noreferrer' target='_blank' title='Share to Twitter'>
                                        <div class='link-icon'>
                                            <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                                                <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='currentColor' />
                                            </svg>
                                        </div>
                                        <div class='link-label'>
                                            <span>Twitter</span>
                                        </div>
                                    </a></li>
                                <li class='share-linkIcon whatsapp'><a expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url.canonical' rel='noreferrer' target='_blank' title='Share to Whatsapp'>
                                        <div class='link-icon'>
                                            <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                                                <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='currentColor' />
                                            </svg>
                                        </div>
                                        <div class='link-label'>
                                            <span>Whatsapp</span>
                                        </div>
                                    </a></li>
                                <li class='share-linkIcon pinterest'><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:blog.pageName' rel='noreferrer' target='_blank' title='Share to Pinterest'>
                                        <div class='link-icon'>
                                            <svg viewBox='0 0 24 24'>
                                                <path d='M 9.04 21.54 C 8.35 20.56 8.26 19.27 8.44 18.38 L 9.59 13.44 C 9.59 13.44 9.3 12.86 9.3 11.94 C 9.3 10.56 10.16 9.53 11.14 9.53 C 12 9.53 12.4 10.16 12.4 10.97 C 12.4 11.83 11.83 13.06 11.54 14.24 C 11.37 15.22 12.06 16.08 13.06 16.08 C 14.84 16.08 16.22 14.18 16.22 11.5 C 16.22 9.1 14.5 7.46 12.03 7.46 C 9.21 7.46 7.55 9.56 7.55 11.77 C 7.55 12.63 7.83 13.5 8.29 14.07 C 8.38 14.13 8.38 14.21 8.35 14.36 L 8.06 15.45 C 8.06 15.62 7.95 15.68 7.78 15.56 C 6.5 15 5.76 13.18 5.76 11.71 C 5.76 8.55 8 5.68 12.32 5.68 C 15.76 5.68 18.44 8.15 18.44 11.43 C 18.44 14.87 16.31 17.63 13.26 17.63 C 12.29 17.63 11.34 17.11 11 16.5 L 10.33 18.87 C 10.1 19.73 9.47 20.88 9.04 21.57 V 21.54 Z' fill='currentColor' />
                                            </svg>
                                        </div>
                                        <div class='link-label'>
                                            <span>Pinterest</span>
                                        </div>
                                    </a></li>
                                <li class='share-linkIcon line'><a expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' rel='noreferrer' target='_blank' title='Share to Line'>
                                        <div class='link-icon'>
                                            <svg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'>
                                                <path d='M0 0h24v24H0z' fill='none' />
                                                <path d='M18.663 10.84a.526.526 0 0 1-.526.525h-1.462v.938h1.462a.525.525 0 1 1 0 1.049H16.15a.526.526 0 0 1-.522-.524V8.852c0-.287.235-.525.525-.525h1.988a.525.525 0 0 1-.003 1.05h-1.462v.938h1.462c.291 0 .526.237.526.525zm-4.098 2.485a.538.538 0 0 1-.166.025.515.515 0 0 1-.425-.208l-2.036-2.764v2.45a.525.525 0 0 1-1.047 0V8.852a.522.522 0 0 1 .52-.523c.162 0 .312.086.412.211l2.052 2.775V8.852c0-.287.235-.525.525-.525.287 0 .525.238.525.525v3.976a.524.524 0 0 1-.36.497zm-4.95.027a.526.526 0 0 1-.523-.524V8.852c0-.287.236-.525.525-.525.289 0 .524.238.524.525v3.976a.527.527 0 0 1-.526.524zm-1.53 0H6.098a.528.528 0 0 1-.525-.524V8.852a.527.527 0 0 1 1.05 0v3.45h1.464a.525.525 0 0 1 0 1.05zM12 2.572c-5.513 0-10 3.643-10 8.118 0 4.01 3.558 7.369 8.363 8.007.325.068.769.215.881.492.1.25.066.638.032.9l-.137.85c-.037.25-.2.988.874.537 1.076-.449 5.764-3.398 7.864-5.812C21.313 14.089 22 12.477 22 10.69c0-4.475-4.488-8.118-10-8.118z' fill='currentColor' />
                                            </svg>
                                        </div>
                                        <div class='link-label'>
                                            <span>Line</span>
                                        </div>
                                    </a></li>
                                <li class='share-linkIcon copy'><a href='javascript:;' onclick='clipboard()'>
                                        <div class='link-icon'>
                                            <svg class='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                                                <path d='M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' />
                                            </svg>
                                        </div>
                                        <input expr:value='data:blog.url' id='getUrl' readonly='readonly' type='text' />
                                        <div class='link-label'>
                                            <span>Copy</span>
                                        </div>
                                        <div class='share-notif' />
                                    </a></li>
                            </ul>
                        </div>
                    </div>
                    <label class='close' for='shareMore' />
                </div>
    
            </div>
        </div>
    </b:includable>
  7. Hasilnya akan terlihat seperti berikut
  8. <b:includable id='hentryShare' var='post'>...</b:includable>
    <b:includable id='main' var='this'>...</b:includable>
  9. Terakhir untuk memanggil tombol share,tambahkan kode berikut dan letakkan tepat dibawah kode <b:include data='post' name='postBody'/>
  10. <b:include name='hentryShare' data='post'>
  11. Hasilnya akan terlihat seperti berikut
  12. <b:include data='post' name='postBody'/>
    <b:include name='hentryShare' data='post'/>
  13. Jangan lupa tambahkan kode javaScript berikut, untuk dapat membuat copy urlnya, simpan kode berikut diatas kode </body>
  14. <script>
    /*<![CDATA[*/
    function clipboard() {
      document.getElementById('getUrl').select(),
        document.execCommand('copy'),
        document.querySelector('.share-notif').innerHTML="<span>Url <b>copied</b></span>";
      let uri = window.location.toString();
      if(uri.indexOf("?m=1", "?m=1") > 0){
        let clean = uri.substring(0, uri.indexOf("?m=1"));
        window.history.replaceState({}, document.title, clean)
      }
    }
    /*]]>*/</script>
  15. Langkah terakhir simpan Tema
  16. Selesai dan tinggal melihat hasilnya

Hasilnya akan terlihat pada bagian postingan saja dan untuk bagian laman tidak akan terlihat, jadinya akan berada tepat dibawah postingan blog untuk tombol share tersebut muncul.

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update, meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#

2 comments : Cara Menambahkan Tombol Share di Blog

  1. Andrie K.
    Tutorial adblock yang hanya hide content om..
    • Malestea
      sudah pernah saya bahas sebelumnya https://www.malestea.com/2021/04/cara-memasang-anti-adblock-di-blog.html