SEO Search

Tuesday, 17 September 2013

How to embed a youtube playlist on your blogger blog

Posted on 08:44 by Unknown

In this post we will see how to create a YouTube video gallery using jQuery. It is an elegant gallery in which we can add 5 videos and for its dimensions, we could put it below the blog header. Actually you can put it anywhere, but it is recommended in that area considering that 765px is the width of the gallery.

To add this video slider to your blog go to Template > Edit HTML and before the </head> tag, add these scripts:

Then add the styles before ]]></b:skin>

/* Video Gallery for Blogger
----------------------------------------------- */
#videoslider {
background:#000; /* Background color */
clear:both;
margin:0 auto;
padding:5px;
width:765px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#videoslider, #videoslider-content, #videoslider-tabs {height:350px;overflow:hidden;}
#videoslider-content {color:#fff;float:left;text-align:center;width:460px;z-index:1;}
.loading-vid {display:block;margin:165px auto 0;}
#videoslider-tabs {float:right;width:300px;margin:0;}
#videoslider-tabs li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzLi2-8PAFqdhDIgNzozZJfzVovoY6FdsdfGWKXwHP2_TnN3cgtMcWYXu6Y-0IawarFKlo7wubkoljdjD4o-okBptbA9EnI3a-w1nLxDYKORUpF56dUbNGC5rHKTDmo6r9HWRI82MQDUhz/s1600/tab_backgr.jpeg) repeat-x top left;float:left;height:60px;padding:5px;width:290px;list-style:none;}
#videoslider-tabs li a {padding:0 !important;border:0 !important;}
#videoslider-tabs li.hover {background:#333;}
#videoslider-tabs li.actVid {background:#555;}
#videoslider-tabs li img.thumb-vid {background-color:#fff;float:left;height:52px;margin:0 8px 0 0;padding:5px;width:52px;}
#videoslider-tabs li span.vidTit {
display:block;
color:#CD332D; /* Titles color */
font-size:14px; /* Titles font size */
font-weight:bold;
text-decoration:none;
}
#videoslider-tabs li .vidDesc {
display:block;
color:#fff; /* Color of the description */
font-size:12px; /* Font size of the description */
font-weight:bold;
text-decoration:none;
}
#videoslider-tabs a {text-decoration:none;}
#videoslider-tabs li.actVid .vidDesc {color:#fff;}
.ui-widget-content{float:right;}
.tabs-outer {background-image: none !important;}
#videoslider-tabs li a:hover {background: none !important;}

Now in a HTML/Javascript gadget paste the structure of the slider, this is the one you should put under the header:

<script>
var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_1" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_2" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_3" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_5" frameborder="0" allowfullscreen></iframe>';
</script>
<div id="videoslider">
<div id="videoslider-content"></div>
<ul id="videoslider-tabs">
<li><a href="#vid1"><img src="//i2.ytimg.com/vi/video_ID_1/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid2"><img src="//i2.ytimg.com/vi/video_ID_2/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid3"><img src="//i2.ytimg.com/vi/video_ID_3/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid4"><img src="//i2.ytimg.com/vi/video_ID_4/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid5"><img src="//i2.ytimg.com/vi/video_ID_5/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

</ul>
</div>

Add the IDs of the videos, their names and their description and that's it. The description should be brief so you wont have space problems.
If you do not know how to get the ID of a video, then open the video on YouTube and look at the address bar... the last characters are the ID you need.

Note that the ID of each video should be added two times, one is for displaying the video and one for the tabs thumbnail.

As this gallery works with jQuery we should make sure to not repeat the version of the script if we already have jQuery.

Posted in Widgets | No comments

Thursday, 5 September 2013

Making a gadget visible only to the blog administrator

Posted on 09:12 by Unknown

And the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to our blog readers, perhaps a Survey already ended that we want to keep, a counter, or any gadget that while we customize, we don't want anyone else to see until the final result is ready.

The procedure is simple, we just have to add two lines to our gadget that we want to hide.

First thing to do is to go to Template > Edit HTML and then search for the gadget's code we want to hide. It will be easier using the CTRL + F keys and locating the name of the gadget/widget.

For example, in a HTML/Javascript gadget, we will see a code like this:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<span class='item-control blog-admin'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>

All you have to do is add the parts in red and ready. If you close the session go to your blog you'll not be able to view the gadget that you have hidden, but as soon as you sign in you will see that it is visible to you.

