Blogger Tutorials Archives - Page 4 of 6

Category: Blogger Tutorials

Make a Navigation Bar with Automatic Highlighted Current Links

Today we’re going to learn how to make a navigation bar for your blog using a very simple way to highlight current links automatically. This method is very easy and it uses only conditional tags from Blogger, so there is no need for JavaScript.

I will explain here the method and how to make a simple style for your navigation bar, I mean very simple. It’s up to you the way you want to style them, I will not go trough the basics of CSS, but if you follow this tutorial carefully you will get the idea and be able to do it in any blog.

What we are making

Check here the Live Demo of the result we are going to achieve, this is a very simple example using Blogger Minima Template, just so you understand the method.

Step 1 – Preparation

As I said, I am not going trough CSS basics and all that, What we are going to explain here is the method to get the result needed, if you understand it, you will be able to make on any blog.
We are going to apply the method on a general blog using Minima template, so quickly go to your Dashboard, create a new blog, choose Minima Template and Make 2 posts Called “About” and “Contact” with some Lorem Ipsum inside. You should get something similar to the live demo.

Step 2 – Tweaking The Cross Column Section

This step is not very important to the method, but as we are going to add the widget on our Crosscol section, we are going to tweak it so it becomes available to receive widgets.
Go to your Blog’s Dashboard > Layout > Edit HTML > Hit CTRL + F > Find class=’crosscol’, and you should get this:

<div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      div>

As you can notice you have these two parts on your code: style=’text-align:center’ and showaddelement=’no’, the first one make our widgets align in the center, and the second make unavailable to add any widget on your Page Elements section. So to fix it we are going to replace the whole block of code for this one:

<div id='crosscol-wrapper'>
  <b:section class='crosscol' id='crosscol' showaddelement='yes'/>
div>

Step 3 – Adding the Link List Widget

Now that we have tweaked the cross column section, we should be able to add a new widget to it, for this go to your Page Elements section, click to Add a Gadget in the section below your header.
Choose Link List from the panel, now add your links here, as you can see on the picture above, on New Site URL insert the link to your post, in the example I have used the link to my About post, and in New Site Name, the text you want on your menu. Just click Add Link to confirm. You can add as many links as wished.

Step 4 – Giving basic styles to the menu

As I said I will not go trough the basics of CSS here, so go to Layout > Edit HTML, and add the code below right before ]]>.

/* Navigation
------------------------------------------------ */
.crosscol .LinkList ul {padding:0px;}

.crosscol .LinkList ul li {
float:left;
list-style-type:none;
margin-right:1px;
}

.crosscol .LinkList ul li a {
border:1px solid #CCCCCC;
padding:5px 10px;
}

.crosscol .LinkList ul li a:hover, .crosscol .LinkList ul li a.current {
background:#ccc;
}

Basically it will make your links align horizontally, give a nice gray border to them, and make the hover and current links have a gray background.

Step 5 – Tweaking the Link List widget

Now we need to make the Link List widget behave automatically on highlighting current links, to do this go to Layout > Edit HTML > Check Expand Widget Templates and search for the following code:

<div id='crosscol-wrapper'>
        <b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

and replace for the following:

<div id='crosscol-wrapper'>
        <b:section class='crosscol' id='crosscol' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <b:if cond='data:blog.url!=data:link.target'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
       <b:else/>
       <li><a class='current' expr:href='data:link.target'><data:link.name/></a></li>
       </b:if>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
      </div>

Save it, and you are done.

Source : Blogger TuT

How to Show sidebar or widgets only on Home page or Post page

Hi to all of you today after many days i am making an article i am making this because my next post will be depended on this trick. So you have seen many blogs with showing some widgets only at homepage and some at posts page hows it possible you might have think its to easy.

1. Login in your Blogger Dashboard.
2. Then Click on Layout.
3. Click on Edit HTML.
4. Click on Expand Widget Templates.

Now Find for the widget you want to show only on homepage or post page only . if you have added any title for it then search for the title.

