PC LEAKES

4 SIMPLE STEPS TO CUSTOMIZE YOUR FAVICON

noreply@blogger.com (ANUJ GOYAL) — Tue, 02 Oct 2012 04:30:00 +0000

You all know what Favicon is, it is the tiny image that is displayed into your browser's window or tab. You all wanted to change your Favicon according to you but you dont know how to do it, dont worry you can do it very easily in 4 simple steps.

HOW TO CUSTOMIZE YOUR FAVICON

1). Open your Blog and go to Dashboard.

2). Select Design and Page elements.

3). Choose Edit on the new Favicon setting above the Navbar element, a new window will open

4). Select choose file option and add a image from your disk to replace the default favicon image.

This supports only .ico files, but you can change JPEG,PNG to .ico file using some software. You can online convert it to .ico file by using this link.

http://www.icoconverter.com/

please dont forget to save the settings it is the most important part.

HOW TO SNOOZE YOUR GMAIL MESSAGES

noreply@blogger.com (ANUJ GOYAL) — Mon, 01 Oct 2012 02:06:00 +0000

There are some messages which we could had received later. In that situation you move the messages to another folder and forgot it, this must be a problem for you to remember all messages in that folder and if you want a particular message to open later.

Our team has introduced this problem and elucidated this this problem, as like your mobile phone alarm you can also snooze your Gmail messages, you can see your email's in your Gmail account inbox 1-7 days later. after snoozing label with the appropriate number of days they will reappear in the inbox according to the specified number of days. These are the steps you must follow to snooze your email's, we will make use of GOOGLE APPS SCRIPT

1). CREATING SCRIPT

(i) Flip over to google docs and select create new > spreadsheet.
Now choose tools > script editor which comprises "functionmyfunction(){}" that can be deleted.

(ii) Thereafter deleting the code, copy and paste the given code.

var MARK_UNREAD = false;
var ADD_UNSNOOZED_LABEL = false;
function getLabelName(i) {
return "Snooze/Snooze " + i + " days";
}
function setup() {
// Create the labels we'll need for snoozing
GmailApp.createLabel("Snooze");
for (var i = 1; i <= 7; ++i) {
GmailApp.createLabel(getLabelName(i));
}
if (ADD_UNSNOOZED_LABEL) {
GmailApp.createLabel("Unsnoozed");
}
}
function moveSnoozes() {
var oldLabel, newLabel, page;
for (var i = 1; i <= 7; ++i) { newLabel = oldLabel; oldLabel = GmailApp.getUserLabelByName(getLabelName(i)); page = null; while(!page || page.length == 100) { page = oldLabel.getThreads(0, 100); if (page.length > 0) {
if (newLabel) {
// Move the threads into "today's" label
newLabel.addToThreads(page);
} else {
// Unless it's time to unsnooze it
GmailApp.moveThreadsToInbox(page);
if (MARK_UNREAD) {
GmailApp.markThreadsUnread(page);
}
if (ADD_UNSNOOZED_LABEL) {
GmailApp.getUserLabelByName("Unsnoozed")
.addToThreads(page);
}
}
// Move the threads out of "yesterday's" label
oldLabel.removeFromThreads(page);
}
}
}
}

(iii) Now tick on file and save it with the desired name.

2). CREATING LABELS

(i) choose setup from select a function.

(ii) Selest the run icon fronm the left.

(iii) Till the function will run you will be asked for the permission to Gmail to run the script.

(iv) Later you will get a message which will confir that "you can run the script now".

(v) Now you must go to your Gmail account and reload the page. if you are able to watch nested labels in your Gmail like shown below you are done with it.

MAKE THE SCRIPT RUN EVERYDAY

Now you have prepared the labels for snoozing your messages in Gmail and what if you want to make the script run daily, for this

(i) Choose triggers > current project triggers. Now tick on "No trigger setup".

(ii) There will be a run drop-down select move-snoozes, Time-driven from from events drop-down and Day timer and Midnight to 1 am should be set to next two drop-downs.

(iii) Last and the most important step is to save it.

USE SNOOZE LABELS IN GMAIL

we have done almost everything, one small thing remaining to snooze your Gmail messages, open it and choose Move to > snooze/snooze days, from 1-7 days. thereafter you have done with this, Email will be shown in your Gmail inbox after the days you have selected.

WHY TO USE OLD FACEBOOK PROFILE ENABLE TIMELINE

noreply@blogger.com (ANUJ GOYAL) — Sat, 05 Nov 2011 00:05:00 +0000

As we all know Facebook, and its rapid growth in our environment as it had become very much popular at this time and you all must be having account on Facebook. WHY TO USE OLD FACEBOOK - Facebook new and awesome profile layout had just arrived and is called 'TIMELINE'. This new feature shows a hierarchy of all your past experiences in a proper or data-wise manner like post updates, photo's, video's and comments. As it gives you a option to see what you did in last year or month or week. All the status upload you did can be easily viewed by rolling back to the older days. Till now Facebook is not providing this feature for its user's as it is under testing procedure and for limited user's but we will tell you the steps TO HAVE TIMELINE on your Facebook profile.

HOW TO ENABLE NEW FACEBOOK TIMELINE FEATURE

1). You need to go to Facebook Developer page. To go to Facebook Developer page CLICK HERE.

2). Allow the application to access your basic information.

3). Select Create New App from top-right corner of the page.

4). Give your app a Name and a Namespace, as you can keep any name you want for example I kept 'Timeline' as the app name and 'Anujgoyal' as the name-space.

5). Now select Open Graph from the labels at left side of the page.

6). Now Open Graph Getting Started page will open, Enter some random words you want to add and click on GET STARTED.

7). A new page will open, You just need to do is scroll down to the end of the page and select SAVE CHANGES AND NEXT, Follow this step for 3 times.

8). Finally, You need to go to your HOME page, A pop-up window will appear on the top of the page from there select GET IT NOW.

Enjoy this latest feature of Facebook and check your profile, you will be amazed to see your profile. If you like this post please share it among your friends.

ADD jQUERY BLOGGER SLIDER FOR IMAGES AND VIDEOS

noreply@blogger.com (ANUJ GOYAL) — Fri, 04 Nov 2011 23:15:00 +0000

The demand of post slider in today's world is increasing day by day, as every blogger wants it. This can be used to link the content in to your blog. The main feature of this post slider is you can add any videos (including you tube video) as a past of the slideshow, these are not images or thumbnails these are actual video's.

Our team has introduced this post slider, the slider is called anything slider. You can try another post slider. JQUERY FEATURED POST SLIDER

ADD ANYTHING SLIDER TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Paste the following code just above/before the code you have searched.

/*start slider css http://www.pcleaks.blogspot.com for info*/

/******* SET DEFAULT DIMENSIONS HERE ********/
div.anythingSlider {

width: 700px;

height: 390px;

margin: 0 auto;
}

/****** SET COLORS HERE *******/
/* Default State */
div.anythingSlider .thumbNav a.cur, div.anythingSlider .thumbNav a {
background: #777;
}
div.anythingSlider .anythingWindow {
border-top: 3px solid #777;
border-bottom: 3px solid #777;
}
/* Active State */
div.anythingSlider.activeSlider .thumbNav a.cur, div.anythingSlider.activeSlider .thumbNav a {
background-color: #7C9127;
}
div.anythingSlider.activeSlider .anythingWindow {
border-color: #7C9127;
}

/**** DO NOT CHANGE BELOW THIS LINE ****/
/* anythingSlider viewport window */
div.anythingSlider .anythingWindow {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
/* wrapper: 45px right & left padding for the arrows, 28px @ bottom for naviagation */
div.anythingSlider {
position: relative;
padding: 0 45px 28px 45px;
}
/* anythingSlider base UL */
ul.anythingBase {
background: transparent;
list-style: none;
position: absolute;
top: 0; left: 0;
margin: 0;
}
ul.anythingBase li.panel {
background: transparent;
display: block;
float: left;
padding: 0;
margin: 0;
}

/* Navigation Arrows */
div.anythingSlider .arrow {
top: 50%;
position: absolute;
display: block;
}
div.anythingSlider .arrow a {
display: block;
height: 120px;
margin-top: -60px;
width: 45px;
text-align: center;
outline: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDRGwfhBKH0Do5bLXdIBDEOsZ1dPPa3wbnkNzUhTaPjOjs_Lm_LIuFR3VmrxkWHxhAHpPdpHcvsJrb00495rcX_-_JYj-_vgW-Xra9uErKTnsCWKogR7fthDZBKqDRzCCe3HekNE0YHw/s1600/arrows-default.png) no-repeat;
text-indent: -9999px;
}
div.anythingSlider .forward { right: 0; }
div.anythingSlider .back { left: 0; }
div.anythingSlider .forward a { background-position: 0 -40px; }
div.anythingSlider .back a { background-position: -88px -40px; }
div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: 0 -240px; }
div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: -88px -240px; }

