Showing posts with label Blogspot. Show all posts
Showing posts with label Blogspot. Show all posts

How To Remove Link from Site Header in Blogger


How To Remove Link from Site Header in Blogger? Most of blogger templates has hyperlink Site Header. If you want remove link from Site Header you have to follow below steps:-






1. Login to your blogger account.



2. Than dashboard >> layout >> Edit HTML.



3. Don't forget to backup your template first.



4. Check the Expand Widget Templates box.



5. Find where you see the below code:-




<div class='titlewrapper'>

<h1 class='title'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:title/>

<b:else/>

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

</b:if>

</h1>

</div>

6. Now Replace above code with below code.


<div class='titlewrapper'>

<h1 class='title'>

<data:title/>

</h1>

</div>

7. Save your template and you are done.

How To Remove Link from Post Titles in Blogger





How To Remove Link from Post Titles in Blogger? Most of blogger templates has hyperlink single post title. If you want remove link from post title you have to follow below steps:-

1. Login to your blogger account.



2. Than dashboard >> layout >> Edit HTML.



3. Don't forget to backup your template first.



4. Check the Expand Widget Templates box.



5. Find where you see the below code:-




<h3 class='post-title'>

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

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

<b:else/>

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

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

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

6. Now Replace above code with below code.


<h3 class='post-title'>

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

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

<b:else/>

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

<data:post.title/>

</b:if>

</h3>

</b:if>

7. Save your template and you are done.

How to Add Page Number in Blogger to As a Widget to Navigate Page


How to Add Page Number in Blogger to As a Widget to Navigate Page? Page number is very necessary to navigate page of blog. It make more easier to navigate site for site visitors. With page number they can easily go to their desire page. You can do it from template or widget. I think widget is more easier. Here I show it--







1. Login to your blogger account.



2. Go to Design >> Page Element.



3. Click Add Gadget and select 'HTML/Javascript'.



4. Copy and Paste below code.








Note: Change based on your blog setting :

var pageCount=1;

var displayPageNum=3;

pageCount : How many Post every Page for your blog

displayPageNum : how Many number will show in Your page Navigation



5. Save HTML/Javascript and you are done.

How to Add Page Number in Blogger to Navigate Page from Template



How to Add Page Number in Blogger from Template? Page number is very necessary to navigate page of blog. It make more easier to navigate site for site visitors. With page number they can easily go to their desire page. You can do it from template or using a widget. It look like the below screen shot...







To add this page number just follow the below steps:-



1. Login to your blogger account.



2. Than dashboard >> layout >> Edit HTML.



3. Don't forget to backup your template first.



4. Check the Expand Widget Templates box.



5. Now find out ]]></b:skin> code.



6. Replace it with...




.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;

}

]]></b:skin>

Note: This code will appear showing navigation page. You can edit it if you need.



7. Next Find </body>



8. Now replace it with below code.




<b:if cond='data:blog.pageType != "item"'>

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord ='Previous';

var downPageWord ='Next';

</script>

<script src='http://tools.adityawebs.com/javascript/blogger-page-nav-v2.js' type='text/javascript'/>

</b:if>

Note: Change based on your blog setting :

var pageCount=5;

var displayPageNum=5;

pageCount : How many Post every Page for your blog

displayPageNum : how Many number will show in Your page Navigation



9. Save your template and you are done.



You can our another post Add Menubar with Submenu in Blogger IF you need.

How to Remove Attribution Widget or copyright widget on Blogger's (Blogspot) Templates Designer


How to Remove Attribution Widget or copyright widget on Blogger's (Blogspot) Templates Designer? Are you use Blogger's Templates Designer template. Here must have Attribution Widget that look like may be...







You are able to edit it but if you want to remove it normally it is not possible like others widget.











If you insist on removing the widget, you have to follow below steps:-



1. Login to Design >> Edit HTML >> Tick "Expand Widget Templates". Search for the word Attribution and change the true on locked to false.







2. Go back to Design > Page Elements.







3. Click on "Edit" on the Attribution element and REMOVE it.







4. Save your change and you are done.



