.::CyberHax::.: Blogger Tutorials

Showing posts with label Blogger Tutorials. Show all posts

Home » Posts filed under Blogger Tutorials

Wednesday, July 10, 2013

How To Add Rainbow Color Effect To Your Blog Links On Mouse Hover

Hi friends! Rainbow color effect will give random colors to your link on hover. This widget works based on simple JavaScript. Once it's applied, all links on the page exhibit a rainbow effect on mouseover.

1-> Login To Your Blogger Account

2-> Click On Layout

3->Click On Add Gadget

4->Select HTML/JAVASCRIPT

5->Paste The Following Code

6->Save Your Template

All Set

Please Leave Your Question And Comment Below

Labels: Blogger Tutorials

Tuesday, July 9, 2013

How To Add Read More Button To Blogger Post

Some Times When You Turn Your Blogger Template To A Custom Blogger Template There Is No Auto Read More Button Or Text Below Post On Home Page. So In This Tutorial We Learn How To Add That Auto Read More Button Below Post On HomePage. This hack automatically create post summaries with thumbnails .

With using this we can control the following options as you wish

You can add default thumbnail image when your posts don't have any image.
You can turn off auto read more for some first posts.
Option to turn on/off read more for home page and labels page.

How To Add Auto Read More To Blogger?

First go to Blogger Dashboard > Template
Download a copy of your template
Click Edit HTML
Hit Proceed
Check Expand Widget Template checkbox
Find below code in your template

</head>

add below piece of code just above </head> Tag

<script type="text/javascript">
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJzgvTi98NVpdYG4XXwKSDEeP1-zsWWot1IhCeb9JDVDidxUeI57grTLv01os47QWQGk5eFsvU1e_nPwciHUrfq9haDQFYfHVBsdnztbUXRX6KaY2_klUaH4RuXWP4vj7XscHZqOvdqRE/s1600/no-thumb.jpg',
    words: 65,
    wordsNoImg: 80,
    skip: 0,
    showHome: true,
    showLabel: true
};
</script>
<script type="text/javascript" src="http://code.helperblogger.com/summary.min.js"></script>

You can easily customize above highlighted values,below are their meaning

showImage: true, If you don't want to show image thumbnail then simply replace true with false
imgFloat: 'left', If you want to float image at the right of summary then simply replace left with right
imgWidth: 120, This is width of image
imgHeight: 90, This is height of image
defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJzgvTi98NVpdYG4XXwKSDEeP1-zsWWot1IhCeb9JDVDidxUeI57grTLv01os47QWQGk5eFsvU1e_nPwciHUrfq9haDQFYfHVBsdnztbUXRX6KaY2_klUaH4RuXWP4vj7XscHZqOvdqRE/s1600/no-thumb.jpg', If you want to set your own default thumbnail then replace above image URL with yours.
words: 65, This is number of words when there is a thumbnail
wordsNoImg: 80, This is number of words when there is no thumbnail
skip: 0, skip some first posts, don’t apply auto readmore for them. If this option is set to 0 so that all posts are applied auto readmore.
showHome and showLabel: allow or not auto readmore for homepage and label page. true is allowed, false is not.

Now find below code in your template,

<data:post.body/>

replace it with below code,

<span expr:id='data:post.id'><data:post.body/></span>
 
<b:if cond='data:blog.pageType == "index"'>
    <script type='text/javascript'>summary("<data:post.id/>")</script>
<span style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read More</a></span>
<b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
        <script type='text/javascript'>summary("<data:post.id/>")</script>
    </b:if>
</b:if>

Finally take a preview of your template,if you thing that everything is alright then save your template,if not then customize it as you wish and save it :)

Labels: Blogger Tutorials

Friday, July 5, 2013

How to remove attribution powered by Blogger

You may have noticed at the bottom of your blog there is an attribution that says what template you are using followed by Powered by Blogger. We have had a few people ask us how to remove the powered by blogger copyright widget. So, I thought I would share a little tutorial with you on how to remove this from your blog! It will just take a couple steps. This is what it looks like before:

