Showing posts with label Blogger tips. Show all posts

How To Change Your Blogger List Post Into a Grid or Gallery View

Generally, all default blogger template are arrange in list style, while some bloggers (especially those who run a fashion blog) have been looking for a way to style their blogger template to a grid or gallery style. I have receive couple of emails from different bloggers asking, if there is a way they can style their blogspot template into a grid style. Now here i come with a hack that can do the job perfectly well.

This hack will position your post thumbnail at the top, and align the post summary at the bottom with an automatic jump break or "read more" link, which will appear at the end of each summary after a specified number of characters. Bigs-up to Muhammad Hassan on these.
The hack will only work on homepage, archive, label and search page (not with Google custom search.) Love that? Let's get it done then.

Turning List Style to Grid Style

Go to your blogger dashboard
Click on Template > Edit HTML
Use ctrl F to find </head> and paste the following code above/before it.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var thumbnail_mode = "yes" ;
summary_noimg = 400;
summary_img = 180;
img_thumb_height = 130;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Grid Style Hack For Blogger By www.realcombiz.com
*/
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
//]]>
</script>
<style type='text/css'>
.post {width:44%;height:370px;float:left;margin:10px;position:relative;display: block;}
.post h3{height:32px;margin-top:60px; margin-bottom:-15px;padding:5px;font-family: Helvetica, Arial;line-height:1em;font-weight: bold; font-size:16px;letter-spacing:-0.5px;}
.post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}
.post-footer {margin-top:20px;height:20px;}
.post-labels {display:none;}
.mobile .post {width:auto;height:auto;}
.mobile .post-body {height:auto;}
</style>
</b:if>
</b:if>

Now search for <data:post.body/> and replace it with the following code. You may find 2-3 occurrence of this line, but don't replace the first occurrence with it.

<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Read More...</a> </b:if> </b:if>

Customization

If you don't want to show post image thumbnail, change "yes" to "no"
"400" represent the number of characters to be displayed if a post has no image.
"180" represent the number of characters to be displayed if a post has an image, but only the first image within the post structure will be use as thumbnail.
The height of the thumbnail is "130"
The width of the thumbnail is "220". Both the thumbnail height and width value can be adjusted to your own preferred value.
You can change the word "Read More..." to something more enticing like "Continue reading..." Better still, replacing the read more link with image button will be super-cool.

Note: You may find your Home, Newer, Older post link missing. Don't worry, here is a fix for it. Go to the Edit HTML section of your template, find <b:includable id='nextprev'> and paste the following code after/below it.

Save your template. Taaddaaaa! You are done.

How To Change Feedburner Email Subject Line To Your Blog Post Title

The best way to turn first time visitor's to a regular readers is to encourage them to subscribe to your RSS feed. But how bad is it when they saw your blog RSS update in their email and they still don't read it? It means your headline is boring. Have you ever subscribe to a blog via email? If the blog burn their feed using feedburner, you’ll see the subject line and the “from” field bearing the name of the blog that you subscribed to. That's boring, don't you think so?

We have discuss the importance of headline in different post and also wrote a post on how to write compelling headline that people can't resist. But how do you feel when your captivating headline never get clicked due to the fact that it was hidden behind a boring subject line?
There are few blogs that I subscribe to that I will open their email to see the content regardless of what the subject line says. While there are some that i sometimes delete without opening. The ones that fall in the latter category can still urge me into reading their post if i see an enticing subject line.

By default, people who subscribe via email to a blog that uses Feedburner as their feed manager will receive a generic email whose subject line will bear the blog title like:

RealcomBiz

But after customizing your blog feedburner email subject line, your blog updates will appear in your blog subscribers email like:

RealcomBiz - How To Change Feedburner Email Subject Line To Your Blog Post Title

Sounds good? Then let's get it done.

How to Create a Custom Subject Line for Your Blog’s

Log in to your Feedburner account.
Click the name of the feed you want to update.
Click on the "Publicize" tab.

Choose "Email Subscriptions" from the navigation menu at the left hand corner, then click on "Email Branding"
Inside the "Email Subject/Title" box, enter the following code.

${latestItemTitle}

The above code will replace your blog title with your latest post title. If you want your blog title to show alongside with you latest post title, use the following code.

Your-Blog-Title - ${latestItemTitle}

Replace Your-Blog-Title with your blog name, or you can still use it in another way round for more effectiveness like:

${latestItemTitle} - Your-Blog-Title

If you publish more than one blog post daily, paste any of following code under the text area that says "Change Subject when an email has 2 or more items"

