My TutSpot BlogSpot

Simple, Stylish, Colorful and Animated CSS3 Navigation Bar for Websites and Blog

Designing a beautiful and light weight website template is not a problem today. CSS3 and HTML5 have changed the dimensions of the web designing. The web pages that were once driven with heavy flash files and jQuery are now works seamlessly with the power of CSS3 and HTML5.

CSS3 and HTML5 no doubt are supported by new browsers only but they have a strength and ability that makes them usable. In the following post we will try to create a stylish CSS3 navigation bar that, at any cost, is not less than a heavy transitive eye catching jQuery navigation bar.

This CSS3 navigation bar uses CSS3 animation to swap between the text and image when a user hovers the navigation bar. No jQuery and JavaScript is add in this navigation bar and this bar can be used on both a website or a blog. Features and Installation method for this CSS3 slider are as follows:

Features

Completely CSS3 based.
No JavaScript or jQuery.
Completely customizable.
Easy installation.
Images and text based navigation.

Installation

Open website or blogger template.
search for the </head> tag.
Copy the CSS code and paste it just before the </head> tag.
Copy the HTML code and paste it in the <body> tag where you want to show it.

CSS Code

HTML Code

<div id="exe_nav">
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNPQApZRcxHaXAevG3LQ6v9oHHAvIi_0QdmnDllIR8jRGcShiHplFxnsnIQUR3pGZDVxB1owMCUGiR5VzYl_tNbjbLnFLhRWUsvMV1fmY-urd5WHBgXam3VXnJk8-f2vetmvteDXFo5e4/s24/bloglogo.png">
<br/><span class="name">Blog</span>
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkTkSMoZuwaPv0MMdJoYnFSenWhWPTu7C2F108J-ywYpCYma_KGVhL9fh3o3ezHx7ZA-JSeMJ5Y2Bfg9WVtJ5wuGhAdAJet10odqIvDrT_E1XH25EiHwPTcn9NsIkwsPYyBLLVehQ9po/s24/csslogo.png">
<br/><span class="name">CSS</span>
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9OsP7EiI5O-nBqlJH4EHETNknlwQm2TgBtUKM18LNbJdLbT9hqw7StD9tTlykULLRB6pKDoWg81ioExo63I3-gxnP6yDk3L3Pfs1TGpU3rWIPCTS1uxg0HApIZPYVfnMe8XwwdfO6mcs/s24/htmllogo.png">
<br/><span class="name">HTML</span>
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3nz03T-WNwsB1LUblm9h1zKoCV_RhyphenhyphenTzdI1o5svm7TjtOSVdxJUq6OsNDT-AfsiCy7t2-MWfckAOkkfoddXb9yH1Riy4UosoJ6nmdedJ3nozyjpGcbSHi6Xpd29MWbhjhD27nY1vtk0I/s24/jscriptlogo.png">
<br/><span class="name">JScript</span>
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xT2gAbDUjl5qYzOy_qpqFo6M2CWs_oyHETiJ5LPKhzRKVKBv-6WnWWcVtnrHMWFdjyT3zGm1i4l1naSuefGfpD2EvXjB-Y36IM9PAg6c8qoSQLQUdisoEGrQjBVIaB1F6y5CkYLKXac/s24/jquerylogo.png">
<br/><span class="name">jQuery</span>
</a>
</li>
<li>
<a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIuRyLj0val0wOMPXDuusPYuGlKUNtr76i0R0i4xZgAweEhEqXMJTuVsAbF7fJXR-IXW6cQrv3DWOvboTma6kIfx8zSv99fy2-n1RojAQ3WIe8IAEnCzgEddMg7_69efyA5jx9RbNkcI0/s24/websitelogo.png">
<br/><span class="name">Website</span>
</a>
</li>
</div>

Customization

You can change approximately all the CSS to your taste.

If you have any queries feel free to ask.

Simple and Beautiful Related and Random Posts Widget for Blogger's Blog

For every bloggers the main problem in blogging is to make their visitors stay on their blog more and more. There are differnet methods that are widley used by bloggers to do so. Some of them are beautiful blog templates, easy navigations, low loading times, cross-browsers support, powerful and well structured articles and different widgets to give veiwers what they want at their finger tips.

Related posts widget is one of those techniques that are used by a large number of bloggers today to increase their visitors. Related posts are actually randomly selected posts with same tags and labels as the post is. Different related and random posts widgets are available in market with different visual styles. Use of these related post widgets can surely have a positive effect on one's blog.

The related posts widget shared below is a small size JavaScript widget with no links of any external files, therfore you don't have to worry about its loading time and 24 hour uptime. Features and Installation method with Codes are as follows:

Features