1. You will want to go to your ‘Template’ page and click on ‘Edit HTML’.

2. Hit Ctl F to bring up a search box. Paste this into the search box: ]]></b:skin>
Now you will paste this code: #Attribution1 {display: none;}
directly above ]]></b:skin> so it looks like the following:

3. Save and you blog will now have the powered by blogger attribution removed!

Labels: Blogger Tutorials

Wednesday, July 3, 2013

How to Customize Blogger Labels And Make Them More Beautiful | Part 3

Flash animated widget used to select category in a better way.It also attract the visitor for bloggers,there are many posts in blogger for better selection Label Animated cloud widget is used.this tutor will help you get flash animated cloud label widget.

1.Login your blogger account

2.Then go to Dashboard-->Layout

3.Click on "Add a Gadget"-->choose HTML/JavaScript

4.Add the below code

<div id="NBTFlashContent"><p style="display:none;">Cool Labels by <a href="http://www.harivind.com/">CBT</a></p></div> <script type="text/javascript"> /*<![CDATA[*/ var NBTFlashLabelSettings = {blogurl : "http://www.cyberhax.org/", color : "000001", hoverColor : "333334", backgroundColor: "FFFFFF", size : 11, speed : 99, width: 250, height: 300, transparency :true }; /*]]>*/ </script> <script type="text/javascript" src="https://lables.googlecode.com/files/labels.js"></script>

5.Red color highlighted Url change-->Your Blog URL

You can also change the width & height

width= 250

height=300

6.Done

Also Visit :- How to Customize Blogger Labels And Make Them More Beautiful | Part 2

:- How to Customize Blogger Labels And Make Them More Beautiful | Part 1

Labels: Blogger Tutorials

Friday, June 28, 2013

How to Customize Blogger Labels And Make Them More Beautiful | Part 2

Well you might have figured out that I have entirely customized my blogger template according to my taste and the one thing I love are the labels that simply categorizes your content according to what it comes in. So by default blogger provides a simple option to add labels and than choose from two different schemes the one is straight way of displaying your labels and the one is cloud style.
Well I am using the cloud version and I have just added some CSS styles that I have created by my own to modify the overall look of it. So you can see in the above image what kind of look you will get when you will apply the below CSS.
Well obviously you can edit the styles according to your preference or maybe add some more interactivity to it that depends on your creativity. So now jump in to the below tutorial and lets start the process.

Visit Blogger.com > Template > Edit HTML.
Now press Ctrl + F and search for ]]></b:skin> and paste below code above it.

#Label1 a{background:#f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));border:1px solid #aaa;display:inline-block;font-family:cambria;font-size:10px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}
Now this is the default code for modifying labels in blogger template, if this code does not work you might have something else constructing your blogger labels.

What if the above code does not work ?

This can be due to code your blogger labels are created with, just follow below steps to see your appropriate code and replace it with above CSS code.

So what you can do is just right click on your label in chrome browser and you will see something like in the image on the right, it’s the code constructing your labels.
So now just change the above CSS code starting with that code you found and it will work fine.

So that’s it this tutorial will give your labels a new look and will surely attract your readers to click on them and see how they work :) So do comment if you find any problems installing these CSS styles.

Also Visit :- How to Customize Blogger Labels And Make Them More Beautiful | Part 3

:- How to Customize Blogger Labels And Make Them More Beautiful | Part 1

Labels: Blogger Tutorials

Thursday, June 27, 2013

How to Customize Blogger Labels And Make Them More Beautiful | Part 1

Today I am sharing beautiful CSS3 labels style for blogger.This label hack can be easily applied to your labels by just adding some CSS code in to your blog. lets see how to apply this label hack

How To Apply This Label Hack?

Important - Before applying this label hack set your label style to Cloud.

apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,

.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

Finally save your template and you are done.

If you are getting any problem then feel free to ask it to me :)

Also Visit :- How to Customize Blogger Labels And Make Them More Beautiful | Part 3