Your-Blog-Title (in this message: ${n} new items

Your-Blog-Title - “${latestItemTitle}” plus ${m} more

${n} - shows the total number of items
${m} - shows the number of items beyond the latest

You might also like to check out our 5 Stylish Feedburner Email Subscription Box.

Save your changes when you are done with the editing. That's all.

How To Stick Or Float Widget In Blogger

Most big blogs have sticky widget that scroll along when visitors move up and down. The effect is usually applied to navigation menu or subscription box, but what kept most people thinking is how they can add the effect to their blog widget. Does that sound like you?

This effect will make a widget float downward when visitors scroll down and stay on its original position when visitors scroll up and reach the widget position. The trick is applicable to any widget so far it has a unique ID, regardless of its location, be it top, bottom or sidebar.

The effect is added to the first navigation menu on the demo page.

How To Add It Blogger

Go to Template > Edit HTML
Use ctrl F to find </body> and paste the following code above it.

Replace WIDGET ID HERE with your widget unique ID.

How To Get Widget ID

Visit any page on your blog, but make sure you have already log-in into your dashboard
Right click on the edit icon (wrench icon) below the widget you want to apply the trick to.

Select Copy Link Location and paste it into a notepad.
You should be having something similar to the code below

http://www.blogger.com/rearrange?blogID=****************&widgetType=HTML&widgetId=HTML**&action=editWidget&sectionId=crosscol

Copy the widget ID after the line &widgetId= and place it in the line specified above.

If you have any queries or suggestions, feel free to drop it in the comment.

Add Copyright Notice With Read More Link to Copied Text of your Blog

It's always a good idea to protect blog content from copy and paste bloggers, and this make us to write on how to disable highlight function and how to disable right click context menu on images. But i think i need to provide something more outstanding, so 1 will be sharing with you, how you can add copyright notice to copied text of your blog. But it only works with all major browser except internet explorer.
This is how it works. When someone copied your blog content and paste it any anywhere, the script will add a link back to your site as the original source with a copyright notice. Sounds cool, right?

If you are on Wordpress you can use iCopyright or add the following code into your blog head section. But for blogger follow the below steps.

How to Add Copyright Notice to Copied Text

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

<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var pagelink = "<br/><br/> Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright © RealcomBiz"; // You can change this to your prefered text
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}
document.oncopy = addLink;
</script>

You can change the above highlighted line to your own preferred copyright text.
Save your template. Done!

If you have any queries or suggestion, feel free to drop it in the comment box.

10 Activities That Will Cause Your Blogger Blog To Be Deleted

Blogger platform is no doubt the best platform for newbie bloggers to start off. There are lot's of controversial that blogger team are deleting blogs for no reason which i don't believe. Google (blogger) have set Content policy and Terms of Service and any blogger that violate the rules will get is blog suspended or deleted.

No blogger want his/her years of hard work to go in vain likewise Google don't want any blogger to experience such catastrophe, but still want to create a spam free community for its users. That's why they set terms and condition in place which i believe we all accept it but not sure that we all read it.

What are the reasons why your blog is deleted?

1. Violating privacy

Publishing another person personal and confidential information without the person permission is strictly against Google terms of service. Example include: contact information, home address, email address, credit card numbers, driver's license numbers etc.

2. Impersonation

Stealing someone else identity is against Google policy. Pretending to be someone else when you or pretending to represent another organization or group when you are not, is highly punishable under the law.

3. Copywrite violation

Google have been taking legal action on any blog owner that go against its content policy. No one likes it when someone copied their content without crediting it. If by anyway the owner of the original content report to Google, then your site will be completely deleted if you continue to plagiarize another people's content.

4. Hate speech

Blogger is a platform where anybody can share is opinion, stories, news etc. And it's true that there is freedom of speech but up to a certain level. Discriminating other sex, age, religious or ethnic group is not permitted by Google and it can lead to suspension or permanent deletion.

5. Violence

Threatening other people or certain group of people on your blog is against the law and Google policy. Also, don't encourage reader's to take violent action against another person or group of people.

6. Malware and viruses

Malware and viruses is against better user experience, that's why Google is taking all possible action to make internet safe for its users. If your site is infected by virus or distributing script that attempt to install software, or steal another people's personal information will lead to a permanent deletion of your blog.

7. Adult Content

Distribution of adult content like images and videos or pornographic is allowed on blogger but you must be sure to mark your blog as "Adult" oriented site from the settings of your site. by not complying with these rule will cause your site to be deleted. You can still make money from an adult site, but their is limited amount of ads banner you can place on the site.

8. Child Safety

Your site must be safe for children. Do not publish any content that encourage or promotes sexual attraction to children. Also distributing child pornography is against Google terms of use and can lead to a severe punishment if reported to higher authorities.

