Add Favicon icon to Blogger URL

Have you wondered how these little icons appear next to the web addresses, like the one you see above? When you visit the sites or bookmark them, these icons will make these URLs stand out. These are “Favicons” or “Favorite Icons”.

You would first need to have an icon which you would like to use, bearing the extension .ico format. If you search your hard disk, you might find some icons which are generic. I would suggest that you create one to represent your own unique identity. There are quite a number of free icon editor software which you can download from the net.

As for myself, I went to Download.com site and downloaded a very small program called Imagicon which can transform images into .ico format. I created an image using Photoshop. You can use any image or pictures if you do not wish to create one. Next, run the program. It is rather simple to use. While you can create icons in 2 sizes – 16x16 and 32x32 – I would think a 16x16 icon is preferable since it is readable in most older browsers.

If you do not wish to download any software, you may also try creating an icon online. Just enter the keywords “online icon generator” into your Google search bar, and you should be able to find several programs that you can try.

Enter your search terms Submit search form

Once you have created an icon, save it into your hard disk. The next step of attaching the icon is a little tricky. Ideally, all you need to do is to save it in the root directory of your blog site. Nevertheless, there is no way this can be done. For one, if you try to upload an icon image, Blogger will reject it. Two, any file that is uploaded will not go into the Blogger root directory.

The only method to use will be to upload the icon into some web folder, and create a link. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and allows uploading of .ico files.

Once you have done that, take note of the URL of your icon. If you are using Google Page Creator, hovering your mouse over the link, you will see that the file is stored under a directory which looks like this http://yourname.googlepages.com/iconname.ico
where “yourname” is your Gmail account name, and “iconname” is the file name. Copy this URL.

Go back to your Blogger dashboard and under the Template tab, go to “Edit HTML”. Near the top you will see a line like this:-

<title><data:blog.pageTitle/></title>

Update:

Copy and insert the following code below the line:-

<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Inserting this will also work but the former is preferred:-

<link href='URL of your icon file' rel='shortcut icon' type='image/x-icon'/>

Remember to type in the “URL of your icon file”.

Save the template. When you refresh your blog site, you should see your nice little Favicon next to the blog address.

Other image types

The .ico image format has been used by many but you can also create an image under the .png or .gif format. Ensure that the size of the image is either 16x16 pixels or 32x32 pixels.

If you have a PNG format image, the link to insert is:-

<link href='URL of your icon file' rel='shortcut icon' type='image/png'/>

If it is a GIF format image, the link is:-

<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>

External Domain

For those who have hosted sites in external domains, insert the link in the root directory as well. Otherwise, you can upload the file into the root directory and name it favicon.ico

As an example, if your domain name is www.domain.com, the URL of the favicon will be www.domain.com/favicon.ico

This method is not preferred but a number of browser versions are able to process the icon. Since we do not have external domains to try out this alternative, you may want to see if it works for you.

Compatibility

While you can see the Favicon in Mozilla Firefox, many have problems seeing the Favicon in Internet Explorer. This is a known problem and has been a sore point with many IE users. In some versions of IE, bookmarking the site will display the Favicon. This is not necessarily so in IE7 that we are using. In fact, when we bookmarked the highly popular search engine sites, their Favicons don't show in our IE bookmarks too although they show well in Firefox. Perhaps this is one more reason to download Mozilla Firefox if you have not already done so.

code

Page Views / Post Views Counter Widget For Blogger.

As a blogger for very long time, I’m sure that every blogger wants to know how many times his new post viewed.
A lot of visitors contacted me about this widget and asked me if it’s possible to do it in blogger.
So today i’ll show you how to do it in blogger,
It’s very easy to do and there are 2 styles for this widget.

How To Add this widget For blogger.

This is very easy to do it two steps, step 1, choose your widget style,
and step 2, pate it’s code in your blogger template code.

Step 1. Choose the style And get your code.

• Style 1. ( With Icon ) code,

Highlight Author Comment in Blogspot

