-->
Welcome To Free Learning Softwares in Urdu (By Qasim Ashraf..!!!)
Showing posts with label Blogger tips. Show all posts
Showing posts with label Blogger tips. Show all posts

How To Remove Hellobar H Logo in Blogger Blog

We everyone knows Hellobar is the best type Stickybar which scroll along with page and grab the attention of any blog visitors or reader easily. You can show your importance notices, notification and any link of your post or page on it that you wanted to share with your readers. But the biggest problem with Hello Bar is that if you got for the free version than you will get H Logo on the left hand side in Hellobar. It’s not looking good and professional and actuality loaded every time when your blog reader visits your blog. Many people searching in Google, Bing, yahoo or other search engine for getting an answer to remove Hellobar H logo but they do not find any good solution. So In this post I will show you very simple CSS tricks to Remove/Hide hellobar H Logo. It tested on my blog and it worked 100%. You can see demo image or click live demo button.




Our recommended:
Add Blogger Notification or Sticky Bar or Fixed Bar with "Close Button"

Follow these simple steps to remove this:

  • login to Blogger dashboard> Template >Edit HTML
  • Backup/Download your template.
  • Search for </head> tag using Ctrl + F
  • And paste the below code above it.
<style type='text/css'>
a#hellobar-logo, a#hellobar-logo:link, a#hellobar-logo:visited {
display:none}</style>
Now click on Save Template and then visit your blog and see the magic. 

How To Install Blogger Template 2013

Recently  blogger have updated their interface so many people have asked me how can we upload templates in the updated blogger interface so for their solution i have published this post and hope it will help you. In this tutorial i am going to show you how to install blogger template in the new updated version of the blogger.just simple follow the step and install a blogger template in updated blogger interface.

1. Login to your blogger account

2. Now just select Template and you can see bellow button at the right hand side.


3. Now just click on backup / restore button and one box will pop up (you can see it in bellow snapshot)


4. Now simply browse your template and click on upload and you have done !
You can also change the arrangement of the widgets using layout.

How To Disable The Blogger Light Box

disable blogger light box
There are many blogger inbuilt features but there is disadvantages too ! i.e. blogger light box. When you click on the blogger blog’s image and it opens in the new frame you can see how it look likes in the left side’s snapshot. Well we have to disable the blogger light box and blogger have recently added new feature to disable the blogger light box. Follow the simple steps to disable blogger light box.

1. Login in to your blogger blog
2. Go to Settings and then select posts and comments
disable blogger light box blogger
3. Now there is one option showcase images with lightbox select NO from the dropdown menu
Now click on save settings and you have done !

How To Replace Newer, Older And Home Navigation Links with Image in Blogger


Replace the newer, older and home navigation links on your blogger blog with a beautiful image and catch the eyes of viewers, As Blogger's default Older, newer and Home navigation links are not so creative, almost all the Bloggers are using images for post navigation in their Blog. To do so you should first prepare 3 images with Good Creativity because this is a one time process and their is no need of altering it in future. If you wish to change it, you can as usual change it at any time. I hope you are ready with your images and now let’s step into the coding part. In this tutorial i am going to explain simple steps on how to replace these navigation links (which is at the bottom of each post) with an image of your own.  

Follow these Steps below To Replacing Blogger Navigation Links With customized Images:


Go To Blogger > Layout > Edit HTML
Check the Expand Widget Templates box at top-right-corner

NOTE: You may get two codes with same name, so watch the changes after replacing a particular code