9. Spam

Spam is the most foulest activity you can perform with your blog. All major search detest any user or blog that have be tricking their robot with some blackhat seo techniques just to boost their blog up in any search listing. Any blog that is cut in this act will be removed from indexing and both the user account and the blog will be deleted.

10. Illegal activities

Using blogger to encourage people to involve in illegal activities like drug, weed, drinking and driving is against Google terms of service. Any illegal activities that you know is punishable under the law is not allowed Google and will lead to permanent ban.

Blogger is not the only platform that set terms of service for its users, every other platform does too. Abiding by their rules will keep your blog safe but violating their terms of use will cause your blog to be banned or deleted.
Have you ever experience burden? Share your story in the comment and we also welcome any queries.

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.

DEMO: Blogger TipsWe Offer The Best Blogger Tips

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 RealcomBiz.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 RealcomBiz.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!

Hope you find this post useful? Feel free to share it using the share button. Any queries or suggestions is welcome.

The most frequently asked question by our readers is that, they suspected someone (maybe an hacker) is tampering with their blog, because they notice that when they copied any line of text on their blog, it always come with - See more at: The post url #sthash, how can they fix that? This problem also occur on this blog too due to the ShareThis script that was used on this blog. This is not a problem friends, it just another intergration of new tracking feature introduce by Sharethis called CopyNShare.

CopyNShare can be use to track all sharing that occur on your blog when a user copies and paste any line of your blog which always come with a unique #sthashtag after the pasted text.
If you have been using ShareThis widget or our floating bar, then you may experience such bug. All what we need to do is to disable CopyNShare.

How to disable CopyNShare in Wordpress

Go to Plugins > ShareThis
Uncheck Enable CopyNShare Beta

Done!

How to disable CopyNShare in Blogger

Go to your blogger dashboard
Click on Template > Edit HTML > Proceed (Mark/Tick Expand Widget Template)
Use ctrl F to find the following line

To find the above code easily, simply search for stLight.options and replace the script above with the following code.

Save your template and you are done!

Now you will be able to copy and line of text in your blog without any text ending it. If you have been experiencing any difficulty in using any of our script, we really apologies, everything should now be working fine now. Any queries or suggestions is welcome.

Feedburner is the most widely used email subscription service and due to this vastly usage, Feedburner have been facing some technical problems, which makes most blogger to start shifting to premium email service like Aweber and FeedBlitz.
Recently, Feedburner also encounter a problem concerning the FeedCount chicklet displaying zero subscribers for all subscribers instead of showing the correct number for both RSS Feed readers and email subscribers and this happens to be around 24 September 2012 or so. Now here comes another similar issue, most bloggers are complaining that their email subscribers list are totally wiped off while some are reduce to a very nastiest point.

What should i do?

There is nothing to worry about, such technical issues are obvious to large email service like Feedburner. This doesn't disturb your email subscribers from receiving your post update via their email account and don't worry about loosing your subscribers list even if you don't have any backup. It's just another bug, your subscribers list will be restored to the last piece as soon as the issue is resolved, though there is no update from Feedburner for now, but hopefully the problem should be resolved in 5days time.
Visitor's judge site reputations base on the social and email subscribers. So in other not to leave a negative impression on new visitor's, it is advisable that you remove the FeedCount chicklet from your blog until the bug is fixed, and for you to stay on the safe side, always backup all your things

How To Backup Your Email Subscriber Lists

The first step is to login into your Feedburner account and choose the blog in which you want to backup the subscriber list. Now from the navigation tab, click on Publize > Email Subscriptions > Subscription Management

Now scroll down and click on View Subscriber Details and it will display two options, just click on the Export: CSV and you will be prompted to save a file which contains all your email subscribers. Choose where to save the file and you are done.

Have you been facing this same issue? Then feel relaxed, hopefully the problem will be fixed soon, and don't be scared of loosing your hard earned subscribers, it's just another bug, but make sure to backup your subscriber lists.
If you have a queries or suggestions, please don't hesitate to ask.

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.

How To Recover Deleted Posts or Pages In Blogger

Due to some frequently asked question by some of my readers concerning hot to recover deleted blog post, i will be sharing the trick behind it with you. If you have been noticing the url in your address bar whenever you are composing a post, you will see that there are some digit numbers at the end of the url. This is the unique id of the post. Every post has its own unique id which you can use to restore your lost posts.

You can also recover your post if you subscribe to your blog feed via email, but incase you don't subscribe to your blog feed, you can recover your post using the search engine cache.

How To Get A Cached Copy

