LATEST: We are offering PENTESTING and WEB DEVELOPMENT service with low price Learn More

2/20/2016

9/14/2013

Add Custom Favicon To Your Blogger Blog

Suggested Post: Add Nice JQuerry Effect To Your Blogger Labels .Many new bloggers face this problem that how to change default FAVICON in blogger.So today i will show you how to add custom favicon to your blogger blog.By default there is an orange favicon in blogger blog which looks very ugly and un proffessional, there fore custom favicon is must and you can add one which you like.In this tutorial we will insert a simple HTML code in our blog code.
After Inserting the code your favicon will look like image below:


Follow The Steps Below For Adding Custom FAVICON in Your Blogger Blog

STEP 1: First goto Blogger Dashboard >> Template 



STEP 2: Now click on Edit Html


STEP 3: Now a window will open with HTML code.Find <head> code in your blog by pressing ctrl+f

STEP 4: Now paste the below code just after <head>
<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Example:

<head>
<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

STEP 5: Now change YOUR-FAVICON-URL with your desire favicon url in the code.

STEP 6: Now save your template.

NOTE: You must clear your browser cache to see the changes.After clearing your browser cache data, just reload your blog and see the changes.

TIPS: You can find many favicons by searching in GOOGLE.
          Use 16x16 dimension favicon.

Last Words: If you face any problem while inserting the above code , just comment below and i will be there.Its a most simple way to add custum favicon to your blogger blog.There is also another way to add custom favicon by going to LAYOUT and uploading there.
Inshallah! i will soon publish that tutorial.
Keep visiting for more tutorials and widgets.

7/07/2013

Add Nice Jquery Effect To Blogger Labels

Today i will show how to add popout effect to your LABELS with mouse over.It looks very preety and eye catching.Its a simple code and will take 10 sec to adding it to your blog.After adding it to your blog ,it will look like image below:

Follow The Below Steps For Adding It


STEP 1: Goto blogger DASHBOARD >> TEMPLATE

STEP 2: Now click on EDIT HTML


STEP 3: Now press ctrl+f and search for </head>

STEP 4: Now paste the below code code just before </head>


<!-- label effect by www.hacking-articles.blogspot.com !-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
    var dur = 400; // Duration Of Animation in Milli Seconds
    $(document).ready(function() {
        $(&#39;a.linknudge, .Label ul li a&#39;).hover(function() {
            $(this).animate({
                paddingLeft: &#39;25px&#39;
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // end of Jquery Script
</script>
<!-- label effect by www.hacking-articles.blogspot.com !-->

STEP 5:  Now save your template and reload your blog and see the changes.


Recent Post Widget With Animation For Blogger

Recently we shared a post on How To Add Meta Tags To Your Blog For Better SEO , Today  i will show you haw to ad RECENT POST WIDGET WITH ANIMATION.Recent post widget is must for every blogger to increase their page views.It also helps in decreasing bounce rate of your blog and engaging visitor in your blog.You have seen many recent posts widgets but today's recent post widget is different from others, This widget has animation effect and the posts scroll from top to bottom.Its a simple widget and easy to add.After adding this widget to your blog it will look like the image below:

Follow The Step Below For Adding This Widget To Your Blog

 STEP 1: Goto blogger DASHBOARD >> LAYOUT
STEP 2: Now click on ADD GADGET


STEP 3: Now a windows will open, Click on JAVASCRIPT/HTML



STEP 4: Now a window will open like this.


STEP 5: Now paste the below code in it.

<style type="text/css">#rp_plus_img{height:377px;}#rp_plus_img li {height:60px;padding:5px;list-style:none;background-color:#ffffff;border:solid 1px #000000;}#rp_plus_img a{color:#00000;}#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;text-align:justify;-moz-border-radius: 5px;}#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}</style><script type="text/javascript" src="http://yourjavascript.com/914099092/jjjs.js"></script><script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script><script type="text/javascript">var speed = 1500;var pause = 3500;$(document).ready(function(){rpnewsticker();interval = setInterval(rpnewsticker, pause);});</script><ul id="rp_plus_img"><script style="text/javascript">var numposts = 5;var numchars = 0;</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script></ul>

STEP 6:  Now click on SAVE.
Now you have successfully added this gadget to your blog, just reload your blog and see the changes.If you face any problem just comment below and i will respond asap.

6/30/2013

Add Social Media Like Buttons With Rotator Effect To Blogger -V2 new

Yesterday we shared a 1st version of this widget and Today i am again with 2nd version of this intresting widget.Its a social media likes button with amaizing rotator effect.Theae buttons are visitor eye catching and will also help to increase social likes and followers.
So follow simple procedure and you are done.After adding this widget, it will look like image below:
Also Read: Show Meta Description Only On Home Page

How to add this widget? Lets Start.

1) Goto blogger DASHBOARD
2) Now clock on LAYOUT
3) Then click on Add a Gadget
4) Now a window will open, in this window select HTML/JAVASCRIPT
5) Again a new window will open, In this window paste the below code.
<style>
#PTTHOME img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
#PTTHOME img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>