Not all gadgets have the same structure like in my example, but it will be easier to guide you, just place the first code in red just after <b:includable id='main'>

And the second red code just before </b:includable>
Note: to look inside the widget's code, click on the sideways arrow next to the widget's id.

And with that the gadget will be hidden for readers except you.

Posted in Hacks, how to, Widgets | No comments

Wednesday, 4 September 2013

Upload images and get the URL of the image

Posted on 11:58 by Unknown

As each day there are lots of new users joining the world of blogging, is necessary to discuss about some basic topics that bring up some recurring questions such as how we could get the URL of an image?

On the Internet there are many both free as well as paid web hosting where we can host images, but since we use Blogger then there is nothing better than using the same hosting service that Google gives us and that is Picasa.

The fastest way to upload an image is by going to the Blogger post editor. From your Blogger Dashboard, go to your blog, then click on the New post button. And preferably from the Edit HTML tab, click on the image icon.

A pop-up window will open, then click on the Choose files button, browse for your image(s), double click or click on Open and then hit Add selected.

When you have uploaded you will see that in the post editor shows the code of the image.

That code is the URL of the image. You'll see two URLs (Web addresses):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHxGYIeuxh_DAIPhPScuH0kDLAEv7vhPS1lEa7wiSYwUST2nlexYpHfL6NNbiE-U4ifFRw_bYcRCIFVwLPX6ln26d_p07tTGvOFpgMK70hnXh0ark4dlT9xxNoAkqen0ecwYGsTNWNW7vx/s1600/Bliss-Windows-XP.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHxGYIeuxh_DAIPhPScuH0kDLAEv7vhPS1lEa7wiSYwUST2nlexYpHfL6NNbiE-U4ifFRw_bYcRCIFVwLPX6ln26d_p07tTGvOFpgMK70hnXh0ark4dlT9xxNoAkqen0ecwYGsTNWNW7vx/s320/Bliss-Windows-XP.png" /></a>

The first is the URL of the image that you need to take. It is not necessary to publish this entry where you uploaded the picture, you could as well not publish it, leave it as a draft or delete it, the image will be saved anyway on PicasaWeb (unless when you removed the draft, you have also selected the image to remove). You could also upload image directly from Picasa. Just login to PicasaWeb, select the album where you want to host the image, and click on Add photos.

Select the image from your computer and upload it.

After we have uploaded, click on OK.

There you will see the thumbnail, along with other photos, if there are more.

If you want to get the URL of the image from Picasa then click on the image to open in full size.
With the right mouse button click on the picture and select option depending on the browser you use...

If using Google Chrome, then select Copy Image URL:

If you are using Mozilla Firefox select Copy Image Location:

If you are using Opera select Copy Image URL:

If you are using Safari select Copy Image Address:

If you are using Internet Explorer (I hope not), first select Properties, a window will open, there you will find the Address section from where you can select the URL of the image and copy it:

Having selected any of these options you'll have in the clipboard the URL of the image. Simple isn't it?

Remember that all images you upload on Blogger are stored in your Picasa account, so if you find an image previously uploaded to your blog, go to your Picasa account, select the album containing the name of your blog and there find the picture you need. The procedure to obtain the URL of the image is the same as explained above.

Posted in how to, Image Effects | No comments

Tuesday, 3 September 2013

Possibly the most simple jQuery Slider

Posted on 06:15 by Unknown

Do you have jQuery in your blog and space to insert 10 lines of code? If the answer is yes and you also want to have an automatic slideshow, this is the simplest code I've seen so far.

That code having a succession of simple images placed inside a box with a common general container would give this result:

1. Adding the JavaScript

If you do not have jQuery, then you should add this line just after ]]></b:skin> to load this popular slideshow:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

Once confident that we have the library in our template, we need to add the same line to make the series of images function as a slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
//]]></script>

We can save changes to the template because that is all. It is simple but you will see that it works and does what it has to do. Now we just have to put the images where we want to display, in the manner discussed below.

2. Create the slider

After adding the codes above in our template (although you could add it directly into a gadget, on a page or even in an entry as you see here) we can create a viewer as you saw above. We just have to use this HTML structure below to add the images:

<div id="slider">
    <div><img src="IMAGE_URL"/></div>
    <div><img src="IMAGE_URL"/></div>
    <div><img src="IMAGE_URL"/></div>
