Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru

Selamat datang di blog Blog kami..Cara Memasang Tombol Share Keren dan Responsif di blogger. Sudah tidak asing lagi bagi para blogger yang aktif di dunia blogging sering melihat pernak-pernik tombol share yang terpasang di setiap blog.

Biasanya tombol share berada pada samping postingan, pada atas dan jua di akhir postingan yang bertujuan supaya artikel yang pada buat bisa di share sang pengunjung yg mampir di blog kita kemedia sosial pribadinya.

Apabila artikel yang kita buat sangat bermanfaat, tanpa di paksa para pengunjung blog akan senang rela men-share artikel protesis kita ke media umum dan alhasil blog kita akan pada kenal sang orang lain selain pengunjung tetap. Selain di kenal menggunakan memasang tombol media sosial akan menaikkan traffic di blog.

Media sosial memberikan bunyi dan platform bagi siapa pun yang mau terlibat, memungkinkan pengguna buat terhubung dengan orang lain yang mempunyai minat yang sama. Media sosial menciptakan komunitas impian yang berpusat di lebih kurang segala hal, mulai dari ceruk usaha & keterampilan teknis, sampai hobi dan aspirasi.

Situs web- media sosial - dan penggunanya - dapat membantu mengarahkan lalu lintas rujukan yang signifikan ke halaman web Anda. Jadi, membuat konten yang ingin dibagikan dan ditautkan oleh pengunjung pada akhirnya akan meningkatkan peringkat Anda dalam hasil pencarian. Dan meningkatkan kehadiran media sosial dapat berdampak positif terhadap SEO situs web  jika keduanya terhubung dengan benar melalui tombol berbagi sosial.

Nah, Pada postingan kali ini Admin akan berbagi cara memasang tombol share keren di bawah artikel blog. Tombol share ini sangat simple dan keren, mudah terlihat oleh pengunjung dan fast loading  dan tentunya juga responsive.

Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru

Langkahnya menjadi berikut:

  • Sobat Login di Blogger.com
  • Pada Dashboar blogger bagian kiri klik menu Tema > kemudian klik menu Edit HTML
  • Sekarang sobat melihat seluruh kode blog blogger sobat dan tekan CTRL + F untuk membuka kotak pencarian. Cari kedua kode di bawah ini

]]></b:skin>

<data:post.body />

1. Tombol share keren & responsive Pertama

  • Silahkan login akun Blogger.com >> Tema >> Edit HTML
  • Lalu letakkan kode berikut ini tepat diatas kode ]]></b:skin>

/* Tombol Share */ .Share-judule display: inline-block;margin: 0;color: #afafaf;text-transform: uppercase; font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500; #share-container margin: 20px auto;overflow: hidden; #share margin:0 0 8px;padding:0;overflow:hidden #share p display: block;padding: 5px 8px !Important;margin: 0 3px 3px 0;font-weight: 700; text-align: center;text-transform: uppercase; #share a width: 25%;height: 40px;display: block;font-size: 24px;color: #fff; transition: opacity 0.15s linear;float: left;text-align: center; #share a:hovertop:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1) .Wa-buttoncolor:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700 .Wa-button acolor:#222;margin:0 auto;padding:10px 8px;background:#222 .Wa-button ifont-weight:400;margin:0 10px 0 0 .Label-line text-align: center;margin-bottom: 6px;position:relative; .Label-line:before z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute; top: 50%;left: 0;margin-top: -2px;

  • Kemudian letakkan kode HTML dibawah ini tepat dibawah kode <data:post.body/> (yang kedua atau ketiga) bisa anda coba satu persatu.

<div id='share-container'> <div class='label-line'> <p class='share-judule'>Bagikan Artikel ini</p> </div> <div id='share'> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a> <a data-action='share/whatsapp/share' style='background:#43d854' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'></i></a> </div> </div>

  • Yang terakhir letakan kode font awesome berikut ini di atas</head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

  • Klik simpan tema dan lihat hasilnya di blog sobat