<center><p id="PTTHOME">
    <a href="http://facebook.com/USERNAME" target="blank"><img src="https://lh3.googleusercontent.com/-_36zfJkSOQM/UaDTzAQacFI/AAAAAAAAARM/2LEyBSzD9hU/h120/Facebook-Home.png"  title="Like Our Facebook Page" /></a>

    <a href="http://www.twitter.com/USERNAME" target="blank"><img src="https://lh6.googleusercontent.com/-lywaejUyXXc/UaDTzpYjW5I/AAAAAAAAARc/Sd58USmLJ10/h120/Twitter-Home.png" title="Follow Our Updates On Twitter" /></a>

    <a href="G+ URL" target="blank"><img src="https://lh4.googleusercontent.com/-neMd3wG1lKI/UaDTzBPLp1I/AAAAAAAAARI/T2hREOqinMU/h120/Google-Social-store.gif" title="Follow Us On Google+" /></a>

    <a href="http://www.feeds.feedburner.com/USERNAME" target="blank"><img src="https://lh3.googleusercontent.com/-9DKYV5K0AXY/UaDTzGwStuI/AAAAAAAAARE/0dfUm4D8pGE/h120/RSS-Home.png" title="Grab Our Rss Feed" /></a>
    <a href="http://hacking-articles.blogspot.com"><font color="white">?</font></a>
</p></center>
6) Now replace USERNAME ang G+ USERNAME with your desire user name and save that widget.
7) Reload your blog and see the changes.

Add Social Media Like Buttons With Rotator Effect To Blogger -V1

Yesterday we shared a post about POPOUT SOCIAL LIKE BUTTONS and Today i am again with another intresting widget for you prople.Its a social media likes button with amaizing rotator effect.These buttons are visitor eye catching and will also help to increase social likes and followers.
So follow simple procedure and you are done.After adding this widget, it will look like image below:
Also Read: Add Adsense Beside Social Sharing Widget In Blogger

How to add this widget? Lets Start.......

  • Goto blogger DASHBOARD
  • Now clock on LAYOUT
  • Then click on Add a Gadget
  • Now a window will open, in this window select HTML/JAVASCRIPT
  • Again a new window will open, In this window paste the below code.
<style>
#PTT img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
#PTT img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>

<center><p id="PTT">
    <a href="https://facebook.com/USENAME" target="blank"><img src="https://lh6.googleusercontent.com/-9b1MQlqxzgo/UaXlymp-9BI/AAAAAAAAAUs/NSyI4YX9D_U/h120/Facebook-48x48.png"  title="Like Our Facebook Page" /></a>

    <a href="http://www.twitter.com/USENAME" target="blank"><img src="https://lh6.googleusercontent.com/-aYxjSXBkg6Q/UaXlzKm8YGI/AAAAAAAAAVE/8RISDG-F2fs/h120/Twitter-48x48.png" title="Follow Our Updates On Twitter" /></a>

    <a href="G+ URL" target="blank"><img src="https://lh5.googleusercontent.com/-6qAKr8-0sSc/UaXlyk_Z0zI/AAAAAAAAAU0/GVtbZZqplo4/h120/Google-Plus-48x48.png" title="Follow Us On Google+" /></a>

    <a href="http://www.feeds.feedburner.com/USENAME" target="blank"><img src="https://lh6.googleusercontent.com/-awoQLdHO0Ow/UaXlyiPO7OI/AAAAAAAAAUw/b5T5_c3c2l4/h120/RSS-48x48.png" title="Grab Our Rss Feed" /></a>
    <a href="http://hacking-articles.blogspot.com"><font color="white">?</font></a>