:- How to Customize Blogger Labels And Make Them More Beautiful | Part 2

Labels: Blogger Tutorials

Tuesday, June 25, 2013

How To Add Subscription Widget With Social Sharing Buttons For Blogger

The Social subscription widget is for the people who wants more genuine readers and good fan following for them. Yes the Subscription widget is an RSS type , which the people will enter their email and subscribe to the updates of the blog. Whenever the user post new content they will get the news on their email immediately.

The Subscription widget here is mix up of CSS and HTML, and it is flavored with the Social media icons too, which reduces the blog space too.

1) Go to the Blogger and sign in with your account

2) After going to your Dashboard, you can see this in your blog

3) Left to the view blog an arrow is there, after clicking this arrow we get the options like below

4) Now select the Layout Option as shown in above

5) Then Click the Add gadget and Select the HTML/Javascript

6) Now paste this code in that box

<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3tIqVznvbmOdz93_2zmjEZc1FbwyUmv3L15SdxH73nQ5nkoBC3vZ588qVPBAZQGbsw8S9QL1T1Z8kh3MjmumFWRWoc7mxFeAUAlmyk7EdxnKnLlThUpppRlzJ67uAksXqYt1ThPVy8aU/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgueJYVC7uKz-l5v7qDgmFJMWJJzzhMhL95oRP6v4XvvW1he4HjyvBWjwdRvmurworib761NwWnDvc1Gg1lR-sAUMt_oR1pTA68hzjer1h9uKYPxJW7a7qFLtH98h2DHwp7AKb8G7wvvyw/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>

<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://facebook.com/hubhacker"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVzDQWbSMylEHwhIz7b3Aa3vhGpXgDkt67b4LS1jIXIH_exXx7uBtOa8W5OA88c6yy6TWjIZU_k8sAH09KiUl-zuSRxZsa6xWjApD4LSPkE9A8nP0WcRAm01lUXP0TVkpwrXsuJahks_Qh/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/hackerzgang"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLmTZx1clPSonE9kt9t3gkbrNNgmVr4gYD0-PzNLy3b6ERHMdqe2NKep1GklQqLdKw2C4DsLJmFXNN162iXXUhKOmNqxgHC6IWXtO77CVIJqOzGsa1buk2BFh7gwUmOMUjhur7dGxFo51r/s1600/bloggertrix-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ERyq-UewKsY3NNDVtyPf09WSWIDLlUCEK2J_p_Zd7hyHNBl2-tUu2z-kMP2mZloDTIAT-tvrU-YioPnvcgcAa1sic8fWlEYemHpZMqRqOwI3ze4TFD0EfZR_A26eNJgXF3e_jaK0avg6/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="http://www.feedburner.com/cyberhax"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtyVl1rBhkpT7IVJTmw2QOTVyF-6XCp87733k8Fdkv7T545UMwE5GVgtqWZCdc8SBoEEq9YjsHu0umChoCpNtLvsxig-EtwEnv6HdomdFNh8qKRtHaXyFC0vkj3031UA1kNu4f1CnZxZL0/s1600/Bloggertrix-Rss.png" /></a>
<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=cyberhax" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cyberhax', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="cyberhax" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div></div></div>

Replace userid with the googleplus page of your blog

Replace hubhacker with your facebook page of the blog

Replace HACKERZGANG with your Twitter fan page of your blog

Replace Cyberhax with your feedburner ID

Now please save your HTML/Javascript, its done.

Labels: Blogger Tutorials

Monday, June 24, 2013

How To Upload Or Change Favicon In Blogger Blog

Initially favicons could only be uploaded if they had been converted into .ico format, though it's now possible to upload a square-shaped favicon in .png.gif or .jpg format as long as the file size is below 100kb.

Faveicon of Cyberhax.org

I prefer to use this built-in feature instead of the methods I'd previously used to add favicons to my Blogger sites, particularly as the icon is hosted on the root of our domain (*.blogspot.com/favicon.ico or custom-domain.com/favicon.ico).