1.     Find Below code using (CTRL+F)
<data:olderpagetitle>
And Replace it with the below code.
<img src="URL-OF-NEXT-BUTTON IMAGE FOR VIEWING YOUR NEXT POST"/>
2.     Find Below code using (CTRL+F)
<data:newerpagetitle>
And Replace it with the below code.
<img src="URL-OF-PREVIOUS-BUTTON IMAGE FOR VIEWING YOUR PREVIOUS POST"/> 
3.     Find Below code using (CTRL+F
<data:homemsg>
And Replace it with the below code.
 <img src="URL-OF-HOME-BUTTON IMAGE FOR VIEWING YOUR PREVIOUS POST"/>
Make sure to replace the URLs with the Image Links of your uploaded Images.  
  
4.     Finally save your template and enjoy the new look!

How to Remove/Auto Hide Blogger Navbar Easily?


Many Visitors or bloggers are finding on Google or any other search engine for to Remove or Auto Hide Blogger Navbar in default blogger themes, but they do not find the solution easily so   In this post I will showing you very simple tricks with simple steps to Remove/Auto Hide Blogger Navbar Easily in your blogger theme. Actually this navigation bar is only on default themes, and blogger default themes having less loading times as well as having good customization options but many of us don’t like the top navigation bar of default theme and  many of us wants to remove Navbar to give a professional look to our blog.

How to Remove/Auto Hide Blogger Navbar Easily?

Follow these simple steps:
  • Go to blogger > Design > Edit HTML
  • Backup/Download your template.
  • Now find the below code In your template
 ]]></b:skin>
  • Before this , paste the following code
#navbar {
height: 0px;
visibility: hidden;
display: none;
}
Preview your template, you will find out that the Navbar is not visible (hidden), and then save the template and See your blog again.

How to add Multi-Colored Popular Posts Widget (V2) to Blogger?

This tutorial will show you How to Add Different/Multi Colored Popular Post Widget In blogger. This widget is the main part of this hack is you don't need to add any heavy JavaScript or any other scripts we will apply this hack with using only CSS. Also you can customize this widget with using blogger template designer. Let’s go to the tutorial.




How to add Multi-Colored Popular Posts Widget  (V2) to Blogger?

  • Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
  • Backup your Template before making any changes to your blog
  • Now Expand Widget Templates
  • Press Ctrl + F and search the code shown below
 ]]></b:skin>
 Now Paste the Code Shown Below just above/before it
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Now save your template
  •  Now Go to Blogger Dashboard --> Layout --> Add a Gadget --> Popular Posts
  • Select "display up to 9 posts" and uncheck image thumbnail and snippet
  • Now Save the widget

How to Remove "Powered by Blogger" Attribution widget In Blogger?

The attribution gadget is a gadget present at footer of blog and says "Powered by Blogger"The widget is locked, when you click on the edit link of attribution widget you will warning that there is no Remove link, because the widget is locked officially by the blogger. To unlock the gadget follow my easy steps below carefully. 



How to Remove "Powered by Blogger" Attribution widget In Blogger?

  1. Go to Blogger Dashboard > Design > Edit HTML
  2. As always download a copy of your template
  3. Now Expand Widget Templates
  4. Now Find the code shown below using [ctrl+F] in your template
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
Replace locked='true' with locked='false'
Now save your template and go to Layout page. .
Click on the edit link of attribution widget.


Click Remove button and you are done.
That's All....

How To Add Link Nudging Effect to Blogger Links Using Simple CSS

In this tutorial we will show you how to add link nudging effect to blogger links using CSS. Later adding this effect in your blog all links or particular links slide when somebody move there mouse over it. This effect creates your links more attractive and eye-catching.

Link Nudging Demo

How to add nudging effect to all blogger links? 

  • Go to Blogger Dashboard --> Design --> Edit HTML
  • Backup your Template before making any changes to your blog
  • Now Expand Widget Templates
  • Find the code shown below using [ctrl+F] ]]></b:skin>

Now Paste the Code shown below just before/above it
a:link {
-webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms ease-out;
}
a:hover {
padding-left: 12px;}

How to add nudging effect to particular links?
  • Go to Blogger Dashboard --> Design --> Edit HTML
  • Backup your Template before making any changes to your blog
  • Now Expand Widget Templates
  • Find the code shown below using [ctrl+F]
 ]]></b:skin>
Now Paste the Code shown below just before/above it
.mybloggertopic {
-webkit-transition: padding-left 250ms ease-out;  -moz-transition: padding-left 250ms ease-out;
}
.
mybloggertopic:hover {
padding-left: 12px;}
  • Now use the HTML code shown below to add nudging effect to selected links
