This tutorial will show you how to make a gadget/widget to appear just below the first Blogger post.
First, you must understand that the usual gadgets provided by Blogger can be added only where the design section allows this. Yet, we can show any element, for example, an AdSense ad, an image, a flash file or a video etc...
So, what we will do in this tutorial is to display an element under the first post, this means that it will not be visible below the other posts. This is great when you use any automatic summary, although it is not a requirement.
This is easy to do and we will use the isFirstPost conditional tag for that element to show it under the first post published on our blog.
Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button:
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box
Step 3. Type or paste this line below inside the search box and hit Enter to find it:
- The bolded text indicates to where you should paste the code of the element (eg. AdSense ad, a widget).
- In red are the top margins (margin-top) and the bottom margins (margin-bottom), this is in case you want the element to move towards or away from the entries, also you can add any style like a background color, border etc..
Step 5. Preview to make sure everything is ok, then Save your Template by clicking on the Save template button. That's it!
First, you must understand that the usual gadgets provided by Blogger can be added only where the design section allows this. Yet, we can show any element, for example, an AdSense ad, an image, a flash file or a video etc...
So, what we will do in this tutorial is to display an element under the first post, this means that it will not be visible below the other posts. This is great when you use any automatic summary, although it is not a requirement.
Adding A Gadget or Widget Below First Post in Blogger
Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button:
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box
Step 3. Type or paste this line below inside the search box and hit Enter to find it:
<b:include data='post' name='post'/>Step 4. Just below it add this code:
<b:if cond='data:post.isFirstPost'>Note:
<div align="center" style="margin:10px auto;">
Here goes the code of the element you want to show
</div>
</b:if>
- The bolded text indicates to where you should paste the code of the element (eg. AdSense ad, a widget).
- In red are the top margins (margin-top) and the bottom margins (margin-bottom), this is in case you want the element to move towards or away from the entries, also you can add any style like a background color, border etc..
Step 5. Preview to make sure everything is ok, then Save your Template by clicking on the Save template button. That's it!
Thanks, Iv'e been using automatic summary for a while, it blends well...
That is a great tip and very useful, Thanks for sharing such good article..
Really Awesome Trick Thank You For Sharing
It says, that b:if isnt closed, when I copy the code :/
Hi Vita,
Thanks for telling me about the problem. Sorry, there was a gap in my code, now I corrected it. Please add it again, it should work now. Thanks for visiting!
Hey,
Admin is there any css code for adding background image for sidebar gadgets!
Like Yours....
Ex: In your gadgets In i.e.. Recent Comments
The Title Of the Gadget!!
Thanks,
Md Azeem
Go to your template and search for the widget's title and when you found it, copy its id (the line should start with "b:widget id='WIDGET-ID-HERE'"). Next, go to the second b:skin and just above it, add the widget's id along with # symbol and a h2 tag. For example:
#HTML5 h2{
background: url(image-url-here);
color: #000000; /* title color */
}
I hope this will help.
Dear admin,
How do I know the code of the element I want to show (for example the the "RSS" Feed)?
Admin,
Can I show a widget named 'incoming search terms' below all of my posts, exactly below author bio ?
Hi Nitheesh,
Find this code in your Template <div class='post-footer'> and just below it paste the widget's code. I hope this will work!
The above code works well. but the same thing is same after each post on each post pages just after post ends.
that is if i add a image in this below first post. it is shown below each post after it endp.
Hi there,
I have been searching on how to do this for a while it seems so I am so thankful that you have provided instructions.
I've been having problems actually doing this. My blog is hosted my blogger, but when i go into 'edit HTML' firstly it doesn't show 'expand widget templates' which is strange as i remember it use to be there. and secondly cannot find the section of HTML i am looking for. can it mean it's missing somehow? I have found something similar but not the 'post' section you are talking about. What worries me that on the left hand side where it counts the lines of HTML it stops at line 13 (which is ... then it goes to line 548.
Secondly I am wondering if you could give me some advice on something else. I currently am having problems with my widget titles, in the right hand side of my page you will see that i have an instagram widget etc...if you highlight over the area you will see that there is a title above the image grid but doesn't show up. I have tried editing it in my template layout and double checking the font is black, or green or anything but nothing is working. I've had advice to edit the HTML as blogger's layout isn't working for many people anymore. i'm not at all confident with HTML so any help would be very much appreciated. Thank you so much for your time. lucy
http://www.lucygarrick.com/
I figured out how to add the widget under my first post which is great, now just need to work out how i add a title to it and how to make my widget titles show!
Hi Lucy,
Unfortunately, Blogger has changed the old template editor a few weeks ago and in order to look inside your template code, you have to click on the sideways arrows before each template tag... If you still have doubts on how to use the new template editor, please read this tutorial: How To Use The New Blogger Editor
For the widgets titles, go to your Template and click on the sideways arrow before <b:skin>...</b:skin> and then search (CTRL + F) for this line:
.widget .zippy {
color: #ffffff;
Replace #ffffff with #000000 ... or some other color hex.
Hope this will work for you! Thanks for visiting :)
Thank you so much for your reply. I really appreciate it. I'm afraid it didn't work. It's pretty strange as when you highlight over the area you can see it's there.
Here is the HTML for the widget section at the moment. If you have time to have a look and just see if you can identify a problem with it? If all looks well then maybe it could be somewhere else in the HTML. Is that possible?
.widget .zippy {
background-color: #ffffff;
font color: #000000;
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}
.widget .popular-posts ul {
list-style: none;
}
Also is there a way of putting text above the widget with the tutorial above? I've managed to do it but would like to have a couple of words above it.
Thank you so much for your time.
Lucy
http://www.lucygarrick.com/
Try doing this instead - search for h2 { and replace the color hex with #000000 which is just below it:
h2 {
margin: 0 0 1em 0;
font: italic normal 21px 'Times New Roman', Times, FreeSerif, serif;
color: #ffffff;
text-transform: uppercase;
}
For adding a text or title, add the following code just below this line(step 4):
<div align="center" style="margin-top:0px; margin-bottom:10px;">
<div style="font-size: 18px; font-weight: bold;">Text here</div>
And replace "Text here" with your title (change the "18px" value for larger font size).
It worked! Thank you so much!
How To Add A Widget Below Second or Third Post In Blogger ?
This is the message I get when I post widget code--The widget with id HTML2 is not within a section (actual parent element is: div.) Every widget should be in a section.
I'm doing something wrong...can you please give an example of what the widget code should look like inside the code please? Thank you.
Sorry but there are no conditional tags for the second or third post..
Hi Linda,
It depends on which widget you want to add but it is important to copy the widget code from its source or from Layout and not your template! Sometimes you have to parse the widget code in order to work (here's this converter that might help you).
The widget code should be the one that you usually add to Layout > Page Elements. Here's a screenshot with my Facebook fan box widget.
Hope this helps... Thanks for visiting!
Genius you are.......... Superb.... Thanks Alot man.... God Bless you every time in your life.... I am feeling so happy after visiting your this cute and very information able blog.... Love U man...
Hey, please i'm I need of help on how to remove a black long border/ shadow below my blog description and also how to center it..... www.enyinnayaemma.blogspot.com
Please e-mail me via adsenyinnayaemma@gmail.com
Why my text didn't show?
How To Add this widget in blogger post
Hiiii Bro,
thank you so much for sharing this helpful post.
This article helped me a lot :)
This called a niche ...thanks
hi admin, it work but the widget showing every 5 post .. how to fix it ?