Gigabyteservice gadgets

5 new css3 and jquery menu bar for bloggger

2014-06-05T05:28:00.001-07:00

5 new menu bar for blogger

Today publishing top 5 menu bar widgets for blogger users that all are popular and unique.All are professional, attractive and very beautiful many of made in css3 and jQuery besides it will not become harmful to your blog speed.

Ribbon Menu Bar

Ribbon is best and cool things because it has slow mouse hover effect and gives 3D looks.The best thing is that you don’t need to install jQuery for that.

Demo
Tutorial

Rotating box menu bar

This menu bar is also build with only CSS and HTML;there is not need to add any jQuery, besides it is giving good effect and easy to put any where you want.

Demo
Tutorial

Sliding menu bar

unfortunately sliding menu bar is not working only with CSS and HTML for that you need a jQuery but still we will gives you easy way to installation.This unique sliding menu bar gives cool looks to your website when visitors click on the left corner button, at that time left window will push to right side with menu mar and that has sub-menu bar also.(this menu bar is by jqueryscript)
You need to fallow 2 step to install sliding menu bar into blogger

Demo
Tutorial

Vertical menu bar

Vertical menu bar is not simple as you think it is build with jQuery and it has beautiful effect on click,if you don’t install jQuery yet they you need to follow two steps otherwise you should follow directly from 2nd step.(this menu bar is by cssmenumaker)

Demo
Tutorial

Simple menu bar

This simple and well design menu bar fro blogger with nice mouse hover effect.it is also made with jquery and other javascript.

Tutorial
you will aslo like

how to make animated Facebook popup like box

5 new custom Facebook like box for blogger

2014-05-14T12:56:00.004-07:00

Facebook like for business page not only show how much we are popular but it's also show how much people like use. Facebook popup like box is a fantastic way to increase Facebook likes for your Fan page & show authority,so here we are sharing great tutorial for how to make animated Facebook popup like box.

Animate Facebook like box

Tutorila

Custom CSS for like box

Demo Tutorial

You can customize the border color, the height and the width of the Like Box but, officially, nothing more.so there custom facebook like box for you

Sliding Facebook like box

Tutorial

Javascript Floating Facebook Like-box Widget

Tutorial

Floating Facebook like box widget is a widget used by the bloggers to get more and more Facebook likes. Many bloggers fight to get Facebook likes. They are even ready to buy fake Facebook likes or hires people to bring them the likes

jQuery Pop-up Facebook Like Box With Background Image

Tutorial

Nice vertical menu bar with jquery

2013-10-31T09:49:00.001-07:00

Nice Vertical Menu Bar With jQuery

This tutorial is about another navigation menu. Using jQuery and CSS

How To Add This Nice Menu To Your Blog?

1. Log in to your dashboard--> Template- -> Edit HTML

2. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:

}
ul#navigation .search a      {
    background-image: url(http://img21.imageshack.us/img21/7365/searchl.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://img834.imageshack.us/img834/8079/camerae.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://img263.imageshack.us/img263/5871/rssd.png);
}
ul#navigation .photos a     {
    background-image: url(http://img508.imageshack.us/img508/2226/ipodl.png);
}
ul#navigation .contact a    {
    background-image: url(http://img808.imageshack.us/img808/5498/mailos.png);
}

You can see in the upper code that exist a couple lines with some images (blue lines). Those images are for the image that will appear in the menu. When you will create another menu item you have to add your image like in those lines.

Exemple: For an Download menu item you must add this line:

ul#navigation .download a    {
    background-image: url(link to the image);
}

3. Now find the </head> tag and before it paste the code:

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>

4. The next step is to find </body> and before it paste the next code:

<ul id="navigation">

            <li class="home"><a href="" title="Home"></a></li>

            <li class="about"><a href="" title="About"></a></li>

            <li class="search"><a href="" title="Search"></a></li>

            <li class="photos"><a href="" title="Photos"></a></li>

            <li class="rssfeed"><a href="" title="Rss Feed"></a></li>

            <li class="podcasts"><a href="" title="Podcasts"></a></li>

            <li class="contact"><a href="" title="Contact"></a></li>
<a href="http://gigabyteservice.com/" target="_blank" title="Free website designing in india"> </a>
        </ul>

You can see that each menu item has a class. This class is for display the image for the menu item (exemple how to add image is on the step 3).
When you add a new menu item make sure that you add the class to display the image

How to make new sliding social tabs for blogger in 2013

2013-10-20T07:04:00.000-07:00

Social media has become an indispensable part of our personal lives. Facebook has become an integral part of 1/6th of the world’s lives and counting all its members, is the 3rd largest country in the world next only to China and India.Social media gives you community to share your thoughts and your business ideas and your serveries social tabs for blogger help your visitor to connect with you on facebook twitter and any other social site easily It's lock better than any other social tabs.