/* Navigation Links */
div.anythingSlider .thumbNav { margin: 0; }
div.anythingSlider .thumbNav li { display: inline; }
div.anythingSlider .thumbNav a {
color: black;
font: 11px/18px Georgia, Serif;
display: inline-block;
text-decoration: none;
padding: 2px 8px;
height: 18px;
margin: 0 5px 0 0;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONfglH7WVnwHB2iCeiqgpp_1Ha0RxoH-MFjxK_jiA_fmtqcYDqiSMkDRsSwpuqFxMikFTL1dVaYlrhR4AS0snW-2WfwPoNmKfGLOa_6CSe_US-EKXzN9yMOYqS0Iapj1ZIvPnvXKpn3k/s1600/cellshade.png);
background-repeat: repeat-x;
text-align: center;
outline: 0;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
div.anythingSlider .thumbNav a:hover { background-image: none; }

/* slider autoplay right-to-left, reverse order of nav links to look better */
div.anythingSlider.rtl .thumbNav a { float: right; } /* reverse order of nav links */
div.anythingSlider.rtl .thumbNav { float: left; } /* move nav link group to left */
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */

/* Autoplay Start/Stop button */
div.anythingSlider .start-stop {
z-index: 10;
background: green url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONfglH7WVnwHB2iCeiqgpp_1Ha0RxoH-MFjxK_jiA_fmtqcYDqiSMkDRsSwpuqFxMikFTL1dVaYlrhR4AS0snW-2WfwPoNmKfGLOa_6CSe_US-EKXzN9yMOYqS0Iapj1ZIvPnvXKpn3k/s1600/cellshade.png) repeat-x center top;
color: white;
padding: 2px 5px;
width: 40px;
text-align: center;
text-decoration: none;
float: right;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
div.anythingSlider .start-stop.playing { background-color: red; }
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; color: #ff0 }

/*end slider css http://www.pcleaks.blogspot.com.com for info*/

Change the width and height accordingly.

5). Find the following piece of code in your blog HTML code.

</head>

6). Paste the following code just above/before the code you have searched


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://spiceupyourblogextras.googlecode.com/files/jquery.easing.1.2.js' type='text/javascript'/>
<script charset='utf-8' src='http://spiceupyourblogextras.googlecode.com/files/jquery.anythingslider.js' type='text/javascript'/>
<script type='text/javascript'>

var slider2 = ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'];
function formatText(index, panel) {
return slider2[index - 1];
}

$(function () {

$('#slider1').anythingSlider({
width : 800, // Override the default CSS width
easing: 'easeInOutExpo'
});

$('#slider2').anythingSlider({
width : 600, // if resizeContent is false, this is the default width if panel size is not defined
height : 350, // if resizeContent is false, this is the default height if panel size is not defined
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
autoPlay : false, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
navigationFormatter : formatText // Format navigation labels with text
})

$("#slide-jump").click(function(){
$('#slider2').anythingSlider(4);
return false;
});

});
</script>


7). Save your template and go to page elements.

8). Select add a gadget HTML/Javascript and paste the given code inside it.

<ul id="slider1">
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
<li>Place Image Or Video Code Here</li>
</ul>

Make changes accordingly, add video or image code.
If you got a good experience than leave comments and Email Me for any assistance.

ADD 30 AWESOME NAVIGATION MENU TO BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Fri, 21 Oct 2011 06:52:00 +0000

As per the choice of user our team had introduced a new look, easy to install navigation menu for blogger. There are many navigation bars with different functions and has much code, as some bloggers find it difficult to install. Our team had introduced 30 navigation menus with awesome looks with-out Css code and are easy to install. These all are like ready-made gadgets, you only need to copy and paste the code.

ADD 30 NEW NAVIGATION MENU BARS TO YOUR BLOG

1). Go to Dashboard > Design and select Page Elements.

2). Add a full width cross coloumn gadget HTML/Javascript and paste the given code inside it. HOW TO ADD A FULL WIDTH CROSS COLOUMN GADGET

3). Copy and Paste the following code inside it.

NAVIGATION MENU 1

CODE :- <style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 2

CODE :- <style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 3

NAVIGATION MENU 4

CODE :- <style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 5

CODE :- <style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRK3M__znud1POto6oyzOzSjyv3Wuyy-oqCdubtRCeN6M5qAY6CjI2DZ6TzoWSdIe2Sv2GX5p6W2O1bijIEvJH5a6-3lHDCAkvdCI7pZLEvdSDJcLPg7OTLX2_unPjzgGyb0mFqFPlA9Y/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 6

CODE :- <style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ux8KX7jhmq8JHeRs9kIrMPQuP3ES-VI6WNy9T3wvlA7KLWJgn9Wsq31HABPlPGouUFHoGXjtBdyALjO0e4TgbOofXYkI4FD3PTUCpKeIceBfjw0qktYhyoDciiPAaJeUfDRGG70SXGA/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLL_3UyCOF-BDlTmmQzV7zsG0ImCmR1aXXyqj7N-leGyXoQeOe7GtNSdDWM-5pUEfPeHevFCYyFWfaqjF7Tdtfi7DIKTjqkTmMMK_9tpfVIuJ2pNVMLOE09aUVs82YxsJeqpyMjoBM-nE/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 7

CODE :- <style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtgKdXDnais3Uuml1B7696l7-B5ulszGOvxp1yVkdtapupELnqcS2-LY3TceV1sksOgc4Kv3G1vMGiB-OlEeksP7I-zw4nrjNz3hwe6_i8pxhzcXRakaBPCMNou1mwzu1sfwW9S5Q9Vwk/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin0wnjcZSA7nmnCYilUhffZQqlCj1WrT4zLpZ3BX2mSDl8MZj3mYqQcY54CAf2ArZKGxfIzk64n-YPtlVBecwc9H4YiWnvw-O-Lii7-mgX8Hg5rF0Xm7ASCJCGWOaHnnLuDezciASvQnw/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 8

CODE :- <style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBwYQoYBINnhRX2Qwu6WwtifLrF7v1GXny5YyQKI5GVCKSbw8nZCABm25rwdK41o_dv2pg2O7F362decwfU0hQNExH9fGp4s_2XyKigVZLI5EC3GXMfF_a_U3x-v5hvuCZCBISIXSgrws/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbtcI84dbvjDUgx1LkAMB_lWaYv005AQbsd0yr2hw6WmQKGgpc76piVOF_y3RY0MIKXaG9qonAt64Ww0IZQ4kzd5BVFs9ty1TFTnm4ObLZNIwhaRJKM4NB2o8w19hOc5PMwrSoASb3yEQ/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 9

CODE :- <style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 10

CODE :- <style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicC95y8VloQA8koQJPCwPB9dL1laKyK1GFMKgS1YsdWLfIfL4E3YYTaRNOOtW8jXnb0FVkV5dd-VOCjsgjViSLGsCFoHYAJQzFcCxqgQQQgkrUUcl8SvW14cDWS_N5zipn8PLcfEMl92I/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeW_dpJri62yL0nWS7zwHSLazplgfcWVE1voUI1Tzv-Kfijm_b5LPX9oYyg8l_l7-CdPrpmshLmVixwI_uZgKMA7Zj4vK47qri0tQFOQA0LND5pIi9uITvqGNxl3H-h9HpkeO8r1cEDNE/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 11

CODE :- <style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5pXfO4qlBuJz97p18AgqpkWERoo3UeisR2cvI4QdIBy5VxnybFVXPUxWaz4FfVlMoPgfNRIw3YAwyFcMY0KZ7CTMRg4H7clO3UQDBmeVkjwUi9gc21SsFYX0gwFAsRdUXAI1oWDdo54/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwEdntdXshWW36fd43CWuQjWEg26GULTaF7ka3Z3skdYifEyhE5Vcquzom73-8YO3ONIpAZaVguXnIUPtTbTuuyn5FYf7dtx7_gorqKo_TW-2OLhr4JohJn6B6MkLxCcSUpvEnqxqrDEc/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 12