</p></center>
  • Now replace USERNAME and  G+ USERNAME in the above code with your desire user name and save that widget.
  • Reload your blog and see the changes.
NOTE: CLICK HERE for a recent version of this Widget.

Add Static Social Like Buttons With Popout Effect To Blogger

You have seen in many pro blogs that a static social Profiles buttons are floating on right side of blog.So today i will show you how to add that widget to your own blog.This widget look is very proffessional, and help you to increase your facebook, twitter, google + etc likes and followers.
After adding it to your blog, it will look like image below:


Also Read: How to add 4 125x125 ad slots to blogger sidebar
  • Follow These Steps Carefully For Adding This Widget:
  • Goto Blogger Dashboard
  • Click on TEMPLATE => EDIT HTML
  • Now press ctrl+f (use in HTML box) and search for </body>, Now Paste the Code Shown Below just Before </body>
<!-- popout social buttons by www.hacking-articles.blogspot.com !-->
<style>
.PTTFacebook{
background:url('https://lh5.googleusercontent.com/-hBxDJpRFsTM/Ub75aLOusII/AAAAAAAAAho/g14K2kK0wzk/h120/Pc+Tools+Tips.png');
background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.PTTFacebookopen{
background:url('https://lh4.googleusercontent.com/-M2a74WeaI7c/Ub75g7TiF6I/AAAAAAAAAhw/5KTtDHFPW0s/h103/Pc+Tools+Tips.png');
background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.PCFacebook{margin:0px 0 0 43px}
.PTTtwitter{
background:url('https://lh5.googleusercontent.com/-UASccCJJ3NA/Ub75n9v_v9I/AAAAAAAAAh4/Ia3S7SUjZco/h120/Pc+Tools+Tips.png');
background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.PTTtwitteropen{
background:url('https://lh6.googleusercontent.com/-YO3YxrrtJF4/Ub75uSgun5I/AAAAAAAAAiA/SoLiYEeM6kk/h103/Pc+Tools+Tips.png');
background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.PCtwitter{margin:0px 0 0 43px}
.PTTGooglePlus{
background:url('https://lh6.googleusercontent.com/-IoDB3gNT-bI/Ub752_lUNwI/AAAAAAAAAiI/cD32K1udw84/h120/Pc+Tools+Tips.png');
background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.PTTGooglePlusopen{
background:url('https://lh5.googleusercontent.com/-Ve4viqVSQwc/Ub759b5d-lI/AAAAAAAAAiQ/vsw-MdKvOZg/h103/Pc+Tools+Tips.png');
background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.PCGooglePlus{margin:0px 0 0 43px}
.PTTRss{
background:url('https://lh4.googleusercontent.com/-rdA5qnc0IXs/Ub76FBUxA8I/AAAAAAAAAiY/asTSnDcb7yQ/h120/Pc+Tools+Tips.png');
background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.PTTRssopen{
background:url('https://lh5.googleusercontent.com/-BeasiCfTWIk/Ub76LJO6HPI/AAAAAAAAAig/E0dNW5BN1jM/h103/Pc+Tools+Tips.png');
background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.PCRss{margin:0px 0 0 43px}
</style>
<div class='PTTFacebook' onmouseout='this.className=&apos;PTTFacebook&apos;' onmouseover='this.className=&apos;PTTFacebookopen&apos;'><div class='PCFacebook'><a href='http://facebook.com/USERNAME' target='_blank'><img alt='Like us on Facebook' src='https://lh3.googleusercontent.com/-d56PUaAltII/Ub76ait-crI/AAAAAAAAAio/xLTycXa6R8k/h120/Pc+Tools+Tips.png' title='Like us on Facebook'/></a><br/>
</div>
</div>
<div class='PTTtwitter' onmouseout='this.className=&apos;PTTtwitter&apos;' onmouseover='this.className=&apos;PTTtwitteropen&apos;'><div class='PCtwitter'><a href='https://twitter.com/USERNAME' target='_blank'><img alt='Follow us on Twitter' src='https://lh6.googleusercontent.com/-YtYQKeA-GJY/Ub76kXbSNXI/AAAAAAAAAiw/C2QnVe7C3ao/h120/Pc+Tools+Tips.png' title='Follow us on Twitter'/></a><br/>
</div>
</div>
<div class='PTTGooglePlus' onmouseout='this.className=&apos;PTTGooglePlus&apos;' onmouseover='this.className=&apos;PTTGooglePlusopen&apos;'><div class='PCGooglePlus'><a href=' G+ USER NAME' target='_blank'><img alt='Recommend us on Google Plus' src='https://lh6.googleusercontent.com/-6PXEDmiUg8k/Ub76r6FoEqI/AAAAAAAAAi4/WX-lP7aIT90/h120/Pc+Tools+Tips.png' title='Recommend us on Google Plus'/></a><br/>
</div>
</div>
<div class='PTTRss' onmouseout='this.className=&apos;PTTRss&apos;' onmouseover='this.className=&apos;PTTRssopen&apos;'><div class='PCRss'><a href='http://feeds.feedburner.com/USERNAME' target='_blank'><img alt='Subscribe me on RSS' src='https://lh5.googleusercontent.com/-uoHRW1M20yg/Ub760JlSbKI/AAAAAAAAAjA/02Ec3qLTk1M/h120/Pc+Tools+Tips.png' title='Subscribe me'/></a><br/>
</div>
<a href="http://hacking-articles.blogspot.com"><font color="white">?</font></a>
</div>
<!-- popout social buttons by www.hacking-articles.blogspot.com !-->
  • Now change USERNAME in above code with your desire username or URL.
  • Now save yout template and reload your blog and see the changes.

Add 4 125x125 AD SlotS To Blogger

I am back with an amaizing widget for those people who wanna learn more money from their blog through Affialates and direct advertisement.This widget will create 4 125x125 ad space in your blogger side bar.You can add any ad code there i.e buysellads.com, adsense , images etc
After adding this, your widget will look like image below:

Lets add this widget to your blog:

  • Goto blogger DASHBOARD
  • Now clock on LAYOUT
  • Then click on Add a Gadget
  • Now a window will open, in this window select HTML/JAVASCRIPT
  • Again a new window will open, In this window paste the below code.
<center><table border="0"><tr>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
<th width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></th>
</tr><tr>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/></td>
<td width="126" height="126" align="center"><img src="http://i44.tinypic.com/2v97vv9.jpg"/>
<a href="http://hacking-articles.blogspot.com"><font color="white">?</font></a>
</td>
</tr></table></center>
  • Now replace <img src="http://i44.tinypic.com/2v97vv9.jpg"/> with your ad code.
    Reload your blog and see the changes.

6/29/2013

Page Rank Checker Tool

PR Checker is a tool used for checking google page rank of website or any webpage.PR is a google alogritm which shows how popular is your site in GOOGLE search results.In order to check pagerank of a web site or web page please submit the URL of that web site in the form below and press CHECK PAGE RANK button.



Check Page Rank of your Web site pages instantly:
This page rank checking tool is powered by Hacking Articles

Add This Tool To Your Blog CLICK HERE

6/24/2013

Show Meta Description Only On Home Page

Yesterday i share apost about  Add Adsense Beside Social Sharing Widget In Blogger .By default in blogger,  META DESCRIPTION shows on every page in Google search result, which is not good for SEO becouse it marked as duplicate by Google Bot and hence your blog didnt get index by search engine and your blog PR didnt increase.Today we will learn how to show meta description only on homepage and increase our blog visibility in search engines.

Steps For Showing Meta Description Only On Homepage Of Blogger Blog

  • Goto your blogger DASHBOARD
  • Now click on TEMPLATE => EDIT HTML
  • Now Find the below code in you template in <head> section.
<meta content='META DESCRIPTION GOES HERE' name='description'/>
  • As shown in image below:

  • And replace it with
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='META DESCRIPTION GOES HERE' name='description'/>
</b:if>
  • Now save your template and you are done.
  •  NOTE: Dont forget to change META DESCRIPTION GOES HERE with your blog meta description.
Also Read: Create Meta Tags with Character Counter Tool for better SEO
  • You have to wait some days for Google bot to crawl your blog and after that you will see META DESCRIPTION only on your blog home page and thus your blog visibility will be increase because now your blog every page have different meta description.