You can see here How to Remove or Delete Label From Displaying Below the Posts If you need.

How To Add or Create Stylish or Colorful Unique Search Box To Blogger Blog


How To Add or Create Stylish or Colorful Unique Search Box To Blogger Blog? Usually blogger does not provide any box their templates. Thought provide is not unique. Doesn't work properly. But it is very necessary for any blog or site. If you want to add additional search box follow below steps :-



1. Login to your Blogger account.



2. Click on Dashboard >> Page Elements tab.



3. Click on Add a Gadget.



4. Select HTML/Javascript widget.



5. Select which Search Box will you use and copy than paste there.



Style 1:








<style type="text/css">

#w2b-searchbox{background:url(https://lh5.googleusercontent.com/-

Ff_C748fAD0/TkVT1CCTDLI/AAAAAAAARMw/mMPjkssbUpI/s1600/Add-Black-Search-Box-To-Blogger.png)

no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align:

top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:

top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value ==

"Search...") {this.value = ""}' onblur='if (this.value == "") {this.value =

"Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

 </form>

</div>

Style 2:








<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigMvVWv7rM0mgStHxn6ABCL6Mb_lFknd8bndjmhjyRxIyVHXFwIP1hsUkSnjaqyeCyUFbg9ZpeCkgNNYfxXAIqyGXDDwMPn5YkftbjyHZUdNgM4jCELrLkzqNWtOyYZgYHP3mpy5LHIBHH/s1600/Add-Orange-Search-Box-To-Blogger.png)

no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align:

top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:

top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value ==

"Search...") {this.value = ""}' onblur='if (this.value == "") {this.value =

"Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

 </form>

</div>

Style 3:








<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiNQNNnfkt7aSqgaPSkv36YNb4Kl890IGysIiecu6rfSLsBlYIio1nT7JY5xqQl3nMc8NpfH93uR6SHs7YOZcV5Oj9pFUZtvWFK4VvFkKA7cUhhrkTAlgVxXBtbhNqvL3RduAfJEo1FL_j/s1600/Add-Red-Search-Box-To-Blogger.png)

no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align:

top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:

top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value ==

"Search...") {this.value = ""}' onblur='if (this.value == "") {this.value =

"Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

 </form>

</div>

Style 4:








<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1LV9sLsgH34NZOJpRr01UUl6jL4ZjpFdfoemfd4-0lMSbd0UDlTjfH4lMInoWjdsd1zZB-3maZG0v7GXvJh0ZzylvHsPFORvLL6PlAAd425D7mPf-ylU87K2-OiQbvHNNUP3we-RiwTkp/s1600/Add-Silver-Search-Box-To-Blogger.png)

no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align:

top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:

top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value ==

