Full Blogging Tutorial and SEO Trick For Your Blog

Home » All posts

Expandable Recent Comments Widget for Blogger/Blogspot

Posted by Unknown

This Expandable Recent Comments is a very accessible widget that can be collapsed or expanded through user interaction, so that now, we don't have to click on the commenter or post title link in order to see the content of a comment.

recent comments widget, blogger gadgets, blogspot tricks

The expanding content can be shown or hidden by clicking on the plus/minus icon or by pressing the "Show all" or "Hide all" button at run time.

How To Add The Expandable Recent Comments Widget to Blogger

Step 1. Log in to your Blogger dashboard and go to Layout > Click on "Add a Gadget" link

Step 2. From the pop-up window, scroll down and click on the HTML/JavaScript widget

Step 3. Copy and paste this code inside the empty box:

<style type="text/css" media="screen">
.row-aa { background: #f2f2f3; }
.row-bb { background: #F8F5F1; }
.row-div {
margin:0px;
padding:5px;
}
.comment-header {
font-size:0.9em;
// border:1px solid #E0E0E0;
// background-color:#F3F3F3;
padding:4px;
margin-top:10px;
margin-bottom:5px;
}
.comment-box {
margin:0px;
padding:0px;
font-size:0.9em;
height:500px;
overflow:auto;
}
.comments1 {
// background: #F3F3F3;
padding:3px;
border-left:1px dashed #A6A6A6;
color: #888888;
font-style: italic;
padding-top:4px;
margin-bottom:5px;
}
.comment-footer {
text-align:center;
font-size:0.9em;
padding:4px;
margin-top:5px;
}
</style>

<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == 'Show all') { unfold_all(this); this.value='Hide all'; } else { fold_all(this); this.value='Show all'; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>

<div class="comment-box">
<script type="text/javascript" src="http://fe-blogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript" src="http://fe-blogger.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript" src="http://fe-blogger.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>

</div>

Note: Replace http://fe-blogger.blogspot.com with your blog/site address.

Step 4. Save your widget and you're done!

Enjoy :)

More about → Expandable Recent Comments Widget for Blogger/Blogspot

How to Optimize the Website for Bing?

Posted by Unknown

When it comes to doing SEO for Google then we get loads of articles, blog posts and other content on how we can optimize the website and get better rankings and traffic. But when it comes to optimizing the website for Bing then we have very less information from people on internet or World Wide Web (WWW).

Recently, Duane Forrester Senior Product Manager of Bing’s Webmaster Program organized a webinar on crawling basics. In this webinar he described factors Bing considers important before ranking any website for a particular search term.

Here is the summary of Bing crawling basics webinar describing important ranking factors for Bing:

Content is King: A lot of fresh and unique content is important for crawlers of Bing.
XML Sitemaps and RSS Feeds: Bing insists on using error free sitemap.xml. XML sitemap should not have URLs leading to 404 pages; Bingbot might ignore whole sitemap if it finds even one URL leading to 404 errors. RSS feeds are more important for Bing, by RSS feeds Bingbot will get update about latest content coming on website.
Robots.txt: In a survey conducted by Bing they found that most of the websites which Bingbot cannot crawl don’t have correct robots.txt file. They found that these websites have blocked crawlers from indexing the websites. So, check your robots.txt before doing SEO for the website.
Bounce Rate: Bing also considers bounce rate as a major ranking factor. If they find that most of the visitors are leaving a page before spending certain amount of time on that page, then they may rank down the website. So, keep a check on your bounce rate also. Make your website engaging enough for the visitors.
Bing Webmaster Tools: Finally, if you want to rank well on Bing then you should start using Bing webmaster tool. Benefits of using Bing Webmaster Tool are that you can have a better control on your website when it comes to indexing in Bing. Besides using an array of SEO tools like keyword research, back-link analysis etc. you can submit sitemaps, control robots.txt, URL parameters etc.

Besides all this, social media plays an important role in SEO for Bing. Hope this will help you in getting better ranks on Bing.

More about → How to Optimize the Website for Bing?

Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

Posted by Unknown

The following drop down menu is made only with CSS, is a horizontal menu with sub-tabs and the right side has a rounded search. A menu is handy for those who do not require complex menus or prefer not to use one that requires scripts and/or too many images, also the installation and customization is quite simple, and to top it off is quite functional.

To see this drop down menu in action, visit this demo blog

Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly:

From your Blogger's Dashboard, go to Template (make a backup < see the screenshot) > Edit HTML:

and search (CTRL + F) for the following line:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Screenshot

Remove the code in red.
You may have many parts as the one in red, delete all you find.

....then find this section in your template:

/* Tabs
----------------------------------------------- */

...and remove all that is within it, until you reach to the Headings part.

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */

Then add this to where the code has been removed (instead of the code in green):

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs .widget ul, .tabs .widget ul {overflow: visible;}

Having done this, we can finally add our menu.

How To Add Horizontal Drop Down Menu to Blogger

To put this horizontal menu with submenus in your blog, then follow the next steps:

Step 1. From Template, go to Edit HTML and just above ]]></b:skin> paste these styles:

