The Largest Hub of Blogging Info | OnlineInfoPoint: WIDGETS

Showing posts with label WIDGETS. Show all posts

How to add CSS Stylish Navigation Menu On Blogger Blog

Hello Friend!Our previous article is on How to add the author bio widget in blogger blog So today our article is on how to add this stylish Navigation bar in your blogger blog.If the primary navigation on your site or blog doesn’t provide enough space for putting all links, then this secondary CSS menu will allow you to put a lot of links in it.This navigation bar is made up of HTML and CSS no JavaScript is use in it.Many Professional blogger use Navigation menu for blogger.because adding navigation menu to your blogger blog make the visitors to quickly get the required content what they want.So many people need this.Thatswhy i designed this stylish navigation menu for your blog.Follow some simple steps inorder to at this navigation menu in your blog.

HOW TO ADD THIS NAVIGATION MENU ON YOUR BLOGGER BLOG:

Login to Blogger > Dashborad

Click on Drop Down Menu and select Template

Backup your Template before making any changes to your blog

Press CTRL+F and search the code shown below.

]]></b:skin>
. Paste below code just above it.

<style>
#navbarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
width:700px;
position: relative;
display: block;
height: 50px;
font-size: 12px;
font-weight: bold;
background:black;
border:3px solid #2aa4cf;
}
#navbarmenu li{
float:left;
padding:12px
margin:0px;
}
#navbarmenu a{
color:#2aa4cf;
font-size:20px ;
padding:20px;
line-height:50px;
text-decoration:none;
}
#li1 a:hover{
padding:12px;
color:white;
background-color:#FDB305;
clear:both;
}
#li2 a:hover{
color:white;
background-color:#AF05FD;
clear:both;
padding:12px;
}
#li3 a:hover{
color:white;
background-color:#FD05D0;
clear:both;
padding:12px;
}
#li4 a:hover{
color:white;
background-color:#058DFD;
clear:both;
padding:12px;
}
#li5 a:hover{
color:white;
background-color:#FD3B05;
clear:both;
padding:12px;
}
</style>

.LAYOUT –> ADD A GADGET –> HTML/JAVASCRIPT

.Copy the below code for and paste it there.

<body>

<div id="navbarmenu">

<ul>

<li id="li1"><a href='#'><span>HOME</span></a></li>

<li id="li2"><a href='#'><span>SERVICES</span></a></li>

<li id="li3"><a href='#'><span>ABOUT US</span></a></li>

<li id="li4"><a href='#'><span>CONTACT US</span></a></li>

<li id="li5"><a href='#'><span>HIRE US</span></a></li>

</ul></div>

.Now Save Your Template

IF you have any Problem regarding this Menu then ask me in Comment section.

EnjoyYou are Done!!

How to add Author Bio Widget Under Every Post of Blogger

Unknown how to, WIDGETS

Hello friend!Our previous article is on How to add notification bar on blogger So today our article is on How to add author bio widget under every post of your blogger blog.This widget is made up of HTML and Css.Many Bloggers wants the new and fresh widgets of blogger and most of the saying we want new author bio widget So i designed this widget This widget is for Blogger users only as WordPress has various plugins to deal with author boxes.I am happy to develop this author bio profile widget for bloggers. You have seen this widget in many WordPress blogs but implementing on blogger is very difficult. I was busy in this widget for last 20 hours to give a cool and Simple stylish look. Now, I have developed this author bio widget for your blogger blog. As my coding skills, i has tried to minimized the style sheet code.

HOW TO ADD THIS AUTHOR WIDGET TO BLOG:-

How to add Notification Bar To your Blogger Blog

Unknown TUTORIALS, WIDGETS

Hello Friend How are you hope you will fine So Today our post is on How to

add Notification bar to blogger Blog.Basically designing a blogger blog is much easier now days Every blogger design her blog with awsome coding. So Today we are releasing a fancy style blue color notification bar for your blogger blog.Notification bar is not for blogger by default but as I told you that

developers has created many things for blogger and this Notification bar is created by me.this bar shows manually specified links, so you can add or remove links to it manually according to your needs.

Notification bar is the best way to highlight the latest topics or updates of any blog.

How to add this awsome notification bar to blogger:

If you add this notification bar to your blogger blog then follow some simple and easy steps in order to add this stylish notification bar to your blog.

1.Go To Blogger >> Template >>Edit HTML

2.Now find for ]]></b:skin>:

3.Now Paste the Below code just above the ]]></b:skin>:

#notification bar{

background:black;

width:auto;

height:50px;

z-index: 999999;

padding:-12px ;

margin: -41px 0 0;

display:none;

}

#OIFbar{

background: none repeat scroll 0 0 #000000;

background:#05ADFA;

width:auto;

height:50px;

padding:10px auto;

text-align:center;

font-family: arial,sans-serif;

color:black;

position: relative;

text-align: center;

text-decoration: none;

margin:-10px;

padding:2px -10px ;

border-bottom:3px dotted black;

}

#OIFbar a{

color:black;

font-size:10px;

font-family: arial,sans-serif;

}

#OIFbar hover{

