Tutorial Blogger.pdf

8/8/2019 Tutorial Blogger.pdf

1/17

How to Install a custom template in Blogger?

1. Download a template file (Zip/Rar) and unzip. (Screenshot 1)

2. Log in to Blogger.3. Go to "Layout" under "Dashboard". (Screenshot 2)

4. Click "Edit HTML" under "Layout". (Screenshot 3)

5. Don't forget for backup your old template. (Screenshot 4)

6. Find and Upload the new Blogger template. (Screenshot 5)


2/17

7. If a warning: Your new template does not include the following widgets, click "KEEPWIDGETS". (Screenshot 6)

8. Finish, Enjoy your new blog design.

How to Show or Hide "Navbar Blogger"

Before erasing navbar blogger (Navigation Bar), its better if I inform that this method is one of the BloggerTOS violation. If you still want to erase it, you can use the script below:

Hide Navbar:

#navbar-iframe { display:none}

Show Navbar:#navbar-iframe { display:block }

Auto Hide:#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

How to do:

In the Edit HTML page, put the code above under the code

How can I edit the Navigation Menu link o f my template?

1. Most templates have a menu that can only be changed from the HTML (Dashboard Layout EditHTML). In many cases the code to look for is:

Just find the similar code like this:

HomeAboutPost RSSComment RSSEdit

For set link on Menu, your just find a code like this href='#' and change symbol # with link what youwant.


3/17

Or, if you find the similar code like this:

HomePostsRSSComments RSS

Edit

There you can change the expr:href='#'with your own links: href='mylink'. Also see theinstructions in your template for more information.

2. Some templates include a gadget to edit the menu directly from the Dashboard (Dashboard Layout Page Elements).

How to Set SEO for Meta Tit le, Keyword and Descript ion

Find This Code:

And Change with this code:

| (example: ZoomTemplate) | (example: ZoomTemplate)

How to display the last Posts or Comments on the sidebar?

1. Enter the administrator page elements (Dashboard Layout).2. Add a new feed widget, with the following URLs:


4/17

To show the recent posts:http://BlogName.blogspot.com/feeds/posts/default

To display the latest comments:http://BlogName.blogspot.com/feeds/comments/default

How do I add my feed of Feedburner to my blog?

On the menu: Many templates show the feed in the top menu, to change the default feed for feedburner, goto your template code (Dashboard Layout Edit HTML) and search for:

Replace this with:

Now, in the settings panel of the feed ( Dashboard Settings Site Feed) also add your Feedburner URL.

How to add the comment form to my template?

Blogger recently added the Comments Form within the same template, below the individual posts, if yourtemplate does not have the form there, you may need to manually add it or activate it.

To add it manually:

1. Enter in the code of your template (Dashboard Layout Edit HTML) and search for:

2. Replace that code with the following:

To activate it:

1. Enter the options panel comments (Dashboard Settings Comments).2. And in the "Comment Form Placement" section, select: Embedded below post.


5/17

Adding " Read More" to Blogger Posts

'Read More' expandable post hack is one of the most popular blogger hacks. By default Blogger shows allthe contents from your post on your blog homepage. Having everything on your homepage will make yourblog homepage load slower. This might result in getting lower page views as your readers can read all yourposts on a single page. So, it's better to give a summary of your posts on your blogs homepage and thenadd a 'Read More' link below that post summary. Now, if a someone likes that post, he will click on that

Read More link and will get redirected to the original full post.

I would recommended this blogger trick to everyone. This will allow your readers to have a look on your blogcontents quickly. Your page will get loaded faster, you will get more page views and your blog will look nice &organized.

Here are the steps to add "Read More" hack on your blogger blog.

1. Login to your blogger account.2. Select "Layout" option from your Dashboard.

3. Now choose "Edit HTML".4. Backup your current template.5. Now click "Expand Widget Templates".6. You will see your "Edit Template" Code box.7. In that Template Code find ( CTRL + F )

]]>

8. And just after that,add these code lines:

span.fullpost {display:inline;}

span.fullpost {display:none;}

9. Now again find this code

10. And after this add these code lines


6/17

11. Now save the template.12. Leave "Layout" and go to "Settings".

Select "Formatting", at the bottom of the formatting page youll find Post Template form, just copy andpast the next code into it.

Post Before "read more"And here is the rest of it

13. Go to posts and try to post new post and you'll find the next code into post body:

Post Before "read more"And here is the rest of it

put the part of the post that you want it to appears at your blog index and archive pages instate of:

Post Before "read more" and put the rest of the post instate of: "And here is the rest of it"

click Publish Post and Enjoy.

Expand image on mouse hover in b logger post

This is a simple script who wants to expand an image on mouse hover. This initially display images at areduced size and it dynamically expands when mouse is rolled over it.

Instructions to add this widget to your blog:

Step 1:Download the file: expando.js