/* Horizontal drop down menu
----------------------------------------------- */
#menuWrapper {
width:100%; /* Menu width */
height:35px;
padding-left:14px;
background:#333; /* Background color */
border-radius: 10px;
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:12px; /* Font size */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Submenu background color */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Submenu Background Color */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRTD9-9YVJk9MO8zl_gcaMhSNE-Z8IbSsNDtPVt7tNsNgCp5Jr5Zl46qDAI9ZruPiicnL25wzyK0kaGoM-qYai3iI0KYnNvgkN5gT9JewZWDnptsSWRNZYe-1XJxzEbkJ-ukhbhUP4QlI/s1600/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#515151; /* Background Color on mouseover */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Background on Mouseover */
background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRTD9-9YVJk9MO8zl_gcaMhSNE-Z8IbSsNDtPVt7tNsNgCp5Jr5Zl46qDAI9ZruPiicnL25wzyK0kaGoM-qYai3iI0KYnNvgkN5gT9JewZWDnptsSWRNZYe-1XJxzEbkJ-ukhbhUP4QlI/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Width of the Search Box */
height: 50px;
float: right;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;
/* Background of the Search Box */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUa5Lfajc-rwo2vESAPa4Lm5RvTrhASH2CppcYzOoTmzM-AmKYHSF5-WKqlIz3dhuvYwD4j-jHOAKcd1z7XqH6YZRmC-B8BQDSjyObRkka2O6sI8BKodhinUN-9tavSIMo-1dlSBJzrso/s1600/searchBar1.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Screenshot

Step 2. Save the Template

Step 3. Go to Layout > click on Add a Gadget link

Step 4. Choose HTML/Javascript and paste the following inside the empty box:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='Link URL'><span>Title 1</span></a></li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 2</span></a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul>
<li><a href='Link URL'>Submenu 2.1.1</a></li>
<li><a href='Link URL'>Submenu 2.1.2</a></li>
<li><a href='Link URL'>Submenu 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.1</a></li>
<li><a href='Link URL'>Submenu 2.2.2</a></li>
<li><a href='Link URL'>Submenu 2.2.3</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.4</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.4.1</a></li>
<li><a href='Link URL'>Submenu 2.2.4.2</a></li>
<li><a href='Link URL'>Submenu 2.2.4.3</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.2.5</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.6</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.6.1</a></li>
<li><a href='Link URL'>Submenu 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.3</a></li>
<li><a href='Link URL'>Submenu 2.4</a></li>
<li><a href='Link URL'>Submenu 2.5</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 3</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 3.1</a></li>
<li><a href='Link URL'>Submenu 3.2</a></li>
<li><a href='Link URL'>Submenu 3.3</a></li>
<li><a href='Link URL'>Submenu 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 4</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 4.1</a></li>
<li><a class='fly' href='Link URL'>Submenu 4.2</a>
<ul>
<li><a href='Link URL'>Submenu 4.2.1</a></li>
<li><a href='Link URL'>Submenu 4.2.2</a></li>
<li><a href='Link URL'>Submenu 4.2.3</a></li>
<li><a href='Link URL'>Submenu 4.2.4</a></li>
<li><a href='Link URL'>Submenu 4.2.5</a></li>
<li><a href='Link URL'>Submenu 4.2.6</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 4.3</a></li>
<li><a href='Link URL'>Submenu 4.4</a></li>
<li><a href='Link URL'>Submenu 4.5</a></li>
<li><a href='Link URL'>Submenu 4.6</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 5</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 5.1</a></li>
<li><a href='Link URL'>Submenu 5.2</a></li>
<li><a href='Link URL'>Submenu 5.3</a></li>
</ul>
</li>