<a class="mrqasimashraf" href="http://blogger.com">Blogger</a>

HOW TO Remove “Subscribe To Posts (Atom)” Link to Blogger

You must have seen that at the lowest of your bloggertemplate there is a Subscribe to: Posts (Atom) link. Blogger has added it so that your blog visitors can subscribe to your Atom feeds. It occupies space at the lowest of the template and it doesn't look good. Many bloggers are searching for how to remove “Subscribe to Posts Atom” Link in blogger template, but they do not discovery the solution easily so i am viewing simple stages to remove default “Subscribe to Posts Atom” Link in blogger template. 
 
Posts Atom Link, blogger Posts Atom Link, blogspot Posts Atom Link
Here is the screenshot
How to Remove “Subscribe To Posts (Atom)” Link to Blogger?
  • Go to Blogger Dashboard --> Design --> Edit HTML
  • Backup your Template before making any changes to your blog
  • Now Expand Widget Templates
  • Press Ctrl + F and search the code shown below and remove it
<b:include name='feedLinks'/>

4. Save your template.

That's All...... You Are Done. .

If you found this post useful then please share it with your friends and if you are facing any problem, then use the comments section below.

How To 11 Effective Ways to Reduce Your Website's Bounce Rate

If you have been blogging for a while, you should have know different tactics of driving traffic to a site, but keeping visitors to stay longer and addicted to your pages is another thing.
It can be frustrating, especially if you have invest time and money to drive traffic to your product page or blog post, and you don't want that hard work to go into waste. Thus, businesses needs to optimize their first impression in order to reduce bounce rate.
Bounce rate is the measure of how visitor's come to a page of your site and leave without viewing any other pages. It will give you an important glimpse of whether or not visitor's is satisfied with your landing or brand page.



Bounce rate should not always be considered as a relevant metric. A blog that offer all of it's content on one page will have a high bounce rate.
When a visitor's comes to your site and find exactly what they are searching for, or a solution to their problem, then why do they have to stay longer or visit other pages?

I believe that the more a blog grows, the more diverse traffic it gets, more likely some of the traffic turn to bounce. The two legitimate factors that impact bounce rate are direct and search engine traffic.
Direct traffic - These are most likely regular visitor's that come to check if you have published a new post by typing your blog URL in the address, and leave after reading it, thus increasing bounce rate.

Search engine traffic - The more popular a blog gets, the more it will be ranked for more keywords. Those keyword can brings in traffic but not bound to be targeted.
Assuming i mention a story book in my blog post and started ranking for it, people searching for the book are most likely not interested in web design tips, so this will lead to a bounce back.

Here are some insight effective ways to reduce bounce rate and get a jump on SEO

  1.  Improve your design

The first impression of any landing page is how well organized and neat the site design is. Try to look at your design with an unbiased eye and ask yourself, is this appealing?
Create an engaging design that can easily capture reader's attention and gives them a visually harmonious feel about your blog with a clear navigation to direct reader's to another pages of your site.

  2.  Improve loading time

The loading time of your webpage is not only an important factor in SEO, but also in having a visitor to stay on your site. The more widgets or plugins and content your site contains, the slower your pages will load and the faster your site visitor's will leave.
Remove unnecessary plugins or slow loading visual element that may be contributing to your page size and also optimize your images and code to speed up your page loading time. Google pagespeed insights and pingdom are one of the most reliable tools to check site speed.

  3.  Check browser compatibility

Using one browser throughout the development of your site, failing to understand that what looks good in one browser may display completely different thing in another browser's. You can use your analytic tool to see the bounce by browser type or use a cross-browser compatibility testing tool like browser stack to check a page that influence your bounce rate.

  4.  Use responsive layout

Due to large number of user's surfing the web with smartphones, it is very important to have a mobile and large screen version of your website. If you have been receiving a large chuck of traffic from mobile users, then it is time to take a step further in developing your mobile site using CSS media queries to scale your site to fits wide range of any devices.


  5.  Navigation and usability