Stylish & animated Twitter button for your blogger

2013-10-20T06:00:00.000-07:00

If you want to get stylish & animated Twitter button for you blogger blog so here is the tutorial for you it's easy and 100% working & it's by the twitterflash and I hope you like this beautiful widgets.

Step 1 copy and past below code at your widget area of blogger
<object data="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf"
height="200" type="application/x-shockwave-flash" width="200">
<param name="movie" value="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf" />
<param name="allowscriptaccess" value="always" /><param name="menu" value="false" />
<param name="wmode" value="transparent" /><param name="flashvars"
value="username=Gigabytesupdate" /><a href="http://www.lordhtml.blogspot.com"
title=" Lord HTML "> InfozGuide </a><embed src="http://www.buzzbuttons.com/BUTTON4/twitbutton.swf"
type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200"
menu="false" wmode="transparent" flashvars="username=Gigabytesupdate"><a href=
”http://gigabyteservice.com/web-designin” rel="dofollow"target=”_blank”
title=”Make free website in india”> </a></embed></object>

InfozGuide

How to add live chat widget for blogger

2013-10-19T04:46:00.003-07:00

What is Live chat Widget for blogger

live chat widget gives you ability to talk with your visitor online at a time when the visit your website on blogs, and you will also get one dashboard to monitor all that stuff.

Why I need that?

If you providing some online service or product and people can’t understand how to use their service if people have any kind of problem you will solved them at a time and it will make you more professional

How to add live chat widget for blogger?

Tutorial with more video for more understanding.

Add Facebook Like Button in every post in blogger

2013-10-19T03:51:00.002-07:00

I hop you know Facebook like button is so import not only for sharing your content into facebook but it will show the search engine like Google that how much importance your site has? and it's helps to impress your new visitors. it's easy to add Facebook like button into you blog but it's not so easy to add Facebook Like Button in every post into blogger.if you are use some special kind of custom the so it will not working for you but many of cases it will surely work for most blogger blogs so late's start how Add Facebook Like Button in every post in blogger

TUTORIAL

How to make Twitter Animation button for blogger

2013-10-19T02:44:00.002-07:00

Twitter is a social networking sites popular in the world of bloggers to promote their blogs.Twitter can unbelievable work for you because Twitter is a platform where people from all over the world interact with each other.So For getting more follower you need some cool stuff like animated Twitter button

SEE DEMO HERE

Tutorial

HOW TO ADD STAR RATING IN BLOGGER POSTS

2013-10-18T23:02:00.005-07:00

- What is Star Rating gadget?
Star Rating gadget gives the ability to your visitor that they can gives their Rating for that particulate post and also count that how many time and how much rate your post have.
- Why you need Star Rating gadget for blogger?
Every blogger users know that blogger don’t have this kind of rating gadget & the Star Rating gadget important because it is not show only does blogger reader like your article but other new blogger reader also can know about it.Many reader doesn’t like to use comment system,facebook like or twitter tweets due to their privacy but in Rating gadget the doesn’t need to login or any thing so Rating in Blogger is most use full and easy tool for knowing your visitors.

Tutorial

DEMO

HOW TO CONVERT YOUR BLOG INTO VOICE FOR BLOGGER

2013-10-18T10:02:00.002-07:00

Convert your blog in to voice for blogger it’s very useful for bloggers because many people doesn't like to read long articles and blogs so you can give them your blogs into voice by using text to voice convention blogger widget.Now people don’t leave your site and stay connect with you and blogs and you can get more traffic for your blogger blogs so, let’s take a tutorial about How to convert your blog in to voice for blogger

Tutorial

How to convert blogspot.in to blogspot.com domain name

2013-10-17T05:45:00.000-07:00

Every body knows that your domain name has so much important in SEO but in the blogger we doesn't get that domain name what we want like if you are from India you will get blogspot.in so what to do if you want blogspot.com doamin name so there we have solution for your,most imoprtant thing is that you can get .com doamin name & it is top level domain name(3rd)

1 .gov

2 .edu

3 .com

4 .net

5. org

6 .info

7 .in (local)

Tutorial

How to block Ads blocker users in your Blogger blog

2013-10-17T02:58:00.002-07:00

Every ads blocker user has some kind of ads blocker addons or tool that can them to block any kind of ads which are display on your blog or website.Here we are going to show you How to block Ads blocker users in your Blogger blog.Due to Ad-blocker the ads don't reach some of the visitors and thus there would be no money no matter how much large user base you have. So in order to block Ad-blocker users, you just have to add a small piece of code. When any Ads blocker user visits to your blog or website he will be redirected to a page which will instruct him/her to disable the extension and visit the page again.

Tutorial

Image Gallery for blogger