Just below that widget id link, You can see a b:includable tag like this..

<b:includable id=’main’>

Then Just Below it add this code to Display it only on homepage :

<b:if cond=’data:blog.url == data:blog.homepageUrl’>

To display it only on Post page add :

<b:if cond=’data:blog.pageType == “item”‘>

To Display it on any specific page then add :

<b:if cond=’data:blog.url == “Blog Post URL“‘>

Now Replace the Word in Green colors with the link.

Now we have to close b:if tag

so now before </b:includable> add this code:

</b:if>

Thats All it Enjoys friends and Wait for the Next post by me That will So much Splendid

Set as Homepage Link for bloggers

Now a days you see many leading sites with link displaying Set as Homepage. this is an good think to do with if your visitors make your site as an homepage whenever they open the browser your page will display as well as it will increase you blogs rank.

How to add this Link?
1. You can add it by selecting the Add HTML/JAVASCRIPT.
2. By Putting in the Body tag.
You have to put the Following code:

<a href=”#” onclick=”this.style.behavior=’url(#default#homepage)’;this.setHomePage(‘http://riteshsanap4u.blogspot.com‘);”>Click here to make Tips and Ticks your default homepage</a>

the Text Shown in red color is the text you have to put for diplay. and the text in Green color is the Link of your site.

Theme Request or Template Request

There are many great WordPress themes available for you. If you want a theme for your blogger template, you can request it here. Every job has its price. I only need $10 donation after I do my job. Please use the format as stated below:

Theme title:
Author:
Download link:
Demo link:
Email:

I’m not selling the templates but want people to appreciate my work. Thanks.

Read More hack for Blogger with automatic Thumbnail creator script

You have seen many a times the Read More Widget made by Hackosphere was very popular but was not able complete most of needs.

1. Major Problem
we have to add this code always.

Type your summary here
<span id=”fullpost”>
Type rest of the post here
</span>

2. This feature can be available only for future posts.

That is if you already have 50 posts in your blog and then after that you are adding this hack to your template then you need to add the above tag in each and every previous 50 posts to make this hack working. But it’s a tedious process.

3. Can’t create Thumbnails automatically

This hack can’t create automatic thumbnails for posts.

Now a new version has been developed by my blogger friends. I would like to share that new version of read more hack with you all.

Adding the Javascript

To add the javascript files to the header , first login to your blogger account. Then navigate to Layout section of your blog and then move to EDIT HTML sub tab and check ” Expand Widget Templates ” option in the edit html page.

There search for this tag : </head>

Now place the following code above that tag </head> :

<SCRIPT type=’text/javascript’> var thumbnail_mode = "no-float" ; summary_noimg = 500; summary_img = 400; img_thumb_height = 130; img_thumb_width = 281; </SCRIPT> <SCRIPT src=’http://www.smashingtips.com/wp-content/uploads/2009/05/read-more.js’ type=’text/javascript’/>

Then Add This Code
search for this tag <p><data:post.body/></p> or <data:post.body/>
Now replace that whole tag with the code below :

<b:if cond=’data:blog.pageType == "item"’>
<p><data:post.body/></p>
<b:else/><DIV expr:id=’"summary" + data:post.id’><p><data:post.body/></p></DIV> <SCRIPT type=’text/javascript’>createSummaryAndThumb("summary<data:post.id/>");</SCRIPT> <div style=’clear: both;’/> <div style=’border:0px;padding-top:5px;;float:right;text-align:right;’><span class=’readon’><a expr:href=’data:post.url’ rel=’bookmark’><img src=’http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png‘/></a></span></div>
</b:if>

You can now preview your template and then save it.

Customizing The code

Now let us see how to customize the code to suit your style :

var thumbnail_mode = “no-float”;

By default i have selected no-float. That the image will be unformatted. If you want the thumbnail to be shown only on left use the option ” float ” instead of “no-float”.

summary_noimg = 500 ;

This code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 500 characters.. you can customize it to suit ur template.

summary_img = 400 ;