If your post is indexed by Google, search for the deleted post in Google using your full post title for easy finding, click on Cached below the search result post title and it will show you the whole deleted post content in a preview mode or click on the arrow next to the description section if you probably don't see Cached below the post title.

After clicking on Cached, you will be taking to the preview page of your post. Now you will need to get the post ID of the post.

How To Find Post ID

On the post preview page, press ctrl U on your keyboard and look for the post ID in the large chunk of code. You can locate the post ID by searching for <div class='post hentry'. below this line there will be some digit which represent your post ID.

<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<a name='4292232541976802211'></a>
<h2 class='post-title entry-title' itemprop='name'>
Reasons Why Guest Blogging May Harm Your Blog and How to Handle them
</h2>

Now that you have locate your post ID, we will be using both the post ID and your blog ID to recover your post.

How To Find Blog ID

Login to your blogger dashboard and select the blog you want to find its ID. Choose any page of choice (Pages, Template, Layout etc.) and look at the URL in your address bar. There will be some digit numbers at the end of the URL as shown in the screenshot below.

Using Blog ID And Post ID To Recover Deleted Post

Now that your blog and post unique ID is ready, you will need to insert it to the following code, and you will be redirected to your post editor with your deleted post in the content box (including both images and texts).

http://www.blogger.com/blogger.g?blogID=7494753165656524768#editor/target=post;postID=7899343232623142546;

Replace 749475316565652476 with your blog unique ID
Replace 7899343232623142546 with your post ID

It's now up to you to do whatever you like with your post.
Hope you find this helpful? take few seconds to share it.

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.

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>

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

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

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:

Limit login attempt OR User locker

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.

Secure Wordpress

This will remove meta information that a hacker could use against your blog.

SpiderSquash

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.

7. Two-part Authentication

It also makes a whole lot of sense by using two-part authentication, which means that you need more than one password to login into your account. You will be able to login with your password and a special key that will be sent to you as a text.

With the few tips shared in this tutorial, if you put it into practice, then you should have your blog secured. It may seems to be a very tedious work, but ounce of prevention is worth a pounds of cure.
Have you been hacked before? We will like to know how you solve the problem. Any contributions, suggestions, queries is welcome.

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>

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 == "item"'>
<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 :)

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 == "archive"'>

WIDGET CODE HERE

</b:if>

How To Hide Widget On Archive Pages

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

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 Verify Your Website Or Blog On Pinterest

Pinterest just roll out website verification features for profile pages. This feature is intended to let other pinners learn more about the people or businesses they're following on Pinterest and also create a little more authority and credibility to your pages or brands.
If you have been editing your profile settings recently, you may noticed that the website verification option have been included to the setting options, which you can use to link your Pinterest account to your blog or site alongside with a checkmark next to your domain in search results and on your profile.

The bonus you will get from this changes is that the link from your profile happens to be a do-follow link for mean time, which means you will get some extra link juice in form of SEO benefits.
After verifying your site on Pinterest, the globe small icon that appears on your profile, will be replaced with the full url of your website and with a checkmark icon notifying that you have been verified, don't you think this new feature really make sense?

Well since everyone is concerned about is site traffic and engagement level, then we should consider this feature as a tool to generate some. Now let's go straight to the point without wasting much time.

How To Verify Your Website On Pinterest

Go to Pinterest and login to your profile. Then click on your profile name which is located at the top right corner and select Settings.

On your profile settings page, scroll to the bottom of the page where you will find the website field and enter your website URL and click on the Verify Website button.

On the next page you will be given two different options to verify your website. You can verify your blog or website by uploading a HTML file onto your hosting server and let Pinterest verify it. But i will only discuss on how to verify your website by placing HTML meta tag, because this the only method most bloggers or webmaster can follow especially if their blog is not self-hosted.

Now click on the Verify by meta tag link to continue.

In the next window, copy the HTML meta tag and go to your website template Edit HTML section and paste the HTML meta tag code after <head>

For blogger:

Go to Template > Edit HTML > Proceed
Find <head> and paste the HTML meta tag code after it.
Save your template.

After pasting the HTML meta tag in to your <head> section, click on the Click here link on the Pinterest verification page, as Pinterest will need to confirm that you have placed the meta and get your website verified.
Once you are verified, you will receive a notification stating that We successfully verified your website!. Click on Go to your profile to see your website appearing next to your profile about section.

Now you can remove the HTML meta tag from your template if you wish and you are done.

Did you find Pinterest beneficial for your business or brand? Have you verified your website on Pinterest? What do you think about this new signal?
If you have any question or contribution, feel free to drop it.

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>

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.

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.

