A Smart jQuery Multi Tab Widget For Blogger

Posted by SoMeOnE at 8:49 PM Labels: , , ,


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .







Note:
Please host image yourself.
You can change width,height,color,... as your choice.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.



It will look like this:
multitab view widget

If you enjoy this post Subscribe To RSS Feed !!!




0 comments

How To Add jQuery Tab View Widget To Blogger

Posted by SoMeOnE at 7:14 PM Labels: , , ,


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .





4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.



Finally it will look like this:



If you enjoy this post Subscribe To RSS Feed !!!




0 comments

How To Add InnerFade Effect with JQuery to Blogger

Posted by SoMeOnE at 2:42 AM Labels: ,


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .




4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.



You are done.




0 comments

How To Add jQuery Horizontal Dropdown Menu to Blogger

Posted by SoMeOnE at 10:18 PM Labels: , ,


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .




Note:
Please host image yourself.
You can change width,height,color,... as your choice.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.



It will look like this:
navigation menu




0 comments

How To Add jQuery Horizontal Sub Navigation to Blogger

Posted by SoMeOnE at 7:52 PM Labels: , ,


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .




Note:
You can change width,height,color,... as your choice.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add one of code below and click save.



It will look like this:




0 comments

How To Add jQuery 3D Horizontal Link List to Blogger

Posted by SoMeOnE at 7:13 AM Labels: ,


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .




Note:
Please host image yourself.
You can change width,height,color,... as your choice.

4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add one of code below and click save.

Code 1:






Result:


Code 2:






Result:




0 comments

How To Add jQuery’s hover() Method To Blogger

Posted by SoMeOnE at 9:14 PM Labels: ,


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .


4.Whenever you have to write some codes or text,write it between the following tags :

hover-me">

Your Text/Code



Demo




0 comments

How To Add MooTools Link Fading To Blogger

Posted by SoMeOnE at 8:16 PM Labels:


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .


4.Click on "save Template".

5.Now when you add Links add it as below example

id="link1" href="javascript:;" class="fade">Link Fade 1

id="link2" href="javascript:;" class="fade">Link Fade 2

id="link3" href="javascript:;" class="fade">Link Fade 3


Demo




0 comments

How To Add jQuery Scroll To Top Link To Blogger

Posted by SoMeOnE at 7:12 PM Labels:


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag.



4.Now scroll down where you see tag.

5.Copy below code and paste it just before the tag.

Go To Top


6.Click on save template and you are done.

Demo




0 comments

How To Remove Dotted Outlines From Links

Posted by SoMeOnE at 5:36 PM Labels:


Don't you like the dotted outlines there around your links?Then do the simple steps below to remove dotted outlines from your links.

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

2.Scroll down to where you see ]]> tag .

3.Copy below code and paste it just before the ]]> tag.


This image has a Dotted Outline
This image has a Dotted Outline


a {outline: none;}


4.Now save your template and your done.




0 comments

CSS Rounded Corners DIV Section-Without Images

Posted by SoMeOnE at 1:27 AM Labels:


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag.

CSS Rounded Corners DIV Section


Note: You can change width,colors,... as your choice.

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save or you can add this to your blog post.

rcornerdiv">



Enter-Your-Content-Here





You are done.




0 comments

How To Add jQuery Scroll To Top Button To Blogger

Posted by SoMeOnE at 6:33 PM Labels: ,


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .




4.Now scroll down where you see tag .

5.Replace tag with .

6.Now again scroll down where you see tag .

7.Copy below code and paste it just before tag:



Note: You can use any image instead of above image.

8.Click on save template and you are done.

Demo




0 comments

How To Add jQuery Scroll Background To Blogger

Posted by SoMeOnE at 7:22 PM Labels: ,


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

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .



4.Now scroll down to where you see like this code:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Note:above code can be different in your template.But important part is body { .

5.Replace above code with below code:

body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zwuokqe5i-r-BlF05QzzDrgCLpXEz7m_upcaWBakeLs08OPh_tmkMVZmTPQ1YXvFVeTVsAi8_8T9V5plxPa1G6g9Wcrn0uYn9BEU6dmQmNvyce3i8pAsh3OsO6vE5JIN0yaJeVO6hyphenhyphenco/);
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


Note: You can use any suitable image instead of above image.

6.Click on save template and you are done.

Demo




0 comments

Complete SEO Guide For Blogger|Blogspot

Posted by SoMeOnE at 3:58 AM Labels:


This Article will provide you complete guide on search engine optimization (SEO) for blogger templates.If you have any other ideas please leave a comment.

Meta Keywords and Description


Meta tags are very important for SEO.So you must add meta tags to your blogger blog for improve your seo.


Submit Your Sitemap to Search Engines




Change Blogger Default Title Tag



Default page title for a single Blogger post is BLOG TITLE: POST TITLE. You can improve SEO by changing the title tags to POST TITLE ~ BLOG TITLE.

Change Blogger Default Heading Tag



Heading Tag (h1, h2, h3, h4, h5) is also important for SEO. All of Blogger widgets (gadgets) title use h2 or h3 tags. If you want to improve SEO, you need to use h1 tag for post title.

Use Social Bookmarking Services



Adding social bookmarking links can help you build your traffic and improve SEO.

Use Related Posts Widget




Use Read More... Feature




Use Recent Posts,Recent Comments Widgets




Use Popular Post Widget




Use Labels / Tag Clouds




Use Breadcrumb



You can use breadcrumb to provide easy navigation for your visitor and increase page views.

Submit Blog to Blog Directories






0 comments

How To Add Syntax Highlighter to Blogger

Posted by SoMeOnE at 7:22 PM Labels: , , ,


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

2.Scroll down to where you see ]]> tag .

4.Copy below code and paste it just before the ]]> tag .

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

Note-Link of the above code:
http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css

5.Now Scroll down to where you see tag .

6.Copy below code and paste it just before the tag.
















7.Now again Scroll down to where you see tag .

8.Copy below code and paste it just before the tag .




9.Now Click on "Save Templates".

10.Whenever you have to write some codes in your posts, click on "Edit Html" tab of your post editor and write the codes between the following tags :



...Your html-escaped code goes here...



When you publish your post, your codes will look like this :

Syntax Highlighter To Blogger




0 comments

Subscribe to: Posts (Atom)