Sunday, January 25, 2015

How to Put Facebook Like Button on Each Blogger Post

Facebook Like Button
Friends, we have already added the different Facebook like box like sidebar static Facebook Like Box, Facebook Pop Up Like Box and many other Facebook widget. But We had forgotten about Facebook like button, so here I am just giving a bunch of code to add the Facebook like button in the every blog posts of the blogger blog. But this do not work in the blogger page. This only works on the posts of blogger blog.

Because of the popularity of the Facebook, its every widget is valuable for every business work. So as Facebook Like button is very significant for a blogger article because, if we use Facebook like button, then readers can like that article which helps to increase the visitors on your article through Facebook.

Lets just move toward the steps that you should apply while adding facebook like button in every blogger posts:


Facebook Like Button On Every Blogger Post


Step 01: As usual login to your blogger account
Step 02: Now go to template>>edit html
Step 03: Then just find our below code just pressing ctrl+f
<data:post.body/>
Step 04: Now copy the below code and just put the above code just above the above code
<br/><br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:105px; height:25px;'/>

Step 05: After that, you just press on save template.

Click here to watch Demo
Read More »

Saturday, January 10, 2015

Percentage Calculator Widget for Blogger and Website

percentage calculator
Percentage Calculator
Friends, this time I have come bringing a percentage calculator widget for you. This widget just calculate the percentage of any given number. This is just a simple html and javascript widget which is very easy to make it if you are familiar with basic html and javascipt. You should only put the base number and the real number, the which percentage is you would like to find out. Just copy the below code into your blogger and in order to do so, you just login into your blogger account and then go to the layout and click on add gadget. Now you choose html/javascript and paste the below code.

And if you want to show into your site, then just paste the css in between the <style>and </style> and javascript code in between the <script> and </script>

Javascript Percentage Calculator


<style>
input{ height:20px; border-radius:5px; margin-top:10px;}
a{font-size:8px;} </style>
<script>
function myfunction()
{
var a=document.f1.first.value;
var b=document.f1.second.value;
var percent=(a/b)*100;
alert(percent+"%");
}
</script>
<form name="f1" onsubmit="myfunction()">
<strong>Real Value:</strong><input type="number" name="first"/><br />
<strong>Base Value:</strong><input type="number" name="second" /><br />
<input type="submit" name="btn" style="background:#00F; color:#FFF;" value="Get" />
</form>
<a href="http://allblogsolution.blogspot.com/2015/01/percentage-calculator-widget-for.html">Get Percentage Calculator Widget</a>  
Click Here for Demo

Real Value:
Base Value:
Get Percentage Calculator Widget Thank you and if you have any problem about blogger and blogging techniques, do not forget to comment in the comment box below. 
Read More »

Tuesday, December 23, 2014

How to Add Tabs in Blogger Blog

Tabs Style
In fact tabs in the sites and blogs are a way of managing bulk of content in a page easily. Tabs help to manage your bulky content easily. If you have lots of content in a single page then, there become difficulty to the viewers/visitors to read all of them content. Instead if you have put content in tabs then visitors can read all of them clicking tabs one by one.

Here is the step by step process of adding the tabs in the blogger blog's sidebar.

Add Tabs Button in the Sidebar and a single page of Blogger:


Step 1: Login to blogger and then go to template and click on edit html.
Step 2: Now just find the </head> code just press CTRL+F to find it.
Step 3: After finding the </head>, you just put the below code just above it.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
$(document).ready(function() {
$("#tab-content").tabs();
});
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" />
Step 4: Now you just have to put the html/javascript tabs code. To add the code, go to layout>>add widget and find html/javascript widget. Then just paste the below code on it and save it. If you want to add in a single page then just go to any page or posts and click html instead of compose then add it onto there.

<div id="tab-content">
<a href="http://allblogsolution.blogspot.com/" style="font-size:8px; color:#eee;" target="_blank" title="All Blogging Solution">All Blogsolution</a>
<ul><li><a href="#tabs-one">first Tab</a></li><li><a href="#tabs-two">second Tab</a></li><li><a href="#tabs-three">third Tab</a></li></ul>
<div id="tabs-one">  Write first tab content  </div>
<div id="tabs-two">  Write second tab content </div>
<div id="tabs-three"> Write third tab content </div>
<a href="http://allblogsolution.blogspot.com/" style="font-size:8px; color:#eee;" target="_blank" title="All Blogging Solution">All Blogsolution</a>
</div>
<!-- All Blog Solution provides this widget for blogger blogs only  -->
 Now you have successfully added the sidebar widget into your blogger blog. This is one of the easiest way to add the tab navs into a blogger.
