Home » All posts
Recent Posts Wigdet for Blogger With Thumbnail
March 24, 2015 Ariyal
![]() |
Recent Post Widget |
How to Add Recent Post Widget in Blogger Manually?
<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:-
- You can change the numposts=10 into numposts=9 or 11 choose the number how many posts you want to display.
- And limitspy=4, intervalspy=4000,summeryColor="#666", boxwidth, showrandomimage, summerfontsize,summerypost can be changed by yourself.
How to Make Sidebar Of Blogger Fixed
March 20, 2015 Ariyal

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.
- Lets first of all make left or right bar widget fixed
- go to your blogger dashboard then click on template and edit html.
- search the following code or ]]></b:skin> and then just paste the given code just before the above code. column-right-inner { position: fixed; }
- Now click on Save Template.
You have successfully done.
I suggested you this technique because, when i use this technique i am earning double than before.
Top 10 High PR Dofollow Forum Lists For 2015
March 20, 2015 Ariyal
But it is also too important that your backlinks should be in the right or high page rank sites and blog. This can cause increasing of more visitors and increasing your blog ranks constantly. If your backlinks on the low page rank sites or negative page rank site that can cause the decreasing the rank of your blog and site. Now you just should know that backlinks are that link which can be benificial for your blogs if their page rank and visitors are higher. This time I am suggesting you to use dofollow forums to increase your visitor's and increase your page rank high. But always all the dofollow forums are not good because most of them are also low and negative page rank and don't even think to make backlinks on that forums. So now some list of high ranked dofollow forums which have high Google page rank. But there is a remembering thing that you should not leave after registering an creating links. You should constantly post on your forum and you should spend some little time on your forum.
High Page Rank Dofollow Forums:
http://www.siteownersforums.com/http://www.siteownersforums.com/index.php
http://forum.joomla.org/
http://forums.searchenginewatch.com/
http://forums.cnet.com/
http://forums.mysql.com/
https://forums.digitalpoint.com/
http://affiliate-marketing-forums.5staraffiliateprograms.com/
http://www.sitepoint.com/forums/forum.php
http://www.warriorforum.com/
These are just Top 10 Dofollow Forums for the bloggers who want to increase viewers on their blog.
Guys this is just a way of getting high page rank backlinks on your blog and increasing the more visitors.
Guys if you know any other better idea to get high page rank backlinks, you can kindly share your ideas with us. To send your ideas just go to Become An Author Page and post your ideas. We will appreciate your thoughts and visions. Don't hesitate to share your ideas.
Thank you.
Add Best Image Slider On Your Blogger: Nivo Slider
March 20, 2015 Ariyal
Step 1: Log into your blogger and then click on Layout
<style type="text/css"/>
/* dimpost.com - Basic Style */
body{ background: transparent; font:15px/2 'Adobe Caslon Pro', Georgia, Serif; margin:0; padding:0;}
a{outline:0 none}
#pagewrap{ margin:10px auto; padding:0; position:relative; height:400px; width: 640px;}
#slidewrap{position:absolute;}
#slider { border-color: #c0c0c0; border-radius: 5px 5px 5px 5px; border-style: solid; border-width: 10px 10px 30px; box-shadow: 0 0 3px #2F2F2F; height: 280px; margin: 10px; position: relative; width: 600px;}
#slider images{ position:absolute; top:0px; left:0px; display:none;}
/* The Nivo Slider styles */
.nivoSlider { position:relative;}
.nivoSlider images { position:absolute; top:0px; left:0px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:6; display:none;}
/* The slices and boxes in the Slider */
.nivo-slice { display:block; position:absolute; z-index:5; height:100%;}
.nivo-box { display:block; position:absolute; z-index:5;}
.nivo-directionNav{display:none!important}
.nivo-html-caption { display:none;}
.nivo-caption{ position:absolute; right:20px; text-align:center; top:130px; width:192px; z-index:60;}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav { bottom: -23px; display: block; height: 15px; left: 204px; position: absolute; text-align: center; width: 192px; z-index: 51; opacity: 0.6;}
.nivo-controlNav a{ background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center; display:inline-block; height:14px; width:14px; text-indent:-9999px; cursor:pointer;}
.nivo-controlNav .active{ background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png); }
</style>
<script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript">
</script> <script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script>
<!--[if IE]> <script src="modernizr-2.0.min.js"></script> <![endif]-->
<div id="pagewrap"><div id="slidewrap">
<div id="slider">
<a href="your-blog-here" target="_blank">
<img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
<a href="your-blog-here" target="_blank">
<img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a> <a href="your-blog-here" target="_blank">
<img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
<a href="your-blog-here" target="_blank">
<img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
</div>
</div>
</div>
Step 4: You should place your blog URL in your-blog-here. and place your image link in red colored image link
Watch Video to Add the Slider into Blogger
How to Change the Blogger URL and Re-apply For Adsense
March 19, 2015 Ariyal
Add Pager Link in Blogger
March 13, 2015 Ariyal
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 != "item"'>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.
<b:if cond='data:blog.pageType != "static_page"'>
<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>
How to Make a Post Sticky in Blogger
March 05, 2015 Ariyal
By the way if you want any post becomes sticky on the top of a blogger blog, then you can follow these two simple method to do that.
1st Method:
First method is that adding of gadget selecting html/javascript gadget. Then you write a post and save it. If you want from the Post then just follow the second method.
2nd Method:
The second method is that which is also very simple method.
Step 01: First of all you go to the post which you want to show in the first or top.
Step 02: Now you will see the right bar "Post Setting" where you find number of option like Labels, Shedule, Permalink, Location, Search Description and Options.
Step 03: Now just choose "Schedule" and click it where there you see 2 options:
i. Automatic
ii. Set Date and Time
Now click Automatic which will set or schedule this post at the top.
Step 04: Publish Now
Responsive Video in Site and Blog
February 13, 2015 Ariyal
How to Make Responsive Youtube Embed Video?
<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">Step 03: After adding a div, now just add the below code any where in the stylsheet
<iframe width="560" height="315" src="https://www.youtube.com/embed/o2Tw-8rF8dI" frameborder="0" allowfullscreen></iframe>
</div>
<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.
How to Put Meta Keywords in Each Blogger Post
February 12, 2015 Ariyal
Note: Meta Keyword rule is deprecated in many search engines.
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"'>Step 6. Now you have to paste the above code every times when you posts.
<meta content='PAGE-DESCRIPTION' name='description'/>
<meta content='PAGE-KEYWORDS' name='keywords'/>
</b:if>
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.
Watch and follow the process of given video.
Blogger And Google Plus Comment System in Blogger Blog
February 06, 2015 Ariyal
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 == "item"'>
<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: "Arial Narrow",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='$("#gplus-comments-visibility").slideToggle();$("#comments").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='$("#comments").slideToggle();$("#gplus-comments-visibility").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'/>
How to Put Facebook Like Button on Each Blogger Post
January 25, 2015 Ariyal
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
<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='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:105px; height:25px;'/>
Step 05: After that, you just press on save template.
Percentage Calculator Widget for Blogger and Website
January 10, 2015 Ariyal
![]() |
Percentage Calculator |
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>Click Here for Demo
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>
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.
How to Add Tabs in Blogger Blog
December 23, 2014 Ariyal
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:
<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" />
<div id="tab-content">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.
<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 -->
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.
Wikipedia A Strongest Backlink Source
November 23, 2014 Ariyal
Anyway whether there is HummingBird, Panda and Penguin algorithm but all of them have not made strongest rule to the Backlinks because of its relevancy to the content. So that I always tell all of you to make strongest backlinks which should be relevant with your site's content.
I know you always want to make dofollow backlinks because it helps your site to crawled by the search engines instantly and they also helps your site to get higher rank. But you know about Wikpedia.Org, which is a great encyclopedia of the world where you can find many more suggestion, answers, question, articles, solution, entertaining factors and many more. And its has got 9 Page Rank by the google.
Nowadays when you search anything in the google, I think most of the time you would have found wikipedia in the first position. Because wikipedia gives the actual information of the your problems or questions. So millions of internet users will be in wikipedia at the same time. Wikipedia has made its information available in 100 more languages. It may be that you also can see your problem's solution in your own language.
But you should also know how the wikipedia is being so popular day by day. It's being popular because of the many more contributors of its. It has contributors all over the world like you and me. If you want to be a contributor of wikipedia, then you can sign up and login with your account and write any articles what you want to write. But you should follow the terms and condition of Wikipedia to contribute your own solutions and article. If you do not follow their norms while writing a article, then your article will not be published and you can be possibly to banned from the Wikipedia.
And the the very most important thing that a search engine expertise should understand that a wikipedia nofollow link is far better than 5 and 6 rank dofollow links. So I suggest you to make backlink from the Wikipedia. I think many of you also do not know how to make backlinks on wikipedia. Actually making backlinks is difficult but making backlinks in the wikipedia is not far difficult. In order to know how to make backlinks on wikipedia you should wait for my next article.
Thank you.