Jika di lakukan dengan benar maka tombol share akan muncul di bawah halamn postingan sobat

2. Tombol share keren dan responsive Kedua

Semua langkah pemasangannya sama saja hanya kodenya yang berbeda dan tampilannya berbeda

  • Silahkan login akunBlogger.com >>Tema >>Edit HTML
  • Lalu letakkan kode berikut ini tepat diatas kode]]></b:skin>

/* Share Button Keren */ .share-judule {display: inline-block;margin: 0;color: #afafaf;text-transform: uppercase; font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500;} #share_btnper{margin:35px auto 0;padding:0;text-align:center;display:block} .showother{display:none} .share_btn{position:relative;margin:0;padding:0;display:block;overflow:hidden} .share_btn ul,ul .showother{position:relative;margin:0;padding:0;font-size:12px} .share_btn ul li{display:inline-block;overflow:hidden} .share_btn li a,.shareplus{color:#fff;padding:0;width:40px;display:inline-block;text-align:center;height:40px;line-height:40px;transition:all 0.25s;margin:0 5px 5px 0;text-transform:uppercase;border-radius:99em;overflow:hidden} .share_btn i{font-size:16px;padding:0;margin:0;line-height:40px;text-align:center} .shareplus{padding:0;background:#aaa;cursor:pointer} .share_btn a:hover{background:#333} .share_btn li a.fb{background:#4867aa} .share_btn li a.tw{background:#1da1f2} .share_btn li a.gp{background:#dc4a38} .share_btn li a.pt{background:#ca2128} .share_btn li a.le{background:#0673ab} .share_btn li a.tr{background:#43556e} .share_btn li a.em{background:#141b23} .share_btn li a.ln{background:#00c300} .share_btn li a.bm{background:#000} .share_btn li a.wa{background:#4dc247} .share_btn li a.tg{background:#22a9f7} .share_btn li a:hover,.shareplus:hover{-webkit-filter:grayscale(100%);opacity:0.8} .BlackBerry-Icon {width:42px;height:42px;padding-top:7px} #hideshare{display:none} .label-line {text-align: center;margin-bottom: 6px;position:relative;} .label-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute; top: 50%;left: 0;margin-top: -2px;}

  • Kemudian letakkan kode HTML dibawah ini tepat dibawah kode<data:post.body/> (yang kedua atau ketiga) bisa anda coba satu persatu.

<div class='share-wrpaper' id='share_btnper'> <div class='label-line'> <p class='share-judule'>Bagikan Artikel ini</p> </div> <div class='share_btn'><ul> <li><a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=626,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' title='Share to Facebook'><i class='fa fa-facebook'/></a></li> <li><a class='tw' 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;' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li> <li><a class='wa' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp' style='clear:both;font-size:19px!important'/></a></li> <li><a class='gp' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'/></a></li> <li><div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hideshare&apos;).style.display=&apos;inline-block&apos;'><i aria-hidden='true' class='fa fa-plus'/></span></div></li><li><div id='hideshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;inline-block&apos;;document.getElementById(&apos;hideshare&apos;).style.display=&apos;none&apos;'><i aria-hidden='true' class='fa fa-minus'/></span></div></li></ul> <ul class='showother' id='showother'> <li><a class='tg' expr:href='&quot;tg://msg?text=&quot; + data:post.title + &quot; - &quot; + data:blog.url' rel='nofollow' target='_blank' title='Share on Telegram'><i aria-hidden='true' class='fa fa-telegram' style='font-size:20px!important'/></a></li> <li><a class='pt' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' target='_blank'><i class='fa fa-pinterest'/></a></li> <li><a class='le' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share on LinkEdin'><i aria-hidden='true' class='fa fa-linkedin'/></a></li> <li><a class='tr' href='http://www.tumblr.com/share' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/></a></li> <li><a class='ln' expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target='_blank' title='Share On Line'> <svg class='icon icons8-LINE' viewBox='0 0 48 48'> <path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23 C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/> <path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637 c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185 c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001 C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687 C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652 c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688 c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035 c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917 c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603 c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604 c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/> </svg> </a></li> <li><a class='em' 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=email&quot;' expr:title='data:top.emailThisMsg' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-envelope-o'/></a></li> <li><a class='bm' expr:href='&quot;bbmi://api/share?message=&quot; + data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; + data:post.title' target='_blank' title='Share On BBM'> <svg class='icon BlackBerry-Icon' viewBox='-350 0 5950 8390'> <rect height='5600' rx='600' ry='600' style='fill: black;width:40px;overflow:hidden' width='6500'/> <g> <path d='M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z' style='fill: white; fill-rule: nonzero;'/> <path d='M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z' style='fill: white;'/> <path d='M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/> <path d='M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/> <path d='M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z' style='fill: white;'/> <path d='M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/> <path d='M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/> <path d='M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/> <path d='M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z' style='fill: white;'/> </g> </svg> </a></li> </ul> </div> </div>

  • Yang terakhir letakan kode font awesome berikut ini di atas</head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