Tabs blogger

Note:  You should add your own content in the blue color text "Write first tab content" which will be shown on you sidebar or a single posts or page.

If any difficulties occur, then comment us.
Read More »

Wednesday, December 17, 2014

Recent Posts Wigdet for Blogger With Thumbnail

blogger recent post widget
Recent Post Widget
Actually blogger shows the recent posts in default. Blog means to reveal the ideas, describing something that you like, criticizing or sharing about your personal or business matters. So that blog always should be representative, then blogs can be useful to every people. Therefore you should make  more useful. To make , your blog useful, your blog should be representative first. There are several factors that you must apply to make your blog good representative. Among them, proper showing the information revealed in your blogs are very important. To manage the information of your blog properly, you must add many widget likewise recent post, popular post widget etc. Among them, here I have just told you how to add recent post widget in your blogger blog.

How to Add Recent Post Widget in Blogger Manually?

Step 1: Login In into Blogger.
Step 2: Go to Layout>>Html/Javascript
Step 3: Click on Html/Javascript 
Step 4: Just add the below code and save it.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="All Blog Solution"><img src="" alt="Blog Solutions and tips" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="Tips and Tricks of Blogger for bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/-iXqiYH8tGxM/VJDRkYYwvwI/AAAAAAAACgM/IS-ichE-BV0/s1600/imageicon.png";
imgr[1] = "http://4.bp.blogspot.com/-iXqiYH8tGxM/VJDRkYYwvwI/AAAAAAAACgM/IS-ichE-BV0/s1600/imageicon.png";
imgr[2] = "http://4.bp.blogspot.com/-iXqiYH8tGxM/VJDRkYYwvwI/AAAAAAAACgM/IS-ichE-BV0/s1600/imageicon.png";
imgr[3] = "http://4.bp.blogspot.com/-iXqiYH8tGxM/VJDRkYYwvwI/AAAAAAAACgM/IS-ichE-BV0/s1600/imageicon.png";
imgr[4] = "http://4.bp.blogspot.com/-iXqiYH8tGxM/VJDRkYYwvwI/AAAAAAAACgM/IS-ichE-BV0/s1600/imageicon.png";
showRandomImg = true;
boxwidth = 256;
cellspacing = 5;
borderColor = "#223c36";
bgTD = "#010101";
thumbwidth = 70;
thumbheight = 70;
fntsize = 13;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://myblogspot.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js' type='text/javascript'></script>
</div>

Note: It should be noted that the home_page = "http://myblogspot.blogspot.com/" must be replace by your blogger URL and if you already added the google api (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>), then do not add.

Here are some useful things for you when you goes to put this widget into your blogger:-

  1. You can change the numposts=10 into numposts=9 or 11 choose the number how many posts you want to display.
  2. And limitspy=4, intervalspy=4000,summeryColor="#666", boxwidth, showrandomimage, summerfontsize,summerypost can be changed by yourself.
Read More »

Wednesday, December 10, 2014

How to Add Twitter Feeds in Blogger Blog

Hi Friends, after long time I am here and I have brought a tip for you and I think you might have already known after seeing the title. Yes Indeed if you want to show your Twitter twits to show in your blogger, then adding twitter feeds widget can be a right way to do so. Actually, this is not difficult any more if you use twitter before. You just need one twitter account to put twitter feeds into blogger blog.


Adding Twitter Feeds in Blogger


Step 1: Login to your twitter account if you are an user otherwise create new.

Twitter Widget Option

Twitter Widget Option


Step 2: Now go to the Setting>>Widgets
Create New Twitter Widget
Create New Widget

Step 3: Create a new widget.
Step 4: Then fill all the necessary things there.
Step 5: Now Click Save Button
Step 6: Copy the widget code as shown in the figure below from your widget.
Copy the Codes

Step 7: Go to your blogger and layout>>add widget>>html/javascript.
Step 8: Now paste the copied code here in html/javascript widget.
Step 9: Save it. 

