CSS Code for Adding Effects to Your Blog Post Image

Hello Friends!! As We all Blogger know this fact that Images are as Important as post content.Even if our Blog content is of high quality and very unique we need Images to make it more effective.
Images help Viewers to understand the content easily.A quick visitor can understand every thing by seeing the images only.So Images are important for blog post.
As image are important so we should make them attractive so that It take attention of all.We must add border effect and hover shadow effect to our image.
CSS is a best way to make these images stylish and attractive.Lets have a look how we can make the image in our blog post. 

                    CSS Codes for Images in Blog Post

Use these simple image codes for your blog post 

Simple Thin Border

img {

   border:1px solid #021a40;

}

Double Border

img {

   padding:1px;

   border:1px solid #021a40;

}

Border and Back Ground

img {

  padding:5px;

   border:1px solid #021a40;

   background-color:#ff0;

}

Border and Grey Drop Shadow With Image link hover effect

img {

   padding:5px;

   border:1px solid #021a40;

   background-color:#ff0;

   -moz-box-shadow: 5px 5px 0px #999;

   -webkit-box-shadow: 5px 5px 0px #999;

   box-shadow: 5px 5px 0px #999;

}

a:hover img{

 border: solid 1px #CCC;

 -moz-box-shadow: 1px 1px 5px #999;

 -webkit-box-shadow: 1px 1px 5px #999;

        box-shadow: 1px 1px 5px #999;

}

 

First of All Download your blogger full template from backup and restore so that in case you do any mistake you can get back your old template.

1.Go to Blogger Setting 
2.Go to Template Section
3.Click Edit HTML
4.Expand Widget Template
5.Search for ]]></b:skin>
6.Paste Above codes just before ]]></b:skin>

Make Your Blog Faster With Lazy Image Loading Script

Don’t you hate it when websites load slowly? I know I do.And to make matters worse, do you even come back to websites that load slow? The chances are, you don’t!.There are many factors But Images are one of the important factor that affects blog load time.So,To reduce blog Images load time today I have brought lazy image loading plugin for blogger!

Lazy Load is a jQuery plugin which only loads Images seeable in the viewport (visible part of web page) thereby enhancing the Page Load time. The images which are out the initial visible region of the screen are loaded as the users scrolls through them. A really useful plugin for Image intensive Blog's.This widget really decrease the 50% of blogs load time as you check your own blog with Gtmetrics.Lets see the working of this plugin

Demo

How to install this plugin to blogger?

• Login to Blogger > Dashboard
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed
• Press Ctrl + F and search the code shown below. 

 </head>

Copy below codes and paste above </head>

<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_aA6q6g0vKZyOkxL24W0gKYWOa3PSLzxg_IS-DR7qy9JSbgQuLJLcGptsThEkBv7kc0fYoZFGPiiB6DQAriOycMXjp97p5lzEV3Q59WpJ1ePD9Jp1UhaTG7j1AmXSk_q_3XXzDob8gTY/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

1. Now just press on save template and refresh your blog.  
2. Now just scroll your blog and see your images fade in with lazy loading effect.

If you have any Doubts regarding this post, Please ask it via comments and Dont forget to share this post with your friends!!

Add Email Subscription Box In Header With Social Icons in Blogger =D

This is the best widget to increase the email subscribers instantly and the main thing is it’s place. In header, it will be shown to every one and there will be a lot of chances that any visitor may subscribe you through that widget. Even you can see that we’ve also added the subscription widget in header. Installing this widget in your blog is not so difficult but before the tutorial let me tell you something about that widget.

Header Email Subscription Widget With Social Buttons

This is the stylish and clean header email subscription widget in which social buttons or icons are also available for increasing social followers. This widget is divided into two sections. Left portion of this widget is having subscription form where Name and Email field are implement along with the subscribe button. Heading and a little spam message is also available in that area. While right portion of this widget is having the social buttons which are Facebook, Twitter, Google+, Feed burner and Pinterest. This widget is gonna obviously help you in increasing your email subscribers and social fans because this will be implemented in the header and header is the great place for attracting your visitors for subscribing you.