Having a super speed webpage isn't enough, what happens when a visitor land on your page? If a new visitor's can't tell what your page is all about within a few seconds, then there is a problem. Don't make people to hunt for information. Providing related links to other pages of your site can go a long way in engaging your readers more.
Implement search box can also be a great way of giving additional information to user's willing to learn more. Let user tell you want they want. Google custom search is a free service, so why do you have to suffer your page with it?

  6.  Avoid distractions

If new visitor's to your site is deluged with audio ads or player, pop-up ads, fly-out, auto-loading live chat and some other disruptive element, it can cause great increase in your blog bounce rate.
Pop-up annoys most loyal readers. In some rare cases, they may be useful to get people to sign up to a mailing list or increase social subscribers but with a well-timing.
Let's face it, nobody likes a site loaded with irrelevant element especially auto play audio or video. It is data consuming and it makes reader's feel disgruntled.

  7.  Ads placement

Stuffing your webpage with different ads don't only pissed off reader's, but can also get you penalized by Google. Though most website cannot survive without advertisement but you have to be conscious in positioning ads. Advertisement that's overlapping or too close to your content body or navigation can cause accidental click which force visitor's to leave your webpage. Also pop-ups ads are irritating and intrusive for visitor's.

  8.  Open external link in new window

When you are linking to another resource within your blog content, It is very important to open all external links in new window instead of redirecting user's off your site.
Including target="_blank" attribute within external link will perform the little magic.
Here is an example: <a href="http://www.example.com" target="_blank">Keyword</a>

  9.  Use good contrast

What else reader's observe beside great design or quality content? Certainly your blog contrast. No one will stay longer on a site they can't read either the font style or size is bad or the contrast level is poor. Paragraph with clear contrast, colors, patterns or boldly font quickly grab the attention of reader's and makes important content easier to find. Thus, your site should be readable as possible in any kind of devices with variety of screen resolutions.

  10.  Use catchy headline and short paragraph

Headlines needs to entice reader's to read on. Using catchy phrases in your headlines will quickly grad readers attention. Initially, this post headline suppose to be "How to reduce bounce rate" but how does it sound when you hear "11 effective ways to reduce your website's bounce rate," catchy right?


A big chunk of text are off-putting and no one is ready to read it. Use short paragraph, bullet points for better readability.

  11.  Keep writing great content

You can build a site that is constructively built with an eye catching design, load faster than a single HTML page, works perfectly well in all browsers, but if your content is inferiority, then you can expect a rapid shoot in your bounce rate.
Quick guides:
  • Check for any grammatical or typo error
  • Keep it simple enough to understand
  • Connect emotionally
  • Use paragraph and bullet points to highlight important phrases
  • Consider reader's point of view
  • Study your community and write different topics on what they love reading in that same series.

The above list are written from realistic standpoints. They worth thinking about probably trying, but wasn't an enchantment that promise to reduce bounce rate below 10%, nevertheless you can still get an appreciable bounce rate below an average.
What other factors do you think it can influence high bounce rate? How have you addresses the issue of bounce rate? Please share your views.

How To Disable Hightlight Function: Protect Your Blog Content From Copy and Paste

To write a very constructive blog content is a very hard work, which some bloggers don't understand what it takes, all they are looking for is where to copy content for their blog, which is really a very bad act, especially when your copied content is ranking higher than your original content. I can remember when i first started blogging, it took me 10-15mins before i can actually figure out where to start my write-up, but seems to be getting easier as time goes on.


Now the major trick you can use to protect your content from copy and paste bloggers is to disable highlight function. I also shared a tutorial on how to disable right click context menu on images, which you can also use it to protect your blog images.


How To Disable Highlight Function

  • Go to your dashboard
  • Click Template > Edit HTML > Proceed
  • Use ctrl F to find </head> and paste the following code above </head>