Since I have updated my icon as part of updating my Blogger template, I've documented my method (and troubleshooting) for others who are updating their Blogger templates.

Creating your favicon

To replace the default Blogger favicon with your own, you will need a square image (or favicon) which is at least 16x16px and under 100kb in size.

I opted for a 100x100px .png image of the Blogger Buster logo so that a larger version of my favicon is available for devices which support it.

How to upload your custom favicon to Blogger

Whether you are using an older "layouts" template or the updated Blogger interface, go to the Layout section of your Blogger dashboard which will display the "Page Elements" interface:

In the top left of the Page Elements section, you will see a section titled "Favicon" which displays a preview of the default Blogger favicon.

Click the "Edit" link in this section to bring up a window like this:

Click "Browse" and locate the image/favicon file on your computer. Once your file is uploaded, you'll see a preview of how your favicon will appear in the pop-up. Click "save" to replace the default icon with your own.

Can't see your new favicon?

Many bloggers using the built-in favicon upload have reported that they can't see their new icon appear in place of the default one.

Most find this problem is resolved by closing any browser tabs/windows in which your blog is displayed, clearing the browser cache and reloading the page (this happened when I first updated my own favicons).

I hope this Blogger Tutorial will have been useful for anyone wishing to update their Blogger site with a fresh new favicon. Feel free to leave your thoughts on this post in the comments section below.

Labels: Blogger Tutorials

How To Add Facebook Like Box To Website | Blogger Blog

In my previous post, I was discussed some easy steps on how to create a facebook page for your website. Today, I am going to tell you, how you can add a facebook page like box into your website or blogger blog easily. This small box is a great widget for bloggers which is used to promote your fan page. Having a fan page like box into your blog sidebar is a great practice to convert your visitors into loyal readers just by clicking the like button. So, let see how to add facebook page like box.

Add Facebook Page Like Box To Blogger

1) Log in to your blogger account.
2) Click on blog title in which you want to add a like box.
3) Go to layout and then click on Add a Gadget.
4) Select Html/JavaScript and paste the entire code given below in it.

<style> .DHIbloggerFB { width: 280px; height: 150px; border-radius: 3px; position: relative; background-color:#f4f4f4; padding:5px 10px 15px 0; } .DHIbloggerFB, .DHIbloggerFB:before, .DHIbloggerFB:after { background: #f4f4f4; border: 1px solid #ccc; } .DHIbloggerFB:before, .DHIbloggerFB:after { content: ""; position: absolute; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .DHIbloggerFB:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #ccc; } </style> <div class="DHIbloggerFB"> <div style="height:155px;overflow:hidden"> <fb:like-box href="https://www.facebook.com/hubhacker" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Fwww.btsnts.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&colorscheme=light&header=false&height=179&href=https%3A%2F%2Fwww.facebook.com%2Fhubhacker&locale=en_US&sdk=joey&show_faces=true&stream=false&width=300"></iframe></span></fb:like-box> </div> </div>

5) Replace facebook page URL with your own page URL.
6) Change width and height according to your blog template and save the gadget.
7) Done!

This is all about creating and adding a facebook page like box into your blogger blog. You should include this great widget into your blog which really helps you to increase your page likes that converts your regular visitors into your page fans. Whenever you update your page with the latest blog post, your fan page will let your fans to come to your blog and read the latest updates. And the great thing is that you will receive free traffic for your blog. Hope you like this tutorial.

Labels: Blogger Tutorials

Thursday, June 20, 2013

How To Create A Facebook Page For Your Website | Blog

Social Networking sites plays an important role in driving traffic to a website if used properly and effectively. Facebook is one of the major social networking website with millions of active users. If you are not promoting your website on it, then surely you are missing a great resource of free traffic. It is very easy to use facebook to boost traffic of your website by creating a fan page of your website on it. To create a fan page you just need to follow some simple steps.

Create Facebook Page

1) Create a facebook account if you don't have already one.