After completing these above steps, your twitter feeds will definitely appears in your blogger blog.

If you have any query, just comment now.
Thank you
Read More »

Friday, November 28, 2014

Download Free Red Movie Blogger Template

Movie Blogger Template

Theme Information:

Name: Movie Template
Platform: Blogger
Color: Lightening Red
Gadget: Right Left
Style: Movie
Column: 3 Columns
Width: Auto

By the way, this red movie template is only made for personal. This template is a lightening bright red template where you can find 2 gadget space right and left and you can also customize this gadget place through you blogger dashboard too. This template has 3 columns 2 columns are to display gadgets and one for your posts. This template is best for adsense placement.

Read More »

Sunday, November 02, 2014

How to Remove Spam Comments from Blogger

Remove Spam Comment
Spam?????
Hi guys, after long time, I am here to tell you why we should delete the comments of blogger and how to delete them. There are some causes of removing the comments from a blog. If you get this kind of comments in your posts, then you should immediately remove them.

Spam Comment

If a comment is spam then it can be a cause that your site rank is not increasing but it is decreasing. Spam comments are very harmful for a blog because if search engines find these comments, then they started decreasing the rank of your comments. 

How to Know a Comment is Spam?

  • If a comment is unrelated with your blog post
  • If comment is too long
  • If forceful links are found in a comment

Vulgar Comment

Some people may not like your blog and post, and they can write vulgar comments and they also can rebuke you and your blogging techniques. If your found these kind of comments, you also must delete them immediately because when other people reads these comment then they also might not like your blog. So this can decrease the visitors in your blog. Just remove it guys.

Comment Not Neccessary

Some articles and posts do not need any comments on them because these articles are truthworthy. 


Delete Comment of Blogger Post:-


  1. As usual Login to your blogger account.
  2. Just Check in Comment Link
  3. There you can see 3 link Published, Moderate and Spam and you just check them out. Now find spam comment and vulgure comment and delelte them. 
Note: Mostly the comments you find in spam box are spam but sometimes they can not be spam.

Thank you.
Read More »

Tuesday, October 14, 2014

Add Google Fonts into Blog

web fonts/ custom fonts in blogger
Millions of blogs are in internet and most of them use default fonts but if you want to make your blog different and take visitors into your blogs, then you should keep something extra in your minds and should think how to make your blog's look different than others. You should take various things to change your blogs. Among them, Use of custom fonts can be one.

The only best way to use web-fonts/custom fonts into a blog is using of google web fonts but this is not last way. There are various web-fonts sites but google fonts are mostly used.

How to add web fonts/ custom font into a blogger blog?



1st Step: Choose a font From google webfonts. Too find, just go to www.google.com/webfonts. You can see almost 650 more fonts in the collection of google web fonts.
Picture 1

Picture 2


2nd Step:  Now hit on quick use tab and just shown in the above picture. Then you will see like the second pic where you will see following two lines' code.

Line 1 code: It is the link of google web fonts which you are going to use.
--------------------------------------------------------------------------
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Line 2 code: It is the integration of css into your webpage.
--------------------------------------------------------------------------
font-family: 'Open Sans', sans-serif;
3rd Step: Now just copy the line 1 code. And then go to your blogger dashboard. Click on template>>edit html. Just below the <head> tag paste this code.
Picture 3

4th Step: Then copy line 2 and paste it into every tag where you want to put this font. Such as
h3.post-title
{
font-family: 'Open Sans', sans-serif;
 }
Picture 4

5th Step: Now you just press on Save Template button.
Read More »

Friday, September 26, 2014

Script Hosting in Google Drive

Script hosting in google drive
Hosting and choosing hosting of a site is too important. Likewise script hosting for a site is also important. If you want to use any script in the blogs and sites, then you should either write those script into the blogger template and site's template or you also can host your script into other platform. But if you want to host, then you need memory or space for which you should pay. But here I just wanna tell you a simple and free way to host any script.

You may not know that you can host script freely in Google drive. And this platform is not only easy and free way but also very flexible and hosting in Google drive makes your site faster than hosting in other platforms.

How to Host Script into Google Drive?


Learn step by step way to host script into Google Drive:-
Step 01: Login into Google Drive.
Step 02: Click on Create>>Script.
Step 03: Write your script in there.
Step 04: Click on run whether it is ready to use or not.
Step 05: Finally click on Publish.

