How to Add Multiple Page Gadgets to Your Blogger Blog

Tweet

 

A Page Gadget is just a navigation bar. If you have added one already you have found out that you cannot add a second one. In this post I am going to show you how to get around that.

Note: This tweak will still not let you add more than 10 static pages.

How to add multiple page gadgets to your Blogger blog

1. Add a Page Gadget to your blog via Page Elements.

2. Go to Edit HTML.

3. Search (Ctrl+F) for  PageList1. Once you have located that in the HTML code of your template you might see something like this:

<b:widget id='PageList1' locked='false' title='' type='PageList'/>

4. Now copy the line you see above and insert it directly below it. Then change PageList1 to PageList2.

Example:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='' type='PageList'/>
<b:widget id='PageList2' locked='false' title='' type='PageList'/>

5. Now all you need to so is save and go back to Page Elements. Drag the second Page Gadget anyplace you want.

Good luck!

Simple Drop Down Menu for Blogger Templates

Tweet

 

Drop Down Menus are a wonderful and great looking solution if yyou want to add multiple links in your blog and don´t have a lot of space to spare. In addition, it makes the site more user friendly and gives it a more professional look. In this post I am going to show you how to add a customizable drop down menu to your Blogger blog.

Drop Down Menu Preview:

A live demo can be found at the top of tis blog.

How to add a drop down menu to your Blogger blog

1. Go to Design --> Edit HTML.

2. Download Full Template (This is to backup your template, so that you don’t lose any data).

3. Check the Expand Widget Templates box.

4. Now search for the following code:

</head>

5. Insert the following code directly before the code above:

<style>
#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
/*Font of menu top*/
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
/*width of each menu top*/
width: 60px;
/*background color of main menu*/
background: #5970B2;

/*text color of main menu*/
color: #FFFFFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{

/*background color of main menu on hover*/
background: #49A3FF}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;

/*background color of drop down menu */
background: #FFFFFF;
/*border of the drop down menu*/
border: 1px solid #5970B2}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
/*background color of each menu element*/
background: #FFFFFF;
/*text color of each menu element*/
color: #2875DE;
/*font of each menu element*/
font: 11px arial}

#sddm div a:hover
{
/*background of each element on hover*/
background: #49A3FF;
/*font color of each menu item on hover*/
color: #FFFFFF}
</style>
<script type='text/javascript'>

var timeout = 500;
var closetimer = 500;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = &#39;visible&#39;;

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
</script>

6. Now it´s time to customize the drop down menu (optional):

You can customize the menu according to your blog. This is optional. Make use of it only if you want a different look than the one already available.

The menu consists of three sections as shown in the image:

1. Main Menu
2. Drop Down Menu
3. Element of Drop Down Menu

In the code you will find some comments. Below the comments you have some editable code.

Here is the explanation of some of the attributes used in the code:

Background: #XXXXXX

This attribute decides the background of the part and XXXXXX is the hex code of the color. You can change the background of each of the three parts.

Color:#XXXXXX

The color attribute decides the color of the text and XXXXXX is the color hex code.

You can get color hex codes from these online color choosers:

ColorSchemer

ColorPicker

width: 123 px

The width determines the width of each element. You can increase or decrease the width according to your choice.

7. Adding the menu:

a. Go to Design --> Page Elements.

b. Click on Add Gadget.

c. Select HTML/JAVASCRIPT.

d. Now add the following code:

<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX Drop Submenu</a>
<a href="#">DIV Cascading Menu</a>
</div>
</li>
<li><a href="#">Order</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

Note: Replace # by the link of the item with the URL of the page or tag you want it to lead to.

Replace <a href=”#”>Order</a> with the following code:

<a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">Home</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>

This is for the third menu, for the fourth replace each m3 by m4.

e. Save the gadget. Your Drop Down Menu is live!

Good luck!

Credits: Javascript Array.

How to Display a Comment Bubble at the Top of Each Blogger Post

Tweet

 

Comment bubbles can be seen on many blogs and websites and are a neat little feature that lets all visitors know at a glance which posts and/or articles got the most responses. Therefore you might want to have on eof those bubbles on your Blogger blog, but I am pretty sure that you do not know how to go about creating and showing a comment bubble count and link at top of your Blogger posts. That's why I am going to show you how you, too, can have this neat little gimmick on your blog. Don´t worry, it is not too hard to do.

The comment bubble will look like this:

You can see it in action here:

Of course, you can also create and upload your own.

How to add a comment bubble to the top of each Blogger post

1. Login to Blogger. Then go to Design --> Edit HTML --> Expand Widgets.

2. Now look for (Ctrl + F):

]]></b:skin>

and insert the following code directly above said line:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://i43.tinypic.com/dljpzo.jpg) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
position:absolute;
padding:0px 0px 0px 0px;
}

The image link of the bubble is shown in green. If you want you can use an image of your own. But don´t forget to change the width and height of the image you use. To adjust the bubble position you can edit the distance from margin-right and margin-top properties of CSS.

3. After adding the above CSS you need to find the following codes and add the codes in blue between them exactly as you can see below.

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

4. Afer adding the code in blue preview your template. If the comment bubble works,just save your template and you are done.

Good luck!

How to Add a Scroll Box to Your Blogger Widgets/Gadgets

Tweet

 

It is not necessarily a good thing to have a homepage that scrolls for miles. Not only can this slow down loading time, it can make you blog look unprofessional as well. Fortunately, there is an easy solution to this problem: adding a scroll effect to the sidebar widgets/gadgets. This allows the widget/gadgets to scroll instead of your whole page.

1. Locate your Gadget ID# and copy it.

2. Then go to Design --> Template Designer--> Advanced--> Add CSS.

3. Now add the following code:

#GadgetID .widget-content {
height: 400px;
overflow: auto;
}

4. Replace the GadgetID with the one you found and copied in step 1.

5. Change the height to whatever fits your needs/the look of your page.

After you are done it should look something like this:

#LinkList2 .widget-content {
height: 650px;
overflow: auto;
}

(Optional )

You can add a little something to change the colors of the scroll bar. (This only works in Internet Explorer. All other browsers will just display the widget(s) as your normal gray scroll box(es).) 

To add color effects to the scroll bar just add the following code just below the  overflow: auto;:

scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#00ff00;
scrollbar-darkshadow-color:green;
scrollbar-face-color:00ff00;
scrollbar-highlight-color:lime;
scrollbar-shadow-color:lime;

Example:

#LinkList2 .widget-content {
height: 650px;
overflow: auto;
scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:#000000;
scrollbar-base-color:#00ff00;
scrollbar-darkshadow-color:green;
scrollbar-face-color:00ff00;
scrollbar-highlight-color:lime;
scrollbar-shadow-color:lime;
}

Just play around with the colors until they are to your liking.

Good luck!

P.S.: If you want to use this with widgets/gadget that have thumbnails in them you might have to disable this little pictures in order to display correctly in Internet Explorer.