Share Under Everypost and Ads Feature Optimized

No comments
Share Underpost With Full Box and Ads Feature Optimized - Welcome to my blog leetblogger.com. Either because there is no work or anything, I fill vacation time with blogging activities. Okay here we go. This time I will give you a fresh tutorial. Namely how to create a box that contains a full share, email subscribe and and Ads Optimazation.
Share Underpost With Full Box and Ads Feature Optimized

Features:

Share on Facebook
Share on Twitter
Share on Google+
More Share ✚ (All Socail Networks)
Email Subscribe
Ads with Size 350x250

Share Under Everypost and Ads Feature Optimized

First of all, put the following code above ]]></b:skin> or </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}
Then put the following code under the code <data:post.body/>
<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=leetbloggers&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='leetbloggers'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe'/></form>
</div>
</div>
<div class='box-right'>
<a href='http://www.leetblogger.com' rel='nofollow' title='Leet Blogger'><img alt='Leet Blogger' height='250' src='http://itmasti.com/wp-content/uploads/2014/04/350x250.png' width='300'/></a>
</div>
<div style='clear: both;'/>
</div>
  </b:if>
Replace "leetbloggers" in the code and replace the code Email Subscribe.
http://www.leetblogger.com with your link
http://itmasti.com/wp-content/uploads/2014/04/350x250.png with your image

I hope You Understand :) Any Defficult You Can Comment..



No comments :

Post a Comment