CODE :- <style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlmtxfPJlYD16gx5kM8TaRYXDMAFabpWP-SM3VvY2MQn3B5xA2dNCle5_aa_DK5Z01EuEtMkYySUdqX0aajUUzGNXhTFpcxVfMd0vDGYPoxpnBKtnnF8UKZEm7MYbopE5QahIg4Sf4uc/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Q242oeEmo-kjjo3bgJA8GCdV3D0Hq3GnMJP92N_IKWlb6hADsJarFqH7ibbnJ91iHoE6S3ly23NLIi9wG6aqkvMheUnkDVT4I34Diyn1S8lvig7H9PPRcUwRKRsiCRDW1kiN_pix3iQ/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 13

CODE :- <style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuNqwjaJbliOFLIRMVhi9EQkFWw0dmkRZGq6B1EUjJy-rdda6oThQeVDG4OHC8EhM_VOeeH4D3qZ09_g1YvdKPC_2LMeJJwLQZeqDVogzy19ofkMJdXKWBleF932Zz-8BgmtSGff5Fs5o/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9pSNi8TbNkAesM2Kh5mfR2nCznTeXKOoKlaTKMQsOy4D5pJ8-p4gLdHp2Xk8w0C8JFogPIiEZVagZf6sMIEZMuaKAAbIRkbAYB5Idt9NFlN44V5YhWGaBo-ZLd0tWspEpXLRTONUSNOg/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 14

CODE :- <style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgrpKsSsSOlEXPFZkBWc61uXKu2NyKe8aSZy4PHFNkg8RiaT477X2DQ_Dg_4c-c3KTpLeiYypgn-yZnNuLDVZH_UO9n_VpBa0I-Rxk_5QIXHg52H50_dZe2t9_xbKC6PJY3eovJJEl7e8/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLG_TbQENzvs9IFb352NNptnwCFFknjqo1eARJTO9mjHAPH9XdEfVnPGxLBVit39XVanB8isDjhTsA_BxoYPzvyzWzuVW_f4RJwukxxHZ2Fg7r6X4NENAZ9KOCNaP_LoWY2GLL5wf0oxw/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style> <div id="tabs10"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 15

CODE :- <style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhphKUhVQ8CTZpPLK_50iad06UqqfQIGY0vmEZqcOqa-ioAiukM18Dx0lNHQgVj3efG3hfp9EoRrLCk4TAfk6TWpip0XntE5JsJHge-WXOaPVc0NJ_bujYbl8UK0MjqA5ns3t7Ct8Oa9JA/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4cxdTqzWON8kJ0i2ZcT24A94-V45LuXv4TS7C2WnHK953VaSpb5xib-LydRXLDvJ2m5IZ1QAPT9FJ-dHni9ia644yaDWtPCbk2Iisss2pol9SEmBI_BLlbU0pOLpo1D7N3Btgejc8uzg/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 16

CODE :- <style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYPtBEPF5T4Y9AP2iRuzQFl-QRSnhAvgWhwG4zm_nFwtW3XL1B8bZJ4KSVkh5Qu5QDMCJcO-SaGEch6x5f4kUsOa0Z186K3ELV-N-g-2fPC9q52l0TCWL1qMCu7vdOeYw3lC_qWg8zAx8/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlqZOYUO81sLpAEHdRvDp1e5heirj4ndH_a33K32G0DuijoMGyOs5UOfwKQiigAu49SnZdrvcnRZCOuEawyeLkvuVYiCqqJ9UG78Z7OuC-LIVBHpeqQVYnw_4kRaN5SNzL_yvbixSR53s/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 17

CODE :- <style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhofenn0VPCnBOn2VlBOIVGvXRDVYCbjbPgQj_dpJCQrPTO6MtZObDMUPRz7JVNo1WXOCVY3-eUq6sIcgvpfVll2fVoMjoTBJozov1fWU-PDpn_hOjAa1IvsRMypAELSDxugrXZ1wqCRK8/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigQrjycZs3kPi0gso0swg8AYIS92mQIkps8z4Ay6MCbY_fQEGLAGO3lBXrXZKTGO8l7Fy4u8Od2hwIMbLDjc7Gr8AH9oUZtHnsCYs3WhAJfVBpEX4AahnAvobi7BGakeP__OYpblAXbEw/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 18

CODE :- <style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1cingLubITa1QdWUEWPy9Ew1LRdUhlQvGybsqVKYzgJWU3To_EwgjxsZ6P87FyK2hkazwgssOSqvN7kuoblOW6WNj6HMUhjtZQYcOZidMyC74On5jDP0vOlBB6W07DcduFgVoun1vpPA/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhksZiSLJpojD0Ii2ENu93VrvXxDSc3jPv0CWoJPgA7yQdMKI0JTh5W1Pcmu_1g5dYlraZIOUHclY80Jus-uxuJ2LD5lmMeh3r4-Ekppyf3EajEMTlg4Gpp2uHp91Ee6c5BDR7yeqWlWhQ/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 19

CODE :- <style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi119X0_UW3bee5VAbqCMxVf7yRciw_h-lH3e0FyjqzGQFS6-doF46jdbFvOvaUs_eICLPo36l4q9uzMFytDB_wmkIJ1XF5yU7N4pOJfkr-YBpSq7-w_2GTMpZjsHrL_utb1q8D296q3Zo/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivCN2A3hlLSqgnX7lDTOKy_5wLjOMVg5DfqUmOmf8w-jxIMKDZMNIj5v8RrGnwnnSxpBaLSjBvM246q_1ogq4DDnep_tVyn0vWhGTarslKef2hLRs3Q-gI_DQ6VgmwZZ6O7PK5BNQp5AI/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 20

CODE :- <style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-1hNrb4_J023bkHRoKARpTtpP7ZpHwJOZ5KAUoiE3I4skxjcHX3Uor_-va0xEZ4plKICyZP8PhMZaGNgAtl5nmzjJVgdntSAdKRRPC6DAxskPYI_IbOgxeZszxq7mFAKx-ZvEwtl1xhE/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimT9Ft6iRLtFjW3Nu5VPShwULbq49o5TvWjCB3LQ3xoEbSlI4OdL9O0SWAN16RwzdeF-BbzH27NRB-9VF4Rltr5UPFnVRyXAEZb6Wqc_t62RYqm5og7LK8HHbvMz2kjc-L5X4gSUR6wSM/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 21

CODE :- <style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjia1rKx-5Um076pO53nMdvZcdqJqXUzmIRnMUlkC_nJ0jmcRb-XQ7vJ4EA2M_vS0S-B6_r1auRY1OCvj7MosEw7wgChXBITNTd9rV8akae4NmnWG8Oka1IgJ7M6XPRIkouleGqYBjWJjw/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgARfex7_bvBjL_uN3JOdW6K1r2Wdh6azA0Dx5YRlWBS_c1mB1aTdT-Nx-8QrjQSGRvyO6-IoB15H_I2k8R0O4K-IGSerIqzj0lnWLticvsYUMsH7kEDugMt6sKXcuQjpqfvXN0kptgoLU/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 22

CODE :- <style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjymDouCQs5w4RoiX5TcXjNnbDYmSc7jqm2Vfw2ed7g9dFVZ6KsDJgJnABoCSDwYh6QQLa__uWI80asgh86xA53iv4ZpiMp5gL-yevbCbx-FiXnRwlXy1Vn3SYOsnVDTUNG1M-slisOv2o/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg41KNiutpAEtAQIT3FWVq-U2GKxsNKENk5Cnf1Beapz6ylocxOBipZdL3O9IsmbjFuyh64Y1AyUi6y_wn5oQqPKPSpxFBzRyg7Befh6IkmW6zeqaZCzE8SpzhJRuwcwo-jd7qeV5i6ws/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 23

CODE :- <style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 24

CODE :- <style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Liddddnk 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Linddddkdd 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Linddddk 7</span></a></li> </ul> </div>

NAVIGATION MENU 25