</div>

I do not know how you see it but it is all you need.

For me this is quite lightweight and efficient, much more than most libraries that are used perhaps too often.

Settings

The last three numbers of the plugin allow us to adjust some things. All are expressed in milliseconds (4000 = 4 seconds)

fadeOut(0): Time for the outgoing image
fadeIn(1000): Time for the next image
('#slider');},4000): Time spent in each image

How it Works

And for the curious who want to learn things...

$('#slider div:gt(0)').hide();
With gt(x) we select all the divs from number x. In this case 0 is the first, so what we do with this line is to hide (hide) all the boxes except the first, which will be the image visible initially.

setInterval(function(){ [what we will do] }, 4000);
We need to reiterate a few things from time to time and we do with setInterval, indicating the delay time between each set.

$('#slider div:first-child').fadeOut(0)
Within each of these intervals we remove (fadeOut) the first box (div:first-child) that is in the relationship of images...

.next('div').fadeIn(1000)
...and we make the following box (next) appearing gradually (fadeIn).

.end().appendTo('#slider');
Finally we have the first image and place it at the end (appendTo) of the "list".

end() resets the count of elements that we move forward with next(). Thus, the first child made earlier to disappear is the one we sent down the stack and not the image that is now visible.

Variants and customization

As you have seen CSS is not necessary for the slider to work, but using it we can change its look, allow the use of images of different sizes, include labels and even improve the transition. Here are some ideas.

DEMO TEXT1

DEMO TEXT2

DEMO TEXT3

We can limit the overall container size and prevent overflow for larger images. And then we will put rounded corners, border and then center them.

#slider {
overflow: hidden;
width: 500px;
height: 300px;
border:3px solid #b8b8b8;
border-radius: 40px;
margin: 0 auto;
padding: 0;
position: relative;
}

If we place the parent boxes of the images absolutely with respect to the general container (for that we put before the relative), these will overlap each other. In this way the fadeOut may give them some time to be "visible" (we changed 0 to 1000) and a smoother transition between images. The mixture of images is produced in the second demo.

In the images, the max-width serves us to always take up the entire width and min-height so that even if they are distorted, there will remain no space below when they are less than 300px.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}

And if we add other elements on the images (in this example a text), we'll just label them with a span or paragraph (p) and position them in the CSS in an absolute manner, placing them in the exact place where we want with top/bottom - left/right.

#slider p {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 400px;
height: 24px;
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;
font-size: 22px;
line-height:22px;
text-align:center;
}

The markup in the HTML for this last, includes also a link to the image, so it would be like this:

<div id="slider">
<div><a href="Link_URL1"><img src="Image_URL1" /></a><p>TEXT1</p></div>
<div><a href="Link_URL2"><img src="Image_URL2" /></a><p>TEXT2</p></div>
<div><a href="Link_URL3"><img src="Image_URL3" /></a><p>TEXT3</p></div>
</div>

Posted in Blog Design, Image Effects, jQuery, Widgets | No comments

Sunday, 2 June 2013

Horizontal menu with sub-tabs in two columns for Blogger

Posted on 11:37 by Unknown

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.

blogger navigation menu, css menu, drop-down menu

The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:

Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section.

Click on the "Add a Gadget" link just under your header image
From the Gadget's List, select "HTML/JavaScript" option.

STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the "Title" section of this widget blank.

<div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a # sign where it says http://YOUR URL HERE.com

You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:

<li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</li>

STEP 3: Now let's go a step further and add the CSS style in our Template

Go to Template > Edit HTML

Click on the sideways arrow next to <b:skin>...</b:skin>

Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]></b:skin> tag and just above ]]></b:skin> add this code:

/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpyjNNJg7i7LSOZm7v1p8wG3booS3gv4BsItIl0LO0rw44Q7M4DC6AlD2j2MAJiQcd34b0MGzr-e5a7AHFPjMTpd097lBwHFynZzwfjJktKn-ixPHvXmRdyH6jT__LwSbxbYHad3XlMws/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

Now find (CTRL + F) this line:

/* Tabs

It will also have some little lines beneath:

/* Tabs
----------------------------------------------- */

And just below these little lines, delete the code below until you reach at:

/* Columns
----------------------------------------------- */

Instead of the code that you have removed, add this one:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

See this screenshot for more info:

menu for blogger, blogger gadgets, blogger widgets