2) Log in to your account.

3) Go to create fan page, select a desired category which describe your website or business and then enter name for your fan page. For example name of our facebook fan page is "Hackerhub".

4) Click check box that says "I agree to Facebook Pages Terms".

That's all. Now your page will be active. You can like your page and ask your other friends to like by inviting them.

Add a LOGO

A display picture or logo is the first thing which gives impression to your visitors. Having a good profile picture for your fan page is very important. Even it will also appear in like box when you create one to add it to your website. I'll tell you later about this. First let see how to add a display picture or logo to your facebook fan page.

Follow these steps:

1) Click on Add Profile Picture
2) Click on upload picture and then browse a picture from your computer that suited best for your page. That's it.

Conclusion

Today we learn how to create a facebook fan page for a website that helps to generate traffic. In my next tutorial I'll tell you how to add a facebook like box in to your website and discuss some tips to increase website traffic from facebook page. If you need any kind of assistance or help, then please post comments below. I will surely solve your queries.

Labels: Blogger Tutorials

Monday, June 17, 2013

How To Change Blogger Template To A Custom Blogger Template | Blogger Template Customization

When I start blogging on blogger, I used to run my blog on blogger's default templates. But as I started learning more about blogging I feel that default templates are not so much attractive and professional. They are even not search engine optimized because they all was designed many years ago and don't even updated a single time after that. Search engines like Google has updated its search algorithms many times and they are continuously updating to improve search results and user's experience. That's why it is very important for us as a blogger that we used a SEO friendly template for our blog. We should change our blog's default theme with any third party templates. That's why today I bring a tutorial to help newbie bloggers so that they can learn how to change template in blogger.

Change Blogger Template

To change your blog template first you need to download a template from internet which you want to apply to your blog. There are many sources of blogger template on the internet from where you can get lot of professional templates easily for free. Just go to Google and search for "Blogger Templates" and download a template of your choice. Once you have your template, perform below steps.

Now click on the drop down menu and choose Template.

Press Backup/Restore button located at the top right corner.

First you should download your existing template as a backup. So, click on "Download full template" button.

Now click on Choose File button and choose your new template which you want to apply to your blog.

Once you select your template, simply click on Upload button for final step.

You are done!

Labels: Blogger Tutorials

Thursday, June 13, 2013

Blogger.com : The Best Blogging Platform For Beginners

I have started blogging with Google Blogger as it is simple to create and manage any number of with just one Google account . Google Blogger gives free hosting service. Initially I was skeptical about Google Blogger platform but now I am fully satisfied user of it.
So I have decided to write this post which will help the beginners to choose a better blogging platform. There are some good content management systems like Drupal or Wordpress with beautiful designs ,but being a new Blogger It is hard for you to manage web hosting, web designing etc which also needs some money. If you are new to blogging then I strongly suggest you to start your blogging life with Google Blogger service.

10 reasons to use Blogger over other blogging platforms ?

Google product : Being a Google hosted blog, You have an advantage of getting good page rank as the host authority is very genuine.

SEO ready : Google will index blogger blogs very quickly compared to other platform hosted websites.

While writing your post itself you will get 2 options to make your post SEO ready.

Creating your own permalink with strong keywords in it
giving a meta description for your post

You can tell the search crawlers how to index your pages based on “Crawlers and indexing” options

Security : Blogger blogs are highly secured compared to Wordpress or other Content management systems.You can enable 2 step verification for your Google account so that every time you will get a SMS verification code to your mobile while logging into blogger account.

Also Blogger is less vulnerable to spam comments compared to Wordpress.So you don't need to waste your time for reviewing all junk comments pointing to an external hyperlink.

Simple design and posting options : Even if you don't know about web designing or HTML you can surive through blogger service. It will give you beautiful website templates for free. You can modify them without touching the HTML code also.

There are hundreds of useful widgets. You can also install third party HTML widgets(without any knowledge about HTML !)

One more advantage of blogger service is it's mobile template feature. You can show a diffferent website template for Desktop and Mobile.