<script type='text/javascript'>
 if (typeof document.onselectstart!=&quot;undefined&quot;) {
 document.onselectstart=new Function (&quot;return false&quot;);
}
 else{
 document.onmousedown=new Function (&quot;return false&quot;);
 document.onmouseup=new Function (&quot;return true&quot;);
}
</script> 

  • Now save your template.

Alternative

You can also add it, using this second option.
  • Go to Layout > Add a Gadget > HTML/JavaScript
  • Paste the following code in the content box leaving the title box empty.

<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function (&quot;return false&quot;)
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script> 

  • Click on the Save button and you are done.
With this trick, your blog content is now safe from copy and paste bloggers.
Take few seconds to share it, if it help's a bit.

How To Show Or Hide Blogger Widget On Homepage, Post Pages, Static Pages, Or On Selected Pages

It is always important that you control how widget function in your blog, because their are some widget that are suitable mostly for homepage only while some makes sense post pages, archive pages, and so on. Most frequently asked question by my blog readers is that how can they hide a particular widget (especially recent post widget) from displaying in homepage in other to reduce the load time of their homepage, while some are interested in showing a widget on only homepage. So if you are also interested in controlling your widget performance, then this tutorial will trash out your worries.
We will be using different conditional tag to selectively display widget on any preferred pages.


How To Show Widget Only On Homepage

Use the following conditional tag to show widget on homepage only.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

WIDGET CODE HERE

</b:if>

How To Hide Widget On Homepage

<b:if cond='data:blog.pageType == "item"'>

WIDGET CODE HERE

</b:if>

How To Show Widget Only On Static Pages

<b:if cond='data:blog.pageType == "static_page"'>

WIDGET CODE HERE

</b:if>

How To Hide Widget On Static Pages

<b:if cond='data:blog.pageType != "static_page"'>

WIDGET CODE HERE

</b:if>

How To Show Widget Only On Archive Pages

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

WIDGET CODE HERE

</b:if> 

How To Hide Widget On Archive Pages

<b:if cond='data:blog.pageType != &quot;archive&quot;'>

WIDGET CODE HERE

</b:if> 


How To Show Widget On A Selected Post

<b:if cond='data:blog.url == "URL Of Selected Post"'>

WIDGET CODE HERE

</b:if>


How To Hide Widget On A Selected Post

<b:if cond='data:blog.url != "URL Of Selected Post"'>

WIDGET CODE HERE

</b:if>


How To Wrap Widget With The Conditional Tag

The conditional tag can be applied to any widget using the same procedure.
  • Go to your blogger dashboard
  • Click on Template > Edit HTML > Proceed (Mark/Tick Expand Widget Template)
Every widget has a code structure, but you can easily locate a widget using the widget title. Each widget code structure will look like the following:

<b:widget id='Widget-ID' locked='' title='Widget-Title' type=''>
<b:includable id='main'>


LARGE CODE


</b:includable>
</b:widget> 

Wrapping the widget with any conditional tag, the final result will look like the following:

<b:widget id='Widget-ID' locked='' title='Widget-Title' type=''>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

LARGE CODE

</b:if>
</b:includable>
</b:widget>

The conditional tag used above is just an example, you can choose any condition tag of your choice, and the same procedure applies to all.
Any queries or contribution/appreciation is highly welcome, and don't forget to share it with friends/followers.

How To Add Yahoo Smileys To Blogger Threaded Comments

Writing a very constructive content is a thing and people commenting on the post is another thing. Most readers actually don't like commenting on blogs, especially if they found your blog so boring, but this hack aims to increase your chances of getting more comments on your blog, as readers will love to see the functionality of the smileys by commenting your blog which will definitely brings you more exposure.




This hack works with blogger threaded comment and on all blogger template. Now follow the simple steps below.


How To Add Yahoo Smileys To Blogger

  • Go to your blogger dashboard
  • Click on Template > Edit HTML > Proceed (Mark/Tick Expand Widget Template)
  • Use crtl F to find ]]></b:skin> and paste the following code above it.