After clicking publish, there you can get web app URL. That URL you can use in your blogs and sites. If any error occurs, just contact us. Thank you. 
Read More »

Monday, September 15, 2014

Meta Description in a Blogger Blog

Many bloggers do not know how to add meta description in the blogger blog but it is not the aspect that you should worry. Because blogger has already made a search description box to add meta description into your blogger blog. But it is disabled in default by the blogger. You should just enable it and put description on your all the posts. Lets just see the below process to enable the blogger meta description and put the description each post.
Meta Description not shown
Before Enable Meta Description

How to Put Search Description in Blogger Blog?



How to enable meta description on blogger

Step 01: Go into your blogger account and select one of your blogger in which you should want to put meta description.
Step 02: Now click on Setting >> Search Preference. Then click on edit link of meta tags. and then choose Enable search engine description? 'yes'. 
Step 03: Save it. 

Now you will be able to put search description in your each posts.
Enabled meta description in blogger


  
Read More »

Sunday, September 07, 2014

Add Customized URL on Every Blog Post

Custom Blogger post url
By the way, in earlier, blogger used to generate posts URL automatically, but now it generates automatically as well as gives you to choose your custom URL. There would usually be post's title long and which could possible to be broken. So that type of broken link can be unfriendly for Google search engine and other search engines. This kind of problems would occur in earlier but now you have been provided an option where you can choose your own URL structure. This option has been very useful for niche blogger. Here is the process that you can apply to customize your post URL.

How to add custom URL on blogger posts?


Step 1: Log in to your blogger
Step 2: Create a new post
Step 3: Write some articles and there you see right side bar name post setting. You just click custom permalink.
Step 4: Put you own URL structure. And click on done.
Step 5: Publish it.

You've perfectly customized your blog posts URL. Now you can see your URL in the URL bar of your post article. 

Read More »

Monday, August 25, 2014

Add a Gadget Above the Blogger Header

Ads above the blogger header
Here I got another way to increase the CTR of your adsense ads. If you are getting fraustrated with low CTR on your adsense, then I got another way to get high CTR. Its a tips to put adsense ads above the header part. It is very effective method which obviously does because most of the people whom I know used this method and they get more money from adsense. So just put your ads above the header and get more money.
But blogger does not let you to add anything above the header defaultly. Blogger locks the gadget not to add any other thing above the header. So you have to unlock that gadget and put the quantity of gadget how many you want to add.

Note: After adding this gadget you can also put your adsense ads in that gadget to increase CTR.

How to add Gadget Above the Blogger Header


Here I tell you step wise to add the gadget above the blogger header

Step 1: Just log in into your blogger dashboard
Step 2: Once your get logged into, then go to the template and then click on edit html.
Step 3: Now just find below code
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'>
Step 4: Then change the maxwidgets="1" into maxwidgets="4" and showaddelement="yes"

Step 5: Click on Save template to save your changes. 

Now you will be able to add gadget just above the blogger header. To add gadget, just go to layout and there you will see gadget section just above the header. 

Read More »

Monday, August 18, 2014

CSS 3 Mega Menu For Blogger

CSS stands for Cascading Sheet Style. CSS gives the style to the HTML tags. In earlier phase of web, there had not been developed the CSS 3. Now CSS 3 has reduced the long and vague and more difficult codes of javascript and jquery. CSS 3 is the latest version of CSS.

By the way making mega menu using jquery and javascript is very hard to understand. Most of the designers just copy and paste to use the mega menu. But using CSS 3 is very easy to make mega menu. Here I am just showing tips to create mega menu using CSS 3. Follow the bellow steps and make a mega menu for your blogger and your html/css website.
CSS 3 mega menu

How to make mega menu using CSS 3?