CODE :- <style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZevccY2-Igjh9IPK1rj9EdHQ4PDjhYbPOQK2ETTtXxIXhLHJtj1wwJVz7IKK24VCEPOl4G4KOvWHjwa-qS_cW9Uz2hnkoAj2yhEJR41RYgXUvBH_SCfRiDHOPutGeM2QVWfj9vi3vkkQ/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDpD8_azrhkcEjyfjDPEdM9j35a_jE3NlhRWO0FLzbxv9yC0kNY82RdrhRiKG6KPIDReiC6jy4k11pqa1Y-TIrpn7mbQLBVeMsWhqo7Roo4BAvkOO6Bf5A62K1gYKoIsCURXzwF3MTj8s/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 26

CODE :- <style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIxGraCz8hIaTyUSdnmjeiEn869bVqAZviyxsi7sdIWq2onDYyLjgVZ_1aqdDxv2HvmPM9I64y_D2sLoa9Rdkh4X_zRelCInU0YrodZPWC_sNlP1yDcYDzaD8VS04FOBACWL5RbWC2Nfo/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKaz0BcGRkJopIQO0hGrvfZgr-jfeKP4iEwF4qSUEWilKmMjWQiTqYbp1uiUkcQe_-GJn920JJ-WYeQNltHtghwdabBKaCTuyKFBVejtqBLeeoZPiPmiaRM8IzRFwHq8O2ewGDpgdoc9Q/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 27

CODE :- <style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivouOX3lXr-D-1Vz4mDkmSMVzMxDCfUTDijyOYLHhHAjSWK1n0-gZ9oIUaBDBl3yUSWA44TnWkY1wSzliBiuHAq2pBpbUO8SK_YdU3tJ4i4Fx90lnuEtmGjnq5jBXdKvaOU_MF-MZaqpU/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMQcLJF1OWJjJ-28Q6qW7TU6MD5ElTc_KDJiGnDm2jT2qPvM76WHEmq42T9niaYNPJ19Ph2_xApIczULCj8r7mggxo-93pcKEQ8likgrm_tyHYDGeCU2B77LLr-_2cDHTzmcpfYwgT3y8/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 28

CODE :- <style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_m017YMcyStwZ5YDjiGQlsIRhkgGFjYU-XJDXtSXCx72Bkl-FMNs1PVbjxRCzCPFCnEf70ykDF1OPiMForIbrKxMYFAhIq_DI-ke46Dbi2xvO8EawDAfSWuaF4uZ9Ld_kPWlKoexrc7U/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVOwuPHxxRaPAu_2wG1-h0o7TfjmlkBKGvdfzY24LfeKiCyMEJxnG0XfH4Rx0Yp7NVf1EQmuUUEdeOHM50vePhpL8mqnUDPubO6ka4wf6jqCvJuLsrqNmI6B_44YE6Y1ZYbH14owqQAwU/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 29

CODE :- <style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLdqdyZmTVaEUTZIVX4v86FsGqphgrWcS8hi4JceKqsWsuqRnAJC-kaEMvC32eci2EL2iytREgR9AC9r0ddOYJGoiX90boexyiJNiMOjJlETO1-2YgSP1yVBIO65NUeGJAok_5sT56oSo/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEdjwDibIw8xsfTKUuVo0d3I3VIhPRNvz3rcoAKAb3dMrsGBQdjXAOwQioANfG7sC87MAQMgmucXl8YSITJ3EnWdFmJ2zt8c4IfUvzR9ZC3yn7RRIfgW2HBFwWJiCA97QodKAiAwZKqtw/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NAVIGATION MENU 30

CODE :- <style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJgjYuYfj8Q5dFTqb9zCPY3HKmlk3gszffrpX2j3ZhqNyqCTXgM8t0bmwTnKkhDww-MiJYJaasg91CrdIyETHrhE3aImXX3l1jZgogC2-CdE4KuLWYe03HFDvcCbkFA_1-r18ZISh7z8/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAPEduBUUbP6Dja0NZfduNDNUbNUHy5taeykkGnpvJOOd6Y0WeGyyHSxfWdeY2rTLtYIM28pbVjOV92mcnh53Z1VLi-u9UJuS1pvsZ3qBzgmjWhB8kkQPgfAUUsuEnZF1QIfx40VsiuDE/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

NOTE :- Change '#' with Link and Text with Text.

4). The last and the most important step, Save you template.

If you got a good experience than leave comments and Email Me for any assistance.

HOW TO OPEN ALL LINKS IN YOUR BLOG IN NEW WINDOW OR TAB

noreply@blogger.com (ANUJ GOYAL) — Fri, 21 Oct 2011 03:29:00 +0000

In this i will tell how you can open all links in your blog in new window or new tab in just 5 simple steps. In an attemp to lesson the likelihood of loosing the readers, many people force links to open in new window or tab, as the page remains open on which the user are and the open a new page in new tab for the user click.

OPEN ALL LINKS IN YOUR BLOG IN NEW WINDOW OR TAB

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

<head>

4). Copy and Paste the followig code directly below the code you have searched.

<base target='_blank'/>

5). Save your template and experience the change.

If you got a good experience than leave comments and Email Me for any assistance.

ADD CONTACT US FORM TO YOUR BLOG

noreply@blogger.com (ANUJ GOYAL) — Thu, 20 Oct 2011 15:01:00 +0000

In this post i will be telling you how to make your blog contact us or contact me form. With the contact us form you can facilitate your users to resolve problem if any, or can contact with you, they can also send guest post through contact us form, an Email will be sent to you and you can reply to your users accordingly.

ADD CONTACT US FORM

1). Open a new tab and Go to www.FoxyForm.com

2). Fill in the contact form Settings, select the fields accordingly and enter your Email address on which you want messages.

3). Select Create and Copy the code produced.

4). Go to New Post Option > Edit HTML and Paste the code.

5). Publish your post.

SIX TRICS TO GET YOUR SITE ORDERED IN SEARCH ENGINE

noreply@blogger.com (ANUJ GOYAL) — Thu, 20 Oct 2011 15:00:00 +0000

It is very difficult for new bloggers to be indexed in search engine without any reference, or it will take time for them. Every search engines have intelligent techniques to discover new contents on web as well as domains.

All the search engines are made to order a site or pages of a that site that is found on the web. Even after your blog is graded by search engine you will find your blog content is taking much time to get on search engine.

so, our team has inspected this problem, and quick fixed this problem. These are six techniques to deal with this problem :-

1). MANUAL SUBMISSION
When your website is approximately completed , you can yourself submit your website url to their add url page to assret them about your link. Here you can INDEX your domain to Google, Yahoo and Bing.

2). WEBMASTER TOOL
WEBMASTER tool provided by search engine, must be used by website owner. a webmaster cannot live without using it . Webmaster tool will provide you clear vision how your sight is performing on their search engine. Here you can try Google Webmaster tool, Bing Tool box, Yahoo site explorer.

3).ROBOTs.txt ISSUE
It is a ungraded text file that is used to guide the search engine that the content of a domain is to be added or not. you can check your ROBOT.txt file which would be on http://www.yourdomain.com/robots.txt to know even if the pages are being blocked from ordering by search engine.

4). SOCIAL SUBMISSION
When you completed your site, submit it on different social networks such as facebook, Twitter, Google+ . these will help you increse your site ranking. You may had seen Bing tries to bring those sites that are liked by your Facebook friends and Google tries to bring those URLs that are share on Google buzz, Google+, Twitter.

5).PLENTY OF CONTENT AND DEEP LINKING
content is shan of your site. search engine index those domain which are full of content with huge keywords. Deep linking is important for search engines when robots and spiders visit your site.

6).BETTER SITEMAPS
The Bid is to make search engine friendly sitemaps. if you are using wordpress then it is very easy for you to build sitemaps with plugins such as Google XML sitemap generator.

The conclusion is if you try to follow all the above techniques, it will take minimum time to index your new domain or posts by search engine.

POLAROID ICONS BLOG SUBSCRIPTION GADGET WITH ROLLOVER EFFECT

noreply@blogger.com (ANUJ GOYAL) — Wed, 19 Oct 2011 09:15:00 +0000