text-decoration: underline;

}

4.Now again go for Template

5.Now search <body>

6.After that paste the below code just after <body> tag

<div id="notification bar">

<div id="OIFbar">

"ONLINE INFO POINT NOTIFICATION BAR"

</div></div>

7.Now Your'e Done Save Your Template:)

IF you have any problem while doing this task then feel free and kindly post your problem in comment section.I hope You find this tutorial helpfull
If you want to know more OIF Awsome widgets then Subscribe us and Follow us And finally dont forget to share this post with your firends

Thankyou
Enjoy!!!

AUTO SCROLLING RECENT POSTS WIDGET TO BLOGGER

Unknown BLOGGING, WIDGETS

AUTO SCROLLING RECENT POSTS WIDGET TO BLOGGER

So,In this tutorial i will teach you how to add this auto scrolling recent post

widget in blogger.Scrolling recent posts widget is a great widget to show the recent posts from your blog with scroll effect.As we all know that designing blogger blogs is become easier now and every blogger designe her blog with awsome coding.You also design your blog if you have some knowledge about coding.So in this tutorial I have a great looking Scrolling effect recent posts widget for you which you can easily add to your blogger blogs. It is an awesome widget.and you can easily customize it according to your wish.

ADDING AND CUSTOMIZATION

Go to blogger >> Layout
Add a Gadget >> Add an HTML/JavaScript Widget
Now just copy all below code and paste it inside HTML/JavaScript Widget

</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjkInsyQChWOuBhykL94QXvDZ5_c1106NeepzlEXftlUVnu85sMwc-p5LvYA9TmNS8hoGBT2hYFCPqmkaGlZ8qkgHP0qXQG-ORKhoayj1KEBXJPgqbl1OLAChwnkAkxMUOmGYA7JOiQI/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjkInsyQChWOuBhykL94QXvDZ5_c1106NeepzlEXftlUVnu85sMwc-p5LvYA9TmNS8hoGBT2hYFCPqmkaGlZ8qkgHP0qXQG-ORKhoayj1KEBXJPgqbl1OLAChwnkAkxMUOmGYA7JOiQI/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjkInsyQChWOuBhykL94QXvDZ5_c1106NeepzlEXftlUVnu85sMwc-p5LvYA9TmNS8hoGBT2hYFCPqmkaGlZ8qkgHP0qXQG-ORKhoayj1KEBXJPgqbl1OLAChwnkAkxMUOmGYA7JOiQI/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjkInsyQChWOuBhykL94QXvDZ5_c1106NeepzlEXftlUVnu85sMwc-p5LvYA9TmNS8hoGBT2hYFCPqmkaGlZ8qkgHP0qXQG-ORKhoayj1KEBXJPgqbl1OLAChwnkAkxMUOmGYA7JOiQI/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQjkInsyQChWOuBhykL94QXvDZ5_c1106NeepzlEXftlUVnu85sMwc-p5LvYA9TmNS8hoGBT2hYFCPqmkaGlZ8qkgHP0qXQG-ORKhoayj1KEBXJPgqbl1OLAChwnkAkxMUOmGYA7JOiQI/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.onlineinfopoint.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>

Replace http://www.onlineinfopoint.com/ with "your blog url"

Thats all save your widget

If you face any problem while adding this widget kindly leave your comment below so I will help you

Add stylish subscription widget to your blog

Unknown BLOGGING, WIDGETS

So in this tutorial i will teach you how to add stylish subscription widget to your blog.As you all know that blog without a subscription box make no sense.I recommend you to keep your blog in a good condition.If you have a subscription box then your blog gain more traffic.you can get any subscription widgets very easily just paste their coding in to your blog.today in this tutorial i have a great looking awesome subscription widget for you which you can add your blogger blog very easily.Adding this stylish subscription widget to your blog is very simple.you may need to follow just simple steps.

HOW TO add this widget to your blog

Go to blogger >> Layout
Add a Gadget >> Add an HTML/JavaScript Widget
Now just copy all below code and paste it inside HTML/JavaScript Widget

#email-news-subscribe .email-box{
        padding: 5px 5px;
        font-family: "Arial","Helvetica",sans-serif;
       height:38px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;} 
    #email-news-subscribe .email-box input.email:focus{color:#333}

#email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#666 0,#333 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
  
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:white;
    
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}

#email-news-subscribe .email-box input.subscribe:hover{
  
        background-image:-moz-linear-gradient(top,#333,#666);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
     
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:#FFFFFF;
     }

#other-social-bar {
        padding: 0px;
        overflow: hidden;
           height:37px;
         margin-top:-8px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}

#other-social-bar .other-follow {
        float: left;
        overflow: hidden;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow li {

display:inline;
        border:0;
      }

#other-social-bar .other-follow li a {
        font-size: 12px;
        color:#666;
        font-weight: bold; font-family:arial;
        display:inline;
        }
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGXgH76si1wV9SpAyi0L0pt2sNzAXAugXfAtH3dlq88UJfbCHpyl1yOXKWBfcpfie6Fiscp0PtsIDt5dgrActGcmhmDSz-YWmkfOmKdR-9CpQMCXfF0ilwhi7AHFjBFUUVjNabCGp9kro/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}