If the post contains image , then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.

img_thumb_height = 130;

This tag decides the height of the thumbnail to be shown in the post. Vary the number 130 to suit your template.

img_thumb_width = 281 ;

This tag decides the width of the Thumbnail image to be shown

Adding read more image

The author of this hack haven’t included any read more buttons in this hack. But I have modified the code and have included a image to link to the full post.

http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png

If you want to change the image then replace the url of the image with your own image

or if you don’t need any read more button , then replace the code in final step to this one :

<b:if cond=’data:blog.pageType == “item”‘>
<p><data:post.body/></p>
<b:else/><DIV expr:id='”summary” + data:post.id’><p><data:post.body/></p></DIV> <SCRIPT type=’text/javascript’>createSummaryAndThumb(“summary<data:post.id/>”);</SCRIPT> <div style=’clear: both;’/><div style=’border:0px;padding-top:5px;;float:right;text-align:right;’><span class=’readon’><a expr:href=’data:post.url’ rel=’bookmark’>Read More…</a></span></div>
</b:if>

change the tag in red to suit your style.

source :http://www.techieblogger.com/

How to send content summary only for my feedburner subscribers via email?

Many of the blogger in the world uses Feedburner which is now associated with google and its leading nowadays. You have subscribed to some of the sites you like you see that some of them show only short post How do they do that ? its very simple just follow below Steps:

Log in to your blogger dashboard
Click on setting link / button
Click on Site Feed
Click on drop arrow and Select Short Instead Of Full
Click on Save.

Enjoy All the Fun this will increase your page views and Rank too.

How to make a blogger template

Many of the people think that they should make their own unique blogger template but its not to easy nowadays i have seen many generators have came in place to make blogger templates but they dont stand out our needs we can make a blogger template by the Use of CSS and HTML . yes, before making any blogger template you must have basic knowledge of these both. and must know to make any HTML page.

What is CSS?

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one

What is HTML?

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages

This both Language can be learned from the best online school w3schools

Things you Required :

An Test Blog (With an Relevant theme or little bit Supported with the theme your are going to make)
Image Editor (paint or Photoshop or any other will do)

Then you have to start it up with making the blogger template after selecting your relevant template. you have to add your CSS for blog before ]]></b:skin>
Try to learn how that CSS work and Use Div ID’s
For Example :

#example {
background : #000;
color:#FFF;
font-size:20px;
text-align:center;
}

Where i want t o add this CSS will use the following code :

<div id=’example’>
This is just an Example.
</div>

This CODE in Working :

This is an Example . For CSS

Like this you have create some Div ID’s for you template and Some DIV Classes

How to make DIV CLASSES ?

Div classes are not different from the Div ID’s . According to my Exprience div classes are usually used for Graphics
This is how Div Classes are

.example {
background:#005CB9;
color:#FFF;
font-weight:bold;
}

Where i want t o add this CSS will use the following code :

<div class=’example’>
This is just an Example.
</div>

See This Code in action :

Code In Action

My Last Tip on this Topic Is that Try to Use more of the hack about blogger available on the Web to make it perfect one.

Add TwitThis on your Blogger template and drive more traffic on your website

TwitThis is an easy way for people to send Twitter tips messages about your blog post or website. This tutorial illustrates a simple way to add a TwitThis link on each post of your Blogger template. I suggest you to try it because it’s very useful and drive a lot of traffic on your website if you have a good Twitter network.

To add TwitThis on your Blogger template you can using the code you can find here.
That code uses JavaScript. If you want use a simpler way to add it use this alternative.

HTML Code

login to your blogger dashboard
Click on Layout
preview :
Click on Edit HTML
Preview :
Check Expand Widget Templates
Preview :
Then add the Below Code Were You Want (This Code Will Only Display Link)
<a expr:href='”http://twitthis.com/twit?url=” + data:post.url + “&title=” + data:post.title’>Twit This!</a>
Note : Copy and paste the code exactly how it is in the box above! Don’t remove spaces!
Save Your Template