Step 2:Now go to www.sigmirror.com and upload the file. And copy the DIRECT LINK to the file.

Step 3:Log in to BloggerGo to "Layout" Edit HTMLand find (CTRL+F) this in the template code :

And immediately BEFORE/ABOVE it, paste this code:

/*expand images - www.bloggertheme.net*/img.expando{ /*sample CSS for expanding images*/


7/17

border: none;

vertical-align: top; /*top aligns image, so mouse has less of a change of moving outof image while image is expanding*/}

/* Expand images - www.bloggertheme.net *///

if (document.images){(function(){var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;

var expConIm = function(im){im = im || window.event;if (!expConIm.r.test (im.className))im = im.target || im.srcElement || null;if (!im || !expConIm.r.test (im.className))return;var e = expConIm,widthHeight = function(dim){return dim[0] * cos + dim[1] + 'px';},resize = function(){cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;im.style.width = widthHeight (e.ims[i].w);

im.style.height = widthHeight (e.ims[i].h);if (e.ims[i].d && times > e.ims[i].jump){++e.ims[i].jump;e.ims[i].timer = setTimeout(resize, speed);} else if (!e.ims[i].d && e.ims[i].jump > 0){--e.ims[i].jump;e.ims[i].timer = setTimeout(resize, speed);}}, d = document.images, i = d.length - 1;for (i; i > -1; --i)if(d[i] == im) break;i = i + im.src;

if (!e.ims[i]){im.title = '';e.ims[i] = {im : new Image(), jump : 0};e.ims[i].im.onload = function(){e.ims[i].w = [e.ims[i].im.width - im.width, im.width];e.ims[i].h = [e.ims[i].im.height - im.height, im.height];e (im);};e.ims[i].im.src = im.src;return;}if (e.ims[i].timer) clearTimeout(e.ims[i].timer);e.ims[i].d = !e.ims[i].d;

resize ();};

expConIm.ims = {};


8/17

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){document.addEventListener('mouseover', expConIm, false);document.addEventListener('mouseout', expConIm, false);}

else if (document.attachEvent){document.attachEvent('onmouseover', expConIm);document.attachEvent('onmouseout', expConIm);}})();}//]]>

Step 4:Now save the template.

Step 5:

Now whenever you want to show this effect to any of your post, you have to modify the linking code like this:

Normally the code you use, to link any image will look like this:

If you want to add the Expand Mouse Hover Effect to the image, then add this simple code (in BOLD) to it,like this:

(or simply)

In the above code the red color text indicates the extra function we had added to the image code. And srcrepresents the original link of your image.

How To Add "Author Box" in Blogger

Author Box is always nice to have on your Blogger blog, not only because it looks good, but it gives thereader a chance to connect with and promote yourself in one or two lines.

Style 1:

Step 1:

Login to BloggerGo to Design and select Edit HTML tabThen Click Expand Widget Templates.

Step 2: Now find [CTRL+F] this code:

]]>


9/17

And BEFORE/ABOVE that paste this code

/*-----Author Box------*/#author-box{float:left;padding:10px;

width:500px; /* Width of Author Box */background:#E2F3FB;margin:0 0 0 -30px;position:relative;-moz-box-shadow:3px 3px 5px rgba(190, 200, 211, 0.5);box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);-webkit-box-shadow: 3px 3px 5px rgba(190, 200, 211, 0.5);z-index: 100; /* the stack order: foreground */}.author-corner{background:url(http://2.bp.blogspot.com/_0s-GnnHKfng/TGaCypFvG8I/AAAAAAAAAa8/Wn2hgcv7ZAA/s1600/corner.png) no-repeat left top;bottom:-13px;

height:12px;left:2px;position:absolute;width:12px;}.author-avatar{float:left;margin:0 20px 0 0;}.author-avatar img {border: 3px solid #fff;}.author-text{

float:left;width:350px;}.author-text p{margin: 0;padding: 0;}.author-text h3 {font-size:17px;}

Step 3: Now find (CTRL+F) this in the template:

And AFTER/BELOW that paste this code

About The Author : YourName


10/17

Write something about yourself here. You can follow him on Twitter and you can connect with him on Facebook

Replace Red Color Link with your image link Replace Blue color with your Twitter, Facebook and HomepageLinks Replace Green Color Link with Your Name and description

Now Save The Template.

Style 2:

Step 1:

Login to BloggerGo to Design and select Edit HTML tabThen Click Expand Widget Templates.


]]>

And BEFORE/ABOVE that paste this code

/*-----Author Box------*/#author-box{float:left;padding:10px;width:500px; /* Width of Author Box */background:#E8E8E8;margin:0 0 0 0px;position:relative;

}