3. Tombol share keren dan responsive ketiga

Tombol Share Keren dan Responsif dengan share sosial LinkedIn dan pinterest. Tombol Share  berisi lima tombol berbagi sosial. Ini bersih dan responsif di perangkat seluler.

  • Silahkan login akunBlogger.com >>Tema >>Edit HTML
  • Lalu letakkan kode berikut ini tepat diatas kode]]></b:skin>

/* Blog kami CSS Share Button */ .sharepost li{width:19%;padding:0;list-style:none;} .sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;} .sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;} .sharepost li a:hover{opacity:1;color:#444} .sharepost li .twitter{background-color:#55acee;} .sharepost li .facebook{background-color:#3b5998;} .sharepost li .gplus{background-color:#dd4b39;} .sharepost li .pinterest{background-color:#cc2127;} .sharepost li .linkedin{background-color:#0976b4;} .sharepost li .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;} .sharepost li{float:left;margin-right:1.2%} .sharepost li:last-child{margin-right:0} .sharepost li .fa:before{margin-right:5px}} @media screen and (max-width:420px) { .sharepost li{width:100%}}

  • Kemudian letakkan kode HTML dibawah ini tepat dibawah kode<data:post.body/> (yang kedua atau ketiga) bisa anda coba satu persatu.

<div class='sharepost'> <ul> <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li> <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li> <li><a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li> <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li> </ul> </div>

  • Yang terakhir letakan kode font awesome berikut ini di atas</head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

4. Tombol share keren dan responsive keempat

Tombol Share Keren dan Responsif ini lebih banyak ikon dalam berbagi di media sosial. Pembaca dapat membagikan posting blog sobat di banyak media sosial hanya dengan mengklik tombol lainnya. memiliki 12 tombol media sosial.

  • Silahkan login akunBlogger.com >>Tema >>Edit HTML
  • Lalu letakkan kode berikut ini tepat diatas kode]]></b:skin>

