Cara Buat Widget Kartu Share Hanya di Postingan Blogger

Tweet

D-Copy Blog | Jaringan sosial sekarang adalah raja untuk blog tetapi blog menggunakan situs sosial yang lebih cerdas dan mendapatkan kesuksesan besar dari itu. Juga situs sosial memberikan Anda pengunjung yang lebih unik dibandingkan pengunjung biasa. Terutama dalam platform blogging kita menggunakan peralatan sosial seperti kotak Facebook, ditambah dengan Google+, tombol pinterest pin dan tombol twitter atau twitter follow box. Saya pikir sebagian besar menggunakan link hanya untuk berbagi tetapi apakah Anda menemukan di platform blogger adalah siapa saja yang menggunakan tombol share gaya menarik seperti platform lainnya. Untuk mendapatkan jumlah besar suka dan berbagi Anda perlu menggunakan beberapa tombol yang menarik maka Anda dapat mengatakan untuk mendapatkan jumlah besar seperti di blog Anda.

Langkah :

1. Buka Akun Blogger Anda
2. Masuk ke Menu Edit HTML, jangan lupa centang Expand Template Widget
3. Cari kode dibawah ini :

]]></b:skin>

     4.  Pastekan kode dibawah ini, diatas pada kode diatas :

.MyBloggerClub:active {position:relative;top:1px;} .MBC_new {width:726px;padding-bottom:40px;zoom:1;} .MBC_new:before, .MBC_new:after {content:"";display:table;} .MBC_new:after {clear:both;} .MBC-container {display:none;position:fixed;top:0;left:0;z-index:9999;overflow:auto;} .MBC {margin:30px auto;padding-bottom:40px;position:relative;width:726px;z-index:1005;zoom:1;} .MBC:before, .MBC:after {content:"";display:table;} .MBC:after {clear:both;} .MBC-overlay {     background:-webkit-gradientundefinedradial,50% 0,1000,50% 0,100,fromundefined#696969),toundefined#CCC));     background:-moz-radial-gradientundefined50% 0 0deg, ellipse farthest-corner, #DDD, #494949);     background-color:#CCC;display:none;position:fixed;top:0;left:0;     z-index:9998;zoom:1;filter:alphaundefinedopacity=95);opacity:0.95; } .MBC-close-dialog {     -moz-box-shadow:inset 0px 1px 0px 0px #b5a7a7;     -webkit-box-shadow:inset 0px 1px 0px 0px #b5a7a7;     box-shadow:inset 0px 1px 0px 0px #b5a7a7;     -moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;     background-color:#898989;border:1px solid #6e6564;color:#FFF;     cursor:pointer;display:block;font-family:Trebuchet MS;     margin:6px 12px 6px 7px;font-size:15px;padding:1px 4px 3px 3px;     position:absolute;right:-17px;top:-17px;text-align:center;     text-shadow:-1px -1px 0px #8f8888;width:16px; } .MBC-close-dialog:hover {     background:-webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0.05, #fe1a00), color-stopundefined1, #ce0100));     background:-moz-linear-gradientundefinedcenter top, #fe1a00 5%, #ce0100 100%);     filter:progid:DXImageTransform.Microsoft.gradientundefinedstartColorstr='#fe1a00', endColorstr='#ce0100');     background-color:#fe1a00;border-bottom:1px solid #B50E0E; } .MBC-widget {     border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;       border-style:solid;border-width:1px;float:left;height:175px;     margin:20px;position:relative;width:320px; } .MBC-widget-89 {     color:#FFF;font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;font-size:12px;     font-style:italic;line-height:16px;margin:30px 0 0 30px;width:150px;z-index:10; } .MBC-widget-button {margin:20px 0 0 30px;} .MBC-widget-image{     background-image:urlundefinedhttp://4.bp.blogspot.com/-JXB7Mmvq9QQ/UCkufmyuqKI/AAAAAAAACqY/JnPSTPedEbU/s1600/sc-sprite.png);background-repeat:no-repeat;position:absolute;z-index:1; } .MBC-widget-upper {     border-radius:0 0px 4px 4px;-webkit-border-radius:0 0px 4px 4px;-moz-border-radius:0 0px 4px 4px;     border-style:solid;border-width:1px 0 0;bottom:0;height:35px;position:absolute;width:100%; } .MBC-facebook{     background:-webkit-gradientundefinedlinear, left top, left bottom, color-stopundefined0.05, #88A2C5), color-stopundefined1, #5B72A6));     background:-moz-linear-gradientundefinedcenter top, #88A2C5 5%, #5B72A6 100%);     filter:progid:DXImageTransform.Microsoft.gradientundefinedstartColorstr='#88A2C5', endColorstr='#5B72A6');     box-shadow:0 1px 0 #9DB6D0 inset, 0 38px 40px -23px #222;     -moz-box-shadow:0 1px 0 #9DB6D0 inset, 0 38px 40px -23px #222;     -webkit-box-shadow:0 1px 0 #9DB6D0 inset, 0 38px 40px -23px #222;     background-color:#88A2C5;border-color:#7F91AE; } .MBC-facebook .MBC-widget-89 {text-shadow:1px 1px 0 #52627b;width:160px;} .MBC-facebook .MBC-widget-image {background-position:0 -8px;bottom:-1px;height:141px;right:30px;width:69px;} .MBC-facebook .MBC-widget-upper {background-color:#7A8FBA;border-color:#879ABF;} .MBC-twitter {     background:-webkit-gradientundefined linear, left top, left bottom, color-stopundefined0.05, #61C3E4), color-stopundefined1, #2DABD6) );     background:-moz-linear-gradientundefined center top, #61C3E4 5%, #2DABD6 100% );     filter:progid:DXImageTransform.Microsoft.gradientundefinedstartColorstr='#61C3E4', endColorstr='#2DABD6');     box-shadow:0 1px 0 #7DD2EE inset, 0 38px 40px -23px #222;     -moz-box-shadow:0 1px 0 #7DD2EE inset, 0 38px 40px -23px #222;     -webkit-box-shadow:0 1px 0 #9DB6D0 inset, 0 38px 40px -23px #222;     background-color:#61C3E4;border-color:#43B3D8; } .MBC-twitter .MBC-widget-89{text-shadow:1px 1px 0 #227996;width:120px;} .MBC-twitter .MBC-widget-image{background-position:-544px -30px;height:135px;bottom:5px;right:15px;width:170px;} .MBC-twitter .MBC-widget-upper {background-color:#68BFDD;border-color:#76C7E3;} .MBC-googleplus {     background:-webkit-gradientundefined linear, left top, left bottom, color-stopundefined0.05, #D44635), color-stopundefined1, #AC2C1E) );     background:-moz-linear-gradientundefined center top, #D44635 5%, #AC2C1E 100% );     filter:progid:DXImageTransform.Microsoft.gradientundefinedstartColorstr='#D44635', endColorstr='#AC2C1E');     box-shadow:0 1px 0 #DE6354 inset, 0 38px 40px -23px #222;     -moz-box-shadow:0 1px 0 #DE6354 inset, 0 38px 40px -23px #222;     -webkit-box-shadow:0 1px 0 #DE6354 inset, 0 38px 40px -23px #222;     background-color:#D44635;border-color:#C54131; } .MBC-googleplus .MBC-widget-89{text-shadow:1px 1px 0 #93291e;width:120px;} .MBC-googleplus .MBC-widget-image{background-position:-156px -10px;height:141px;right:18px;bottom:5px;width:143px;} .MBC-googleplus .MBC-widget-upper {background-color:#C54131;border-color:#CE4C3D;} .MBC-pinterest {     background:-webkit-gradientundefined linear, left top, left bottom, color-stopundefined0.05, #EFEFEF), color-stopundefined1, #CCC) );     background:-moz-linear-gradientundefined center top, #EFEFEF 5%, #CCC 100% );     filter:progid:DXImageTransform.Microsoft.gradientundefinedstartColorstr='#EFEFEF', endColorstr='#CCCCCC');     box-shadow:0 1px 0 #FFF inset, 0 38px 40px -23px #222;     -moz-box-shadow:0 1px 0 #FFF inset, 0 38px 40px -23px #222;     -webkit-box-shadow:0 1px 0 #FFF inset, 0 38px 40px -23px #222;     background-color:#FAF7F7;border-color:#AAA; } .MBC-pinterest .MBC-widget-89{color:#888;text-shadow:1px 1px 0 #FFF;width:140px;} .MBC-pinterest .MBC-widget-image{background-position:-300px -8px;height:141px;right:25px;bottom:12px;width:118px;} .MBC-pinterest .MBC-widget-upper {background-color:#DDD;border-color:#EEE;}

     5.  Cari kode dibawah ini :

<div class='post-footer-line post-footer-line-1'>

atau

<data:post:body/>

    6.  Pastekan kode dibawah ini. dibawah pada kode diatas :

<div id="MBC_new" class="MBC_new"><div class="MBC-facebook MBC-widget" id="MBC-facebook-container-inPage"><div class="MBC-widget-89">Like! or send this content to your friends as a Facebook message.</div><div class="MBC-widget-button" id="MBC-facebook-button-inPage"><div class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://www.mybloggerclub.com/" data-send="true" data-width="170" data-layout="button_count" data-show-faces="false"><span style="height: 21px; width: 170px; ">    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="170" show_faces="false" font=""></fb:like>  </span></div></div><div class="MBC-widget-image"></div><div class="MBC-widget-upper"></div></div><div class="MBC-googleplus MBC-widget" id="MBC-googleplus-inPage"><div class="MBC-widget-89">Share this page with Google Plus. Feed your circles!</div><div class="MBC-widget-button" id="MBC-googleplus-button-inPage"><div id="___plusone_0" style="height: 24px; width: 106px; display: inline-block; text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; "><div style='margin-left:5px;'><g:plusone expr:href='data:post.url' size='standard'/> </g:plusone></div></div></div><div class="MBC-widget-image"></div><div class="MBC-widget-upper"></div></div><div class="MBC-pinterest MBC-widget" id="MBC-pinterest-inPage"><div class="MBC-widget-89">It's time to start thinking about the board that suits this content.</div><div class="MBC-widget-button" id="MBC-pinterest-button-inPage"><iframe src="&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url" scrolling="no" frameborder="0" style="border: none; width: 90px; height: 20px; "></iframe></div><div class="MBC-widget-image"></div><div class="MBC-widget-upper"></div></div><div class="MBC-twitter MBC-widget" id="MBC-twitter-inPage"><div class="MBC-widget-89">Let everyone hear this amazing content, hurry up!</div><div class="MBC-widget-button" id="MBC-twitter-button-inPage"><a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if></a></div><div class="MBC-widget-image"></div></div></div>

 Keterangan :

• Jika Anda memilih untuk menambah kode diatas, pada kode <data:post.body/> maka tambahkan kode seperti dibawah ini, dan akan terlihat seperti :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Kode Widget Kartu Share Hanya di Postingan Blog</b:if>

•  Jika widget ini terlihat pada homepage Anda maka pilih yang ke <data:post.body/> 2/3/4.

     7.  Save Template Anda.

Sekian, semoga bermanfaat. Thanks.