.author-avatar{float:left;margin:0 20px 0 0;}.author-avatar img {border: 3px solid #fff;}.author-text{float:left;width:350px;}

.author-text p{margin: 0;padding: 0;


11/17

}.author-text h3 {font-size:17px;}

Step 3: Now find (CTRL+F) this in the template:

And AFTER/BELOW that paste this code

About The Author : YourNameWrite something about yourself here. You can follow him on Twitter and you can connect with him on Facebook

Replace Red Color Link with your image link Replace Blue color with your Twitter, Facebook and HomepageLinks Replace Green Color Link with Your Name and description

Now Save The Template.

How to add Background Image for your Blog

Adding background image in Blogger is a great way to stylize your personal Blog, and make it stand outamong the others. This way, you can personalized it, and make it recognizable and unique.

And it's quite easy, really...

Steps to follow...

Step 1: Firstly, Log in to Blogger. Now go to "Layout" and then click on "Edit HTML" tab.


body {

The BODY code look like this

body {background:$bgcolor;

margin:0;color:$textcolor;font:x-small Georgia Serif;font-size/* */:/**/small;


12/17

font-size: /**/small;text-align: center;}

Now Replace the above red color ( background ) line with the below line

background: url('http://DIRECT LINK OF IMAGE') repeat;

Replace the blue color line with your direct link of your image

Step 3: Now save the template.

Label Cloud Widget For Blogger

A Tag cloud is a visual depiction of user-generated tags, or simply the word content of a site, typically usedto describe the content of web sites. This Tag Cloud was orginally develped by Compender.

Steps To Install Tag Cloud in Your Blogger Blog :

Step 1: Firstly, Log in to Blogger. Now go to "Design" and then "Page Elements".

Then Click "Add a Gadget" in the column you wish:

Then find the Labels Widget and that widget to your Blog

Step 2: After Adding the Label Widget go to "Design" and then click "Edit HTML" (Do not expand the widgettemplates).

Now Find This Line ( CTRL + F )

type='Label'

It will look something like this :

Now Replace that with these lines


13/17

/*Simple Blogger Tag Cloud Widgetby Raymond May Jr.http://www.compender.comReleased to the Public Domain*/

//Settings / Variablesvar max = 150; //max css size (in percent)var min = 70; //min css size (in percent)var showCount = false; // show counts? true for yes, false for novar minCount = 1; // what is the minimum count for a tag to be shown? 1 for all

//Begin code:var range = max - min;

//Build label Arrayvar labels = new Array();labels.push("");

//URLsvar urls = new Array();

urls.push("");

//Countsvar counts = new Array();counts.push("");

//Number sort funtion (high to low)function sortNumber(a, b){

return b - a;}

//Make an independant copy of counts for sortingvar sorted = counts.slice();

//Find the largest tag countvar most = sorted.sort(sortNumber)[0];

//Begin HTML outputfor (x in labels){if(x != "peek" && x != "forEach" && counts[x] >=

minCount){//Calculate textSizevar textSize = min + Math.floor((counts[x]/most) * range);


14/17

//Show counts?if(showCount){var count = "(" + counts[x] + ")";}else{var count = "";}

//Outputdocument.write("" + labels[x] +count + " " );}}

Step 3: Now Save the Template.

NOTE: You must have already added labels to at least some of your posts, to see the widget in action.

Customizing Label Cloud

You can change Font Size by editing these Lines

var max =

and

var min =

To Show Widgets Only in Home Page or in Specific Page

When you add a widget to your blog, by default the widget would appear on all pages like homepage, index,archive, post and static pages.But most of the Bloggers want to know how to show widgets only in the HomePage or in Specific Pages only, the coding is so simple.

Follow these steps:

Create any widget, and place it where-ever you want, and save the template. Check if it is working(displayed) in all the pages. Remember to give a TITLE to it, like Label,BlogRoll,Adsense, Or Unique word.

And then Go to Layout Edit HTML Click on the Expand Widget Template BoxThen find for that Title or Unique word (by CTRL+F).

It will be something like this:

.........WIDGET CODE

......

...


15/17

Now Modify This as follows

To Show Widgets only in Home Page

.........WIDGET CODE...

......

To Show Widgets only in Post Pages

.........WIDGET CODE.........

To Show Widget only in Archive Page

.........


16/17

WIDGET CODE.........

To Show Widget only in Particular Page

...

...

...WIDGET CODE.........

Replace Particular Page URL with your post URL Address.

For Example : http://yourblog.blogspot.com/2010/o5/show-widget-on-specific-pages.htmlTo Show Widgets in Pages other than Particular Page

.........WIDGET CODE.........

To Show Widget only in Static Pages


17/17

.........WIDGET CODE

......

...

To Show Widgets only in Label Page

.........WIDGET CODE.........

Replace Particular Label Name URL with your Label URL Address.For Example : http://your_blog.blogspot.com/search/label/Label_Name

Source:FAQ zoomtemplate.com & btemplates.com

Tutorial Blogger.pdf

Documents