This trick is to give a Highlight Author Comment . This will make the blog's owner comments looks different from the visitors comments. It's very usefull and interesting blogger hack tips. You can see the example in my blog. Here is what to do to make a "Highlight Author Comment" effect in Blogspot.

1. Login to blogger, then choose "Layout --> Edit HTML". Don't forget to backup your template first.
2. Check the "Expand Widget Templates" box.
3. Copy this script and put it before ]]></b:skin> or copy to your CSS area.

.comment-body-author {
background: #E6E6E6; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}

4. Then find this code:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

5. The red color text is the code that you have to add to your script. The position must be right.
6. And then save your template.

Adding FaceBook Share button for blogger posts.

A lot of my friends and visitors asked my about how to add share on facebook button in blogger (blogspot),

And this question repeated many times specially after I posted a tutorial about How To Add Retweet Button To Blogger (Blogspot ).


Today we’ll learn how to do it in a very easy way.

About The Widget.

This is the official facebook sharing button and here are it’s features.

• 2 Styles. Button Or Link
• With / without Counter.

Step 1. Get Your Code.

Go to this page click here,


And make your button ( customize it ). there are some easy options and you can check the preview button to see your button.

See the following image to see the button different styles.

After Finish you button customization, please copy your button code and go to the next step.

Step 1. Add It To Your Blogger Blog.

Log into your blogger account, and go to Layout >> Edit Html.

Before doing any thing you must check Expand Widget Templates box.


And find the next Code

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

And after it, paste your button code we made the button it in step 1

What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the button code Before it.

That’s It.

Theo allblogtools 

Disable right click on blogger blogspot

You’ll learn in new blogger trick to disable

right click in your blog pages.

Blogger tricks and hacks

Right click on any internet browser is very important element.

and we must use it when it comes to copy or editing texts and etc..

and it’s very important when it comes to webmasters too.

but some people may use it in a bad way, and you may want to make click right disabled on your blog.

to protect you text, images links and etc….

so all what you have to do is only simple step.

you’ll need to add new html/javascript element to your layout.

now go to your blogger account.

navigate to Layout >> Add a GadGet >> and select html/javascript

then copy the next code and past in in html/javascript text box area

^?View Code HTML

<script language="JavaScript"><!-- //Disable right mouse click Script//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive//For full source code, visit http://www.dynamicdrive.com var message="Function Disabled!"; ///////////////////////////////////function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}} if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;} document.oncontextmenu=new Function("alert(message);return false") // --> </script>

then save the html/javascript. and view you blog.

when you try to do right click. a message will tell you that “Function disabled”

and if you want to change this words” Function Disabled”

find the next line in the code

^?View Code HTML

var message="Function Disabled!";

and change Function Disabled! to what ever you want.

i hope it helps.

Theo allblogtools 

How to add “Email Subscription Form” to your blogger blog (blogspot)

One of the best ways to keep your visitors come back to your blog, is to let your visitors know about your latest blog updates. and make them feel that you updating your blog regularly.

and the best way to do this is by adding “Email Subscription Form” to your blog, so your Subscribers will receive your new content and posts in their Email Inbox.

and it’s very easy to add email or feed Subscription Form to your blogger blog (blogspot).

so let’s do it,

1. you have to sign in your feedburner account, if you haven’t got on yet. you can log in using your google account, or you can register you free account

go here and click Create an account

2. Once you logged in your feedburner account, find Burn a feed right this instant and enter your blogger blog url and hit Next

3. now you’ll Give your feed its title and it’s Url and click next.

at the next page ( Congrats! Your FeedBurner feed is now live. ) click Next

Now you are on ( Get More Gusto From Your Feed Traffic Statistics. ) page, customize your options on this page and click Next

4. now your are in your feedburner dashboard
click On Publicize.

5. On left sidebar click Email Subscriptions and then click Activate.

6. Now Select language and copy the code

7. Go To your blogger account and Go To layout>add a Gadget> And Select html/javascript

then past the code into html/javascript window and click SAVE THE CHANGES.

then move this html/javascript to your favorite place, may at your sidebar (recommended)

Now your form it ready for your visitors.
Enjoy

Theo allblogtools 

Display Related Posts with Thumbnails In Blogger

The most important thing for blogger is the traffic, the visitors, and he works very hard to get a lot of visitors every day,

but what to do after getting good number of visitors.

You have to make your visitors keep return to your site and spend more and ore time on your site.


and one of the most effective way to do this is to convince your visitors that you still have more high quality content.

after a visitor finish reading one of your blog posts, he should find some thing related to his interests.

so you may want to make it easy for him to find another related content on your blog,

and the best way to do it, is to use a related posts script, to display list of related posts, not only the posts titles, but thumbnails too.

And we’ll use one of the best widgets for this process, it’s linkwithin.

What Is linkwithin

linkwithin is a free widget enable us to display list of related posts with thumbnails at the posts footer.

at the moment you can choose one of three factors that determine the posts that appear in list. the 3 factors are

• Relevance
• Popularity
• Recency

How To Add Related Posts With Thumbnails linkwithin linkwithin WidgetTo Your blooger Blog

It’s easy to add this widget to blogspot, there is two ways to add it, and every one have to choose the Proper way.

If You Use One Of Blogger Standard ( Default ) Templates.

if you use the standerd templates just go to LinkWithIn.com

you’ll find a small form on right, fill it, and choose blogger as your platform. and and follow the instructions.

after installing the widget in this way you’ll see You may like these related stories at your posts page after each post, at your main page, and at your search results page.

If You Use A Customized Templates.

This way is used to add the widget to your blog if you:

• Use customized blogger template
• Want to customize the widget for your blog

Step 1

Go to LinkWithIn.org,

Fill the form on the right-hand side, but for Platform choose Other

then click Get Widget you’ll be in a page called Install Widget on Other Platforms


and you’ll see a code there. don’t copy the code but find linkwithin_site_id as you see in the image. find it and copy it, it should be someting like this

48394 then save it in a notepad file or save it any where.

Step 2

Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the “Expand widget templates” box.

and use your browsers finder and find this tag

<div class='post-footer'>

or similar tag, you must find post-footer tag.

Step 3

once you find it, just before it past the following code.

<b:if cond='data:blog.pageType == "item"'>
<script>
var linkwithin_site_id = YOUR_SITE_ID;
(function () {
var elem = document.createElement('script');
elem.type = 'text/javascript';
elem.src = 'http://www.linkwithin.com/widget.js?rand=' + Math.random();
document.getElementsByTagName('head')[0].appendChild(elem);
})();

</script>
<a href="http://www.linkwithin.com/"><img
src="http://www.linkwithin.com/pixel.png" alt="Blog Widget by LinkWithin"
style="border: 0" /></a>
</b:if>

Step 4

Change YOUR_SITE_ID To your own saved ID > in step 1.

Step 5

Review your template and see if it works or not.

and that’s it.

Theo allblogtools 

Surprise, Blogger Now officially Supports “Read more” links.

we’re all waiting for this, Official “read more” links in blogger posts, Easy, guaranteed, and officially supported by Blogger.

For years and years all blogger users tried to place the read more links in blogspot blogs.
we published a tutorial here on allblogtools.com about this hack and how to do it by manually editing template HTML.

but it wasn’t working probably with all bloggers.

few days ago, blogger announced their latest birthday present:Blogger Jump Breaks.

By using Jump breaks you can show only a snippet of your post on your blog index page and archives.
Blogger will insert a read more link after each post so your readers can keep reading by clicking on this link.

How To Use Blogger Jump Breaks.

Actually there is two ways to use Jump Breaks.

1. If you use bloggers new post editor

If you use bloggers new post editor, ( you can use it by enabling it via the Settings tab at your blogger dashboard )
You’ll find that there is new icon on the tab called “Insert jump break”

So while writing your post just click with your cursor where you want to add the Read More Link, And then, click on “Insert jump break” icon.

2. If you don’t use the new blogger post editor

You can insert the read more link buy clicking on Edit Html tab while writing your new post,

And insert

 <!-- more -->

where you want the read more link to appear.
do it’ll look like the next image.

How To Customize Blogger Jump Breaks.

You can change the text “ Read More > ” by going to Dashboard >> Layout >> then Edit the Blog Posts widget.

And change it to what ever you want.

Theo allblogtools

Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.

Hi dear friend,

I promised you in a previous tutorial, here ” Blogger Now officially Supports “Read more” links. ” that i’ll add a tutorial about customizing your read more links in blogspot.

So you have to check out the previous tutorial if you are not familiar with the new blogger jump breaks addition.

Now is the time for this tutorial,

after reading this tutorial you’ll be able to Customize you read more links in those ways:

• Change the text ” read more ” to another words.
• Add An Image / Button To Your “Read More / Jump Breaks ” In Blogger Links Instead Of Plain Text
• choose your read more link / button to be displayed on left side, right side or center it.

so lets start,

Please download a copy of your template before applying any changes.  

First Step, You Must Do This Step

this code should be included in your blogger template,

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More </a>
</div>
</b:if >

i’ll tell you where to add it, but before you add it, make sure that it’s not already included in your template.

Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for the code,

if you found the code in your template, ok you have to skip this step

but before you skip it,


make sure that the third line in the code looks like this

<a expr:href='data:post.url + "#more"'>Read More </a>

And not

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

if you found it like the second one, please replace it with the first one

if it’s not in your template you’ll have to add it, and i’ll tell you where you should add it.

Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for this code,

<data:post.body/>

and just after it, add the next code,

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>

<a expr:href='data:post.url + "#more"'>Read More </a>
</div>
</b:if >

Now we finished adding the require code for customizing this trick.

Lets start customizing

1.Change the text ” read more ” to another words.

this is the easiest on ever,

after applying the first step to your template, you should have this code added to your template :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

This code will display your read more link in this format : Read More

and to change it to another word, simply, change the word Read More in the code in your template to what ever you want, Example? Keep reading, continue reading, read the rest, and more.

After changing it, click Save template and check out your blog.

2.Add An Image / Button Instead Of Plain Text

Ok, now again, after applying the first step to your template,


you must have this code added to your template

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

This code will display your read more link in this format : Read More

and to change the text to image / button , we should replace the word Read More in the code with the following

<img border="0" src="Paste here the button Image URL"/>

so you should have some thing like this

<img border="0" src="http://www.allblogtools.com/image-url.jpg"/>

After changing it, click Save template and check out your blog.

And here is some good samples for read more buttons :

And you can find more buttons by searching in google for “read more button”.

3. Control the read more link or button alignment, left, right Or center.

lets back again for the first step, after applying the first step to your template,

you must have this code added to your template after applying first step.

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>

</div>
</b:if >

this code will display read more link in default format, and your template may display it at left or right, but if you want to control where it’ll be displayed, you should add small tag for the code, and the new added tag in blue color.

<b:if cond='data:post.hasJumpLink'><div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="xxxx">Read More</p></a></div></b:if >

and you can replace the xxxx with Left, right, or center.

any in this way you can control the position for your link or button.

and here is some examples to help you

Example 1

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="Left">Read More</p></a>
</div>
</b:if >

This will display read more in pain text aligned to left

Example 2

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="right"><img border="0" src="http://www.allblogtools.com/image-url.jpg"/></p></a>

</div>
</b:if >

This will display read more in image button aligned to right

i wish this can help you, you comments are welcome, and please share it if you found it useful

Theo allblogtools.

Share the love, Sharing And Bookmarking Widget For Blogger Posts

hi all. it has been a long time since i posted the latest trick about how to add social bookmarking button for blogger

since social bookmarking is very important factor when it comes to blogger seo and links building.


,today i’ll do it again but i’ll use amazing widget, looks very stylish,

and our trick today, will be done in only three simple steps, to see demo for this widget before we start, kindly click here.

please scroll down to the post bottom to see the widget.

with this blogger widget your visitors will be able to share and bookmark your posts with the following networks.

• Stumbleupon
• Digg
• Reddit
• Delicious
• Yahoobuzz
• Blinklist
• Technorati
• Facebook
• Twitter
• Myspace
• Mixx
• Scriptstyle
• Designfloat
• Comfeed
• Newsvine
• Linkedin
• Google
• Friendfeed

now let’s go,

Caution : Please backup your template (Download Full Template) Before making any changes.

Step 1

Go to blogger.com and sign in to your blogger account, And go to Dashboard >> layout >> Edit html and before doing any thing,

make sure to check

Expand Widget Templates

then, find the following code.

]]></b:skin>