This is the post that each one of you will like it, our team has introduced polaroid icons to subscribe to your RSS Feeds, Facebook, Twitter page. There are two polaroid design of one picture, one is fresh and bright as well as other has a vintage worn look. It would'nt be cool for you to have attractive worn vintage polaroid icon in your sidebar and when it would be hovered by someone they come to their original fresh and bright look this is called rollover effect.

This will amaze your website or blog users. I know Now, you wanted to add it in your blog.

ADD POLAROID ICONS WITH ROLLOVER EFFECT

1). Go to Dashboard > Design and select Page Elements.

2). Select 'add a gadget' HTML/Javascript.

3). Copy and Paste the following code inside it.

<a href=http://www.facebook.com/pages/pc-tech/154756611268091 onmouseover= "if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbeKzeaHnc3w8yFo2B6hmQbr4eJXaan2tkDZ2IP-TghVN6YEiwqd0STzxbRee4i-71xUiP9C9lf5J6hPOuWn3iYO_gM6H6B66PAwGFSx8vjQTUNHJTQxFuDK_7wuEows7AKGAQ4sZhNKlQ/s1600/facebook.png';" onmouseout= "if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1wK7r_ue9v7coO9zt5OetR-TRjbnyfj-NZcpUspbp3EFp1F4bB9dhzbIY6ltRnVtocdq5yCeAaSiKR-b8qwqn2WcZcikOgOescfIzmvEvU57h7xfukEvSa90zWKSRm0SmmhPRGTlj8gHN/s1600/facebook.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1wK7r_ue9v7coO9zt5OetR-TRjbnyfj-NZcpUspbp3EFp1F4bB9dhzbIY6ltRnVtocdq5yCeAaSiKR-b8qwqn2WcZcikOgOescfIzmvEvU57h7xfukEvSa90zWKSRm0SmmhPRGTlj8gHN/s1600/facebook.png" name="facebook" border="0" width="64" height="82"/></a>
<a href=http://http://twitter.com/#!/anujgoyal1992 onmouseover= "if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLA9-mjuOskopkANZlEhCwViz5ZBaEiyX52uaPzKI-NHmwBl9iZzElVcdVd1y19g46IycUUe0a0x9YRcV_WMnzdi6Jg5XWXkJtvMFxE428m3c30cWVOCti4htE1Jy4AdKJQ6u1ILvmFZB/s320/twitter.png';" onmouseout= "if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibzpq-OHwbKPPXf-c2gT1ytjOfYqWbD2Ft5sWjhUogFCvLq72G-wQcrVeiz84DKbpeMQfg1ZlXWWezwvlwhLuI9sk-lxzCUVXO4EAgeyleu8CW00TnwMg4ofjK9Zp0WcTpjYmhNrzamfTR/s1600/twitter.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibzpq-OHwbKPPXf-c2gT1ytjOfYqWbD2Ft5sWjhUogFCvLq72G-wQcrVeiz84DKbpeMQfg1ZlXWWezwvlwhLuI9sk-lxzCUVXO4EAgeyleu8CW00TnwMg4ofjK9Zp0WcTpjYmhNrzamfTR/s1600/twitter.png" name="twitter" border="0" width="64" height="82"/></a>
<a href=http://feeds.feedburner.com/pcleaks onmouseover= "if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6DuEx-LaUKs9NZlNdEg4rByjlpilhs9xyFydXbfWMuvZRS5du1P9e0whMhdRtINPwCTF05n1ZYPtzz8BoibjQsElHwZPokirqehMqcCRsoHupSnqFSBdOPCna2DkEwy10UGE20bhl2-6/s1600/rss.png';" onmouseout= "if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQ0jwVt6WXIGfDceLRIgJSBVFg3TlIZRLrPLE9k2a0fO67soHwNjxibkkVF_Gr58jDHPaUoa8OV_TQnYsxFzT6piLAu7Ie5SYhsKlJfpBgnN1WH-mpcgQ2b26S307dpWuRdpxPGvC5arb/s1600/rss.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXQ0jwVt6WXIGfDceLRIgJSBVFg3TlIZRLrPLE9k2a0fO67soHwNjxibkkVF_Gr58jDHPaUoa8OV_TQnYsxFzT6piLAu7Ie5SYhsKlJfpBgnN1WH-mpcgQ2b26S307dpWuRdpxPGvC5arb/s1600/rss.png" name="rss" border="0" width="64" height="82"/></a><br/><a href="http://www.spiceupyourblog.com" target="_blank"><small>Blog Gadgets</small></a>

NOTE :- Replace the highlighted URL's with the URL's for your Facebook, Twitter, RSS Feeds

If you got a good experience than leave comments and Email Me for any assistance.

jQUERY LIGHTBOX IMAGE OVERLAY POP-UP EFFECT FOR BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Wed, 19 Oct 2011 00:04:00 +0000

This is the gadget which every webmaster and a good blogger should have it on their blogs as this gadgets includes the best features like Image Zoom Effect and Featured Image Slideshow. Adding this gadget to your blog will change your blog looks, it the best gadget for the bloggers who uploads much images on their blog. It maximizes the image on the current page itself, if it is clicked and can be slided to next image if there are more than 1 images. Isn't it is interesting.

ADD LIGHT-BOX OVERLAY EFFECT TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>

4). Copy and Paste the followig code just BEFORE the code you have searched.

/*start css lightbox*/
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev {
left: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#lightbox-container-image-data #lightbox-image-details {
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block;
clear: left;
padding-bottom: 1.0em;
}
#lightbox-secNav-btnClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
}
/*end lightbox css*/

5). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

</head>

6). Copy and Paste the followig code just BEFORE the code you have searched.



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>

5). Save your template, We had added the script and Css.

NOTE :- NOW, When you add an image to your blog that you want to use the light-box effect, Simply Go To Edit Html > Search Image Code

And ADD the given code to Image code

class="spicebox" and title="Add Description Here"

It Will Look Like :-

<a class="spicebox" title="Image Description Here" href="http://image.jpg"><img src="http://image.jpg"></a>

If you got a good experience than leave comments and Contact Me for any assistance.

ADD 15+ ANIMATED FIXED-FLOATING HOVER EFFECT FOLLOW-ME BADGE

noreply@blogger.com (ANUJ GOYAL) — Tue, 18 Oct 2011 23:30:00 +0000

We are serving our users the best, In this posts i will tell you how to add animated fixed floating follow me badge". We are providing you with 15+ cool animated fixed-floating follow-me badge with hover effect as this will make your site or blog popular on twitter as a result your blog traffic will be increased.

ADD 15+ ANIMATED FIXED-FLOATING FOLLOW-ME BADGE TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Check 'Expand Widget Templates'.

4). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

</head>

5). Copy and Paste the followig code just BEFORE the code you have searched.


<style type='text/css'>
.feedbacktw {
width: 31px;
height: 116px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/1zb4509.jpg);
position:fixed;
top:20%;
right:2px;
}
.feedbacktw:hover {
width: 31px;
height: 116px;
display: block;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(http://i26.tinypic.com/xpu99c.jpg);
position:fixed;
top:20%;
right:10px;
}
</style>


NOTE :- We are providing you with 15+ different twitter follow me badge images, you can select any of them and change the highlighted code, 1 code with Direct Link and 2 code with the Hover Direct Link.

Direct link image On Hover Direct link

01. http://i42.tinypic.com/353cvh4.jpg --- http://i42.tinypic.com/212en7t.jpg

02. http://i40.tinypic.com/j65sts.jpg --- http://i44.tinypic.com/2cncvq1.jpg

03. http://i40.tinypic.com/x283dc.jpg --- http://i43.tinypic.com/m9sj5y.jpg

04. http://i42.tinypic.com/30kf7mp.jpg --- http://i42.tinypic.com/330ab9s.jpg

05. http://i43.tinypic.com/20hwowl.jpg --- http://i41.tinypic.com/i1mauo.jpg

06. http://i43.tinypic.com/x5nygw.jpg --- http://i43.tinypic.com/2nk2qn9.jpg

07. http://i44.tinypic.com/1zqsowk.jpg --- http://i39.tinypic.com/33nukja.jpg

08. http://i43.tinypic.com/24c8jm9.jpg --- http://i39.tinypic.com/14112c7.jpg

09. http://i44.tinypic.com/r8ug3o.jpg --- http://i43.tinypic.com/18nf54.jpg

10. http://i44.tinypic.com/2rz7u9s.jpg --- http://i44.tinypic.com/2gxmamx.jpg

11. http://i44.tinypic.com/6jozr4.jpg --- http://i43.tinypic.com/25iaycy.jpg

12. http://i39.tinypic.com/2a68u1k.jpg --- http://i42.tinypic.com/2rnk9py.jpg

13. http://i43.tinypic.com/34zjfo5.jpg --- http://i43.tinypic.com/a4ak2v.jpg

14. http://i43.tinypic.com/8wjfbs.jpg --- http://i41.tinypic.com/5wbecx.jpg

15. http://i42.tinypic.com/23uucco.jpg --- http://i43.tinypic.com/fee7ht.jpg

16. http://i41.tinypic.com/dcfzag.jpg --- http://i44.tinypic.com/200g0w4.jpg

17. http://i41.tinypic.com/2quhswn.jpg --- http://i42.tinypic.com/f5a83s.jpg

6). Save your template and Go to Page Elemants.

