» » » Box Underpost With Full Share Fiture and Ads Optimized

Box Underpost With Full Share Fiture and Ads Optimized

Box Underpost With Full Share Fiture and Ads Optimized - Yap selamat datang di blog saya. Entah karena tidak ada kerjaan atau apa, saya mengisi waktu liburan dengan kegiatan blogging. Oke here we go. Kali ini saya akan memberikan sebuah tutorial yang fresh. Yaitu cara membuat sebuah kotak yang berisikan full share, email subscribe dan fungsi "Print This Page". Jujur, kode yang saya berikan ini adalah murni dari blog KompiAjaib.com

Box Underpost With Full Share Fiture and Ads Optimized

Pertama tama, taruh kode berikut diatas */]]></b:skin> atau  </style>
.box-underpost{width:100%;height:auto;padding:0;margin:0 auto;position:relative;font-size:14px;background:#eee;}
.box-left{width:50%;height:250px;padding:0;float:left;background:#fff;}
.box-right{width:50%;height:250px;padding:0;float:right;text-align: center;}
.title-share{margin:0 0 1px;font-size:18px;font-family: Oswald;color:#333;text-transform:uppercase;display:block;background:#aaa;padding-left:30px;height:40px;line-height:40px}
.fb{display:block;margin:0 0 1px;background:#ccc;padding:0;position:relative;height:34px;line-height:34px}
.fb-on,.tw-on,.gp-on,.more-shareon{position:absolute;top:0;left:0;background:#ccc;z-index:2;display:block;width:100%;padding:0;text-align:left;color:#555;transition:all 400ms ease-in-out;height:34px;line-height:34px}
.print-boxon{position:absolute;top:0;left:0;background:#ccc;z-index:2;display:block;width:100%;padding:0;text-align:left;color:#555;transition:all 400ms ease-in-out;height:34px;line-height:34px}
.fb-on span, .tw-on span,.gp-on span,.more-shareon span,.email-title span,.print-boxon span{margin-left:30px;}
.fb:hover .fb-on,.tw:hover .tw-on,.gp:hover .gp-on,.more-share:hover .more-shareon,.submit-email:hover .email-title,.print-box:hover .print-boxon{display:none;}
.tw,.gp{display:block;margin:0 0 1px;background:#ccc;padding:0;position:relative;height:34px;line-height:34px}
.more-share{display:block;margin:0 0 1px;background:#ccc;padding:0;position:relative;height:34px;line-height:34px}
a.more{background:#007eff;border:1px solid #0b6bce;border-radius:2px;font-size:16px;font-weight:700;color:#fff;text-align:center;padding:0px 6px;text-decoration:none;margin-left:30px}
.submit-email{text-align:left;margin:0 0 1px;background:#ccc;padding:0;position:relative;height:34px;line-height:34px}
.submitbutton {background: #FF8000;border: none;font: 12px Oswald;color: #fff;height: 25px;padding:0 12px;top: 5px;right:8px;text-transform:uppercase;cursor: pointer;position:absolute;}
.enteryouremail {background: #fff !important;border:none;padding: 0px 70px 0 7px;color: #a19999;font-size: 12px;height: 25px;width: 60%;margin-left:30px;}
.enteryouremail:focus{outline:none}
.email-title{text-decoration:none;position:absolute;top:0;left:0;background:#ccc;z-index:2;display:block;width:100%;padding:0;text-align:left;color:#555;transition:all 400ms ease-in-out;height:34px;line-height:34px}
.print-box{display:block;margin:0;background:#ccc;padding:0;position:relative;height:34px;line-height:34px}
.printfriendly{background:#fff;border:1px solid #666;color:#555;text-decoration:none;padding:3px 5px 3px 0;font:12px Arial;margin-left:30px}
.printfriendly span.print{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix_WnNEVFmZ7_0IafAVb3IsCk7cP4eKP2lP9Qj9uCWVG2zyvVTal6f9cMy3zvneAbba9Ggsc-sHfms-FVzINXW1X28NucATkSf3ZwUvnyMjdtyjrEtp90CKxYW2wVGNzdMZeCVT2ST80lc/s1600/print.png) no-repeat;border:none;box-shadow:none;margin:3px 6px -3px;padding-left:20px}
.printfriendly span.pdf{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYaHadXH6UBzljbfRzdb8FdzHjIseWlqoemqVQcw698pGrxZAdaP6PmAF0L2kLPWK2Oq57VwUGWIMnJslVpWF8BveCOZtoHTQPFfj-SSRqzFC9gyunbMV_dH-oTnZIGw8n4lnQs7D61LWQ/s1600/pdf_document.png) no-repeat;border:none;box-shadow:none;margin:3px 0 -3px;padding-left:20px}

Lalu taruh kode berikut dibawah kode  <data:post.body/> yang terakhir. 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='box-underpost'>
<div class='box-left'>
<div class='title-share'>Share this article :</div>
<div class='fb'>
<div class='fb-on'><span>Share on Facebook</span></div>
<div style='position:absolute;top:-7px;left:30px'>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' data-width='90'/></div>
</div>
<div class='tw'>
<div class='tw-on'><span>Share on Twitter</span></div>
<div style='position:absolute;top:5px;left:30px'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
</div>
<div class='gp'>
<div class='gp-on'><span>Share on Google+</span></div>
<div style='position:absolute;top:5px;left:30px'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/></div>
</div>
<div class='more-share'>
<div class='more-shareon'><span>More Share</span></div>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' title='More Share'>&#10010;</a>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</div>
<div class='submit-email'>
<div class='email-title'><span>Subscribe Here</span></div>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogmassoma&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='enteryouremail' name='email' 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;;}' type='text' value='Enter your email....'/>
<input name='uri' type='hidden' value='blogmassoma'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe'/></form>
</div>
<div class='print-box'>
<div class='print-boxon'><span>Print and Save This Page</span></div>
<a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print();return false;' rel='nofollow' title='Printer Friendly and PDF'><span class='print'>Print</span>
<span class='pdf'>PDF</span></a>
</div>
</div>
<div class='box-right'>
<a href='http://www.lazada.co.id/beli-elektronik-rumah-tangga/#Q1352C1l1uP99y9' rel='nofollow' title='lazada indonesia'><img alt='lazada indonesia' height='250' src='http://srv-live.lazada.co.id/cms/imageslap/electronics/300X250_010713_1stcampaign_GENERALelectronicSET2.gif' width='300'/></a>
</div>
<div style='clear: both;'/>
</div>
  </b:if>

NOTE


Silakan ganti "blogmassoma" dalam kode Email Subscribe dan ganti kode iklannya ( yang berada dalam kode <div class='box-right'> sampai </div> dengan kode iklan anda. Selamat mencoba
www.kompiajaib.com

0 Response to "Box Underpost With Full Share Fiture and Ads Optimized"

Post a Comment

Subscribe to: Post Comments (Atom)