"Search...") {this.value = ""}' onblur='if (this.value == "") {this.value =

"Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

 </form>

</div>

Style 5:








<style type="text/css">

#w2b-searchbox{background:url((https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf-kkz_h7gM44OC4-q6sFw_cizpnxJovIsBNyfVTgPKkknCGqt8zYFHZ8hyTAeOkcAzcUKSzR56ncv9Bi-72JDZfw526xka4Ip_ZqKQYk5ZWN6XcuG-RoGZ0a9YSz5hUcy_xCcJS6hx97k/s1600/Add-Gray-Search-Box-To-Blogger.png)

no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align:

top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:

top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value ==

"Search...") {this.value = ""}' onblur='if (this.value == "") {this.value =

"Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

 </form>

</div>

Style 6:








<style type="text/css">

#w2b-searchbox{background:url((https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFbGizirY3nKg1uY5_9Kv07_BcbuapSZOJPotxSqZISz7sSif9BchniI9-Oeh4qtv9qPIblLULAoKBEKkjRFBEwCVZONnCbJk79u32PJuIumFwmWwBau6p5Wjvtgs18qSr4mqb1qvvrr1k/s1600/Add-Blue-Search-Box-To-Blogger.png)

no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align:

top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align:

top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value ==

"Search...") {this.value = ""}' onblur='if (this.value == "") {this.value =

"Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

 </form>

</div>

6. Save HTML/Javascript widget and Preview than Save. You are done.

How to Remove or Delete Label From Displaying or Showing Below the Posts in Blogger







How to Remove or Delete Label From Displaying or Showing Below Posts in Blogger? Showing label below post decrease the beauty of post. It is also unnecessary. If you remove Displaying or Showing Below Posts, you have to edit HTML. To do it follow the below steps :-



1. Login to your blogger account.



2. Than dashboard >> layout >> Edit HTML.



3. Don't Don't forget to backup your template first.



4. Check the Expand Widget Templates box.



5. Now find out the below HTML code.




<div class='post-footer-line post-footer-line-2'><span class='post-labels'>

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

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast !=

"true"'>,</b:if>

</b:loop>

</b:if>

</span> </div>

Delete the lines which highlighted in red and you are done.



You can see here our another post How to Remove or Delete Page Title in Blogger of a Blogger Page If you need. Stay with us and enjoy blogging.

How To Show or Display Only Post Titles on Homepage in Blogger (Blogspot) Blog


How To Show or Display Only Post Titles on Homepage in Blogger (Blogspot) Blog? Sometimes we need to many post on home page. For this reason homepage become very large that not essay to browse. It's also bad for our blog's beauty. In this situations we can use only post title in homepage. To do it follow the below steps :-







1. Login to your blogger account.



2. Than dashboard >> layout >> Edit HTML.



3. Don't Don't forget to backup your template first.



4. Check the Expand Widget Templates box.



5. Ffind (CTRL+F)  <b:include data='post' name='post'/>  code.



6. Now Replace the above code with the following code :



<b:if cond='data:blog.pageType != "item"'>

<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>

<b:else/>

<b:include data='post' name='post'/>

</b:if>
7. Save Save Your Template and you are done. Stay with us.



You can the post How to Split or Divide Header In Three Colums in Blogger Templates If you need.

How to Remove or Delete Page Title in Blogger of a Blogger Page



How to Remove or Delete Page Title in Blogger (Blogspot) of a Blogger Page? Sometimes we need to remove or delete page for many reason but blogger does not support it normally. But it very essay. Now I show it. Just follow below steps:-





1. First go to your DASHBOARD >> NEW POST >> EDIT PAGES



2. Then click on “New Page” tab



3. Now add a title and make a page as usual



4. Here comes the trick. At the moment you are in compose mode. Click the tab next to it which says “Edit HTML



5. Then copy the following code and paste it at the top of the HTML.



 <style> .post h3 { display:none !important;} </style> 



 6. Now preview your page.



7. Publish your page and enjoy.



Now you know how to remove your title from your blogger pages. For this trick you don’t need to add any blogger gadgets.



You can see here our another post How to Remove or Delete Label From Displaying or Showing Below the Posts in Blogger If you need. Stay with us and enjoy blogging.

Add Language Translator Google Translate Widget To Blogger (BlogSpot) Blog Site


Add Language Translator Google Translate Widget To Blogger (BlogSpot) Blog Site? If you are having a blog and receiving visitors from various countries and cities of the world, then they may or may not be comfortable with the language of your blog. So adding a translator button or a widget is always useful.The Google Translate Widget (Google Translate Web Element) is a great tool to place in your blog which gives the opportunity to your visitors to translate your blog content in their native language. To do this follow below steps :-







Widget Code :-



1. Horizontal



<div id=”google_translate_element”></div><script>

function googleTranslateElementInit() {

new google.translate.TranslateElement({

pageLanguage: ‘en’,

layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL

}, ‘google_translate_element’);

}

</script><script src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>



2. Vertical



<div id=”google_translate_element”></div><script>

function googleTranslateElementInit() {

new google.translate.TranslateElement({

pageLanguage: ‘en’

}, ‘google_translate_element’);

}

</script><script src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>



3. Dropdown only



<div id=”google_translate_element”></div><script>

function googleTranslateElementInit() {

new google.translate.TranslateElement({

pageLanguage: ‘en’,

layout: google.translate.TranslateElement.InlineLayout.SIMPLE

}, ‘google_translate_element’);

}

</script><script src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>



Chose which widget you like and copy the code.



1. Login to your blogger account, and open the Design section.



2. Under the Page Elements Section go to Add a Gadget.



3. From the given list find and choose HTML/JavaScript.



4. A new window will appear, paste the code there and click Save.



Your Google Translate Widget is ready. Go back and preview your blog and see how it looks. Enjiy Blogging!!!

How to Create or Add Menubar with Submenu in Blogger (Blogspot) from Templates



How to Create or Add Menubar with Submenu in Blogger (Blogspot) from Templates? Just follow below steps :-



Login to Blogger Dashboard



Then choose Design --> Edit HTML



Don't forget to backup your template first.



Chose Proceed to start editing the HTML code.



Check the "Expand Widget Templates" box.



Then, find (CTRL+F)  ]]></b:skin>  code in the template.



