5 tools to embed instagram for your website or blog

<div dir="ltr" style="text-align: left;" trbidi="on"> This blog post tells how you can bring instagram photos and contents on your website or blog in easy way. You can embed your images at any corner of the website or blog by following this online tools, so your site will be featured with instagram photos.<br /> <br /> <div style="text-align: left;"> #1 <a href="http://instagram/[username]" target="_blank">instagram/[username]</a></div> <div style="text-align: left;"> </div> <blockquote class="tr_bq"> -Just enter your user name, expand the post and click on embed now copy and paste this code at any part of your website. This is very simple and originally introduced by instagram.</blockquote> <div style="text-align: left;">  #2 <a href="http://snapwidget.com/" target="_blank">snapwidget.com</a></div> <blockquote class="tr_bq"> -This widget diaplays photo gallery with hashtag and username. This is completely free and simple widget.</blockquote> #3 <a href="http://ctrql.org/instagram" target="_blank">ctrql.org/instagram</a><br /> <blockquote class="tr_bq"> - This photo embending tool is created by Amit Agrawal of labnol.org for instagram url and paste the embeded code on your website.</blockquote> #4 <a href="http://embedinstagram.com/" target="_blank">embedinstagram.com</a><br /> <blockquote class="tr_bq"> -This site offers responsive widget for instagram photos and videos. Just enter the url and generate embeded code.</blockquote> #5 <a href="http://embedagram.com/" target="_blank">embedagram.com</a><br /> <blockquote class="tr_bq"> -Once you have authorized embedagram through instagram you are ready to ready to use this tool. This widget also after some customization in css and jquery.</blockquote> <blockquote class="tr_bq">  </blockquote> </div>

This blog post tells how you can bring instagram photos and contents on your website or blog in easy way. You can embed your images at any ...

Read more »

Add professional 'Advertise Here' banner to blogger blog or website

<div dir="ltr" style="text-align: left;" trbidi="on"> Blogger is such a great blogging platform which provide facility to add advertising to blogspot blog. Many blogger want to make money from their blog. This tutorial will learn you how you can add a simple html 'Advertise Here' banner to blogger blog and sell <span style="background-color: #eeeeee;">ad space</span> on blog. This banner is simple and beautiful link box which links visitors to your contact page.This is very simple Html banner with css added to it so this will load very fast.<br /> <h3 style="text-align: left;"> <span style="font-weight: normal;"> How to add this banner to blog</span></h3> <div style="text-align: left;"> <ul style="text-align: left;"> <li>Go to blogger <b>dashboard</b></li> <li>choose <b>Add html/javascript</b></li> <li>Now paste following code and adjust size if you want.</li> </ul> <blockquote class="tr_bq" style="-webkit-transition: background-color 0.777s; background-color: #f5f2f0; border: 1px solid rgb(221, 221, 221); font-family: 'Times New Roman', times, serif; font-style: italic; line-height: 1.3em; margin: 0px 20px; padding: 20px 70px 20px 20px;"> <span style="color: #404040;"><a href="</span><span style="color: red;">#</span><span style="color: #404040;">" style="display:block;background-color:rgb(248, 248, 248); color:rgb(0, 0, 0); text-align:center; padding-top:69px; padding-bottom:71px; padding-right:50px; padding-left:50px; border-radius:4px 4px 4px 4px; font-size:17px; box-shadow:0 1px 11px rgba(0,0,0,0.15); ">Advertise Here</a> </span></blockquote> <blockquote class="tr_bq"> <span style="font-family: Georgia, Times New Roman, serif;">"Replace <span style="background-color: white;"><span style="color: red;"># </span>with your contact page and adjust padding size if you want to impliment into header or footer"</span></span></blockquote> <h3 style="text-align: left;"> <span style="font-family: Georgia, Times New Roman, serif; font-size: small;">Preview</span></h3> <div style="text-align: left;"> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtlQAkuX-PIDhjt47u9WfyMGqJ9kDYakbQQuM20mYUmumi26x29i77yC4YIaqvIiM1r1WuaEju_cd4HE1mxUOcm07tyspTZ6yqAthr4XAAvB7h4CsP2Madrf6m3yDmOZGgt400zLk0Q00/s1600/Advertise+here+box.PNG" style="margin-left: auto; margin-right: auto;" /></td></tr> <tr><td class="tr-caption" style="text-align: center;">preview</td></tr> </tbody></table> <span style="font-family: Georgia, Times New Roman, serif;">Now you are done! enjoy blogging!</span></div> <ul style="text-align: left;"> </ul> <br /></div> </div>