<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Search here...";' onfocus='if (this.value == "Search here...") this.value = "";' size='28' type='text' value='Search here...'/></form>
</li>

</ul>
</div>

Customization:

- replace the text in blue and red with your links and titles.
- if you need more tabs, then add a line like this just above

<li class="top"><a href="Link URL" class="top_link"><span>Title</span></a></li>

- if you want to add a tab with sub-tabs, then add this code:

<li class="top"><a href="Link URL" class="top_link"><span class="down">Title</span></a>
<ul class="sub">
<li><a href="Link URL">Submenu Title</a></li>
<li><a href="Link URL">Submenu Title</a></li>
<li><a href="Link URL">Submenu Title</a></li>
</ul>
</li>

- and if you want one of the other sub-tabs have sub-tabs then remove a line like the one in orange and change it to a code like this:

<li><a href="Link URL" class="fly">Submenu Title</a>
<ul>
<li><a href="Link URL">Other Submenu</a></li>
<li><a href="Link URL">Other Submenu</a></li>
<li><a href="Link URL">Other Submenu</a></li>
</ul>
</li>

And that's it! Now Save your Widget and enjoy your new drop down menu! ;)

More about → Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

How To Use The New Blogger HTML Editor

Posted by Unknown

The Blogger template editor now includes a number of changes that seem interesting and make it much more friendly than it was.

To begin with, what we see now is all the template's code starting with numbered and colored lines showing us different code snippets: tags, variables, properties, etc.. depending on the HTML, CSS, JavaScript and even the language of Blogger - include, b:if and other occurrences.

blogger template, blogger tricks, blogger widgets

This is what any decent external editor does, but certainly, from now on it will be much easier to find that little bug that drives us crazy when we omit quotation marks or add one more semicolon. This also applies to CSS, which appears mostly in dark blue without distinguishing selectors and rules, but the rest is a major improvement.

Another great help are the numbers that appear in front of each fragment of code, so that we can easily pinpoint and correct errors of this type: "Error parsing XML, line 103, column 9: The element ... "

Using the New Blogger Template HTML Editor

When you want to search for a code in the HTML editor, click inside the editor and press CTRL + F on your keyboard, then enter what you want to find in the search box that appears inside the editor.

Finally, hit the "ENTER" button on your keyboard and it should take you to the requested code.

If you want to be taken to the section of code that belongs to a particular widget, just click on the Jump To Widget button at the top of the editor, choose the widget's name from the list and it will take you directly to that portion of code.

The CSS rules can be found folded at the top of the template, between <b:skin>...</b:skin> and <b:template-skin>...</b:template-skin> tags. To expand them, you have to click on the sideways arrow next to the line number.

Another great functionality is that now we can Preview Template in the same window without needing to leave the page and we can easily go back to customize our template by clicking on the Edit Template button.

Finally, Format template re-orders the code, adding indentation automatically.

As always, we must use the Save button for the changes to take effect or we can Revert the changes.

And that's it. With a bit of effort, we can easily familiarize with this new HTML editor. Surely as usual and even reasonable to be something inherent in the human condition, this change does not appeal to many. Same with the Lightbox for images, the new template designer, the new desktop and other new things that have been added in the past. But who now remembers that they once were new?
----------
For more info, check out this post on the Blogger Buzz blog, where Google software engineers +Samantha Schaffer and +Renee Kwang explained the steps for moving the date of a blog post from above the post title to underneath it, as an example in using the new Blogspot HTML editor.

More about → How To Use The New Blogger HTML Editor

Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

Posted by Unknown

Sometimes we want to have everything organized so that our readers can find topics of interest more easily, and that's when instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that we'll be able to show the latest posts for each label we want and also display a thumbnail for our category.

recent posts, blogger widgets, blogger gadgets

Screenshot

To add this cool gadget/widget for the latest categories, just follow the next steps:

Steps

Step 1. From your Blogger Dashboard, go to Template/Edit HTML

...then tick the Expand Widget Templates checkbox:

Step 2. Search for this piece of code:

]]></b:skin>

and just above it, paste this one:

/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

.label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

.label_with_thumbs a { text-transform: uppercase;}
.label_with_thumbs strong {padding-left:0px; }

Step 3. Now search for this tag (CTRL + F)

</head>

