Cara Membuat Social Media Sharing Buttons Tanpa JavaScript Di Blogger

Assalamualaikum w.b.t kali ini saya akan kongsikan Cara Membuat Social Media Sharing Buttons Tanpa JavaScript Di Blogger seperti yang saya gunakan di blog ini.
Cara Membuat Social Media Sharing Buttons Tanpa JavaScript Di Blogger

Mengapa menggunakan social share tanpa javascript?
Mengurangkan penggunaan javascript di blogger sangatlah baik kerana ia mampu menambahkan speed loading blogger anda karna code yang saya akan kongsikan ini sangat ringan dan mudah di gunnakan.

Apa itu social share button?
Social share buton adalh buton social media yang di mana kita boleh kongsikan atauput share posting kita ke media social lainnya seperti facebook, tweeter dan banyak lagi.

Button social media share ini memudahkan para visitor untuk kongsikan posting anda ke mana mana social media yang mereka inginkan.

Baiklah kita teruskan ke cara pemasangan code social media ini.

Cara memasang social media share button without javascript.

Login ke blogger anda, Tab Theme - Html Editor

Pasangkan css style ini ke daalam style blogger anda.

/* Share Button  */
.O4U-share-button .O4U-share svg{width:25px;height:25px;vertical-align:-8px;text-align:left}
.O4U-share-button .O4U-share svg path{fill:#fff}
.O4U-share-button{display:block;margin-top:10px;line-height:0;background:transparent;width:100%;max-width:738px;padding:10px 0;}
.O4U-share-button .O4U-share{display:block;}
.O4U-share-button .O4U-share .wrap{text-align:center;margin:0 auto;display:none;min-width:40px}
.O4U-share-button .O4U-share .wrap1{float:left;display:inline-block;width:50%;text-align:center}
.O4U-share-button .O4U-share ul{margin:0;padding:0}
.O4U-share-button .O4U-share ul li{width:12.4%;margin-left:3px;line-height:35px;list-style:none;list-style-type:none;padding:0;display:inline-block;font-size:12px;text-align:center;color:#fff;border:1px solid rgba(0,0,0,0.04);-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out}
.O4U-share-button .O4U-share ul li a,.O4U-share-button .O4U-share ul li a:hover{color:#FFF!important;cursor:pointer;text-decoration:none}
.O4U-share-button .O4U-share .btn_fb, .btn_twtr, .btn_gplus, .btn_pntrst, .btn_linkedin, .btn_stumbleupon, .btn_tumblr{border-radius:7.5px;}
.O4U-share-button .O4U-share .btn_fb{background:#3a579a}
.O4U-share-button .O4U-share .btn_fb:hover{background:#314a83}
.O4U-share-button .O4U-share .btn_twtr{background:#00abf0}
.O4U-share-button .O4U-share .btn_twtr:hover{background:#0092cc}
.O4U-share-button .O4U-share .btn_gplus{background:#df4a32}
.O4U-share-button .O4U-share .btn_gplus:hover{background:#be3f2b}
.O4U-share-button .O4U-share .btn_pntrst{background:#cd1c1f}
.O4U-share-button .O4U-share .btn_pntrst:hover{background:#ae181a}
.O4U-share-button .O4U-share .btn_linkedin{background:#2554BF}
.O4U-share-button .O4U-share .btn_linkedin:hover{background:#224EB4}
.O4U-share-button .O4U-share .btn_stumbleupon{background:#EB4823}
.O4U-share-button .O4U-share .btn_stumbleupon:hover{background:#d23614}
.O4U-share-button .O4U-share .btn_tumblr{background:#314358}
.O4U-share-button .O4U-share .btn_tumblr:hover{background:#2e3f52}
.O4U-share-button .O4U-share .share{width:auto;height:auto;line-height:0;margin-bottom:20px;margin-right:5px;border:0}
.O4U-share-button .O4U-share .btn_fb .share-btn,.O4U-share-button .O4U-share .btn_twtr .share-btn,.O4U-share-button .O4U-share .btn_gplus .share-btn,.O4U-share-button .O4U-share .btn_pntrst .share-btn,.O4U-share-button .O4U-share .btn_linkedin .share-btn,.O4U-share-button .O4U-share .btn_stumbleupon .share-btn,.O4U-share-button .O4U-share .btn_tumblr .share-btn{display:block;overflow:hidden;width:50%;text-align:center;background-color:rgba(0,0,0,0.13);white-space:nowrap}
@media only screen and (max-width:1024px){.O4U-share-button .O4U-share ul li{width:11%}}
@media screen and (max-width:480px){.O4U-share-button .O4U-share ul li{width:10%}.O4U-share-button .O4U-share .btn_fb .share-btn,.O4U-share-button .O4U-share .btn_twtr .share-btn,.O4U-share-button .O4U-share .btn_gplus .share-btn,.O4U-share-button .O4U-share .btn_pntrst .share-btn,.O4U-share-button .O4U-share .btn_linkedin .share-btn,.O4U-share-button .O4U-share .btn_stumbleupon .share-btn,.O4U-share-button .O4U-share .btn_tumblr .share-btn{display:none}.O4U-share-button .O4U-share .wrap1{width:100%}.O4U-share-button .O4U-share .share{top:-5px;margin-right:0}}
@media screen and (max-width:320px){.O4U-share-button .O4U-share ul li{width:9%}}


Cari code berikut <data:post.body/>

Selalunya anda akan menemukan banyak code seperti di atas, Anda harnya perlu memilih code yang tepat, selalunya code nombor 2.

Setelah itu pasangkan code ini di bawahnya

<!-- Share Button  -->
<div class='O4U-share-button' style='text-align:center;'>
<div class='O4U-share'>
<ul>
<li class='btn_fb'><a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' title='Share to Facebook'><div class='wrap1'><svg viewbox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg>
</div><div class='share-btn' data-service='facebook'/></a></li>

<li class='btn_twtr'><a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot; (by: @O4U) &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' title='Share to Twitter'>
        <div class='wrap1'><svg 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'/></svg>
</div><div class='share-btn' data-service='twitter'/></a></li>

<li class='btn_gplus'><a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow' title='Share to Google Plus'>
        <div class='wrap1'><svg viewbox='0 0 24 24'> <path d='M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z'/></svg>
</div><div class='share-btn' data-service='gplus'>
</div></a></li>

<li class='btn_pntrst'>
<a data-pin-config='beside' expr:data-img='data:post.thumbnailUrl' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow' title='Share to Pinterest'>
        <div class='wrap1'><svg viewBox='0 0 24 24'><path d='M13.25,17.25C12.25,17.25 11.29,16.82 10.6,16.1L9.41,20.1L9.33,20.36L9.29,20.34C9.04,20.75 8.61,21 8.12,21C7.37,21 6.75,20.38 6.75,19.62C6.75,19.56 6.76,19.5 6.77,19.44L6.75,19.43L6.81,19.21L9.12,12.26C9.12,12.26 8.87,11.5 8.87,10.42C8.87,8.27 10.03,7.62 10.95,7.62C11.88,7.62 12.73,7.95 12.73,9.26C12.73,10.94 11.61,11.8 11.61,13C11.61,13.94 12.37,14.69 13.29,14.69C16.21,14.69 17.25,12.5 17.25,10.44C17.25,7.71 14.89,5.5 12,5.5C9.1,5.5 6.75,7.71 6.75,10.44C6.75,11.28 7,12.12 7.43,12.85C7.54,13.05 7.6,13.27 7.6,13.5A1.25,1.25 0 0,1 6.35,14.75C5.91,14.75 5.5,14.5 5.27,14.13C4.6,13 4.25,11.73 4.25,10.44C4.25,6.33 7.73,3 12,3C16.27,3 19.75,6.33 19.75,10.44C19.75,13.72 17.71,17.25 13.25,17.25Z'/></svg>
</div><div class='share-btn' data-service='pinterest'/></a></li>

<li class='btn_linkedin'><a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;' rel='nofollow' title='Share to Linkedin'>
        <div class='wrap1'><svg viewBox='0 0 24 24'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg>
</div><div class='share-btn' data-service='linkedin'/></a></li>
    
<li class='btn_tumblr'>
<a data-notes='right' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.tumblr.com/share/link?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;' rel='nofollow' title='Share to Tumblr'>
<div class='wrap1'><svg viewBox='0 0 512 512'><path d='M210.8 80.3c-2.3 18.3-6.4 33.4-12.4 45.2 -6 11.9-13.9 22-23.9 30.5 -9.9 8.5-21.8 14.9-35.7 19.5v50.6h38.9v124.5c0 16.2 1.7 28.6 5.1 37.1 3.4 8.5 9.5 16.6 18.3 24.2 8.8 7.6 19.4 13.4 31.9 17.5 12.5 4.1 26.8 6.1 43 6.1 14.3 0 27.6-1.4 39.9-4.3 12.3-2.9 26-7.9 41.2-15v-55.9c-17.8 11.7-35.7 17.5-53.7 17.5 -10.1 0-19.1-2.4-27-7.1 -5.9-3.5-10-8.2-12.2-14 -2.2-5.8-3.3-19.1-3.3-39.7v-91.1H345.5v-55.8h-84.4v-90H210.8z'/></svg>
</div><div class='share-btn' data-service='tumblr'/></a></li>
    
<li class='btn_stumbleupon'>
<a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=680,height=500&quot;);   return false;' rel='nofollow' title='Share to Stumbleupon'>
        <div class='wrap1'><svg viewBox='0 0 512 512'><path d='M274.5 216.4l23.1 12.8 36.5-12.3v-24.7c0-42.7-35.7-75.9-78.1-75.9 -42.3 0-78.1 31.1-78.1 75.4 0 44.4 0 113.1 0 113.1 0 10.2-8.3 18.5-18.5 18.5 -10.2 0-18.5-8.3-18.5-18.5v-47.9H80.9c0 0 0 48 0 48.6 0 43.2 35 78.3 78.3 78.3 42.9 0 77.7-34.4 78.3-77.2v-111.7c0-10.2 8.3-18.5 18.5-18.5 10.2 0 18.5 8.3 18.5 18.5L274.5 216.4 274.5 216.4zM371.2 256.9v50.2c0 10.2-8.3 18.5-18.5 18.5 -10.2 0-18.5-8.3-18.5-18.5v-49.2l-36.5 12.4 -23.1-12.8v48.8c0.4 42.9 35.3 77.6 78.3 77.6 43.2 0 78.3-35 78.3-78.3 0-0.6 0-48.6 0-48.6L371.2 256.9 371.2 256.9z'/></svg>
</div><div class='share-btn' data-service='stumbleupon'/></a></li>
</ul>
</div></div>
<div class='clear'/>

PERINGATAN:
Backup template anda sebelum melakukan perubahan.

Setelah selesai memasang code code yang saya berikan silakan semak hasilnya, Bagai mana senang bukan? baiklah sampai di sini sahajala posting saya tentang Cara Membuat Social Media Sharing Buttons Tanpa JavaScript Di Blogger ini, di harapkan apa yang saya kongsikan ini dapat membantu anada. wasalam.