Now replace it with below code


#NavbarMenu {



width: 980px;

height: 35px;

background:#e3edf9 url(http://i415.photobucket.com/albums/pp238/Sujeet/navbar3.jpg) repeat-x top;

color: #3D81EE

margin: 0 auto 0;

padding: 0;

font: bold 11px Arial, Tahoma, Verdana;

border-top: 1px solid #AFAFAF;

border-bottom: 1px solid #FFFFFF;

}

#NavbarMenuleft {

width: 980px;

float: left;

margin: 0;

padding: 0;

}

#nav {

margin: 0;

padding: 0;

}

#nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#nav li {

list-style: none;

margin: 0;

padding: 0;

}

#nav li a, #nav li a:link, #nav li a:visited {

color: #dae8ff;

display: block;

text-transform: capitalize;

margin: 0;

padding: 9px 15px 8px;

font: normal 15px Georgia, Times New Roman;

}

#nav li a:hover, #nav li a:active {

background:#e7ffb3;

color: #36731b;

margin: 0;

padding: 9px 15px 8px;

text-decoration: none;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #3D81EE url(http://i415.photobucket.com/albums/pp238/Sujeet/navbar3.jpg) repeat-x top;

width: 200px;

color: #d3d3d3;

float: none;

margin: 0;

padding: 7px 10px;

border-bottom: 1px solid #99C9FF;

border-left: 1px solid #99C9FF;

border-right: 1px solid #99C9FF;

font: normal 14px Georgia, Times New Roman;

}



#nav li li a:hover, #nav li li a:active {

background: #e3f1ce;

color: #156018;

padding: 7px 10px;

}

#nav li {

float: left;

padding: 0;

}

#nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px

; margin: 0;

padding: 0;

}

#nav li ul a {

width: 140px;

}

#nav li ul ul {

margin: -32px 0 0 171px;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul,

#nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

#nav li:hover, #nav li.sfhover {

position: static;

}



]]></b:skin>

Now look for the following section of code


<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>

</b:section>

</div>

Now just bellow that code add following code


<div id='NavbarMenu'>

<div id='NavbarMenuleft'>

<ul id='nav'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>





<li><a href='Link Here'>Health News</a></li>





<li><a href='#'>Deseases</a>

<ul>

<li><a href='Link Here'>Acne</a></li>



<li><a href='Link Here'>Breast cancer</a>

<ul>

<li><a href='Link Here'>Stages</a></li>

<li><a href='Link Here'>Signs, Symptoms, Diagnosis</a></li>

<li><a href='Link Here'>Treatment</a></li>

</ul>

</li>



<li><a href='Link Here'>Mesothelioma</a></li>

</ul>

</li>





<li><a href='Link Here'>LASIK</a>

<ul>

<li><a href='Link Here'>Complications</a></li>

<li><a href='Link Here'>Procedure</a></li>

<li><a href='Link Here'>Adwantages</a></li>

</ul>

</li>

<li><a href='#'>Webmaster's Corner</a>

<ul>

<li><a href='Link Here'>Webmaster's Forum</a></li>

<li><a href='Link Here'>Blogger Help</a>

<ul>

<li><a href='Link Here'>Widgets</a></li>