...and add the following script above it:

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=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=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRG222UAfMWrON2uWFItTqGJNhJoeNGNy2dI72nG7D8vUcSqmZP5oFsLClpkrk6wT22MvM3i0spW9fEzWqmD2QhyphenhyphenUJHJzGrCxYKYdHEDmuxcvJdOCpo6bLGY2ngCGRqT_2W3ZtmmdBes/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Note: to add your own pic for the posts with no thumbnail, replace the image url in blue with your own

So we have added the Css to style the widget and the script to make it work. Now all we have to do is to add the widget's code to the blog sidebar in a Html/Javascript gadget:

Step 4. Go to Layout - click on Add a Gadget

Step 5. Choose the HTML/Javascript widget and paste this code inside the empty box:

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>

Note: Where it says Name-of-the-label is the name of the label you want to display, and if your label is case sensitive, like in my example, then you should type it that way.

Also within the last code, there are parts that we can customize, just change true with false or vice versa:

var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the read more link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)

Remember that the gadget displays the latest posts from a particular label, therefore, if you want to display the latest posts from other labels then just repeat step 5 for each additional category you want to add.

That's it :) Enjoy!

More about → Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

CSS Basics. How to Apply Rounded Corners On Images #2

Posted by Unknown

blogger tricks, css tricks, border radius

In the previous post I have mentioned that we will learn to round images using CSS, without needing to edit them one by one using a program. Now that we have seen the basics of CSS, let's try to apply to some images.

What we will do is to upload an image as normal (HTML) and then add some rules in our style sheet that will transform the outer shape as a circle... or at least to appear round. This will depend on the proportions of image that we use.

In fact, we can apply this effect to any image, to all of an area or to all in our blog. That depends on your tastes.

Marking up HTML

Obviously the first thing we need for in order to round an image is an idem. The code could be more complicated, but an image is built within the img tag and basically looks like this:

<img src="image_URL"/>

Screenshot:

This is how we make it look something like the one from the left. Normally, it should also keep an alt text and sometimes it carries some forced dimensions (with width and/or height). When you upload an image, the code inside the Blogger editor also contains a link that is pointing to the original image.

But if we want to modify this image using CSS, we need to incorporate a class selector. We can add it in two ways: within the img tag or to a parent box. The name that I have chosen for the selector is roundedcorners:

<img class="roundedcorners" src="image_URL"/>

<div class="roundedcorners">
<img src="image_URL"/>
</div>

Applying style to all homogeneous elements

But that selector alone will do nothing. It needs to be linked to a style rule that tells what to do with it. As much as we add classes, if these are not defined in the CSS, the appearance of the image (or a certain element) will not change.

To change the shape of all the images on our blog, this would be what we should add to our CSS:

img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-moz-border-radius: 900px;
}

And how it translates to your browser? As follows:

Search for images by name tag (img) and apply the following style:

a solid green border of 2 pixels
margins (space outside the border) and padding (space inside the border) is set to zero
the image is round at the four corners

Now that we have this rule in our style sheet itself, we can see the picture as we wanted - see the example on the right.

To declare a property correctly, we need to know what it does and how to write and you can find more info in many places, although W3C is the authority in this.

For example border-radius requires initially 4 values reading from left to right that represent the roundness of the upper-left, upper-right, lower-right and lower-left corner. If you put a single value is understood that all four will be equal to that.

You should also know that when the value of the border exceeds the dimensions of the box, this border is adapted to form a circle.

How to Apply Style to the Elements of the Same Block

But surely we do not want all the blog images to be round, but only those that we choose, otherwise adding the above style in the head tag will make all of our blog images to take this shape. Before we used an HTML tag (img) and not a selector and that is why the style will affect all images.

To avoid this, we can do one of the things we saw at the beginning and that was to put the image inside a div with the roundedcorners class. In this way, only the images that are in a box with that class will be affected by the rule that will make them round.

<div class="roundedcorners"><img src="image_URL"/></div>

But the rule then should not attack the img tag directly, but the roundedcorners selector. In this case, you should write it like this:

.roundedcorners img {
border: 2px solid #BADA55;
....
}

This means that this style applies only to images that are in a box with roundedcorners class.

Epilogue

To close the subtopic of rounding images, you have to keep in mind that if these are not square, instead of becoming circular, they will look oval.

To fix this we should add the width and height with the same measure (value in pixels), that is to force the image cropping and to make it appear perfectly circular. That was all!

If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below ;)

