How To Add New “Vertical” Navigation Menu For Blogger

In many sites you have seen horizonal menu.Now I am going to give a widget which increases you traffic
.It looks awesome in all sites then horizontal menu.Let us see how to do this trick.Just follow these steps.

Demo

1.Login to your blogger dashboard--> Desing- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag.

3.Copy below code and paste it just before ]]></b:skin> tag.

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJYrloi0c0Y05Eaek9uzSH3kM5rr0K9I8bhPbqCRk20o5lgl_sPCVwidt-VfQkfdh07bZXyQ5Fhvaxpll64ZQ0LNB_R5kCflU8qgc6RaF5b_4U8d4sOw1D4AR-hmOdWPkcX86nwikZVLo/); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJYrloi0c0Y05Eaek9uzSH3kM5rr0K9I8bhPbqCRk20o5lgl_sPCVwidt-VfQkfdh07bZXyQ5Fhvaxpll64ZQ0LNB_R5kCflU8qgc6RaF5b_4U8d4sOw1D4AR-hmOdWPkcX86nwikZVLo/) 0 -32px; padding: 8px 0 0 10px; }

4. Save Your Template.

5.Now Go to Desing --&-- Page Elements.

6.Click on 'Add a Gadget' on the sidebar.
7.Select 'HTML/Javascript' and add the one of code given below

<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a> </li> </ul> </div> 

Note: Replace the hash (#) sign with your Page Links / URL and replace Link1, Link2, Link3 etc with your Page Titles

8.Now save your "HTMl JavaScript" you are done..Cheers

Add Videos/Images in Blogger/Blogspot Comments

Maybe many of you have wondered if it is possible to post youtube videos and images into your blogger comments. Well, now it is! But first of all you should know that if you have blogger threaded comments activated, it won't work. So if you want to have this feature, you should remove blogger threaded comments firstly.

How to add videos/images in Blogger comments

Step 1. First log in to your Blogger account, go to Dashboard >> Design >> Edit HTML >> check the "Expand widget templates" box (make a backup)

Step 2. Find (CTRL + F) the following piece of code:

</body>

Step 3. Immediately above/before this code, paste the code below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:490px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/\[\/youtube\]/gi, "frameborder='0' allowfullscreen></iframe>");bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Step 4. Now find (CTRL + F) this code:

<b:loop values='data:post.comments' var='comment'>

Step 5. Just above it, add the following code:

<div id='multimedia'>

Step 6. Then find:

</b:loop>

Note: look for this piece of code after the code on the step 4.

Step 7. Just after it, paste this:

</div>

Step 8. Save template.

Instructions

Now everytime you want to post images & videos in comments, you should add the following tags at the beginning and after the url of your youtube videos or images you want to share:

For example:

We have a youtube url:
www.youtube.com/watch?v=jEgX64n3T7g

To make a youtube video appear in blogger comments, you'll have to add the red codes at the beginning and after the youtube URL of the video:

[youtube]www.youtube.com/watch?v=jEgX64n3T7g[/youtube]

To put images in blogger comments, add these codes at the beginning and at the end of your image url:

[img]your-image-url[/img]

Note: replace your-image-url with the url address of your image

Settings

To instruct your visitors on how to post images and videos into your blogger comments, you can add a message just above your blogger comment form. To do that go to Dashboard >> Settings >> Comments - and add the following text in the Comment Form Message box:

If you want to post a youtube video or a image in your comment, use <b>[img]YOUR-IMAGE-URL-HERE[/img]</b> for posting images and <b>[youtube]YOUTUBE-VIDEO-URL-HERE[/youtube]</b>

You can see it in my screenshot:

Press Save Settings and you're done !

If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below.

How to Create a Table Of Contents Page For Blogger?

You have seen that I have created an automatically updated table of contents page that shows the links to all posts published so far at this blog. This widget displays all your posts category wise and really saves time. I was previously adding new links manually to the Blogger Tricks page but as soon as I came to know of this great widget from Abu Farhan I instantly converted to it. This widget will also tell visitors that which posts are new and which are old. I have modified the CSS in order to make it suit your blog appearance.

Please first see a Demo Table Of Contents Page and play with the widget to see what is so exciting about it.

Follow the steps below to create a TOC page for your blog

1. Go To Blogger > Design > Edit HTML
2. Back up your template
3. Search for ]]></b:skin>
4. And just above it paste the CSS code below,