Installation as easy as 123.
CSS3 animations.
Fully customizable.
No Jquery only JavaScript.
No Extrenal file linked.

Installation

Go to Dashboard > Template.
Click Edit HTML.
Search for </head>.
Copy paste the CSS code just before the </head>.
Search for id='post' var='post'.
Copy paste the HTML/JavaScript code just before </b:includable>.
Save Template and you are done.

CSS Code

HTML/JavaScript Code

<b:if cond='data:blog.pageType == "item"'>
<ul id='random-posts'>
<h2>Random Posts...!!!</h2>
<script type='text/javaScript'>
//<![CDATA[
var rdp_numposts = 7; //Number Of Random Posts
var rdp_snippet_length = 110; //Length Of Description Text, 0 To Hide
var rdp_datecomment = 'no'; //Show Date And Comment 'yes/no'
var rdp_comment = 'Comments'; //Text For Comment Count
var rdp_disable = 'Comments Are Off Here...'; //Text If Comment Is Disabled On Post/Blog
var rdp_current = [];
var rdp_total_posts = 0;
var rdp_current = new Array(rdp_numposts);
function totalposts(a){
rdp_total_posts=a.feed.openSearch$totalResults.$t
}
document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"></script>');
function getvalue(){
for(var b=0; b<rdp_numposts; b++){
var d=false;
var c=get_random();
for(var a=0; a<rdp_current.length; a++){
if(rdp_current[a]==c){
d=true;break
}
}
if(d){
b--
}
else{
rdp_current[b]=c
}
}
}
function get_random(){
var a=1+Math.round(Math.random()*(rdp_total_posts-1));
return a
};
//]]>
</script>
<script type='text/javaScript'>
//<![CDATA[
function random_posts(n){
a=location.href;
y=a.indexOf("?m=0");
for(var f=0; f<rdp_numposts; f++){
var l=n.feed.entry[f];
var m=l.title.$t;
if("content" in l){
var o=l.content.$t
}
else{
if("summary" in l){
var o=l.summary.$t
}
else{
var o=""
}
}
o=o.replace(/<[^>]*>/g,"");
if(o.length < rdp_snippet_length){
var k=o
}
else{
o=o.substring(0,rdp_snippet_length);
var b=o.lastIndexOf(" ");
k=o.substring(0,b)+"…"}
for(var e=0; e<l.link.length; e++){
if("thr$total" in l){
var h=l.thr$total.$t+" "+rdp_comment
}
else{
h=rdp_disable
}
if(l.link[e].rel=="alternate"){
var d=l.link[e].href;
if(y!=-1){
d=d+"?m=0"
}
var g=l.published.$t;
if("media$thumbnail" in l){
var c=l.media$thumbnail.url
}
else{
c="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0
/s400/noimage.png"
}
}
}
document.write("<li>");
document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');
document.write('<div class="rp_animation"><h4>'+m+"</h4>");
if(rdp_datecomment=="yes"){
document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")
}
document.write("<p>"+k+"</p></div>");
document.write('<div style="clear:both"></div></li>')
}
}
getvalue();
for(var i=0; i<rdp_numposts; i++){
document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=' + rdp_current[i] + '&max-results=1&callback=random_posts"></script>')
};
//]]>
</script>
</ul>
<div style='clear:both'/>
</b:if>

If you have any quries feel free to ask.

Simple JavaScript Page Navigation for Blogger

By default Blogger has a simple navigation system to navigate between the posts and pages. This page navigation has just three buttons, one for next one for previous and one for home. this simple page navigation system is best to navigate between the posts but on pages and on post summary pages it does not seems good to work. For example if a visitor has to go the last post then he or she has to go through all the posts by using previous button.

To overcome this problem, there are many beautiful and handy page navigation widgets are available in Blogger world. These page navigation widgets have different styles and way of working. Using these widgets any one can make his or her blog awesome and user friendly.

The page navigation widget we have shared below is a bit different from others available in market. Usually page navigation widgets have back link to their developers and they have their main JavaScript code hosted on remote sites. Since the remote hosting often remains down, resulting in the stoppage of the page navigation widget to work properly. Our page navigation widget has no such problem with it.

Features

Fully customizable CSS.
Easy to install.
Simple and cross-browser.
No back link to the developers.
Complete code, no external file.

Installation

Go to Blogger.
Open your desired Blog.
Open layout.
Add HTML-JAVASCRIPT gadget.
Copy and paste the code given below.
Click Save and you are done.

Code

If you have any queries feel free to ask

Simple JavaScript Multitab Widget for Blog and Websites

Multitab widgets are very popular now a day. They help reduce webpage space and give a handy interface for users. Using multitab widget you can place different types of widgets or web data in a single place.