More about → CSS Basics. How to Apply Rounded Corners On Images #2

CSS Basics. How to Apply Rounded Corners On Images #1

Posted by Unknown

This tutorial will explain how to change the outside border of any image using some simple CSS rules to make it round, but this is so easy to do, that I'm finally going to make this entry for other purposes.

rounded corners, css tricks, blogger tricks, blogger design

The trick today that I'm going to publish in two parts is to help to understand at least a little of what CSS (Cascading Style Sheets) is. But very briefly that I'm not able to do a good comprehensive manual on the subject. For those who want to see a bit more, take a look at this link and for those who really want to learn thoroughly, I recommend to visit this site.

Introduction and terminology

Style sheets aim to help sort out what is the structure of a website and which is its format, its appearance. Thus, the CSS box model is essentially a box that wraps around HTML elements, and it dictates how those boxes are presented in terms of colors, fonts, width, backgrounds etc.

The advantage is that if in the future we decide to change something, we don't have to change all the pages one by one, but simply change the properties of one kind or another box from the style sheet and these changes will automatically apply in all the pages.

The style sheet is a set of rules, in turn composed of selectors and declarations. The selector is to be used as a nickname or name of what you want to configure from the sheet and apply to the HTML and declarations are properties that are assigned to the desired values (more information on CSS syntax)

Adding the CSS selector

