We Are Going to Launch a Website to Offer The Awesome Trips in The Himalaya Soon With Full of Services
Under Construction Site www.TrekGator.com

Sunday, February 22, 2015

CSS 3 Rollover Effect

In the web, when you changes mouse hover on any object, if that object rolls and come back on its original position that is called Rollover effect. You can apply different codes to get this effect like HTML, Javascript etc. Now I will show you rollover effect using CSS3 which is a recent most used web styling method. CSS3 has reduced the Javascript and Jquery coding on webpage and this helps to load your site and blog faster in the web.

How to Make Rollover Effect Using CSS3?


In the beginning, I will suggest you to find on which web object you are going to give rollover effect then just apply the given codes.

.social ul li img
{
     transition:linear 0.4s;
}
The given above code is just for my own object. Here now I am  going to apply rollover effect on social media icons. 'transition' is the attributes of the css3 technology and if you do not know much more about css3 and its coding technique, then you simply can go through css3generator and get css3 codes. Actually, the above code is not compulsory for rollover effect which just give function and duration on a property but the below code is a compulsory code which you must include.
.social ul li img:hover
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);

-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
Note: On the above code, I wrote '.social' which is a class of a particular img attribute. So do not think that you always write this code. You can write whatever class and attribute but one thing that you must be sure is transform property must be included and which value must be 'rotate(360deg)' because if an object rolls, then that must complete a circular form.

The second code says when you do hover on an list (li), then its image will rotate on 360 deg. And there are four different code which do nearly same job on different browser.

This is a demo of Rollover Effect.

Read More »

Friday, February 13, 2015

Responsive Video in Site and Blog

Responsive in every web materials is the trend of current web world. I mean , in the context of web development, responsive site can be called fashion but it also has many advantages. Mobile friendly, user friendly, device friendly and browser friendly are its some advantages. But in order to make a perfect responsive site, your site should have all elements responsive like videos, photos etc. Hence embedding video also should be device friendly, then your site can be called fully responsive.

Now here I am just telling you to make an embedded video responsive. Lets see how we can make any embedded video responsive or device friendly. There is no much difficult to do this. You just follow the following steps. 


How to Make Responsive Youtube Embed Video?