and just before it, add the next code.

/* start share the love css by allblogtools.com----------------------------------------------- */div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important} div.sexy-bookmarks-expand{height:29px; overflow:hidden} .sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat} div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important} div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left} div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important} div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important} div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important} div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important} .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://www.mydatanest.com/files/allblogtools/41739_lujnj/sexysprite.png') no-repeat !important;border: 0;outline: none;} .sexy-digg{background-position:-980px bottom !important} .sexy-digg:hover{background-position:-980px top !important} .sexy-reddit{background-position:-700px bottom !important} .sexy-reddit:hover{background-position:-700px top !important} .sexy-stumbleupon{background-position:-630px bottom !important} .sexy-stumbleupon:hover{background-position:-630px top !important} .sexy-delicious{background-position:-1190px bottom !important} .sexy-delicious:hover{background-position:-1190px top !important} .sexy-yahoobuzz{background-position:-1120px bottom !important} .sexy-yahoobuzz:hover{background-position:-1120px top !important} .sexy-blinklist{background-position:-1260px bottom !important} .sexy-blinklist:hover{background-position:-1260px top !important} .sexy-technorati{background-position:-560px bottom !important} .sexy-technorati:hover{background-position:-560px top !important} .sexy-myspace{background-position:-770px bottom !important} .sexy-myspace:hover{background-position:-770px top !important} .sexy-twitter{background-position:-490px bottom !important} .sexy-twitter:hover{background-position:-490px top !important} .sexy-facebook{background-position:-1330px bottom !important} .sexy-facebook:hover{background-position:-1330px top !important} .sexy-mixx{background-position:-840px bottom !important} .sexy-mixx:hover{background-position:-840px top !important} .sexy-scriptstyle{background-position:-280px bottom !important} .sexy-scriptstyle:hover{background-position:-280px top !important} .sexy-designfloat{background-position:-1050px bottom !important} .sexy-designfloat:hover{background-position:-1050px top !important} .sexy-newsvine{background-position:left bottom !important} .sexy-newsvine:hover{background-position:left top !important} .sexy-google{background-position:-210px bottom !important} .sexy-google:hover{background-position:-210px top !important} .sexy-comfeed{background-position:-420px bottom !important} .sexy-comfeed:hover{background-position:-420px top !important} .sexy-linkedin{background-position:-70px bottom !important} .sexy-linkedin:hover{background-position:-70px top !important} .sexy-friendfeed{background-position:-1750px bottom !important} .sexy-friendfeed:hover{background-position:-1750px top !important} .sexy-link{ margin-left:25px; float:left} .sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}/* end share the love css by allblogtools.com----------------------------------------------- */