img.realcombiz {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

  • Search for </body> and paste the following code above </body>

<script src='http://rbcode.googlecode.com/files/yahoosmileys.js' type='text/javascript'/>

  • Now search for this line <div class='post-footer-line post-footer-line-3'> 
  • Find the next </b:includable> and paste the following code above </b:includable>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='realcombiz' id='ysmile' style='
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
</div><a href="http://realcombiz.com"></a></b:if>

  • Save your template
That's all
We hope this hack brings more positive effect to your blog. peace out pals :)

Simple Ways To Secure Your Blog From Hackers

The fear of most bloggers now is about them loosing their sweat and sleepless night they have put in-place in other to build a successful blog. This is not only happening to companies and government official page but also to individual who control a blog. How do you feel when you woke up on a blissful morning to check your blog stats or check maybe you have make some cash, but your access to your account is denied or found all your blog scattered, or found injected links in your footer and you are worried about what is really happening... The answer is so simple. You are hacked!
Hacked? yea you got that right.



If your blog is hacked, and you are so lucky, you might gain access back to your site, found the problem, remove it, and got things up. But the chances of getting for blog back is very low, that's why you have to be secured because an ounce of prevention is worth a pounds of cure.

So how can i secure my blog from hackers or spammers?

  1.  Back up

The most important thing i can recommend for you is to have a back up of your files if you really cared about your blog. There are tons of options you can use in backing up your blog. you can use external hard drive or use VaultPress, which provides the simple backup of not just databases, but all files associated with WordPress.
Even if you get your blog hacked, atleast you won't loose everything since you have the back up of your files.

  2.  Always Keep Your Blog Installation Updated

Since Wordpress is the most popular platform for blogging, so it's prey for hackers. Wordpress keeps upgrading their software version. By keeping up with the latest upgraded version, you will ensure secure, and easily fix the bug from the source.

You might be scared of loosing your posts if you upgrade to the latest version, but you can be secured by backing up, and if anything went wrong, then restore your back-up.

  3.  Don't Use Free Theme

Most bloggers prefer using free themes which is a risk taking. you don't know who code the theme, and it is very easy for a hacker to code a theme and inject some command that when installed, it will keep your blog wide open for the hacker to execute his mission.
This doesn't guaranty that all premium template are secured, you have to be carefull of the type of template you installed, the source and don't change your template often. Try to stick up with one.


  4.  Tough Password

The most common mistake among internet users was that they use one password for all their online account which keeps your account vulnerably. You have to adopt the act of using different password for each account and make use of something that is atleast 8-10 characters including uppercase and a symbol.
Though it may seems to be a tedious work to remember dozens of password, but there are variety of software you can use to store your password or write it down and keep it in a safe place.

  5.  Use Secured System

The most common way of getting your blog infected is to blog on public or cafe system, which might contain malicious script that automatically store your private information.
Secure your blog by using internet security and reliable anti-virus that will detect any malicious or attack found on your system.

  6.  Use Security Plugins

There are dozens of plugins that you can use to secure your blog from hackers. The best recommended plugins include:
This will limit the number of time a user can attempt to login, and if user exceed the attempt limit the account will get blocked, and they will need to request a new password from you. The two plugins are so important for you to implement if you are getting attacked that attempt to login before executing any mission.
This will remove meta information that a hacker could use against your blog.
This plugin will determine if your site is being accessed by an anonymous user or bot that aim to inject some malicious or script into site that will keep your blog wide open for the hacker to perform any action.


Have you been hacked before? We will like to know how you solve the problem. Any contributions, suggestions, queries is welcome.

How To Hide Links In Blogger Comments Using jQuery

It is always advisable to change blog comment attribute to nofollow or remove comments links completely in other to save your blog from panda effect. If you have been dealing with all sort of spam comments and you are so busy to review all comments, then this new blogger hack will help you with that by removing any link included in comments and replace it with ordinary text using jQuery.



How To Remove Links In Comments

  • Go to your dashboard
  • Click on Template > Edit HTML > Proceed (Mark/Tick Expand Widget Template)
  • Use ctrl F to find </body> and paste the following code above/before it.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

