blogspot: unlocking the header widget so that you can place it in a different location

Oooops! A couple of posts ago I was talking about making a vertical header and completely forgot to mention something very important related to that: In order to move your header to a different location on the site you will have to do some sniffing around inside the HTML editor (with expanded widgets!), where you need to find this line:

<b:widget id='Header1' locked='true'
and change it to
<b:widget id='Header1' locked='false'

.................................................................................................................................

design + details: padding the widgets

Fairly self-explanatory image I would say... On the left is the default state and on the right is the one where I have tweaked padding values by placing this code in the CSS box on the Advanced Editor:

#Label1 {
padding: 24px;
padding-bottom: 8px;
}

The padding makes a huge difference as to how this looks. The strokes become much sleeker when they stop a bit short of the border, and the top and the bottom of the box is also sitting much better now that I no longer have that big space below the last line.

.................................................................................................................................

using the blogspot text widget (and the post editor) to make menus and thumbnail galleries

On the right hand column of this site you can see a section where I have put a menu with thumbnails for template downloads. It just occurred to me that I never got round to posting on this little trick which I figured out and which makes it very easy to make something like this by using the text widget and the regular post editor. Here's how it goes:

1) Start a regular post - except do not publish it but save it as a draft! (You can always go back and add to it later as well if you just keep the draft).

2) Put all your images and text in the post. (Your text will wrap automatically, however remember that your images will need to be sized to the width of the sidebar that you are planning to put the widget into).

3) I guess you could also add a background texture/color, or a border, or a bit of padding while you are still doing the post entry, as explained here >>>. I haven't tried this myself yet, but I am assuming that all of these attributes would show up on the text widget as well.

4) Select all the stuff on the HTML tab of the post editor and copy.

5) Start a new text widget, go to the HTML tab, then paste the code you got from the post editor into there.

6) Save! Done!

.................................................................................................................................

linkwithin - post recommendation widget + beautiful design!

Caution: Beautiful as this is, it does not serve the same function as the one that was posted before. That one gives you ratings as well as recommendations. This one here only recommends, doesn't let people rate the posts.

http://www.linkwithin.com/learn?ref=widget

.................................................................................................................................

the outbrain post recommendation gadget/widget

Fırat has just found us another goody:

http://www.outbrain.com/getwidget

This website installs a gadget on your blog which puts recommendations underneath your posts, directing your readers to other related posts through thumbnails. Very neat for sites which have a lot of images in their posts. I have already put it into the visual communication history blog where it will make sense to have it since I do have a lot of images on that one.

Although the gadget configures it's appearance based upon your CSS there are still a couple of design problems with it: The "You might like" thingy, for one. Not sure if this is needed in the first place - stating the obvious it seems. But even if we do need it, do we need it to be quite that large? And bold? And then those fat wide borders around the thumbnails too, I could certainly live without...

I added a dotted line at the bottom of the posts, with an added space (&nbsp;) underneath it, and that seems to help since it gives the gadget a bit more negative space to breathe in. And yes, unfortunately once one starts one has to do this to all of the past posts as well, since the thumbnails appear on the entire blog. No sweat, did that too. Just a fast copy paste job really, took all of 10 minutes or so.

However all nit picky stuff aside, this is a very cool thing indeed. So, once again, thank you Fırat!

.................................................................................................................................

how to replace a blogspot widget title with an image

From your dashboard, go to design and into Edit Html. Make sure that you have ticked the Expand Widget Templates checkbox on the top right. Now you have to find the widget ID of the widget title you wish to edit. To find the ID of the gadget you wish to modify, please read this previous post here.

For example, the widget id for my widget is Label1, you will find something similar to this code below:

<b:widget id='Label1' locked='false' title='Topics' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if> 

<--------------lots of data here that you don't need--------------------->
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Replace the data:title tag ( <data:title/> ) with the code below:

<img src="YOUR_TITLE_IMAGE_URL" alt="YOUR_GADGET_TITLE"/>

.................................................................................................................................

blogspot stuff: and if you want to edit the text attributes of your popular posts?

First off, you need to be aware that although they look like as if they are, these are not really made up of regular text fields; in fact the whole shebang is hypertext - in other words these are all links. Which Selim, sharp cookie extraordinaire that he is, figured out in a nano-second of course. So, as an example, if you want to change the line height, again scroll to the end of the widgets section inside the HTML editor, where again you need to find the line which says

/* Posts
----------------------------------------------- */
before which (while you are still in the widgets section) you paste:
#PopularPosts1 li{ 
line-height: 140%; 
}

And this will stop the text of your popular posts being all squished up in that horrible way. The value 140%, which is highlighted in black can of course be changed to whatever you wish it to be.

.................................................................................................................................

playing with blogspot widgets (gadgets)

As we have talked in the class last week, it is possible to separately edit every widget, give them different backgrounds, alignments, borders, colors, fonts etc. Here is how you do it:

The "widget id" is the only thing you need to edit the widget, but first you need to find it of course. To find the ID of the gadget you wish to modify, please read this previous post here.