Tutorial

Well, I’ve told you something about this widget and now you may be want to implement it in your blog. Don’t worry you can do this just following the simple steps below.

• Go To Blogger >> Layout >> Add a Gadget (In The Header Area)
• Choose HTML/JavaScript and Paste The Following Code In The Content Box

<style>

#byard-topsubsbox {background:#fff; width:940px!important; height:90px!important;margin-top:20px; padding:10px;box-shadow:5px 5px 5px #ccc; border:1px solid #ddd;overflow:hidden;}
#subscriptionsection {float:left;border-right: 1px solid rgb(168, 168, 168);padding-right: 56px;margin-top: -10px;padding-top:9px;}
.subsbox-heading {font-size:20px; font-family:&#39;Source Sans Pro&#39;; text-align:center;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;}
.topsubsboxname {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ3tYP4Z7tjoUFvCOretVKJaKmhprgrolMDjSifx8DdsQCSM0hm3ud-K3KjErwYYDGLea94g7bXnWfRex9faEKaA0WLkg4z6tbzGHQgpQYj3_7MdLTNph2nbPTW-wEn1FfkKATTZgFt9s/s320/name.png) no-repeat 7px 8px;border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold;color:hsla(0,0%,27%,0.69); width:150px; margin-top:10px; height:24px; padding:5px 15px 5px 28px; vertical-align:top; display:inline-block;margin-left:15px;}
.topsubsboxemail {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7c2p4aI_JXbJBteqG1SWCk5IpnuSBwWwiE41bGCp4WSCx0D9VSU1HxL0uIla40mdpIjptLd3TSGVhBQ8UE9QzWtTXAqt0yRgv9yj2P9fImWTUWpnovtDyfgKRsrKCah_8fnvAXXAasKU/s320/email.png) no-repeat 7px 10px; border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; color:hsla(0,0%,27%,0.69); width:150px; height:24px; margin-left:5px; margin-top:10px; padding:5px 15px 5px 28px;vertical-align:top; display:inline-block;}
.topsubsboxname:hover,.topsubsboxemail:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}
.topsubsboxbutton {-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;box-shadow:inset 0px 1px 0px 0px #bbdaf7;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00B3FF), color-stop(1, #349ECB) );background:-moz-linear-gradient( center top, #00B3FF 5%, #349ECB 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#00B3FF&#39;, endColorstr=&#39;#349ECB&#39;);background-color:#00B3FF;  margin-top:12px;  margin-left:5px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #84bbf3;display:inline-block;color:#ffffff;font-family:arial;font-size:15px;font-weight:bold;padding:6px 10px;text-decoration:none;text-shadow:1px 1px 0px #528ecc;}.topsubsboxbutton:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #349ECB), color-stop(1, #00B3FF) );background:-moz-linear-gradient( center top, #349ECB 5%, #00B3FF 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#349ECB&#39;, endColorstr=&#39;#00B3FF&#39;);background-color:#349ECB;}.topsubsboxbutton:active {position:relative;top:1px;}
#socialsection {float:left;margin-top:20px;}
.socialheading{font-size:20px; font-family:&#39;Source Sans Pro&#39;; text-align:right;margin-right:20px;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;}
.socialicons ul {list-style:none; display:inline;float:right;margin-top:10px;margin-right:10px;}
.socialicons li {opacity: 1;float:left;padding: 0px 10px 0px 0px;}
.socialicons li:nth-child(6) {padding: 0;}
.socialicons li a img{height:49px;width:49px}
</style>

<!– Top Subsbox By Www.BloggerYard.Com Start –>
<div id=’byard-topsubsbox’>
<div id=’subscriptionsection’>
<div class=’subsbox-heading’>Subscribe For Free Updates!</div>
<form action=’http://feedburner.google.com/fb/a/mailverify?uri=*’ class=’byard-subsbox-form’ method=’post’ target=’_new’>
<input class=’topsubsboxname’ name=’name’ onblur=’if (this.value == &apos;&apos;) {this.value = &apos;Your Name&apos;;}’ onfocus=’if (this.value == &apos;Your Name&apos;) {this.value = &apos;&apos;;}’ value=’Your Name’/>
<input class=’topsubsboxemail’ name=’email’ onblur=’if (this.value == &apos;&apos;) {this.value = &apos;Your Email Address&apos;;}’ onfocus=’if (this.value == &apos;Your Email Address&apos;) {this.value = &apos;&apos;;}’ value=’Your Email Address’/>
<input class=’topsubsboxbutton’ type=’submit’ value=’Sign Up!’/>
</form>
<p style=’margin-top: 8px;font-size: 13px;text-align: center;font-family: Source Sans Pro;font-style: italic;font-weight: 600;’>We&#39;ll not spam mate! We promise.</p>

</div>
<div class=’socialicons’>
<div class=’socialheading’>Become Our Fan on Social Sites!</div>

<ul>
<li><a href=’https://www.facebook.com/cnbctechguru’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO6xwsyvEahuf4Fbjeut2xe24TZBsg06Ns7lQkpfn_ePomoop2pcdUTggjbdylLFPYfXO1J_u0Cq8VIbWBsmWH6AWVsbzo4rzilrLvkOppwCCJZQCD6PJgt7eDHrH5vyEMmK0S7unRkBoV/s1600/facebook_64.png’ title=’Facebook’/></a></li>
<li><a href=’https://twitter.com/*’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNdsXD8RpkXNPbNvaycISILu-1Uo3CVH2dd39azaf8pWIc10fygNvOo8GqeZGvkas3oahnd6XNAoa8CW_98ZF7-EvS_cGUK62gTZMvCrceH9nw37DEsKn0PwLKqs9R7NdJI1jBU5al8lN/s1600/twitter_64.png’ title=’Twitter’/></a></li>
<li><a href=’https://plus.google.com/*/’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5NPR7lLZxt1hBkvEHrEcdc2cTuWCfL1dbp-zgNp1e0zHdbllLrOfbD8lH4p9DTHyrpJaHiF1O4N-DofbTlsUx7_T03LPFM8OZlKN0fLyVqmsCIQzLiB43ZohoXnH0V6S7b7AIkC6kND2R/s1600/google-plus_64.png’ title=’Google +’/></a></li>
<li><a href=’http://feeds.feedburner.com/*’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikkrkO-6BToLr-F9szJ9C5YZo3Q6kJSmadRRhezsNeH2kArGDB5GsuFIFgEyitDziU2rIEWviUUoKTFhVEyie-o8ZWmiReFghbTTapeNiBnhEmxqk7gcR1c4I_ViUdX55zy4nz4eYafUk9/s1600/rss_64.png’ title=’Rss’/></a></li>
<li><a href=’http://pinterest.com/*/’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHAPyQoqjWBj00B9JSZ0A_iWVJKQDiZc5t6-JNLyF-spyWSwUx2zzHXvZisXUIE-Ojm-Hqf1M8B-OoUOmyNDMfyl9226IXP3CrBy0qNa_mE2VqhPlplIcOFACmjwpU-6JyIyut_P0DlYfp/s1600/pinterest_64.png’ title=’Pinterest’/></a></li>
</ul>  </div>
</div>
<!– Top Subsbox By www.mytechnoblog.tk End –>

• Replace The Highlighted URLs With Yours
• Click “Save” and You’ve Done!

Final Words

So friends this was our third resource which is an stylish subscription widget for header. I hope you’ve liked this widget and you’re using this in your blog. However, If you wish to share this with your readers and you can share this but you’ll need to link back us as credits. Any problem? let me know in comments. Take Care. Happy Blogging!