In a website multitab can be used for creating different sub-categories at a single page for example a software company uses multitab for defining system requirements, features, downloads help or any other related data of software on the main page of the software. Users, therefore, need not to go back and forth between different web pages for data collection or information viewing.

Similarly for blog different widgets like recent post, categories, top posts, blog archives and so on can be easily summed up at a single place. Multitab widgets usually used in blogs to shorten the height of the sidebars.

There are many multitab widgets are available in the market, some of them uses jQuery, some are based on JavaScript and some claimed to be CSS3. No matter what type of they are, they are lengthy and heavy resulting in the more loading time of the page. The multitab widget that I am going to share today is a small JavaScript based multitab that is cross browser too. Some of the exciting features of the multitab are:

Features

Small in size.
JavaScript based i.e. compatible with all browsers.
Easy to Install.
Supports Blogger, Wordpress and Web.
Can extend new tabs.

Customization

The code for multitab is of three parts. CSS, JavaScript and HTML. CSS part is fully customizable. You can customize or change the whole CSS, but just remember, the first tab id will always have a display block property while the rest of the tabs have the display none property.

#tab {display:block;}
#tab2, #tab3, … #tabn {display:none;}

In JavaScript you have to adjust the limit of variable i according to the number of total tabs. Always put the limit one more than the number of tabs, for example if there are 5 tabs then the limit value of variable i will be 6, if the number of tabs is 7 the value will be 8.

for (i =1; i<5; i++){

For HTML every tab has an id of tab1, tab2, tab3 and so on. Similarly every tab button have the increasing onclick function of multitab(), like multitab(1), multitab(2), multitab(3)…

Just put the CSS and JavaScript code before the </head> tag and the HTML part in the <body> tag where you want it.

CSS Code

Javascript Code

HTML Code

If you still have any queries, feel free to ask.

Auto Image Thumbnail & ReadMore Link For Blogger Post

Blogger is a good platform for blogging. It has many different pre built templates for its users. These templates are good enough for novice and beginners, but if you are expert or pro you need your own custom template. Custom templates help both you and your visitors in posting and viewing respectively. Customizing a blogger template is not an easy task since it is written in XML. Still there are many tweaks and hacks that can help you in customizing your blogger template.

The tweak or hack that I am going to share today is Auto Read More link with Image Thumbnail. In default every blogger has to put a line break manually in its posts for summarizing them. It is impossible to summarize the post with image and equal number of words, so that it looks beautiful at first page. The features, installation and customization method is so easy that anybody can make it to his taste.

Auto Read More with image thumbnail is a great tweak for blogger blogs. It give them beauty as well as ease of access. Visitors will find Auto Read More with image thumbnail a great thing, helping them understand and visualize what a post about is and what is explained in it. A picture worth’s thousands of words therefore a post summary with image thumbnail makes the blog itself a worthy thing and help authors increase visitors and viewers.

Features and Installation technique is defined under specific headings so that everyone can understand easily what he or she is going to add to his or her blog.

Features

No need to manually enter Line Break in every post.
First image of the post will be chosen as the summary image.
Width and height of summary image is customizable.
Custom settings for both with or without image summary.
No external file, therefore no worries about the stopping of the code.

Installation

Login to your Blogger account.
Go to Dashboard > Template > Edit HTML.
Copy paste first code before </head>.
Search for <data:post.body/>.
Replace <data:post.body/> with the second code
Customize the first code if you want.
Save template, and you are done.

First Code

<script type='text/javascript'>
var noImgSum = 200;
imgSum = 100;
iHt = 320;
iWd = 240;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function autoReadMore(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = noImgSum;
if(img.length>=1) {
imgtag = '<img id="autoReadMoreImg" src="'+img[0].src+'" width="'+iWd+'px" height="'+iHt+'px"/>';
summ = imgSum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Second Code

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> autoReadMore("summary<data:post.id/>");
</script>
<a id='readmore' expr:href='data:post.url'>Read More ...</a>
</b:if>
</b:if>

Simple, Stylish, Colorful and Animated CSS3 Navigation Bar for Websites and Blog

Features

Installation

CSS Code

HTML Code

Customization

Simple and Beautiful Related and Random Posts Widget for Blogger's Blog

Features

Installation

CSS Code

HTML/JavaScript Code

Simple JavaScript Page Navigation for Blogger

Features

Installation

Code

Simple JavaScript Multitab Widget for Blog and Websites

Features

Customization

CSS Code

Javascript Code

HTML Code

Auto Image Thumbnail & ReadMore Link For Blogger Post

Features

Installation

First Code

Second Code

Customization

Top 5 of the Month

CSS Tools

HTML Tools

SEO Tools

Contact Form

About Me

Follow Me

Caution!