STEP 4: The final step is to Save the Template and you are done!

Visit your blog to see a beautiful navigation menu just below header.
If you have any questions or need help, leave a comment below.

Posted in Blog Design, css, menus, navigation menu, Widgets | No comments

Fade In/Out Page Loading Effect On Blogger Posts

Posted on 08:08 by Unknown

A very common effect in jQuery is the fade effect that hides or shows an element by fading it, and we can use it in many ways as for example in the blog's navigation. The following script does just that, by loading the page with a fading effect when we browse on internal links that are in the blog, such as post titles, labels links, archive, navigation links, etc..

jQuery effect, fade in effect, blogger jQuery

You can see an example in this demo blog, click on the title of any post and see the fading effect when the page is loading.

How To Implement the Fade In Loading Effect

1) To put this fading effect on your blog, go to your Template > Edit HTML :

fading effect, blogger blogspot, blogger tricks

2) Click anywhere inside the code area and search for the </head> tag using CTRL + F keys:

3) Then, just above </head> add the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);

$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #F2F2F2; /* Color fading */
}
</style>

4) Save the changes and that's it. In green you can see where to change the color that fades on a loading page.

The original script hides the body of the page while loading, I prefer to change that property with a negative z-index to avoid problems with the search engine robots that may effect the positioning.

Problems?

Consider that such effects could increase the blog loading time, so I recommend using it only when your blog loads fast and does not have too many scripts.

If you already use another version of jQuery remove the other, leaving only this which will be readed first.

If you are using Mootools or Scriptaculous, then you have to make some modifications to the code in order to be compatible.

If you have another script with a fade effect, then it could interfere with this and you might not see anything on the page except the color fading, in such cases it is better without this script.

You can also use this effect only on some links, for example, if you want to appear only when you click on the post titles in the navigation links (older posts and newer posts), and on the top tabs, then replace this line:

$("a").click(function(event){

With this:

$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){

In some cases, the page can load for a second and then load with the fade effect, this may be "normal" because the browser is slow to read the script on page load.

Apart from these drawbacks, I think it's a very elegant way to load blog pages while browsing them, don't you think?

Posted in Blog Design, blogger posts, how to, jQuery | No comments

Saturday, 1 June 2013

Using the :before and :after Pseudo Elements on Sidebar Titles

Posted on 10:56 by Unknown

This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an explanatory title and the right, a related link.

The idea of generating Adobe-like Arrow Headers was actually discussed by css-tricks and adapted to Blogger.

How to Add Adobe-like Headers to Blogger

Step 1. Log in to your Blogger dashboard > go to Template > Edit HTML, then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag:

</head>

Step 2. Just above it, copy and paste this code:

<style>
.module h2 {
background-color: #D5D5D5;
border-radius: 20px 0 0 20px;
color: #FFFFFF;
font-family: Verdana;
font-size: 14px;
line-height: 32px;
margin: 0;
padding: 0 0 0 20px;
text-shadow: 2px 1px 1px #222;
}

.module h2 a {
    border-left: 5px solid #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
    content: "";
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

.module.blue h2 a {background-color: #A2D5EC;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}

.module.green h2 a {background-color: #bada55;}
.module.green h2 a:hover {background: #C7E176;}
.module.green h2 a:after {border-right: 6px solid #bada55;}
.module.green h2 a:hover:after {border-right-color: #C7E176;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

Step 3. Save the Template.

Screenshot:

Step 4. Now go to Layout and Add a new HTML/JavaScript Gadget with one of the codes below for each of the widget title:

Background in blue:

<div class="module blue">
<h2>Title in <a href="Link URL">Blue</a></h2>
</div>

Background in yellow:

<div class="module yellow">
<h2>Title in <a href="Link URL">Yellow</a></h2>
</div>

Background in green:

<div class="module green">
<h2>Title in <a href="Link URL">Green</a></h2>
</div>

Background in red:

<div class="module red">
<h2>Title in <a href="Link URL">Red</a></h2>
</div>

Note: Change "Title in" text with your widget's title and Blue, Yellow, Green and Red with the text on the right, then add a Link URL to it.

Step 5. After you saved the HTML/Javascript gadgets containing the codes above, drag and drop them just above the widgets you want to show... and Save the Arrangement.

DEMO

You can see how the sidebar titles has been replaced with some cool header bars on this demo blog.

Posted in Blog Design, how to, titles | No comments