Cara Buat Facebook Like Box Dan Kotak Berlangganan Artikel Berdampingan

Hai... Sobat blogger, tutorial kali ini kita akan membahas bagaimana membuat kotak berlangganan artikel dan facebook like box hanya di postingan blog saja. Pada toturial sebelumnya mengenai buat kotak berlangganan arikel, artikel terkait dan facebook like box yang mungkin Anda bisa nikmati.

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 :

#mdpost-likebox{display:block;min-height:250px}#post-likebox h2{font-size:30px;font-style:italic;font-variant:small-caps}#mdpost-likebox div.row{text-align:center;margin-bottom:10px}#mdpost-likebox img{display:inline-block}#mdpost-likebox .email{clear:none}#mdpostfblikebox{margin:10px 10px 0 0;text-align:left;float:left;overflow:hidden}.button,.emailbutton{background:#f7f8f9;background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);color:#888 !important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none !important}.button:hover,.emailbutton:hover{background:#f1f1f1;background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important}.widget-button{color:#AAA !important;display:block;font-size:18px;margin:30px auto;padding:8px 30px;text-align:center;text-shadow:1px 1px 0 #FFF;text-transform:uppercase;width:30%;font-weight:bold}.email{clear:none}.email{clear:both;width:100%;margin:10px 0}.emailform{position:relative;width:250px;background:#fff;margin:0 auto;-webkit-box-shadow:1px 1px 2px #dfdfdf;-moz-box-shadow:1px 1px 2px #dfdfdf;box-shadow:1px 1px 2px #dfdfdf;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #ddd}.searchinput,.emailinput{width:200px;height:18px;margin:0 auto;padding:8px 40px 8px 10px;border:none;background:none;font-family:georgia;font-style:italic;font-size:14px;color:#666}.emailbutton{-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;padding:9px;position:absolute;right:-2px;top:-1px;bottom:-1px;display:block;line-height:16px}.emailbutton{padding:8px !important}.emailinput{padding-right:70px !important;width:170px !important}.emailform, .emailinput {        width: 98% !important;        -webkit-box-sizing: border-box;        -moz-box-sizing: border-box;        box-sizing: border-box;        height:auto;    }

    5.   Cari kode dibawah ini :

<data:post.body>

Keterangan :

• Biasanya kode diatas ada 3-4 pada masing-masing template, pastekan kode dibawah pada langkah selanjutnya pada kode  <data:post.body> ke 2/3 ataupun 4.

    6.  Pastekan kode dibawah ini, dibawah pada kode langkah ke 5 :

<b:if cond='data:blog.pageType == &quot;item&quot;'><table border='0' cellpadding='0' cellspacing='0' width='100%'><tr><td width='50%'> <div id="mdpostfblikebox"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com/IDFacebook Anda disini&amp;width=300&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23e1e1e1&amp;stream=false&amp;header=false&amp;appId=328967870473940" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300; height:255px;" allowTransparency="true"></iframe></div></td><td width='50%'><div id="mdpost-likebox"><h2>Do you Like this Article?</h2><div class="row"><div class="fb-like" data-href="https://www.facebook.com/ID Facebook Anda disini" data-send="true" data-width="450" data-show-faces="false"></div></div><div class="row"> <a href='http://feeds.feedburner.com/ID Feedburner Anda disini' target='_blank' title='Suscribe to RSS feed'><img class="middle" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr3VAMKoICjjRV6pBcTCw8U7PqJWH_Gquaq75LRdDp64keLdwketDAEfuOTee73zTYKANzftGFltC_8aRWsmkLxlyLYdznQmnAk-8YErcpj_W9LZHTgnwN7qwC6OLH2MBosXWjAbtWoLVV/s1600/mdRSS.png' alt="rss"/></a> <a href='http://twitter.com/TWITTER-USERNAME' target='_blank' title='Follow me on Twitter'><img class="middle" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-scx0jcKjIGI4tSQO_PIBCxt5wqblSAySq606htWge6WsqMBqW_fZUYf7bKoBjLgg-ue4BwZayselplbMNn0wYcF4h5Fpctr9FjBJBDYUHUf0u2VpMIAoypPwnvr1fod0wyzRpiS6GnOo/s1600/mdTwitter.png' alt="twitter"/></a> <a href='http://www.facebook.com/ID Facebook Anda disini' target='_blank' title='Became Fan on Facebook'><img class="middle" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8_VIlr-TiGK0ybGc6yzS4fgwDX9Qf0Fh1YzmGXykJEqvOccUV1au7PVGGwX6-B0F1E4y7Dk8Q_RrtSeppd5vb0i2o8mIosMcL0sjIZnmj1OvXapd0xYKiCBLKTDA6FmPK34YOrIkJvaLV/s1600/mdFaceBook.png' alt="facebook"/></a></div><div class="row"><h6>Get Subscribe to Free Email Updates!!</h6></div><div class="row"><div class="email"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID Feedburner Anda disini', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform"> <input type="hidden" value="ID Feedburner Anda disini" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailinput" /> <input type="submit" class="emailbutton" value="SignUp" title=''/></form></div></div><div class="row"> <small>*Your email address will not be shared with anyone.</small></div></div></td></tr></table></b:if>

Keterangan :

• Ganti ID Facebook Anda disini dengan ID Facebook Anda.
• Ganti ID Feedburner Anda disini dengan ID Feedburner Anda.

     7.  Save Template Anda.

Catatan : Jika hack ini tidak muncul pada blog Anda, perhatikan baik-baik keteranganyag kami berikan dibawah langkah 5 diatas.

Terima kasih, semoga bermanfaat.