http://m14hackersworld.blogspot.com
Add A Sliding Featured Content To Your Blogger Blog
I hope every one had a look at the “Magazine” type Word press templates that have a special feature namely, sliding featured content. This feature has been incorporated by default in blogger templates, like the Mahusay blogger template. Many readers personally requested me on “How to install this widget in their blogger templates?”. So, this post basically explains how to install the sliding featured content on your blogs. Have a look at the snapshot of the widget installed in my blog.
Follow these simple steps to display this beautiful Sliding Featured Content.
1. Login to your dashboard. Navigate to “Layout>>Edit HTML” from your dashboard. Make a back up of your template before you do any changes in the current template.
2. Search for the following line in your blog. You may use “CTRL+F” to do the search.
</head>
3. Download this: Text Document One.
Now, Open the text document and paste the code present in it on top of the line mentioned in step 2.
4. Now, search for the following piece of code in your blog using “CTRL+F”.
<div id=’main-wrapper’>
5. Download this: Text Document Two
. Open the text document. This is the major part of this widget, pretty difficult task too. You need to customize the HTML lines mentioned in that document. Check out the first block of code. You will find “YOUR TITLE”. Replace it with the title of your post. Next, replace “SHORT DESCRIPTION OF YOUR POST” with a short description of your post, say 30-40 words. Replace “LINK OF YOUR POST” with the URL of your post.
6. Now, you will find a phrase like this “LINK OF YOUR POST PHOTO”. You need to replace that phrase with the URL of your photo. I mean, a photo that is related to that particular post. The most important thing to note is that you should make sure, the photo size is 600×200, that is the width should be 600 and the height should be 200. You can use Adobe Photoshop or any other tool to resize the photos. Once, you are done with the photo. Upload the photo to a hosting website like Imageshack or Photobucket and get the link to your photo. As mentioned earlier, replace “LINK OF YOUR POST PHOTO” with the link you obtained. Huh!! Job done at last.
7. Repeat the same steps (5 and 6) for the other blocks too. I set the number of blocks(imageElement blocks) to four in that document. But, it is your wish. You may include as many blocks as you want. Once, you finish of all the editing business, paste the entire code below the line mentioned in step 4.
NOTE: “If it is very confusing, then download this Sample Text Document to have a look at the code that I installed in my blog to make this widget working. May be, you will have an idea of what I was blabbering. Laughing Out Loud!!!”
8. Now, preview your template. If any error, try to rectify it or else, contact me and I will help you out. No errors??? Then, save your template. Go check out your blog with one of the coolest widgets installed in it.
I made this post as simple as possible so that people feel it easy to install this widget and they will give it a try. It is not that only professional and high quality blogs can facilitate this of a widget. Even small scale blogs can use HTML effectively and make it more appealing. Please leave your comments if you face any difficulty in installing this widget.
Add A Sliding Featured Content To Your Blogger Blog
I hope every one had a look at the “Magazine” type Word press templates that have a special feature namely, sliding featured content. This feature has been incorporated by default in blogger templates, like the Mahusay blogger template. Many readers personally requested me on “How to install this widget in their blogger templates?”. So, this post basically explains how to install the sliding featured content on your blogs. Have a look at the snapshot of the widget installed in my blog.
Follow these simple steps to display this beautiful Sliding Featured Content.
1. Login to your dashboard. Navigate to “Layout>>Edit HTML” from your dashboard. Make a back up of your template before you do any changes in the current template.
2. Search for the following line in your blog. You may use “CTRL+F” to do the search.
</head>
3. Download this: Text Document One.
Now, Open the text document and paste the code present in it on top of the line mentioned in step 2.
4. Now, search for the following piece of code in your blog using “CTRL+F”.
<div id=’main-wrapper’>
5. Download this: Text Document Two
. Open the text document. This is the major part of this widget, pretty difficult task too. You need to customize the HTML lines mentioned in that document. Check out the first block of code. You will find “YOUR TITLE”. Replace it with the title of your post. Next, replace “SHORT DESCRIPTION OF YOUR POST” with a short description of your post, say 30-40 words. Replace “LINK OF YOUR POST” with the URL of your post.
6. Now, you will find a phrase like this “LINK OF YOUR POST PHOTO”. You need to replace that phrase with the URL of your photo. I mean, a photo that is related to that particular post. The most important thing to note is that you should make sure, the photo size is 600×200, that is the width should be 600 and the height should be 200. You can use Adobe Photoshop or any other tool to resize the photos. Once, you are done with the photo. Upload the photo to a hosting website like Imageshack or Photobucket and get the link to your photo. As mentioned earlier, replace “LINK OF YOUR POST PHOTO” with the link you obtained. Huh!! Job done at last.
7. Repeat the same steps (5 and 6) for the other blocks too. I set the number of blocks(imageElement blocks) to four in that document. But, it is your wish. You may include as many blocks as you want. Once, you finish of all the editing business, paste the entire code below the line mentioned in step 4.
NOTE: “If it is very confusing, then download this Sample Text Document to have a look at the code that I installed in my blog to make this widget working. May be, you will have an idea of what I was blabbering. Laughing Out Loud!!!”
8. Now, preview your template. If any error, try to rectify it or else, contact me and I will help you out. No errors??? Then, save your template. Go check out your blog with one of the coolest widgets installed in it.
I made this post as simple as possible so that people feel it easy to install this widget and they will give it a try. It is not that only professional and high quality blogs can facilitate this of a widget. Even small scale blogs can use HTML effectively and make it more appealing. Please leave your comments if you face any difficulty in installing this widget.
Post a Comment
M14 Network Inc. | Hassnain Arts