<li><a href='Link Here'>Templates</a></li>

<li><a href='Link Here'>Edit/Customise Template</a></li>

<li><a href='Link Here'>SEO</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</div>

Save the Template. Change the Titles and URL's given in second code.



Experiment with values of first code to adjust it with your blog.



You can see Add Page Number in Blogger our another post.

How to Split or Divide Header In Three Colums in Blogger (Blogspot) Templates


How to Split or Divide Header In Three Colums in Blogger (Blogspot) Templates? Many blogger wants to divide their blogger header into three section for adding adsense ads or buysellads so after applying this trick in your blog you can add ads and other social network widget in your blogger header.







* First go your blogger dashboard.



* Now click in design tab and edit HTML .



* Expand your blogger template.



* Find out the below code

#header {

margin: 5px;

border: 1px solid $bordercolor;
* Now replace above code with below code

#header {

float:left;

width:30%;

height:200px;

margin: 0px;

border: 0px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

#header2{float:left; width:30%; height:200px}

#header3{float:left; width:39%; height:200px}
Note- You can change #header2 and #header3 height and you can change width if you want.



* Now again scroll down to where you see like this code:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>

</b:section>

</div>
Note- Remember that YOUR-BLOG-TITLE is your real blog title.



* Now replace above code with below code

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>

</b:section>



<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>

<b:section class='header' id='header3' maxwidgets='4' showaddelement='yes'/>

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

</div>



* Change your blog title with your own.



* Now save your blogger template now you are done.



You can see the post How To Show or Display Only Post Titles on Homepage in Blogger Blog If you need.

How to Replace or Change Newer Post and Older Post Links With Post Title in Blogger (Blogspot)

How to Replace or Change Newer Post and Older Post Links With Post Title in Blogger (Blogspot)? The Newer Post, Home and Older Post are makes visitors and readers to easily navigate between pages and posts within your blog. But now you can show these links as your blog Post Titles which makes visitors more easily understand the next and previous articles. This tutorial will guide you on "How to Add Newer, Older and Home Links With Post Titles" on your Blog with help of jQuery Library.







Step: 1

Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.

Make sure to take backup of your Template before making any changes to your HTML.

Now click on Expand Template Widgets checkbox.

Search for </head> in your Template and replace with below code.


<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

</head>

Note: If you are running any Slider or you already have jquery inplace then dont need to add this above code, because its usually runs on jQuery.

Step: 2

Go to your Blogger Dashboard click on ---> Design tab ---> Page Elements tab.

Click on Add a Gadget then select HTML/JavaScript Widget and past below code inside it.


<style type="text/css">

#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}

#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}

</style>

<script type="text/javascript">

$(document).ready(function(){

var newerLink = $("a.blog-pager-newer-link").attr("href");

$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {

var newerLinkTitle = $("a.blog-pager-newer-link").text();

$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);

});

var olderLink = $("a.blog-pager-older-link").attr("href");

$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {

var olderLinkTitle = $("a.blog-pager-older-link").text();

$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt

});

});

</script>

Save Widget and view your blog you will notice actual posts titles of the next and previous posts. When you hover the post titles a tooltip appear with "Newer post" or "Older post"

How to Hide or Remove Blogger Navbar from Templates Using CSS in Blogger


How to Hide or Remove Blogger Navbar from Templates Using CSS in Blogger (Blogspot)? This tutorial is on how to hide or disable the blogger navbar (also known as the navigation bar) from your blog. Please note that according to the term and condition of blogger.com, you’re not allowed to remove or disable the navbar unless you host your blog under your own server. This tutorial is meant for those that host their blog outside of blogger.com, but the code does work for blogs hosted with blogger.com.







Log in to your Dashboard



Go to Design >> Edit Html



Do a search (Ctrl+F) the following piece of code

]]></b:skin>
Now copy the code (given below) and paste it before above code

#navbar {

height: 0px;

display: none;

visibility: hidden;

}

#navbar-iframe {

display: none;

}
Use your preview button before you click save!

If you like what you see, go ahead and save your template.