7). Select 'add a gadget' HTML/Javascript.

8). Copy and Paste the following code inside it and Save it.

<a style="display:scroll;" href="http://twitter.com/#!/anujgoyal1992" class="feedbacktw"> </a>

NOTE :- Change the Highlighet code with your Twitter Profile.

If you got a good experience than leave comments and Email Me for any assistance.

ADD PAGE NUMBERED NAVIGATION FOR BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Thu, 13 Oct 2011 13:33:00 +0000

If you are a webmaster, this is a must gadget for your blog, Make your blog familiar as much as you can to attract your users and keeping them on your blog for a longer time. Our team have introduced this gadget with a very easy installation, you don't need to add lots of css code to your blog template, as we are providing you with just a small piece of code that will do the same work.

ADD PAGE NUMBERED NAVIGATION GADGET TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Copy and Paste the following code just above the code you have searched.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

5). Find the following piece of code in your blog HTML code.

</body>

6). Copy and Paste the following code just above the code you have searched.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

NOTE :- Some times we get a problem, In this we had shown 5 post per page and By default blogger label pages will show 20 posts. To fix this problem Go to Edit HTML > Check Expand Widget, Now find each appearance of

'data:label.url'

and replace it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

7). Save your template.

If you got a good experience than leave comments and Email Me for any assistance.

REPLACE NEWER, OLDER AND HOME NAVIGATION LINKS WITH IMAGE BUTTONS

noreply@blogger.com (ANUJ GOYAL) — Thu, 13 Oct 2011 00:28:00 +0000

In this i will tell you how to replace your older, Home and Newer navigation links with cool image buttons. If you are a using a page navigation gadget, then these button will be shown below every posts and not on your blog Home page. Adding these image buttons to your site or blog will make your blog look awesome, and your blog will look different from other blogs.

ADD NEW STYLED NAVIGATION IMAGES TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Check 'Expand Widget Templates'.

4). Replacing The 'OLDER' Link

Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

<data:olderPageTitle/>

Replace the given code with the code you have searched.

5). Replacing The 'NEWER' Link

Find the following piece of code in your blog HTML code.

<data:newerPageTitle/>

Replace the given code with the code you have searched.

6). Replacing The 'HOME' Link

Find the following piece of code in your blog HTML code.

<data:homeMsg/>

Replace the given code with the code you have searched.

7). Save your template and Experience the change.

If you got a good experience than leave comments and Email Me for any assistance.

ADD NEW FACEBOOK LIKE AND SEND COMBO BUTTON TO YOUR BLOG

noreply@blogger.com (ANUJ GOYAL) — Wed, 12 Oct 2011 13:26:00 +0000

This will be the post you all must be finding, as in this post i m telling you how to add Facebook brand new shinny Like and Send combo button to all your post. Adding the Facebook like and send button you are making it easy for your users to share it on Facebook with a single click button and also the readers don't need to leave the blog. By adding send button you are helping your users to send the post to someone in a very simple way, You can also send it to your friends or someone who is not in your friend list by adding the email address. As it makes your post popular among your friends and helps in increasing traffic to your site or blog.

ADD SHINNY FACEBOOK LIKE AND SEND COMBO BUTTON

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Check 'Expand Widget Templates' option.

4). To place the button at the top of your post Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

<div class='post-header-line-1'>

NOTE :- If you do not find this code, find <div class='post-header-line-1'/>

-- To place the button at the bottom of your post Find the following piece of code in your blog HTML code and past.

<div class='post-footer'>

NOTE :- If you do not find this code, find <data:post.body/>

7). Copy and Paste the following code just below the code you have searched.

8). The last and the most important step, Save you template.

If you got a good experience than leave comments and Email Me for any assistance.

ADD NEW PAGE NAVIGATION WITH SCROLLER FOR BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Wed, 12 Oct 2011 12:05:00 +0000

As we always Do, Making it easier for your blog user to navigate your blog easily with a single click. I think you had seen it on many blogs or sites, I would like it on your blog as there are many options starting from 1 till end page of your blog. Basically when the user comes to the end of a post, they have a option to directly jump on a page without going back to the page having the post which they have viewed.

ADD NEW PAGE NAVIGATION TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Copy and Paste the following code just above the code you have searched.

.paginator {

margin-top:60px;

font-size:1em;

}

.paginator table {

border-collapse:collapse;

table-layout:fixed;

width:100%;

}

.paginator table td {

padding:0;

white-space:nowrap;

text-align:center;

}

.paginator span {

display:block;

padding:3px 0;

color:#fff;

}

.paginator span strong,

.paginator span a {

padding:2px 6px;

}

.paginator span strong {

background:#ff6c24;

font-style:normal;

font-weight:normal;

}

.paginator .scroll_bar {

width:100%; height:20px;

position:relative;

margin-top:10px;

}

.paginator .scroll_trough {

width:100%; height:3px;

background:#ccc;

overflow:hidden;

}

.paginator .scroll_thumb {

position:absolute;

z-index:2;

width:0; height:3px;

top:0; left:0;

font-size:1px;

background:#363636;

}

.paginator .scroll_knob {

position:absolute;

top:-5px; left:50%;

margin-left:-10px;

width:20px; height:20px;

overflow:hidden;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsc_Xljtt5PAcSpmSiGrG1R2zhy2D93-bC2v0HQjwjQXMNh6Ar-gUj46JrbOUp0HwyFRVUuMLvCc-wil57vAZWVfr-Gd20V1OYDQiLDJIPxkj6nTDs9jflGvUubnEMN1uO1JOvrIYVCwE/s1600/slider_knob.gif) no-repeat 50% 50%;

cursor:pointer; cursor:hand;

}

.paginator .current_page_mark {

position:absolute;

z-index:1;

top:0; left:0;

width:0; height:3px;

overflow:hidden;

background:#ff6c24;

}

.fullsize .scroll_thumb {

display:none;

}

.paginator_pages {

width:600px;

text-align:right;

font-size:0.8em;

color:#808080;

margin-top:-10px;

}

5). Find the following piece of code in your blog HTML code.

</body>

6). Copy and Paste the following code just above the code you have searched.

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>

<script type='text/javascript'>

var home_page="/";

var urlactivepage=location.href;

var postperpage=7;

var numshowpage=6;

</script>

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>

NOTE :- You can change number shown in your page navigation by changing 'numshowpage=6', and change post shown on each page by changing 'postperpage=7'.

7). Save your template.

If you got a good experience than leave comments and Email Me for any assistance.

ADD GRID LAYOUT POPULAR POST GADGET FOR BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Wed, 12 Oct 2011 11:28:00 +0000

As we have been introducing new gadgets for bloggers and this time also we had introduced a gadget which will help you a lot in blogging. We had introduced Grid layout for popular posts in the sidebar, as a result the blog user can easily find the best posts in the blog, they will not have to search it. In this popular posts gadget 9 popular posts will be displayed along with their thumbnail. Isn't it interesting, you must want it.

ADD GRID LAYOUT POPULAR POST GADGET TO YOUR BLOG

1). Go to Dashboard > Design and select Page Elements.

2). Select 'add a gadget' Popular Post.

3). Edit 'Gadget setting' to display thumbnail not snippet.

4). Select Layout and Edit HTML.

5). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

6). Replace the following code with the code you have searched.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content popular-posts'>

<ul>

<b:loop values='data:posts' var='post'>

<li>