Blogger is such a great blogging platform which provide facility to add advertising to blogspot blog. Many blogger want to make money from ...

Read more »

Beautiful Responsive Blogger template That You Must Use

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> </div> <div style="background-color: white; box-sizing: border-box; color: #333333; line-height: 17.59375px; text-align: left;"> <span style="font-family: Georgia, Times New Roman, serif;"><b style="box-sizing: border-box;">RBSimple </b> is minimalist and responsive 2 columns blogger template layout with many future. It's template color black, red and white and with social media icon, right sidebar, slider post, top navigation menu, custom search result, custom lightbox, header banner, tab menu on sidebar and more.</span></div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-size: 11px; line-height: 17.59375px; text-align: left;"> <span style="font-family: Georgia, Times New Roman, serif;"><br style="box-sizing: border-box;" /></span></div> <div style="background-color: white; box-sizing: border-box; color: #333333; font-size: 11px; line-height: 17.59375px; text-align: left;"> <span style="font-family: Georgia, Times New Roman, serif;"><b style="box-sizing: border-box;">Features</b>:</span></div> <div style="background-color: white; box-sizing: border-box; color: #333333; line-height: 17.59375px; text-align: left;"> <span style="font-family: Georgia, Times New Roman, serif;">RBSimple is a free blog template with type : 2 column, Ads Ready, Black, Header Banner, Red, Responsive, Simple, Slider, Social Media Icon, Tabbed widget, Top Navigation Bar, White.</span></div> <div style="background-color: white; box-sizing: border-box; color: #333333; line-height: 17.59375px; text-align: left;"> <b style="box-sizing: border-box; font-family: Georgia, 'Times New Roman', serif; font-size: 11px;"><span style="font-family: Georgia, Times New Roman, serif;"><br /></span></b></div> <div style="background-color: white; box-sizing: border-box; color: #333333; line-height: 17.59375px; text-align: left;"> <h3 style="text-align: left;"> <span style="font-family: Georgia, 'Times New Roman', serif; font-size: small;"><b>Preview:</b></span></h3> </div> <div style="background-color: white; box-sizing: border-box; color: #333333; line-height: 17.59375px; text-align: left;"> <span style="font-family: Georgia, 'Times New Roman', serif; font-size: 11px;"><br /></span></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw23Yoo3tbUz_V8AYwLfsSEYMoQQFDbBle2fbFPCEcKfZkqdx6zL4lTrV__DJkDJEN6Ej0CUQ6J1OgZ1b8OYSlJ_F4r_zGcG2MqmW0BTSK1zLzqu9d5JeuXrOxPmI2TaSCUBgIZv23ww8A/s1600/blooger+responsive+template+RBsimple.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="blogger responsive template" border="0" height="305" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw23Yoo3tbUz_V8AYwLfsSEYMoQQFDbBle2fbFPCEcKfZkqdx6zL4lTrV__DJkDJEN6Ej0CUQ6J1OgZ1b8OYSlJ_F4r_zGcG2MqmW0BTSK1zLzqu9d5JeuXrOxPmI2TaSCUBgIZv23ww8A/s400/blooger+responsive+template+RBsimple.PNG" title="blogger responsive template" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Desktop view</td></tr> </tbody></table> <div style="background-color: white; box-sizing: border-box; color: #333333; line-height: 17.59375px; text-align: center;"> <span style="font-family: Georgia, Times New Roman, serif; font-size: x-small;"><br /></span></div> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0Nlteqvj6M4G4VDabTtXX4z5dJmLmPNJnXxOHsRm2__4QlwkXCyrpFDjIN-u5hjnp-ajEclMZQEUntnpkzJcJ8T2_MnKXwCnZBSmtOJjUP-5FRkjqZX3Ppdnz2yyX4yPMOABxrJvVbmz/s1600/blogger+responsive+template.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="blogger responsive template" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0Nlteqvj6M4G4VDabTtXX4z5dJmLmPNJnXxOHsRm2__4QlwkXCyrpFDjIN-u5hjnp-ajEclMZQEUntnpkzJcJ8T2_MnKXwCnZBSmtOJjUP-5FRkjqZX3Ppdnz2yyX4yPMOABxrJvVbmz/s320/blogger+responsive+template.PNG" title="blogger responsive template" width="199" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">mobile view</td></tr> </tbody></table> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <span style="font-size: large;"><a href="http://ivy-hosting.googlecode.com/files/RBSimple.zip" rel="nofollow" style="background-color: white; box-sizing: border-box; color: #274e13; font-family: Verdana, Geneva, sans-serif; line-height: 17.59375px; text-decoration: initial;" target="_blank"><span style="color: #274e13;">DOWNLOAD</span> </a><span style="color: #274e13;">/</span><span style="background-color: white; color: #274e13; font-family: Verdana, Geneva, sans-serif; line-height: 17.59375px;"> </span><a href="http://rbsimple-ivythemes.blogspot.com/" rel="nofollow" style="background-color: white; box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; line-height: 17.59375px; text-decoration: initial;" target="_blank"><span style="color: magenta;">DEMO</span></a></span></div> <div style="text-align: center;"> <br /></div> </div>