If you want the navbar back in the future. Simply go back into your HTML the same way and delete the part you just added. It's really that simple!

How To add Fixed merry Christmas Banner widget in Blogger (Blogspot) blog





How To add Fixed merry Christmas Banner widget in Blogger (Blogspot) blog?We are nicely into December now and it's time for another gadget to add some Christmas Cheer to your blog.In this post i have a stylish Merry Christmas Banner you can fix in the top right corner of your blog to greet your readers.The banner is transparent so it wont block your content and as the reader scrolls the banner followers them.A great simple way to wish your readers a Happy Christmas.So, You can add it to your blog.



The tutorial is simple and as you just add the code to a gadget you can easily remove it after Christmas.



In your Blogger dashboard click > Design > Add A Gadget > Choose 'Html/Javascript' :



Copy and paste the following code into the Html/Javascript gadget :


<div id="sspeakerbanner">

<img src="http://i43.tinypic.com/2hd5zki.gif" />

</div><style>

#sspeakerbanner{

position:fixed;

right:0px;

top:0px;

}

</style>



Make Banner Non-sticky (It won't follow you when you scroll down)

Use this code instead


<div id="sspeakerbanner">

<img src="http://i43.tinypic.com/2hd5zki.gif" />

</div><style>

#sspeakerbanner{

position:absolute;

right:0px;

top:0px;

}

</style>

Save the gadget and you gadget is in place, Easy

How to Add or Create New Year Banner widget in Blogger (Blogspot) blog





How to Add or Create New Year Banner widget in Blogger (Blogspot) blog?In this post i have a stylish New Year Banner widget you can fix in the top right corner of your blog to greet your readers.The banner is transparent so it wont block your content and as the reader scrolls the banner followers them.A great simple way to wish your readers a Happy New Year.So, You can add it to your blog. Now I'm going to teach you How To Add New Year Banner Widget for Your Blog.Let's see How To Get This!



Login To Blogger Go To > Design > Page Elements.



Simply add a Gadget of HTML/JavaScript type.



add this code in to it:


<div id="sspeakerbanner">

<img src="http://i41.tinypic.com/6g94j4.png" />

</div><style>

#sspeakerbanner{

position:fixed;

right:0px;

top:0px;

}

</style>



Make Banner Non-sticky (It won't follow you when you scroll down)

Use this code instead:


<div id="sspeakerbanner">

<img src="http://i41.tinypic.com/6g94j4.png" />

</div><style>

#sspeakerbanner{

position:absolute;

right:0px;

top:0px;

}

</style>

That's it...You're done....
Happy Blogging!!

How to Replace The Newer Posts, Older Posts And Home Navigation Links With Images or Buttons In Blogger (Blogspot) Blog


How to Replace The Newer Posts, Older Posts And Home Navigation Links With Images or Buttons In Blogger (Blogspot) Blog? Change Older Post And Newer Post Link With icons or images in Blogger is very nice trick to make your blog look very beautiful.As it make your blog look more beautiful than before if you are using good icons to be get replaced with older post or newer post or home link.Today i will tell you how easy it is to hide those links and place your any image you like.







Login to Blogger Dashboard



Then choose Design --> Edit HTML



Don't forget to backup your template first.



Chose Proceed to start editing the HTML code.



Check the "Expand Widget Templates" box.



Then, find (CTRL+F) this code in the template.

<data:newerPageTitle/>


And replace it with this code,

<img src="URL-OF-PREVIOUS-BUTTON"/>
Note:Upload an image to any image hosting website and replace URL-OF-PREVIOUS-BUTTON with the url of previous button image.



Now search for this,

<data:olderPageTitle/>


And replace it with this,

<img src="URL-OF-NEXT-BUTTON"/>
Note:Upload an image to any image hosting website and replace URL-OF-NEXT-BUTTON with the url of next button image.



Then search for this,

<data:homeMsg/>


above code will appear twice and replace both appearances with this code,

<img src="URL-OF-HOME-BUTTON"/>
Note:Upload an image to any image hosting website and replace URL-OF-HOME-BUTTON with the url of next button image.