Blogger also supports multiple authors which is a nice feature for the people who want to build a community using the blog.

If you are trying to start a blog in your native language then go with Blogger. As a Google product there is no other service as good as Blogger for translation.

Easily manage a domain name : You can buy a domain form Google for 10$ and easily connect it with your blogspot blog. This is very simple that even a person without technical knowledge can also own a domain name.

You can also buy a cheaper domain through other registration operators but you need to know some patience to configure the domain with blogger. This is also an easy one as Google support documentation will explain each and every step involved in it.

ADSENCE advantage : ADSENCE is one of the easiest method to earn money through blogging.Once you own a blog and domain name, blog continuosly for 4 to 5 months to get a decent number of visitors into your website.Then you can apply for ADSENCE account which will be approved after verification. As a Blogger hosted website your blog will have an advantage of getting an early approval.

Get extensive Support : With thosands of experienced bloggers around you can get help from them easily through various forums and communities.There are a good number of websites to guide you about blogger blog designing,widgets etc. If your blog got some security problems, you can contact the Blogger support people.

Take Google products into your blogger account: You can directly embedd Youtube videos,Picassa photos and Google drive files on Blogger drive.You can also use your Google plus account to tag people a post by directly typing their name. You can automatically share your post link in Google plus(profile or page) while publishing the post itself.

Blog on the go : May be you are a busy traveller or a jobholder where Blogging is not permitted. Then also blog if you have a blog on Blogger service.Blogger gives you an option to post a blog post through E-mail.Send your post to a secret email ID (provided in your account), Blogger will publish it within minutes.

As Blogger is a Google child you can enjoy the best Blogger Android application. If you have an android mobile with a decent screen size then can blog from anywhere.

Easily transfer your blog : Blogger gives you an option for exporting your blog to other blogging services like WordPress.This is a wonderful feature if you want to self-host your blog.

Finally Its your decision to choose a best platform that suits to your needs. If you want to host your blog for free then Blogger is the best platform.

So decide wisely before you start a blog. For beginners Google Blogger gives a lot of choices. In fact you can learn about blogging and web designing once you start a blog at blogger.

Labels: Blogger Tutorials

Wednesday, June 12, 2013

Start a Blog on Blogger With 20 Easy Steps | Start A Blog Or Website For Free

Navigate to www.blogger.com using your Internet browser .
Sign in using your Google Account to get started.
If you do not have a Google Account, click “Get Started” to create one.
Enter a “Display Name” to be used to sign your blog posts and click “Continue”.
Click “Create Your Blog Now”
Select a “Blog title” and an available URL for your blog. You can check if the URL you are considering is available by clicking "Check Availability".
Enter the word verification and click continue.
Choose a starter template, which will act as the basic design/layout of your blog.
Click “Start Blogging”
You can create new blog posts, edit posts, and edit pages from under the “Posting” tab.
The title of your post goes in the text box next to “Title”.
The body of your post will get entered into the “Compose” text editor, where you will also be able to access basic text editor functions such as font size, text color, the ability to insert links.
You can also use the “Edit HTML” tab to insert your post in HTML format, if you prefer.
The “Post Options” section located underneath the “Compose” text editor will allow you to enable reader comments, HTML settings, and post the time and date.
You can now either select “Save Now” to save your post, “Preview” to preview your post before publishing to your blog, or “Publish Post” to publish your post directly to your newly created blog.
If you wish to change the design of your blog from the starter template you selected when initially creating your blog, you can do so under the “Design” tab.
From within the “Design Tab” you will be able to edit Page Elements, HTML, and change your template with Temple Designer.
If you want to adjust other settings such as who is able to view, contribute to, or comment on your blog etc, click the “Settings” tab.
You can adjust publishing, comments, archiving, permissions, and all other settings from the sub-tabs located under the main “Settings” tab.
You can add new authors that are able to contribute to and edit your blog by clicking the “Settings” tab> “Permissions” sub-tab, and selecting “Add Authors”.