How to add a jquery image slider to your blogger powered blog

In this tutorial you will learn how to add a simple jquery image slider to your blogger powered blog note this will not work for those who have Javascript disabled in their web browser but most people have it enabled by default if you are not sure whether yours is disabled or not check the demo you should see a working image slider also all the images must be the exact same size as each other.

I recommend you download a backup copy of your template or use a test blog I'm going to use a 3 column template from my previous tutorial but it should work with any template now we need to download two scripts named jquery.js and s3Slider.js you can read more and download the scripts from this link or just grab the embedded source code from the demo.

Once you have the two scripts you can either upload them to your server or embed the scripts directly in the page i will show you both ways the first assuming that you have uploaded them to your server

go to layout > edit html and paste the following code just before the closing </head> tag making sure you replace the red comment with the direct link to the scripts if you have them on your own server

<script src='http://./jquery.js' type='text/javascript'/>
<script src='http://./s3Slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 5000
});
});
//]]>
</script>

otherwise if you do not have the scripts on your own server paste the following code just before the closing </head> tag

<script type='text/javascript'>
//<![CDATA[
/* paste contents of your scripts here */
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 5000
});
});
//]]>
</script>

replacing the red comment with the full contents of the scripts you downloaded by opening them with a simple text editor the code in green is to set the duration of how long will one picture be shown on the page in milliseconds.

Once you have the scripts installed add the following CSS code adjusting the parts highlighted in red to the exact width and height of your images


#slider1 {
width:525px; /* To be same as image width */
height:237px; /* To be same as image height */
position: relative;
overflow: hidden;
border:1px solid #eee;
margin:0 auto;
}

#slider1Content {
width:525px; /* To be same as image width or wider */
position: absolute;
top: 0;
list-style:none;
margin:0;
padding:0;
}
.slider1Image {
float: left;
position: relative;
display: none;
}
.slider1Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width:550px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
bottom:0;
}
.clear {
clear: both;
}
.slider1Image span strong {
font-size:14px;
}

Now save your template then go to the page element tab and add a html/javascript widget just above the post and leave the title field empty with the following xhtml code in

<div id="slider1">
<ul id="slider1Content">

<li class="slider1Image">
<a href='http://myblogpost.html'>
<img alt="my image" src="http://tinypic.com/5xpc1.jpg"/>
</a>
<span>
<strong>Some title</strong>
<br/>
some description text here
</span>
</li>

<li class="slider1Image">
<a href='http://someblogpost.html'>
<img alt="some image" src="http://tinypic.com/5fde1.jpg"/>
</a>
<span>
<strong>Some title</strong>
<br/>
some description text here
</span>
</li>

<div class="clear slider1Image"></div>
</ul>
</div>

In the code above i have added two images if you would like more it's just a matter of copying one of the blocks of code in between the <li></li> tags so the first part highlighted in green is the link to your blog post while the code highlighted in red is the direct link to the image and the blue text is the title and description of your image so now you should have a working image slider you can also have the caption coming in from the top, left or right side of the images i recommend you read more about it on the authors site.

Thanks for reading comments are welcome see my result ...Read more!

How to create a fully widgetized tabbed content box on blogger

In this tutorial you will learn how to add a tabbed content box on your blogger blog using CSS, XHTML and Javascript in 4 simple steps it will also be fully widgetized so you can easy change colours and rearrange the widgets within your dashboard here's a simple screenshot of what we are going to create in this tutorial.

.

Note this will not work for those who have Javascript disabled in their web browser but most people have it enabled by default if you are not sure if yours is disabled or not check the demo you should see a working tabbed box.

If you have any questions about this tutorial feel free to ask in the comments so I recommend you use a test blog for this tutorial using the minima template or backup your template before attempting this as i cannot be held resposible if you mess up your template.

Now let me point out that I'm no Javascript expert I'm still learning so i did a little research around the internet and found a great script which does most of the work for us you can read more about it and download the script from this link look for the javascript file named tabber.js this is the script that we are going to use in this tutorial.

Now go to layout > edit html and paste the following code just before the closing </head> tag making sure you replace the red comment with the full contents of the tabber script you downloaded by opening it with a simple text editor.

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
/* paste the full contents of your tabber script here */
//]]>
</script>

next find the <div id='sidebar-wrapper'> just below there add the following code

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
</div>
in the code above we have added 3 tabs if you would like more tabs it's just a matter of copying one of the sections and pasting it below the other making sure you change the id to tab4 and so on since section IDs must be unique.

Now we need to add some CSS code for the structure and style of the tabs so copy the following CSS code and paste it in your template just before the body CSS code

/* start tab styles */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}

.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/* end tab styles */

in the CSS code above i have declared 4 variables named tbbxbgcolor, tbbxbrcolor, tbbxcolor1 and tbbxcolor2 so we can easy change colours of the tabbed content box from within the fonts and colours tab the width of the tabbed box will span to whatever width your #sidebar-wrapper is set to if you know CSS you could hard code the hex colour codes and tweak things further to your liking.

So now we add the final code to define the variables we just declared so copy the following code and paste it at the top of your template with the rest of the variable definitions

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">
now save your template and go to the page element tab you should see something like the screenshot below.



add a widget in the tabbed section then click the numbers to change tabs so you can add more widgets in the sections do not forget to save your template before viewing your blog to change colours of the tabs go to the fonts and colours tab you should see something like the following screenshot below.



Now you should have a fully widgetized tabbed content box i hope you enjoyed this tutorial comments are welcome see my result ...Read more!

How to create static pages on blogger

In this simple tutorial i will show you how to create static pages within your blog on blogger so you can easy link to them from navigation links within your blog these could be any page you like such as "about me" and "contact me" pages.

so the first thing would be to either use a test blog or download a backup copy of your template before doing this to your blog as i cannot be held responsible if you mess up your blog.

Once you are ready go to your blog and create a new post using whatever title you want for this tutorial i gave mine the title of "About" now add your post content when you have finished click the "Post Options" link found at the bottom of the post editor see screenshot below



now we need to change the date of the post to something older than your first blog post that way it will be hidden in the archives next under "Reader Comments" click the last radio button to disable comments since we don't want people commenting on these static pages do the same for the Backlinks next publish your post and visit it note how the date, time, email post icon and posted by are all showing up and whatever else you have installed below the post footer such as social bookmarks.

Well here's how we can get rid of them on the static pages which we don't allow reader comments go to layout > edit HTML expand the widget templates and find the following code

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

now the code highlighted in red basically checks to see if we allow comments on the post if it does then the code within the tags will be shown otherwise nothing will be shown

so we need to wrap the post date, time, posted by and whatever else you don't want showing within the tags so they are not shown on our pages which do not allow comments

here's an example of the timestamp, posted by, and email icon wrapped within the tags as described above

<b:includable id='post' var='post'>
<!-- Code removed for simplicity -->
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:post.allowComments'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span> <span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span> <span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</b:if>
<!-- Code removed for simplicity -->
</b:includable>

and the post date


<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<!-- code removed for simplicity -->
</b:includable>

you can use those tags as many times as you like through your template and put anything within those tags that you don't want showing up on your static pages so now you should know how to create static pages within your blogger blog take a look at my privacy policy created using the steps described above

i hope you enjoyed reading this tutorial if you are having any problems leave your comment and let me know i will get back to you as soon as i can ...Read more!