|
|
|
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.
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 600x200, 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.
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.
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.
4. Now, search for the following piece of code in your blog using "CTRL+F".</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.<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 600x200, 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.
Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!
your information very important for me. thank you
REPLYThere's a lot good info regarding blogging's theme . Keep up the good work .
REPLYYes very good information specially for advanced webmasters...http://www.bolly2u.com
REPLY@diggpoints and alan: Thanks for those encouraging words. Keep blogging!!!
REPLYHi, would you happen to know how to move the sidebar up so there isn't that big gab next to the featured content?
REPLYhttp://interscan.blogspot.com
@melissa: It is pretty simple. Just reduce the width of the widget. I think the width of the widget is set to 600px, you can reduce it so as to bring the sidebar up. Hope I cleared your doubt.
REPLYHi i would like to ask, how do i change the font size and font?
REPLYthanks very much.
i'm still having a lil problem, where those image i posted at imageshack don't work...
hope u can help me, :)
@Rue: In order to change the font size, you have to modify the ".css" file which you include in step three. And the images that you post at imageshack or photobucket must be the same as that of the widget. For example, say 600(width)x200(height). Use tools like Adobe photoshop to customize your images. Hope I made things clear. Still got problems, contact me via email.
REPLYThanks for writing such an interesting article. It interest me if anyone had ever checked the affect of adding such widget to your blog/site and is worth the hard work it requires
REPLYVery informative. Thanks. I'm constantly building and just recently used one of the magazine themes for mine at http://judysbookshop.com/home/blog.
REPLYIt's nice to find out I can add that feature to my other blogs without having to change themes.
@judy: Yeah! Welcome!! I had a look at your site too! Looks good but I fell you can improve the site design a bit more than what it is now!!
REPLYi have a problem, when i prewie looks everithing right no error, looks everithing good, but when i save all images are decomposed in my blog. please help me.
REPLYSorry for my english
Your English is far better. No worries. I think you have to set your image size as specified in the post.
REPLYIs there anyway to bypass the manual adding of posts and their pictures?
REPLY@Aditya Kumar Nayak: Good question but I don't think there is any way to do as you say. Though the content can be made automated, it is necessary that you add the pictures and the content manually to have a better than the one generated automatically.
REPLYDear Mukund,
REPLYI had hard time following this but I am really wanting for this featured gallery. pls. help me. Im from Ph.
http://thewebmagazine.blogspot.com
@The New Blogger: You just follow the instructions there. It is very easy. Just do it step by step as mentioned in the post and I am sure you will get it working. Still facing any problems, let me know!!!
REPLYSorry, but it doesn's work on my blog. Please help me !
REPLY(I'm using 'Bmagazine' template designed by Nitesh kotahri)
@thanphong07: Please let me know in which of your blogs this feature is not working. The code works fine with Revolution series but I am not sure if it works in other templates. Any way, please let me know which one of your blogs and I will help you out!!
REPLYHi there
REPLYMy blog is formatted to 660 in width Is it possible to edit the javascript so the featured sliding window is extended to 660 instead of 600?
Oops also forgot to ask, is it possible to place the featured window on the bottom of my main page, rather than at the top? Is it possible to restrict it showing up just on the main page instead of every blog post page?
REPLYThanks!
@Fei: Yes!! It is possible to format the size. You need to change the width part in the corresponding places and you will get your job done!!
REPLYThanks for this tutorial.
REPLYI have added this code to my blog and it seems fine when I preview it in my bloggers account but once I open my website something is wrong. You can check: www.myfitstation.com.
Do you have any suggestions?
Thank you.
I have added this wonderful slider fetaure post to my blog. it works well for google chrome but in internet explorer it messed .... with the post. can you fix it please.
REPLYhttp://jaffnatimes-news.blogspot.com/
@My Fit Station: Yeah! I checked it out!! The problem is you have not hosted the java scripts in your site. Please host it some where and later check it out!
REPLY@Aaron: It will work perfect for Mozilla and later versions of IE. If you are using the older version, may be it will not. But as far as I know, it works fine in my computer. I got IE6.
REPLYHey there, I added this feature to my blogger site and it worked perfect. Today I bought my custom domain and set that up but the sliding feature is all messed up!! Any ideas why?
REPLYwww.vagabondcouple.com
@GW: Yeah! You need to host the javascript files on your domain. So try hosting it in your site and later, install the feature. It will work fine I think!!
REPLYThx Mukund... i thought the code pasted into the html already specifies the URL location of the javascript files, so shouldn't it be ok? My problem is i am hosting the js files on a different host (mobileme.com) as i don't have hosting facilities on my custom domain (vagabondcouple.com). Is there any way around this so that blogger continues to read the js files where they are currently hosted?
REPLY@GW: Yeah! I think it should work fine if you host it some where either. Let me check it out once again! Else just send me your HTML via mail and I will have a look at it!!
REPLYThanks for this tutorial! I tried to add it to my blogger html and received the errors:
REPLYYour template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "a" must be followed by either attribute specifications, ">" or "/>".
I can't seem to figure out where the error is coming from...
Can I send you my code?
Thanks again!
Yeah!! Send me the code and I will check out the problem for you!
REPLYHi thanks for the help.
REPLYI have everything in the right spot and am hosting the js and css files on my google site.
Everything works, except the images don't show up in the featured content. It's just black. The thumbnails and the main space.
Any ideas?
@Andrew: Please try hosting your images in imageshack or photobucket. Else get me the code and I will check out!!
REPLYXML error message: The reference to entity "current" must end with the ';' delimiter.
REPLYHey there, I'm sure this would work great except for the error message above. I have no clue what to do with this. I downloaded the files exactly, and didn't customize anything except adding the post information. They are placed in the right spot. What can I do to fix this. I assume I need a semi-colon somewhere, but can't find any openings.
I figure it out....But now the widget totally destroys my blog.
REPLYhttp://www.gyropulse.com
Is it the template?
it works in preview and from time to time, then it reverts back. Please help.
@Sean: Good! You found out what the error is. Any way, is it working or not? Please place this coding stuff in the template area and not as a widget. Still facing problem, then let me know via email and I will try to fix it.
REPLYI have the same question that GW had. It worked perfect until I got the custom domain.
REPLYDo you have any suggestions on how to fix this?
This is the website I am working on.
http://www.jeffklicka.com/
Also, I have the js and css hosted at Google site. The blog is through blogger with the Mahusay template.
@Tami Curtis: I checked out your site. The java script is not working in your template. So, try uploading the file some where else. Still if you face any problem, get me the template and I will try to fix it.
REPLYHey Mukund
REPLYYou have an extremely helpful site for newbies like me! So thanks a lot.
Now for the problem: The "Text documents" mentioned in this post no longer exist on the server and consequently I cannot download them.
Any other alternate source where I can download them?
Thanks.
@Ashay K.: Thanks for the comment!! More over, thanks for pointing about the problem. I have checked the link for that text document one. I have updated them now. You can try the widget on your blog and let me know if you face any problem. If you find similar broken links on my blog, then please let me know!!!
REPLYHey Mukund
REPLYThe text docs are now accessible. Thanks a lot. However, when i try to search for "div id='main-wrapper'" (Step 4) I do not get anything.
I tried to search a lot for it in the template, but was not able to do so.
Any other way around this problem? If it helps, I'm using a theme from the standard template designer of blogger.
@Ashay K.: Thanks for the comment! If you use the default blogger template, then place the featured content widget above the div block where your posts are present. If you need more help, then please contact me via email and I can help you out there!!
REPLYNot working for me ! I'm using Minama template. Please help me ! Thanks !
REPLYMy blog : http://technet24-test.blogspot.com/
@FxSPDR 24/5: Thanks for the comment! Did you install the javascripts properly on your blog? I will work on your template provided you send them via email to me!!
REPLYThanks Mukund ! I send you my template file wia email. Please help me !
REPLY@FxSPDR 24/5: Yeah!! Sure!! I will!! Send me your template and I will help you solve your problem!!!
REPLYThanks Mukund ! I send you my template file wia email. Please help me !
REPLYHey Mukund
REPLYThe text docs are now accessible. Thanks a lot. However, when i try to search for "div id='main-wrapper'" (Step 4) I do not get anything.
I tried to search a lot for it in the template, but was not able to do so.
Any other way around this problem? If it helps, I'm using a theme from the standard template designer of blogger.
Hi thanks for the help.
REPLYI have everything in the right spot and am hosting the js and css files on my google site.
Everything works, except the images don't show up in the featured content. It's just black. The thumbnails and the main space.
Any ideas?
@GW: Yeah! You need to host the javascript files on your domain. So try hosting it in your site and later, install the feature. It will work fine I think!!
REPLYThanks for this tutorial.
REPLYI have added this code to my blog and it seems fine when I preview it in my bloggers account but once I open my website something is wrong. You can check: www.myfitstation.com.
Do you have any suggestions?
Thank you.
Oops also forgot to ask, is it possible to place the featured window on the bottom of my main page, rather than at the top? Is it possible to restrict it showing up just on the main page instead of every blog post page?
REPLYThanks!
Sorry, but it doesn's work on my blog. Please help me !
REPLY(I'm using 'Bmagazine' template designed by Nitesh kotahri)
Dear Mukund,
REPLYI had hard time following this but I am really wanting for this featured gallery. pls. help me. Im from Ph.
http://thewebmagazine.blogspot.com
i have a problem, when i prewie looks everithing right no error, looks everithing good, but when i save all images are decomposed in my blog. please help me.
REPLYSorry for my english
Very informative. Thanks. I'm constantly building and just recently used one of the magazine themes for mine at http://judysbookshop.com/home/blog.
REPLYIt's nice to find out I can add that feature to my other blogs without having to change themes.
Hi, would you happen to know how to move the sidebar up so there isn't that big gab next to the featured content?
REPLYhttp://interscan.blogspot.com
There's a lot good info regarding blogging's theme . Keep up the good work .
REPLYThanks. I finally was able to do this with your tutorial. I had failed every other time.
REPLYYes, it is tricky, the pictures part, the width of the slide also I had to adjust it...
I have a question, is there a way to change the message "featured content" to the same in Spanish as I did with Read More?
Thanks!
@SilviaYeah! It is possible to change the text. Just find out if its text or image. Either way, you can change it. Thanks for the comment! I'm glad that you could fix the slider with the tutorials on my blog!
REPLYThis is really amazing. Thanks for the help!
REPLYQuestion on how to fix it though, when you load my website, the sliding featured content loads up funny, like its scattered. But when its fully loaded it becomes ok. Any tip on how can I fix this? Thanks
Heres my site
http://yourdailydoseofmarc.blogspot.com/
@Marc: Yes Marc! It will load up in an unusal manner but once it loads up completely, it will look pretty neat. If you are not convinced with the above slider, then you can contact me via email and I will help you with another interesting featured content. Thanks for the comment by the way!
REPLYHi Mukund, can you help me? I followed exactly but still didn't work. Used to work but now not anymore... what's the problem?
REPLYhttp://www.iphone-my.com
@-[X]ylement-: I would definitely help you buddy! I have got another sliding version as well. So, you can contact me via email and get the help you want!
REPLYI tried doing a search for the "div id='main-wrapper" but didn't have any luck as I'm using a standard blogger template. Any advice on how I should proceed?
REPLY@M. Twiggs: There are various versions of the blogger template. So, let me know which one you are using and I will help you out. It is better you contact me via email with your template.
REPLYUse the tab below to comment. No spam please!!!
POST YOUR COMMENT