Finally save your template and you are done!

How to Make Mobile Version Your Blogger Blog ready for Mobile Phones Devices

How to Make Mobile Version Your Blogger Blog ready for Mobile Phones Devices? Million and million of people use their mobile phones to access internet. The mobile internet speed is also very fast these days with 3G's , mobile apps,etc.



From this, we can say many of your readers are coming to your blog through mobile phones..But, if you don't make your blog mobile friendly, .you may lose all your mobile readers because in a mobile phone, a normal blog takes lot of time to load and there are other issues that your site not fitting properly in the mobile screen.





So, here we show how to make your Blogger (blogspot) blog mobile internet friendly....



1. Login to Blogger Dashboard



2. Then choose Design --> Edit HTML



3. Don't forget to backup your template first.



4. Chose Proceed to start editing the HTML code.



5. Check the "Expand Widget Templates" box.



6. Now (Ctrl+F) and find out below code...


<b:include data='blog' name='all-head-content'/>



7. Paste this code below above line...


<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>

8. Save the Changes!



That's it! Now, your visitors can access your blogger blog through mobile phones with blazing speed...

How to Display HTML, CSS, JAVA Codes and Scripts in My Blogger Blog Posts

How to Display HTML, CSS, JAVA Codes and Scripts in Your Blogger Blog Posts? Normally when you insert some code with HTML tags in your blogger post editor, it will be executed and the result will be shown instead of code. If you want to show some piece of code in your post to your readers then follow these simple steps.





1. Login to Blogger Dashboard



2. Then choose Design --> Edit HTML



3. Don't forget to backup your template first.



4. Chose Proceed to start editing the HTML code.



5. Check the "Expand Widget Templates" box.



6. Now (Ctrl+F) and find out  ]]></b:skin>  code.



7. Now copy below code and paste it before ]]></b:skin> tag



.sr-site {

background-color: #E5E5FF;

border: 2px solid #B2D3E2;

clear: both;

color: black;

font-weight:normal;

font-size:11px;

font-family: Tahoma, "Courier New", "MS Sans Serif", sans-serif, serif;

list-style-type: none;

margin: 5px;

padding: 10px;

}


8. Whenever you create new posts just include the special Script ( CSS code , Scripts , etc ) within this div section .



<div class="sr-site">

Insert the Special code here

</div>


That it. If you have any problem to implement this hack, feel free to post a comment, I will help you.

Note: Some template this code can't work if you put above  ]]></b:skin>  tag thats time you need to add it before </head> tag.

How to Highlight Author Comments in Blogger (Blogspot) Blogs

How to Highlight Author Comments in Blogger (Blogspot) Blogs? This is a simple trick to Highlight Author Comments in blogspot blogs . This will make the blog's owner comments looks different from the visitors comments. It's very useful and interesting blogger hack. You can see the example in my blog. Here is what to do to make a "Highlight Author Comment" effect in Blogspot.







1. Login to Blogger Dashboard



2. Then choose Design --> Edit HTML



3. Don't forget to backup your template first.



4. Chose Proceed to start editing the HTML code.



5. Check the "Expand Widget Templates" box.



6. Now (Ctrl+F) and find out  ]]></b:skin>  code.



7. After finding the above code simply add the below code before above code.




.comment-body-author

{
background: #E6E6E6; /* Background color*/

color: #000; /* Text color*/

border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;

margin:0;
padding:0 0 0 20px; /* Posotion*/

}



8. Now Scroll down to where you see this:-




<dl id='comments-block'>

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

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>

<a expr:name='"comment-" + data:comment.id'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/>

</a>
<b:else/>

<data:comment.author/>

</b:if>

said...

</dt>

<b:if cond='data:comment.author == data:post.author'> 

<dd class='comment-body-author'> 

<p><data:comment.body/></p> 

</dd> 

<b:else/> 


<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</dd>

</b:if>

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>



9. The Blue color text is the code that you have to add to your script. The position must be right.



10. Now click Save Template and you are done.



Note: You have to logged in into your blogger account before you give comments.