#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXsfUOEKKIuZjmIipdBXlkmjlwDL6ryCvcASAr8NyVnyD21d-iEoS0tL8-kTCyaqeOl7aZ0eZXaDTieJAWlFOKPkI_Cl5hClU7RZYBg5dGJ-iblwC_EpQACslg-8kxOiJlsumB1V9bsGc/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHfe0hZcUrs8pONkDMnAJ1RTGmAbKl8foX7u9MNfmGjQ3jB3dUkMs3p4uMQptJfHUGIErDKQsIKx5BAlkSs_N3wAvJ7AninaSJY_MyWNdB01D-mfD5p9w7_Jb3BdRiAyvFp-Jxq0rZwqA/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

.emailicon {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3rKl7cHYjW6TBFvRZIXIqZ7qdxYSdkOg7GpaK2nIQUf1B0Ryel_AcZ_QJc9NZuF8BetzZM2xC1l8Lfaq-wbcWV9WTHXw-JY-FcEvzHsN2zQsmrfd5J3KSnomlHHuyOWpSljprzzdV59Su/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
     padding: 0px 20px 0px 95px;
    min-height:100px;
    margin: 0px;
    width: 183px;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
    color: rgb(51, 51, 51);
}

.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family:  impact;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
    </style>

<div class="emailicon">
<p>
Subscribe to our Free Email Updates! </p>
</div>
<div id="email-news-subscribe">
<div class="email-box">
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" />

<input type="hidden" value="apnichoice" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form>
</div>
</div>
<div id="other-social-bar">
<ul class="other-follow">
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/apnichoicecom" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="http://twitter.com/zahoor1042"  target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/116122930547110203859 target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>

CUSTOMIZATION

Replace feedburner id with "your feedburner id"
Replace twitter username with "your twitter username"
Replace google plus id with "your google id"

Thats all save your widget

If you face any problem while adding this widget kindly leave your comment below so I will help you

CHANGE BLOGGER LABEL LINKS WITH BEAUTIFUL BUTTONS USING CSS3

Unknown BLOGGING, WIDGETS

In this tutorial i am going to teach you how to change blogger label links to beautiful style using css3 code.As we all know that designing blogger blogs is become easier now and every blogger designe her blog with awsome coding.You also design your blog if you have some knowledge about coding.

follow some simple steps to change the style of label.

how to change blogger labels links

First go to blogger account
Go to template/Edit HTML
Find this code ]]></b:skin> By using CTRL+ key
Now paste the below code just above the ]]></b:skin>

Now click save template.
Now add label widget.

adding label widget to blogger

Go to layout /ADD A GADGET/and ADD LABEL WIDGET.
Now select the cloud widget where it say DISPLAY
Now save your template and you're done.

Dont forget to subscribe us and sharing this post.

thanks

How to Add a Contact Form Widget to Blogger

Unknown WIDGETS

In 2013 Blogger Introduced the Beautiful Contact us Widget To Their User.So,in This Tutorials we will learn how to add this beautiful widget to our blogger blog its very easy just follow few simple steps.

How to Add a Contact Form Widget to Blogger:

1.GO TO BLOGGER/LAYOUT/ADD A GADGET/MORE/CONTACT FORM WIDGET

2.Now rename the title of the widget and once everything is done press “Save” button

Check out this screen shot for more info

3.Save your setting and your done congratulation.

If you have any problem then ask me in comment box

If you like then share this article and leave comment

Thanks

How To Add Facebook Send Button To Blogger

Unknown WIDGETS

In 2010 Facebook Introduced the facebook like button to help people to share intersting post with all their friend,So in This Tutorials we will learn how to add facebook send button to our blogger blog its very easy just follow few simple steps

How To Add Facebook Send Button To Blogger Blogs?

1.GO TO BLOGGER/TEMPLATE/EDIT HTML

2.SEARCH FOR <data:post.body>

3.THEN ADD THE BELOW CODE JUST ABOVE <data:post.body> AND FACEBOOK SEND BUTTON WILL APPEAR BELOW YOUR POST TITLE.

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send href="" font="verdana"></fb:send>

HOW TO ADD THIS NAVIGATION MENU ON YOUR BLOGGER BLOG:

Login to Blogger > Dashborad Click on Drop Down Menu and select Template Backup your Template before making any changes to your blog Press CTRL+F and search the code shown below. ]]></b:skin> . Paste below code just above it.

HOW TO ADD THIS AUTHOR WIDGET TO BLOG:-

How to add this awsome notification bar to blogger:

AUTO SCROLLING RECENT POSTS WIDGET TO BLOGGER

ADDING AND CUSTOMIZATION

HOW TO add this widget to your blog

CUSTOMIZATION

how to change blogger labels links

adding label widget to blogger

How To Add Facebook Send Button To Blogger Blogs?

Login to Blogger > Dashborad

Click on Drop Down Menu and select Template

Backup your Template before making any changes to your blog

Press CTRL+F and search the code shown below.

]]></b:skin>
. Paste below code just above it.