Cara Memasang Tombol Share Keren Dan Responsif Di Blogger Terbaru
Selamat tiba di blog . .Cara Memasang Tombol Share Keren dan Responsif di blogger. Sudah tidak absurd lagi bagi para blogger yang aktif di dunia blogging sering melihat pernak-pernik tombol share yang terpasang di setiap blog.
Biasanya tombol share berada di samping postingan, di atas dan juga di final postingan yang bertujuan semoga artikel yang di buat sanggup di share oleh pengunjung yang mampir di blog kita kemedia sosial pribadinya.
Jika artikel yang kita buat sangat bermanfaat, tanpa di paksa para pengunjung blog akan suka rela men-share artikel buatan kita ke media umum dan alhasil blog kita akan di kenal oleh orang lain selain pengunjung tetap. Selain di kenal dengan memasang tombol media umum akan meningkatkan traffic di blog.
Media sosial menawarkan bunyi dan platform bagi siapa pun yang mau terlibat, memungkinkan pengguna untuk terhubung dengan orang lain yang mempunyai minat yang sama. Media sosial membuat komunitas virtual yang berpusat di sekitar segala hal, mulai dari ceruk bisnis dan keterampilan teknis, sampai hobi dan aspirasi.
Situs web - media sosial - dan penggunanya - sanggup membantu mengarahkan kemudian lintas referensi yang signifikan ke halaman web Anda. Jadi, membuat konten yang ingin dibagikan dan ditautkan oleh pengunjung pada akibatnya akan meningkatkan peringkat Anda dalam hasil pencarian. Dan meningkatkan kehadiran media umum sanggup berdampak kasatmata terhadap SEO situs web jikalau keduanya terhubung dengan benar melalui tombol menyebarkan sosial.
Nah, Pada postingan kali ini Admin akan menyebarkan cara memasang tombol share keren di bawah artikel blog. Tombol share ini sangat simple dan keren, gampang terlihat oleh pengunjung dan fast loading dan tentunya juga responsive.
Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru
Langkahnya sebagai berikut:
- Sobat Login di Blogger.com
- Pada Dashboar blogger bab kiri klik hidangan Tema > kemudian klik hidangan Edit HTML
- Sekarang sahabat melihat seluruh isyarat blog blogger sahabat dan tekan CTRL + F untuk membuka kotak pencarian. Cari kedua isyarat di bawah ini
1. Tombol share keren dan responsive Pertama
- Silahkan login akun Blogger.com >> Tema >> Edit HTML
- Lalu letakkan isyarat berikut ini sempurna diatas isyarat ]]></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:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)} .wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700} .wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222} .wa-button i{font-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 isyarat HTML dibawah ini sempurna dibawah isyarat <data:post.body/> (yang kedua atau ketiga) sanggup 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='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a><a expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");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='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'></i></a> </div> </div> - Yang terakhir letakan isyarat 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 akun Blogger.com >> Tema >> Edit HTML
- Lalu letakkan isyarat berikut ini sempurna 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 isyarat HTML dibawah ini sempurna dibawah kode <data:post.body/> (yang kedua atau ketiga) sanggup 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='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=626,resizable=0,top=50,left=100");return false;' rel='nofollow' title='Share to Facebook'><i class='fa fa-facebook'/></a></li> <li><a class='tw' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li> <li><a class='wa' data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + 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='"http://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");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('showother').style.display='inline-block';document.getElementById('showshare').style.display='none';document.getElementById('hideshare').style.display='inline-block''><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('showother').style.display='none';document.getElementById('showshare').style.display='inline-block';document.getElementById('hideshare').style.display='none''><i aria-hidden='true' class='fa fa-minus'/></span></div></li></ul> <ul class='showother' id='showother'> <li><a class='tg' expr:href='"tg://msg?text=" + data:post.title + " - " + 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='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' target='_blank'><i class='fa fa-pinterest'/></a></li> <li><a class='le' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");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,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/></a></li> <li><a class='ln' expr:href='"https://timeline.line.me/social-plugin/share?url=" + 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=email"' expr:title='data:top.emailThisMsg' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-envelope-o'/></a></li> <li><a class='bm' expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + 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 isyarat 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 menyebarkan sosial. Ini higienis dan responsif di perangkat seluler.
- Silahkan login akun Blogger.com >> Tema >> Edit HTML
- Lalu letakkan isyarat berikut ini sempurna diatas kode ]]></b:skin>
/* Teamwork212 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 isyarat HTML dibawah ini sempurna dibawah kode <data:post.body/> (yang kedua atau ketiga) sanggup anda coba satu persatu.
<div class='sharepost'> <ul> <li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li> <li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + 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='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li> <li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'/>Share</a></li> </ul> </div>
- Yang terakhir letakan isyarat 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 menyebarkan di media sosial. Pembaca sanggup membagikan posting blog sahabat di banyak media umum hanya dengan mengklik tombol lainnya. mempunyai 12 tombol media sosial.
- Silahkan login akun Blogger.com >> Tema >> Edit HTML
- Lalu letakkan isyarat berikut ini sempurna diatas kode ]]></b:skin>
/* Teamwork212 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 isyarat HTML dibawah ini sempurna dibawah kode <data:post.body/> (yang kedua atau ketiga) sanggup 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="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">Digg</a></li> \ <li><a class="social-popup" href="//www.linkedin.com/shareArticle?mini=true&url=' + siteurl + '" target="_blank" title="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">Linkedin</a></li> \ <li><a class="social-popup" href="//www.stumbleupon.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">Stumbleupon</a></li> \ <li><a class="social-popup" href="//delicious.com/post?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">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="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">Tumblr</a></li> \ <li><a class="social-popup" href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">BufferApp</a></li> \ <li><a class="social-popup" href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">Pocket</a></li> \ <li><a class="social-popup" href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">Evernote</a></li> \ </ul> \ <a class="gp social-popup" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">\ <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="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">\ <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="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">\ <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 isyarat font awesome berikut ini di atas </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/> 5. Tombol share keren dan responsive keLima
Tombol Share Keren dan Responsif di blogger dengan ikon plus . Gaya ini mengandung banyak tombol menyebarkan sosial. Pembaca sanggup menyebarkan posting blog sahabat di banyak media umum hanya dengan mengklik tombol plus dan meminimalkan dengan mengklik tombol minus. Gaya ini mempunyai 9 pembagian sosial.
- Silahkan login akun Blogger.com >> Tema >> Edit HTML
- Lalu letakkan isyarat berikut ini sempurna diatas kode ]]></b:skin>
/* Teamwork212 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 isyarat HTML dibawah ini sempurna dibawah kode <data:post.body/> (yang kedua atau ketiga) sanggup anda coba satu persatu.
<div class='share_btn'><ul> <li><a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=626,resizable=0,top=50,left=100");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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/> <span class='hidetitle'>Share</span></a></li> <li><a class='gp' expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");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('showother').style.display='block';document.getElementById('showshare').style.display='none''><i aria-hidden='true' class='fa fa-plus'/></span></div></li></ul> <ul class='showother' id='showother'> <li><a class='pt' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' target='_blank'><i class='fa fa-pinterest'/></a></li> <li><a class='le' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");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,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/></a></li> <li><a class='ln' expr:href='"https://timeline.line.me/social-plugin/share?url=" + 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='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=email"' expr:title='data:top.emailThisMsg' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-envelope-o'/></a></li> <b:if cond='data:blog.isMobileRequest == "true" and data:blog.pageType == "item"'> <li><a class='bm' expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + 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('showother').style.display='none';document.getElementById('showshare').style.display='block''><i aria-hidden='true' class='fa fa-minus'/></span></div></li> </ul> </div>
- Yang terakhir letakan isyarat 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 umum dasar. Tombol Share Keren dan Responsif di blogger ini mempunyai tombol menyebarkan sosial terbaik dan responsif di perangkat seluler.
- Silahkan login akun Blogger.com >> Tema >> Edit HTML
- Lalu letakkan isyarat berikut ini sempurna diatas kode ]]></b:skin>
/* Teamwork212 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="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">\ <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="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">\ <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="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">\ <i class="fa fa-twitter twtea"></i> Twitter</a> \ </div><div class="clear"></div></div> \ '); //]]> </script> <div class='clear'/> </span> - Kemudian letakkan isyarat HTML dibawah ini sempurna dibawah kode <data:post.body/> (yang kedua atau ketiga) sanggup 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="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">\ <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="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">\ <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="Cara Memasang Tombol Share Keren dan Responsif di blogger Terbaru">\ <i class="fa fa-twitter twtea"></i> Twitter</a> \ </div><div class="clear"></div></div> \ '); //]]> </script> <div class='clear'/> </span> - Yang terakhir letakan isyarat font awesome berikut ini di atas </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/> 7. Tombol share keren dan responsive keTujuh
Tombol share yang simple
- Silahkan login akun Blogger.com >> Tema >> Edit HTML
- Lalu letakkan isyarat berikut ini sempurna diatas kode ]]></b:skin>
/* Teamwork212 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 isyarat HTML dibawah ini sempurna dibawah kode <data:post.body/> (yang kedua atau ketiga) sanggup 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='"https://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a> <a class='twi-art' expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a> <a class='goo-art' expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a> </div> </div>
- Yang terakhir letakan isyarat 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 isu singkat ihwal Cara Memasang Tombol Share Keren di Blogger. Semoga sanggup bermanfaat dan artikel sahabat sanggup dibagikan ke banyak sekali media sosial. Jika tutorial ini bermanfaat silahkan share dengan tombol media umum yang sudah tersedia.
0 Response to "Cara Memasang Tombol Share Keren Dan Responsif Di Blogger Terbaru"
Post a Comment