Bagaimana Menambahkan Tombol Media Sosial ke Postingan Blogger?
Dalam tutorial ini Anda akan mencar ilmu menambahkan tombol sharing sosial ke setiap posting blogger Anda. Tombol menyebarkan sosial responsif ini akan melekat ke bab atas atau bawah setiap posting blog. Ini membantu pengunjung blog Anda untuk menyebarkan konten Anda di media umum tanpa meninggalkan halaman blog Anda. |
| http://www.mybloggertricks.com |
Gadget sharing untuk blog blogspot ini yakni versi ringan dari JumboShare Counter. Dengan demikian saya akan menyebutnya JumboShare Sederhana. Ini memuat lebih cepat dan memakan waktu muat yang tidak berarti. Waktu muat yakni faktor SEO utama dan Google akan memberi peringkat lebih tinggi di SERPs hanya jikalau laman web Anda dimuat lebih cepat dan menyediakan antarmuka yang gampang digunakan.
Saya telah membuat gadget menyebarkan ringan ini dengan menyelaraskan semua tombol media umum utama di dalam baris horizontal. Pengguna sanggup mengaktifkan gadget untuk memperluas atau menciutkan jumlah tombol sharing yang ditampilkan.
Gadget ini meliputi tombol media umum berikut:
- GooglePlus +1
- StumbleUpon
- Buffer
- Viber - Secara otomatis akan ditampilkan di perangkat mobile
- Whatsapp - Secara otomatis akan ditampilkan di perangkat mobile
Tombol ini mempunyai tampilan dan gaya yang sama persis dengan rekan-rekan resminya. Ini memakai stylesheet resmi untuk Facebook, Google, Twitter dan sisanya.
Tombol viber dan whatsapp share hanya akan ditampilkan di perangkat mobile menyerupai smartphone. Pengunjung Anda kini sanggup menyebarkan posting blog Anda dengan kontak viber mereka dan teman-teman whatsapp. Saya memakai kondisi IsMobileRequest semoga tombol ini hanya menampilkan smartphone daripada memakai tampilan CSS: tidak ada.
Anda sanggup menentukan untuk menampilkan gadget menyebarkan sosial ini sempurna di bawah judul posting blog atau Anda sanggup menampilkannya di bab bawah setiap entri blog. Mari pribadi bekerja.
Menambahkan Tombol Media Sosial ke Postingan Blogger
- Buka Blogger> Tema> Cadangan tema Anda
- Klik Edit HTML
- Cari ]]> </ b: skin> dan tempelkan isyarat CSS berikut sempurna di atas ]]> </ b: skin>
/* ##### JumboShare Simplified ####### */ #MBTshares-wrap{margin:20px 0px;border-top: 1px dotted #eee;padding: 10px 0;border-bottom: 1px dotted #eee;overflow:hidden} #MBTshares{display:inline-block;overflow:hidden;text-align:left;white-space:nowrap;font-family:arial;font-size:11px;margin:0px 5px 0; line-height: 1.4em;} #horiz{position:relative; padding:0; margin:0;} #horiz #MBTshares{position:relative;top:-8px; padding-top:20px;} #MBTshares a:hover{text-decoration:none!important;} /***Facebook***/ .mbt-fb{background:transparent linear-gradient(#4C69BA,#3B55A0) repeat scroll 0 0;border:medium none;border-radius:2px;color:#FFF;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px;text-shadow:0 -1px 0 #354C8C;white-space:nowrap;text-shadow:0 -1px 0 #354C8C} .mbt-fb:focus,.mbt-fb:hover,.mbt-fb:active{background:transparent linear-gradient(#5B7BD5,#4864B1) repeat scroll 0 0;border-color:#5874C3 #4961A8 #41599F;box-shadow:0 0 1px #607FD6 inset} .mbt-fb i{padding:2px 2px 0 4px;font-size:11px;color:#3B5998;background:#fff;margin-right:4px;margin-top:3px} .mbt-fb:hover, .mbt-fb:visited, .mbt-tw:hover,.mbt-tw:visited, .mbt-linkedin:hover ,.mbt-linkedin:visited{color:#fff!important;} /***Gplus, Pinit, Stumbleupon***/ .mbt-gp{box-shadow:0 1px 0 rgba(0,0,0,0.05);transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#FFF;background-image:none;border:medium none;border-radius:2px;border:1px solid rgba(0,0,0,0.17);color:#262626;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 6px 0 4px;white-space:nowrap} .mbt-gp:hover, .mbt-gp:visited{color:#262626!important;} #MBTshares .pinit{background:#f9f9f9!important} #MBTshares .stumb{background:#f0fafe!important;border:1px solid #cde3ea} #MBTshares .stumb:hover{border:1px solid #b7d5df;box-shadow:0 1px 0 rgba(0,0,0,0.1)} #MBTshares .stumb i{color:#eb4823!important;font-size:13px!important;margin-top:1px!important} .mbt-gp:focus,.mbt-gp:hover,.mbt-gp:active{border:1px solid rgba(0,0,0,0.25);box-shadow:0 1px 0 rgba(0,0,0,0.1)} .mbt-gp i{padding:2px 2px 0 0;font-size:11px;color:#DB4437;margin-right:2px;margin-top:3px} .mbt-gp .fa-pinterest{padding:0 2px 0 0;font-size:14px} #MBTshares .bufferimg{width:15px; margin-top:2px; padding:0 1px 0 0; } /***LinkedIn***/ .mbt-linkedin{transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#0077B5;text-shadow:0 -1px #005887;border:medium none;border-radius:2px;border:1px solid #066094;color:#fff;cursor:pointer;font-weight:700;height:20px;line-height:20px;padding:0 2px 0 1px;white-space:nowrap} @media screen and (-webkit-min-device-pixel-ratio:0) { .mbt-linkedin{padding:0 5px 0 1px} } .mbt-linkedin:focus,.mbt-linkedin:hover,.mbt-linkedin:active{border:1px solid #0369A0;background-color:#0369A0} .mbt-linkedin i{padding:0;font-size:17px;color:#FFF;margin-right:0;position:relative;left:1px} .mbt-linkedin .ibg{background:#0369A0 none repeat scroll 0 0;width:17px;display:inline-block;border-right:1px solid #006095;border-radius:2px;height:20px;padding:0 2px 0 1px;margin:0 2px 0 -1px} /**Twtter, Print, Whatsapp, viber**/ .mbt-tw{position:relative;height:22px;padding:4px 8px 1px 4px;font-weight:700;color:#FFF;cursor:pointer;background-color:#1B95E0;border-radius:3px;box-sizing:border-box} .mbt-tw:focus,.mbt-tw:hover,.mbt-tw:active{background-color:#0C7ABF} .mbt-tw i{padding:0 0 0 1px;font-size:14px;color:#fff;margin-right:2px;margin-top:0} .mbt-o{max-width:100%} .mbt-o,.mbtcount-o,.mbt-fb,.mbt-gp,.mbt-linkedin,.mbt-tw,.label,#mbtcount{display:inline-block;vertical-align:top} .mbtcount-o{position:relative;min-width:15px;height:17px;text-align:center;padding:1px 5px;margin-left:2px;background:#FFF none repeat scroll 0 0;border:1px solid #e7e7e7;border-radius:2px;display:none!important; } #MBTshares .printme {background-color:#333;} #MBTshares .printme:focus,#MBTshares .printme:hover,#MBTshares .printme:active{background-color:#000} #MBTshares .whatsapp{background-color:#73D40B;} #MBTshares .whatsapp i{font-size:15px!important;} #MBTshares .whatsapp:focus,#MBTshares .whatsapp:hover,#MBTshares .whatsapp:active{background-color:#65BA09} #MBTshares .viber{background-color:#7b519d;} #MBTshares .viber:focus,#MBTshares .viber:hover,#MBTshares .viber:active{background-color:#8558aa} #MBTshares .viberimg{width:13px; margin-top:0px; padding:0 3px 0 0; } #mbtcount{color:#666;white-space:nowrap;text-decoration:none;padding:2px 0 0} #mbtcount:hover{text-decoration:none} #MBTshares .arrow{height:0;left:-10px;position:relative;top:-15px;width:5px;z-index:2} #MBTshares .ext{min-height:18px!important} #MBTshares .arrow s,#MBTshares .arrow i{border-color:transparent #e7e7e7;border-style:solid;border-width:4px 5px 4px 0;display:block;position:relative;top:19px} #MBTshares .arrow i{border-right-color:#FFF;left:2px;top:11px} .share-btn{position:relative;display:inline-block; display:none!important;} .share-btn .h2{font-size:30px;font-weight:700;font-family:arial;color:#73D40B;height:31px; line-height: 1.4em;} .share-btn .h4{font-size:12px;font-family:arial} /*#########Horizontal Switch###########*/ .switchoff2{display:inline-block;} .mbtswitch2{padding:0 15px 0 3px;position:relative;top:-15px;margin:20px 0 0 3px;display:inline-block;max-width:30px;height:20px;cursor:pointer;background-color:#fff;border:1px solid #eee;border-radius:2px;outline:0 none;font:16px fontawesome;color:#ddd} .mbtswitch2:hover{color:#73D40B} .mbtswitch2 i.active:after{content:'\f067';position:relative;left:7px;top:2px;font-style:normal} .mbtswitch2 i.inactive:after{content:'\f068';position:relative;left:7px;top:2px;font-style:normal} @media only screen and (max-width:230px) { .tcount{border-bottom: 2px solid #74D50C; border-right:none; min-width:100%;} #horiz #MBTshares {width: 100%;}- Tempel isyarat berikut sempurna di atas </ head> di dalam template Anda:
<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> - Selanjutnya tambahkan script jQuery berikut sempurna di atas tag </ body>
<script type='text/javascript'> //<![CDATA[ /* ##### FREE JUMBOSHARE SIMPLIFIED ####### Developed by: www.MyBloggerTricks.com Dual licensed under the MIT license and GPL license. Copyright (c) 2015-2016 STCnetwork.org */ $(document).ready(function() { $(".mbtswitch").click(function(){$(".switchoff").slideToggle();if($(".mbtswitch i").attr("class")==="active"){$(".mbtswitch i").removeClass("active").addClass('inactive')}else if($(".mbtswitch i").attr("class")==="inactive"){$(".mbtswitch i").removeClass("inactive").addClass('active')}}); $(".mbtswitch2").click(function(){$(".switchoff2").slideToggle();if($(".mbtswitch2 i").attr("class")==="active"){$(".mbtswitch2 i").removeClass("active").addClass('inactive')}else if($(".mbtswitch2 i").attr("class")==="inactive"){$(".mbtswitch2 i").removeClass("inactive").addClass('active')}}); }); //]]></script> - Kemudian Simpan Tema
Tambahkan Tombol Media Sosial di Atas / Bawah Dari Setiap Postingan Blog
Ikuti langkah gampang ini untuk menambahkan tombol menyebarkan sempurna di bawah setiap judul posting blog atau footer posting:
Di dalam tema Anda, cari <data: post.body />. Kode ini terletak dua kali, sekali untuk tampilan seluler dan satu kali untuk tampilan desktop. Karena itu perhatikan tampilan kedua dari <data: post.body /> saja.
Catatan: Jika Anda ingin menampilkan bilah menyebarkan horisontal di bawah judul posting ini, tempelkan isyarat HTML berikut sempurna di atas <data: post.body /> tetapi jikalau Anda ingin menampilkan bilah sharing di bab bawah setiap entri blog, lalu tempelkan yang berikut Kode HTML di bawah <data: post.body />
Jika Anda ingin menampilkan tombol menyebarkan di bab atas dan bawah setiap posting blog, maka tempel isyarat HTML berikut sekali di atas <data: post.body /> dan sekali di bawah <data: post.body />.
<b:if cond='data:blog.pageType == "item"'> <div id='MBTshares-wrap'> <!--TOTAL--> <div class='share-btn tcount' data-service='total'> <div class='count h2 anim'/> <div class='h4'>SHARES</div> </div> <span id='horiz'> <!--FACEBOOK--> <div id='MBTshares'> <div class='mbt-o'> <a class='mbt-fb' expr:href='"http://www.facebook.com/share.php?v=4&u=" + data:post.url + "&t=" + data:post.title' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Share on Facebook!'><i class='fa fa-facebook'/><span class='label'>Share</span></a> </div> <div class='mbtcount-o'> <div class='arrow'><s/><i/></div> <span class='share-btn' data-service='facebook'> <span class='count anim' id='mbtcount'/></span> </div> </div> <!--PINTEREST--> <div id='MBTshares'> <div class='mbt-o'> <a class='mbt-gp pinit' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Pin it!'><i class='fa fa-pinterest'/><span class='label'>Pin it</span></a> </div> <div class='mbtcount-o ext'> <div class='arrow'><s/><i/></div> <span class='share-btn' data-service='pinterest'> <span class='count anim' id='mbtcount'/></span> </div> </div> <!--TWITTER--> <div id='MBTshares'> <div class='mbt-o'> <a class='mbt-tw' expr:href='"http://twitter.com/home?status=" + data:post.title + "-" + data:post.url' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Share on Twitter!'><i class='fa fa-twitter'/><span class='label'>Tweet</span></a> </div> </div> <!--LINKEDIN--> <div id='MBTshares'> <div class='mbt-o'> <a class='mbt-linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Share on Linkedin!'><span class='ibg'><i class='fa fa-linkedin'/></span><span class='label'>Share</span></a> </div> <div class='mbtcount-o ext'> <div class='arrow'><s/><i/></div> <span class='share-btn' data-service='linkedin'> <span class='count anim' id='mbtcount'/></span> </div> </div> <!--GOOGLE PLUS--> <div id='MBTshares'> <div class='mbt-o'> <a class='mbt-gp' expr:href='"https://plus.google.com/share?url=" + data:post.url' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Share on Google Plus!'><i class='fa fa-google-plus'/><span class='label'>Share</span></a> </div> <div class='mbtcount-o ext'> <div class='arrow'><s/><i/></div> <span class='share-btn' data-service='google'> <span class='count anim' id='mbtcount'/></span> </div> </div> <!--STUMBLEUPON--> <div id='MBTshares'> <div class='mbt-o'> <a class='mbt-gp stumb' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Stumble it!'><i class='fa fa-stumbleupon'/><span class='label'>Share</span></a> </div> <div class='mbtcount-o ext'> <div class='arrow'><s/><i/></div> <span class='share-btn' data-service='stumbleupon'> <span class='count anim' id='mbtcount'/></span> </div> </div> <div class='switchoff2' style='display:none;'> <!--BUFFER--> <div id='MBTshares'> <div class='mbt-o'> <a class='mbt-gp' expr:href='"https://buffer.com/add?url=" + data:post.url + "&picture=" + data:post.thumbnailUrl + "&text=" + data:post.title + "&via=stc_network"' onclick='window.open(this.href,'sharer', 'toolbar=0,scrollbars,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Share on Buffer!'><img class='bufferimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBJqNShnTBQHzUH-20bbGl8nx84k7BJR6Fs1Tfy7acqp_fxZTSdPPpNRS221FjNgCINipsxP_hp1GZc2veCaT9gfLJH8DS0wqNVrvzG5bO0IKCUCDEBczJP3cHyUEce9Z_2FmSc4aXUocp/s1600/logo-icon.png'/><span class='label'>Buffer</span></a> </div> <div class='mbtcount-o ext'> <div class='arrow'><s/><i/></div> <span class='share-btn' data-service='buffer'> <span class='count anim' id='mbtcount'/></span> </div> </div> <b:if cond='data:blog.isMobileRequest == "true"'> <!-- WHATSAPP --> <div id='MBTshares'> <div class='mbt-o'> <a class='mbt-tw whatsapp' expr:href='"whatsapp://send?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank' title='Share on whatsapp!'><i class='fa fa-whatsapp'/><span class='label'>SMS</span></a> </div> </div> <!-- VIBER --> <div id='MBTshares'> <div class='mbt-o'> <a class='mbt-tw viber' expr:href='"viber://forward?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank' title='Share on viber!'><img class='viberimg' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ESt-O7osHDjk0LAx0oSyE81GAfaJ1MDfiU4HsHDGQZrhWZR6VOZpgOsJEgXDo15fOf0TiicxfpvolUYZToLxoJVsifitwF1LdZAueuJDKs4SQ5rEOCeemHYjh79XLFcdf4MxQzcek8qT/s1600/Icon_small.png'/><span class='label'>Share</span></a> </div> </div> </b:if> <!-- PRINT --> <div id='MBTshares'> <div class='mbt-o'> <a class='mbt-tw printme' href='javascript:window.print()' rel='nofollow' target='_blank' title='Print this page!'><i class='fa fa-print'/><span class='label'>Print</span></a> </div> </div> </div> <!--switchoff--> <span class='mbtswitch2'><i class='active'/></span> </span> </div></b:if> Butuh pertolongan di tombol Add Sharing di Blogger?
Beritahu saya jikalau Anda mempunyai pertanyaan. Saya ingin menjawab semua pertanyaan Anda. Tutorial yang lebih menarik dalam perjalanannya alasannya saya kembali ngeblog.
Komentar
Posting Komentar