RBSimple   is minimalist and responsive 2 columns blogger template layout with many future. It's template color black, red and white...

Read more »

How to Add Social Sharing Widget Bellow Every Blogger Post

<div dir="ltr" style="text-align: left;" trbidi="on"> Social networking sites plays very big role to attract blog visitors and generate traffic, this widget will help you your blog visitors to share post on all the social networking sites like facebook, twitter, google etc. So it becomes very important to add this widget,  i'm also using this widget.today i'm going to tell you how you can add this beautiful widget to your own blog. <br /> <br /> <h3 style="text-align: left;"> Preview</h3> <div style="text-align: left;"> <div style="text-align: center;"> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><img alt="How to Add Social Sharing Widget Bellow Every Blogger Post" border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ5sh3Itn40CbbgrTbeeAgPe3Ck-Kyf6NHOSxI3kfabIaGC7oFAgnUQsCP1MvPbbUMBq05qgKYQ1uFYSNeh0FEpixUMTcc2CyOEr_p9QzB6ycar9FDrSyaaDusQ__cHGr3RLE_dx5xp5Wh/s400/Social+Sharing+Widget+Bellow+Every+Blogger+Post.PNG" style="margin-left: auto; margin-right: auto;" title="How to Add Social Sharing Widget Bellow Every Blogger Post" width="400" /></td></tr> <tr><td class="tr-caption" style="text-align: center;">preview</td></tr> </tbody></table> <br /></div> </div> <h3 style="text-align: left;"> How to add this widget?</h3> <div> Here are the steps you have to follow :</div> <div> <ul style="text-align: left;"> <li>Go to blogger dashboard click <b>templates </b></li> <li>Click <b>edit html </b></li> <li>Select <span style="background-color: white; color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: 13px;"><b>Expand Widget Templates</b></span></li> <li><span style="color: #222222; font-family: Arial, Helvetica, sans-serif;">Type</span><span style="color: #222222; font-family: Arial, Helvetica, sans-serif; font-size: x-small;"> </span><span style="background-color: white; color: #111111; font-family: 'Trebuchet MS', sans-serif; font-size: 14px; text-align: justify;"> </span><kbd style="background-color: white; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; color: #111111; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px; text-align: justify;">Ctrl</kbd><span style="background-color: white; color: #111111; font-family: 'Trebuchet MS', sans-serif; font-size: 14px; text-align: justify;">+</span><kbd style="background-color: white; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid gray; box-shadow: rgb(238, 238, 238) 1px 0px 1px 0px, rgb(204, 204, 204) 0px 2px 0px 2px, rgb(68, 68, 68) 0px 2px 0px 3px; color: #111111; font-size: 1.2em; margin: 2px 3px; padding: 1px 5px; text-align: justify;">F</kbd><span style="background-color: white; color: #111111; font-family: 'Trebuchet MS', sans-serif; font-size: 14px; text-align: justify;">  and find this code :</span></li> </ul> <span style="color: #111111; font-family: Trebuchet MS, sans-serif;"><span style="font-size: 14px;"><br /></span></span></div> <blockquote style="-webkit-transition: background-color 0.777s; background-color: #e9e6e4; border: 1px solid rgb(226, 205, 205); font-family: 'Times New Roman', Times, serif; margin: 0px 20px; padding: 20px 70px 20px 20px;"> <span style="font-family: Courier; line-height: 19px; text-align: justify;"><data:post.body/></span></blockquote> <div class="dsq-comment-message" id="dsq-comment-message-587985108" style="margin: 0px 0px 1em; word-wrap: break-word;"> <div class="dsq-comment-text" id="dsq-comment-text-587985108" style="display: inline;"> <div style="line-height: 24px;"> <span style="background-color: white;"></span></div> </div> <br /> <ul style="text-align: left;"> <li><span style="line-height: 24px;">Just bellow this code</span></li> </ul> <blockquote style="-webkit-transition: background-color 0.777s; background-color: #e9e6e4; border: 1px solid rgb(226, 205, 205); margin: 0px 20px; padding: 20px 70px 20px 20px;"> <br /> <span style="font-family: Times New Roman, Times, serif;"><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/></span><br /> <span style="font-family: Times New Roman, Times, serif;"><script type='text/javascript'>stLight.options({publisher: &quot;ur-47c9cca-cf33-f245-f3f6-43ed7a58f34f&quot;}); </script> </span><br /> <span style="font-family: Times New Roman, Times, serif;"><style></span><br /> <span style="font-family: Times New Roman, Times, serif;">.yateendra-share-buttons</span><br /> <span style="font-family: Times New Roman, Times, serif;">{</span><br /> <span style="font-family: Times New Roman, Times, serif;">-webkit-border-radius: 5px;</span><br /> <span style="font-family: Times New Roman, Times, serif;">-moz-border-radius: 5px;</span><br /> <span style="font-family: Times New Roman, Times, serif;">border-radius: 5px;</span><br /> <span style="font-family: Times New Roman, Times, serif;">background-color:#FFFFFF;</span><br /> <span style="font-family: Times New Roman, Times, serif;">padding: 15px;</span><br /> <span style="font-family: Times New Roman, Times, serif;">margin: 15px;</span><br /> <span style="font-family: Times New Roman, Times, serif;">box-shadow:0 1px 11px rgba(0,0,0,0.15);</span><br /> <span style="font-family: Times New Roman, Times, serif;">}</span><br /> <span style="font-family: Times New Roman, Times, serif;"></style></span><br /> <span style="font-family: Times New Roman, Times, serif;"><p align='center' class='yateendra-share-buttons'></span><br /> <span style="font-family: Times New Roman, Times, serif;"><span class='st_facebook_hcount' displayText='Facebook'/></span><br /> <span style="font-family: Times New Roman, Times, serif;"><span class='st_fblike_hcount' displayText='Facebook Like'/><span class='st_twitter_hcount' displayText='Tweet'/></span><br /> <span style="font-family: Times New Roman, Times, serif;"><span class='st_plusone_hcount' displayText='Google +1'/></span><br /> <span style="font-family: Times New Roman, Times, serif;"><span class='st_pinterest_hcount' displayText='Pinterest'/></span><br /> <span style="font-family: Times New Roman, Times, serif;"></p> </span></blockquote> </div> <div class="dsq-comment-message" id="dsq-comment-message-587985108" style="margin: 0px 0px 1em; word-wrap: break-word;"> <ul style="text-align: left;"> <li><span style="line-height: 24px;">Now click <b>save</b> button.</span></li> <li><span style="line-height: 24px;">Now you are done!!</span></li> </ul> </div> </div>