Show Pinterest Pin it Button On Images On Mouse Hover

If you are thinking of using Pinterest effectively for your business, then consider applying this awesome hack to your blog images. Pinning image will now get more easier for you and your readers after applying this hack. The pin it icon will appear on mouse hover and it works on most browsers like Firefox, Internet explorer, Google chrome. But it doesn't work in dynamic view, mobile template and when you enter your blog page using read more link.
On mouse hover the Pinterest pin it icon will appear on your images as shown in the screenshot below.

In our previous post we also shared a tutorial on how to disable right click on blog images which might also be of an interest to you.

How To Add Pinterest Pin it Button To Images

Go to Template > Edit HTML > Proceed
Use ctrl F to find </body> and paste the following code above/before </body>

Save your template.

How to block the button on a particular image?

If you wish to block the image from appearing on a particular image, simply assign nopin class to the image tag in your post editor after switching to HTML mode. See the example below.

You might also like:

Hope you found this useful? Take few seconds to share it.
Happy Pinning!

Disable Right Click Context Menu On Your Blog Images

The most popular way bloggers use in protecting their site content is by disabling right click on the whole blog content, but this action makes some loyal readers to feel depress with limited functions associated to the right click such as open link in new window, bookmark this link, reload and back. But you can still protect your blog images by disabling right click on only images and not the whole blog, which still makes sense.
This effect can be apply to a single image or the whole images on your blog, using a few line of code. both the two hacks will be shared in this tutorial, and for a demo of this hack, simply click on the image below, and see what we are talking about. Cool right?

How To Disable Right Click ON Single Image

In other to disable right click on a single image, you will need to add a context menu event handler code into the image tag. The following code is the code you need to insert into your image tag.

oncontextmenu='alert("Image protected");return false;'

Now in your post editor, simply switch to HTML mode when your are about to disable an image. The image tag will look as follow:

Adding the context menu snippet into to the image tag, the final result will look as follow:

You can change Image protected to your preferred text as it is the alert text that will appear when a reader click on the protected image.

How To Disable Right Click On All Images

Go to Template > Edit HTML > Proceed
Use ctrl F to find </head> and paste the following code after/below </head>

The code above will disable context menu on all your blog images and replace it with an alert box.

Hope you love this new hack?
Suggestion/comments are highly welcome, as we love to hear from you and feel free to share it with friends and followers using the share buttons.

Add Adsense, Banner, Search Box Or New Widget Section In Header

I saw a question in a forum concerning how to add adsense banner inside the header area, in which no one reply to the query, but i later gave her a solution to it, and i think i should share the trick behind it with my loyal readers too.
This tutorial will be base on how to add new widget section in your header. Actually you can add any widget of your choice to the new widget section.

How To Add New Widget Section Beside Header

Go to your blogger dashboard (back up your template)
Click on Template > Edit HTML > Proceed (Don't Mark/Tick Expand Widget Template)
Use ctrl F to find the following line

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>

Now add the following new widget section code below the code above.

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

The final code should look like the following:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Styling With CSS

You will need to style the new widget section with CSS so as to position it beside the header

Search for ]]></b:skin> and paste the following code above/before ]]></b:skin>

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

Now Save your template.

Installing New Widget

To add widget beside the header section, simply go to Layout and click on Add a Gadget as shown in the screenshot below.

You can add any widget of your choice beside header be it an ads banner, search box, social widgets etc.

Hope you like this hack pals? We are also thinking of adding/replacing the widget inside our header section, which widget do you think it will be suitable for that position. We will love to hear from you.

Happy hacking!

How To Change Your Blogger List Post Into a Grid or Gallery View

How To Change Feedburner Email Subject Line To Your Blog Post Title

How To Stick Or Float Widget In Blogger

Add Copyright Notice With Read More Link to Copied Text of your Blog

10 Activities That Will Cause Your Blogger Blog To Be Deleted

Stylish CSS Tooltip For Hyperlink

Disable CopyNShare - Copied Text Ending With #sthash

Feedburner Showing False Email Subscribers - Back It Up

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

How To Recover Deleted Posts or Pages In Blogger

How To Hide Links In Blogger Comments Using jQuery

Simple Ways To Secure Your Blog From Hackers

How To Add Yahoo Smileys To Blogger Threaded Comments

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

How To Verify Your Website Or Blog On Pinterest

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

Show Pinterest Pin it Button On Images On Mouse Hover

Disable Right Click Context Menu On Your Blog Images

Add Adsense, Banner, Search Box Or New Widget Section In Header

Widgets

Categories

About Me

Recent Posts

Let's Connect

Site Links