/* Blog kami Themes Share Button */ .sharede,.sharelight{position:relative;display:inline-block;} .sharelight{margin:40px auto 20px auto;} .sharelight a.fb,.sharelight a.gp,.sharelight a.tw,.sharelight span.pl{text-decoration:none!important;display:inline-block;margin:0 5px 5px 0;font-weight:400;border-radius:2px;color:#fff;text-shadow:none;padding:6px 16px;opacity:1;transition:all .3s} .sharelight a.gp {background:#f20000;} .sharelight a.fb {background:#516ca4;} .sharelight a.tw {background:#00baff;} .sharelight span.pl {background:#ff6600;} .fbtea,.gotea,.plustea,.twtea{font-size:13px!important;vertical-align:middle} .sharelight a.fb:hover,.sharelight a.gp:hover,.sharelight a.tw:hover,.sharelight span.pl:hover{color:#fff;opacity:.9} .sharelight a.fb:active,.sharelight a.gp:active,.sharelight a.tw:active,.sharelight span.pl:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)} ul#share-menu{margin:10px 0;padding:5px 15px}

  • Kemudian letakkan kode HTML dibawah ini tepat dibawah kode<data:post.body/> (yang kedua atau ketiga) bisa anda coba satu persatu.

<script type='text/javascript'> //<![CDATA[ var siteurl = window.location.href; document.write('<div class="sharelight"><div class="sharede"> \ <span class="pl" data-target="#share-menu"><i class="fa fa-plus plustea"></i></span> \ <ul class="dropdown-menu" id="share-menu"> \ <li><a class="social-popup" href="javascript:pinIt();">Pinterest</a></li> \ <li><a class="social-popup" href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> \ <li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> \ <li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> \ <li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> \ <li><a class="social-popup" href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> \ <li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> \ <li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> \ <li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> \ </ul> \ <a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\ <i class="fa fa-google-plus gotea"></i> Google</a> \ <a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\ <i class="fa fa-facebook fbtea"></i> Facebook</a> \ <a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\ <i class="fa fa-twitter twtea"></i> Twitter</a> \ </div><div class="clear"></div></div> \ '); $(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})}); function pinIt(){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("charset","UTF-8"),t.setAttribute("src","https://assets.pinterest.com/js/pinmarklet.js?r="+99999999*Math.random()),document.body.appendChild(t)}; //]]> </script>

  • Yang terakhir letakan kode font awesome berikut ini di atas</head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

Tombol Share Keren dan Responsif di blogger dengan ikon plus . Gaya ini mengandung banyak tombol berbagi sosial. Pembaca dapat berbagi posting blog sobat di banyak media sosial hanya dengan mengklik tombol plus dan meminimalkan dengan mengklik tombol minus. Gaya ini memiliki 9 pembagian sosial.

  • Silahkan login akunBlogger.com >>Tema >>Edit HTML
  • Lalu letakkan kode berikut ini tepat diatas kode]]></b:skin>

/* Blog kami Themes CSS Share Button */ #share_btnper{margin:20px auto;padding:0} .showother{display:none} .share_btn{position:relative;margin:0;padding:0;display:block;overflow:hidden} .share_btn ul,ul .showother{position:relative;margin:0;padding:0;font-size:12px} .share_btn ul li{float:left;display:inline-block;overflow:hidden} .share_btn li a,.shareplus{color:#fff;padding:0;width:40px;display:block;text-align:center;height:35px;line-height:35px;transition:all 0.25s;margin:0 5px 5px 0;text-transform:uppercase;letter-spacing:1px;border-radius:4px;overflow:hidden} .share_btn ul li span{padding:0;} .share_btn i{font-size:16px;padding:0;margin:0;line-height:35px;text-align:center} .shareplus{padding:0;background:#aaa;cursor:pointer} .share_btn li a.fb i,.share_btn li a.tw i{width:20px;text-align:left} .share_btn a:hover{background:#333;color:#fff} .share_btn li a.fb{background:#4867aa;padding:0 35px;width:auto} .share_btn li a.tw{background:#1da1f2;padding:0 35px;width:auto} .share_btn li a.gp{background:#dc4a38} .share_btn li a.pt{background:#ca2128} .share_btn li a.le{background:#0673ab} .share_btn li a.tr{background:#43556e} .share_btn li a.em{background:#141b23} .share_btn li a.ln{background:#00c300} .share_btn li a.bm{background:#000} .share_btn li a.wa{background:#4dc247} .share_btn li a:hover,.shareplus:hover{-webkit-filter:grayscale(100%)} @media screen and (max-width:768px){ .share_btn li a.fb,.share_btn li a.tw{padding:0 37px} .share_btn.showother{display:none} @media screen and (max-width:640px){ .share_btn li a.fb,.share_btn li a.tw{padding:0 25px}} @media screen and (max-width:320px){ .share_btn ul li a.fb,.share_btn ul li a.tw{padding:0 14px}}

  • Kemudian letakkan kode HTML dibawah ini tepat dibawah kode<data:post.body/> (yang kedua atau ketiga) bisa anda coba satu persatu.