Social networking sites plays very big role to attract blog visitors and generate traffic, this widget will help you your blog visitors to ...

Read more »

How To Add Beautiful Shadow Around Blogger Comment Box

<div dir="ltr" style="text-align: left;" trbidi="on"> In this tutorial I will Teach you how you can add beautiful shadow around around comment box,you know that blogger doesn’t have good comment box as wordpress or other blog sites.But now i’m going to know you that you can customize it.Adding shadow around comment box looks very creative,using same comment box.<br /> What makes it possible is css3 codes,like shadow or corner sizes.This will make comment box creative.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9FBUVh5BO4ferusngfZMRhFBMR1Suk3EtghUk2xUAZ4RCGESQqxVkUFc_xaLJvRe-EzZEn3qnydHkDw3t9lC-aon9KUHqfQSuqX74m_KfHgjIziMXw7QGWLB3TKmrNZvO2FAPNUZL8Tpm/s1600/How+to+Add+Social+Sharing+Widget+Bellow+Every+Blogger+Post.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9FBUVh5BO4ferusngfZMRhFBMR1Suk3EtghUk2xUAZ4RCGESQqxVkUFc_xaLJvRe-EzZEn3qnydHkDw3t9lC-aon9KUHqfQSuqX74m_KfHgjIziMXw7QGWLB3TKmrNZvO2FAPNUZL8Tpm/s320/How+to+Add+Social+Sharing+Widget+Bellow+Every+Blogger+Post.PNG" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <br /> <br /> <h3 style="text-align: left;"> <span style="color: black;">How to apply shadow around comment box</span></h3> <br /> <strong>Step 1: </strong>Go to <em><strong><a href="http://blogger.com/" target="_blank">blogger.com</a> > Design>Edit Html</strong></em> click expand widget template.<br /> <br /> <strong>Step 2: </strong>Ensure to backup blog’s template.<br /> <br /> <strong>Step 3:</strong> Search this<br /> <br /> <blockquote class="tr_bq" style="-webkit-transition: background-color 0.777s; background-color: #f5f2f0; border-bottom: rgb(221,221,221) 1px solid; border-left: rgb(221,221,221) 1px solid; border-right: rgb(221,221,221) 1px solid; border-top: rgb(221,221,221) 1px solid; color: #404040; font-family: 'Times New Roman', times, serif; font-size: 13px; margin: 0px 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 70px; padding-top: 20px;"> <span style="color: black; font-family: 'Courier New', courier, monospace; font-size: small; line-height: normal;">]]></b:skin></span> <br /> <div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal;"> <span style="font-family: courier new, courier, monospace;"></span></div> </blockquote> <strong></strong><br /> <strong>Step 4: </strong>Just above paste this code<span style="color: black; font-family: 'Courier New', courier, monospace; font-size: small; line-height: normal;"></span> <br /> <br /> <blockquote class="tr_bq" style="-webkit-transition: background-color 0.777s; background-color: #f5f2f0; border-bottom: rgb(221,221,221) 1px solid; border-left: rgb(221,221,221) 1px solid; border-right: rgb(221,221,221) 1px solid; border-top: rgb(221,221,221) 1px solid; color: #404040; font-family: 'Times New Roman', times, serif; font-size: 13px; margin: 0px 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 70px; padding-top: 20px;"> <span style="color: black; font-family: 'Courier New', courier, monospace; font-size: small; line-height: normal;">#css3-form iframe{ </span><br /> border:1px solid #CCC; border-radius:4px 4px 4px 4px;box-shadow:0 1px 11px rgba(0,0,0,0.15);padding:12px<br /> }</blockquote> <div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal;"> <span style="font-family: courier new, courier, monospace;"></span></div> <strong></strong><br /> <strong>Step 5: </strong>Now search for this <br /> <br /> <blockquote class="tr_bq" style="-webkit-transition: background-color 0.777s; background-color: #f5f2f0; border-bottom: rgb(221,221,221) 1px solid; border-left: rgb(221,221,221) 1px solid; border-right: rgb(221,221,221) 1px solid; border-top: rgb(221,221,221) 1px solid; color: #404040; font-family: 'Times New Roman', times, serif; font-size: 13px; margin: 0px 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 70px; padding-top: 20px;"> <span style="color: black; font-family: 'Courier New', courier, monospace; font-size: small; line-height: normal;"><div class='comment-form'></span> <br /> <div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal;"> <span style="font-family: courier new, courier, monospace;"></span></div> </blockquote> <strong></strong><br /> <strong>Step 6: </strong>Replace it with this code<strong> </strong><br /> <strong></strong><br /> <blockquote class="tr_bq" style="-webkit-transition: background-color 0.777s; background-color: #f5f2f0; border-bottom: rgb(221,221,221) 1px solid; border-left: rgb(221,221,221) 1px solid; border-right: rgb(221,221,221) 1px solid; border-top: rgb(221,221,221) 1px solid; color: #404040; font-family: 'Times New Roman', times, serif; font-size: 13px; margin: 0px 20px; padding-bottom: 20px; padding-left: 20px; padding-right: 70px; padding-top: 20px;"> <span style="color: black; font-family: 'Courier New', courier, monospace; font-size: small; line-height: normal;"><div id='css3-form'></span> <br /> <div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal;"> <span style="font-family: courier new, courier, monospace;"></span></div> </blockquote> <strong></strong><br /> <strong>Step 7: </strong>Now click ‘<strong>save’</strong><br /> <strong></strong><br /> Now you are done!!</div>