Step 01: In the beginning, you embed any video whose code can be like 
<iframe width="560" height="315" src="https://www.youtube.com/embed/o2Tw-8rF8dI" frameborder="0" allowfullscreen></iframe>
Step 02:  Now add this code <div class="embed-video"> in the above code. Now code becomes like
<div class="embed-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/o2Tw-8rF8dI" frameborder="0" allowfullscreen></iframe>
</div>
Step 03:  After adding a div, now just add the below code any where in the stylsheet
<style type="text/css">
    .embed-video {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .embed-video embed,embed-video object,embed-video iframe   {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

Note: When you go to add any embed video, you will do the same as step 01 and step 03 only. You do not need to repeat step 03. Thank you friends. Any problem, just comment.
Read More »

Thursday, February 12, 2015

How to add Latest Facebook Comment Box in Blogspots or Blogger

There have been many plugins released by Facebook 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.

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.

Suggestion: Friends, use second method. Method 1 often does not work on some cases. It did not support on blogger. So Method 2 is best which works perfectly.

Method 1:


How to add Facebook comment box:

  • Go to and login your blogger
  • Go to template and click on EDIT HTML
  • Format your template
  • Find the code <body>
  • Right after <body> paste the code below
  • if it is blogger you should parse this code
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=258795540967978";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  • Find the following code: <data:post.body/>
  • And copy the given code and paste it below of <data:post.body/> , if the website, paste it where you want to see your comments.
<div class="fb-comments" data-href="http://allblogsolution.blogspot.com/" data-width="620" data-numposts="10" data-colorscheme="light">
<div class="comment boxe">
<a href="http://allblogsolution.blogspot.com/2014/02/how-to-add-latest-facebook-comment-box.html">Facebook comment box</a>
</div>
</div>
Note: Replace the green text with your website url. You can change the width of the comment box replacing the 620 with the desired width and replace the rows of the post you want to display
Facebook comment box

  • And then click on SAVE TEMPLATE


Method 2:


Hi friends, I found an error from our many visitors. The above can no longer be used in some of our old bloggers.  So concerning our visitors problem, I am just going to give another code which will definitely works in your blogger.

Here is step by step process to add/put facebook comment on your blogger:-

1. Create a New app

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

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/allblogsolution.
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='All Blog Solution' property='og:site_name'/> 
<meta content='http://www.facebook.com/allblogsolution' property='fb:admins'/> 
<meta content='article' property='og:type'/>

3. Comment box in blogger blog.

At last you should put comment box structure in the blog.
Go and find this code <b:includable id='comment-form' var='post'>. If you are not finding this code, just find this code <div class='post-footer-line post-footer-line-1'> and paste the following code just below the above code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:10px 0px 5px 0px; margin:0px 0px 0px 0px;'><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='620'/></div>
<div><a href='http://allblogsolution.blogspot.com' style='color:black; font-size:12px; font-style:italic;' target='new'>Find blogger widgets on All Blog Solution</a> </div>
</div>
</b:if>

Now you have successfully add your Facebook comment box.

Note: If you want to change the width of comment, simply change the width. Thanks you did.


Read More »

How to Put Meta Keywords in Each Blogger Post

Meta tags or keywords are very significant SEO terms. To find your site’s rank better in search engine, you have to add meta tags or keywords in every page of the website. But when you want to put keywords in every blogger posts, you can’t because there is only meta description place in blogger. There you cannot find keywords adding space. So if you want to add meta tags or keywords also, you have to add some codes on your template. Meta tags are also as important as meta description. Meta tags help you to increase healthy and better traffic.


Process of adding meta tags in each blogger post:-


Suggestion: We always recommend you not to change any code of your template with keeping back up of your template.

Step 1. Log in into your blogger.
Step 2. Choose your one blog.
Step 3. Go to template>>edit html.
Step 4. And find the code <b:include data=’blog’ name=’all-head-content’/>
Step 5. Then paste the below codes below the above code.
<b:if cond='data:blog.url == "PAGE-URL"'>
<meta content='PAGE-DESCRIPTION' name='description'/>
<meta content='PAGE-KEYWORDS' name='keywords'/>
</b:if>
Step 6. Now you have to paste the above code every times when you posts.

Note: If you have 20 posts, you should copy and paste the above code 20 times too.

Step 7. Click on Save template button.

Note:-
1. write the url of your post in PAGE-URL.
2. Write meta description in PAGE-DESCRIPTION.
3. Write meta keyword in PAGE-KEYWORD.

Read More »

Tuesday, February 10, 2015

Top Sites to Ping Free PR 2 to PR 7 List for 2015

Ping tools
Ping your site into search engine and directories is a vital part of SEO. Ping is easy service or it might be called tool using this, you can ping your site in popular search engines and directories. The main advantage of this service is  to index your site into search engines automatically by which can grow the visitors in your sites and blogs. Ping can be used by blogs, websites, forums etc. Here I listed some ping tool sites which helps you to promote sites and blog.

Page Rank 2 Ping Sites: 

Page Rank 3 Ping Sites: 

Page Rank 4 Ping Sites: 


Page Rank 5 Ping Sites: 

Page Rank 6 Ping Sites:

Page Rank 7 Ping Sites:

Use the above free tools that will definitely help to ping sites in many search engines like google, yahoo, bing etc and directories too. If you use these sites, you do not need to submit your sites into many directories and search engines manually.  
Read More »

Dofollow High Page Rank Guest Post Sites for 2015

High PR Guest Posting Blog
Sometimes before Guest Blogging was best way to build Backlinks and increase high visitors in blogs. But now some SEO experts have said that guest posts blogging has been denied by the Google and those blogs have been penalized and they get ranked lower but some of them still believe and say guest blogging is very important for new bloggers who has just started their blogging.  And they also advise bloggers to submit their posts in these kind of blogs. You can get here high page rank guest blogging sites which are pr 5 to pr 8. You can submit and make quality backlinks to any sites.

Top 10 Guest Post Blogging Sites

Read More »

How to Find Most Searched Keywords

Search engines always prioritize to the keywords which are mostly search in the web search engines. Most popular search engines like Google, Bing, Yahoo, MSN etc gives more priority to the mostly searched keywords because in an hour and a day thousands and millions of people searched that kind of keywords like Barack Obama, Putin, China Economy and in a minute thousands of visitors reach a website. So that to show the right and best result to the viewers. Search Engines filter and rank a best blogs and site in the first position in a particular keywords.

Ranking a keywords can be affected by the rank of your website. If your website rank is less than 1 or it is 0 or N/A, your posts or article cannot be in a first rank even your article is best than other sites. So you should consider to get higher rank of your sites and blogs.

There are four ways to find the searched ratio of keywords:

  1. Using Google Trends
  2. Google Adwords
  3. Using Google Search Engine Suggestion
  4. Searching in the Forums
Using Google Trends to Find Highly Searched Keywords
Now lets go to find highly searched keywords in the blog in the recent time. If you want to find highly searched keywords in the google, then you can easily find through a google website. Here are the steps that you can apply while you are searching highly searched keywords. 
  1. In the first, go to the www.google.com/trends
  2. Choose a country to find the keywords which are highly searched from that country. 
  3. After choosing any of country like in the figure where I chose India and then there in the searched trends box just write any keywords or world to get the searched position, interests and related search of that keyword. In the given figure I chose India and then I tried to find the position and ratio of Keyword Bollywood which you can see in the following figures.



Read More »

Five Most Popular HTML/CSS Frameworks

Custom coding is boring and little bit more difficult than the using of frameworks. So I always say all of my friends and coder friends for using the frameworks in their every project. Using of frameworks are not easy and not so hard but you should analyse that frameworks once and then you will be able to use that frameworks. In the coding world, their are different tips and techniques to minimizing the coding and among them using of framework is one most important thing. Likewise, we often use html/css frameworks to build a website better responsive and even seo friendly. So their are some most important html/css frameworks and if you use them, then you should no longer coding too much. And they are listed below:

Twitter Bootstrap Framework

I often use twitter bootstrap framework to build a responsive site and twitter bootstrap is one of the most popular html/css framework nowadays. More than 40% developers who use framework to build a site use twitter bootstrap and the latest version of the twitter bootstrap is bootrap 3.3.1

Foundation


Foundation is another mostly used framework after bootstrap and it is also used for responsive and mobile design. Foundation 5 is the latest version of it and just go to foundation to find official documentation of the foundation.


Ink

Using of Ink framework helps you to build a website very fast. And Ink is also another most famous css frameworks. We can easily code and easily customize it.


Zimit Framework

It is a html 5 frameworks and it is lightweight frameworks for html/css coder that helps coder to make a design fast and easily.


HTML Kick Start

Kick Start is also used for responsive and it is also most famous framework in the website designing field.

Now, friends I recommend all of you to use any of the above framework to develop your any site. Custom coding is good but after using framework you can easily code, customize and enhance your sites. Thank you
Read More »

Best Tips to Submit a Site in Directories Successfully

Friends, here I say you just submitting into directories can not be affective. It will be affective when your site or blog successfully registered into the high page rank directories. I already told you that directory submission is one of the best trick to increase quality backlinks and this can increase your high traffic. By the way, there are 2 types of directory submission services available in the web and they are automated submission and manual submission.

And on the based on the price there are also two types of directory submission, one is free directory submission and another is paid directory. Free submission is very good but it will be approved after long time and it also can be rejected but paid is approved fast and it is less chance of dissapproved your listing.

Which blogs and sites are Approved:-

  • A complete site.
  • Good looking in the design and fast sites and blogs
  • English Language sites are preferable.
  • If you choose right category of your site while listing on any directory.

Which Blogs and Sites are Dissapproved:-

  • If a site are under construction or not has not been completed.
  • If your site has been already listed in the directory.
  • If your site is not in the english language.
  • If your site has copied content.
  • If your site is a social sites.

Read More »

Friday, February 06, 2015

Blogger And Google Plus Comment System in Blogger Blog

Blogger has its own default commenting system and instead of it Google also offers google+ commenting system in the blogger blogs but many bloggers got this often difficult and not good because google+ comment system forces visitors to make google account to comment using google+ comment box. And it seems that this discouraged many visitors to comment constantly on the any blogger blog and among those visitors I am the one. If you get comment from the google+ comment box, then blogger never notify you. So that you can not respond to the visitors and this makes you unfriendly behavior with your visitors which can be a worst reason of decreasing of visitors on your blogs and sites.

The one and only way of solving this problem is adding of the both the commenting system: Blogger Default Commenting System and Google Plus Commenting System on your blog which can be a good for your blogger because if a visitor want to comment using google+ commenting, he/she can and if he/she want to comment using blogger default comment box then he/ she also can use them.

So your visitor will get 2 option either Blogger Default comment Box or Google+ comment box


How to Add Blogger And Google Plus Comment System in Blogger Blog With Toggle?



Here is the Step wise process to add this system on your blogger. Lets go through step by step.

Step 1: First of all login in your blogger account and the just go to the template option just press edit html and find the following code
<b:include data='post' name='post'/>
Step 02: Now copy the given code and paste it just after the above code.
b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(http://1.bp.blogspot.com/-w7tZjjrubgc/VNS0hbb-lKI/AAAAAAAACzw/K5hcqGRWYQg/s1600/gp.png) no-repeat; font-size: 20px; font-family: &quot;Arial Narrow&quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 10px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}</style>
<div class='comments-icons'>
Choose a Comment System: <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#gplus-comments-visibility&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='gplus-icon' height='35' src='http://1.bp.blogspot.com/-i1zpfechOuY/VI763hqxlHI/AAAAAAAAAvs/dz4sWUQW-xU/s1600/google-plus-logo.png' width='35'/></a> OR <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#gplus-comments-visibility&quot;).hide();'><img class='blogger-icon' height='35' src='http://3.bp.blogspot.com/-4N-YlJvoxdA/VI763udxlHI/AAAAAAAAAvw/0dY2Ys0zz2k/s1600/blogger-logo.png' width='36'/></a>
</div>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='630' expr:data-href='data:post.url'/>
</div>    
</b:if>


Step 03: Now save your template

Note: You have to add the following google api if it does not exist already on your template. And you can change the width of the comment box just changing the value of the data-width attribute.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Read More »

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 »

Follow Us On Facebook

Blogger Widgets