Step 2

Find next code

</head>

and before it, add the next code

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function() { // xhtml 1.0 strict way of using target _blank jQuery(&#39;.sexy-bookmarks a.external&#39;).attr(&quot;target&quot;, &quot;_blank&quot;); // this block sets the auto vertical expand when there are more than // one row of bookmarks. var sexyBaseHeight=jQuery(&#39;.sexy-bookmarks&#39;).height(); var sexyFullHeight=jQuery(&#39;.sexy-bookmarks ul.socials&#39;).height(); if (sexyFullHeight&gt;sexyBaseHeight) { jQuery(&#39;.sexy-bookmarks-expand&#39;).hover( function() { jQuery(this).animate({ height: sexyFullHeight+&#39;px&#39; }, {duration: 400, queue: false}); }, function() { jQuery(this).animate({ height: sexyBaseHeight+&#39;px&#39; }, {duration: 400, queue: false}); } ); } // autocentering if (jQuery(&#39;.sexy-bookmarks-center&#39;)) { var sexyFullWidth=jQuery(&#39;.sexy-bookmarks&#39;).width(); var sexyBookmarkWidth=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).width(); var sexyBookmarkCount=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).length; var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth); var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth; var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2; jQuery(&#39;.sexy-bookmarks-center&#39;).css(&#39;margin-left&#39;, sexyLeftMargin+&#39;px&#39;); } }); </script> 

Step 3

This is the last step, we are about to do it.

Find this code

<data:post.body/>

if you can’t find this code, please check on Expand Widget Templates and you’ll find it.

and after it, add the following code.

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>   <ul class='socials'>   <li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>   <li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>   <li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>   <li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>   <li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>   <li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>   <li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>   <li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>   <li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>   <li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>   <li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>   <li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>   <li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>   <li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li>   <li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>   <li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>   <li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>   <li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>   </ul>   <div style='clear:both;'/>   </div>   <div class='sexy-link'> <font size='1px'>Widget by <a href='http://www.cssreflex.com/' title='Web Design Blog, Blogger Hacks and Blogger templates'>Css Reflex </a>|<a href='http://www.tutzone.org/' title='Tutorials, Rare Downloads, Link Heaven, Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More'> TutZone</a> | Brought to you by : </font><a href='http://www.allblogtools.com' target='_blank' title='Blogger templates'><font size='2'>AllBlogTools.com</font></a></div>

Now you are done, Click SAVE TEMPLATE

Theo allblogtools

Phiên bản mới tạo chức năng “Read more – Đọc tiếp” cho Blogspot

Vào Template - Edit HTML, Expand widget, tìm đến thẻ <data:post.body/> và thay nó bằng đoạn code sau:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Ngoài ra bạn còn phải cho đoạn code dưới đây vào phần HEAD (<head> ... </head>) của template:

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Widget bài viết liên quan - Có sử dụng CSS

Tiện ích cho phép hiển thị các bài viết liên quan (có cùng nhãn ở cuối mỗi bài viết) ở cuối mỗi bài viết. Thủ thuật có sử dụng CSS để làm cho tiện ích trông bắt mắt hơn.

Xem hình minh họa kết quả:

Hình minh họa thủ thuật:

☼ Bây giờ ta bắt đầu thủ thuật:
1. Đăng nhập blog
2. Vào Bố cục (Layout)
3. Vào chỉnh sửa code HTML (Edit code HTML)
4. Nhấn chọn "Mở rộng mẫu tiện ích" (Expand widget template)
5. Chèn đọan code bên dưới ngay trên dòng code </head>

<style>


#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i299.photobucket.com/albums/mm297/zozuglogger/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}


</style>
<script src='http://fandung.110mb.com/JS-files/fd-Related_posts.js' type='text/javascript'/>

- Nên download file java Related_posts.js về và up lên host của bạn, để tránh hết bandwidth

6. Tiếp tục tìm đến dòng <data:post.body/> và chèn đọan code bên dưới ngay sau nó:

(Lưu ý nhỏ : đối với những blog có hack tiện ích đọc thêm (Read more...) thì việc bạn đặt code bên dưới trước hay sau code của link Readmore đều không quan trọng (do 2 tiện ích này không thể xuất hiện chung trên một trang), quan trọng là các code này phải được đặt sau dòng <data:post.body/>)

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Bài viết liên quan : </b></font>
<font color='#FF0000'>
<b:loop values='data:post.labels' var='label'><data:label.name/>
<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&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

- Bạn có thể sửa các code màu xanh theo ý bạn.
- <font color='#FF0000'> : đây là code mã màu của nhãn (Label)

7. Save template lại là xong.

===========

Theo Fandung