tag:blogger.com,1999:blog-58932977143997753662024-03-16T07:58:36.831+05:30blogwidgetboxFree Blogger Tips, Hacks, Widgets, Templates and moreUnknownnoreply@blogger.comBlogger216125tag:blogger.com,1999:blog-5893297714399775366.post-77835688168625381802013-03-14T09:38:00.000+05:302013-03-14T09:41:09.194+05:30HOW TO ADD FACEBOOK COMMENT BOX FOR BLOGGER<div style="text-align: justify;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Not
all folks include a Google or web logger account during which they\'re
going to use to discuss your blog. that\'s why some folks use a third
party comment plug ins similar to Disqus and Intense discussion. However
really folks area unit too lazy to discuss those commenting platform
and that i am one in every of those. But, if you have got facebook
comment box on your web log, possibilities of comments from your
audience can increase as a result of virtually most are on facebook.</span></div>
<div style="text-align: justify;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="background-color: yellow;"><span style="color: #073763; font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><b>ADVANTAGE OF FACEBOOK COMMENT BOX</b></span></span></div>
<div style="text-align: justify;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"></span><br />
<br />
<ul>
<li><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">More
convenient for guests. most of the people whereas water sport the
online has their facebook account opened, having this comment box won\'t
trouble them sign language up or getting into captcha\'s symbols after
they wish to comment.</span></li>
</ul>
<ul>
<li><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">It
boosts traffic. guests has the choice to post their comments on their
profile and once somebody on their profile liked it, it\'ll seem
additionally on their profile page then on.</span></li>
</ul>
<ul>
<li><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Threaded
comments. Some blogs has no rib comments on their default blogger
comment box. Mistreatment this plug-in can increase spoken language from
your daily guests.</span></li>
</ul>
<ul>
<li><span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">No spam comments.</span></li>
</ul>
<br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">If you would like to cover your default comment box follow this</span></div>
<div style="text-align: justify;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKKCVjB5H_bJcdWl5zpnVrEwkZWq-LKgJ1aDle-3ovswuao_bN2uPby33MtIMNjfpJF2IVfc2LeCRfpqXgjtKJmxUiTxEWpLBmazJ1Myu16KZpjLs548LrLfPaDz3wo2Ag3b5WRYvVlAo/s400/10.PNG" width="400" /></div>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"></span></div>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">1. Login to your blogger account.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">2. Than dashboard >>> Template >>> Edit HTML.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">3. Don't forget to backup your template first.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">4. Check the Expand Widget Templates box.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">5. Now find out [ Click (Ctrl and F) Search for ] below code.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"></span>
<textarea cols="40" name="textarea" rows="1" style="margin-left: 2px; margin-right: 2px; width: 413px;" wrap="VIRTUAL"><data:post.body/>
</textarea><br />
<br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">(some templates has more than 1 of this if you are using "read more").</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">6. Copy and paste the code below under the code. If you have 2 of these tags place it on the second of the same code.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<textarea cols="40" name="textarea" rows="4" style="height: 85px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px; margin-top: 2px; width: 414px;" wrap="VIRTUAL"><b:if
cond='data:blog.pageType == "item"'>
<p align='left'>
<a
href='http://imomniscient.blogspot.com/2012/12/how-to-add-facebook-comment-box-for.html'
target='new'><img alt='' class='icon-action'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIe7mvkG_f6CaJvDc91UiNDaLf-NmlqrczqHubOlwngwQ1GsDm4sarA6Jr-IPIODU4LcvIXNKJUF-BuyymrOBK61ZD__NeUU-9aM51lkgM01W_q0s7cF6VyMCwePW4kRLLpUA4-_vHRPA/'/></a></p>
<div
id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '149973631711831', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments/>
</b:if>
</textarea><br />
<br />
<br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">7. Save template!</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Now
check on your web log and you may see a facebook comment box slightly
below every of your posts. If you cannot see a comment box then your
facebook account should are logged out, strive work in and see your
facebook comment box, it'll currently seem.</span><br />
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;">Enjoy!</span>Unknownnoreply@blogger.com82tag:blogger.com,1999:blog-5893297714399775366.post-13412009408558992262013-03-05T23:27:00.000+05:302013-03-05T23:27:20.355+05:30How To Add Related Post With Thumbnails to BloggerThis is a great blogger hack from www.bloggerplugins.org .In this
post I explain how to add this related post widget to blogger by hosting
java script in blogger.It will help your template load faster.But If
you don't want this method read the original article from here.<br />
1.Login to your blogger dashboard--> layout- -> Edit HTML<br />
2.Click on "<span style="color: #3333ff;">Expand Widget Templates</span>"<br />
3.Scroll down to where you see <span style="color: red; font-weight: bold;"></head></span> tag.<br />
4.Copy below code and paste it <span style="color: #3333ff;">just before</span> <span style="color: red;"></head></span> tag.<br />
<pre style="border: 1px solid black; height: 300px; overflow: auto; width: 90%;"><!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMwnIPzWdzTSqmzG4OYytfEIkr4yv5yNUX-lKfMqeiW-zinNq9gRGWgwifHfLTP__GdP3sdWmne7feA76LWFUM6gBq5hVqIRh42uEhrJwp8B0cOCJS4RzPZe2kaKgaG1HavxyVBPt3nrk/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End--></pre>
5.Now scroll down to where you see below code:
<br />
<pre style="border: 1px solid black; color: red; font-weight: bold; height: 50px; overflow: auto; width: 90%;"><center>
<span style="font-size: 130%;"><div class='post-footer-line post-footer-line-1'></span></center>
</pre>
<span style="color: #cc33cc; font-weight: bold;">NOTE:</span> If you can't find <span style="font-weight: bold;"><div class='post-footer-line post-footer-line-1'></span> in your template,find <span style="color: red; font-weight: bold;"><data:post.body></span> instead of it.<br />
6.Copy below code and paste it <span style="color: #3333ff;">just after</span> above code.<br />
<pre style="border: 1px solid black; height: 300px; overflow: auto; width: 90%;"><!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=<span style="color: #ff6600; font-weight: bold;">5</span>;
var relatedpoststitle="<span style="color: #3333ff; font-weight: bold;">Related Posts</span>";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End--></pre>
<span style="font-weight: bold;">Note:</span> You can change <span style="color: #ff6600; font-weight: bold;">5</span> , <span style="color: #3333ff; font-weight: bold;">Related Posts</span> as your choice.<br />
7.Now save your template and you are done.Unknownnoreply@blogger.com12tag:blogger.com,1999:blog-5893297714399775366.post-58217956567552591452013-03-05T23:12:00.001+05:302013-03-05T23:13:57.283+05:30How To Add Automatically Link To This Post Widget To BloggerDo you like to add "Link To This Post Widget" under your blog post?This will help you to <span style="color: red; font-weight: bold;">increase your site's backlinks</span> for better SEO.So if you interested to add this useful widget to your blogspot blog follow the simple steps below.<br />
1.Log in to your dashboard--> layout- -> Edit HTML<br />
2.Click on "<span style="color: #3333ff;">Expand Widget Templates</span>"<br />
3.Scroll down to where you see this:<br />
<img alt="Link to this post widget for blogger" border="0" height="85" id="BLOGGER_PHOTO_ID_5413858610059088866" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNTrjnS_DslMNG4oIrdA_qPYQGG_xHOOeRxw32ut5TOPycJkrhDxlCKncdZPU5YDoWGOBD7UruA-bf8tjXs73QAd-JjqGtd7HA6JUJWh5LBhYxiNYv5ovVcGkdQgNjwIBS_jp5bA7x-6jP/+to+this+post+widget+for+blogger.png" width="400" /><br />
<center>
<span style="font-size: 180%;"><data:post.body/></span></center>
4.Copy below code and paste it <span style="color: #3333ff;">immediately after</span> the line <span style="color: red;"><data:post.body/></span> .<br />
<pre style="border: 1px solid black; height: 100px; overflow: auto; width: 90%;"><div style='border: 0px solid #646464; padding: 2px 2px; margin:2px 2px;background-color:#ffffff;font-size:11px;'>
<p><span style="color: #009900;">If you like this please Link Back to this article...</span></p>
<textarea cols='<span style="color: #cc33cc; font-weight: bold;">60</span>' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea><br/>
</div><br/></pre>
<span style="font-weight: bold;">Note:</span>You can change colors,font,... if you like.<br />
5.Click on "Save Templates" and now you are done.Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-5893297714399775366.post-17442601799348935892013-03-04T14:02:00.005+05:302013-03-04T14:02:50.575+05:30How to Add or Remove Featured Article Slider in blogger themes?Most of us are using the blogger as platform to share your knowledge
with others or earning some serious money with your knowledge. There are
many in-build basic as well as modern templates in blogger but
most often we use themes created by artists other than blogger. These
artists make there themes more user friendly and stylish according to
web 2.0. Many times in these themes we see a "Featured Article" name
slider in the top most portion of posts section which specify the top
most viewed post of your blog, but in some cases we don't want these
slider in our blog and try to remove them. But as we all are not web
designer and we don't know how to edit the HTML so these slider become a
problem to us.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgck73GFoGT0_-fl-3Bvo4QntIttco2P0jSbc5-1kHDAuvwE_kTMrTRJXRY-408gOjOFVwi4rF8Z_LajiavmeYXX2h_Y7EHkjyKL8-Xnvow8zrMIBncoVkPckrpuIo6ajrCcccMKchbr84/s400/Capture.PNG" width="400" /></div>
<br />
<span class="Apple-style-span" style="background-color: white;"><b>Step 1.</b></span><br />
Go to your blogger account click on Template and Download your full
template so as to make a backup. Then click on Edit Templates.<br />
<br />
<b>Step 2</b>.<br />
Start from the bottom n keep on looking the coding like this...<br />
<blockquote>
<br />
<blockquote>
<br />
<!-- Featured Content Slider Started --><br />
<br />
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><br />
<b:if cond='data:blog.pageType != &quot;item&quot;'><br />
<br />
<br />
<br />
<div class='featuredposts clearfix'><br />
<br />
<div class='fp-slides'><br />
<br />
<div class='fp-post'><br />
<div class='fp-thumbnail'><a
href='featured-post-1-url-here'><img
src='http://3.bp.blogspot.com/-viGE-reitBQ/TibVaXQyoMI/AAAAAAAAC1U/Vd8nXsp207E/s000/1.jpg'/></a></div><br />
<h3 class='fp-title'><a href='featured-post-1-url-here'>This is default featured post 1 title</a></h3><br />
<p>Go to Blogger edit html and find these sentences.Now replace
these sentences with your own descriptions.PageList1</p><br />
</div><br />
<br />
<div class='fp-post'><br />
<div class='fp-thumbnail'><a
href='featured-post-2-url-here'><img
src='http://3.bp.blogspot.com/-yC2ItwN5lVg/TibVasa4PBI/AAAAAAAAC1Y/T-MusfHMvSM/s000/2.jpg'/></a></div><br />
<h3 class='fp-title'><a href='featured-post-2-url-here'>This is default featured post 2 title</a></h3><br />
<p>Go to Blogger edit html and find these sentences.Now replace
these sentences with your own descriptions.PageList1</p><br />
</div><br />
<br />
<div class='fp-post'><br />
<div class='fp-thumbnail'><a
href='featured-post-3-url-here'><img
src='http://4.bp.blogspot.com/-SVxu3sQIBRI/TibVa6VtpMI/AAAAAAAAC1c/-A6Gjd7d4z0/s000/3.jpg'/></a></div><br />
<h3 class='fp-title'><a href='featured-post-3-url-here'>This is default featured post 3 title</a></h3><br />
<p>Go to Blogger edit html and find these sentences.Now replace
these sentences with your own descriptions.PageList1</p><br />
</div><br />
<br />
<div class='fp-post'><br />
<div class='fp-thumbnail'><a
href='featured-post-4-url-here'><img
src='http://2.bp.blogspot.com/-g8Og-gFETa4/TibVbOrq1tI/AAAAAAAAC1g/815xr1cXIMA/s000/4.jpg'/></a></div><br />
<h3 class='fp-title'><a href='featured-post-4-url-here'>This is default featured post 4 title</a></h3><br />
<p>Go to Blogger edit html and find these sentences.Now replace
these sentences with your own descriptions.PageList1</p><br />
</div><br />
<br />
<div class='fp-post'><br />
<div class='fp-thumbnail'><a
href='featured-post-5-url-here'><img
src='http://2.bp.blogspot.com/-p47uhAxrirI/TibVbuDPhwI/AAAAAAAAC1k/zLcwjH0017o/s000/5.jpg'/></a></div><br />
<h3 class='fp-title'><a href='featured-post-5-url-here'>This is default featured post 5 title</a></h3><br />
<p>Go to Blogger edit html and find these sentences.Now replace
these sentences with your own descriptions.PageList1</p><br />
</div><br />
<br />
</div><br />
<br />
<br />
<div class='fp-nav clearfix'><br />
<span class='fp-pager'/><br />
<a class='fp-next' href='#fp-next'/><br />
<a class='fp-prev' href='#fp-prev'/><br />
</div><br />
</div><br />
<br />
<br />
<br />
</b:if></b:if><br />
<br />
<!-- Featured Content Slider End --></blockquote>
<blockquote>
Content Slider End --&amp;amp;gt;</blockquote>
</blockquote>
<b>Step 3.</b><br />
Select all these coding(or similar to it) and just delete it or edit it
to customize your slider. And if you remove it then your blog will look
like this<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ygveryZ3J4YqA0r4_esNUyKH4RxE_0lv_yZySu2bBVSTnJSn-r6cFWL14HCL7XyAX2pq7yW-x-kL-0JlCSFNK2cjVAiCIeOoJ4Uw3JBqqcZVEy0x5hc03CYyVkvkj8olfFX9bvuTApU/s400/Capture.PNG" width="400" /></div>
<br />
<b>Step 4.</b><br />
First click on Preview to verify your editing and if you are totally satisfied click on Save Template. Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-5893297714399775366.post-29464134997834226572013-03-04T08:10:00.000+05:302013-03-04T08:19:10.752+05:30How to Change Blogger Template in New Blogger InterfaceSome might use blogger old interface. But the old blogger interface will
not be available in future. That means old interface retires.<br />
So I write about ‘<b>How to Change Blogger Template in New Blogger Interface</b>’. Below are the step by step procedures to change the blogger template. <br />
1. First download a new blogger template. Lots of templates are available in internet for free. Search for free blogger templates. Download a template which you want. The blogger template you downloaded will be an xml file or text file.<br />
<a href="http://www.blogger.com/null" name="more"></a>2. Login to <a class="external" href="http://www.blogger.com/" target="_blank">blogger</a>.You will get your list of blogs<br />
3. Then go to ‘<b>template’</b> section as given in below image.<br />
<img alt="Blogger-Template-Changing" border="0" src="http://lh3.ggpht.com/-qcZtIXlODzw/T_foEWjajhI/AAAAAAAAC70/Gm-7xTlUB7o/Blogger-Template-Changing_thumb%25255B1%25255D.png?imgmax=800" style="background-image: none; border-color: -moz-use-text-color; border-style: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Blogger-Template-Changing" /><br />
4. Then click ‘<b>Backup/restore</b>’ button which will be at the right top corner.<br />
<img alt="blogger-backup and restore" border="0" height="157" src="http://lh4.ggpht.com/-FSSGpQyMLOA/T_foLeVnCxI/AAAAAAAAC8E/CWZJfkjEMFU/blogger-backup%252520and%252520restore_thumb.png?imgmax=800" style="background-image: none; border-color: -moz-use-text-color; border-style: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="blogger-backup and restore" width="232" /><br />
5. A lightbox window will open with two options. First one ‘<b>download full template’</b> is for making a backup of current template and second one ‘<b>upload</b>’ is for choosing a template from your computer and upload it to change the blogger theme. <br />
If you want, you can take backup.<br />
To change the template first click ‘<b>choose</b>’ and browse for the template you download and then click ‘<b>upload</b>’.<br />
<img alt="blogger-template-upload" border="0" height="269" src="http://lh3.ggpht.com/-Nka0MuwZxuE/T_foRB6zdcI/AAAAAAAAC8U/LzuADMX1E3Y/blogger-template-upload_thumb%25255B1%25255D.png?imgmax=800" style="background-image: none; border-color: -moz-use-text-color; border-style: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="blogger-template-upload" width="504" /><br />
That’s all. Your template will be changed.<br />
6. If you want to edit the template you uploaded click ‘<b>edit html’</b> button.<br />
<img alt="Blogger-edit-html" border="0" height="314" src="http://lh6.ggpht.com/-yKOeWNOGDJs/T_foaenxsPI/AAAAAAAAC8k/Ku4GRhkoHWo/Blogger-edit-html_thumb%25255B1%25255D.png?imgmax=800" style="background-image: none; border-color: -moz-use-text-color; border-style: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Blogger-edit-html" width="504" /><br />
A lightbox window will open and alert you. Click ‘<b>proceed</b>’ button.<br />
<img alt="blogger-edit-html-proceed" border="0" height="271" src="http://lh3.ggpht.com/-1bHX0QKm1LA/T_fofixRH7I/AAAAAAAAC80/hs6f5qt1cWY/blogger-edit-html-proceed_thumb%25255B1%25255D.png?imgmax=800" style="background-image: none; border-color: -moz-use-text-color; border-style: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="blogger-edit-html-proceed" width="504" /><br />
7. After clicking ‘<b>proceed</b>’ button you can see the html code of your new blog template. Check the ‘<b>expand widget templates</b>’ option. <img alt="blogger-expand-widget" border="0" height="296" src="http://lh5.ggpht.com/-ivbUiQ-8ET4/T_fomnBrhqI/AAAAAAAAC9E/dTVVchP-fAE/blogger-expand-widget_thumb%25255B1%25255D.png?imgmax=800" style="background-image: none; border-color: -moz-use-text-color; border-style: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="blogger-expand-widget" width="504" /><br />
8. Edit styles of widgets, body, text etc., And click ‘<b>save template</b>’ button.<br />
<img alt="blogger-save-template" border="0" height="256" src="http://lh6.ggpht.com/-KJaN0V0lW88/T_fosQVV9oI/AAAAAAAAC9U/l7NpTRhQKTg/blogger-save-template_thumb%25255B1%25255D.png?imgmax=800" style="background-image: none; border-color: -moz-use-text-color; border-style: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="blogger-save-template" width="504" /><br />
Then click ‘<b>close</b>’ icon.<br />
9. If you want to add gadgets, go to ‘<b>layout</b>’ option.<br />
<img alt="blogger-layout" border="0" height="300" src="http://lh4.ggpht.com/-3pGm6brHdEo/T_fo-Ba8MeI/AAAAAAAAC9k/Qz4OKgfrjrU/blogger-layout_thumb%25255B1%25255D.png?imgmax=800" style="background-image: none; border-color: -moz-use-text-color; border-style: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="blogger-layout" width="504" /><br />
10. Click ‘<b>add a gadget</b>’ to add a gadget from a list of available
gadgets. Arrange them by drag and drop. Don’t forget to save the
changes by clicking ‘<b>save arrangement</b>’. <img alt="blooger-add-gadgets" border="0" height="206" src="http://lh4.ggpht.com/-a3SPo85fOTk/T_fpEOZY6lI/AAAAAAAAC90/IwfdH4Lm0p0/blooger-add-gadgets_thumb%25255B1%25255D.png?imgmax=800" style="background-image: none; border-color: -moz-use-text-color; border-style: none; border-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="blooger-add-gadgets" width="504" /><br />
That’s all. View your blog to see the changes.<br />
<br />
<h4>
One important thing to do:</h4>
One thing you must do is backup your blog html gadgets you added in old
template and delete them before uploading your new template. After
changing template restore them.<br />
<h5>
Why?</h5>
If you don’t delete them, those html codes may be hidden or vanished
from your template ( I don’t know why. But sometimes it happens). But
they may run. You can’t stop them working. I personally experienced it. I
had a blog. Also I had added a gadget having a code for pop-up
advertisements. <br />
When I uploaded the template that html code gadget was vanished. I could
not find it. But the advertisements had been showing on my blog. Later I
realized pop-up adverts are irritating adverts. Also that advertising
network suspended my account. But I could not remove their code from my
blog since I could not find it. Adverts had been showing on my blog. So I
deleted that blog and started this blog. <br />
The problem with template Uploader may not come or template Uploader may
not create the problem. But for safer side backup your gadgets codes,
delete and restore after changing your template.Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-5893297714399775366.post-31185562910556651472011-10-05T23:51:00.003+05:302011-10-06T00:13:21.695+05:30Blogspot How to: Add Adsense Below Post Titles<div dir="ltr" style="text-align: left;" trbidi="on"><span class="Apple-style-span" style="border-collapse: separate; color: #555555; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: arial,helvetica,clean,sans-serif; font-size: 13px; line-height: 16px; text-align: left;"></span></span><br />
<div class="post-img" style="float: center; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;"><img alt="How to Add Adsense Below Post Titles in Blogspot Blogs" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd9Qr3-vsZvtcbug0U3nzXT5b-kR2e-dsRigx8bCM060EZq6dxgragpQvt7WMvCNzS5WyWKbz3FRzw6XuNjeKO_pORmDhxOwatHiUDkcUAo3ggWOVlnrQPaB4IMCKt8exYoyy0U_c_I20/s1600/How+to+Add+Adsense+Below+Post+Titles+in+Blogspot+Blogs.png" style="border-style: none; border-width: 0px; height: 290px; text-align: center; width: 300px;" /></div><br />
Google Adsense is the most popular ad network on the planet. A lot of Blogger users also use it. It's an endless discussion where to place these ads on your blog for maximum exposure. The best ad places are around the header or above the posts or below the post titles. You can easily add adsense in your sidebar as a gadget. But Blogger doesn't allows us to directly place the ads below post titles. The ads below post titles have proven to be one of the most successful money making positions. So, what are you waiting for? Follow this tutorial to add your Adsense ads below post titles.<a href="http://www.blogger.com/post-edit.g?blogID=5893297714399775366&postID=3118556291055665147" name="more" style="text-decoration: none;"></a><br />
<br />
<blockquote style="background-attachment: initial; background-clip: initial; background-color: #fedae3; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(249, 175, 191); border-bottom-style: solid; border-bottom-width: 1px; display: block; margin-bottom: 10px; margin-left: 0px; margin-right: 20px; margin-top: 20px; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; text-decoration: none; width: 500px;"><div style="line-height: 1.5em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b style="font-family: Helvetica, Arial, Verdana, sans-serif; font-weight: bold;">Please Note:</b><span class="Apple-converted-space"> </span>I'm assuming that you're using the new Adsense interface.</div></blockquote><br />
<h2 style="font-size: 15px; margin-bottom: 0.5em; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Steps!</h2><ol style="list-style-type: decimal; margin: 0px; padding: 0px 0px 0px 2.5em;"><li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Log in to your<span class="Apple-converted-space"> </span><span style="font-weight: bold;">Google Adsense</span><span class="Apple-converted-space"> </span>account by going to<span class="Apple-converted-space"> </span><a href="https://www.google.com/adsense/" style="color: #3333ff; text-decoration: none;" target="_blank">https://www.google.com/adsense/</a></li>
<li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Go to<span class="Apple-converted-space"> </span><span style="font-weight: bold;">My ads</span><span class="Apple-converted-space"> </span>tab and open<span class="Apple-converted-space"> </span><span style="font-weight: bold;">Ad units</span><span class="Apple-converted-space"> </span>from the left side by expanding<span class="Apple-converted-space"> </span><span style="font-weight: bold;">Content</span><span class="Apple-converted-space"> </span>link.[<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqcgljtM6Mvuc6yJ415zYi-dy4AQuol6lp68jwgAF7qFXkqoZPjjVRlWvzQtxRkz2tuB1qsWj49iw80AtpTXXn2BHKi0orEovSjra_E-URbauIvZ1ZuwVtDEof7Gv3lAlzX6aYdwG5H78/s1600/Adsense+New+Ads+Page.png" style="text-decoration: none;" target="_blank">View Screenshot for Help</a>]</li>
<li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Click<span class="Apple-converted-space"> </span><span style="font-weight: bold;">new ad unit</span><span class="Apple-converted-space"> </span>to create a new ad.[<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqcgljtM6Mvuc6yJ415zYi-dy4AQuol6lp68jwgAF7qFXkqoZPjjVRlWvzQtxRkz2tuB1qsWj49iw80AtpTXXn2BHKi0orEovSjra_E-URbauIvZ1ZuwVtDEof7Gv3lAlzX6aYdwG5H78/s1600/Adsense+New+Ads+Page.png" style="text-decoration: none;" target="_blank">View Screenshot for Help</a>]</li>
<li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Select the size, type and color of your ad. For best results chose either<span class="Apple-converted-space"> </span><span style="font-weight: bold;">300x250</span><span class="Apple-converted-space"> </span>medium or<span class="Apple-converted-space"> </span><span style="font-weight: bold;">336x250</span><span class="Apple-converted-space"> </span>large rectangle.[<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqcgljtM6Mvuc6yJ415zYi-dy4AQuol6lp68jwgAF7qFXkqoZPjjVRlWvzQtxRkz2tuB1qsWj49iw80AtpTXXn2BHKi0orEovSjra_E-URbauIvZ1ZuwVtDEof7Gv3lAlzX6aYdwG5H78/s1600/Adsense+New+Ads+Page.png" style="text-decoration: none;" target="_blank">View Screenshot for Help</a>]</li>
<li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Give your ad a remember-able name and ad a custom channel to track the ad performance. If you don't know anything about channels then leave that option.</li>
<li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">After filling required information, click<span class="Apple-converted-space"> </span><span style="font-weight: bold;">save and get code</span><span class="Apple-converted-space"> </span>button at the bottom of the page.[<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqcgljtM6Mvuc6yJ415zYi-dy4AQuol6lp68jwgAF7qFXkqoZPjjVRlWvzQtxRkz2tuB1qsWj49iw80AtpTXXn2BHKi0orEovSjra_E-URbauIvZ1ZuwVtDEof7Gv3lAlzX6aYdwG5H78/s1600/Adsense+New+Ads+Page.png" style="text-decoration: none;" target="_blank">View Screenshot for Help</a>]</li>
<li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">A pop-up window will appear with the ad code. Copy that code.[<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQ9rSNfKbNWoB995jDayYAGZ83gTDqAK1wVQTjuRhaz328X8jS2mg2TWzONaQFNIKP0tVYKHBUByEKbmg1fBLEXLMRuI9eyK-TbeZYJY0oK1zOG-C8dveOfLJVqNwHzx5AigQ6l8bKv8/s1600/Adsense+Ad+Code.png" style="text-decoration: none;" target="_blank">View Screenshot for Help</a>]</li>
<li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Before pasting the ad code in Blogger, we must make it compatible with Blogger format. So go to<a href="http://www.hacktrix.com/adsense-code-converter/" style="color: #3333ff; text-decoration: none;" target="_blank">http://www.hacktrix.com/adsense-code-converter/</a><span class="Apple-converted-space"> </span>paste the ad code and convert it. You'll find the converted ad code in the bottom box there. Copy the converted ad code.</li>
<li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Open your Blogger account and go to<span class="Apple-converted-space"> </span><span style="font-weight: bold;">Design</span><span class="Apple-converted-space"> </span>then<span class="Apple-converted-space"> </span><span style="font-weight: bold;">Edit HTML</span><span class="Apple-converted-space"> </span>tab and check<span class="Apple-converted-space"> </span><span style="font-weight: bold;">Expand Widget Templates</span><span class="Apple-converted-space"> </span>option.</li>
<li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Press<span class="Apple-converted-space"> </span><span style="font-style: italic;">Ctrl + f</span><span class="Apple-converted-space"> </span>& find<span class="Apple-converted-space"> </span><code style="background-attachment: initial; background-clip: initial; background-color: #fef8c4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: monospace; line-height: 13px; word-wrap: normal;"><data:post.body/></code><span class="Apple-converted-space"> </span>you'll see some code like this:</li>
</ol><div style="text-align: justify;"><pre style="background-color: #fef8c4; border-color: rgb(216, 213, 102); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; box-shadow: 0px 1px rgb(255, 255, 255) inset; clear: both; display: block; font-family: monospace; line-height: 13px; margin: 20px 20px 10px 0px; overflow: auto; padding: 10px; position: relative; width: 500px; word-wrap: normal;"><code style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: monospace; line-height: 13px; word-wrap: normal;"> <div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div></code></pre></div><ol style="list-style-type: decimal; margin: 0px; padding: 0px 0px 0px 2.5em;"><li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Paste the converted ad code just before the above code. The result would look something like this:</li>
</ol><div style="text-align: justify;"><pre style="background-color: #fef8c4; border-color: rgb(216, 213, 102); border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; box-shadow: 0px 1px rgb(255, 255, 255) inset; clear: both; display: block; font-family: monospace; line-height: 13px; margin: 20px 20px 10px 0px; overflow: auto; padding: 10px; position: relative; width: 500px; word-wrap: normal;"><code style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: monospace; line-height: 13px; word-wrap: normal;"><script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
/* my ads */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div></code></pre></div><ol style="list-style-image: initial; list-style-position: initial; list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 2.5em; padding-right: 0px; padding-top: 0px;"><li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Click the<span class="Apple-converted-space"> </span><span style="color: #3333ff;">PREVIEW</span><span class="Apple-converted-space"> </span>button to see the result. Thought you might not see ads below post titles instantly because sometimes Adsense ads take some time to display.</li>
<li style="list-style-type: decimal; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.5em; padding-left: 0px; padding-right: 0px; padding-top: 0px;">After that save your template by clicking the<span class="Apple-converted-space"> </span><span style="color: #ff6600;">SAVE TEMPLATE</span><span class="Apple-converted-space"> </span>button.</li>
</ol><h2 style="font-size: 15px; margin-bottom: 0.5em; margin-left: 0px; margin-right: 0px; margin-top: 10px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Tip: Make Ads Appear Only on Post Pages</h2><br />
Usually, users don't like to see too many ads on a single page. So, we can hide the ads under post titles on main page. These ads will appear only when users will click the post title and go to the post page. To do that follow the steps above but after step 8 you have the converted ad code. Ad some more code in that converted code so that it should look like this:<br />
<code style="background-attachment: initial; background-clip: initial; background-color: #fef8c4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: monospace; line-height: 13px; word-wrap: normal;"></code><br />
<pre style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px inset; background-attachment: initial; background-clip: initial; background-color: #fef8c4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(216, 213, 102); border-bottom-left-radius: 2px 2px; border-bottom-right-radius: 2px 2px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(216, 213, 102); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(216, 213, 102); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(216, 213, 102); border-top-left-radius: 2px 2px; border-top-right-radius: 2px 2px; border-top-style: solid; border-top-width: 1px; box-shadow: rgb(255, 255, 255) 0px 1px inset; clear: both; display: block; font-family: monospace; line-height: 13px; margin-bottom: 10px; margin-left: 0px; margin-right: 20px; margin-top: 20px; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; position: relative; width: 500px; word-wrap: normal;"><code style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: monospace; line-height: 13px; word-wrap: normal;"><span style="font-weight: bold;"><b:if cond='data:blog.pageType == &quot;item&quot;'></span><script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
/* my ads */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><span style="font-weight: bold;"></b:if></span></code></pre><span class="Apple-style-span" style="border-collapse: separate; color: #555555; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: arial,helvetica,clean,sans-serif; font-size: 13px; line-height: 16px; text-align: left;"> </span></span><br />
<span class="Apple-style-span" style="border-collapse: separate; color: #555555; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: arial,helvetica,clean,sans-serif; font-size: 13px; line-height: 16px; text-align: left;"> </span></span><br />
<span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: 'normal Verdana',Arial,Helvetica,sans-serif; font-size: 13px; line-height: 19px; text-align: justify;">1.) If you want to show your<span class="Apple-converted-space"> </span><b style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Google Adsense ad below post tile to blogger</b><span class="Apple-converted-space"> </span>in the left side then copy the below Code 1.1,</span></span><br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;">Code 1.1</div><code style="background-attachment: initial; background-clip: initial; background-color: #fef8c4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: monospace; line-height: 13px; word-wrap: normal;"></code><br />
<pre style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px inset; background-attachment: initial; background-clip: initial; background-color: #fef8c4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(216, 213, 102); border-bottom-left-radius: 2px 2px; border-bottom-right-radius: 2px 2px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(216, 213, 102); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(216, 213, 102); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(216, 213, 102); border-top-left-radius: 2px 2px; border-top-right-radius: 2px 2px; border-top-style: solid; border-top-width: 1px; box-shadow: rgb(255, 255, 255) 0px 1px inset; clear: both; display: block; font-family: monospace; line-height: 13px; margin-bottom: 10px; margin-left: 0px; margin-right: 20px; margin-top: 20px; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; position: relative; width: 500px; word-wrap: normal;"><code style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: monospace; line-height: 13px; word-wrap: normal;"><span style="font-weight: bold;"></span><div style="float: left; margin: 10px 10px 10px 0;">
YOUR ADSENSE CODE HERE
</div></code></pre><span class="Apple-style-span" style="border-collapse: separate; color: #555555; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: arial,helvetica,clean,sans-serif; font-size: 13px; line-height: 16px; text-align: left;"> </span></span><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: 'normal Verdana',Arial,Helvetica,sans-serif; font-size: 13px; line-height: 19px; text-align: justify;"> </span></span>OR<br />
<br />
2.) If you want to show your<span class="Apple-converted-space"> </span><b style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Google Adsense ad below post tile to blogger</b><span class="Apple-converted-space"> </span>in the right side then copy the below Code 1.2,<br />
<br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;">Code 1.2</div><code style="background-attachment: initial; background-clip: initial; background-color: #fef8c4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: monospace; line-height: 13px; word-wrap: normal;"></code><br />
<pre style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px inset; background-attachment: initial; background-clip: initial; background-color: #fef8c4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(216, 213, 102); border-bottom-left-radius: 2px 2px; border-bottom-right-radius: 2px 2px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(216, 213, 102); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(216, 213, 102); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(216, 213, 102); border-top-left-radius: 2px 2px; border-top-right-radius: 2px 2px; border-top-style: solid; border-top-width: 1px; box-shadow: rgb(255, 255, 255) 0px 1px inset; clear: both; display: block; font-family: monospace; line-height: 13px; margin-bottom: 10px; margin-left: 0px; margin-right: 20px; margin-top: 20px; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; position: relative; width: 500px; word-wrap: normal;"><code style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: monospace; line-height: 13px; word-wrap: normal;"><div style="float: right; margin: 10px 0px 10px 10px;">
YOUR ADSENSE CODE HERE
</div></code></pre>OR<br />
<br />
3.) If you want to show your<span class="Apple-converted-space"> </span><b style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Google Adsense ad below post tile to blogger</b><span class="Apple-converted-space"> </span>in the center then copy the below Code 1.3,<br />
<br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: center;">Code 1.3</div><code style="background-attachment: initial; background-clip: initial; background-color: #fef8c4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: monospace; line-height: 13px; word-wrap: normal;"></code><br />
<pre style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px inset; background-attachment: initial; background-clip: initial; background-color: #fef8c4; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(216, 213, 102); border-bottom-left-radius: 2px 2px; border-bottom-right-radius: 2px 2px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(216, 213, 102); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(216, 213, 102); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(216, 213, 102); border-top-left-radius: 2px 2px; border-top-right-radius: 2px 2px; border-top-style: solid; border-top-width: 1px; box-shadow: rgb(255, 255, 255) 0px 1px inset; clear: both; display: block; font-family: monospace; line-height: 13px; margin-bottom: 10px; margin-left: 0px; margin-right: 20px; margin-top: 20px; overflow-x: auto; overflow-y: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; position: relative; width: 500px; word-wrap: normal;"><code style="background-attachment: initial; background-clip: initial; background-color: initial; background-image: none; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: monospace; line-height: 13px; word-wrap: normal;"><div style="text-align: center; margin: 10px 10px 10px 0;">
YOUR ADSENSE CODE HERE
</div></code></pre><br />
<span class="Apple-style-span" style="border-collapse: separate; color: #555555; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: arial,helvetica,clean,sans-serif; font-size: 13px; line-height: 16px; text-align: left;">What I did here is that I've added an<span class="Apple-converted-space"> </span><span style="font-style: italic;">if condition</span><span class="Apple-converted-space"> </span>to make the ads appear only on post pages. After that, follow the steps above to complete the tutorial.</span></span></div>Unknownnoreply@blogger.com13tag:blogger.com,1999:blog-5893297714399775366.post-29411956722184155842011-10-05T23:33:00.001+05:302011-10-05T23:35:36.268+05:30How To Place Adsense Below Post Title<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4Qepx2MYU5ZfDBQyMPcTxRL_w1XH3TKmMzN2EsnITV4tzOTqCAXYt9Vo2tnTpUoSX1bBDOkvu9Si1tkhCJCkD62gE_j7mf3-_6XW2voL_JYnDf23-JJDufQeM2-luvD-7pAjv8FPzIpz/s1600/How+to+Add+Adsense+Below+Posts.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4Qepx2MYU5ZfDBQyMPcTxRL_w1XH3TKmMzN2EsnITV4tzOTqCAXYt9Vo2tnTpUoSX1bBDOkvu9Si1tkhCJCkD62gE_j7mf3-_6XW2voL_JYnDf23-JJDufQeM2-luvD-7pAjv8FPzIpz/s1600/How+to+Add+Adsense+Below+Posts.jpg" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="color: #333333; font-family: Verdana,sans-serif; font-size: 12px; line-height: 18px; text-align: justify;"></span></span><br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="color: #333333; font-family: Verdana,sans-serif; font-size: 12px; line-height: 18px; text-align: justify;">Why below post title? Because it is the position with the highest CTR (click-through rate). In other words the ad placed there will bring the most money.</span></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="color: #333333; font-family: Verdana,sans-serif; font-size: 12px; line-height: 18px; text-align: justify;">According to the<span class="Apple-converted-space"> </span><b><a href="https://www.google.com/adsense/support/bin/answer.py?answer=17954" rel="nofollow" style="color: crimson; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;">Adsense ads positioning guideline</a></b><span class="Apple-converted-space"> </span>published by Google, the best performing Adsense ad position is above the primary content i.e. above the blog post. This is illustrated by the heat map on the right.</span></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="color: #333333; font-family: Verdana,sans-serif; font-size: 12px; line-height: 18px; text-align: justify;">Placing an ad below post title (above post content) is a not at all difficult. All you have to do is create an ad unit on Google Adsense website, get the code and add it to the specified location in your blog template.</span></span></div><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="color: #333333; font-family: Verdana,sans-serif; font-size: 12px; line-height: 18px; text-align: justify;"><a href="http://www.blogger.com/post-edit.g?blogID=5893297714399775366&postID=2941195672218415584" name="more" style="color: crimson; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;"></a><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;">(You can’t use Blogger’s Inline Adsense or Adsense gadget because it doesn’t have the option to add an ad under post title).</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;">Here we go,</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;"><br />
</div><h4 style="color: #10502a; font-size: 14px; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative;">1. Preparing Adsense ad code</h4><ol style="font-size: 12px; line-height: 1.5em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 6px !important; padding-left: 25px !important; padding-right: 15px !important; padding-top: 6px !important;"><li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px; text-indent: 0px;">Log in to<span class="Apple-converted-space"> </span><b><a href="https://www.google.com/adsense/" rel="nofollow" style="color: crimson; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">Google Adsense</a></b><span class="Apple-converted-space"> </span>(opens in tab/window) to create a new ad unit.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px; text-indent: 0px;">For best results choose wide ad size -either 300x250 Medium Rectangle or 336x250 Large Rectangle format. Make sure you assign a new ad channel to it for performance monitoring purposes.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px; text-indent: 0px;">When the setup is complete, you will be given a code.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px; text-indent: 0px;">Run the code through an<span class="Apple-converted-space"> </span><b><a href="http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php" style="color: crimson; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none;" target="_blank">HTML escape tool</a></b><span class="Apple-converted-space"> </span>to escape special characters in the code. The ad won’t appear if you use the original unescaped ad code.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px; text-indent: 0px;">Copy the escaped code.</li>
</ol><h4 style="color: #10502a; font-size: 14px; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative;">2. Adding ad code to the template</h4><ol style="font-size: 12px; line-height: 1.5em; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 6px !important; padding-left: 25px !important; padding-right: 15px !important; padding-top: 6px !important;"><li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px; text-indent: 0px;">Go to Dashboard > Design > Edit HTML.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px; text-indent: 0px;">Tick the Expand Widget Templates check box on top right of the HTML window.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px; text-indent: 0px;">Look for the following line in your HTML code:<pre class="brush: xml; auto-links: false; gutter: false; toolbar: false;" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><data:post.body/> </pre></li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px; text-indent: 0px;">Paste the escaped ad code right above the line, like so:<pre class="brush: xml; auto-links: false;" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><b:if cond='data:blog.pageType == &quot;item&quot;'>
PLACE AD CODE HERE
</b:if></pre><br style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" />the<span class="Apple-converted-space"> </span><b>conditional tag</b><span class="Apple-converted-space"> </span>in lines 1 and 3 will make the ad appear only on post pages. If you want the ad to appear on all pages, just remove the lines.</li>
<li style="margin-bottom: 0.25em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px; text-indent: 0px;">Save and view your blog.</li>
</ol><h4 style="color: #10502a; font-size: 14px; font-weight: bold; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: relative;">3. Monitor ad performance</h4><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;">Make sure you monitor the ad performance. Don’t automatically assume it succeeds in increasing CTR without seeing the actual results.</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;">No two blogs are the same, what works on most blogs may or may not work on yours. If you don’t see positive changes, test again with different ad types, formats, colors and/or placements.</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 4px; padding-left: 0px; padding-right: 0px; padding-top: 4px;">Enjoy!</div></span></span></div></div>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-5893297714399775366.post-36038992023075649412011-10-01T16:07:00.000+05:302011-10-01T16:07:45.183+05:30how to remove blogger navbar or hide navigation bar in blogger<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><h3>Remove or Hide blogger navbar or blogger navigation bar from your blogger blog. </h3><br />
<div style="text-align: center;"><img alt="how to hide or remove blogger navbar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwc55yCcrLgklMK81_nzOpuaCOVqoF061zwLRwF0ZTHsIbqwCo4xvsv5G7H0MbZo9MJ-WJKpK9YGSq1J4_3sc4vM0KJ_UQnDZrBxLOsT0S0L_dssLSiFo2eLTnos-lFHGro39z9c-1mGLi/s400/navbar+blogger+navigation+hide.PNG" /></div><br />
<br />
<div style="text-align: justify;"><br />
<span style="font-weight: bold;">Blogger navbar</span> or <span style="font-weight: bold;">blogger navigation bar</span> basically navigate your visitors to random <span style="font-weight: bold;">blogs</span> and have search box so your visitors can search any topic in <span style="font-weight: bold;">blogger navbar</span> or b<span style="font-weight: bold;">logger navigation bar</span> and easily left your <span style="font-weight: bold;">blog</span> by <span style="font-weight: bold;">blogger navbar</span> and reach to others <span style="font-weight: bold;">blogs</span> ( is it alright for you! ) it can not be good for you because they are your visitors who navigates through <span style="font-weight: bold;">blogger navigation bar</span> and also your visitors can marks spam your <span style="font-weight: bold;">blogger blog</span> through <span style="font-weight: bold;">blogger navbar</span> or <span style="font-weight: bold;">blogger navigation bar</span>. So it is a good idea for <span style="font-weight: bold;">remove </span>or<span style="font-weight: bold;"> hide blogger navbar</span> ( <span style="font-weight: bold;">navigation bar</span> ) from your <span style="font-weight: bold;">blogger blog </span>and also the <span style="font-weight: bold;">navigation bar</span> in to your <span style="font-weight: bold;">blogger blog</span> look like spoil and it gives you an unprofessional look of your <span style="font-weight: bold;">blogger blog </span>so <span style="font-weight: bold;">how to hide blogger navbar</span> ( <span style="font-weight: bold;">navigation bar</span> ) or <span style="font-weight: bold;">how to remove blogger navigation bar</span>, is given below.<br />
<a href="" name="more"></a></div><br />
<div class="codeadd"><br />
<span style="color: red;">Sign in to your <b>blogger</b> dashboard : </span><br />
<br />
<div style="text-align: center;"><br />
<img alt="blogger blogspot blogs tips" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh669yHFaW3svmkZVYL1LWHd09VW2jO1yZN8FhTKyamUC6s102ZjXjdo9YxfMW8W7ZS93bgoYhuv588wft30B7rxSQWHgPeewt9t-wUGVHcXBIz9kQvDew80uravZg3MXV3aaI-yDrAj6oY/s400/blogger+blog.PNG" style="background: none repeat scroll 0% 0% rgb(85, 0, 0); border-color: rgb(24, 0, 0) rgb(24, 0, 0) rgb(96, 0, 0) rgb(96, 0, 0); border-style: solid; border-width: 3px 3px 2px; padding: 5px;" /></div><br />
<br />
<br />
-- > <span style="color: #006600;">Click on Design ::</span><br />
<br />
<div style="text-align: center;"><br />
<img alt="blogger tips and tricks for navigation bar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj9-W9NQ3A7cPS94oq3OXFgbKYAHG3Y37NlrBWFObcPzo7sbxtBRe95mmpi1UV5g2kKiEZ7SIa85YtxGbbhyphenhyphen8F8pnPLZL_g5QopLdoknXii8Imy5gCEZ9_plmrcSb20Ssn9w1qIlPYZele/s400/blogger+blogging.PNG" style="background: none repeat scroll 0% 0% rgb(85, 0, 0); border-color: rgb(24, 0, 0) rgb(24, 0, 0) rgb(96, 0, 0) rgb(96, 0, 0); border-style: solid; border-width: 3px 3px 2px; padding: 5px;" /></div><br />
<br />
<br />
-- > <span style="color: #33ccff;">Click on Edit HTML ::</span><br />
<br />
<div style="text-align: center;"><br />
<img alt="how to remove navbar bar in blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhby6JCD3CHmppntfPVd8JcnvSe-NDi8rJJnk_OS5EmaSVt3bV_PeJ8kub4uSRZUMqm7yITQCrRtmb8NY4mcwQPGr8RfQNhPmyU7_YXYGZIQkJ1B485wQJdNriyqBO8LqOHv-E0cFjFTGGf/s400/blogger+how+to+tricks+tips.PNG" style="background: none repeat scroll 0% 0% rgb(85, 0, 0); border-color: rgb(24, 0, 0) rgb(24, 0, 0) rgb(96, 0, 0) rgb(96, 0, 0); border-style: solid; border-width: 3px 3px 2px; padding: 5px;" /></div><br />
<br />
<br />
-- > [Don't forget to backup your template] Check box in " <input checked="checked" type="checkbox" /> Expand Widget Templates " and find the code (using ctrl+F) <span style="color: #ff9900;">]]></b:skin></span> just before <span style="color: #ff9900;">]]></b:skin></span> code paste the below code ::</div><br />
<br />
<div class="code"><br />
#navbar {<br />
height: 0px;<br />
visibility: hidden;<br />
display: none;<br />
}</div><br />
<br />
<br />
See in picture :<br />
<br />
<div style="text-align: center;"><br />
<img alt="hide navigation bar in blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy3D7nW9w7v6yVO0ty9z1XtFIRKx42Sgwfp59YZ43vp7mVU6GVyJnYszAKH-G2Ko3W9Br0eowWvPukGjxaCs6IkzEFUM12e5sJtJmWbPeY1T4G6FFYtbc1ctWZcAE-c323uTEE6v0AjFUg/s400/blogger+navbar+navigation+hide.PNG" style="background: none repeat scroll 0% 0% rgb(85, 0, 0); border-color: rgb(24, 0, 0) rgb(24, 0, 0) rgb(96, 0, 0) rgb(96, 0, 0); border-style: solid; border-width: 3px 3px 2px; padding: 5px;" /></div><br />
<br />
<span style="color: #006600; font-weight: bold;">You done !</span><br />
<br />
</div></div>Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-5893297714399775366.post-5862030807479806062011-09-01T13:59:00.002+05:302011-09-01T14:19:12.642+05:30Greate Flash Clock Widgets for Blogger / Blogspot<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: left;">Flash clock Widgets for Blogs are simple and easy to use. Some Clocks with Preview </div><div style="text-align: center;"><br />
</div><div style="text-align: left;"><object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/226655.swf"><embed src="http://www.csalim.com/clocks/226655.swf" width="200" height="200"> </embed> </object></div></div><br />
<div style="text-align: center;"></div><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/226655.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/226655.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre></div><br />
<object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/985396.swf"><embed src="http://www.csalim.com/clocks/985396.swf" width="200" height="200"> </embed> </object><br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/985396.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/985396.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre><br />
<object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/189466.swf"><embed src="http://www.csalim.com/clocks/189466.swf" width="200" height="200"> </embed> </object><br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/189466.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/189466.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre><br />
<object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/633993.swf"><embed src="http://www.csalim.com/clocks/633993.swf" width="200" height="200"> </embed> </object><br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/633993.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/633993.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre><br />
<object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/118647.swf"><embed src="http://www.csalim.com/clocks/118647.swf" width="200" height="200"> </embed> </object><br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/118647.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/118647.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre><br />
<object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/301788.swf"><embed src="http://www.csalim.com/clocks/301788.swf" width="200" height="200"> </embed> </object><br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/301788.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/301788.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre><br />
<object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/945910.swf"><embed src="http://www.csalim.com/clocks/945910.swf" width="200" height="200"> </embed> </object></div><br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/945910.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/945910.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre><br />
<object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/267241.swf"><embed src="http://www.csalim.com/clocks/267241.swf" width="200" height="200"> </embed> </object><br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/267241.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/267241.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre><br />
<object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/119643.swf"><embed src="http://www.csalim.com/clocks/119643.swf" width="200" height="200"> </embed> </object><br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/119643.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/119643.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre><br />
<object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/548744.swf"><embed src="http://www.csalim.com/clocks/548744.swf" width="200" height="200"> </embed> </object><br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/548744.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/548744.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre></div><br />
<object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/143361.swf"><embed src="http://www.csalim.com/clocks/143361.swf" width="200" height="200"> </embed> </object><br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/143361.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/143361.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre><br />
<object height="150" width="150"> <param name="movie" value="http://www.csalim.com/clocks/205420.swf"><embed src="http://www.csalim.com/clocks/205420.swf" width="200" height="200"> </embed> </object><br />
<br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><code class="html" data-result="[object Object]" data-second_best="[object Object]"><span class="tag"><<span class="title"><span class="keyword">object</span></span> <span class="attribute">width</span>=<span class="value">"150"</span> <span class="attribute">height</span>=<span class="value">"150"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">param</span></span> <span class="attribute">name</span>=<span class="value">"movie"</span> <span class="attribute">value</span>=<span class="value">"http://www.csalim.com/clocks/205420.swf"</span>></span>
<span class="tag"><<span class="title"><span class="keyword">embed</span></span> <span class="attribute">src</span>=<span class="value">"http://www.csalim.com/clocks/205420.swf"</span> <span class="attribute">width</span>=<span class="value">"200"</span> <span class="attribute">height</span>=<span class="value">"200"</span>></span>
<span class="tag"></<span class="title"><span class="keyword">embed</span></span>></span>
<span class="tag"></<span class="title"><span class="keyword">object</span></span>></span></code></pre></div><b>Adding Clocks to blogger:</b><br />
First Sign in to your blog and go to<br />
<br />
<ol><li><b style="color: red;">Layout</b> > <b style="color: red;">Page Elements</b> > "<b style="color: red;">Add Gadget</b>" where you want.</li>
<li>Select <b><span style="color: red;">HTML/JavaScript</span></b></li>
<li> Paste Above clock code in pop up window.</li>
<li>Save and Check your Blog. </li>
</ol></div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-5893297714399775366.post-83374561546016439162011-09-01T13:29:00.002+05:302011-09-01T13:40:30.149+05:30Honehone Clock [Clock Parts Blog]<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><span class="hps"><script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js">
</script> </span></div><div style="text-align: center;"></div><div style="text-align: center;"><span class="hps">Watch</span> <span class="hps">announced</span> <span class="hps">the 17</span> <span class="hps">children</span> <span class="hps">assigned</span> <span class="hps">Osaka,</span> <span class="hps">Honehone</span> <span class="hps">clock</span><span class="">.</span> <span class="hps">The</span> <span class="hps">clock</span> <span class="hps">that</span> <span class="hps">is</span> <span class="hps">rather</span> <span class="hps">shy</span> <span class="hps">figure</span> <span class="hps">fine</span> <span class="hps">character</span> <span class="hps">like</span> <span class="hps">Mr.</span> <span class="hps">honehone.</span><br />
<span class="" id="result_box" lang="en"> <span class="hps">Only one direction</span> <span class="hps">so</span> <span class="hps">that</span> <span class="hps">not</span> <span class="hps">only made</span> <span class="hps">animation</span> <span class="hps">1 → 2 → 3 · · · 9 → 0,</span> <span class="hps">when it comes to</span> <span class="hps">00 seconds</span> <span class="hps">from</span> <span class="hps">59 seconds</span><span class="">,</span> <span class="hps">and</span> <span class="hps">when the</span> <span class="hps">attraction</span> <span class="hps">is</span> <span class="hps">at</span> <span class="hps">00 to</span> <span class="hps">24 hours.</span><br />
<br />
<span class="hps">Once</span> <span class="hps">a small</span><span class="">, well,</span> <span class="hps">I</span> <span class="hps">have</span> <span class="hps">a</span> <span class="hps">cute</span> <span class="hps">blog</span> <span class="hps">and</span> <span class="hps">I</span> <span class="hps">think</span> <span class="hps">parts</span><span class="">.</span></span><br />
<br />
<div style="text-align: center;"><b style="color: orange;">Adding This widget</b><span class="" id="result_box" lang="en"><span class=""><span style="color: orange;"> :</span></span></span></div><div style="text-align: left;"><span class="" id="result_box" lang="en"><span class=""><br />
</span></span></div><div style="text-align: left;">Now Go to your <b style="margin: 0px; padding: 0px;"><i style="margin: 0px; padding: 0px;">Dashboard >> Design >> </i></b><br />
And on your <b style="margin: 0px; padding: 0px;">page elements</b> page, click on <b style="margin: 0px; padding: 0px;">Add A Gadget</b> any where on the screen,<br />
And choose ” HTML / JavaScript ” , Leave the title empty, ant at the content area, paste the following code,</div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js">
</script> </div><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><script charset=<span style="color: #3366cc;">"Shift_JIS"</span> src=<span style="color: #3366cc;">"http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"</span>></script></pre><div style="text-align: center;"><br />
<div style="text-align: left;"><script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js">
</script> </div></div></div></div><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"><script charset=<span style="color: #3366cc;">"Shift_JIS"</span> src=<span style="color: #3366cc;">"http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"</span>></script> </pre></div><span class="" id="result_box" lang="en"><span class="hps">Hours, minutes,</span> <span class="hps">and expanding</span> <span class="hps">universal</span> <span class="hps">feature</span> <span class="hps">of seconds</span> <span class="hps">to roll over</span><span class="">?</span> <span class="hps">Month.</span></span></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5893297714399775366.post-77990239632894181032011-08-19T18:52:00.000+05:302011-08-19T18:52:46.012+05:30Make Rainbow Color Link For Blog<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZh9YUHc2h7IzV8fau7Da6R0mNric8qd79lcIeorHrbEcLE5wmqqGnIY-_W7Z1eXhIh5WewYkGl1DTChtWK3cM1dgvxxwqJCDc86cBl4yLzykVGT3MDtZPxfLUkFrdzIFahBZfdP6GYCM/s400/3Jokes_Rainbow_28.jpg" width="400" /></div><div style="font-family: Arial,Helvetica,sans-serif; text-align: justify;">Many ways are made by every blogger to make their blogs look pretty impressed, unique and various . Among the modifications to existing templates,<span class="long_text" id="result_box"><span style="background-color: white;" title="Ingin membuat link pada blog anda berkedip dan berwarna pelangi ketika tersentuh pointer?">Want to make a link on your blog and <i><b>rainbow-colored flashes when touched by a pointer?</b></i> </span><span style="background-color: #ebeff9;" title="Caranya sangat mudah">It is very easy .</span></span>Easy anyway, follow these steps:</div><ul><li style="font-family: Arial,Helvetica,sans-serif;"><span class="long_text" id="result_box"><span style="background-color: white;" title="Dalam keadaan loggin,"> </span></span><span class="long_text" id="result_box"><span style="background-color: white;" title="Dalam keadaan loggin,">In the circumstances loggin,</span></span></li>
<li style="font-family: Arial,Helvetica,sans-serif;"><span style="background-color: white;" title="Dalam keadaan loggin,"></span>Log in menu templates, </li>
<li style="font-family: Arial,Helvetica,sans-serif;"><span style="background-color: white;" title="Masuk pada menu template,"></span>Click on Edit HTML, <span class="long_text" id="result_box"></span></li>
<li><span class="long_text" id="result_box" style="font-family: Arial,Helvetica,sans-serif;"><span style="background-color: white;" title="Klik Edit HTML,"></span><span style="background-color: white;" title="Cari kode <head>,">Find <head> code,(control + F)</span></span></li>
</ul><span class="long_text" id="result_box" style="font-family: Arial,Helvetica,sans-serif;"><span style="background-color: white;" title="Cari kode <head>,">Then copy and paste the following code just below the last code:</span></span><br />
<br />
<div dir="ltr" style="text-align: left;"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><span class="fullpost"><script language='javascript' src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/LinkPelangi.js'/></span></pre></div><span class="long_text" id="result_box" style="font-family: Arial,Helvetica,sans-serif;"><span style="background-color: white;" title="Cari kode <head>,"> </span></span><span class="fullpost"><span><span style="font-family: Arial,Helvetica,sans-serif;">Save Template.and Good luck.</span></span></span></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5893297714399775366.post-9555522883235201752011-08-10T19:50:00.002+05:302011-08-10T20:05:59.975+05:30Zoom In/Out Images On Mouse Hover With Single Image<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><br />
<div align="justify"><img align="left" alt="zoom-images" border="0" height="83" src="http://lh6.ggpht.com/-Npb_2b7-tU4/TgeAfWllXAI/AAAAAAAAD9w/IZC-XJRJzIo/zoom-images_thumb%25255B8%25255D.png?imgmax=800" style="background-image: none; border-width: 0px; display: inline; float: left; margin: 0px 6px 0px 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="zoom-images" width="250" /> </div><div align="justify">There are many tutorials online which show users how to achieve a hover effect on their buttons and other images using mouse hover and they often instruct to use a second, larger image. Another method used is using jQuery to enlarge the size of the image. But with a little bit of trickery, this can be done solely using Css3 and normal html. </div></div><br />
Note : This trick is best viewed in the latest version of any browser other than IE. <br />
This tutorial has been split into two parts: <br />
<ol><li>CSS implementation </li>
<li>HTML Implementation </li>
</ol><h3>CSS implementation: </h3>1. Go To Blogger > Design > Edit HTML <br />
2. and search for<br />
<br />
<div dir="ltr" style="text-align: left;"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 148px;">]]></b:skin></pre></div><div align="justify">3. Now right above it, paste this code:<br />
<br />
<br />
<div dir="ltr" style="text-align: left;"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;">/*------- MBT ZOOM-OUT ZOOM-IN -------*/
.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mbtzoom:hover {
zoom: 2;
text-enlarge: 2;
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
} </pre></div><div align="justify">Same procedure as the other option, edit the values to your picture, and change the zoom to how big you want the picture after the transition. <br />
<h3>HTML Implementation: </h3>Now whenever you wish to apply the zoom effect to any image you want simply use this code,</div></div><div dir="ltr" style="text-align: left;"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><a href="<span style="color: red;"><b>URL OF PAGE</b></span>" class="mbtzoom"><img <span style="background-color: yellow;">width="60px" height="60px"</span> src="<b>IMAGE LINK</b>" alt="back to top" /></a></pre></div><div align="justify"></div></div><ul><li>Replace <span style="color: red;"><b>URL OF PAGE</b></span> with the page link. On clicking the image the user will be taken to that page </li>
<li>Replace <b>IMAGE LINK</b> with the link of the picture </li>
<li>Make sure to Keep <span style="background-color: yellow;">width</span> and <span style="background-color: yellow;">height</span> equal to half the size of original image. For example if the image size is 100px by 100px then set width="50px" and height="50px" </li>
</ul><br />
That’s it! Your image should be zooming/enlarging beautifully on your blog/website!<br />
<h3>DEMO</h3>As a DEMO simply paste this code on MBT HTML Editor<br />
<br />
<style>
.mbtzoom {
padding:5px;
position:fixed;
bottom: 35px;
right:10px;
cursor: pointer;
text-decoration: none;
border: 0px solid transparent;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mbtzoom:hover {
zoom: 2;
text-enlarge: 2;
-moz-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
}
</style><br />
<a class="mbtzoom" href="http://www.blogger.com/post-edit.g?blogID=5893297714399775366&postID=955552288323520175#"><img alt="back to top" height="60px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnfD9zu8f7w1F0bEMZOLh2i9P44Wc3ss3YrUv0Ygy5zBNiGllk2p1eJacNYcLXCuSXQ3Gp41Au2wgzv77i-O0PCAHUHA7fUJOrk0UuttneBbWt4AiqH_GFhQpgfOTfjR00myB7pv4u8yo/s800/rss-128.png" width="60px" /></a><br />
<div align="justify"></div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5893297714399775366.post-22309392412236881112011-08-10T18:36:00.003+05:302011-08-19T18:52:37.217+05:30Change Text Selection Highlighting Color in blogs<div dir="ltr" style="text-align: left;" trbidi="on"><table border="0"><tbody>
<tr><td></td> <td><div style="margin-right: 25px;"></div></td> <td><div style="margin-right: 5px;"></div></td> <td></td> </tr>
</tbody></table><br />
<div align="justify"><img align="left" alt="image" height="47" src="http://lh6.ggpht.com/-EYj8sm3ophU/TgIfqZNqCvI/AAAAAAAAD7U/RpatMCQ8EBU/image%25255B16%25255D.png?imgmax=800" style="display: inline; float: left; margin: 0px;" title="image" width="347" />Another way to stand out from the crowd is to have a customized blog <span style="color: green;"><b>Text Highlighting color</b></span>. This can ensure that when users highlight text on your blog, it matches your blog’s theme, and may also look professional at the same time.</div><div align="justify"><br />
</div><div align="justify"><br />
</div><h3>Styling Text Highlight color In Blogger</h3><br />
1. Go To Blogger > Design > Edit HTML <br />
2. and search for ]]></b:skin> <br />
3. Right above it, paste this code:<br />
<br />
<div dir="ltr" style="text-align: left;"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;">::-moz-selection {
Background: <span style="color: #d16349;"><b>#EB7F17</b></span>;
color: <b>#FFFFFF</b>;
text-shadow: none;
}
::selection {
background: <span style="color: #d16349;"><b>#EB7F17</b></span>;
color: <b>#FFFFFF</b>;
text-shadow: none;
}</pre></div><div align="justify"><br />
</div>Make these changes:<br />
<ul><li>Replace <span style="color: #d16349;"><b>#EB7F17 </b></span>with the highlight color </li>
<li>Replace <b>#FFFFFF</b> with the Font color. By default the font color appears white. </li>
</ul>You can choose a color using the <a href="http://www.mybloggertricks.com/2008/01/color-code-generator-and-color-wheel.html" target="_blank">HexaDecimal</a> Color Generator <br />
Once you have entered your preferred color code, save your template, and see the difference! <br />
Have fun blogging!</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5893297714399775366.post-82129943315505014332011-08-10T00:37:00.005+05:302011-08-21T23:50:33.689+05:30Multi Column Footer Widget For Blogger –The Hot!<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><img alt="Multi-Column-Footer Widget For Blogger" border="0" height="311" src="http://lh6.ggpht.com/_7wsQzULWIwo/TRz4ULldSMI/AAAAAAAADOc/uX5tVbJpXlw/Multi-Column-Widget%5B10%5D.gif?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="Multi-Column-Footer Widget For Blogger" width="580" /> <br />
<div align="justify">We had previously shared a tutorial on Three Column Footer Widget which was well appreciated and today we have yet another more advanced version of the same widget. This new widget can become three column, four column or with as many columns as you wish. Further this new footer widget has some great CSS effects added to it which makes it even better. First see a demo to know what’s so different about it.</div><div align="justify"><br />
</div><div align="justify"><br />
</div><h4>How To Add the Multi Column Footer Widget To <a href="http://blogger.com/" target="_blank">Blogger</a>?</h4>First we will add the CSS code to your blogger templates and then the HTML. So without wasting any time lets jump straight to the steps,<br />
<ol><li>Go To Blogger > Design > Edit HTML </li>
<li>Backup Your Template </li>
<li>Search for ]]></b:skin> </li>
<li>Just above ]]></b:skin> paste the code below, </li>
</ol><br />
<div dir="ltr" style="text-align: left;"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><span class="fullpost"><blockquote><span class="fullpost"></span>
<blockquote> /*----- MBT MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
<strong><span style="color: green;">width: 960px;</span></strong>
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
<strong><span style="color: #0080ff;">width: 23%;</span></strong>
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}</blockquote></blockquote></span></pre></div></div><span class="fullpost">5. Now search for </body> and paste the following code just above </body></span><br />
<br />
<div dir="ltr" style="text-align: left;"><div dir="ltr" style="text-align: left;"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><span class="fullpost"><blockquote><div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='<strong>lowerbar1</strong>' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='<strong>lowerbar2</strong>' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='<strong>lowerbar3</strong>' preferred='yes'>
</b:section>
</div>
<span style="color: green;"><div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='<strong>lowerbar4</strong>' preferred='yes'>
</b:section>
</div></span>
<span style="color: purple;"><strong><div style='clear: both;'/></strong></span>
</div> </div>
</blockquote></span></pre></div></div>6. Save your template and you are done!<br />
Now go to <b>Page Elements</b> and add your widgets to the newly added Footer Widget that will look something like this,<br />
<img alt="image" border="0" height="71" src="http://lh6.ggpht.com/_7wsQzULWIwo/TRz4V7Ua7kI/AAAAAAAADOg/Psg62eZAZ_g/image%5B18%5D.png?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="image" width="572" /> <br />
<div align="justify">You can observe that there a total of four columns by default and you can add as many widgets as you want to each column. If you wish to increase or decrease the number of vertical columns then follow the steps below.</div><h4>How to Customize the Widget?</h4><div align="justify">Well I will keep it simple. I think the colors and overall size and padding and margining are just perfect. The only thing that you will need to adjust according to your template is the width of the widget and the number of vertical columns. </div>1. In order to reduce or increase the overall width of the widget simply change <b><span style="color: green;">width: 960px;</span></b> <br />
2. If you wish to decrease the number of widgets to three then simply delete this part of the code,<br />
<br />
<br />
<div dir="ltr" style="text-align: left;"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><span class="fullpost"><span style="color: green;"><div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='<b>lowerbar4</b>' preferred='yes'>
</b:section>
</div></span></span></pre></div><span class="fullpost">3. Or if you wish to add an extra column then add the code below just above <span style="color: purple;"><b><div style='clear: both;'/></b></span></span><br />
<br />
<div dir="ltr" style="text-align: left;"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><span class="fullpost"><div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='<b>lowerbar#</b>' preferred='yes'>
</b:section>
</div></span></pre></div><br />
Remember that <b>lowerbar#</b> refers to the column number. So if you want to add a fifth column then simply replace <b>lowerbar#</b> with <b>lowerbar5. </b><br />
After you have added the fifth column then remember to change <b><span style="color: #0080ff;">width: 23%;</span></b> with <b><span style="color: #0080ff;">width: 17%;</span></b><br />
You will repeat step 3 for as many columns as you wish to create. But three and four and five columns are a standard. Increasing them will make things look ugly.<br />
<br />
<div align="center"><span style="color: #0080ff;"><b>That’s it! Enjoy</b></span></div><br />
</div>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-5893297714399775366.post-83510005163750649732011-08-09T20:02:00.001+05:302011-08-10T00:44:52.579+05:30Beautiful New Page Navi For Blogger With Scroll<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><div style="margin-bottom: 1.3em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Bismillah (in the Name of Allah), Alhamdulillah (All Praise to Allah)<br />
After Long time not post in my Blog. I didna’t post anything because I was busy for my Dissertation for my Doctor Defense. Alhamdulillah now I’m graduated (not in web designer, my major is not related with web designer)<br />
<a href="http://www.blogger.com/post-create.g?blogID=5893297714399775366" name="more"></a><br />
Now I want to give all of you beautiful Page Navigation. Like I said before in my comment I’ll make new Page Navigation that can support more than 500, and now this Page Navigation can support more than 500, Alhamdulillah.<br />
To make it beautiful I used New Pugin from WP <a href="http://wordpress.org/extend/plugins/paginator/" style="color: #ff4d00; text-decoration: none;" target="_blank">Paginator</a><br />
This Plugin call Paginator 3000<br />
- idea by ecto (<a href="http://ecto.ru/" style="color: #ff4d00; text-decoration: none;" target="_blank">ecto.ru</a>)<br />
- coded by karaboz (<a href="http://karaboz.ru/" style="color: #ff4d00; text-decoration: none;" target="_blank">karaboz.ru</a>)<br />
To see the result open This</div><div style="background-color: orange; margin: 0px 0px 1.3em; padding: 0px;"><a class="button orange2" href="http://demo-paginator3000-abu-farhan.blogspot.com/" style="-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 1px 2px; background-attachment: initial; background-clip: initial; background-color: initial; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(250, 165, 26)), to(rgb(244, 122, 32))); background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: white !important; border-bottom-left-radius: 0.5em 0.5em; border-bottom-right-radius: 0.5em 0.5em; border-bottom-style: solid !important; border-bottom-width: 2px !important; border-left-color: white !important; border-left-style: solid !important; border-left-width: 2px !important; border-right-color: white !important; border-right-style: solid !important; border-right-width: 2px !important; border-top-color: white !important; border-top-left-radius: 0.5em 0.5em; border-top-right-radius: 0.5em 0.5em; border-top-style: solid !important; border-top-width: 2px !important; color: #fef4e9; cursor: pointer; display: inline-block; font: normal normal normal 14px/100% Arial, Helvetica, sans-serif; margin-bottom: 0px; margin-left: 2px; margin-right: 2px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 0.55em; padding-left: 2em; padding-right: 2em; padding-top: 0.5em; text-align: center; text-decoration: none; text-shadow: rgba(0, 0, 0, 0.296875) 0px 1px 1px; vertical-align: baseline; zoom: 1;" target="_blank">Demo</a></div> </div><div style="text-align: center;"><br />
<div style="margin-bottom: 1.3em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><img alt="Paginator3000" src="http://www.abu-farhan.com/wp-content/uploads/2009/12/Paginator3000.JPG" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="Paginator3000" /></div><h3 style="clear: both; font-family: Calibri, 'Helvetica Neue', 'Liberation Sans', sans-serif; font-size: 1.6em; font-weight: 400; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Step 1 : Apply Style</h3><ol style="list-style-type: decimal; margin-bottom: 1.5em; margin-left: 2.5em; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Login to Blogger Dashboard and navigate to <b style="font-weight: 700;">Layout > Edit Html</b></li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Dona’t click the checkbox which says “Expand Widget Templates”</li>
<li style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Find this</li>
</ol><pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; overflow-x: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; white-space: pre-wrap; word-wrap: break-word;"><span style="background-color: #eeeeee;">]]></b:skin></span>
</pre><div style="margin-bottom: 1.3em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">and replace it with</div><div style="margin: 0px 0px 1.3em; padding: 0px;"><br />
<div dir="ltr" style="text-align: left;"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><code style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; margin-bottom: 0px; margin-left: 2px; margin-right: 2px; margin-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 3px; padding-top: 0px;">.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwyNUmtstc5ZzhbmsrVzapf9z_rwkvKJs0qKdlyiXeho6k7P_hJQFZyF67birVvg8R0BR0NLSbcXdq1lQbhQrbmuF63li6TGr9S4pGoY2qNRowy3R6XOZmBAjEMRdFOWhYlgtRPB1IZ_M/s1600/slider_knob.gif) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
]]></b:skin></code></pre></div></div></div><div style="text-align: center;"><br />
<h3 style="clear: both; font-family: Calibri, 'Helvetica Neue', 'Liberation Sans', sans-serif; font-size: 1.6em; font-weight: 400; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Step 2 : Aplly Javascript</h3><div style="margin-bottom: 1.3em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Find This :</div><pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; overflow-x: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; white-space: pre-wrap; word-wrap: break-word;"></body>
</pre><div style="margin-bottom: 1.3em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Replace with :</div><br />
<div dir="ltr" style="text-align: left;"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><code style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; margin-bottom: 0px; margin-left: 2px; margin-right: 2px; margin-top: 0px; padding-bottom: 0px; padding-left: 3px; padding-right: 3px; padding-top: 0px;"><script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</body></code></pre></div><div style="margin-bottom: 1.3em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Change based on your blog setting :<br />
var postperpage=7;<br />
var numshowpage=6;</div><div style="margin-bottom: 1.3em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Postperpage : How many Post every Page for your blog<br />
numshowpage : how Many number will show in Your page Navigation</div><h3 style="clear: both; font-family: Calibri, 'Helvetica Neue', 'Liberation Sans', sans-serif; font-size: 1.6em; font-weight: 400; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)</h3><div style="margin-bottom: 1.3em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Go to the Edit HTML page and <b style="font-weight: 700;">“Expand Widget Templates”</b><br />
Find this</div><pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; overflow-x: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; white-space: pre-wrap; word-wrap: break-word;">'data:label.url'
</pre><div style="margin-bottom: 1.3em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">and Replace with this</div><pre style="background-attachment: initial; background-clip: initial; background-color: #eeeeee; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Consolas, Monaco, 'Courier New', Courier, monospace; overflow-x: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; white-space: pre-wrap; word-wrap: break-word;">'data:label.url + &quot;?&amp;max-results=7&quot;'
</pre><div style="margin-bottom: 1.3em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Change 7 base on how many post every page</div><div style="margin-bottom: 1.3em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">only That, I hope it can work and make your blog easy to navigate, amiin</div></div></div>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-5893297714399775366.post-51177902793357168222011-04-30T23:32:00.004+05:302011-08-09T20:02:15.861+05:30Cool Animated Effect For Labels List Gadget In Blogger<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"></div><div class="post-header-line-1"><span style="background-attachment: scroll; background-color: transparent; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfy-E5R0ak23NW9U-0avFA_JUVYV5xv6ECSIgpXHyoia8DEThDYximGHUR8mHJzB1fiHgk1ma3X-4tY3BsiF8BKog9WuKCQQ4NlG3FJAqSN_7X20a60kKWFlfldwUssb1xg1QOpxW70eI/s1600/icon_tags.png"); background-position: 0% 0%; font-size: 11px; padding-left: 25px;"><a href="http://www.spiceupyourblog.com/search/label/Tricks?max-results=8" rel="tag"></a> </span> </div><div class="post-body entry-content"><div style="float: left; font-weight: bold; margin-right: 5px;"><br />
<span class="st_blogger_hcount" displaytext="Blogger"></span><br />
<span class="st_delicious_hcount" displaytext="Delicious"></span><br />
<span class="st_stumbleupon_hcount" displaytext="Stumbleupon"></span><br />
<span class="st_sharethis_hcount" displaytext="ShareThis"></span> </div><span class="Apple-style-span" style="margin-bottom: 1em; margin-left: 1em;"><b><img alt="jquery blogger effect" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwW6LMgosYpygZbARoCzCyauVM8vLLcJbLMqD_12mTG7HatUtDKYfSaipJfvzT2f4OEOBlUtuAae2k3eB1phRmcJugXzLvbyQIP3QLJumXtIqTQvsWEG4XZo9w0qhiXpsRi6CeRteYm6FU/s320/jquery-blogger-tricks-hacks.jpg" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" width="200" /></b></span><br />
<div style="font-family: Verdana, sans-serif;">In this post we have a fun effect you can add to the links in your blog labels list.This trick has been around for a while and i have been using it on some other blogs.The effect is created using jQuery and basically when a visitor places their cursor over a link it moves across horizontally.So in the same manner you might have links change color, underline or change background on hover this will make them move.</div></div></div><h2 style="color: #990000; text-align: center;">Add Animated Link Lists To Your Blog</h2><br />
<div style="text-align: center;"><div style="text-align: left;"><b>Step 1.</b> In your Blogger dashboard click > Design > Edit Html </div></div><div style="text-align: center;"><div style="text-align: left;"><img alt="Design Edit Html Blogger" border="0" class="effect11" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpqd-wmsTHB_6jT0N1t-6fU_-n-H7_810rhAn_7G8hbL4zfHIMsBg7mNGz-1FJ_0bsMt7FnQIjmxRtmyGerLDQwiOwV2CcyEey9ueUfQtGV_C1Id5UdbBzs6SB5dRaXTitfX8NStxIOEqa/s400/design-edit-html-blogger.jpg" width="400" /></div></div><br />
<div style="text-align: left;"><b>Step 2.</b> Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code -)</div><br />
<blockquote></head></blockquote><br />
<b>Step 3. </b>Copy And Paste The Following Code Directly Above / Before </head><br />
<br />
</div><div dir="ltr" style="text-align: left;" trbidi="on"><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><!--Animated Label Links For Blogger
http://www.spiceupyourblog.com--><script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'
type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script><!--End Animated Label Links For Blogger http://www.spiceupyourblog.com--></pre><div style="margin: 0px; padding: 0px;"></div></div><b>Step 4.</b> Save Your Template.</div>Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-5893297714399775366.post-30734167882598470002011-04-13T09:43:00.007+05:302011-04-30T23:35:01.299+05:30Add Beautiful Drop-Down Menu For Blogger<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-elT31hqr8-8/TaUiQ_OnKCI/AAAAAAAAAko/8xG_3q99EPw/s1600/blogger-drop-down-menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="255" src="http://4.bp.blogspot.com/-elT31hqr8-8/TaUiQ_OnKCI/AAAAAAAAAko/8xG_3q99EPw/s320/blogger-drop-down-menu.jpg" width="320" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><span class="Apple-style-span" style="color: #7d7d7d; font-family: Verdana; font-size: 12px;"></span></div><div style="margin: 0px; padding: 0px;">Recently a lot of my loyal visitors asked me about the ability to add an easy and beautiful drop-down menu for blogger,<br />
<span id="more-9937" style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></span>So today we will learn how to add a drop down menu for blogger and a very easy way,<br />
This menu is compatible with most of modern and classic browsers, and can be added for any template in only 3 steps,<br />
but please remember,</div><div class="announce2" style="background-color: #feedb9; border: 1px solid rgb(251, 195, 24); color: #7d7d7d; margin: 15px 0px 0px; padding: 5px; width: 460px;">Don’t forget to <b style="margin: 0px; padding: 0px;">backup </b>your current blogger template, ( by downloading it )</div><div class="sprtr" style="background-color: #fdf8aa; border: 1px solid rgb(252, 217, 84); height: 2px; margin: 25px 0px 10px; padding: 0px; position: relative; width: 589px;"></div><div class="heads" style="color: #d35b25; font-family: 'Century Gothic',sans-serif; font-size: 22pt; font-weight: normal; margin: 0px 0px 10px; padding: 0px;">1. Add The Menu CSS</div><div style="margin: 0px; padding: 0px;">Go to your blogger account,<br />
Navigate to <b style="margin: 0px; padding: 0px;"><i style="margin: 0px; padding: 0px;">Dashboard >> Design >> Edit Html ></i></b><br />
And find the following code,</div><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;">]]></b:skin></pre><div style="margin: 0px; padding: 0px;">And before it, add the following css code,</div><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;">#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}
</pre><div class="sprtr" style="background-color: #fdf8aa; border: 1px solid rgb(252, 217, 84); height: 2px; margin: 25px 0px 10px; padding: 0px; position: relative; width: 448px;"></div><div class="heads" style="color: #d35b25; font-family: 'Century Gothic',sans-serif; font-size: 22pt; font-weight: normal; margin: 0px 0px 10px; padding: 0px;">2. Adding the Java codes</div><div style="margin: 0px; padding: 0px;">At the same page, find the next code,</div><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 460px;"></head></pre><div style="margin: 0px; padding: 0px;">Then add this code exactly before it,</div><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>
</pre><div style="margin: 0px; padding: 0px;">Now Click <b style="background-color: #ff7700; border: 1px solid rgb(153, 51, 0); color: white; margin: 2px; padding: 2px;">Save Template</b></div><div class="sprtr" style="background-color: #fdf8aa; border: 1px solid rgb(252, 217, 84); height: 2px; margin: 25px 0px 10px; padding: 0px; position: relative; width: 448px;"></div><div class="heads" style="color: #d35b25; font-family: 'Century Gothic',sans-serif; font-size: 22pt; font-weight: normal; margin: 0px 0px 10px; padding: 0px;">3. Adding The Menu To Your Blog</div><div style="margin: 0px; padding: 0px;">Now Go to your <b style="margin: 0px; padding: 0px;"><i style="margin: 0px; padding: 0px;">Dashboard >> Design >> </i></b><br />
And on your <b style="margin: 0px; padding: 0px;">page elements</b> page, click on <b style="margin: 0px; padding: 0px;">Add A Gadget</b> any where on the screen,<br />
And choose ” HTML / JavaScript ” , Leave the title empty, ant at the content area, paste the following code,</div><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="http://blogwidgetbox.blogspot.com">Blog Widgetbox</a></li>
</li></ul>
</pre><div style="margin: 0px; padding: 0px;">And click <b style="background-color: #ff7700; border: 1px solid rgb(153, 51, 0); color: white; margin: 2px; padding: 2px;">Save</b><br />
Now, it’s important to move the new gadget from the current place to the top of your page, if it was on the sidebar, or footer, just drag it to your page header or above your posts area, and click And click <b style="background-color: #ff7700; border: 1px solid rgb(153, 51, 0); color: white; margin: 2px; padding: 2px;">Save</b> again,<br />
Now go to view your blog and enjoy your new blogger drop-down menu.<br />
<b style="margin: 0px; padding: 0px;">Note : </b><i style="margin: 0px; padding: 0px;">In step 3, you must change the menu titles and replace all # letters by the right menu url.</i></div></div>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-5893297714399775366.post-84425161726226138772011-03-23T15:31:00.000+05:302011-03-23T15:31:16.965+05:30Three Column Minima (Layout Version)<div dir="ltr" style="text-align: left;" trbidi="on"><span class="Apple-style-span" style="color: #333333; font-family: Georgia, serif; line-height: 20px;">I started this blog because, like everyone who gets into blogging, I wanted to add a third column to my Minima template. Sadly, I also knew absolutely nothing about HTML, and nowhere could I find instructions that were all in one place and easy to understand. Three Column Blogger was then born.<em><span style="color: red;">Update 1/2/10: Thank you all so much for your great comments, encouragement and suggestions. There are now over 300 comments, and Blogger has appended them - you'll need to click on the "more comments" link at the bottom of the page to post a comment or read new replies. I still read all of the comments, and I try to incorporate your suggestions into the main post. This has become a better resource for all as a result. As always, links are appreciated. Cheers!</span></em></span><br />
<span class="Apple-style-span" style="font-family: Georgia, serif;"></span><br />
<div class="post-body" style="color: #333333; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div align="justify" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
These instructions are simple and easy, and you can do it if you don't know the first thing about HTML (which is perfect, because I don't). Minima is one of the simplest templates to modify, and it's also easy on the eyes, so both readers and bloggers like it.<br />
<br />
This post is for adding a third column to Minima in "Layout Version". To check which version you're using, go into your dashboard and look just to the left of the "View Blog" link on the top left of the page. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are a bit different. But don't worry, I've posted instructions for three column Minima in Classic Template version here.<br />
<br />
So let's get started! First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. You will see a bunch of gobbledygook and gobbledygook it shall remain - you don't need to know anything about it. Just scroll down through the code until you see :<br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">/* Header</span><br />
<span class="Apple-style-span" style="font-size: x-small;">-----------------------------------------------</span><br />
<em style="font-size: small;">(Note: you can also use your browser's control F (CTRL+F) command to search for this section. Just type in /* Header and then click the "next" button)</em><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">Now, change the width of the "header-wrapper" from 660 to 940;</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">#header-wrapper {</span><br />
<span class="Apple-style-span" style="font-size: x-small;">width:660px; </span><span style="color: red; font-size: x-small;"><-------change to 940</span><br />
<span class="Apple-style-span" style="font-size: x-small;">margin:0 auto 10px;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">>border:1px solid $bordercolor;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">}</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">That piece of code should now look EXACTLY like this:</span><br />
<br />
<span style="color: #000099; font-size: x-small;">#header-wrapper {<br />
width:<span style="color: red;">940</span>px;<br />
margin:0 auto 10px;<br />
border:1px solid $bordercolor;<br />
}</span><br />
<span class="Apple-style-span" style="font-size: x-small;">Also, at the bottom of the same Header section, change the max-width from 660 to 940:</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">#description {</span><br />
<span class="Apple-style-span" style="font-size: x-small;">margin:0 5px 5px;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">padding:0 20px 20px;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">border:1px solid #eee;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">border-width:0 1px 1px;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">max-width:660px;</span><span style="color: red; font-size: x-small;"><-------change to 940</span><br />
<span class="Apple-style-span" style="font-size: x-small;">font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">text-transform:uppercase;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">letter-spacing:.2em;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">color:#999;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">}</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">That piece of code should now look like this:</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">#description {</span><br />
<span class="Apple-style-span" style="font-size: x-small;">margin:0 5px 5px;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">padding:0 20px 20px;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">border:1px solid #eee;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">border-width:0 1px 1px;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">max-width:</span><span style="color: red; font-size: x-small;">940</span><span class="Apple-style-span" style="font-size: x-small;">px;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">text-transform:uppercase;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">letter-spacing:.2em;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">color:#999;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">}</span><br />
<br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">So far so good. Next, scroll down (or use CTRL+F) to where it says:</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">/* Outer-Wrapper</span><br />
<span class="Apple-style-span" style="font-size: x-small;">----------------------------------------------- */</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">Now, just like you did in the Header above, change the "outer-wrapper" width from 660 to 940, and (2) change the "main-wrapper" width from 410 to 500</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">#outer-wrapper {</span><br />
<span class="Apple-style-span" style="font-size: x-small;">width: 660px; </span><span style="color: red; font-size: x-small;"><-------change to 940</span><br />
<span class="Apple-style-span" style="font-size: x-small;">margin:0 auto; padding:10px;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">text-align:$startSide;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">font: $bodyfont;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">}</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">#main-wrapper {</span><br />
<span class="Apple-style-span" style="font-size: x-small;">width: 410px; </span><span style="color: red; font-size: x-small;"><-------change to 500</span><br />
<span class="Apple-style-span" style="font-size: x-small;">float: $startSide;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */</span><br />
<span class="Apple-style-span" style="font-size: x-small;">}</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">Next, take this new block of code (in red) and paste it in exactly as it appears directly in between the "outer-wrapper" code and "main-wrapper" code. It's helpful to use "CTRL C" to copy, and then "CTRL V" to paste, if you didn't already know that trick. Regardless of how you do it, you must paste it in between these two code blocks, nowhere else. </span><em style="font-size: small;"><span style="color: red;">Update: the Google Gremlins may let some of you get away with using "left" instead of "$startSide" and "right" instead of "$endSide".</span></em><br />
<div style="border-bottom-color: rgb(101, 115, 131); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(101, 115, 131); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(101, 115, 131); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(101, 115, 131); border-top-style: solid; border-top-width: 1px; font-size: small; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; width: 400px;"><br />
<span style="color: red;">#left-sidebar-wrapper {<br />
width: 220px;<br />
float: $startSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}</span></div><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">The new code block should look exactly like this:</span><br />
<br />
<div style="border-bottom-color: rgb(101, 115, 131); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(101, 115, 131); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(101, 115, 131); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(101, 115, 131); border-top-style: solid; border-top-width: 1px; font-size: small; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; width: 400px;"><br />
<span style="color: #000099;">#outer-wrapper {<br />
width: 940px;<br />
margin:0 auto;<br />
padding:10px;<br />
text-align:$startSide;<br />
font: $bodyfont;<br />
}</span><span style="color: red;"><br />
#left-sidebar-wrapper {<br />
width: 220px;<br />
float: $startSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}</span><span style="color: #000099;"><br />
#main-wrapper {<br />
width: 500px;<br />
float: $startSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}<br />
<br />
#sidebar-wrapper {<br />
width: 220px;<br />
float: $endSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}<br />
</span></div><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">Then scroll way down the page to the footer section (or use CTRL F), it looks like this:</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">/* Footer</span><br />
<span class="Apple-style-span" style="font-size: x-small;">----------------------------------------------- */</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">Change the width of the "footer" from 660 to 940.</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">#footer {</span><br />
<span class="Apple-style-span" style="font-size: x-small;">width:660px; </span><span style="color: red; font-size: x-small;"><-------change to 940</span><br />
<span class="Apple-style-span" style="font-size: x-small;">clear:both;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">margin:0 auto; 10px</span><br />
<span class="Apple-style-span" style="font-size: x-small;">padding-top:15px;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">line-height: 1.6em;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">text-transform:uppercase;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">letter-spacing:.1em;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">text-align: center;</span><br />
<span class="Apple-style-span" style="font-size: x-small;">}</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">At this point, believe it or not, there are only two more steps. This particular step is hard only because you need to make sure you paste the additional code in the right spot, and this next spot can be a hard place to identify (CTRL+F helps here a lot).</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">Anyway, in the same footer section that you're now in, scroll down until you see:</span><br />
<br />
<div style="border-bottom-color: rgb(101, 115, 131); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(101, 115, 131); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(101, 115, 131); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(101, 115, 131); border-top-style: solid; border-top-width: 1px; font-size: small; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 250px;"><br />
<div align="left" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span style="color: #000099;"><div id='content-wrapper'></span></div></div><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">Then, locate the the "main wrapper" id a few lines below it. It looks like this:</span><br />
<br />
<div style="border-bottom-color: rgb(101, 115, 131); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(101, 115, 131); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(101, 115, 131); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(101, 115, 131); border-top-style: solid; border-top-width: 1px; font-size: small; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 250px;"><br />
<div align="left" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span style="color: #000099;"><div id='main-wrapper'></span></div></div><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">Now, just above the "main wrapper" id, paste in the following code EXACTLY as it appears below:</span><br />
<br />
<div style="border-bottom-color: rgb(101, 115, 131); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(101, 115, 131); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(101, 115, 131); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(101, 115, 131); border-top-style: solid; border-top-width: 1px; font-size: small; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; width: 400px;"><br />
<div align="left" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span style="color: red;"><div id='left-sidebar-wrapper'><br />
<b:section class='sidebar' id='left-sidebar' preferred='yes'><br />
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/><br />
</b:section><br />
</div></span></div></div><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">Note: this will also temporarily insert the Blogger logo button into your new sidebar, but you can delete that and add the widget of your own choice after you finish adding the column. </span><span style="color: red; font-size: x-small;"><em>Update: If you get an error message that says the widget ID should be unique, you have an existing blogger button already loaded in your original sidebar and you'll have to delete that one temporarily. But don't worry, you can customize all of your sidebars when you get them all set up.</em></span><span class="Apple-style-span" style="font-size: x-small;"> If not, there's no need to worry about it - the button is just a placeholder and you can replace and rearrange all of your widgets when you finish.</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">So, after you do that, the newly modified section should now look like this:</span><br />
<br />
<div style="border-bottom-color: rgb(101, 115, 131); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(101, 115, 131); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(101, 115, 131); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(101, 115, 131); border-top-style: solid; border-top-width: 1px; font-size: small; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; width: 400px;"><br />
<div align="left" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span style="color: #000099;"><div id='content-wrapper'><br />
<br />
<div id='crosscol-wrapper' style='text-align:center'><br />
<b:section class='crosscol' id='crosscol' showaddelement='no'/><br />
</div></span><span style="color: red;"><br />
<div id='left-sidebar-wrapper'><br />
<b:section class='sidebar' id='left-sidebar' preferred='yes'><br />
<b:widget id='Gadget1' locked='false' title='Geo IP Tool' type='Gadget'/><br />
</b:section><br />
</div></span><br />
<span style="color: #000099;"><br />
<div id='main-wrapper'></span></div></div><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">And you are a now master Minima coder, because you're done! Hit preview to see your new three column Minima layout, and then save the template. Now you can go into the "Layouts" and add a new google gadget of your choice. You can also read this article </span>for instructions on how to adjust your margins<span class="Apple-style-span" style="font-size: x-small;">to make more space in between your columns.</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">If you have any trouble with your "nav bar" or would simply like to turn it off, insert the following code (in red) exactly where I have placed it:</span><br />
<br />
<div style="border-bottom-color: rgb(101, 115, 131); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(101, 115, 131); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(101, 115, 131); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(101, 115, 131); border-top-style: solid; border-top-width: 1px; font-size: small; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; width: 400px;"><br />
<div align="left" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span style="color: #000099;"><br />
Blogger Template Style<br />
Name: Minima<br />
Designer: Douglas Bowman<br />
URL: www.stopdesign.com<br />
Date: 26 Feb 2004<br />
Updated by: Blogger Team<br />
----------------------------------------------</span><span style="color: red;"><br />
#navbar-iframe {<br />
display: none !important;<br />
}<br />
</span></div></div><br />
<span class="Apple-style-span" style="font-size: x-small;">Best of luck with your blogging. If this post was helpful, I would really appreciate a link. If you would like to create a link in one of your posts or on your blogroll but are unsure how to do it, just insert this html string in your post text:</span></div><span style="color: red; font-size: x-small;"><br />
</a href="http://www.threecolumnblogger.com/">Three Column Blogger</a> </span><br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">It will appear in your post text/blogroll as </span>Three Column Blogger<br />
<br />
<span class="Apple-style-span" style="font-size: x-small;">Thanks!!</span><div style="clear: both; font-size: small; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0.25em;"></div><div class="blogger-labels" style="font-size: small;">Labels: 3 Column Blogs, Three Column Minima</div></div></div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5893297714399775366.post-88732336151811145132011-03-23T15:25:00.001+05:302011-03-23T15:28:39.563+05:30Adjusting Three Column Margins in Layout<div dir="ltr" style="text-align: left;" trbidi="on"><span class="Apple-style-span" style="color: #333333; font-family: Georgia, serif; line-height: 20px;">In the earlier related post, your faithful servant showed you how to turn your free two column Minima Blogger template into a three column Minima template. After you get your three columns all set up, you'll probably want to adjust your margins. Your blog will be fine without this step, but you'll probably notice that your columns appear "squished" in together. Have no fear, it's easy to fix, and once you learn how you can customize your blog's look to almost any desire.</span><br />
<span class="Apple-style-span" style="color: #333333; font-family: Georgia, serif;"></span><br />
<div class="post-body" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div align="justify" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
This post is for adjusting margins in "Layout Version". If you forgot which version you're using, just go into your dashboard and look to the left of the "View Blog" link. If the tab there says "Layout", you are using the Layout version of Minima and this post is for you. If it says "Template" there instead, then you are using the "Classic" Template version of Minima and those instructions are here.<br />
<br />
Like the instructions for adding columns, these instructions are also simple and easy, and you can do it if you don't know the first thing about HTML.<br />
<br />
In the Three Column Blogs tutorial on adding a column to Minima in Layout, you made room for the new column by increasing the width of the page to 940 pixels.<br />
<br />
Consequently, when you adjust your margins, the width of the sidebars, the main post column and all the margins must collectively add up to 940. If they exceed 940, one of your columns will drop to the bottom of the page. If they are less than 940, you will still see all three columns but the layout will be asymmetrical. So get out your calculator and let's begin!<br />
<br />
First, open up Blogger and go into your Dashboard, then click on the "Layout" tab. Then go into the "Edit HTML" tab. Next, scroll down (or use CTRL+F) to where it says:<br />
<br />
/* Outer-Wrapper<br />
----------------------------------------------- */<br />
<br />
Now, you are going to paste some code in to add margins to your new columns. It's helpful here to remember the "ctrl c" trick to copy and "ctrl v" to paste - it's much faster and easier. The code you are going to paste in will be the exact same every time. It is:<br />
<br />
margin right:<br />
margin left:<br />
<br />
First, we will add margins to the "left-sidebar-wrapper". To do that, paste the following code in between the sidebar's "width" and "float" designations:<br />
<br />
<span style="color: red;">margin-right: 10px;<br />
margin-left: 5px;</span><br />
<br />
Next, we will move to the "main-wrapper". Paste the following code in between the main-content's "width" and "float" designations:<br />
<br />
<span style="color: red;">margin-right: 15px;<br />
margin-left: 15px;</span><br />
<br />
Then, we'll do the same thing for the right sidebar wrapper, which is identified in the code as the "sidebar-wrapper". Paste the following code in between the right sidebar's "width" and "float" designations:<br />
<br />
<span style="color: red;">margin-right: 5px;<br />
margin-left: 10px;</span><br />
<br />
Now for the math. These margins added 70 pixels to the main page, so we'll need to reduce the width of the columns by a collective 70 pixels. In this example, I have chosen to reduce the width of the two sidebars, but you can also reduce the main post width alone, or all columns together. This is what you need to do in order to reduce the sidebar widths:<br />
<br />
#left-sidebar-wrapper {<br />
width: 220px;<span style="color: red;"><-------change to 185</span><br />
margin-right: 10px;<br />
margin-left: 5px;<br />
float: $startSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}<br />
<br />
#sidebar-wrapper {<br />
width: 220px;<span style="color: red;"><-------change to 185</span><br />
margin-right: 5px;<br />
margin-left: 10px;<br />
float: $endSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}<br />
<br />
Your finished block of code with the new margins should now look like this:</div><div align="justify" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="border-bottom-color: rgb(101, 115, 131); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(101, 115, 131); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(101, 115, 131); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(101, 115, 131); border-top-style: solid; border-top-width: 1px; line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 15px; padding-left: 15px; padding-right: 15px; padding-top: 15px; width: 400px;"><br />
<span style="color: #000099;">#left-sidebar-wrapper {<br />
width: </span><span style="color: red;">185px;<br />
margin-right: 10px;<br />
margin-left: 5px;</span><br />
<span style="color: #000099;">float: $startSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}<br />
<br />
#main-wrapper {<br />
width: 500px;</span><span style="color: red;">margin-right: 15px;<br />
margin-left: 15px;</span><span style="color: #000099;"><br />
float: $startSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}<br />
<br />
#sidebar-wrapper {<br />
width: </span><span style="color: red;">185px;<br />
margin-right: 5px;<br />
margin-left: 10px;</span><span style="color: #000099;"><br />
float: $endSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}<br />
</span></div></div><div align="justify" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
<br />
Hit "preview" to see your new three column blogger layout with margins, and then save the template if everything is ok. And now you really are a now master minima coder! Not only are you completely done, but you are also armed with enough knowledge to increase the width of your columns and main page in order to fit custom widgets and other "non-google" add-ins.</div><div align="justify" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><div align="justify" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span style="color: red;"><em>Update: There are a lot of comments below about not enough space between columns, too much space, etc. These are personal preferences and they can easily be met - the great thing about the Blogger templates is that you can customize them to your heart's desire. Experiment! Just fiddle with the margin settings until your blog looks the way you want - it's easy. More pixels in your margins=more space between columns, less pixels in your margins=less space. Be careful not to add too much though, or your right column will drop to the bottom of the page.</em></span></div><div align="justify" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span style="color: red;"><em></em></span></div><div align="justify" style="line-height: 1.6em; margin-bottom: 0.75em; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span style="color: red;"><em>Also, several people made comments about images/widgets/photos getting cut off in their sidebars - again, you need to either reduce the size of the image/widget/photo to fit in your sidebar, or increase the width of the sidebar to accommodate the size of the widget. But be careful: if you make it too wide,your right column will drop to the bottom of the page.</em></span><br />
Best of luck with your blogging. I hope this article on adding margins to your three column template did great things for your blog! <strong><em>If this post was helpful, please link to it!</em></strong> Cheers.</div></div></div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5893297714399775366.post-2434113028943260992011-03-21T15:36:00.012+05:302011-04-13T16:57:40.097+05:30Smooth Multi Level Drop-Down Menu Using jQuery<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><br />
</div><a href="http://2.bp.blogspot.com/-UIgZaFZGrjc/TaV-T6U30lI/AAAAAAAAAks/Q479P_gXzgA/s1600/th_2009-04-15_162151.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="102" src="http://2.bp.blogspot.com/-UIgZaFZGrjc/TaV-T6U30lI/AAAAAAAAAks/Q479P_gXzgA/s200/th_2009-04-15_162151.png" width="200" /></a>The smooth multi level drop-down menu, called WH works on all browsers and uses jQuery.<br />
<br />
Features:<br />
<br />
1. Browser support: FF1+ IE6+ Opera8+<br />
2. Smooth Navigation using jQuery<br />
3. Slide plus fade in effect for sub menus<br />
4. Shadow effect<br />
<br />
<span style="font-weight: bold;">1. The CSS part (for blogs hosted on Blogger, you need to copy the code below, above the </b:skin> tag (Layout > Edit HTML)):</span><br />
<br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;">/*Some IE fixes*/
.ddsmoothmenu ul li {zoom:1;}
.ddsmoothmenu ul li {display:inline;}
.ddsmoothmenu{
font: 12px Verdana;
background : #ffffff none repeat scroll 0% 50%;
border : 1px solid #ececec;
margin : 5px 3px 5px 3px;
padding : 0;
width : 973px;
height: 30px;
}
.ddsmoothmenu ul{z-index:100; margin: 0; padding: 0; list-style-type: none;}
/*Top level list items*/
.ddsmoothmenu ul li{position: relative; display: inline; float: left; }
/*Top level menu link items style*/
.ddsmoothmenu ul li a{display: block; color: white; padding: 4px 10px; border: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 14px Verdana; }
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: black;}
.ddsmoothmenu ul li a:hover{background: #dee5e5; /*background of menu items during onmouseover (hover state)*/
color: #BF0000;}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{position: absolute;left: 0; background: white;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{ display: list-item; float: none;}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{ top: 0; }
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/
padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; border-left: 1px solid gray; border-right: 1px solid gray;}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{ position: absolute; top: 7px; right: 4px;}
.rightarrowclass{position: absolute; top: 6px; right: 5px;}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{position: absolute; left: 0; top: 0; width: 0px; height: 0px; background: white; display:none; visibility: hidden;} </pre><div style="margin: 0px; padding: 0px;"></div></div><span class="fullpost">If you want shadows for the sub menus (but from my tests - it's not working if there are some flash or javascript elements under it), change the last line in the code above with this line:</span><br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;">.ddshadow{position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver;} </pre><div style="margin: 0px; padding: 0px;"></div></div><span class="fullpost">You may of course alter the above code so it will fully integrate with your website (change the colors, etc).<br />
<br />
<span style="font-weight: bold;">2. One more IE hack and the JavaScript. Enter the following code above the </head> tag:</span></span><br />
<br />
<br />
<code></code></div><pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><span class="fullpost"><pre class="source-code"><code><!--[if lte IE 7]>
<style type="text/css">
html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='https://dl.dropbox.com/u/2886083/w8/googlepages/whddmenu.txt' type='text/javascript'/></code></pre></span></pre><div style="margin: 0px; padding: 0px;"><br />
<br />
<span class="fullpost">Please download and then re-upload whddmenu.js to some other server as my server will not work for long. There are also two settings which you can alter in whddmenu.js:</span></div><br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;">transition: {overtime:300, outtime:300}, </pre><div style="margin: 0px; padding: 0px;"></div></div><span class="fullpost">which is the smooth slide in effect. Change the values to your likings. And also:</span><br />
<br />
<span class="fullpost"></span><br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;">shadow: {enabled:false, offsetx:5, offsety:5}, </pre><div style="margin: 0px; padding: 0px;"><span class="fullpost">I disabled the shadow, but you can enable it by altering the above code in whddmenu.js (from false to true) and you can also change the x and y offset.<br />
You can also download my arrows if you want (and make them whichever color you'd like):<br />
<a href="http://i25.tinypic.com/fbf3g1.jpg">Down arrow</a><br />
<a href="http://i25.tinypic.com/2cfru4z.jpg">Right arrow</a><br />
<br />
<span style="font-weight: bold;">3. And now, the html code that creates the menu</span>. Add the following code to where you want the menu to show up (it's just an example, modify it to fit your needs):</span><br />
<br />
<pre style="background-color: #edf7f9; border: 1px solid rgb(181, 181, 181); color: #575757; font-family: Tahoma,Arial; margin: 15px 0px; max-height: 400px; overflow: auto; padding: 10px; width: 448px;"><span class="fullpost"><pre class="source-code"><code><div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://webupd8.blogspot.com">Home</a></li>
<li><a href="#">page 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://blogwidgetbox.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div></code></pre></span></pre><div style="margin: 0px; padding: 0px;"></div></div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5893297714399775366.post-36040482433193224812011-03-16T14:35:00.000+05:302011-03-16T14:35:56.763+05:30Related Posts Widget with thumbnails for Blogger<div dir="ltr" style="text-align: left;" trbidi="on"><br />
One of the best way to increase page views and readership is using a related posts plugin. After the huge success of thumbnail realated posts widget by linkwithin, Aneesh developed the same widget using custom code which was indeed more reliable and totally customizable. <br />
<br />
<div class="separator" style="clear: both; text-align: center;"> <img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFQq3qlgF_HOC38MQSTz-EcbKFRnYSnrh1BMAEcaxvE0n_6ZeReBLC_7MP1UJNUZ-fVnvcWbb8hO-h6tZPIxFUBaHr_J-Nzhx8HO8ybOy_vMlrSyuMlu56wvPtGJZt_E-86QaljxSHc0nx/s320/Image+16.png" width="370" /></div><span class="Apple-style-span" style="color: #474747; font-family: 'Trebuchet MS', sans-serif; font-size: 13px;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS',sans-serif; font-size: 13px;">Now Like wise Wordpress Blogger Users can also have Related Posts with Thumbnails in Blogspot Blogs.To increase page views per user this widget can be very helpful, you can easily display the Related Posts with thumbnails below every post or below the post area with very ease.</span><br />
<span class="Apple-style-span" style="color: #474747; font-family: 'Trebuchet MS',sans-serif; font-size: 13px;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: 'Trebuchet MS',sans-serif; font-size: 13px;"><span class="Apple-style-span" style="font-family: Georgia,Utopia,'Palatino Linotype',Palatino,serif; font-size: 15px; line-height: 21px;"></span></span><br />
<h4 style="margin: 0px; position: static;"> <span class="Apple-style-span" style="font-family: 'Trebuchet MS',sans-serif;">Related Posts Widget with Thumbnails for Blogger</span></h4><span class="Apple-style-span" style="font-family: 'Trebuchet MS',sans-serif; font-size: 13px;">Here are the detailed steps to install the related posts widget for blogger with thumbnails</span><br />
<span class="Apple-style-span" style="color: #474747; font-family: 'Trebuchet MS',sans-serif; font-size: 13px;"><span class="Apple-style-span" style="font-family: Arial,Verdana; font-size: 14px;"></span></span><br />
<div style="margin: 0px;"> <span class="Apple-style-span" style="color: #474747; font-family: Trebuchet, 'Trebuchet MS', Arial, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="line-height: 20px;"><br />
</span></span></div><div style="margin: 0px;"> </div><div style="margin: 0px;"> <span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 20px;"><b style="background-color: transparent; border-style: none; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;">STEP #1</b></span></div><div> <div style="border-width: 0px; margin: 0px 0px 10px; outline-style: none; padding: 0px;"> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #333333; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #222222; font-family: 'Trebuchet MS',Verdana,Helvetica,Arial,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;">Log in to <a href="http://www.blogger.com/" style="background-image: url("http://i40.tinypic.com/eg64is.jpg"); background-position: 100% 50%; border-width: 0px; color: #365d95; margin: 0px; opacity: 1; outline-style: none; padding: 0px 15px 0px 0px; text-decoration: none; vertical-align: baseline;" tip="">Blogger</a> -> <b style="background-color: transparent; border-style: none; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;">Layout</b> -> <b style="background-color: transparent; border-style: none; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;">Edit HTML</b>and select the tick-box<b style="background-color: transparent; border-style: none; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;">Expand Widget Templates</b><br />
Then, find (CTRL+F) this code in the template:</span></span></span></span></div></div><div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div color="initial" style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div color="initial" style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #333333; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #666666; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px;"><span class="Apple-style-span" style="font-size: 13px; line-height: 21px;"><span class="Apple-style-span" style="font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: normal;"><span class="Apple-style-span" style="color: #666666; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial,'Century gothic',Tahoma,sans-serif; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><code style="background-color: white; background-image: url("http://i651.photobucket.com/albums/uu240/zendersto/prepb3.jpg"); background-position: 0% 0%; border: 1px solid rgb(153, 204, 102); color: #666666; display: block; font: 1em/17px 'Courier New',Fixed,monospace; margin: 1em 0px; outline-style: none; overflow: auto; padding: 0px 20px 0px 30px; text-align: left; vertical-align: baseline;"><span class="Apple-style-span" style="color: red; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-size: x-small; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-style: none; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"></head></b></span></span></code></span></span></span></span></span></span></span></div></div></div></div><div style="margin: 0px;"> <span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px;"><span class="Apple-style-span" style="font-size: 13px; line-height: 21px;"><span class="Apple-style-span" style="font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: normal;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; line-height: 21px;"><span class="Apple-style-span" style="color: #333333;">And immediately </span><span class="Apple-style-span" style="font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><span class="Apple-style-span" style="color: red;">before</span><span class="Apple-style-span" style="color: #333333;"> </span></span><span class="Apple-style-span" style="color: #333333;">it, paste this code:</span></span></span></span></span></span><br />
<a href="" name="more"></a></div></div></div><pre class="csharpcode"><code style="background-color: white; background-image: url("http://i39.tinypic.com/a47lat.jpg"); background-position: 0% 0%; border: 1px solid rgb(153, 204, 102); color: #666666; display: block; font: 12px/17px 'Courier New',Fixed,monospace; margin: 1em 0px; overflow: auto; padding: 0px 20px 0px 30px; text-align: left;"><span class="rem">
<!--Related Posts with thumbnails <span class="IL_AD" id="IL_AD4">Scripts bdlab.blogspot.com</span>--></span>
<span class="rem"><!-- remove --></span><span class="kwrd"><</span><span class="html">b:if</span> <span class="attr">cond</span><span class="kwrd">='data:blog.pageType == &quot;item&quot;'</span><span class="kwrd">></span>
<span class="kwrd"></span><span class="kwrd"><</span><span class="html">style</span> <span class="attr">type</span><span class="kwrd">="text/css"</span><span class="kwrd">></span>
<span class="kwrd"></span>#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
<span class="kwrd"></</span><span class="html">style</span><span class="kwrd">></span>
<span class="kwrd"><</span><span class="html">script</span> <span class="attr">type</span><span class="kwrd">='text/javascript'</span><span class="kwrd">>
<span class="kwrd">var</span> defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKI9rwL-HO7SKIsIwh-cCXqH4-47_ptsXufGHVdpUFXllt7T0SXjYjJ0r7jgar0V8Zb8qXcGgyWibKr01S8LaqqdOJipTTL275WJdpvLIQSfpylBLEGBX3D_iM_WnLqzUcQulRRvvjGC8R/s1600/no+Image+1.png";
<span class="kwrd">var</span> maxresults=5;
<span class="kwrd">var</span> splittercolor="#d4eaf2";
<span class="kwrd">var</span> relatedpoststitle=<span class="str">"Related Posts"</span>;
<span class="kwrd"></</span><span class="html">script</span><span class="kwrd">></span></span>
<span class="kwrd"><</span><span class="html">script</span> <span class="attr">src</span><span class="kwrd">='https://sites.google.com/site/bdlab12/javascript123/bdlab-related-posts-with-thumbnails-for-blogger-pro.txt'</span> <span class="attr">type</span><span class="kwrd">='text/javascript'</span><span class="kwrd">/></span>
<span class="rem"><!-- remove --></span><span class="kwrd"></</span><span class="html">b:if</span><span class="kwrd">></span>
<span class="rem"><!--Related Posts with thumbnails Scripts bdlab.blogspot.com--></span>
</code></pre><br />
<div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,sans-serif; line-height: 20px;"><span class="Apple-style-span" style="color: #222222; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;"><b style="margin: 0px; padding: 0px;">STEP #2</b>:<br />
Now find this code in the template:</span></span></span></span></span></span></b></span></span></span></b></span></b></span></span></div><div style="margin: 0px;"> <span class="Apple-style-span" style="color: #333333; font-family: Arial, sans-serif; font-size: xx-small;"><span class="Apple-style-span" style="line-height: 20px;"><br />
</span></span></div></div><div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; line-height: 1.3em; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; line-height: 1.3em; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; line-height: 1.3em; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,sans-serif; line-height: 20px;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #666666; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial,'Century gothic',Tahoma,sans-serif; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><code style="background-color: white; background-image: url("http://i651.photobucket.com/albums/uu240/zendersto/prepb3.jpg"); background-position: 0% 0%; border: 1px solid rgb(153, 204, 102); color: #666666; display: block; font: 1em/17px 'Courier New',Fixed,monospace; margin: 1em 0px; outline-style: none; overflow: auto; padding: 0px 20px 0px 30px; text-align: left; vertical-align: baseline;"><span class="Apple-style-span" style="color: red; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-size: x-small; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-style: none; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Georgia,serif; font-size: 17px;"><span class="Apple-style-span" style="font-size: 16px; line-height: normal;"><span class="Apple-style-span" style="line-height: 20px;"><div class='post-footer-line post-footer-line-1'/></span></span></span></b></span></span></code></span></span></span></span></span></span></span></span></span></b></span></span></span></b></span></b></span></span></div></div></div></div></div><div style="margin: 0px;"> <span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,sans-serif; line-height: 20px;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #444444; font-size: 14px;"></span></span><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif;"><span class="Apple-style-span" style="line-height: 21px;"><span class="Apple-style-span" style="font-family: Arial,sans-serif; line-height: 20px;"></span></span></span></span></span></span></span></span></b></span></span></span></b></span></b></span></span></div><div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,sans-serif; line-height: 20px;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif;"><span class="Apple-style-span" style="line-height: 21px;"><span class="Apple-style-span" style="font-family: Arial,sans-serif; line-height: 20px;"><span class="Apple-style-span" style="color: #222222; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif;"><span class="Apple-style-span" style="line-height: 21px;"><b><span class="Apple-style-span" style="color: #333333; font-family: arial; font-size: 14px; font-weight: normal; line-height: 19px;">If you cant find it then try finding this one</span></b></span></span></span></span></span></span></span></span></span></span></b></span></span></span></b></span></b></span></span></div></div><div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; line-height: 1.3em; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; line-height: 1.3em; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; line-height: 1.3em; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,sans-serif; line-height: 20px;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif;"><span class="Apple-style-span" style="line-height: 21px;"><span class="Apple-style-span" style="font-family: Arial,sans-serif; line-height: 20px;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #666666; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial,'Century gothic',Tahoma,sans-serif; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><code style="background-color: white; background-image: url("http://i651.photobucket.com/albums/uu240/zendersto/prepb3.jpg"); background-position: 0% 0%; border: 1px solid rgb(153, 204, 102); color: #666666; display: block; font: 1em/17px 'Courier New',Fixed,monospace; margin: 1em 0px; outline-style: none; overflow: auto; padding: 0px 20px 0px 30px; text-align: left; vertical-align: baseline;"><span class="Apple-style-span" style="color: red; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-size: x-small; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-style: none; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Georgia,serif; font-size: 17px;"><span class="Apple-style-span" style="font-size: 16px; line-height: normal;"><span class="Apple-style-span" style="line-height: 20px;"><p class='post-footer-line post-footer-line-1'/></span></span></span></b></span></span></code></span></span></span></span></span></span></span></span></span></span></span></span></b></span></span></span></b></span></b></span></span></div></div></div></div></div><div style="margin: 0px;"> <span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,sans-serif; line-height: 20px;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif;"><span class="Apple-style-span" style="line-height: 21px;"><span class="Apple-style-span" style="font-family: Arial,sans-serif; line-height: 20px;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #444444; font-size: 14px;"></span></span><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif;"><span class="Apple-style-span" style="line-height: 21px;"><span class="Apple-style-span" style="font-family: arial; font-size: 14px; line-height: 19px;">Now immediately after any of these lines(whichever you could find) place this code snippet</span></span></span></span></span></span></span></span></span></span></span></b></span></span></span></b></span></b></span></span></div></div></div><br />
<pre class="csharpcode"><code style="background-color: white; background-image: url("http://i39.tinypic.com/a47lat.jpg"); background-position: 0% 0%; border: 1px solid rgb(153, 204, 102); display: block; font: 12px/17px 'Courier New',Fixed,monospace; margin: 1em 0px; overflow: auto; padding: 0px 20px 0px 30px; text-align: left;"><span class="rem" style="color: #666666;"><!-- Related Posts with Thumbnails Code Start bdlab.blogspot.com--></span><span class="Apple-style-span" style="color: #666666;">
</span><span class="rem" style="color: #666666;"><!-- remove --></span><span style="color: #666666; font-size: xx-small;"><b><span class="kwrd"><</span><span class="html">b:if</span> <span class="attr">cond</span><span class="kwrd">='data:blog.pageType == &quot;item&quot;'</span><span class="kwrd">></span>
</b></span><span class="kwrd" style="color: #666666;"><</span><span class="html" style="color: #666666;">div</span><span class="Apple-style-span" style="color: #666666;"> </span><span class="attr" style="color: #666666;">id</span><span class="kwrd" style="color: #666666;">='related-posts'</span><span class="kwrd" style="color: #666666;">></span><span class="Apple-style-span" style="color: #666666;">
</span><span class="kwrd" style="color: #666666;"><</span><span class="html" style="color: #666666;">b:loop</span><span class="Apple-style-span" style="color: #666666;"> </span><span class="attr" style="color: #666666;">values</span><span class="kwrd" style="color: #666666;">='data:post.labels'</span><span class="Apple-style-span" style="color: #666666;"> </span><span class="attr" style="color: #666666;">var</span><span class="kwrd" style="color: #666666;">='label'</span><span class="kwrd" style="color: #666666;">></span><span class="Apple-style-span" style="color: #666666;">
</span><span class="kwrd" style="color: #666666;"><</span><span class="html" style="color: #666666;">b:if</span><span class="Apple-style-span" style="color: #666666;"> </span><span class="attr" style="color: #666666;">cond</span><span class="kwrd" style="color: #666666;">='data:label.isLast != &quot;true&quot;'</span><span class="kwrd" style="color: #666666;">></span><span class="Apple-style-span" style="color: #666666;">
</span><span class="kwrd" style="color: #666666;"></</span><span class="html" style="color: #666666;">b:if</span><span class="kwrd" style="color: #666666;">></span><span class="Apple-style-span" style="color: #666666;">
</span><span class="kwrd" style="color: #666666;"><</span><span class="html" style="color: #666666;">script</span><span class="Apple-style-span" style="color: #666666;"> </span><span class="attr" style="color: #666666;">expr:src</span><span class="kwrd"><span class="Apple-style-span" style="color: #666666;">='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-</span><span class="IL_AD" id="IL_AD3" style="color: #666666;">script</span><span class="Apple-style-span" style="color: #666666;">&amp;callback=related_results_labels_thumbs&amp;max-results=</span><span class="Apple-style-span" style="color: red; font-size: medium;">5</span><span class="Apple-style-span" style="color: #666666;">&quot;'</span></span><span class="Apple-style-span" style="color: #666666;"> </span><span class="attr" style="color: #666666;">type</span><span class="kwrd" style="color: #666666;">='text/javascript'</span><span class="kwrd" style="color: #666666;">/></span><span class="kwrd" style="color: #666666;"></</span><span class="html" style="color: #666666;">b:loop</span><span class="kwrd" style="color: #666666;">></span><span class="Apple-style-span" style="color: #666666;">
<script type=</span><span class="str" style="color: #666666;">'text/javascript'</span><span class="Apple-style-span" style="color: #666666;">>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</span><span class="kwrd" style="color: #666666;"></</span><span class="html" style="color: #666666;">script</span><span class="kwrd" style="color: #666666;">></span><span class="Apple-style-span" style="color: #666666;">
</span><span class="kwrd" style="color: #666666;"></</span><span class="html" style="color: #666666;">div</span><span class="kwrd" style="color: #666666;">><span class="kwrd"><</span><span class="html">div</span> <span class="attr">style</span><span class="kwrd">='clear:both'/</span><span class="kwrd">></span></span><span class="Apple-style-span" style="color: #666666;">
</span><span class="rem" style="color: #666666;"><!-- remove --></span><span style="color: #666666; font-size: xx-small;"><b><span class="kwrd"></</span><span class="html">b:if</span><span class="kwrd">></span> </b></span><span class="Apple-style-span" style="color: #666666;">
</span><span class="kwrd" style="color: #666666;"><</span><span class="html" style="color: #666666;">b:if</span><span class="Apple-style-span" style="color: #666666;"> </span><span class="attr" style="color: #666666;">cond</span><span class="kwrd" style="color: #666666;">='</span><span class="Apple-style-span" style="color: #666666;">data:blog.url == data:blog.homepageUrl'></span><span class="kwrd" style="color: #666666;"><</span><span class="html" style="color: #666666;">b:if</span><span class="Apple-style-span" style="color: #666666;"> </span><span class="attr" style="color: #666666;">cond</span><span class="kwrd" style="color: #666666;">=</span><span class="Apple-style-span" style="color: #666666;">'data:post.isFirstPost'>
</span><span class="kwrd" style="color: #666666;"><</span><span class="html" style="color: #666666;">a</span><span class="Apple-style-span" style="color: #666666;"> </span><span class="attr" style="color: #666666;">href</span><span class="kwrd" style="color: #666666;">='http://bdlab.blogspot.com'</span><span class="kwrd" style="color: #666666;">></span><span class="Apple-style-span" style="color: #666666;"><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSNkD-7JoTbhE3VhP2LZX5UyMDdY2xbxSeqv76acpbNmZjpirqOEBsEiWHX1nglsjOoy3N2QURm2WkvTFggaoDlWUsv0HpQdmGeZTAlQPeVkVLXDOzyaOA_-47a9INIeCZL7uE-QWa4Q1E/s1600/blogger-widgets.png" /></a><a href=</span><span class="str" style="color: #666666;">'http://bdlab.blogspot.com'</span><span class="Apple-style-span" style="color: #666666;"> ><img style="border: 0" alt="Blogger Templates" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTqTFPJLXf7WKzokbM3NEJTFMRdTpMfx7aoNUOOKfzscABcn5qNv_je7oQCw8DFihJKOHuOyURmXH-QJrhHUDK80uIkoQHO30gMdB4bDrmYssi9BhyphenhyphenYttW-p-N-iAjK7BXxPGW9dqxhc86/s1600/blogger-templates.png" /></a>
</span><span class="kwrd" style="color: #666666;"></</span><span class="html" style="color: #666666;">b:if</span><span class="kwrd" style="color: #666666;">><span class="kwrd"></</span><span class="html">b:if</span><span class="kwrd">></span></span><span class="Apple-style-span" style="color: #666666;">
</span><span class="rem" style="color: #666666;"><!-- Related Posts with Thumbnails Code End bdlab.blogspot.com--></span></code></pre><br />
<br />
<br />
<div> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="margin: 0px;"> <span class="Apple-style-span" style="font-family: Arial,Helvetica,sans-serif;"><span class="Apple-style-span" style="font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Arial,Helvetica,sans-serif; line-height: 20px;">Now Click</span><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: 20px;"> <strong style="background-color: #ff7700; border: 1px solid rgb(153, 51, 0); color: white; margin: 2px; outline-style: none; padding: 2px; vertical-align: baseline;">Save Template</strong></span></span></span></span></span></b></span></span></span></b></span></b></span></span></span></div></div></div><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"></span></span><br />
<div style="margin: 0px;"> </div><div style="margin: 0px;"> <span class="Apple-style-span" style="color: #000066;">..................................................................................................................................</span></div></div><div> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #000066;">.......................................................................................................................................</span></div></div><div> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #000066;">..................................................................................................................................</span></div><div style="margin: 0px;"> </div><div style="margin: 0px;"> <span class="Apple-style-span" style="color: #333333; font-family: arial; font-size: 14px; line-height: 19px;">You can adjust the maximum number of related posts being displayed by editing this line in the code.</span></div><div style="margin: 0px;"> </div></div><div> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><code style="background-color: white; background-image: url("http://i651.photobucket.com/albums/uu240/zendersto/prepb3.jpg"); background-position: 0% 0%; border: 1px solid rgb(153, 204, 102); color: #666666; display: block; font: 1em/17px 'Courier New',Fixed,monospace; margin: 1em 0px; outline-style: none; overflow: auto; padding: 0px 20px 0px 30px; text-align: left; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Georgia,serif; font-size: 17px;"><span class="Apple-style-span" style="font-size: 16px; line-height: normal;">var maxresults=5;</span></span></code></span></span></span></span></b></span></span></span></b></span></b></span></span></div></div></div></div></div><div style="margin: 0px;"> <span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: arial; font-size: 14px; line-height: 19px;">To edit the title of the widget you can change this line of code</span></span></span></span></span></b></span></span></span></b></span></b></span></span></div></div></div><div style="margin: 0px;"> <span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif;"></span></div><div> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif;"><br />
</span></div></div><div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><code style="background-color: white; background-image: url("http://i651.photobucket.com/albums/uu240/zendersto/prepb3.jpg"); background-position: 0% 0%; border: 1px solid rgb(153, 204, 102); color: #666666; display: block; font: 1em/17px 'Courier New',Fixed,monospace; margin: 1em 0px; outline-style: none; overflow: auto; padding: 0px 20px 0px 30px; text-align: left; vertical-align: baseline;">var relatedpoststitle="Related Posts";</code></span></span></span></span></b></span></span></span></b></span></b></span></span></span></div></div></div></div></div><div style="margin: 0px;"> <span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: arial; font-size: 14px; line-height: 19px;">To change the default thumbnail, you can edit this line of code</span></span></span></span></span></b></span></span></span></b></span></b></span></span></span></div></div></div><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"></span></span><br />
<div> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif;"><br />
</span></div></div><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif;"> <span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"></span></span><br />
<div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><code style="background-color: white; background-image: url("http://i651.photobucket.com/albums/uu240/zendersto/prepb3.jpg"); background-position: 0% 0%; border: 1px solid rgb(153, 204, 102); color: #666666; display: block; font: 1em/17px 'Courier New',Fixed,monospace; margin: 1em 0px; outline-style: none; overflow: auto; padding: 0px 20px 0px 30px; text-align: left; vertical-align: baseline;">var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKI9rwL-HO7SKIsIwh-cCXqH4-47_ptsXufGHVdpUFXllt7T0SXjYjJ0r7jgar0V8Zb8qXcGgyWibKr01S8LaqqdOJipTTL275WJdpvLIQSfpylBLEGBX3D_iM_WnLqzUcQulRRvvjGC8R/s1600/no+Image+1.png";</code></span></span></span></span></b></span></span></span></b></span></b></span></span></span></div></div></div></div></div><div style="margin: 0px;"> <span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><br />
</span></span></span></span></b></span></span></span></b></span></b></span></span></span></div></div></div><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"> </span><span class="Apple-style-span" style="color: #333333; font-family: arial; font-size: 14px; line-height: 19px;">To Change the Colour of the Splitter Line , edit</span></span></div><div> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="border-width: 0px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"> <div style="margin: 0px;"> <span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><code style="background-color: white; background-image: url("http://i651.photobucket.com/albums/uu240/zendersto/prepb3.jpg"); background-position: 0% 0%; border: 1px solid rgb(153, 204, 102); color: #666666; display: block; font: 1em/17px 'Courier New',Fixed,monospace; margin: 1em 0px; outline-style: none; overflow: auto; padding: 0px 20px 0px 30px; text-align: left; vertical-align: baseline;">var splittercolor="#d4eaf2";</code></span></span></span></span></b></span></span></span></b></span></b></span></span></div><div> <span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; font-size: 13px; line-height: 20px;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b style="background-color: transparent; border-style: none; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #333333; font-family: Arial,Tahoma,Verdana; line-height: 19px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Trebuchet MS',Trebuchet,Verdana,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><b color="initial" face="'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, Arial, sans-serif" size="13px" style="background-color: transparent; border-style: none; font-style: normal; font-weight: normal; margin: 0px; outline-style: none; padding: 0px; text-decoration: none; vertical-align: baseline;"><span class="Apple-style-span" style="color: black; font-family: Arial,sans-serif; font-size: 12px; font-weight: normal; line-height: 16px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #4e4e4e; font-family: 'Segoe UI',Calibri,'Myriad Pro',Myriad,'Trebuchet MS',Helvetica,Arial,sans-serif; font-size: 13px; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,'Century gothic',Tahoma,sans-serif; line-height: normal; margin: 0px; outline-style: none; padding: 0px; vertical-align: baseline;"><br />
</span></span></span></span></b></span></span></span></b></span></b></span></span></div></div></div></div></div></div></div></div><br />
<span class="Apple-style-span" style="color: #474747; font-family: 'Trebuchet MS',sans-serif; font-size: 13px;"><br />
</span><br />
<span class="Apple-style-span" style="color: #474747; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small;"><br />
</span><br />
<span class="Apple-style-span" style="color: #474747; font-family: 'Trebuchet MS',sans-serif; font-size: 13px;"><br />
</span><br />
<span class="Apple-style-span" style="color: #474747; font-family: 'Trebuchet MS',sans-serif; font-size: 13px;">Change </span><span class="Apple-style-span" style="font-family: 'Trebuchet MS',sans-serif; font-size: 13px;"><span class="Apple-style-span" style="color: red;"><b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKI9rwL-HO7SKIsIwh-cCXqH4-47_ptsXufGHVdpUFXllt7T0SXjYjJ0r7jgar0V8Zb8qXcGgyWibKr01S8LaqqdOJipTTL275WJdpvLIQSfpylBLEGBX3D_iM_WnLqzUcQulRRvvjGC8R/s1600/no+Image+1.png</b></span> Code with The One You Like Bellow</span><br />
<div style="text-align: left;"> <blockquote style="background-color: #ececec; border: 1px solid rgb(204, 204, 204); margin: 5px 15px; overflow: hidden; padding: 5px;"> <div style="margin: 0px;"> <div style="color: #666666; font-style: italic;"> <span class="Apple-style-span" style="font-family: 'Trebuchet MS', sans-serif; font-size: xx-small;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><br />
<span id="goog_1848842477"></span><span id="goog_1848842483"></span><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKI9rwL-HO7SKIsIwh-cCXqH4-47_ptsXufGHVdpUFXllt7T0SXjYjJ0r7jgar0V8Zb8qXcGgyWibKr01S8LaqqdOJipTTL275WJdpvLIQSfpylBLEGBX3D_iM_WnLqzUcQulRRvvjGC8R/s1600/no+Image+1.png" /><span id="goog_1848842484"></span><span id="goog_1848842478"></span></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKI9rwL-HO7SKIsIwh-cCXqH4-47_ptsXufGHVdpUFXllt7T0SXjYjJ0r7jgar0V8Zb8qXcGgyWibKr01S8LaqqdOJipTTL275WJdpvLIQSfpylBLEGBX3D_iM_WnLqzUcQulRRvvjGC8R/s1600/no+Image+1.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><span id="goog_1848842480"></span><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYixMbgfwqaJVuBlqa-aPYPW8yRkRUHhxLZ1UwH9J1j-mVfJcaI3WRfGflUQxFr4UvYOBh8tkUm0PlXWYYKU-Af7KFhSRzV4wJNgES4nThfWjokfWG3NFXhzPrMr743fD6x0SrvLKPtO16/s1600/no+Image+2.png" /><span id="goog_1848842481"></span></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYixMbgfwqaJVuBlqa-aPYPW8yRkRUHhxLZ1UwH9J1j-mVfJcaI3WRfGflUQxFr4UvYOBh8tkUm0PlXWYYKU-Af7KFhSRzV4wJNgES4nThfWjokfWG3NFXhzPrMr743fD6x0SrvLKPtO16/s1600/no+Image+2.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrrA3i8VxhBwfUX_-3YDfu9dvJnRccbSUwVihYYnsmFpPaQlGJSlF7wJ7MzFowMLzQswwhS70YMJGDa5YrNDCyxEugRh2CCLQ3A_Y2DVioCe-XII1Xl3wYRq98tzjbipqqOx8mWKFjJKK/s1600/no+Image+3.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrrA3i8VxhBwfUX_-3YDfu9dvJnRccbSUwVihYYnsmFpPaQlGJSlF7wJ7MzFowMLzQswwhS70YMJGDa5YrNDCyxEugRh2CCLQ3A_Y2DVioCe-XII1Xl3wYRq98tzjbipqqOx8mWKFjJKK/s1600/no+Image+3.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk1Zbvvuqw424JitxzT63MMSWjH7-xHy3CfKsotLZ30VEZviMM82JIpLJcuDzv_Y664uJ76fK93iDakNSK72Y-7fUaPQUU0yiulzuv9d2gaquhcZsJyhDqxJyXVx0jryZZiYMTSPIwvuvI/s1600/no+Image+4.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk1Zbvvuqw424JitxzT63MMSWjH7-xHy3CfKsotLZ30VEZviMM82JIpLJcuDzv_Y664uJ76fK93iDakNSK72Y-7fUaPQUU0yiulzuv9d2gaquhcZsJyhDqxJyXVx0jryZZiYMTSPIwvuvI/s1600/no+Image+4.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKr2Xu4-KWOblUa8JKNgE3-EquKW_R3dGf1QBI7xWW3FYxmqDKctMHlPuS_DYlnS2n6W1tMIgixCkVNts177eCDF8uEaZwRXTduNscVoTZrVQ76_rcR37tEDuaAfY9VC6OcoExrNktIv5/s1600/no+Image+5.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAKr2Xu4-KWOblUa8JKNgE3-EquKW_R3dGf1QBI7xWW3FYxmqDKctMHlPuS_DYlnS2n6W1tMIgixCkVNts177eCDF8uEaZwRXTduNscVoTZrVQ76_rcR37tEDuaAfY9VC6OcoExrNktIv5/s1600/no+Image+5.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67afq_qtUJdkbur_v886HqR3YLejTs3_SAIbowH5uooFp9st6SIAkG2CNSIvYiRwcmEJBIFdekFQy265nLaipGUyx5FRUOpbAWiJUg0P_QqvImAKN28MmOk4yZ075j6ypbxs7Oxb60Jzo/s1600/no+Image+6.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67afq_qtUJdkbur_v886HqR3YLejTs3_SAIbowH5uooFp9st6SIAkG2CNSIvYiRwcmEJBIFdekFQy265nLaipGUyx5FRUOpbAWiJUg0P_QqvImAKN28MmOk4yZ075j6ypbxs7Oxb60Jzo/s1600/no+Image+6.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicFmQQOGVofdWGp2q_fqhWKFNwScZQZCnvPl4xeLAT-SE5ZRDtEA-39H4VeN0PZG0sbZwP4yKj5G1x60AFluvx2yIlrAjCbhgkLIEpagssu_cddIuxpUCXSxfrIVfrNunHDDCz6EC1g-Mm/s1600/no+Image+7.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicFmQQOGVofdWGp2q_fqhWKFNwScZQZCnvPl4xeLAT-SE5ZRDtEA-39H4VeN0PZG0sbZwP4yKj5G1x60AFluvx2yIlrAjCbhgkLIEpagssu_cddIuxpUCXSxfrIVfrNunHDDCz6EC1g-Mm/s1600/no+Image+7.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0Ihjrs4VQob1h11fY6hsyXBntkbofIS4h7yvFr_Eh2z6SyyxYItnL91TKg1wLptiuDbxB_B0G3tGnAnBnMvR3JujWscu2W1l0IIIENcX8R2EoX60MM4nwAR_PKat3mdZaGoH-HP5ei24/s1600/no+Image+8.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik0Ihjrs4VQob1h11fY6hsyXBntkbofIS4h7yvFr_Eh2z6SyyxYItnL91TKg1wLptiuDbxB_B0G3tGnAnBnMvR3JujWscu2W1l0IIIENcX8R2EoX60MM4nwAR_PKat3mdZaGoH-HP5ei24/s1600/no+Image+8.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWKsL9ZRpSoqO4fNX66fYNMdAZsnfTfrHwL74vFyxxd30PWDtr5-xsPcxVlnVxe-2UKmHhtdMlhZH_rmmOq4bFVGupiratbleKhbi4og3J7Pgqi893mYPOo72TeKKT84ZwgfDIybD5lEs/s1600/no+Image+9.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEWKsL9ZRpSoqO4fNX66fYNMdAZsnfTfrHwL74vFyxxd30PWDtr5-xsPcxVlnVxe-2UKmHhtdMlhZH_rmmOq4bFVGupiratbleKhbi4og3J7Pgqi893mYPOo72TeKKT84ZwgfDIybD5lEs/s1600/no+Image+9.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPrqXJaHz3Ro-vwQNpDhMPJN2KGAqRMtOBCr6S6pedn0B1yhQGjTozF83wE6GiBYh90-6Jiv_zlHnUrZN_9_4fCxAtk2VOXGbblURSlfVRDiJdMF53cZYaKNRpifP_Lz1Edo61dg_YqdDb/s1600/no+Image+10.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPrqXJaHz3Ro-vwQNpDhMPJN2KGAqRMtOBCr6S6pedn0B1yhQGjTozF83wE6GiBYh90-6Jiv_zlHnUrZN_9_4fCxAtk2VOXGbblURSlfVRDiJdMF53cZYaKNRpifP_Lz1Edo61dg_YqdDb/s1600/no+Image+10.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHx85OmW1ZvsMFami5qRUdGyQMvMRKBlFVnDMog6FFujH8TKs0LyPwGdurMtH2EGUacRC9IXy3Tr_UurKPV4OeyHDdfb3uNCkoMy8odlY25TFkp6iQrt_sxTirsVP0W06K-tkqHPSXesb/s1600/no+Image+11.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHx85OmW1ZvsMFami5qRUdGyQMvMRKBlFVnDMog6FFujH8TKs0LyPwGdurMtH2EGUacRC9IXy3Tr_UurKPV4OeyHDdfb3uNCkoMy8odlY25TFkp6iQrt_sxTirsVP0W06K-tkqHPSXesb/s1600/no+Image+11.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUijh3lhoEsNk7mvphDtuqQPkCeZom1fDnlntuq20q3kz5OJtK1yxROqA_HEkjwHQnQcrMmHkdgVMyQrYm1YIPW3lewBUMHhdDKqKJs7Y2DSEdqYCVGY5QZI-UAXZXrKPUmKmSrgYVDHl0/s1600/no+Image+12.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUijh3lhoEsNk7mvphDtuqQPkCeZom1fDnlntuq20q3kz5OJtK1yxROqA_HEkjwHQnQcrMmHkdgVMyQrYm1YIPW3lewBUMHhdDKqKJs7Y2DSEdqYCVGY5QZI-UAXZXrKPUmKmSrgYVDHl0/s1600/no+Image+12.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkU_HMYdhgAkOJuYJCsr7swJRzf4BNXQ8cxwcerzLQhZYQAkb5XAsXhe-l9EMMQXwMcDMo_iFqtNEd6izGDqbWFf_n1-yzP7ATl4O-Ev0CYbNUP39otGCs8ZVCiBCBiwvZ5WlB2X_5Ox04/s1600/no+Image+13.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkU_HMYdhgAkOJuYJCsr7swJRzf4BNXQ8cxwcerzLQhZYQAkb5XAsXhe-l9EMMQXwMcDMo_iFqtNEd6izGDqbWFf_n1-yzP7ATl4O-Ev0CYbNUP39otGCs8ZVCiBCBiwvZ5WlB2X_5Ox04/s1600/no+Image+13.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjerHbcv0zQWe329gi2kUthH56BuWxdNDZGoi4SMB0f1e9v3qtkPYCWHxE0EEGz95qjlqcrXBIHTNMzeCjIngh5EqBk_Y187rBvbvfTzOMd_yiJ5vFPSNU6xr5wOOasyMuOJG0-3ZI_qBcY/s1600/no+Image+14.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjerHbcv0zQWe329gi2kUthH56BuWxdNDZGoi4SMB0f1e9v3qtkPYCWHxE0EEGz95qjlqcrXBIHTNMzeCjIngh5EqBk_Y187rBvbvfTzOMd_yiJ5vFPSNU6xr5wOOasyMuOJG0-3ZI_qBcY/s1600/no+Image+14.png</i><span class="Apple-style-span" style="color: #666666; font-family: 'Trebuchet MS', sans-serif; font-size: xx-small; font-style: italic;"><b></b></span></div><div class="separator" style="clear: both; text-align: center;"> <span class="Apple-style-span" style="color: #666666;"><i><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpUE-ZGBiqBNXi6kryudc4fAAenDdNJn18Hp0poGND4m7jjm9V_RgdZSZV5gkjzBpjCKNS22SNQ9RAs8m7B1j7cRlHoyIAEPod1PFvFSuqp5sH6hDCKHGZ7U-pwxBzmSO9qxtQYfEJaq6D/s1600/no+Image+15.png" /></i></span><i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpUE-ZGBiqBNXi6kryudc4fAAenDdNJn18Hp0poGND4m7jjm9V_RgdZSZV5gkjzBpjCKNS22SNQ9RAs8m7B1j7cRlHoyIAEPod1PFvFSuqp5sH6hDCKHGZ7U-pwxBzmSO9qxtQYfEJaq6D/s1600/no+Image+15.png</i></div></div></blockquote></div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5893297714399775366.post-83169099138264965682011-03-14T09:02:00.001+05:302011-03-14T09:08:33.419+05:30Get ip-address widget for your blogger<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">IF you are a webmaster.Isnt it looks cool to show an IP address widget on your blog.If your answer is yes then Your Wish Will BE Completed in 6 Easy Steps.<br />
<br />
INSTALLATION INSTRUCTION<br />
<br />
1. copy code from below choose any one.<br />
2. Login to your dahboard and make your way through<br />
3. Layout<br />
4. page elements<br />
5. Choose a new gadget ,select html/javascript paste the code<br />
6. click <span style="background-color: #e69138;">save</span><br />
<br />
<div style="text-align: center;">1. <br />
<span style="display: block; text-align: center;"><a href="http://myfundoo-blog.blogspot.com/2009/09/get-ip-address-widget-for-your-blogger.html"><img alt="IP" border="0" height="125" src="http://www.wieistmeineip.de/ip-address/" width="125" /></a><br />
<small><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html">Blogger Widgets</a></small></span><span style="display: block; text-align: center;"><small> </small></span></div></div><div style="border-style: solid; border-width: 2px; height: 50px; overflow: auto; width: 200px;"><pre><p><span style="text-align:center; display: block;"><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html"><img src="http://www.wieistmeineip.de/ip-address/" border="0" width="125" height="125" alt="IP" /></a><br /><small><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html">Blogger Widgets</a></small></span></p></pre><pre> </pre><pre> </pre><pre> </pre></div></div><br />
<div style="text-align: center;"><br />
<br />
2. <br />
<span style="display: block; text-align: center;"><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html"><img alt="What's my ip address, create your own visitors IP image" border="0" src="http://www.findmyipaddress.info/myipaddressimg.aspx" /></a><br />
<small><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html">Blogger Widgets</a></small></span><span style="display: block; text-align: center;"><small> </small></span><br />
<br />
<div style="border-style: solid; border-width: 2px; height: 50px; overflow: auto; width: 200px;"><pre><p><span style="text-align:center; display: block;"><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html"><img src="http://www.findmyipaddress.info/myipaddressimg.aspx" alt="What's my ip address, create your own visitors IP image" border="0" /></a><br /><small><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html">Blogger Widgets</a></small></span></p></pre></div><br />
</div></div><br />
<div style="text-align: center;">3. <br />
<span style="display: block; text-align: center;"><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html"><img alt="IP" border="0" height="60" src="http://www.wieistmeineip.de/ip-address/?size=468x60" width="468" /></a><br />
<small><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html">Blogger Widgets</a></small></span></div></div><br />
<pre><span style="display: block; text-align: center;"></span></pre><br />
<div style="border-style: solid; border-width: 2px; height: 50px; overflow: auto; width: 200px;"><pre><p><span style="text-align:center; display: block;"><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html"><img src="http://www.wieistmeineip.de/ip-address/?size=468x60" border="0" width="468" height="60" alt="IP" /></a><br /><small><a href="http://blogwidgetbox.blogspot.com/2011/03/get-ip-address-widget-for-your-blogger.html">Blogger Widgets</a></small></span></p></pre></div></div>Unknownnoreply@blogger.com45tag:blogger.com,1999:blog-5893297714399775366.post-77678285167272260672011-03-10T19:57:00.000+05:302011-03-10T19:57:21.261+05:30Moving jquery image slider for featured content in Blogger<div dir="ltr" style="text-align: left;" trbidi="on"><span class="Apple-style-span" style="color: #302226; font-family: Arial, sans-serif;"><span class="Apple-style-span" style="font-size: 14px; line-height: 20px;">In this blogger tutorial you will learn how you can insert auto move jquery image slider/featured content which is also known as carousel to blogger blog.You can see this jquery image slider implemented at the top of my blog.Some of my blog readers are asking me through email that how they can insert it in their blog so i decided to share it with my readers.It is an excellent way to make your blog attractive and user friendly because you can show your best content in it and your blog readers will stay on your blog for long time.Now just follow the below procedure step by step.<br />
<br />
Also read Add Beautiful jQuery Auto-Playing Featured Content Image Slider to Blogger .</span></span><br />
<h3 style="font-family: Verdana, Georgia, serif, 'Times New Roman Times'; font-size: 20px; font-weight: normal; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 12px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-shadow: rgb(255, 255, 255) 0px 1px 0px;"><span class="Apple-style-span" style="color: #302226; font-family: Arial, sans-serif;"><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><span style="font-size: medium;"><b>Backup template</b></span></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></span></h3><span class="Apple-style-span" style="color: #302226; font-family: Arial, sans-serif;">Firstly backup your template so you can revert back any changes to the template in case of errors.<br />
Go to <span style="color: red;">Layout</span> > <span style="color: red;">Edit HTML</span> and click on " Download Full Template".<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><img border="0" height="160" original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhontnzs6Puw9Y5kAHsrhwePn53QT8tdW3oCb20FcGhK5WP7XoMLy_xZGLMordxEtJIfqbO9Ig0l46u9vbL4VHO0y5l2p6leNMKmHzIXSFT_WoxYvJspL27DXmZZG_TRlA6IJvR1Js-UJE/s640/slider.png" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhontnzs6Puw9Y5kAHsrhwePn53QT8tdW3oCb20FcGhK5WP7XoMLy_xZGLMordxEtJIfqbO9Ig0l46u9vbL4VHO0y5l2p6leNMKmHzIXSFT_WoxYvJspL27DXmZZG_TRlA6IJvR1Js-UJE/s640/slider.png" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-color: initial; border-left-color: rgb(204, 204, 204); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 1px; border-style: initial; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; max-width: 575px; padding-bottom: 1px; padding-left: 1px; padding-right: 1px; padding-top: 1px;" width="640" /></div><br />
<br />
<h3 style="font-family: Verdana, Georgia, serif, 'Times New Roman Times'; font-size: 20px; font-weight: normal; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 12px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-shadow: rgb(255, 255, 255) 0px 1px 0px;"><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><b><span style="font-size: medium;"><b>Installation</b></span></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></b></h3>After saving your template,check "Expand widget templates" and insert the below css styling before <span style="color: red;">]]></b:skin><span style="color: black;">.</span></span><br />
<div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(238, 238, 238); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(238, 238, 238); border-top-style: solid; border-top-width: 1px; clear: both; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 35px; margin-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">#myslides{<br />
<br />
background:#000 url(<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXe33m-foWhdn2hLv2JvMhG9wHMiAqgJZBhHszH2cJKflVlgLNTJDycDkz7o5LO_DwiLFl8_pGDT5tuEM_IilMl7TAOM0BWntWaVFa-9GVuR8lnG7L2i0yz5kuEQ8W52Vh6wAXNswTmA/s1600/mslid.jpg</span>) repeat-x;<br />
width: 650px;<br />
height:165px;<br />
margin-bottom:5px;<br />
}<br />
<br />
.stepcarousel{<br />
position: relative; /*leave this value alone*/<br />
overflow: scroll; /*leave this value alone*/<br />
width: 554px; /*Width of Carousel Viewer itself*/<br />
height: 160px; /*Height should enough to fit largest content's height*/<br />
margin: 0px 48px 5px 48px;<br />
<br />
}<br />
<br />
.stepcarousel .belt{<br />
position: absolute; /*leave this value alone*/<br />
left: 0;<br />
top: 0;<br />
}<br />
<br />
.stepcarousel .panel{<br />
float: left; /*leave this value alone*/<br />
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/<br />
margin: 20px 10px ; /*margin around each panel*/<br />
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */<br />
background:#0e1829;<br />
height:120px;<br />
border:1px solid #1d2c44;<br />
<br />
}<br />
.stepcarousel .panel p{<br />
text-align: left; /*leave this value alone*/<br />
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/<br />
margin: 5px 5px ; /*margin around each panel*/<br />
<br />
}<br />
<br />
.stepcarousel .panel h2{<br />
text-align: left; /*leave this value alone*/<br />
height:20px;<br />
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/<br />
margin: 2px 5px ; /*margin around each panel*/<br />
font-size:16px;<br />
font-weight:bold;<br />
text-align:center;<br />
font-family:Georgia,century gothic,Arial,verdana, sans-serif;<br />
}<br />
<br />
.stepcarousel .panel img{<br />
float: left; /*leave this value alone*/<br />
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/<br />
margin: 5px 5px 5px 5px; /*margin around each panel*/<br />
padding:0px 0px;<br />
}</div>The red highlighted text in above code is the background image of the slider which is black but you can change the color of background according to your blog colors.You can use Google images to find background colors suitable for blog and after uploading that image to image hosting you can replace above link with yours.<br />
Now using "Ctrl + F" find <span style="color: red;">/head </span><span style="color: black;">in the template code and add below code before it.</span><br />
<div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(238, 238, 238); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(238, 238, 238); border-top-style: solid; border-top-width: 1px; clear: both; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 35px; margin-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><!-- JavaScript Slider --><br />
<script src='http://www.yourjavascript.com/57180121136/jquery-1.3.2.js' type='text/javascript'/><br />
<script src='http://www.yourjavascript.com/30111191622/slider.js' type='text/javascript'/><br />
<br />
<!-- End JavaScript Slider --><br />
<script type='text/javascript'><br />
stepcarousel.setup({<br />
galleryid: &#39;mygallery&#39;, //id of carousel DIV<br />
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs<br />
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content<br />
panelbehavior: {<span style="color: lime;">speed:1500</span>, wraparound:true, persist:true},<br />
autostep: {enable:true, <span style="color: lime;">moveby:1</span>, <span style="color: lime;">pause:1000</span>},<br />
defaultbuttons: {enable: true, <span style="color: lime;">moveby: 4</span>, leftnav: [&#39;<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_jCJwHJ5t0Ath42-aJkBzTyPjpX_8fmvMKXm5zyq3F7QVuhZt1Tuqfw-TP68OR0hhuuS4_328zdsejydDMhh6OW-81lJUgSuCPM6ZiGje5ZodLgjarvPL0glyVk8K6s3VM2bu4L-KU4/s400/left.jpg</span>&#39;, -48, 0], rightnav: [&#39;<span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFUPBF8nTKBDL2JQi6OJ19HzQDN0THsfmm_thAvfpPsC3ctAsBIYnwlu169wF6IqKetGrYTUCHt9w0kcdYSLYAYPECZjyZkY-mqd9Hot5QjCU9k5jFerP0AGOaV11ZB3u6uXSIp8OS-eI/s400/right.jpg</span>&#39;, 0, 0]},<br />
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels<br />
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]<br />
<br />
})<br />
<br />
</script><br />
</div>The highlighted red lines in above script are right and left sliding arrows images which can also be changed.The green highlighted texts are different attributes of the slider like speed of the carousel ,how many images to "moveby" when clicking on arrows.<br />
The difficult part is almost finished just save your template.<br />
Go to<span style="color: red;"> Layout</span> > <span style="color: red;">Page Elements </span>> <span style="color: red;">Add A Gadget</span> > <span style="color: red;">Html /Javascript <span style="color: black;">and insert the below code in the Gadget.</span></span><br />
<br />
<br />
<div class="codeview" style="background-attachment: initial; background-clip: initial; background-color: #f9f9f9; background-image: url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif); background-origin: initial; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 2px; border-left-color: rgb(238, 238, 238); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(238, 238, 238); border-top-style: solid; border-top-width: 1px; clear: both; list-style-type: none; margin-bottom: 15px; margin-left: 15px; margin-right: 35px; margin-top: 15px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><div id="myslides"><br />
<div id="mygallery" class="stepcarousel"><br />
<div class="belt"><br />
<br />
<!-- 1st Template --><br />
<div class='panel'><br />
<a href='http://www.bloggertemp.com/2010/01/blogger-template-made-in-spain.html' target='blank' title='Made in Spain'> <img alt='Made in Spain' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyK59F41d3Ea507QonM3iExQMTScdpBysyu4p_si3RJNifQfTolgW49_Io5coU2a8h3u5gjE-9SwFIWEfC9_c9-6HXRRbO389lwLfWPVoCcbYLmLZYEefIliIeRYjUfpLq2_aSphSV-0/s400/madeinspain.jpg' width='185'/> </a><br />
</div><br />
<!--end code of 1st Template --><br />
<!-- 2nd Template --><br />
<br />
<div class='panel'><br />
<a href='http://www.bloggertemp.com/2010/01/blogger-template-fashion-press.html' target='blank' title='Fashion Press'> <img alt='Fashion Press' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-t-J4hm2_j7H8d3GeC3BBREqpcucArGjmSDLspq2a4fqURcYz8hc2FOXdrnkjZIuG7KsfVW3acoEvIMndHyxCcSP8Ocnhpo1bKvJQAPDCGX4M5wgGRFaIy4zcVxkgZvwXtXF7mHmlnto/s400/fashion-press.jpg' width='185'/> </a><br />
<br />
</div><br />
<!--end code of 2nd Template --><br />
<br />
<!-- 3rd Template --><br />
<br />
<div class='panel'><br />
<a href='http://www.bloggertemp.com/2010/01/blogger-template-techlure.html' target='blank' title='Techlure'> <img alt='Techlure' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA0UJdyfV5XysaCkVtkwrOWGhndcpM7Q2Q7z3qj7M2Zv2MIdaieLVxm-PQTtJaY_887JDX4gUScwN6MDy2IE_LgAe6p9jruj9jhyphenhyphenOnblCzfITkPvmxiqknE7P1Rkf4AIR4V3nBYJuFysk/s640/techlure.JPG' title='Techlure' width='185'/> </a><br />
</div><br />
<!--end code of 3rd Template --><br />
<!-- 4th Template --><br />
<br />
<div class='panel'><br />
<a href='http://www.bloggertemp.com/2010/02/blogger-template-woodmag.html' target='blank' title='Woodmag'> <img alt='Woodmag' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvGy0sUKC5PM_tSFtQD7-k_T7ygueSO0Z-XtbdocTOCcU6u06kxzIhqvCGyPOXfEWXadsNIS8PTg1N54pqrgusTYj57SEaasx8V-UUJCDpucb8qCmFsvL-a2MDkrhnM6nRAlJZXiIZPjA/s640/Woodmag-blogger-template.jpg' title='Techlure' width='185'/> </a><br />
</div><br />
<!--end code of 4th Template --><br />
<!-- 5th Template --><br />
<br />
<div class='panel'><br />
<a href='http://www.bloggertemp.com/2010/02/blogger-template-showcase.html' target='blank' title='Showcase'> <img alt='Showcase' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmeBTbtbmL4KpH3ERdtOnHDKOP2jABmRP-V9y5fv5gBiefF3VnGklQhOrqshXB_Qo1eRD_Ktv3S7SbvHGC77OC42WRapKYZaKFYxHTjTGQbRL_6UXw_j8HDBlIBR2WpTQViHOxnvLHZXI/s640/showcase-portfolio-blogger-template.JPG' title='Showcase' width='185'/> </a><br />
</div><br />
<!--end code of 5th Template --><br />
<!-- 6th Template --><br />
<br />
<div class='panel'><br />
<a href='http://www.bloggertemp.com/2010/03/blogger-template-versatile.html' target='blank' title='Versatile'> <img alt='Versatile' height='135' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2IkC4qmeEdjRlLiO0NPZJcP2SzG2CexYmCCQO1JrR1Pal4Np4kj263HE2DnaI6_I768UPD4DQw0CLdwsI3bGH-hd9tMO3CrveRiAvo74qxhp8FjxH3PkkkX5v5KosUK9sIszcio6N81c/s640/Versatile.JPG' title='Versatile' width='185'/> </a><br />
</div><br />
<!--end code of 6th Template --><br />
<br />
</div></div></div></div>Replace my images and post links with yours and save it.You can add as many posts in carousel as you like but do not add too much posts because it will increase the loading time of your blog.<br />
I tried my best to help you install carousel in your blog but if you are still facing problems please mention it in comments and i will see what i can do to solve your problem.</span><br />
</div>Unknownnoreply@blogger.com6tag:blogger.com,1999:blog-5893297714399775366.post-73493442246177539182011-02-25T22:50:00.001+05:302011-03-29T19:39:22.957+05:30How to add a favicon in Blogger<div dir="ltr" style="text-align: left;" trbidi="on"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"></span></span><br />
<div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;">In one of my previous posts I talked about a WordPress plug-in that allows the non technical people to add a favicon to their WordPress blogs. Today I will show how to add a favicon to a blogspot blog without using any plug-in. Please keep in mind if you are tech savvy you can add a favicon to your WordPress blog without and additional plug-in as well.To add a favicon you need to have a favicon and there are plenty of ways to create a favicon.If you are planning on using Photoshop then you need to<span class="Apple-converted-space"> </span>download this plug-in.</span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;">If thats not possible there are plenty of sites out there that generates a favicon for you when you upload an image.Do a Google Search for "free favicon Generator" and plenty of sites would come up.I personally used<span class="Apple-converted-space"> </span><a href="http://www.genfavicon.com/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.genfavicon.com']);" style="border-width: 0px; color: #1874cd; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 2px 0px; text-decoration: underline; vertical-align: baseline;" target="_blank" title="Favicon">http://www.genfavicon.com/</a><span class="Apple-converted-space"> </span>, <a href="http://www.favicongenerator.org/">http://www.favicongenerator.org/</a> to create favicons because after uploading the image they let you select a portion of the image you want as the favicon. Set the size ( 16 x 16 ) capture and preview and you get a link to download the favicon.ico file. The whole process want take you five minutes.</span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;">Since you cant upload .ico files to blogger you need to find some free image hosting service to use and of course that service should let you upload .ico files.Since your using a service by Google I suggest you use Google page creator which lets you upload .ico files.Then get the link to the favicon file.</span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;">If thats a bit complicated for you go to<span class="Apple-converted-space"> </span><a href="http://www.iconj.com/generator.php" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.iconj.com']);" rel="nofollow" style="border-width: 0px; color: #1874cd; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 2px 0px; text-decoration: underline; vertical-align: baseline;" target="_blank">http://www.iconj.com/generator.php</a><span class="Apple-converted-space"> </span>where it creates a favicon for you and gives the facility to host if for free too.And it generates the url to be added in your header so I think this is the most easiest method for non tech bloggers.Thanks to<span class="Apple-converted-space"> </span>Military Wife<span class="Apple-converted-space"> </span>for sharing this info.</span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"><strong>Update</strong><span class="Apple-converted-space"> </span>- I'm getting comments saying that iconj doesn't work anymore. So the best option is to create the favicon using genfavicon and upload it to a free image hosting site. I recommend<span class="Apple-converted-space"> </span><a href="http://www.imageboo.com/index.php" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.imageboo.com']);" style="border-width: 0px; color: #1874cd; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 2px 0px; text-decoration: underline; vertical-align: baseline;" target="_blank" title="Image Boo">ImageBoo</a><span class="Apple-converted-space"> </span>, you don't have to register and you can upload ico files. After uploading the file select the direct link given at the very bottom. It should look like "<strong>imageboo. com/files/1zh7vnfh8qwhu9f1dinu.ico</strong><span class="Apple-converted-space"> </span>" , add that as the "your url" given in the below instructions.</span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;">Now go to your blog and click customize.Then click the Edit HTML tab and search for "title" , this should be inside the header tags.You should find something like mentioned below.</span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"><strong><title><data:blog.pageTitle/></title></strong></span></span></div><br />
<div style="text-align: center;"><div style="text-align: left;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"></span></span><br />
<div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"><strong> or </strong></span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"><strong> ]]></b:skin> </strong></span></span></div></div><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"></span></span><br />
<div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"><strong></strong></span></span></div></div><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"></span></span><br />
<div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;">Just after that line add the following line and enjoy the nice icon showing up before your url.</span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"><strong><link href='your url' rel='shortcut icon' type='image/x-icon</strong><strong>'/></strong></span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"><strong> or </strong></span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"><strong>http://i55.tinypic.com/2vsf8s5.jpg&quot; border=&quot;0&quot; alt=&quot;Image and video hosting by TinyPic</strong></span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;">**Need Help ? - For 10$, I will create the favicon for you, upload it to an image hosting site and help you add it to your blog. All you need to do is provide the image you want as the favicon.<span class="Apple-converted-space"> </span>Contact me for details.</span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;">Take your blog to the next level , Learn from ProBlogger Darren Rowse all the secrets you need to make six figures from your blog.<a href="http://www.amazon.com/gp/product/0470246677?ie=UTF8&tag=rumbllanka-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0470246677" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.amazon.com']);" rel="nofollow" style="border-width: 0px; color: #1874cd; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 2px 0px; text-decoration: underline; vertical-align: baseline;">ProBlogger: Secrets for Blogging Your Way to a Six-Figure Income</a></span></span></div><div style="border-width: 0px; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 15px 0px 0px; padding: 0px; vertical-align: baseline;"><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;">There are some basic mistakes made by blogger , especially new bloggers that can reduce there traffic , networking and money making oppurtunities. Check whether you have made these<span class="Apple-converted-space"> </span><a href="http://www.thepinkc.net/wordpress/avoid-these-serious-blog-design-mistakes/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.thepinkc.net']);" style="border-width: 0px; color: #1874cd; font-family: inherit; font-size: 13px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 2px 0px; text-decoration: underline; vertical-align: baseline;" target="_blank" title="blog design mistakes">blog design mistakes</a><span class="Apple-converted-space"> </span>and correct them as soon as possible.</span></span><br />
<span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;"><br />
</span></span><br />
<span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px;">Free Icons <a href="http://www.iconbazaar.com/">Click</a></span></span></div></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5893297714399775366.post-62314106032718949452011-02-17T00:14:00.000+05:302011-02-17T00:14:15.190+05:30Add Falling Snowflakes / Flowers / Leaves to Your Blog<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><img src="http://i289.photobucket.com/albums/ll205/lilmissberg/Backgrounds%20and%20Scenes/729642g8z5cf0f0r.gif" /><span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="color: #474747; font-family: Arial,Verdana; font-size: 14px; text-align: justify;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;"><b style="margin: 0px; padding: 0px;"> </b></span></span></span></div><br />
<span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: 'Times New Roman'; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="color: #474747; font-family: Arial,Verdana; font-size: 14px; text-align: justify;"><span class="Apple-style-span" style="font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;"><b style="margin: 0px; padding: 0px;">Steps To Follow</b>:<a href="http://draft.blogger.com/post-create.g?blogID=2648032558084820227" name="more" style="color: #1c4991; margin: 0px; outline-style: none; padding: 0px; text-decoration: none;"></a><br style="margin: 0px; padding: 0px;" />Log in to <b style="margin: 0px; padding: 0px;">Blogger</b>, go to <b style="margin: 0px; padding: 0px;">Layout</b>, click on <b style="margin: 0px; padding: 0px;">Add a Gadget</b> and select it as <b style="margin: 0px; padding: 0px;">HTML/JavaScript</b>. And add any of the two code snippets:</span><br />
<a href="" name="more"></a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<center style="margin: 0px; padding: 0px;">Falling Snow flakes: <img alt="Falling SnowFlakes" border="0" src="http://i50.tinypic.com/cueu1.jpg" style="background-color: #eeeeee; border: 0px solid rgb(246, 206, 119); margin: 0px; padding: 0px;" /></center><br />
<div><br />
</div><div><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"></span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"></span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"></span><br />
<pre style="background-color: #f2f7fb; border: 2px solid rgb(205, 218, 226); margin: 10px; max-height: 400px; overflow: auto; padding: 10px; width: 451px;"><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="font-family: Tahoma,Arial;"><script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_snowflakes.js">
</script></span></span></pre><div><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: black; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;">And to display falling leaves, use this code:</span></span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<br />
<br />
<br />
<br />
<br />
<center style="margin: 0px; padding: 0px;"><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;">Falling Leaves: <img alt="Falling Leaves" border="0" src="http://i47.tinypic.com/2zs0f44.jpg" style="background-color: #eeeeee; border: 0px solid rgb(246, 206, 119); margin: 0px; padding: 0px;" /></span></center><br />
<div><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span></div><div><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"></span></span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"></span></span><br />
<pre style="background-color: #f2f7fb; border: 2px solid rgb(205, 218, 226); margin: 10px; max-height: 400px; overflow: auto; padding: 10px; width: 451px;"><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="font-family: Tahoma,Arial;"><script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_leaves.js">
</script></span></span></span></pre><div><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span></span></div></div><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: black; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;">And to display falling leaves, use this code:</span></span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: black; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;"> Falling Leaves Snow:</span></span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: black; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;"><br />
</span></span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: black; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;"><br />
</span></span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="font-size: 13px;"></span></span><br />
<pre style="background-color: #f2f7fb; border: 2px solid rgb(205, 218, 226); margin: 10px; max-height: 400px; overflow: auto; padding: 10px; width: 451px;"><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="font-family: Tahoma,Arial;"><script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.js" /></span></span></pre><div><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><br />
</span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: black; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;">You can further customize these snowflakes (color, number and twinkle effect) by adding these additional lines of code to it. So to add a customized widget, add this code instead of the previous one:</span></span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: black; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;"><br />
</span></span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: black; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;"><br />
</span></span><br />
<span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="color: black; font-family: Trebuchet,'Trebuchet MS',Arial,sans-serif; font-size: 13px; line-height: 21px;"><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"></span></span></span><br />
<pre style="background-color: #f2f7fb; border: 2px solid rgb(205, 218, 226); margin: 10px; max-height: 400px; overflow: auto; padding: 10px; width: 451px;"><span class="Apple-style-span" style="color: #6e818c; font-family: Arial,Helvetica,sans-serif; line-height: normal;"><span class="Apple-style-span" style="font-family: Tahoma,Arial;"><script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.js" />
<!-- now, we'll customize the snowStorm object -->
<script type="text/javascript">
snowStorm.snowColor = '#99ccff';<span class="Apple-style-span" style="color: red;"> // blue-ish snow!?</span>
snowStorm.flakesMaxActive = 96; <span class="Apple-style-span" style="color: red;">// show more snow on screen at once</span>
snowStorm.useTwinkleEffect = true;<span class="Apple-style-span" style="color: red;"> // let the snow flicker in and out of view</span>
</script></span></span></pre></div></div></div></span></span></div>Unknownnoreply@blogger.com6