Pamula merupakan tema personal yang saya desain dengan beberapa referensi, Tema ini dibuat clean dan elegant untuk membuat lebeih fresh serta memaksimalkan fitur dari fungsi blogger agar dapat meminimalisir penggunaan javascript atau json blogger. Tema ini memiliki kecepatan super cepat seperti tema-tema yang saya share sebelumnya, tapi pada tema yang saya buat sekarang terus menggunakan fungsi javascript dan tidak ada jQuery di dalamnya. Kemungkinan kalian tidak akan paham karena terbiasa dengan jQuery. Pada tema ini kalian akan mendapatkan beberapa fitur menarik seperti : Kecepatan Loading Super Ngebut Dengan memiliki loading yang cepat pasti dapat membuat pengunjung menjadi lebih betah sebab tidak perlu cari Artikel serupa meskipun yang disebabkan oleh loading lambat. Saya sudah mencoba untuk mengetest kecepatan dengan bantuan dari GTmetrix dan Pagespeed. Untuk melihat hasilnya bisa cek gambar berikut: Kecepatan loading ini sudah saya test sendiri menggunak
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 :
- Silahkan masuk kebagian Dashboard blog terlebih dahulu blogger.com
- Selanjutnya klik Tema > klik icon seperti titik tiga > klik Edit HTML
- Kemudian tambahkan terlebih dahulu kode CSS dibawah, tepat diatas kode </b:skin> atau </style>
- Setelah beres menambahkan CSS, tambahkan kode HTML dibawah tepat diatas kode <b:includable id='main' var='this'>.
- Hasilnya akan terlihat seperti berikut
- Terakhir untuk memanggil tombol share,tambahkan kode berikut dan letakkan tepat dibawah kode <b:include data='post' name='postBody'/>
- Hasilnya akan terlihat seperti berikut
- Jangan lupa tambahkan kode javaScript berikut, untuk dapat membuat copy urlnya, simpan kode berikut diatas kode </body>
- Langkah terakhir simpan Tema
- Selesai dan tinggal melihat hasilnya
.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}}<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='"http://www.facebook.com/sharer.php?u=" + 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' 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='"https://api.whatsapp.com/send?text=" + data:post.title + " | " + 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 + "?max-results=8"' 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, "2:3") : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDdnTvcrl5-vAok2QOEImue8jEbzbfRKDsh92htkrolE2tDzxGURruIH9_YCE_9t43nBOcjRWsbRns32b3yJ9MZR8o8-BNGdzSbDWrv3c_ilnscQIxECf0r-KByfGxNLVs5OVQSlpgWCE/s1600/error-404.jpg"' expr:srcset='sourceSet(data:post.featuredImage, [240,360,640], "2:3")' 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='"http://www.facebook.com/sharer.php?u=" + 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' 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='"https://api.whatsapp.com/send?text=" + data:post.title + " | " + 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:blog.postImageUrl + "&description=" + 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='"https://timeline.line.me/social-plugin/share?url=" + 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><b:includable id='hentryShare' var='post'>...</b:includable>
<b:includable id='main' var='this'>...</b:includable><b:include name='hentryShare' data='post'><b:include data='post' name='postBody'/>
<b:include name='hentryShare' data='post'/><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>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 :#
Comments
Post a Comment
To insert a code use <i rel="pre">code_here</i>To insert a quote use <b rel="quote">your_qoute</b>To insert a picture use <i rel="image">url_image_here</i>To insert a video use <i rel="video">video</i>Tinggalkan komentar sesuai topik tulisan, komentar dengan link aktif tidak akan ditampilkan. Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim.
Tutorial adblock yang hanya hide content om..
ReplyDeletesudah pernah saya bahas sebelumnya https://www.malestea.com/2021/04/cara-memasang-anti-adblock-di-blog.html
Delete