<b:if cond='data:showThumbnails == "false"'>

<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>

<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

<div class='item-snippet'><data:post.snippet/></div>

</b:if>

<b:else/>

<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>

<div class='item-thumbnail'>

<a expr:href='data:post.href' expr:title='data:post.title'>

<b:if cond='data:post.thumbnail'>

<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

<b:else/>

</b:if>

</a>

</div>

<b:else/>

<div class='item-content'>

<b:if cond='data:post.thumbnail'>

<div class='item-thumbnail'>

<a expr:href='data:post.href' target='_blank'>

<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

</a>

</div>

</b:if>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

<div class='item-snippet'><data:post.snippet/></div>

</div>

<div style='clear: both;'/>

</b:if>

</li>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

7). Save your template.

8). Go to Template Designer > Advanced > Add Css and paste the given code at the last.

.popular-posts .item-thumbnail{float:left;}

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}

9). Select 'Apply To Blog' from the right top.

If you got a good experience than leave comments and Email Me for any assistance.

ADD ANIMATED EFFECT TO LABELS LIST IN BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Tue, 11 Oct 2011 03:44:00 +0000

In this post we will add effect to the links in your label list. We will add a hover effect to the label list, and when your user place their cursor on the label it will move horizontally. Isn't it is good, I had also added this gadget. You can see live demo of this gadget in my blog labels.

ADD ANIMATED EFFECT TO YOUR BLOG LABEL LIST

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

</head>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Paste the following code just above/before the code you have searched.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450;
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script>


5). Save your template and experience the change.

If you got a good experience than leave comments and Email Me for any assistance.

ADD 30 AWESOME GOOGLE GADGETS FOR BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Tue, 11 Oct 2011 03:11:00 +0000

We visited many blogs and seen all of them uses the Followers gadget, it allows the visitors to Follow you on your blog or Join the blog. There are many useful gadgets such as Popular Posts, Featured Content, Top Ten Visitors, Newsletter and much more but in this follower gadget is the best, as it provides your users direct updates of your blog on their blogger dashboard. There are 30 awesome gadgets but we are telling you about 11 best gadgets which will help you a lot in increasing your traffic and make you blog popular.

ADD 11 BEST GOOGLE GADGETS TO YOUR BLOG

1. Social Bar - The social bar is a toolbar which can be added to the top or bottom of your blog and offers users options to join your blog, share, comment and more.

2. Followers Cloud - This awesome cloudy look gadget displays the names of your followers in a cloudy style similar to the label cloud.

3. Get Answers Gadget - This gadget is similar to a chat box and allows visitors to ask and answer questions or chat with their friends on your blog.

4. Comments Gadget - Users can add a comment or link.

5. Ratings And Reviews Gadget - Let people review and rate your posts or entire blog.

6. Interests Poll Gadget - The interests poll gadget can really help your blog.By asking visitors to take a quick poll Google can use the information to help target AdSense ads and add content to the Featured gadget.

7. Featured Content Gadget - The featured content gadget displays a list of posts based on the interests of your Followers.

8. Newsletter Subscription Gadget - Get visitors to subscribe to a newsletter. You can provide them with your newest post or updates on their Email.

9. IPhone Members Gadget - This cool gadget is similar to the Followers gadget but is in the style of the iPhone.Visitors can scroll through information just like they would on an iPhone screen.

10. Recent Visitors Gadget - This gadget as the name suggests displays thumbnails of the followers who were recently on your blog.

11. Top Ten Members - Say thanks to the Followers who visit your blog the most.This gadget will display a list of Followers based on the numbers of times they visit.

NOTE :- CLICK HERE and sign in with your gmail account and Select 'Get Started'. Choose 'Gadgets' option in the left sidebar, Select any of the gadget you want to add to your blog and Tick 'Get This Gadget' option, make changes according to you like color, size etc and select 'Generate Code'.

Go to your Blog Design Page > Page Elements > Add A Gadget > HTML/Javascript and copy and paste the generated code inside it and save it.

Now, Enjoy the new gadgets on your blog.

If you got a good experience than leave comments and Contact Me for any assistance.

10 ANIMATED FLASH CLOCK FOR BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Tue, 11 Oct 2011 02:48:00 +0000

It the most common widgets which a blogger or a webmaster should have on their blog. As adding a clock to your website gives your blog a sensible and beautiful look. In this post i will tell you how to add animated flash clock to your blog, we are providing you with 10 different style flash clock, choose any of the clock for your blog.

ADD 10 DIFFERENT ANIMATED FLASH CLOCK TO YOUR BLOCK

1). Go to Dashboard > Design and select Page Elements.

2). Select 'add a gadget' HTML/Javascript.

3). Copy and Paste the following code inside it.

1). CLICKING DIGITAL CLOCK

<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150" wmode="transparent"> </embed>

2). ROTATING SILVER CLOCK

<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf" width="150" height="150" wmode="transparent"> </embed>

3). BLACK OUTLINE CLOCK

<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed>

4). SIMPLE CLOCK

<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" wmode="transparent"> </embed></object>

5). WHITE CLOCK

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

6). BLACK CLOCK

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-179.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

7). CLICK-OUT DIGITAL CLOCK

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-152.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

8). 3D CLOCK

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-169.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

9). HOUSE CLOCK

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

10). BLACK COOL CLOCK

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-165.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

NOTE :- You can change the width and height according to your blog.

If you got a good experience than leave comments and Email Me for any assistance.

ADD FLOATING SOCIAL BOOKMARKS ON BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Sat, 01 Oct 2011 12:16:00 +0000

In this i will tell you "How To Add Floating Social Bookmarking Buttons". You might have seen few buttons on right or left side of the browser while scrolling, these buttons are called floating social bookmarking buttons. As every blogger wants these buttons on their blog for better sharing and increasing traffic.

ADD FLOATING SOCIAL BOOKMARKS TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>

4). Copy and Paste the followig code just BEFORE the code you have searched.

#divStayTopLeft {left:5px;position:absolute;top:15px;}
.sidetab {}
.sidetab ul {list-style-type: none;margin: 0;margin-top: 220px;margin-left: -2px;padding: 0;}
.sidetab ul li {border-bottom: 0;margin-bottom: 0;padding: 0;}
.sidetab a {background: none;display: block;height: 25px;margin-top: 0px;padding: 2px;width: 25px;}
.sidetab a:link, .navlist a:visited {color: #555;text-decoration: none;}
.sidetab a:hover {border: none;background: #e8e8e8;}
.sidetab .button a {background:none;height: 25px; width: 25px;}

5). Find the following piece of code in your blog HTML code.

</body>

6). Copy and Paste the followig code just BEFORE the code you have searched.

<DIV id='divStayTopLeft'>
<div class='sidetab'>
<ul class='navlist'>

</ul>

</div>

</DIV>

7). Save your template and Experience the change.

If you got a good experience than leave comments and Email Me for any assistance.

ADD jQUERY TABBED INTERFACE/STRUCTURED MENU TO YOUR BLOG

noreply@blogger.com (ANUJ GOYAL) — Wed, 28 Sep 2011 12:03:00 +0000

As Tabbed Structured menu has been the most fundamental element in any web structure. It is developed by our team with a reference that the visitors can properly navigate through the website. We had developed a interface that dont confuse the user and easy to use, help the visitor to click where they want to and be on the blog for a long time. It is one of the best source to drive traffic to the internal pages of your blog.

ADD TABBED STRUCTURED MENU TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

</head>

4). Copy and Paste the followig code just AFTER the code you have searched.

<script type='text/javascript'>

$(document).ready(function() {

//Get all the LI from the #tabMenu UL

$('#tabMenu > li').click(function(){

//perform the actions when it's not selected

if (!$(this).hasClass('selected')) {

//remove the selected class from all LI

$('#tabMenu > li').removeClass('selected');

//Reassign the LI

$(this).addClass('selected');

//Hide all the DIV in .boxBody

$('.boxBody div').slideUp('1500');

//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.

$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

}

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest

$(this).addClass('mouseover');

$(this).removeClass('mouseout');

}).mouseout(function() {

//Add and remove class

$(this).addClass('mouseout');

$(this).removeClass('mouseover');

});

//Mouseover with animate Effect for Category menu list

$('.boxBody #category li').click(function(){

//Get the Anchor tag href under the LI

window.location = $(this).children().attr('href');

}).mouseover(function() {

//Change background color and animate the padding

$(this).css('backgroundColor','#888');

$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});

}).mouseout(function() {

//Change background color and animate the padding

$(this).css('backgroundColor','');

$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});

});

