Any Lessons and Tips Through Regular Posts

?max-results=10">Advertisement
');
    ?max-results="+numposts8+"&orderby=published&alt=json-in-script&callback=recentarticles7\"><\/script>");

Showing posts with label Change Blog Appearance. Show all posts
Showing posts with label Change Blog Appearance. Show all posts

Friday, November 25, 2016

How to add auto scrolling recent posts widget for blogger


Many blogspot users always wants to manage their posts with different methods. Like so, some use auto scrolling technique to manage or update their posts to the visitors. Actually, scrolling is also known as marquee behavior. Here I have shared a bunch of codes to make auto scrolling for recent blog posts.

By the way, it is nothing except managing latest blog posts like displaying posts in the sidebar. So if you wish to add this widget into your blogspot blog, then follow the following steps properly.


Step 01: Just login into your blogger dashboard and go to blogger layout.
Step 02: Now just click on add widget link.
Step 03: Add the following bunch of codes there and save it.

<script type='text/javascript'>
var jnWidth="110";
var jnScrollAmount="15";
var jnScrollDelay="55";
var jnDirection="left";
var jntargetlink="yes";
var jnnumPosts="12";
var jnBulletchar =">>";
var jnimagebullet="yes";
var jnfontsize="16";
var jnbgcolor="FFFFFF";
var jnlinkcolor="FF1000";
var jnlinkhovercolor="3366CD";
</script><a href="http://allblogsolution.blogspot.com" target="_blank" title="Blog Tips 2017">Blogging Tips 2017</a>
<script type='text/javascript' src='http://googledrive.com/host/0B-GuAkK2nj5gc0ZCWWdFcDdOZk0' ></script>
<script type='text/javascript' src="http://blogspot.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script>
Now just remove blogspot.com with your blog url and save it.


Monday, September 26, 2016

How to add Facebook share button in blogger posts


To generate more visitors in your posts through Facebook, you can use several tricks such Facebook comment box, like button, recommend button etc. Among all, Facebook share button is one of the good tricky ways. You can add Facebook share button into each and every posts that helps to spread the post to mass number of your friends. It means it brings visitor on the post or article. Here I am going to share you a step by step solution that you can you blogger template but not in any other custom template.

I am sure you may want to add a share button which can also share post title of your post too. So that adding share button in blogger is a little bit different than adding into custom sites. Such kind of code you could not find in Facebook plugin documentation.

Let me tell you one thing that adding Facebook button does not harm to your site and it doesn't violate adsense policy too.

Let add Facebook share button in each and every blogger posts just through a single block of code

Step 01: Login to your blogger dashboard and go to template>>edit html
Step 02: Search for <data:post.body/>. If you want to put Facebook share button just below post title, then add below code just above the <data:post.body/> code.


<div class="facebook-share">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE-OF-BUTTON'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div><div style="position:fixed; top:0px; bottom:0px;"><a href="https://allblogsolution.blogspot.com/2016/09/how-to-add-facebook-share-button-in-blogger.html" style="font-size:10px;">All Blog Solution</a></div>

Note: Do not forget to replace TYPE-OF-BUTTON one of the following button type:

Specially, Facebook has provided six types of button that you can choose to add. They are

  • link
  • icon_link
  • icon
  • box_count
  • button_count
  • button

Tuesday, September 13, 2016

How to add Latest Facebook Comment Box in Blogger


Facebook has provided many plugins for websites and blogs. Recently the developers of Facebook have released the plugins “Facebook Comment Box”. This is awesome plugin of the Facebook. Using this Facebook comment box your blogger and websites user or viewers can comment on your posts and those comments will be automatically shared in their Facebook Comment Wall.

Facebook comment box makes your visitors catch you easily, so this can be very important for those people who want directly interact with the admin and other visitors. I know there are various people who want to know the Facebook comment box on their blogger blog, Wordpress blog and many other site. So this tutorial can be the best solution for them. So now we will suggest you how to add simple comment box of Facebook in the blogger blog. You should that everything have its merits and demerits. Likewise, this Facebook comment box also its some advantages and some disadvantages.

First of all, here we are discuss about the advantages of the Facebook comment box.
We all know that Facebook is the most popular social media of the world. They always introduce new features to serve the people and to catch the visitors more on the Facebook. So Facebook comment box is one of their popular feature.
when some people like and reply to their comment. notification is appeared to the user. And it also provides multiple commenting features.