<div class='share_btn'><ul> <li><a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=626,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' title='Share to Facebook'><i class='fa fa-facebook'/> <span class='hidetitle'>Share</span></a></li> <li><a class='tw' 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;' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/> <span class='hidetitle'>Share</span></a></li> <li><a class='gp' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'/></a></li> <li><div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;none&apos;'><i aria-hidden='true' class='fa fa-plus'/></span></div></li></ul> <ul class='showother' id='showother'> <li><a class='pt' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' target='_blank'><i class='fa fa-pinterest'/></a></li> <li><a class='le' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share on LinkEdin'><i aria-hidden='true' class='fa fa-linkedin'/></a></li> <li><a class='tr' href='http://www.tumblr.com/share' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/></a></li> <li><a class='ln' expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + data:post.url' target='_blank' title='Share On Line'> <svg class='icon icons8-LINE' viewBox='0 0 48 48'> <path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23 C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/> <path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637 c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185 c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001 C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687 C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652 c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688 c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035 c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917 c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603 c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604 c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/> </svg> </a></li> <li><whatsapp expr:href='data:post.url' expr:text='data:post.title'/><a class='wa' data-action='share/whatsapp/share' href='ardithemes'><i aria-hidden='true' class='fa fa-whatsapp' style='clear:both;font-size:24px!important'/></a></li> <li><a class='em' 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=email&quot;' expr:title='data:top.emailThisMsg' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-envelope-o'/></a></li> <b:if cond='data:blog.isMobileRequest == &quot;true&quot; and data:blog.pageType == &quot;item&quot;'> <li><a class='bm' expr:href='&quot;bbmi://api/share?message=&quot; + data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; + data:post.title' target='_blank' title='Share On BBM'> <svg class='icon BlackBerry-Icon' viewBox='-350 0 5950 8390'> <rect height='5600' rx='600' ry='600' style='fill: black;width:40px;overflow:hidden' width='6500'/> <g> <path d='M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z' style='fill: white; fill-rule: nonzero;'/> <path d='M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z' style='fill: white;'/> <path d='M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/> <path d='M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/> <path d='M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z' style='fill: white;'/> <path d='M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/> <path d='M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/> <path d='M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/> <path d='M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z' style='fill: white;'/> </g> </svg> </a></li> </b:if> <li><div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-minus'/></span></div></li> </ul> </div>

  • Yang terakhir letakan kode font awesome berikut ini di atas</head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

6. Tombol share keren dan responsive keEnam

Tombol Share Keren dan Responsif di blogger sangat sederhana dengan tiga media sosial dasar. Tombol Share Keren dan Responsif di blogger ini memiliki tombol berbagi sosial terbaik dan responsif di perangkat seluler.

  • Silahkan login akunBlogger.com >>Tema >>Edit HTML
  • Lalu letakkan kode berikut ini tepat diatas kode]]></b:skin>