//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.

$('#.boxBody li').click(function(){

window.location = $(this).children().attr('href');

}).mouseover(function() {

$(this).css('backgroundColor','#888');

}).mouseout(function() {

$(this).css('backgroundColor','');

});

</script>

5). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>

6). Copy and Paste the followig code just BEFORE the code you have searched.

#tabMenu {margin:0; padding:0 0 0 15px;list-style:none;}

#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

/* this is the button images http://amatullah83.blogspot.com*/

li.comments {background:url(http://sites.google.com/site/amatullah83/bg/tabComment.png) no-repeat 0 -32px;}

li.posts {background:url(http://sites.google.com/site/amatullah83/bg/tabstar.png) no-repeat 0 -32px;}

li.category {background:url(http://sites.google.com/site/amatullah83/bg/tabFolder.png) no-repeat 0 -32px;}

li.famous {background:url(http://sites.google.com/site/amatullah83/bg/tabHeart.png) no-repeat 0 -32px;}

li.random {background:url(http://sites.google.com/site/amatullah83/bg/tabRandom.png) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}

li.mouseout {background-position:0 -32px;}

li.selected {background-position:0 0;}

.box {width:227px}

.boxTop {background:url(http://sites.google.com/site/amatullah83/bg/boxTop.png)no-repeat;height:11px;clear:both}

.boxBody {background-color:#282828;}

.boxBottom {background:url(http://sites.google.com/site/amatullah83/bg/boxBottom.png) no-repeat;

height:11px;}

.boxBody div {display:none;}

.boxBody div.show {display:block;}

.boxBody #category a {display:block}

/* styling for the content*/

.boxBody div ul { margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://sites.google.com/site/amatullah83/bg/arrow.gif)}

.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}

.boxBody div ul li.last {border-bottom:none}

.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}

.boxBody div li span { font-size:8px;color:#9F9F9F;}

/* IE Hacks */

*html .boxTop {margin-bottom:-2px;}

*html .boxBody div ul {margin-left:10px;padding-left:15px;}

NOTE :- Modify the css code to fit the blog template.

7). Save your template and Go to Page Elemants.

8). Select 'add a gadget' HTML/Javascript.

9). Copy and Paste the following code inside it and Save it.

<div class="box">

<ul id="tabMenu">

<li class="posts selected"></li> 

<li class="comments"></li>

<li class="category"></li>

<li class="famous"></li>

<li class="random"></li>

</ul>

<div class="boxTop"></div>

<div class="boxBody">

<div id="posts" class="show">

<ul>

<li>Post 1</li>

<li>Post 2</li>

<li class="last">Post 3</li>

</ul>

</div>

<div id="comments">

<ul>

<li>Comment 1</li>

<li>Comment 2</li>

<li class="last">Comment 3</li>

</ul>

</div>

<div id="category">

<ul>

<li>Category 1</li>

<li>Category 2</li>

<li class="last">Category 3</li>

</ul>

</div>

<div id="famous">

<ul>

<li>Famous post 1</li>

<li>Famous post 2</li>

<li class="last">Famous post 3</li>

</ul>

</div>

<div id="random">

<ul>

<li>Random post 1</li>

<li>Random post 2</li>

<li class="last">Random post 3</li>

</ul>

</div>

<div class="boxBottom"></div>

</div>

If you got a good experience than leave comments and Email Me for any assistance.

ADD TWITTLEY RETWEET COUNTER BUTTONS TO BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Thu, 22 Sep 2011 14:27:00 +0000

Now a days, Twitter is becoming a very important tool for bloggers and webmasters, as twitter is one of the most highly ranked social networking, bookmarking site. In this post i will tell you how you can add 'Twittley Retweet counter buttons' in seven different colors. This button is used by your users to share your blog post on their twitter network and by adding this button they can do it easily just in one single click. As it helps you in increasing your blog traffic.

ADD TWITTLEY RETWEET BUTTON TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Check 'Expand Widget Templates'.

4). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

<div class='post-header-line-1'/>

NOTE :- If it is not available search for

<data:post.body/>

5). Select any of the 'Twittley Retweet Button' and paste the given code just below the code <div class='post-header-line-1'/>

NOTE :- Paste the given code just above the code <data:post.body/>

RETWEET BUTTON 1

CODE :- <div style='float:right; margin-right:10px;'><script>var twittleystyle = "0";</script><script src='http://twittley.com/button/button.js'/></div>

RETWEET BUTTON 2

CODE :- <div style='float:right; margin-right:10px;'><script>var twittleystyle = "1";</script><script src='http://twittley.com/button/button.js'/></div>

RETWEET BUTTON 3

CODE :- <div style='float:right; margin-right:10px;'><script>var twittleystyle = "2";</script><script src='http://twittley.com/button/button.js'/></div>

RETWEET BUTTON 4

CODE :- <div style='float:right; margin-right:10px;'><script>var twittleystyle = "3";</script><script src='http://twittley.com/button/button.js'/></div>

RETWEET BUTTON 5

CODE :- <div style='float:right; margin-right:10px;'><script>var twittleystyle = "4";</script><script src='http://twittley.com/button/button.js'/></div>

RETWEET BUTTON 6

CODE :- <div style='float:right; margin-right:10px;'><script>var twittleystyle = "5";</script><script src='http://twittley.com/button/button.js'/></div>

RETWEET BUTTON 7

CODE :- <div style='float:right; margin-right:10px;'><script>var twittleystyle = "6";</script><script src='http://twittley.com/button/button.js'/></div>

6). Save your template and Experience the change.

If you got a good experience than leave comments and Email Me for any assistance.

ADD SCROLLING TEXT IN BROWSING TITLE BAR FOR BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Tue, 20 Sep 2011 11:14:00 +0000

In this post i will tell you about a new javascript gadget " How to add scrolling text in browsing title bar ", as this is a very awesome gadget and many of our visitors wanted to add it on their blog. Adding this gadget will make your blog title or blog name to scroll in the browsing title bar (where you see site name). You can add this gadget in 5 simple steps.

ADD SCROLLING TEXT IN BROWSING TITLE BAR

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Check 'Expand Widget Templates'.

4). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

<head>

5). Copy and Paste the followig code just BEFORE the code you have searched.

<script type='text/javascript'>

//<![CDATA[

msg = "The Ultimate Technology";

msg = " .................................. " + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",200);

}

scrollMSG();

//]]>

</script>

NOTE :- Change The Ultimate Technology with the message which you want to scroll in the browser title bar.

5). Save your template and experience the change.

If you got a good experience than leave comments and Contact Me for any assistance.

MACINTOSH-TECH THEME TEMPLATE FOR BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Fri, 16 Sep 2011 04:52:00 +0000

We are serving our users the best, I will be providing you with blogger template and tell you how to install it on your blog. Macintosh-tech is a 2 column blogger template with a right sidebar. The template comprises of many colors but its main color are purple,white and grey. It has a great features including a top menu with built in subscription icons and search bars, it provides add zone in right top corner and it also provides navigation bar or labels just below the header.

ADD MACINTOSH THEME TO YOUR BLOG

DOWNLOAD

NOTE :- To start Download just Click on the Link or Image.

TEMPLATE HELP AND INSTALLATION

How To Use - How To Install And Download A Template Theme

Blogger Tips - Blogger Tips, Gadgets and Help From Our Blog

If you got a good experience than leave comments and Email Me for any assistance.

ADD jQUERY SCROLL TO TOP BUTTON FOR BLOGGER

noreply@blogger.com (ANUJ GOYAL) — Thu, 15 Sep 2011 12:42:00 +0000

We are serving our users the best, Today i will be telling you about a new gadget, specially for the users having lot of content on their blog pages, and if you want your users face no problem using your blog. You can add a scroll to top button on your blog at the any of the bottom corners, clicking on the button will scroll the page to the top automatically. Adding will make it easier and faster for your users to use your blog.

ADD SCROLL TO TOP BUTTON TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

</body>

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Paste the following code just above/before the code you have searched.

If you got a good experience than leave comments and Email Me for any assistance.