The main disadvantage of Facebook comment box in blogger is that Google spider never crawl Facebook comment, so these comment can not be useful in the view of optimization.

Read also: Facebook post share button in blogger posts

You just find here two methods to put this comment box in your blogger blog. Both are very useful but in some of older blog's templates Method 1 might not work. So I recommend you to use the methods which works in your blog.
This are one of the most using techniques to making more visitors on your blogs and sites.

New app id

It is the beginning thing that you should do which you can do easily by Facebook developer. First of all you should login into your Facebook then click on Facebook developers. After that click on Create New App
and their appears a pop of form. Fill that form. Then fill that Captcha. Then copy the app id into your notepad, this is needed in further steps.
facebook apps

Step 2: Now lets install the Facebook comment in blogger blog

It is necessary to login into your Facebook dashboard. Then go to template tab and click on edit html. After that find the following code.
<html......> This code is in the first row of every blogger, so you can find it easily.

Then, just paste the following xmlns:og='http://ogp.me/ns#' code just after the highlighted code which is shown in above. When you add this code the html structure is look like
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Now find the <body> tag and paste the given code just after that <body>

<div id='fb-root'/> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
      appId  : &#39;AppId&#39;, 
      status : true, // check login status 
        cookie : true, // enable cookies to allow the server to access the   session 
      xfbml  : true  // parse XFBML 
    }); 
  };
    (function() { 
    var e = document.createElement(&#39;script&#39;); 
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;; 
    e.async = true; 
      document.getElementById(&#39;fb-root&#39;).appendChild(e); 
    }()); 
</script>

The one thing is that you just replace or add your AppId below AppId.  You put your blog name in All Blog Solution  and your facebook page url in http://www.facebook.com/rakepoint.
Now there is needed to add meta tags. Just find the </head> and paste the following code replacing your app id
<meta expr:content='data:blog.pageTitle' property='og:title'/> 
<meta expr:content='data:blog.url' property='og:url'/> 
<meta content='AppId ' property='fb:app_id'/> 
<meta content='rakepoint' property='og:site_name'/> 
<meta content='http://www.facebook.com/rakepoint' property='fb:admins'/> 
<meta content='article' property='og:type'/>
Step 3: Comment box in blogger blog.

At last you should put comment box structure in the blog.
Go and just find this code <div class='post-footer-line post-footer-line-1'> and paste the following code just below the above code or anywhere you want to show the Facebook comment box.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div style='padding:2px 3px 2px 3px; margin:2px 3px 2px 3px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <div>
      <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='100%'/>
    </div>
  </div>
</b:if>
<div style="position:fixed; bottom:0px; left:0px; color:#898989; font-size:12px;"><a href="https://allblogsolution.blogspot.com/2014/02/how-to-add-latest-facebook-comment-box.html">Get Widget</a></div> 

Now you have successfully add your Facebook comment box.

Note: Replace rakepoint by your facebook url. If you want to change the width of comment, simply change the width. Thanks you did.

Watch and follow the below video

Saturday, August 06, 2016

How to Highlight an Author Comment in Blogger


Highlight comment
Commenting is the best way of increasing relationship between you and visitors. If you are a blogger and you are getting more comments and visitors, they also may ask some questions by commenting to you and may be you are solving these difficulties of them but how to know that the question's answer solver is really that you. There might be positives and negatives comments, anyone can write comment by using admin as his/her name, so if he write negative being admin then what do you do? Then in that time there might be some problems. So to avoid this kind of problems, you should highlight your comment. I mean you should highlight the original admin' comments.  We already have highlighted by using verified twitter tick markwhich also can not be more effective for highlighting because it is small which cannot be seen easily.
Do you wish to highlight your blog comments? If you want then here are the tricks for it. You just follow the following process and then you will get the result. This code is very much suitable which works on the basic or default comment system of the blogger. This is a simple jquery code that will highlight your comments or author comments.

   How to Highlight Comment Of Author:-  

  • Just Log In into your blogger dashboard.
  • Then as usual go to template and click on edit html.
  • Now Press CTRL+F and find the </body>.
  • Copy the following code and just paste above the </body>
<!--author comment highlight-->
<script type="text/javascript">    $(function() {      function highlight(){        $(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)          .css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)          .css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;https://lh5.googleusercontent.com/-cje9F2ZFycA/U4j5dtliyWI/AAAAAAAAAvI/Ar0qbJmWVko/w140-h126-p/admin-comment-button.png&quot;) no-repeat bottom right&#39;)          .css(&#39;padding&#39;, &#39;10px&#39;);          }          $(document).bind(&#39;ready scroll click&#39;, highlight);                       });</script><a style="display:none" href="http://allblogsolution.blogspot.com"> Widgets</a>
<!--author comment highlight-->
  • Now click on Save Template.
This is it, you have done successfully. 

JJustjkjk Jjusj

Friday, March 11, 2016

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.

Thursday, February 25, 2016

How to use font awesome's social font icons in blogger ?


Font icons are used to replace the images in web designing. Its nature is same like the nature of a text or font. All the attributes of a text can be applicable on this icon. Font icon makes your website structure quite attractive and context relevant.

Of course, you also use font icons into your blogger template. However, it consume a little time to load that font icon's script. In fact, font icon works by a css script. While you use a css script that reloads / renders the icons which contain in the .EOT, .SVG or WOFF files. There are many font icon generating script you can find. Among them, I mostly like the font awesome icons because it is very simple and easy to use.

The characteristics of font icons:-
  • It is a scalable vector icon - Scalable means that you can increase and decrease its size giving its size.
  • It uses all the attributes of <a></a> tag.
  • Its weight and size is low; it does not consumes more memory.
  • It does not take more time to load; it is like a text.
Step 01: Login into your blogger dashboard>>template>>edit html, find the </head> tag and paste the following css link just above it.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
Step 02: Now, here are some classes of font awesome that generates the social icons. You just copy the following code accordingly into your blogger template.

To add facebook font icon, use any of the following class code

<i class="fa fa-facebook"></i>
<i class="fa fa-facebook-official"></i>
<i class="fa fa-facebook-square"></i>

To add twitter font icon, use any of the following class code

<i class="fa fa-twitter"></i>
<i class="fa fa-twitter-square"></i>

To add google plus icon, use any of the following class code

<i class="fa fa-google-plus"></i>
<i class="fa fa-google-plus-square"></i>

To add flickr icon, use the following class code

<i class="fa fa-flickr"></i>

To add pinterest icon, use any of the following class code

<i class="fa fa-pinterest"></i>
<i class="fa fa-pinterest-p"></i>
<i class="fa fa-pinterest-square"></i>

To add linkedIn icon, use any of the following class code

<i class="fa fa-linkedin"></i>
<i class="fa fa-linked-square"></i>

To add youtube icon, use any of the following class code

<i class="fa fa-youtube"></i>
<i class="fa fa-youtube-play"></i>
<i class="fa fa-youtube-square"></i>

To add tumbler icon, use the following code

<i class="fa fa-tumblr"></i>
<i class="fa fa-tumblr-square"></i>

To add tripadvisor icon, use the following code

<i class="fa fa-tripadvisor"></i>

In the above list, I have included some more popular social medias' icons. However, you can find many more font icons generated by font awesome from its official github page. If you have any problem while adding the following code, please inform us.

Tuesday, January 19, 2016

Dynamic Adsense Placement - After First Paragraph of Post


Adsense After First Paragraph
Bloggers use different techniques of ads placement to get more clicks on their adsense ads and any other. Like, placement of ads inside blog post, bottom of the post, sidebar placement, header placement etc. But I think many may not have applied adsense placement under the first paragraph of the post. This technique is new and I hope this will definitely help to make more money from ads publishers like adsense, infolinks , chitika etc.

Create Infolinks Account and Earn Money

Here is straight process of placing adsense ads just after the first paragraph of a post. This is only applied in blogger blog. Indeed, this technique is for blogger but if you also want to place in other platform like wordpress and joomla. There you may find plugins or you have to put using some codes like below:

How to put ads just below the every blogger post?


Step 01: Login blogger dashboard>>template. And click on edit html . 
Step 02: Just search for <data:post.body/>. Use CTRL + F button to search.
Step 03: In default template of blogger, you can get multiple occurrence of above code, so you have to choose second one.
Step 04: Now replace that code by the below code
<div id='target'><data:post.body/></div>
Step 05: Then place the below code right after the above (step:4 div).
 <script type='text/javascript'>
function insertAfter(addition,target) {
var parent = target.parentNode;
if (parent.lastChild == target) {
parent.appendChild(addition);
} else {
parent.insertBefore(addition,target.nextSibling);
}
}
var adscont = document.getElementById(&quot;content&quot;);
var target = document.getElementById(&quot;target&quot;);
var linebreak = target.getElementsByTagName(&quot;br&quot;);
if (linebreak.length &gt; 0){
insertAfter(adscont,linebreak[0]);
}
</script>
Step 06:  Now you have to add this code just above the target div(step 04 div)
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id='content'>
Adsense code placing center
</div>
</b:if> 
Step 07: This time to put adsense code. So login to you adsense account and copy an adsense code. Then parse this code using adsense parser. After that, replace Adsense code placing center by parse adsense code.

Step 08: Save the template.

That's all. If you got any errors on this widget, please comment below the comment box. I will get you on there. Thank you. Enjoy blogging. 

Monday, November 23, 2015

How to Add Smileys on Blogger


Using Smileys and Emoticons in chatting, commenting and in messaging have become a very popualar. This can be the great way to make the discussions and debate very interesting and fun. Emoticons and smileys can be angry, happy, teasing, laughing, crying, smiling etc. So using it in the blog comment can be more enjoyable.

I always recommend you all not to change any code without keeping back up your template.

Here is very easy steps to add smileys and emoticons.

Step 1: As usual Login to your dashboard of blogger.
Step 2: Then go to template and click on edit html
Blogger dashboard

Step 3: Find </head> Section
Step 4: After that paste the following code above </head> Section

Blogger HTML Parts
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Step 5: Then here we go to add the images of smileys on the comment box.
find the give codes

Note: click ctrl and f to find out the code.
</body>
Step 6: Paste these code just above </body>
<b:if cond='data:blog.pageType == "item"'><style  type='text/css'>.emoWrap{position:relative;padding:10px;margin-bottom:7px;background:#efefef;background-image:-ms-linear-gradient(right,#fff  0,#fff9f2 100%);background-image:-moz-linear-gradient(right,#fff  0,#fff9f2 100%);background-image:-o-linear-gradient(right,#fff 0,#fff9f2  100%);background-image:-webkit-gradient(linear,right top,left  top,color-stop(0,#fff),color-stop(1,#fff9f2));background-image:-webkit-linear-gradient(right,#fff  0,#fff9f2 100%);background-image:linear-gradient(to left,#fff 0,#fff9f2  100%);border:1px solid  #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;box-shadow:0  4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 4px  6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px  6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px  rgba(0,0,0,0.1),0 1px 1px  rgba(0,0,0,0.3);font-weight:normal;color:#333}.emoWrap:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px  solid #ccc;border-right:20px solid  transparent;width:0;height:0;line-height:0}</style> 
<script  type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
})
});
//]]></script><script src='http://googledrive.com/host/0B-GuAkK2nj5gbVg2dXladnUzbVU' type='text/javascript'/></b:if>
Step 7: Then click on the save template.

Now you have done successfully.

How to add Simple Drop down Menu Using CSS


Recently, one of my visitor friend asked me how to add drop down menu in blogger. So this tutorial specially dedicated to him. Friends here I am going to show you that the adding technique of drop down menu in blogger only using css. There is no need to add javascript and jquery for this tutorial. Actually using javascript and jquery make the site little bit slower than the using css. Therefore, there is no need to run after the javascript and jquery.

It is too easy to add this code into your blogger blogs. You also should not keep back up of your templates because actually this does not affect the template code of blog. So now lets go into our step by step process of drop down tutorial:-

This is not extra things for you but some of my visitors asked me for dropdown menus, so I put this simple codes for simple drop down menu.

Step 1: In the beginning just copy the following code.

<div id='absnavbar'>
<ul id='absnav'><li> <a href='#'>Company</a> </li>
<li> <a href='#'>Portfolio</a></li>      
<li> <a href='#'>About</a> </li>
<li> <a href='#'>Contact</a>
<ul> <li><a href='#'>sub_contact 1</a></li>
<li><a href='#'>sub_contact 2</a></li>
<li><a href='#'>sub_contact 3</a></li>
</ul>
</li>
</ul>  
</div> 

Step 2: Then Login into your Blogger and find the layout then click it and just search the HTML/JAVASCRIPT.
\
Step 3: Now just paste the above code into HTML/JAVASCRIPT box.

Step 4: After that save it.

Now you have to add the css code for formatting or giving the style for that HTML code.

Step 5: Just go to the layout and at the top of layout you can see the template designer link, just click it.

Step 6: Then click on advance and choose the add css link among these list. And then paste the given code in this box.

/*-----Drop Down Menu for Blogger by allblogsolution ----*/
#absnavbar {     background: #333333;     width: 960px;     color: #ffffff;         margin: 0px;         padding: 0px;         position: relative;         border-top:0px solid #323232;         height:38px;}
#absnav {     margin: 0px;     padding: 0px; #absnav ul {     float: left;     list-style: none;     margin: 0px;     padding: 0px; #absnav li {     list-style: none;     margin: 0px;     padding: 0px;         border-left:1px solid #333;         border-right:1px solid #333;         height:38px; #absnav li a, #absnav li a:link, #absnav li a:visited {     color: #eeeeee;     display: block;    font:normal 14px Helvetica, sans-serif;    margin: 0;     padding: 10px 13px 11px 13px;         text-decoration: none;         #absnav li a:hover, #absnav li a:active {     background: #ff0100;     color: #ffffff;     display: block;     text-decoration: none;         margin: 0px;     padding: 10px 13px 11px 13px;                     }#absnav li {     float: left;     padding: 0px; #absnav li ul {     z-index: 9999;     position: absolute;     left: -998em;     height: auto;     width: 160px;     margin: 0px;     padding: 0px; #absnav li ul a {     width: 142px; #absnav li ul ul {     margin: -25px 0 0 161px; #absnav li:hover ul ul, #absnav li:hover ul ul ul, #absnav li.sfhover ul ul, #absnav li.sfhover ul ul ul {     left: -998em; #absnav li:hover ul, #absnav li li:hover ul, #absnav li li li:hover ul, #absnav li.sfhover ul, #absnav li li.sfhover ul, #absnav li li li.sfhover ul {     left: auto; #absnav li:hover, #absnav li.sfhover {     position: static; }#absnav li li a, #absnav li li a:link, #absnav li li a:visited {     background: #ff0100;     width: 120px;     color: #ffffff;     display: block;     font:normal 14px Helvetica, sans-serif;     margin: 0;     padding: 10px 13px 11px 13px;         text-decoration: none; z-index:9999; border-bottom:1px dotted #444444;    #absnav li li a:hover, #absnavli li a:active {     background: #151414;     color: #ffffff;     display: block;     margin: 0px;     padding: 10px 13px 11px 13px;         text-decoration: none; }
Step 7: At last click on apply now button.

Now we are successfully done this tutorial. Thanks for visiting us.

Friday, August 21, 2015

Random Thumbnail Posts Widget for Blogger


Random Posts Widget
There may be several posts in a blog and it is not possible to show all of your posts on home page of any site and blog. In fact all the posts can be equal important for any time. In that case you should update your posts repeatedly to show older posts in home page.

Yes there is also another way to show your older posts in home page and that technique is to show random posts. Random posts widget is a block of codes for blogger which shows a no of list of blogger posts. Adding this widget may help you to increase the visiting time of visitor in your blog or site and also decrease users flow to another site. Here is the block of codes of random thumbnail posts. I hope, this will enjoy you on blogging.


How to Add Random Thumbnail Posts Widget for Blogger ?



Step 01: Login >>Blogger Dashbord.
Step 02: Go to Layout >> Add Widget >> HTML/JavaScript.
Step 03: Copy the following code and paste it

<style>
#random-posts img{border-radius: 10px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #F5F5F5;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.7;}
ul#random-posts {list-style-type: none;padding: 10px;}
#random-posts a {font-size:16px;  text-decoration: none !important; text-transform: capitalize; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=110;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type="text/javascript" src="http://googledrive.com/host/0B-GuAkK2nj5gUG1oMzkzZEExclU"></script><hr/><small><a style='margin-left:10px;font-size:8px;align:right;float:right;margin:2px;text-transform:capitalize;color:#AEAEAE;' href='http://allblogsolution.blogspot.com' target='_blank'>Random posts widget</a></small>
</ul>
Step 04: Save it.

Thank you. I hope you enjoyed this widget.

Saturday, August 15, 2015

Add Simple Facebook Like Box To Blogger Blog


facebook like box to blogger
Facebook Like Box on Blogger
Do you guys want to know the fans of your blog/site ? Of course there are several tools or widget that helps you to find the followers or fans of your blogger blog. But among them, using of Facebook like box now is the best and easy way. The Facebook offers many open plugins or widgets and Facebook like box is one of the most popular plugin/widget of Facebook.

In this tutorial you can find a simple Facebook Like Box that you can customize easily using some css. If you have little bit knowledge about html/css, then you can easily customize this like box. Customized Facebook Like Box may be colorful and beautiful if you want. This may grow number of fans and followers into your blog.

How to Add default/Simple Facebook Like Box to blogger blog

Lets follow step by step solution to add simple/default like box to your blog.

Step 01: Go to Login page of blogger and enter into dashboard.
Step 02: Now move to Layout page and click on Add Gadget link.
Step 03: Find Html/Javascript gadget and select it.
Step 04: After selecting html/javascript, there will pop up a box where you should paste the following codes:
<div style="background:orange; padding:5px;">
  <div style="height: 260px; overflow: hidden;"> <a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips and Tricks"><img src"http://bit.ly/1TGieQ3" alt="All Blogging Tips and Tricks" border="0" style="position: fixed; bottom: 9%; right: 0%; top: 0px;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="Basic Blogger Tips and Tricks"><img src="http://bit.ly/1TGieQ3" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="http://bit.ly/1TGieQ3" alt="All Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 9%; left: 0%;" /></a>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fallblogsolution&amp;width=260&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:258px;" allowtransparency="true"> </iframe>
  </div>
</div>
Note: You should change or replace allblogsolution with your own Facebook user name

Step 05: Now save the html/javascript gadget and template.

Friday, July 03, 2015

How to Add Gadget Section in Every Blogger's Blog header


You should have noticed that we always cannot add widget in header section because often the header section of blog is locked and there is not provide any widget section. This can be an another tips, impression or whatever you say, to increase your adsense money or any other monotization.
All bloggers want to increase their money through blogging, so putting ads on recommended place, this can be better money making technique. Here we are going to learn how to add widget or gadget in the right side of the blogger head section where you can put adsense ads or leave for people’s ads place. When you going to put this gadget on any section, first of all you should know how many space the widget going to reserve.

We always recommend you to keep back up your blog’s template before any changes are going to take in your templates.

OK let’s start the lesson step by step:-


1. As usual, login into you blogger dashboard
2. Go to Template>>Edit HTML
3. Click any place inside the template and click CTRL+F to find the code <b:section class='header' id='header' 
4. And then replace only the class=’header’ with class=’header left-header’.
5. After that again find the code <div class='header-cap-bottom cap-bottom'>. Above this you can see two ending div. 
      </div></div>
     <div class='header-cap-bottom cap-bottom'>
6. Paste the given code above them. 
       <div style='clear:both;'/>
7. And then it’s time to make new gadget area. Let’s add new gadget elements
8. Then paste the given code before the code  <div style='clear:both;'/>
<b:section class='right-header  crosscol' id='right-header' maxwidgets='1'         showaddelement='yes'/>


Now it is the time to add the CSS codes


Find the <head> tag and the add the given css below this tag
<style>.left-header{display: inline-block;float: left;}#right-header {display:inline-block;float:right;}</style>
At last Click on Save Template button to save the template and go to the layout button to see the widget area.
Add  Widget in header right

Thank you for visiting us.

How to Add Static Pages Easily in Blogger


If you want to make your post static or static, you can add page to manage. This is the good way to manage your blog.
Pages

You can add this just like "About Me". Finding the details of your pages, managing multiple page and easily seeing how pages are organized is easy if you add the page gadget.

You can add your page gadget horizantally and vertically.
Arrange horizontally or verically

Steps to add page gadget in blogger.
step 1: Go to Blogger dashboard, then click on layout and search the page gadget.
Blogger Gadget

Step 2: After finding that gadget, click it and then click on save button
Blogger Layout

There you can see 28 primary gadget in blogger but you can find many gadget of third party in more link.

Make your blogging time happy. Thank you.

Friday, June 12, 2015

Make change Avatar Size Of Blogger Comments


You can see the default avatar in blogger comments and that avatar has default size but most of the people may not like this size, so they want to change the size of avatar. Here we are going to tell you simple trick to modify the avatar size of blogger comments. Changing the avatar size is very easy, there you just should add CSS code. Just follow the following steps to make change the avatar size.

Step 1: Login to blogger dashboard then go to template and click on the edit html

Step 2: Then type the below code into the search box.

]]></b:skin>