2013-10-15T10:12:00.000-07:00

This post will explains how to create a image gallery for blogger.Using this Gallery you can show your events,skills or your personal images which will helps you to build strong relation with your visitors,if you are using blogger blog for severing your services or product so this image gallery is good your you.I hop every blogger like this image gallery.Blogspot gallery is a very simple, fast and efficient way to achieve this goal.

Live Demo

Tutorial

Youtube downloader for blogger

2013-10-14T07:12:00.000-07:00

Your website traffic are directly connected with your earning,no matter what way you choose by adsense, your services or product etc.Driving traffic to your personal blog, portfolio, or business website is key to building a larger audience, gaining new customers, and going viral. Everyone can benefit from learning about driving traffic to their site!. you can found 100s of way on the internet for getting traffic to your site.People not observed that for engaging your visitor and getting new visitor some useful and interesting gadget are so useful.here you can make youtube downloader for blogger.

Tutorial ➤

Sexy new drop down menu bar for blogger in 2013

2013-10-06T07:01:00.002-07:00

Here I have create sexy drop down menu bar for blogger users.This is new and stylish drop down menu.

Tutorial ➤

demo ➤

HOW TO MAKE STYLISH DROP DOWN MENU BAR FOR BLOGGER 2013

2013-09-29T06:19:00.001-07:00

Blogger doesn't have any drop down menu feature is you are don’t you that kind of templates so we will give you free stylish drop down menu with mouseover effect. You can easily add this stylish drop down in the blogger & this stylish drop down menu has fast loading speed(you doesn't need to add JavaScript for that )

Tutorial ➤

New Mouseover subscription

2013-09-23T08:28:00.001-07:00

Mouseover subscribers

Demo ➤

STEP 1
Copy & pest below code at just above to the ]]></b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwp102Cbqm8zUMHLDC-Q8J02DFUIKPngC4pyIkE9uStEXLZdABT2ufvKrTB07LpsEnHCkA3GjIifLI3Niy9B2c2mUQowLD88RvJAZzF0XBfKvIHnzYSyHhjwWgQFT7g4XuLnBAUV4DWH2/s1600/subscribe.png) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}

STEP 2

Copy & pest below code at just above to the </HEAD>

<a href="http://gigabyteservice.com" rel="dofollow" target="_blank" title="make free beautiful website in India"></a>
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});

</script>

STEP 3

Copy & pest below code at just below to the </body>

<div id="pageflip">
<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks">
<a href="http://feeds.feedburner.com/GigabyteserviceBloggerGadgets"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj734tdOf0T0UUa1UhWCP25A5LF7eOdtrS20XZT9exnxMiLCcW5ixFgYNjGIlTQ3Fw0t4qdaxOf0GEPamJkQzfIuK_PHdcD8N5xLkh_73zQq-Ef9rWYUaZ3ZbIYdTgVjoxcrYY-Ervvigp_/s1600/page_flip.png" style="width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden; "></img></a>
<div class="msg_block" style="width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; ">
<a href=”http://gigabyteservice.com/web-designin” rel="dofollow"target=”_blank” title=”Make free website in india”> </a></div>
</div>

STEP 4

Change this RSS feed with your's,
What to do if you don't your RSS feed?
1)

Gigabyteservice gadgets

5 new css3 and jquery menu bar for bloggger

5 new menu bar for blogger

Ribbon Menu Bar

Rotating box menu bar

Sliding menu bar

Vertical menu bar

Simple menu bar

5 new custom Facebook like box for blogger

Animate Facebook like box

Custom CSS for like box

Sliding Facebook like box

Javascript Floating Facebook Like-box Widget

jQuery Pop-up Facebook Like Box With Background Image

Nice vertical menu bar with jquery

Nice Vertical Menu Bar With jQuery

How To Add This Nice Menu To Your Blog?

How to make new sliding social tabs for blogger in 2013

TUTORIAL

Stylish & animated Twitter button for your blogger

How to add live chat widget for blogger

What is Live chat Widget for blogger

Why I need that?

How to add live chat widget for blogger?

Tutorial with more video for more understanding.

Add Facebook Like Button in every post in blogger

TUTORIAL

How to make Twitter Animation button for blogger

Tutorial

HOW TO ADD STAR RATING IN BLOGGER POSTS

HOW TO CONVERT YOUR BLOG INTO VOICE FOR BLOGGER

How to convert blogspot.in to blogspot.com domain name

How to block Ads blocker users in your Blogger blog

Image Gallery for blogger

Youtube downloader for blogger

Sexy new drop down menu bar for blogger in 2013

HOW TO MAKE STYLISH DROP DOWN MENU BAR FOR BLOGGER 2013

New Mouseover subscription

Mouseover subscribers

I have one gift for you that here you can make a free website