Step 1: Open any platform like Notepad or Dreamweaver.
Step 2: Put the below code into the middle of <style> </style>.
.main_menu{ background:#006;}
.main_menu ul li a{ font-size:15px; font-weight:bold; text-transform:uppercase; color:#fff; padding-right:25px !important; padding-left:25px !important;}
.main_menu ul li a:hover{ background: #008821;}
a.focus{ background:#008821;}
/*mega menu*/
#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
/*
#menu {
   margin: 20px 0px 0px 0px;
    border: 1px solid rgba(85, 78, 27, 0.25);
 background-color: #033;
    background-image: linear-gradient(#444, #111);
  border-radius: 6px;
  box-shadow: 0 1px 1px #777;
}
*/
#menu:before,
#menu:after {
    content: "";
    display: table;
}
#menu:after {
    clear: both;
}
#menu {
    zoom:1;
}
#menu li {
    float: left;
/*    border-right: 1px solid #777;
*//*    box-shadow: 1px 0 0 #444;
*/    position: relative;
}
#menu a {
    float: left;
    padding: 12px 30px;
    color: #fff;
    text-transform: uppercase;
    font: bold 14px Arial, Helvetica;
    text-decoration: none;
/*    text-shadow: 0 1px 0 #000;
*/}
#menu li:hover > a {
    color: #fff;
}
*html #menu li a:hover { /* IE6 only */
    color: #fff;
}
#menu ul {
z-index:999 !important;
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 1;  
background:#006 !important;
/*    background: #033 !important;
*/ /*background: linear-gradient(#444, #111);
*/
/*   box-shadow: 0 -1px 0 rgba(255,255,255,.3);
*/    border-radius: 3px;
    transition: all .4s ease-in-out;
}
#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}
#menu ul ul {
    top: 0;
    left: 130px;
    margin: 0 0 0 20px;
    _margin: 0; /*IE6 only*/
/*    box-shadow: -1px 0 0 # FFF;    
*/}
#menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
/*    box-shadow: 0 1px 0 #777, 0 2px 0 #999;
*/}
#menu ul li:last-child {
    box-shadow: none;  
}
#menu ul a {  
    padding: 10px;
    min-width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}
#menu ul a:hover {
/*    background-color: #0186ba;
*//*    background-image: linear-gradient(#04acec, #0186ba);
*/}
#menu ul li:first-child > a {
/*    border-radius: 3px 3px 0 0;
*/}
#menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
/*    border-bottom: 6px solid #444;
*/}
#menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid  #066;
}
#menu ul li:first-child a:hover:after {
/*    border-bottom-color: #04acec;
*/}
#menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent;
}
#menu ul li:last-child > a {
    border-radius: 0 0 3px 3px;
}
/*mega menu*/
#menu-trigger { /* Hide it initially */
    display: none;
}
/*End Mega Menu*/
Step 3: Now use the below code into the <body> </body> tag.
<ul id="menu" class="main_menu">
<li><a href="#" class="focus">Home</a></li>
<li><a href="#">Nepal</a>
<ul>
<li><a href="#">Trekking</a>
<ul>
<li><a href="#">Everest Base Camp Trek</a></li>
<li><a href="#">Everest Circuit Trek</a></li>
<li><a href="#">Annapurna Base Camp Trek</a></li>
<li><a href="#">Annapurna Circuit Trek</a></li>
<li><a href="#">Langtang Trek</a></li>
<li><a href="#">Ghorepani Trek</a></li>
</ul>
</li>
<li><a href="#">Tours</a>
<ul>
<li><a href="#">Kathmandu Nagarkot Tour</a></li>
<li><a href="#">Lumbini Pilgrimage Tour</a></li>
<li><a href="#">Kathmandu Pokhara Tour</a></li>
<li><a href="#">Kathmandu Heritage Tour</a></li>
</ul>
</li>
<li><a href="#">Adventure Activities</a>
<ul>
<li><a href="#">Paragliding in Pokhara</a></li>
<li><a href="#">Bungee Jumping</a></li>
<li><a href="#">River Rafting</a>
<ul>
<li><a href="#">Trishuli River Rafting</a></li>
<li><a href="#">Kaligandaki River Rafting</a></li>
<li><a href="#">Marshyandi River Rafting</a></li>
<li><a href="#">Karnali River Rafting</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tibet</a>
<ul>
<li><a href="#">Mount Kailash Tour</a></li>
<li><a href="#">Kathmandu Lhasa Tour</a></li>
<li><a href="#">Tibet Overland Tour</a></li>
</ul>
</li>
<li><a href="#">Bhutan</a>
<ul>
<li><a href="#">Duk Path Trek</a></li>
<li><a href="#">Chomolari Trek</a></li>
<li><a href="#">Bhutan Tour</a></li>
</ul>
</li>
<li><a href="#">India</a>
<ul>
<li><a href="#">Taj Mahal Tour</a></li>
<li><a href="#">Darjeeling Sikkim Tour</a></li>
<li><a href="#">Ladakh tour</a></li>
<li><a href="#">India Gate Tour</a></li>
</ul>
</li>
<li><a href="#">Private Day Tours</a>
<ul>
<li><a href="#">Go For Nepal One Day Private Tour</a></li>
<li><a href="#">Kathmandu Heritage One Day Tour</a></li>
<li><a href="#">Nagarjun One Day Hiking</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
</ul>
Step 4: Now Save it.