If you have been using jQuery library in your blog, then skip the above step and move to the next step.
  • Now paste the following code above </body>

<script>
$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script>

The code above works for blogger threaded comment, in case you are using the old blogger comment, then use the code below.

<script>
$('.comment-body p a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script>

Hope you found this useful? take few seconds to share it with friends/followers you think this might be of interest to.

How To Transfer Or Move Blogger Blog From One Account To Another Account

There may be so many reasons why you want to transfer your blogger blog to another account, probably you want to transfer it to a new partner account or you are tired of using your old email account.
It is always cool to have two different account on a blog as an admin, incase you lost password of a account, you will still have access back to your blog using the second account,  and if you don't know how to go about this, then this tutorial should trash out your worries.



How To Transfer Blogger Blog To Another Account

  • Login to your blogger dashboard
  • Click on Settings under the blog you want to transfer to another account
  • Under Permissions section, click on +Add authors link button, and a pop up window will appear or a box will drop down.
  • Enter the email address of the account you are transferring the blog to.


  • Now check the new email address to confirm the confirmation message sent to it.
  • Follow the link in the message sent and you are done.

Now after confirming the invitation, the new email account will now be made as an author on the blog. Select the new author as the admin of the blog from the drop down button so as to have total control of the blog and delete the old account using the cancel icon in front of the old account section.



The new admin now have total control of the blog like editing the template, removing other authors, publishing or deleting posts, changing address and so on. But you have to be preventative when choosing a new admin as partner for your blog, and make sure you choose someone you can trust.
Any queries or suggestions is welcome.

Stylish CSS Tooltip For Hyperlink

Tooltip is a message or hint that appears when a user hover mouse cursor on an icon, image, hyperlink or any other similar element. It is use to give description of an element for better user experience. This Tooltip is styled with CSS and works in conjunction with HTML code. It can be used on both blogger or wordpress self hosted blog. For a demo of how this tutorial works, hover your mouse cursor on the following link.



Adding CSS Code

If you are on wordpress, you will need to insert the following code into your template style sheet. For blogger hosted blog, follow the steps below.
  • Go to your blogger dashboard
  • Click on Template > Edit HTML > Proceed
  • Use ctrl F to find ]]></b:skin> and paste the following code above/before it.

/* Stylish CSS Tooltip By MrQasimAshraf.Blogspot.Com */
a:link,
a:visited {
position:relative;
}
.rbtooltip {
width:300px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:5px;
font-family:Verdana,sans-serif;
font-size:13px;
font-weight:normal;
font-style:normal;
text-align:left;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
line-height:1.5;
border:solid 1px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
-moz-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
-webkit-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
color:#2B2B2B;
background:#C0C0C0;
background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1));
background:-webkit-gradient(linear,left top,left bottom,from(rgba(192,192,192,0.8)),to(rgba(192,192,192,1)));
border-color:#999999;
}
.rbtooltip:before,
.rbtooltip:after
{
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
}
.rbtooltip:before
{
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}
a:hover .rbtooltip
{
text-decoration:none;
visibility:visible;
opacity:1;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.rbtooltip,
.rbtooltip.left {
left:0;
right:0;
}
.rbtooltip:before,
.rbtooltip:after,
.rbtooltip.left:before,
.rbtooltip.left:after {
left:40px;
right:auto;
}
.rbtooltip:before {
border-top-color:#999999;
}
.rbtooltip:after {
border-top-color:#C0C0C0;
}
/* Stylish CSS Tooltip By MrQasimAshraf.Blogspot.Com */
  • Save your template

Adding HTML code

Whenever you are drafting a new blog post and want to add the Tooltip to hyperlink , simply shift to HTML mode and paste the following code.

<a href="LINK-URL">KEYWORD<span class="rbtooltip">Tooltip Text</span></a>

  • Replace LINK-URL with your preferred url
  • KEYWORD represent the anchor text of the link
  • Tooltip Text is the description text that with appear when you hover your mouse cursor on the hyperlink.
  • Done!