/*--------BBT TOC-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}

     5.   Save your template and now create a New Page (not a new Post).
     6.    Give Your new Page a relevant title like “XYZ Table Of Contents” and then in the EDIT HTML mode of your blogger editor paste the code below,

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://bloggertipsandtrickz.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

See a screenshot on how things will appear,
 Now simply replace http://bloggertipsandtrickz.blogspot.com with your Blog URL and hit save. View your new page to see a beautiful Table Of Contents with a nice drop down effect.

Customize The TOC widget

By default I have kept the Category background in active colour mode to appear as blue and inactive as dark gray as shown below,


If you want to change the colour of the Active mode then simple change #9dc2e7 and #438cd2 . Here #9dc2e7   refers to a lighter shade and #438cd2 refers to a darker shade colour. So whatever colour you wish to use simply replace #438cd2 with your prefered colour and #9dc2e7  with the lighter shade of your prefered colour.

That’s it!

How to Add Tilt Image Effect on Blogger Post Images

Tilt image effect for blogger post images will tilt your images to a particular direction and tilt them again when you mouse over those images. Well this is just for adding some motion to those image so that your readers enjoy that cool effect. So now you can see the effect demo below for the images you are going to get on your images.

                                        LIVE DEMO




So now how you can achieve this effect on your blogger images is explained below so follow the steps and enjoy this cool effect.
1. Go to Blogger.com and Sign In to your account.
2. Now choose your Blog and Navigate to Template > Edit HTML.
3. Now find out ]]></b:skin> and paste below code right above it.

.post img {-webkit-transition: -webkit-transform .15s linear;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);padding: 5px 5px 5px 5px;-webkit-transform: rotate(+2deg);-moz-transform: rotate(+2deg)}

.post img:hover {-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);-webkit-transform: rotate(-1deg);-moz-transform: rotate(-1deg)}

4. Now save your template and refresh your blog to see this effect live on all your post images.

Changing the Rotation Amount for Images :

Well if you want your images to be rotated more, just change the values in red by the one you like just change the number and try refreshing your blog if you feel comfortable with it just keep those settings and enjoy tilt effect.

Add Falling Stars Effect on Mouse Movement in Blogger

Now add simple falling stars effect when your mouse moves using a simple JavaScript trick, by just adding some lines of codes in your html section you can easily show stars fallings when ever your mouse makes some motion. This effect is compatible with all the modern browsers so you will not have any problems using this script.

Adding Falling Stars Script in Blogger

1. Login to blogger.com and navigate to Design > Template > Edit HTML.
2. Now press Ctrl + F and search for </head> tag and paste the below script right above it and press Save template.

<script type='text/javascript'>
// <![CDATA[
var colour="black";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {

tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>

</script>

Editing the above JavaScript :

If you wanna make some changes to the above script you can easily do that by changing the values in red color, well there are more ways of editing the above script but that depends on your creativity level so try it out what ever works perfect for you fir it up and enjoy.

How to Embed Videos Uploaded on Facebook in Blogger

Facebook has all the means to share news or updates with your friends, you can upload an image and share that link or upload a video on Facebook and share that too by just clicking share option below every video or image. But what if you wanna embed that video in your blog or website for sharing it with your readers and unique visitors, well usually people use YouTube as their main video uploading platform but if you wanna embed Facebook videos on your blog than you can easily do that by choosing the embed button given below every video.
But if you are a regular uploader and video sharing freak than saving the embed code and just changing the video id would be much more convenient. You can use the below code for embedding purpose and change the blue xxxxxx with your video id that you can see in your address bar for every video you watch. Usually its like this : https://www.facebook.com/photo.php?v=129604143751756

<object width="624" height="450" ><param name="allowfullscreen" value="true" /><param name="movie" value="http://www.facebook.com/v/xxxxxxxxxxx" /><embed src="http://www.facebook.com/v/xxxxxxxxxxxx" type="application/x-shockwave-flash" allowfullscreen="true" width="624" height="450"></embed></object>

Now after replacing those xxxx with your video id you can paste the whole code right into your blog post and it will automatically be converted into your video. Well using this way you just need to change that video id everytime you wanna embed a new video in your blog post.

Add Twitter Follow Box in Blogger or Wordpress Blogs

Twitter follow box is somewhat similar too the facebook like box and gives your reader an easy option to follow you by just clicking on that small follow button. As you can see in the image on the right this is what your box will look like when you will apply the code in your blogger or wordpress blogs.
So now adding this box is really simple just add the below code as mentioned and you will have this box working out perfectly.


First see the demo:

How to add this?

1. Go to Blogger > Design > Layout.


2. Click on Add a Gadget and add a HTML/JavaScript Gadget.

<script type="text/javascript"
src="http://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("durai50sankar50");</script>

3. Now just add the above code into that gadget and replace the red word with your twitter username and leave rest of the code as it is and click on Save.
4. Now just refresh your blog and check out this gadget, well now test it by clicking on the follow button and becoming a follower to your own name :)