Once we put for example the one above in our style sheet, we see that in our website... nothing happens. I said that the selector is what relates HTML and CSS so that if we want a box to take these values for width, background color, border and font size (that's what we defined earlier), we need to include the selector, thus:

<div class="SelectorName">Text here</div>

What we have added is a rule that tells the browser to interpret that this box has to be of a certain type or class. A class that was mentioned earlier is called selector having some specific properties and values defined in the style sheet.

Now we'll see how this will change the look of the box, while all others that don't have the SelectorName name will follow the standard appearance.

Therefore, when we include a rule in a style sheet, or modify an existing one, what happens is that all boxes marked with that selector will change their appearance according to the properties-values that we have defined.

On the contrary, if we want that an unmarked box to change its appearance with the CSS rules defined, we'll add the appropriate selector.

Where to add the CSS style

The style can be put in a CSS file. The file is created with all the rules, you get the address and then include the following line in the header of your template. For Blogger, you can add it between <head> and <b:skin><![CDATA[/*:

<link href="syle.css" rel="stylesheet" type="text/css"/>

Note: in blue is where the address of your CSS file should be added.

You can also add the style directly mixed with HTML, inserted between the style tags:

<style>
.SelectorName {
background-color: #EAEAEA;
border: 1px solid #444444;
width: 200px;
font-size: 12px;
}
</style>

It can be inserted into a particular box, as well. In this case, you do not need to add any selector to indicate where the CSS style is:

<div style="background-color: #EAEAEA; border: 1px solid #444444; width: 200px; font-size: 12px;">Text here</div>

In Blogger the rules are between the skin tags, which means they are between <b:skin><![CDATA[/* and ]]></b:skin>. If you edit the template, will find that there are many things in between. All this is CSS that marks the appearance of your blog.

In case we want to see the effect after changing the value of some propriety, we can click on the Preview button. We can also remove anytime a declaration or add another to the desired selector.

For those who don't want to touch the template, you can add the CSS directly by going to the Advanced section > Add CSS of your Template Designer.

That's enough for today. The next tutorial will discuss in more detail about how to add rounded corners to our images using CSS.

More about → CSS Basics. How to Apply Rounded Corners On Images #1

10 Places to put Adsense ads in Blogger

Posted by Unknown

This article will discuss about the more common 10 places on our blog where we can place ads and about how to implement them and also which are the most suitable formats based on those available in our AdSense account.

Advertisements

In the Sidebar

How to implement.

This is one of the easiest places to place AdSense. Just go to the page elements (layout), click on the "Add a Gadget" link and add an HTML/Javascript widget with your ad code inside it or add directly an AdSense widget.

Recommended formats: 125 × 125, 120 × 600 and 160 × 600

Between posts

blogger posts, blogger tricks, adsense ads

Implementation. You can implement AdSense ads between your posts: go to Layout, click on the "Edit" link below the Blog Posts section, then check the "Show Ads Between Posts" option.

Recommended formats: 468 × 60, 300 × 250 and 336 × 280

Under the header

Implementation:

Firstly, convert your AdSense ad code. You can use this converter here:
AdSense Ad Converter

Then, go to your Blogger Template (from your Dashboard, click on Template and press the Edit HTML button) and search for:

<div id='header-wrapper'>

Then paste the converted code right after it.

Recommended formats: 728 × 90 and 728 × 15

Above the blog posts

Implementation:

Convert your ad code and search for <div id='main-wrapper'> in your template.

Paste the converted code right after it.

Recommended formats: 460 × 68, 468 × 15 and 336 × 280

Under the title of the post (this will be visible on all the pages)

money online, blogger tricks, how to blogger

Implementation:

Convert your AdSense ad code and then go to your Template, Expand Widget Templates and look for:

<div class='post-header-line-1'/>

Note: if you can't find it, search it without the ending slash /

Paste the converted code right after it.

Recommended formats: 468 × 68 and 468 × 15

Under the post title (visible only on the posts pages)

Implementation:

Convert your ad code and then go to your Template, Expand Widget Templates and look for:

<div class='post-header-line-1'/>

Note: if you can't find it, search it without the trailing slash /

Paste the converted code, following this example:

<b:if cond='data:blog.pageType == "item"'>



</b:if>

Recommended formats: 468x68 and 468x15

In the posts' footer

Implementation:

Convert your ad code and then go to your Template, Expand Widget Templates and look for:

<p class='post-footer-line post-footer-line-3'/>

Note: if you can't find it, search it without the trailing slash /

Paste the converted code right after this line.

Recommended formats: 468x68 and 468x15

In the post's body (it will be visible on all pages)

Implementation:

Convert your ad code and then go to your Template, Expand Widget Templates and look for:

<div class='post-body entry-content'>

Note: in case you don't fint this code, search only for <div class='post-body'>

And paste the converted code, following this example:

<div style='float:right'>



</div>

Recommended formats: 125x125, 180x150, 120x240 and 200x200

In the post's body (visible only in post pages)

Convert your ad code and then go to your Template, Expand Widget Templates and look for:

<div class='post-body entry-content'>

Note: in case you don't fint this code, search only for <div class='post-body'>

And paste the converted code, following this example:

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right'>



</div>
</b:if>

Recommended formats: 125x125, 180x150, 120x240 and 200x200

Between post and comments (visible only on posts pages)

Implementation:

Convert your ad code and then go to your Template, Expand Widget Templates and look for:

</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>

Paste the converted code just above it, following this example:

<b:if cond='data:blog.pageType == "item"'>



</b:if>

Recommended formats: 468x60, 300x250 and 336x280

In the blog's footer

blogger footer, adsense ads, make money online

Implementation:

Convert your ad code and then go to your Template, Expand Widget Templates and look for:

<div id='footer-wrapper'>

Paste the converted code right after it.

Recommended formats: 728x90 and 728x15

FAQ

I anticipated some questions likely to arise:

I can't find the codes, what should I do?
Always check the "Expand Widget Templates" checkbox. These are the default codes of Blogger and should be found in all the templates unless they have been changed by a hack or the template designer.

Why should I convert my AdSense code?
The Blogger's Template reads it as text and not as code and it is good to avoid any errors when trying to save it.

The ads are not displaying properly, why is that?
The ads could be affected by the styles (CSS) selectors (divs) containing them and some templates could be wrong designed, then you should consider modifying these styles, look for another relevant place or in extreme cases, change the template.

Can I put the all 10 codes on my blog?
No, you should choose just one of the places where you want to put the ads considering that AdSense have some limits on the number of ads that could be displayed. Try to make a balance with your content.

Why we there should be only 3 ads displayed on the main page?
Is due to the limit set by the AdSense. Combine the type of ads (text, rich media ads and link units) to be able to show the number of ads you want.

Hopefully, this will be useful to those of you wanting to display AdSense ads on your blog.

More about → 10 Places to put Adsense ads in Blogger

Pages

Expandable Recent Comments Widget for Blogger/Blogspot

How to Optimize the Website for Bing?

Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

How To Use The New Blogger HTML Editor

Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

Related Posts Widget with Thumbnails and Summary for Blogger

CSS Basics. How to Apply Rounded Corners On Images #2

CSS Basics. How to Apply Rounded Corners On Images #1

10 Places to put Adsense ads in Blogger

Translate

Total Pageviews

Popular Posts

Labels

Blog Archive