The above code can be also used into blogger. You can also use this code to create mega menu for your blogger. So use this code into your blogger. Please contact us if any problems occur during this process.
Read More »

Thursday, August 07, 2014

Related Posts Widget for Blogger Without Thumbnail

related posts widget
More internal links on a webpage is important in the sense of SEO because when a visitors get into a page of your sites, then he/she will see there more links and click them. Sometimes they don't want to click but unwantedly they click. So that your site gets more hits and more hits might be a cause to improve your page rank high in the search engine. If your site has high page rank, then your site obviously gets more impression and visitors.  But blogger blog doesnot have default related posts widget. So you have to add the related posts widget manually. please follow the following steps to add a simple related posts widget in your blogger blog without thumbnails.





How to Add a Related Posts Widget in Blogger Without Thumbnail?


Related post widget
Sketch of related posts 
Step 1: Just sign in into your blogger account. Go to template>>edit html.
Step 2: Find the </head> tag
Step 3: Put the following code just before the </head> tag.
<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
    margin: 10px 5px;
padding:5px 5px;
}
#related-posts h2 {
    font-size: 18px;
    color: black;
    margin-bottom: 15px;
}
#related-posts a {
    font-size: 14px;
    color: #999;
    text-transform: capitalize;
}
#related-posts a:hover {
    text-decoration: underline;
    color: #555;
}
#related-posts ul {
    list-style-type: none;
    margin: 0 0 0px 0;
    padding: 5px;
}
#related-posts ul {
    list-style-type: none;
    background: #e9e9e9;
    border-left: 6px solid #e2e2e2;
}
#related-posts li {
    padding: 12px;
     border-bottom: 2px dotted #E2E2E2;
}
#related-posts li:hover {
    background: #F4F4F4;
font-weight:bold;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
</b:if>
You can change all the above css code as your wish.

Step 4: Search the below code
div class='post-footer'>
Step 5: Now put the give codes before the above code.
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 10px; color: #bcbcbc; float: right;" href="http://allblogsolution.blogspot.com" rel="nofollow" >Get Related Post widget</a></div></b:if>   
Step 6: Now save template.

You did it. You also can change the maxresults=6 into any parameters as your wish.
Thank you. Comment us for any problems.
Read More »

Wednesday, August 06, 2014

Add Pager Link in Blogger

Page Navigation Button Link
We can display our no of posts in our blogger blog but displaying all the post can not be effective, this can be unprofessional. So often we display 6 to 12 posts in our blogger home page. But after exceeding the posts that we are displaying in our home page, there appears old and new posts link. You should click either new or old posts link to see the older or newer posts. To reach in the first posts of your blog, you should click on old link more times until your reach there. This seems so uneffective. So that page naviagation bar can be effective way to find the older and newer posts of your blog. So that now here I am going to just tell you to add pager in your blog for effectiveness of your blog. And your visitors can navigate quickly in the old posts too.

Follow the given steps to add the pager in your blogger :-

How to add pager in blogger


Step One:
First of all login to your blogger dashboard and click on template>>edit html.

Step Two:
Now just find the below code:
]]></b:skin>
Step Three:
After finding the above code, paste the given code just above them.
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: grey;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 15px;padding: 6px 14px;margin-right:4px; color: #777; background-color:#999;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#369Bde;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#369Bde;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:black;} 
Step Four:
Now you should add the script in your blog. To add the script find the </body> tag.

Step Five:
Now just paste the given code before the </body> tag.
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=6;
    var numPages=4;
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>
You did it. Now the thing you should remember is that you can also change the perPage=6; as your wish into 6,7 etc. numPages=4; into 5,9,7 etc as your wish.  
Read More »

Follow Us On Facebook

Blogger Widgets