/* Blog kami Share Button */ .bottomshare{display:block;padding:0 20px;margin:auto;text-align:center} .sharede,.sharesimp{position:relative;} .sharesimp{margin:20px auto;} .sharesimp a.fb,.sharesimp a.gp,.sharesimp a.tw{position:relative;display:inline-block;margin:0 5px 5px 5px;color:rgba(255,255,255,1);text-shadow:none;padding:6px 0;width:25.9%;font-size:14px;overflow:hidden;border-radius:99em;transition:all .3s} .sharesimp a.gp {background:#f20000;} .sharesimp a.fb {background:#516ca4;} .sharesimp a.tw {background:#00baff;} .fbtea,.gotea,.plustea,.twtea{vertical-align:middle;color:rgba(255,255,255,1);margin:0 5px 0 0;transition:all .3s} .sharesimp a:hover .fbtea,.sharesimp a:hover .gotea,.sharesimp a:hover .plustea,.sharesimp a:hover .twtea{color:rgba(255,255,255,1)} .sharesimp a.fb:hover,.sharesimp a.gp:hover,.sharesimp a.tw:hover{color:#fff} .sharesimp a.fb:active,.sharesimp a.gp:active,.sharesimp a.tw:active{box-shadow:inset 0 1px 0 rgba(0,0,0,.16)} @media only screen and (max-width:640px){ .sharesimp a.fb,.sharesimp a.gp,.sharesimp a.tw{width:100%} <span class='bottomshare'> <script type='text/javascript'> //<![CDATA[ var siteurl = window.location.href; document.write('<div class="sharesimp"><div class="sharede"> \ <a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\ <i class="fa fa-google-plus gotea"></i> Google</a> \ <a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\ <i class="fa fa-facebook fbtea"></i> Facebook</a> \ <a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\ <i class="fa fa-twitter twtea"></i> Twitter</a> \ </div><div class="clear"></div></div> \ '); //]]> </script> <div class='clear'/> </span>

  • Kemudian letakkan kode HTML dibawah ini tepat dibawah kode<data:post.body/> (yang kedua atau ketiga) bisa anda coba satu persatu.

<span class='bottomshare'> <script type='text/javascript'> //<![CDATA[ var siteurl = window.location.href; document.write('<div class="sharesimp"><div class="sharede"> \ <a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">\ <i class="fa fa-google-plus gotea"></i> Google</a> \ <a class="fb social-popup" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">\ <i class="fa fa-facebook fbtea"></i> Facebook</a> \ <a class="tw social-popup" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">\ <i class="fa fa-twitter twtea"></i> Twitter</a> \ </div><div class="clear"></div></div> \ '); //]]> </script> <div class='clear'/> </span>

  • Yang terakhir letakan kode font awesome berikut ini di atas</head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

Tombol share yang simple

  • Silahkan login akunBlogger.com >>Tema >>Edit HTML
  • Lalu letakkan kode berikut ini tepat diatas kode]]></b:skin>

/* Blog kami Themes Share */ .item .post-footer{padding:0 10px} .share-box{position:relative;padding:20px 0} .share-title{background:#ffa502;color:#fff;display:inline-block;font-weight:400;position:relative;padding:5px 10px;font-size:14px;border-radius:2px} .share-free{display:inline-block;padding:0;padding-top:0;font-size:14px;font-weight:400} .share-free a{background:#999;color:#fff;margin-left:4px;border-radius:2px;display:inline-block;padding:5px 10px} .share-free a:hover{color:#fff} .share-free .fac-art{background:#3b5998} .share-free .fac-art:hover{background:rgba(49,77,145,0.9)} .share-free .twi-art{background:#00acee} .share-free .twi-art:hover{background:rgba(7,190,237,0.9)} .share-free .goo-art{background:#db4a39} .share-free .goo-art:hover{background:rgba(221,75,56,0.9)}@media screen and (max-width:300px){ .share-box {float:none!important;margin:0 auto;text-align:center;clear:both}.share-box{overflow:hidden}

  • Kemudian letakkan kode HTML dibawah ini tepat dibawah kode<data:post.body/> (yang kedua atau ketiga) bisa anda coba satu persatu.

<div class='share-box'> <h4 class='share-title'>Share This</h4> <div class='share-free'> <a class='fac-art' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a> <a class='twi-art' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a> <a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a> </div> </div>

  • Yang terakhir letakan kode font awesome berikut ini di atas</head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

Sekian dari Admin informasi singkat tentang Cara Memasang Tombol Share Keren di Blogger. Semoga dapat bermanfaat dan artikel sobat bisa dibagikan ke berbagai media sosial. Jika tutorial ini bermanfaat silahkan share dengan tombol media sosial yang sudah tersedia.

No comments