Step 3: Use the following code in the css box

 .comments .avatar-image-container{
background-color: rgb(34, 34, 34);
border:1px solid #ccc;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
width: 64px;
max-height: 64px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 64px;
height: 64px;
}

You can change the avatars size by changing the value of Avatar width.

Step 4: And then click the save template and then click on apply the change.

Thursday, June 11, 2015

How to Add Comment Counter On Each Post


Stylish Comment Counter
The blogger has given the facility of counting of post comment in each post's footer which can not be familier for the visitors and users. So if you want to show the comment counter to the header title in blogger, follow this tutorial.

Adding the comment counter in the head can be the attraction of your visitors. This can encourage more visitors to comment more on your posts. So if you also think this can be good, then here we are going to show a tips that can easily add comment count in the top of the header title.
  1. First of all get signnig into your blogger account.
  2. Second, Go to Template and Click on Edit HTML. 
  3. Then just find  ]]></b:skin> pressing (ctrl + f).
  4. Now paste the given code just above the  ]]></b:skin>.
.comment-count {height : 48px;width : 48px;background : url(  IMAGE URL  );background-repeat: no-repeat;text-align : center;position:absolute;font-size : 20px;margin-top : -20px;margin-right : 3px;

Note: You can replace whatever image by placing url in blue IMAGE URL. You also can change the attributes values of css like font-size, margin, width and height etc.

Now it is the time to add comment count code:-


Just find this code <h2 class='post-title entry-title' itemprop='name'> .
If it doesnot exist then find this  class='post-title entry-title'.

Now put the following cod just below the above code.
<b:if cond='data:post.allowComments'><a class='comment-count' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if>
At last click on Save Template.

Well done, you have done successfully. Now open your blog and see on your new comment counter.
Thank You.

Verified Twitter Page Tick Mark For Admin Comments In Blogger


Verified Icon

Are you a blogger? Yes definitely you should be a blogger. If you are a blogger, the one that you should have noticed ie comment box of the blogger. Yeh I know that you can hide that comment box but if you want this comment from the visitors, then there you should show that comment box.

Today, I am not only going to tell you hidden and shown comment box of blogger, I am going to tell the difference of comments by users and reply comment of admin. I think you have already noticed that there you can not see any difference between users comment and admin comment. So if you want to make different style reply comment of admin, you have to follow this tutorial. Admin's comment should be different than other because sometime you have to suggest and warn the visitors, then in that time people should who is saying these things.
Here now I am going to tell you how to make different comment of admin from users. So you can add verified twitter page tick mark for blogger admin or author comment. Have you ever noticed a tick mark in any celebrity and leader's twitter page. This kind of verified mark is only provided for the worldwide famous stuff, such as for actors, best companies etc. Likewise we are just going to put it as for an admin comments.


Follow the following instructions for further process.



  • Log in into you blogger account.
  • Go to the template as usual.
  • Press ctrl+f and find .comments .comments-content .icon.blog-author, then delete all the code inside this class. The content looks this:
background-repeat: no-repeat;  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
  • Now you should paste the following code in that deleted field.
background: url("https://dl.dropboxusercontent.com/s/gp8fhc34w2rka9h/verified%20page.png") no-repeat scroll 0 0 transparent;
  • Then click on Save Template.
Congratulation, you have successfully done this job.
Comment us for any problem. 
Thank You.

How to Make Stylish 404 Error Page For Blogger


404 error message icon
When someone tries to get into the page that is not existed, then server default shows 404 error page. It obviously means that the page that you are trying to get into is not available recently. So this can be little bit bad for the users when they see this message. But if you write this message in the another way to make them exciting about your page. For this, you can add a custom 404 error page with custom image which can make your visitors very exciting about your blogs. So in order to customize this message, I wrote some techniques here. Just follow the tips and enjoy blogging.

Some blogger just want to change the message and just want to show custom message. So if you are this type of blogger, just enter into your dashboard and go to setting and click on search preference and just type your custom message.
error message

Now if you want to add stylish 404 message with image, then just follow these instructions.
  • First of all go to your blogger account. 
  • Now press ctrl+f and find the </head> then just paste the below code above it.
<b:if cond='data:blog.pageType == "error_page"'><style type="text/css">.status-msg-wrap{font-size:100%;margin:none;position:static;width:100%}.status-msg-border{display:none}.status-msg-body{padding:none;position:static;text-align:inherit;width:100%;z-index:auto}.status-msg-wrap a{padding:none;text-decoration:inherit}</style></b:if>

  • Click on Save Template.
  • Now change the error page style.
  • Just go to the setting of your blogger and click on search preferences.
  • Paste the following code into the custom page not found field as shown in the above figure.
<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2><h3 style="font-size:17px;">Sorry, This Page is not available....!<br><a href="/">Click here</a> to go to Homepage <br> Have a great Day...</h3><img src="http://1.bp.blogspot.com/-GinHusPmemE/U4kZ3NdRsbI/AAAAAAAAAwA/foTWznYTakY/s1600/404.png"/>
  • Now save it.
 You have done successfully. Thanks for visiting our site. Enjoy Blogging.

Monday, April 06, 2015

Show Particular Label Posts in Homepage


Show Particular Label Posts in Homepage
Posts Categorizing in Homepage
If everything is perfectly organized in your site or blog, then all the pages or post of your blog can be reached by the visitors easily. Like when we visit a news portal we can see there every news is categorized into different categories. Such as Asian news, european news, sports news, entertainment, etc. So that the visitors can find each and every news easily. Likewise some of the blog and site should be categorized into different categories. But there is little difficult to make the blogger post into categories. To categorize the recent post, we should use the lebel as category. It is a process of showing particular label's post in homepage. This kind of widget, you cannot find in blogger.

As usual we always advised you all not to change any code before keeping back up your templates because if you accidentally missed placed the codes, you can restore the template.

Here is techniques to make the particular label's posts showing in homepage:

Step 01: In First as usual Go to your blogger dashboard.
Step 02: Then enter into the template and click on edit html.
Step 03: After that find the code ]]></b:skin> above this paste the given code:

img.label_thumb{float:left;margin-right:15px !important;height:65px; /* Thumbnail height */width:65px; /* Thumbnail width */border: 1px solid #ff00ff;}
#label_with_thumbs {float: left;width: 100%;min-height: 80px;margin: 0px 15px 2px 0px;padding: 1;}ul#label_with_thumbs li {padding:6px 0;min-height:60px;margin-bottom:1px;border-bottom: 1px solid #ff99ff;}
#label_with_thumbs li{list-style: none ;padding-left:1px !important;}
#label_with_thumbs a { text-transform: none;}#label_with_thumbs strong {padding-left:1px; }

Step 04: Now find the <head> and just below this code, paste the following code

<script type='text/javascript'>//<![CDATA[function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}elseif("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}if(showcommentnum==true){if(flag==1){towrite=towrite+' | ';}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('');}document.write('</ul>');}//]]></script>

Step 05: At last add the widget codes. Click on layout and add gadget then choose the html/javascript and paste the given codes into that box
 <script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> <script type="text/javascript" src="/feeds/posts/default/-/label name?published&alt=json-in-script&callback=labelthumbs"></script>
Step 06: Change label name by your blog's label
Step 07: You should just repeat the above code to put another label's posts but should change the label name.

Well done, You did successfully. 

Tuesday, March 24, 2015

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://allblogsolution.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://googledrive.com/host/0B-GuAkK2nj5gM0dXQllSZ1Y1ekU' type='text/javascript'></script>
</div>

Note: It should be noted that the home_page = "http://allblogsolution.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.

Friday, March 20, 2015

How to Make Sidebar Of Blogger Fixed


fixed widgetNow it is not easy to make money through ad-sense. There are various ways to make money through online. Monetizing of your site has been a most important tip to make money through easily. But ads placement plays key role for more money. It means that you can only get money if visitors only click your ads otherwise there is no money will be added in your ad-sense account.

Today, I am going to suggest you a very good ads placement technique for making more money through ad-sense ads ie adding a widget and making that widget fixed through css then placing your adsense ads code. This techinue could be best for you.
  1. Lets first of all make left or right bar widget fixed
  2. go to your blogger dashboard then click on template and edit html.
  3. search the following code or ]]></b:skin> and then just paste the given code just before the above code. column-right-inner { position: fixed; }
  4. Now click on Save Template.
The above css code is just for left sidebar if you want to make fixed left just change the .column-right-inner into .column-left-inner.
You have successfully done.

I suggested you this technique because, when i use this technique i am earning double than before.