Now go into the HTML editor, into the CSS part and find the section entitled "Widgets", then scroll down to the end of the section, just above the part where "Posts" section starts. In other words search for this line:
* /Posts
----------------------------------------------- */
And then all you have to do is; add the code given below straight above this line. The word Label1 in the topmost line, which is highlighted in black, is what you replace with the ID that you have found in the way described in the above linked post.

#Label1{
margin-top:20px
padding-left: 5px;
background:#ddddd;
font-family:arial, sans-serif;
font-size:11px;
text-align:left;
color: #db4c46;
};

The styles I have used are just for example, you can use as many or as few as you wish.

.................................................................................................................................

blogspot stuff: finding your gadget ID

This is something which you need to know about if you wish to configure the properties of your individual gadgets in the HTML editor. They are well hidden out of sight, however can be found at the very end of the address bar of the gadget when you are on the Design panel: Click to edit the gadget, scroll all the way to the right, to where the mouse cursor on the image is pointing - and there it is!

.................................................................................................................................

no more bands underneath your top gadgets in blogspot

And following closely, is another really good one from SouthernSpeakers:

Unfortunately it isn't only your pages gadget! Any gadget you place up at the top of your page seems to get this nasty old band underneath it. To get rid of them once and for all, simply go to Design > Template Designer > Advanced > Add CSS and paste the following code: 

.tabs-outer {
  background: none !important;
}
.tabs-cap-top, .tabs-cap-bottom {
  border-top: none;
}

Then press enter after the last character of the last line } (after the last curly bracket, in other words). Apply to Blog. Done!

Thank you SouthernSpeakers! Awesome!
__________________________________

And here is Onur's addition: The page that he has directed us to tells us to do one of two things with the following text. You can either go to the Template Editor > Advanced > Add CSS. Or you can go directly to the HTML editor and look for ]]></b:skin> and paste it right before that line.

So, here is the code if you want to center your pages:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

If you want the pages to align right however, then this is it:

.PageList {text-align:right !important;}
.PageList li {display:inline !important; float:none !important;}

If the tabs stack on each other after you added the code, replace display:inline with display:inline-block.

 ( Note:   And be sure to catch the little fullstops at the beginning of every line of the code. Very easy to miss, so be extra careful!  ) 

.................................................................................................................................

how to stop your pages gadget stretching all the way across your blogspot site

The fact that this happens is one of the reasons why I have not been using this gadget since it breaks up your page in a really nasty way. Here is how to fix it:

Go to Design > HTML editor. Find the line which says
/* Headings ----------------------------------------------- */

Then, paste the following code directly above it:
/*--Pages Gadget No-Stretch Starts--*/
.tabs-outer {
background: transparent !important;
}
.cap-top, .cap-bottom{
border: none !important;
}
.tabs-inner .widget li a{
border: none !important;
border-right: 1px solid $(tabs.border.color) !important;
}
#crosscol{
background: $(tabs.background.color) $(tabs.background.gradient);
border: 1px solid $(tabs.border.color) !important;
}
/*--Pages Gadget No-Stretch Ends--*/

Comes to us from SouthernSpeakers, a great site for all sorts of blogspot codes. Lots more there, definitely check them out!

.................................................................................................................................

nice clean search box

I don't know about others, but I was hugely bothered by the way the default search gadget looks on blogspot - the way the 'search' button shoulders its way into the actual search area and then all that 'powered by google' stuff below...

So, here is the code for a squeaky clean one, no buttons, no nothing, just a plain empty entry field. And as is usually the case - "less is more" once again! Simply copy/paste this code into an HTML/Javascript gadget. Change the value highlighted in red to get the correct width and you are all set to go:

<form action="/search" id="searchthis" method="get" style="display: inline;"><input id="search-box" name="q" size="18" type="text" /></form>

.................................................................................................................................

all kinds of menus

You can find some very nice custom menus at http://bloggerhowtotips.blogspot.com/

The image above shows you a selection from the available styles which you can generate on the site. On the left are vertical HTML/CSS menus and on the right are drop down vertical menus. Both pages give you the codes for all of the different design styles and also tell you exactly how to use them, which incidentally is through yet another HTML/CSS gadget - love these things!

And then there is also a smoothly animated multilevel drop down menu; again you can obtain the code for this from here, and again, this too works through the HTML/CSS gadget.

.............................................................................................................................

image based menus

Look on the left column right here on this site and you will see that the pages menu now has image buttons with rollovers instead of just plain text ones. This was done with a code generated here:

http://javascript.internet.com/generators/preload-images.html

So easy it is almost ridiculous!

Once you have the code, go to Design and add an HTML/CSS gadget to one of your columns, paste the code, save - and you are done!  (Tip:  Needless to say, you can make more than just 3 buttons. The generator gives you 5 to begin with anyway. However if you have even more than that, simply copy paste the lines from the script and change the image and destination URLs in the added lines.   ) 

Some other nice stuff too on this site by the way, such as a pull down menu generator, a pop-up window maker, a story generator - gotta love this one! :-), lots of image effects, text effects, and and...

http://javascript.internet.com/

.................................................................................................................................