In this tutorial I will Teach you how you can add beautiful shadow around around comment box,you know that blogger doesn’t have good commen...

Read more »

Border Shaded Effect With Css On Blogger Posts images

<div dir="ltr" style="text-align: left;" trbidi="on"> <span style="font-family: Georgia, Times New Roman, serif;">This is very easy tutorial,in this tutorial i will teach you how to add shadow effect on Blogger post images using css.This effect will be applied to all the images with a single change in css code.This shadow effect looks very cool compared to normal image,and this will attract your visitors too.</span><br /> <span style="font-family: Georgia, Times New Roman, serif;"><br /></span> <br /> <h3 style="text-align: left;"> Preview</h3> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtlQAkuX-PIDhjt47u9WfyMGqJ9kDYakbQQuM20mYUmumi26x29i77yC4YIaqvIiM1r1WuaEju_cd4HE1mxUOcm07tyspTZ6yqAthr4XAAvB7h4CsP2Madrf6m3yDmOZGgt400zLk0Q00/s1600/Advertise+here+box.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHtlQAkuX-PIDhjt47u9WfyMGqJ9kDYakbQQuM20mYUmumi26x29i77yC4YIaqvIiM1r1WuaEju_cd4HE1mxUOcm07tyspTZ6yqAthr4XAAvB7h4CsP2Madrf6m3yDmOZGgt400zLk0Q00/s1600/Advertise+here+box.PNG" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"> </div> <span style="font-size: large;"><br /></span> <br /> <h3 style="text-align: left;"> How to get this style?</h3> <br /> <b>Step 1</b>: Go to blogger’s <b>template>edit html</b><br /> <b><br /></b> <b>Step 2</b>: Search for <i style="background-color: #cccccc;">.post img</i><br /> <b><br /></b> <b>Step 3</b>: Now just change<br /> <br /> <div style="background-color: white; font-family: Oranienbaum, serif; font-size: 18px; line-height: 24px;"> <blockquote class="tr_bq" style="-webkit-transition: background-color 0.777s; background-color: #f5f2f0; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); color: #404040; font-family: 'Times New Roman', Times, serif; font-size: 13px; margin: 0px 20px; padding: 20px 70px 20px 20px;"> <span style="color: black; font-family: 'Courier New', Courier, monospace; font-size: small; line-height: normal;">.post img {</span><br /> <div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal;"> <span style="font-family: Courier New, Courier, monospace;">padding:10px</span></div> <div style="color: black; font-family: 'Times New Roman'; font-size: medium; line-height: normal;"> <span style="font-family: Courier New, Courier, monospace;">}</span></div> </blockquote> </div> <div style="background-color: white; font-family: Oranienbaum, serif; font-size: 18px; line-height: 24px;"> <ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;"></ul> </div> <br /> to<br /> <br /> <div style="background-color: white; font-family: Oranienbaum, serif; font-size: 18px; line-height: 24px;"> <blockquote class="tr_bq" style="-webkit-transition: background-color 0.777s; background-color: #f5f2f0; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); color: #404040; font-family: 'Times New Roman', Times, serif; font-size: 13px; margin: 0px 20px; padding: 20px 70px 20px 20px;"> <span style="font-family: Courier New, Courier, monospace;">.post img {</span><br /> <span style="font-family: Courier New, Courier, monospace;">border:1px solid #CCC;</span><br /> <span style="font-family: Courier New, Courier, monospace;">border-radius:4px 4px 4px 4px;box-shadow:0 1px 11px rgba(0,0,0,0.15);padding:4px</span><br /> <span style="font-family: Courier New, Courier, monospace;">}</span></blockquote> </div> <br /> <span style="background-color: white; line-height: 24px;"><span style="font-family: Georgia, Times New Roman, serif;">Now you are done!! it’s very simple trick…isn’t it?This effect will be applied to all the images with a single change in css code.This shadow effect looks very cool compared to normal image,and this will attract your visitors .</span></span></div>

This is very easy tutorial,in this tutorial i will teach you how to add shadow effect on Blogger post images using css.This effect will be ...

Read more »