My Web Blogger Tricks

Make A Rollover Image Effect - Image Changes On Hover

2015-04-02T07:30:00.002-07:00

Attention: This tutorial takes you no more than 2 minutes to learn.
A rollover or mouse over image is a great image effect you will have seen used on lots of blogs and websites. When you use this effect with an image or picture you add to your blog, the image will change to a different image once you hover your cursor over it. It's also a very easy to use and can have so many uses.

Here's a preview of a rollover image. Place your cursor over the image to see it change:

The image is also a clickable link, so you can use it as a link on your blog.

More Examples : Kate the author of Cronicles Of A Country Girl has used this effect to display two versions of photos. In her words "Basically, what I wanted to show on my blog was the original photo, but if you move your mouse over it, you’d be able to see the SOOC version. (SOOC means Straight Out Of Camera)."

You can check out the results here - Kates Mouseover Images

Making Rollover Effect Image

This is the code we use to make the image:

<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>

You now need to customize the code by adding the images you want to use & the address you want it to lead to when clicked.

In the above code change the following:

1. TARGET URL GOES HERE

Place the address you want the image to lead to when it's clicked.

Example: http://www.spiceyupourblog.com

2. URL OF FIRST IMAGE GOES HERE (x2)

Place the URL of the first image here. This is the image shown before you hover over it.

Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

3. URL OF SECOND IMAGE GOES HERE

Place the URL of the second image there. This is the image that appears after your cursor hovers over it.

Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/Blogger-2.png

Once the changes are made, you are done. You can place the image in your blog posts/sidebar or anywhere html can be used.

Drop Your Comments And Questions Below.

Source: spiceupyourblog

How To Add Stylish Sliding Up Image Description Widget

2015-04-01T23:07:00.003-07:00

Another widget that adds a great look to your Blogger site is the sliding up image description. You can incorporate this stylish widget via this tutorial by the guys at Bloggertrix. You can add it on the sidebar and if you have a special post, you can link it as well. CSS and HTML are basically used so it’s easy to customize if you wish to change the images.

Blogger Dashboard > Layout

Add Gadget > HTML/Javascript

Paste this code:

<style>

.image-box {

width:280px;height:280px;overflow:hidden;background-color:white;

border:1px solid #ccc;float:left;margin:1px 1px;

font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;

color:#333;

}

.image-container,

.image-details {height:280px;border:5px solid white;background-color:#ffc;

transition:margin-top .4s ease-out .4s;

}

.image-container img {

width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;

max-height:none;

background-color:black;

}

.image-details h4,

.image-details p {

margin:0 0 .2em;padding:0 0;height:70px;

}

.image-details h4 {

font-size:120%;height:auto;

}

.image-details .details {

padding:10px 12px;overflow:hidden;

}

.image-details .more {

color:white;text-decoration:none;display:block;

text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;

}

.image-box:hover {border-color:#bbb; width:280px;

height:280px;}

.image-box:hover .image-container {margin-top:-160px}

.image-details .more:hover {background-color:black}

</style>

</div>

<h4>Lorem Ipsum</h4>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>

</div>

</div>

Save.

Note: Make a backup of your template before attempting to edit it.

Source: allblogtools

Google’s $100 Chromebit Will Turn Any Display Into A Computer

2015-04-01T23:02:00.002-07:00

Asus-built plug-and-play device brings improved portability and mobility for all

Flexible working could be about to get a lot cheaper following the launch of a new computing dongle device from Google.

The search giant has teamed up with Asus to unveil the Chromebit – a $100 device which, when plugged in, will turn any display or monitor into a computer.

At just an inch long, the Chromebit packs an impressive amount of power into such a small space, sporting a Rockchip 3288 processor, 2GB of RAM, 16GB of storage, and support for Wi-Fi and Bluetooth.

Connecting to displays via USB or HDMI, it will link to accessories such as keyboards via Bluetooth, and could revolutionise the way schools, small businesses or remote homes live and work.

‘Smaller than a candy bar, the Chromebit is a full computer that will be available for less than $100,’ Google said.

‘By simply plugging this device into any display, you can turn it into a computer.

‘It’s the perfect upgrade for an existing desktop and will be really useful for schools and businesses.’

The Chromebit is set to go on sale this summer, available in three colours, with a UK price to be confirmed soon.

The device is the latest effort from Google to maximise its computing product lines alongside its already-successful Chromebook line of laptops.

Last month, the company revealed the second generation of its Chromebook Pixel laptops, with the updated Chromebook Pixel 2 featuring boosted power, a 13in touchscreen display, and two new USB Type C ports which looks to enable multi-device charging by combining power, video and traditional USB ports into one cable.

Source: techweekeurope

14 Amazing Examples To Customize Blockquote Style In Blogger!

2015-04-01T05:02:00.000-07:00

A block quote or block quotation is an extract in a written document, set off from the main text as a distinct. We all quote great authors but we all must present these great words in an extra ordinary way using a beautiful blockquote. We have created simple CSS codes for around 14 Blockquotes, which are outstanding in look and feel. These blockquotes will give you an idea on how to create your own customized blockquote for your blogs and web pages.

1- Blockquote With a Fancy Border and Owl Image

Blockquote Code:

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugeyPAGGUnesvBd_oryPtYOI1npqBMu5rtVv5CFH0rUaUFga0VYloVUga9cf-WEf64qES3wM-P4P1XWwsvCVx0pV78R0wXf4MOSSZjv8T6zznsRihEQQwhXhRCSglQU7HnKfH-Gt_TKI/s400/owl.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;

}
blockquote p {
margin: 0;
padding-top:10px;
}

2- Blockquote With a Purple Corner Label and Border At Bottom

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtFASJjivkEGAv9HRZHaD6TU4GtdwERMZIQNkxmcyrPj_DNMyURtF-7bVdAYK-QrhAFgnEaZYvVrEYz8mdGWZl6ZOFu-TVF4feAs9qSY0LP2FyiETBOS02T5aPGZFKJCW_RcbUoP60XWM/s400/angular-purple.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #435388;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

3- Jigsaw Blockquote With An Image At Right Corner

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZQiz6ONrE4rwAYUDAMRvuZrAiZUwvhpFfwPwe4Zqzc2noNkaIevvL48F3C9YP-8kfabiWhbbaG5WBrNMthE6-wXWSc9v-6KloN4LOJU4eYJUCAZescjA6To0WHwmkkph9Sh6G_LnDfg0/s400/block22.gif) no-repeat right bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

4- Blockquotes With Classic Left Borders

Blockquote Code:

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBFBgQL9dcrhOYyFwyl1qIA5lxkQIgUA8W9bETPc9aidw7kC8mwdMcmxxvFesXCKb0Mc6Gw9xQbCTGUhhGLmjsWwdOJGj_KcbAinNAO273kTjbLQvWFfaNZDNT2EN1GmbM5AiNEIOZ3Zc/s1600/comma-side-orange1.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1.2em Georgia, "Times New Roman", Times, serif;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Blockquote Code:

blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik9R5j0KWqN5jak6HnwzW6ZcyDx3NSoXtNw_hgAoZuvj2Bu61bl3JXiWRRNdzVw2vxsu0TCKrMsT741NDcSpufXlcOYOIxFmj6ahSpdpnweRMGtlPaP4JTvPnHZ2kMMmgrPzx5AJ_TS50/s1600/green-black-side.gif) ;
background-position:;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

6- Blockquote With A Brown Corner Label

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background : #FEE4E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFRidWb11r6JubmufBO5o1j5QUw7P3bSpNBP-n5SE1BauuCpZFiP-X-sWcSeJZCVQPsSFkwOO_OWdx7RVnSU4AHusKFML66dxymIzZH_D57Qvr3Jw7zsfU0wbMudblilbMYqWWs7uhvA/s400/angular-right.gif) no-repeat bottom right;
font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif;
color : #000;
border: 1px solid #DDD;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

7- Blockquotes With Inverted Commas

Blockquote Code:

.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir4UEmOoRn2Y1a3oVZMlFwzXLEcWlcFUin8eQLkEpj6d6vQrafz5z2EDXFoWNMtM6uobQ8p9xU7S7wmvpJa5iftbCVPNpHZFo1PTYDDzvjC_QMtVZyXZmwzm7jimgQO0jIyeu9ELOtHz8/s400/comma-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_B3tgLfC7k2eKoOryz1DBch-vtSEF0t3SoPj8Hl99M49VIEfdR3-dpTjNj0sPbVK945YCkTKJI9l1DbcwZ0CYR8Da9Y04JugKnmbCRi1yHyyaHaq00uJ9XKIcEx2P4V8w8WEeyWKMITA/s400/comma-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote Code:

.post blockquote {
font: 18px normal Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnuxD5qhNkajuSsTi6wZKu2uKIZAVBrRt_4tbTPoeeI_h_oCDpKRt1sLDCwU4TWLUsKLPk_tgmzil2I_f66bLt0vKv3SZd16V6krr-AfvapGsdUGR-vIfZHaPGXkwkVEQrY2VId91LPi4/s400/comma1-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxoDkmW6LQPfACKstApN3LVc6QyBXl4NcKL82KHvMQuDC69XJdlltB-3JDcEpXEzcPq6Foks18v6X0qFRA4sA_5RZ7XMe6o-2OnsA7Ukaz3tkGcdRAIeSG5Pp_I9cHp8ggXZXvI2SmgQ/s400/comma1-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote Code:

.post blockquote {
font:bold italic .9em "comic sans ms", Tahoma, sans-serif;
padding-top: 25px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmSH_D20w80a5H18ng89yHS2R_1LoAOwZlipnruyewYKm4BLXmGNMI5UgAbSnHB2c1-a7B66OfgjFbSxLlDBXfqd6qR2LDWo6YT0D2b6DaaOhG99oVNDWWv5TeRytQURJyq5ScJ3gqFQ8/s400/left.gif) no-repeat top left;
text-indent: 65px;
color:#6299E4;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6w7putlzPMkC-0Uo4Z0HaJhrGgX2oV_7ZoIhvaB4ZEkekfxIpICFkvigpmlZJ7lVpzOLyj2fs7ffAnprFw-aY_7sWJIH2kA9gen19byKfqeVLaH1sGrV4E06AJ4UHfrWG4Un8JAJEvms/s400/right.gif) no-repeat bottom right;
padding-bottom:30px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

Blockquote Code:

.post blockquote {
font: italic 1em "comic sans ms", Tahoma, sans-serif;
padding-top: 10px;
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAepF_Z_eNoXj9vtfQo972i9pXaB__zhmft5BxoJlgI5XjjxCiYxBG_vYr_bxYebbEKI1_VDEO_KuuwXilxKzOC9SFdrWP-1FFS7vviivvN5U1TgffBC5DVBG5awckYykoDa0VQ5MFgZo/s400/comma2-left.gif) no-repeat top left;
text-indent: 65px;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDLYJg88kjIspZOlnNiXEWUfKyqRwwDElkMlNDQsBqfEQyo0D0V39ue_FVSg7Iulr9yHQ4x_f6XJefxfU4RbdE-zNaGIzW1Y38jjSkQArWkiWpBvmyuN8C_ICjKSgwbLUmVZUJQ1juI_E/s400/comma2-right.gif) no-repeat bottom right;
padding-bottom:10px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

11- Blockquote With Well Aligned Image At Top

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 20px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgSkFYIXB1r1aYD806Snq0R0EQpkLglsoaMYbQ24QdbQlmMjf2-RbunNc27d6RklvmJP8J5rYxyEE3uzndAWa3v6n961g4VfMeCmP8s4AdljMSZGzALnrbLAAHkhJWDdJNijSqeWLO4oM/s1600/block333.gif) no-repeat top;
font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif;
color : #000000;
border-bottom : 7px solid #FF0000;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

12- Blockquote With Canopy Style Image At Top and Bottom

Blockquote Code:

.post blockquote{
margin : 0 20px;
padding: 50px 30px 50px 30px;
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCjqGiDeTLMcLvKG9KhODDORnVbr3x4q1NXadTiM2N3Cx87v5F0NM6aW0WgCdb9JzQ09ebicgaeOZ_BJEK9ln2QZye0-Gj39Io_m5dW7NcAvZxjCI94_zh3Bs8tyY85oJA8N-x0VX1qqo/s1600/BLOCK1-TOP.gif) no-repeat top;
font: bold italic 1em Helvetica, verdana;
color : #000;
}

.post blockquote div{
background : #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzJSHEpLpVkjtU7w8AomdiTUIyqXU3lekdpfFB9pjmw5QXHc65rbvVVgCttG0zTZ2GTzSA9bCG8EGiCfclIDL6jYdTryrZr8mGtzj2KPmEHlKhcXVKwzl8IV2zxi7zG4lwfrSADAOSGI/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom;
padding-bottom: 50px;
}

.post blockquote p {
margin: 0;
padding-top:10px;
}

13- Box Style Blockquote Surrounded By Borders

Blockquote Code:

.post blockquote {
margin : 0 20px;
padding: 70px 20px 30px 20px;
background : #E7E5DC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUiQe06BVDOB2SA65p9ZTet83rgaqcp0GkP46EWChwDPaHDn2jrH2oQ-WTn3HLmRIdkEoW81EIOl-WXJbG2ahY5pegHM_9R4LPu3lJGgIoqFo9kvlFzPbgusZx7QSr2QNghdA4jbRH_aM/s400/block3331.gif) no-repeat top;
font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif;
color : #343434;
border-left : 7px solid #FF7802;
border-right : 7px solid #FF7802;
border-bottom : 7px solid #FF7802;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

14- The Monkey Man Blockquote!!!

Once you get an idea on how to use these blockquotes then you can create artistic and some funny blockquotes like the one below,

Blockquote Code:

.post blockquote{
margin : 0 35px;
padding: 80px 0px 0px 0px;
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJLyxevhgUQqdq0uUk9lKrdxNrfGmsXhy33OisPsyeFkB0hhyDiUOB1wxuC2CVukV1_oPGGnDQ8T-lAaLYySNtEqO35DppZr_-0bOmq_yJzRTVVWL-aH8FiLfREsIXPE2F5DNOHfRmZWQ/s400/head2.gif) no-repeat top;
font: normal 1em "comic sans ms", Helvetica, verdana;
color : #666;
}

.post blockquote div{
background : #E6F1FA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPOlkNceQVp443qriG0ymvSMkHsH9Z0eUSA1t7J5oOBjgwMTuQ81hIAVKKaBtlWDKfbk9iF9GJfnyV87uPICOjvhX0QE0cVrXaIZzVYvrpsxpx7uGmjo0PNrTrYY_pI64sz_yipj854rw/s400/head-bottom3.gif) no-repeat bottom;
padding-bottom: 50px;
}

.post blockquote p {
margin: 0;
padding: 20px;
}

Implementation and Customization:-

Now To add One of these amazing and unique blockquotes to your blogs, do the following,

Go to Blogger > Layout > Edit HTML
Backup your template
Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this,

.post-body blockquote { line-height:1.3em; }

.post blockquote{ bla bla bla}

If you couldn’t find such code then it is OK.

Now search for ]]></b:skin> and just above ]]></b:skin> , paste the code for one of your favourite blockquotes. I am giving a sample code below

.post blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(Paste Image Link here) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border: 8px dotted #DAB547;

}
.post blockquote p {
margin: 0;
padding-top:10px;
}

Important areas to be customized are bolded. Where,

padding: It refers to the distance of the text from blockquote borders. Which goes in this order –> Top Right Bottom Left
background :- This includes Blockquote background color and image used in it. The six digit value is the background color and image link is inserted in place of bolded text in this part-> url(Paste Image Link here)
font :- It includes font style, size and type respectively. Match the colours with the code above for reference.
color :- This refers to text colour. You can use a different font colour using our color chart
border :- This refers to border width, style and colour respectively.
All other blockquotes can be customized in similar way.

After customizing finally save your template and preview it to see the interesting new change.

Guide:- For above mentioned blockquotes you need to add some extra tags inside blogger editor as explained below,

Now Whenever you have written a Quote inside the compose mode of Blogger Editor simply switch to the HTML mode and add two tags i.e <div> and </div> between the blockquote tags as demonstrated below,

<blockquote><div>Your Quote Will Be Here</div></blockquote>

Play With Each Blockquote Code!

To get more used to the codes above you need to play with some CSS using our HTML Editor.

Inside MBT HTML Editor paste the any of the blockquote codes above between <style> and</style> and just below </style> paste this code,

<blockquote>Write Anything Here As a Text</blockquote>

<style>

blockquote {
margin : 0 20px;
padding: 60px 30px 40px 20px;
background : #F1F8FE url(file:///c:/Documents%20and%20Settings/mustafa.MYBLOGGERTRICKS/Desktop/blockquote/owl-icon-48.png) no-repeat 350px 5px;
font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif;
color : #000;
border-left: 8px dotted #DAB547;

}
blockquote p {
margin: 0;
padding-top:10px;
}

</style>

<blockquote>Write Anything Here As a Text</blockquote>

HOW TO ADD FACEBOOK LIKE AND SEND BUTTON TO BLOGGER

2015-04-01T04:35:00.000-07:00

How To Add The Facebook Like and Send Button In Blogger

1. Please download your template previously

2. Go To Blogger > Template > Edit HTML

3. Click the "Expand Widgets Templates" Box

4. Search for this, <data:post.body/>

5. and now if you wish to add the plugin just below your post titles then add the giant code below just above <data:post.body/> or if you wish that the plugin may appear at the end of your posts then paste the following code just below <data:post.body/>

6. Save your template and you are done!

How To Add Twitter Feeds Widget in Blogger

2015-04-01T04:31:00.000-07:00

The role of social media in the blogging world is being more and more useful and helpful. Not for bloggers only but for all those who own any online property on the internet. Its simple, social networks helps them to easily reach with high audience and invite them on their blogs and websites. You can put many social buttons on your blog and let your readers make shares themselves and help you to get more traffic.

Many people use Twitter for social marketing indeed its a great platform with huge active audience. The only problem with this social network is to reach to thousand of followers but once you touch them than its all easy to promote your brand. However, you maybe already using this strategy but you could also improve this a bit. There are different twitter plugins for websites that you can integrate with your blog. Twitter feeds widget is popular among them and below we're tutoring you that how can we easily add twitter feed widget in our blogger blog.

Twitter Feeds Widget For Blogger

This is an official widget developed by Twitter itself for all kind of websites to improve Twitter fans user experience. Its simple feeds widget that display the most recent tweets of your account. It contains the follow button at the top right corner that can help you to convert your blog visitors into Twitter followers. Another feature of this twitter widget is that it has a box at the bottom from where anyone can tweet you without leaving your blog. There are also other functions in this twitter widget that you can enable on your own. Your blog visitors can reply to any of your blog, re-tweet or even make it favorite.

First of all, Go To Twitter Widget Page

Put your username.
Check or uncheck options, "Exclude replies","Auto-expand photos" if you want them or not. (optional)
Give custom height to widget or use the default one.
Pick up the theme color.
After the setup, check your widget in the preview section.
If widget is perfect in preview section, click "Create widget"
Copy the code from the bottom and click save changes.
Now Go to Blogger >> Layout >> Add a Gadget
Choose HTML/JavaScript
Paste The Code in Content Box.

Finally, Click "Save"
You're Done!

How that twitter feeds widget is looking on your blog? It will look fantastic there and your blog visitors will be loving to interact with you on Twitter directly from your blog. Hope you won't face any issue while implementing this if unfortunately any problem is happening, knock my door in comments below. Share this guide to let your friends add this sweet thing in their blogs too! Cheers!

Create Google+ “Add To Circles” Widget For Blogger

2015-04-01T04:21:00.000-07:00

You can see this widget live on my sidebar with real time followers stats of my Google Plus circles and with a “Add me To Circles” Button. The Widget is completely customizable and will blend any site theme perfectly. The number of followers displayed by the widget is automatic. You just need to fetch the code and paste it on your blogs. Lets know how!

Add “Add me on Google+” Button To Blogger

You just need to visit Google Plus widget homepage i.e. Click here
Click the Get Widget button

Create your widget by using the tabs to fully customize the look of your button
Enter your Google+ ID in the basic settings tab,

You can get your Plus ID by going to your Google Plus profile page and then copy the digital code from your browser address bar as shown below,

Set the Widget width equal to the width of your sidebar. In my case I have kept it 300

You can also change the language of the add me button from basic settings. Currently 9 languages are supported.
To change color codes use our Color Generator
Once you are done simple hit the Get Code button at the top. Copy the code and then go to Blogger > Design
Select a HTML/JavaScript widget
Paste your code inside it and hit save.
You are all done!

Do let me know if you needed any further assistance. Have Fun. :)

If you enjoyed this post then why not add me on Google+? Add me to your Circles :>

How to Add Pinterest Pin Button to all Images in Blogger?

2015-04-01T04:04:00.000-07:00

Pinterest is an online image sharing community which can drive huge traffic to your blog just by sharing your blog posts images. I know you are thinking that Pinterest has no more popularity than Facebook and Twitter but Pinterest can gets you more traffic than any social media. So we have to put Pin Button to our blog posts images so that our visitors can pin the images to Pinterest.

I brought a great way to all pin button to all blogger posts images at once. When we scroll our mouse pointer to the image then it shows a hover effect with Pinterest Pin Button. So lets start rolling your fingers on the tutorial.

Steps to Add:

Go to Blogger Dashboard in your blogger account.

Click on the Edit HTML button to extract your blog template.

Search for </body> using Ctrl+F.

Copy the following code and paste the code above it.

/*Pin button by mybloggerbuzz.com*/

//<![CDATA[

var bs_pinButtonURL= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWZacR9T1h6PqB-L-OC1p9DwEiA42iz6kb-tsQjG-zlL7tZMxaVmdGVQgncD6TurGgjd9rqjnzygumYC0YJla-_UreLHkhRsyHO39z_ePXZMRQb1kkeByh-2SoR3Jq6Slgj0lnI8u936v9/h120/mybloggerbuzz-pin.png";

var bs_pinButtonPos = "center";

var bs_pinPrefix = "";

var bs_pinSuffix = "";

//]]>

</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>

</script>

You almost done!

Note:

If your template had already loaded with the jquery library file, leave the coding which is highlighted with red color before adding it to your blog.
You can change the position of the hover pinterest button on the image by replacing center with any of the following one.

Topright
Bottomright
Topleft
Bottomleft

Change the pin button image by replacing above colored url with url of your reference image.

You can add some text above or below all the images by adding your text here.

For prefix - var bs_pinPrefix = "insert your prefix text here"

For suffix - var bs_pinSuffix = "insert your suffix text here"

Step 5: Click on Save template button.

Additional to that, If you want to exclude or block any of the image in your blog, use the following code.

Place Your Image Tags Here </div>

That's the simple tutorial to add the Pin buttons to all Blogger posts images. Feel free to comment below and share your experience with us till then Peace, Blessings and Happy Pinning.

How To Completely Backup Your Blogger Blog?

2015-04-01T03:56:00.000-07:00

Blogger is the first choice of a blogger to start the blogging career because it is 100% free of hosting and SEO friendly too. It is on Google's server hence it is too fast. Google automatically revert those posts to drafts which are other's copyrighted or by someone DMCA application warns us.

Many DMCA complains can harm our blog rankings and Google can deleted it from its server. If such things happens our lot of hard work like Template and all blog posts were destroyed and we even can't do after that.

So I recommend you to backup your blogger blog once in a week. Blogger's Spam Classification System is also helpful for us because it also deleted the posts which are copied from our blog by copycats. So this has both advantages and disadvantages. But we have to be risk-free so we have to backup our blog. So here I am going to tell you how can you download backup of your blogger blog.

Downloading Backup of Blogger Blog Template:

Go To Blogger >> Template
Click On The Backup/Restore Button At The Top Right Corner.

Now a Popup Will Appear Where You Can Download and Restore Your Template.
Simply, Click "Download Full Template" Button.

So, Now After Downloading Template, Let's go to the Next Step.

Download Posts and Comments of Blog:

Go To Blogger >> Settings >> Others
There You Will See "Blog Tools" Area On The Top.
There Will Be "Export Blog" Button, So Click It To Export or Download Your Blog.

When You Will Click The "Export Blog" Button, A Popup Will Appear Same Like As Clicking On Download/Restore Button.
But Here You Can Only Download Your Blog, So Click On "Download Blog" Button.

Now Wait a Bit, It Will Take Some Minutes To Download Your Complete Blog.
That's all and You're Done!

It is just an easy task to do all of the steps. It is recommended to repeat these steps at least once a week to stay risk-free. Now It's your turn to share this post to your friends so that they also can save their precious blog posts and template. Don't forget to write your views through comments till then Peace, Blessings and Happy Downloading.

Source:mybloggerbuzz

Earn Money Online By Watching Movies

2015-03-31T14:28:00.002-07:00

Earn money online is a dream of every person and many people are used different ways to earn money online. But in fact if you spend 5 or 6 hours on internet and you have some basic knowledge of computer and internet so you can easily earn money by doing different tasks such as freelancing, blogging and some other things.

But if you don’t have time to update your blog or you don’t have freelancing skills so you can also earn some handsome money by using some other ways.

Today we will going to share one interesting way of earning money online and by using this way you can easily earn 100$ to 300$ per month by simply watching latest movies and writing reviews. This is very simple and easy work and if you're interested in watching movies, so must try it because it's very interesting and spicy.

Why to Write Reviews & How You Can Earn More?

How you can earn money by writing attractive reviews on movies? I know this question is jumped in your mind but in fact I say this is one of the best and simple way of earning money online because if you are interested in watching latest movies and expert in writing their reviews so you can easily earn some good $$$. We see many people who spends only few hours on internet because they're busy in their life, so this is a specially chance for those people such as Students, because if you're student and you are busy in your study, so you can easily earn some money by spend only 1 or 2 hours by watching latest movies and writing their reviews. There are lots of entertainment websites that offer you to watch movies and writing their reviews and generate some handsome money. Here we will collected top 3 websites, where you can easily earn some handsome money by writing some attractive reviews on latest movies.

Below we will discussed each website with fully detail.

1. Helium

Helium provides you some good money when you write reviews on movies. Here you need to write 400 words review that will attract all visitors, who watched movie and force him to click on your review. Helium will pay you per review that you write on each movie.

2. Xomba

This is also one another site that pay you some handsome money when you write a review on movie. The difference in Helium and xomba is when you write a review on helium then it will pay you for just writing review but in xomba you need to get one adsense account and after it you can show adsense ads with your reviews and when anyone read your review and click on adsense ads then the xomba will pay you for it.

3. Yahoo! Voices

Yahoo! voices will also pay you for watching movies and writing reviews but first you need to sign up for one account and after it you will be able to write reviews on different movies. In yahoo voices when you post a review on movie then you will earn some cents but when you increase your wroth by creative content then you will be able to earn some handsome money on daily bases.

Some Tips for you!

Try to be first one to write reviews on latest movies.
Try to pick most happening topic for writing reviews.
Focus on quality reviews’ and try to write a review as soon as possible after releasing the movie trailer.

We hope you can easily understand that how you can easily use this method and earn money however If you have any question or you already worked on movies reviews site then share your experience with our site readers and also share this post with your friends. Stay tuned us for learning upcoming earn money ways.

How To Earn Money Online With Elance?

2015-03-31T14:22:00.000-07:00

The past few years, we will see many earn money ways on the internet. The earn money from internet is depend on your work and your knowledge. It means in which work do you expert or do you have some good knowledge about computer and internet. Peoples are earn money using deferent ways such as blogging, freelancing, data entry works, teaching and some other type of works are included in it.

The peoples who have some good knowledge about computer and internet, but they are unsuccessful to find a best way of earning money by using their own skills. So today I will going to share with you a one post about how you can earn money by using you own skills. I also share many post about earn money topic on my blog, in which I completely discussed the all earning money ways, but know here I am going to tell you something about freelancing.

What is Freelancing?

This is a one major question that asks many peoples, who don’t know about it. we also discussed this topic in my pervious post. Actually freelancer is one person, who doing some work for others and generate money. The definition of freelancing, we will explain it in one example. For example a one person belongs to USA or Canada and he have some good money but he will very busy or he didn’t know about how to do work such as Photoshop, Ms-office, Corel Draw or any other work, so he came on freelancing websites and posts a job and nd other hand many Pakistanis, Indians and some other countries peoples, who are freelancers are apply for this job. So the Client select a one proposal from all proposals and give a order to a one person, and when a freelancer is get order then he start their work and after completing him send him to this men who order it and the amount of this order will be added in freelancer account.

This is a fully detail about freelancing, how it will be work.

What is Elance.com?

The Elance is a one freelancing website, which will provide work in all over the world peoples, and give him a chance to earn some handsome money. Actually Elance.com is one website, where many Clients are coming and post different types of jobs, that I will described In above paragraph. On the internet are two biggest freelancing websites that are pay you highest rates, these website are elance.com and odesk.com. I will also try to write a one post about odesk.com in my upcoming posts. The Elance.com has 447 global rank and 364 rank in united state by viewing of alexa, So I think anyone can’t be say that it is a scam. Because in the whole world thousands of peoples are earn money with it. I will also clearly say that this is not a scam, this is one trusted website and you can also learn more about it by going on their official site.

How to Join Elance.com?

This is so simple and easy, its same as that your facebook account, but I will write about it completely step by step, so follow below steps.

Fist all go to Elance.com.
You can see the homepage of elance.com so click on Registered (it’s free).
After clicking on it you can see a new page so click on second box (I want to work) and then click on continue.
Now you can see a new page, where you can fill your all information with detail and click on Registered, same as below screenshot.

Here you will write your all skills in which you are expert and click on (I’m finished), same below screen shoot.

After it you can see a membership plans so select basic free plan and click on(Select Now),same as below screenshot.

They will send you a one E-mail on your e-mail address so open it and confirm the link.

Now you will make your Elance account successfully! Next step is making your profile shine.

How to make profile shine on Elance.com?

You can easily make your profile shined and complete it 100% by follow below steps, so let start.

After verifying e-mail address, your profile is 30% complete, so next step is click on (Enter basic profile), same below screenshot.

After you can see a one page, where you can add you basic detail such as you address, city etc. after completing it click on (Continue).
Now after it, you will complete below all steps same as you doing above.
You can also upload some portfolio of your work and complete Elance all tests of your skills. It will be help you to make your profile more shine. [If you get confused in any step so ask me by writing comment below.]

Now after making your profile shine then you will be able to apply for jobs.

How to Apply for Job on Elance.con?

This is also very simple and easy process. You only need to complete your profile 100%. Then you will start for applying job. But remember you will only apply for these jobs that are matched with your skills. Below I will apply for one job that are matched with my skills, so learn it carefully how you can apply for jobs because this is one important factor. Below I will apply for one job “Photoshop Designer”. In this proposal, I will write all about , how I can doing their work and what is my service rate. Here you will need to write some attractive lines. After filled a proposal with detailed then click on (Preview), same below screenshot.

After it you will see your proposal preview and if you want to edit it so click on (Edit Proposal)or click on (Submit Proposal), same as below screenshot.

Know you will submit your job proposal successfully and if client is like your proposal then it will select your proposal and after discussed somethings, he/she will order you with money and this money hold by elance.com and when you completer thier project and send them, then you will be get paid, its so simple and easy. This is full detail about Elance.

we will try to write every point with detail, if I will missed anything or you have any question related to this topic then feel free to ask in comment section and also share this post with your friends and Subscribe us for getting upcoming earn money ways straight to your inbox.

Best Wishes.

Source:spicebloggertricks

5 Tips To Use Digg To Drive Blog Traffic

2015-03-31T14:10:00.000-07:00

Digg is a social news site that can help drive traffic to your blog. However, Digg is the biggest social news site on the Internet controlled by a handful of top users. How can you get your blog posts noticed in the fast-paced world of Digg? Follow these five tips of Digg etiquette to effectively use Digg and boost traffic to your blog.

1. Digg the Original Source

Digg users are very particular about how the site is used. There are a variety of rules that Digg expects users to follow. One of the most important rules of Digg etiquette is to always submit the original source of a story. If you're submitting a blog post or page that expounds on the original source of a story by adding new information or opinions, that's okay, but make sure your submission adds value to the conversation or story. If it doesn't, find the original source and submit that instead.

2. Don't Digg Your Own Posts

Digg will penalize users who submit their own content too frequently. If you want your blog posts to have a chance at making it to the main page of Digg (and generating a lot of traffic to your blog), don't be the first to submit your post. Ask a friend or colleague to submit it first.

3. Digg Several Articles at a Time

When you ask your friends to Digg your blog post, make sure they Digg more than just your post while they're at it. Digg keeps tabs on people who just Digg a single item while they're on the Digg website in order to penalize spammers (particularly those who are paid to Digg specific stories). Ask your friends to Digg your post as well as a few other stories of interest or on the main page of Digg at the same time.

4. Use a Good Title and Description in Your Diggs

When you Digg something, give it a good title and description. The title and description are what you're using to convince other users to click on the submission, read the article and hopefully Digg it, too. Sell the article with a great title and description to increase your chances of getting more Diggs for it.

5. Be an Active Digg User

Digg users who are very active have a better chance of getting their Digg submissions noticed and attracting more Diggs to them from other users. Submit various posts (particularly breaking news items), add friends, comment, and add an avatar to your profile to make your Diggs stand out from other submissions in Digg's list format. The more active you are, the more people will notice you and become interested in investigating your submissions, which will ultimately lead to more Digg opportunities for your own blog posts. More Diggs for your own blog posts equal more traffic to your blog.

Add Floating dropdown Menu To Blogger

2015-03-31T13:59:00.001-07:00

Floating widgets like floating navigation menu, Floating share buttons or floating social icons are very popular these days. It is very easy to add these floating widgets to your blogger blogs. We can create any floating widget with help of CSS code. In this posts we will discuss about adding a floating dropdown navigation menu to blogger blogs.

Features of floating dropdown menu

Login to your blogger dashboard.
Select your blog.
Select Template option.
Click Edit HTML.
Find </header> in the template code.
Paste following code just below it and save the template.
Preview your blog to see the new floating dropdown menu in action.

Code for floating dropdown menu

<style>

#wctopdropcont{

width:100%;

height:40px;

display:block;

padding:0;

margin:0 0 22px 0;

z-index:100;

top:0px;

left:0px;

position:fixed;

box-shadow:2px 2px 5px #444444;

-moz-box-box-shadow:2px 2px 5px #444444;

-web-kit-box-shadow:2px 2px 5px #444444;

-goog-ms-box-shadow:2px 2px 5px #444444;

background:#180000;

}

#wctopdropnav{

float:left;

width:700px;

height:40px;

display:block;

padding:0;

margin-left:40px;

}

#wctopdropnav ul{

float:left;

margin:0;

padding:0;

}

#wctopdropnav li{

float:left;

list-style:none;

line-height:40px;

margin:0;

padding:0

background:#180000;

}

#wctopdropnav li a, #wctopdropnav li a:link{

color:#fff;

display:block;

margin:0;

font:16px georgia, verdana;

padding:10px;

text-decoration:none;

}

#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a {

color:#fff;

padding:10px;

background: rgb(180,223,91); /* Old browsers */

background: -moz-linear-gradient(top, rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */

background: linear-gradient(to bottom, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */

}

#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{

font-size: 12px;

background:#180000;

color: #fff;

width: 150px;

margin: 0;

padding: 0px 10px;

line-height:30px;

position: relative;

}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {

color: #fff;

background: rgb(180,223,91); /* Old browsers */

background: -moz-linear-gradient(top, rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */

background: linear-gradient(to bottom, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */

}

#wctopdropnav li ul{

z-index:9999;

position:absolute;

left:-999em;

height:auto;

width:170px;

margin:0px;

padding:0px

}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{

left:auto

}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{

position:static

}

#wctopdropsoc {

float:right;

width:220px;

padding:0px 0px ;

margin:9px 10px 0px 0px;

}

#wctopdropsoc img

{

margin-left:5px;

margin-top:-2px;

height:26px;

border:none;

}

</style>

<ul>

<li><a href='#'>About us</a></li>

<li><a href='#'>Tools</a>

<ul>

</ul>

</li>

<li><a href='#'>Categories</a>

<ul>

<li><a href='#'>Widgets</a></li>

<li><a href='#'>Templates</a></li>

<li><a href='#'>Wordpress</a></li>

<li><a href='#'>Blogger</a></li>

<li><a href='#'>Customization</a></li>

</ul>

</li>

<li><a href='#'>Contact us</a>

</li>

</ul>

</div>

</div>

Instructions : Modify the value of background:#180000; to change background color of the menu and don’t forget to change our social network addresses with your addresses

5 Syntax Highlighters For Blogger

2015-03-23T13:51:00.000-07:00

Syntax highlighter is one of the mostly used widgets in design and development blogs. If you are a programmer or web designer then you must add an attractive syntax highlighter to your blog. In this post we will discuss 5 different and beautiful designs of syntax highlighters for blogger. These syntax highlighters are created by customizing HTML pre tag using CSS.

Design 1: Notebook Style Syntax highlighter

Code:

.code{

font-family: Verdana,"Times New Roman",Georgia,Serif;

font-size:12px;

color: #333333;

sdoverflow:auto;

width: 500px;

padding: 15px 0px 15px;

padding-left:42px;

white-space: pre-wrap;

white-space: -moz-pre-wrap !important;

white-space: -pre-wrap;

white-space: -o-pre-wrap;

word-wrap: break-word;

}

.code, .code:before, .code:after

{

background: url("http://4.bp.blogspot.com/-GlhRdQ2lszc/UY38C5a_AvI/AAAAAAAABt0/vsiGbAmbqrs/s1600/stacked-lined.png") repeat-y scroll 0 0 transparent;

border-radius: 5px 5px 0 0;

border: 1px solid #dcdcdc;

box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);

}

Design 2:

Code :

.code {

background-color: #f3f3f3;

color: #333333;

overflow: auto;

width: 500px;

padding: 15px 5px 15px;

border-left:10px solid #333333;

}

Design 3: Elegant syntax highlighter

Code :

.code {

background-color: #f8f8f8;

color: #3399FF;

overflow: auto;

width: 500px;

padding: 15px 5px 15px;

color:#666666;

border:1px solid #dcdcdc;

box-shadow:1px 1px 4px #dcdcdc;

-moz-box-box-shadow:1px 1px 4px #dcdcdc;

-web-kit-box-shadow:1px 1px 4px #dcdcdc;

-goog-ms-box-shadow:1px 1px 4px #dcdcdc;

white-space: pre-wrap;

white-space: -moz-pre-wrap !important;

white-space: -pre-wrap;

white-space: -o-pre-wrap;

word-wrap: break-word;

}

Design 4: Leaf Style syntax highlighter

Code :

.code {

background-color: #f8f8f8;

overflow: auto;

width: 450px;

padding: 20px;

color:green;

border:2px solid green;

border-top-right-radius:100px;

-moz-border-radius-topright:100px;

-webkit-border-top-right-radius:100px;

border-bottom-left-radius:100px;

-moz-border-radius-bottomleft:100px;

-webkit-border-bottom-left-radius:100px;

box-shadow:1px 1px 4px green;

-moz-box-box-shadow:1px 1px 4px green

-web-kit-box-shadow:1px 1px 4px green;

-goog-ms-box-shadow:1px 1px 4px green;

white-space: pre-wrap;

white-space: -moz-pre-wrap !important;

white-space: -pre-wrap;

white-space: -o-pre-wrap;

word-wrap: break-word;

}

Design 5: Dark Blue

Code:

.code {

background: #2c539e; /* Old browsers */

background: -moz-linear-gradient(top, #2c539e 0%, #2c539e 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c539e), color-stop(100%,#2c539e)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #2c539e 0%,#2c539e 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #2c539e 0%,#2c539e 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #2c539e 0%,#2c539e 100%); /* IE10+ */

background: linear-gradient(to bottom, #2c539e 0%,#2c539e 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */

overflow: auto;

width: 450px;

padding: 20px;

color:#ffffff;

border:2px solid #2c539e;

box-shadow:1px 1px 4px #2c539e;

-moz-box-box-shadow:1px 1px 4px #2c539e;

-web-kit-box-shadow:1px 1px 4px #2c539e;

-goog-ms-box-shadow:1px 1px 4px #2c539e;

white-space: pre-wrap;

white-space: -moz-pre-wrap !important;

white-space: -pre-wrap;

white-space: -o-pre-wrap;

word-wrap: break-word;

}

Add these syntax highlighters to blogger

Step 1: Open your blogger dashboard select your blog.

Step 2: Select Template option and Click on Edit HTML option.
Step 3: In the template code find ]]></b:skin>
Step 4: Paste any one of the highlighter codes just above it.

How to use these syntax highlighters ?

Step 1: Create HTML Escape code from your source code.
Step 2: In the blogger post editor Select HTML version of your post.
Step 3: Now enclose the HTML escape code between pre tags like following syntax. and publish the post.

<pre class="code">Paste the HTML Escape code Here</pre>

How Enable Blogger Dynamic Views?

2015-03-23T13:22:00.000-07:00

Blogger has now officially introduced Dynamic views for all blogs by default. Now you can change the layout of your custom template into different shapes. A dynamic view is an automated code that rearranges your div areas and automatically changes the default style sheet settings into different flavours and colours.

In short it provides your readers with better readability. This new feature helps you to arrange your posts, comment body and sidebar in different orientation. It arranges them into either a stream of thumbnail images or table containing columns of your latest posts. However this new feature has some advantages as well as some drawbacks which I have shared below.

How to Enable dynamic View For your blog?

1. Go To blogger > Design > Template Designer
Now you have 7 different layout options namely classic, Flipcard, magazine, mosaic, sidebar, snapshot, Timeslide.
Choose the one you like and hit the "Apply to Blog" button at the top-right corner
Done!

Advantages of Dynamic Views

This dynamic view has the best advantage of being compatible with all major browsers such as Mozilla, IE8 and Chrome and Safari. It also uses light theme that tremendously helps in reducing your blog load time. The layout are perfectly coded so each widget will remain at its position and wont interrupt neighboring widgets during load time. Stylesheet is the one officially provided by blogger and it rarely contains any image so again helps your blog to load quickly. Blogs with this feature enabled are better browsed, bookmarked and viewed even on smart phones.

Disadvantages of Dynamic Views

You don't have complete control over the appearances of your widgets and post body. While applied most widgets stop working and are misaligned. No special attention is paid to sidebar section. All widgets get replaced or deleted. The sponsor area and subscription area disappears. Again applying it though provides you with main delightful bonuses but if you are running a professional blog with ads on it then better quit this feature. However if you are running a personal diary or non-commercial blog then you can surely go for it in order to let your fans enjoy different flavors of your site.

I hope this little info proves helpful to most of you.

Hyphens v.s Underscores in URLS for Better Seo

2015-03-23T12:23:00.000-07:00

Most of us like the way Matt Cutts (head of Google Webspam team) discusses all the SEO Tips that apply to Google and removes each and every misconception and myth that is being wrongly propagated by both Off page and On page SEO. I am really proud to introduce that Google surely has a great customer service. You and I all write titles while writing any post.

You should know that these titles are 88% responsible for driving the traffic towards your blog from the search engines.

Many of us actually don't realize that every character in the post title has its own significance and plays a great role in attracts decent traffic if wisely chosen. Titles are surely one of the important part of on-page SEO. So today we are discussing about a great topic on seo whether to use hyphens or underscores in urls.

What is an Optimized Title?

A title can only be known as an optimized title only if it has the features stated below,

Title should only contain 66 characters.
Title should containing simple daily used words. You don't need to use complex Vocabulary and no need to consult a Thesaurus for writing titles. Average internet user always go for words that sound familiar in search results page.
Select choice of words from Google Keyword Tool. Ignore the word Tracker.
You can use the following symbols frequently: - : ! ?
Use the following symbols rarely: . & % # |
Never use the long Dash or Underscore i.e. _
To write a perfect post title, read this tutorial:

How To Place Post Title Before Blog Title For Better SEO In Blogger?

What Does Google Say About This?

Matt Cutts, the Head of Google Web spam team and webmaster help suggests that Underscores should always be avoided because the Underscores are normally used by programmers while they are writing algorithms and it often confuses the search robots. He suggested that dashes are much better to act as separators.

I hope you use hyphens or dashes instead of underscores in urls of your blog posts. Now It's your turn to share this post and write your views in comments till then Happy Blogging!

How To Stop All Search Engines From Indexing Blogger Blog?

2015-03-23T12:14:00.000-07:00

Some time you might be interested to stop search results from indexing as well as crawling your blogger blog also it happens when we will introducing or creating new blogger blog. When its must stop search engine from your blogger blog?.

Well the question can be right. Whenever we start a new blog then we always prefer to stop all the major search results from indexing and crawling your blog contents. Blog or website under construction stage has plenty of creepy errors also it will surely kill your website beauty. So i would be always recommended never access your website or website from search engines when it's under construction.

The reasons is that when someone visits your website thats will never land again why as a consequence of poor designing, subject matter errors, and quite a few mores. So first make or give professional design to your blog, website and once it becomes great look from every single angle then its time to release it in all search engines. So lets start how to stop indexing all search engines from indexing your blogger blog.

Stop Search Engine From Indexing Your Blogger Blog:

This is a very simple process. Follow the below given steps

Go to blogger dashboard >> Setting:
Click on Basic>> Privacy:
Click on the No option on both and Then Save see below:

Now you have done all steps to block the search engine.

After Your Blog Got Ready to Index:

After doing all the possible customization and SEO optimization Titles, Blog Description, Designing and many mores and Once your site is ready for the release, you can easily follow the above same steps but this time select YES. It will give access to the robots, and they will again start crawling and indexing your site in search engines.

This is a small tutorial to stop indexing your blogger blog by all search engines. This step helps you when you are creating your blog and did not want anyone to visit your blog. Now It's your turn to share this post with your friends and share your views in comment box till then Peace, Blessings and Happy Indexing.

All In One SEO Pack 2014 For Blogger Blogspot

2015-03-23T12:02:00.000-07:00

As you all know about SEO/Search Engine optimization and it is a must thing for bloggers. In fact without SEO a blog is not going to followed by google search or any search engine crawlers and the mean no visitors visits your blog.

A blog without visitors is just like a fish without water and if you did not receive any amount of visitor to your blog, there is lot more chances that your blogging career is over. Organic traffic is necessary for all blogs because it comes from search results and gives us a handsome earnings and decent rank to our blog. So today I came accross a great and popular post about All in One SEO Pack Plugin for blogger blogs. So lets start the tutorial on adding this widget.

5 Basic SEO Settings For Blogger Blogs

How To Add Custom Robots.txt File In Blogger.

How To Prevent Receiving Traffic From Bad/Spam Sites

Features:

Add Meta Tags in Your Blogger Blog.
Show Post Title First In Search Results
SEO Optimize Blogger Comments
SEO Optimize Blogger Labels
SEO Optimize Blogger Archives
Optimize Post Title Using H2 Tag
Add an SEO Friendly Robots.txt File
Convert Title Tags to Dynamic Title Tags.
Allow Crawlers to crawl your site daily.
Google + Author Profile Pciture Compatible.
Helps you in Getting High USA Traffic.

How to Add This Plugin to Blogger?

Login to your Blogger blog account
Then Go to Dashboard
After going to Dashboard Click on Template
And in Template You’ll See Edit Html Button click on them
So after that Go to <head> section in Template.
You can easily search by using Ctrl+F button
After Searching for <head> put following code just below or after your <head> section.

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

<b:else/>

</b:if>

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

</b:if>

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

<b:else/>

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

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

</b:if>

<b:else/>

<b:if cond='data:blog.pageTitle != data:blog.title'>

</b:if>

</b:if>

How To Add Meta Description To all Blogger Post

How To Place Post Title Before Blog Title For Better SEO In Blogger?

Use Disqus and Google+ Comment Systems Tgether in Blogger

How To Add Custom Robots.txt File In Blogger.

Replace all the bolded blue text with yours.
That’s all
Congratulations! : Now you successfully add this to your blogger blog.Now scroll down to the next SEO Guide.

So this is the complete SEO Pack for Blogger Blogspot Blogs. After adding this plugin to your blog surely you will get a dramatic changes in your blog traffic after sometimes. Now It's your turn to share this post with your friends and write your views in comment box till then Peace, Blessings and Happy Optimizing.

Source: mybloggerbuzz

5 Basic SEO Settings For Blogger Blogs

2015-03-23T11:40:00.002-07:00

For a blogger user, simple seo setting may be the foremost job for becoming a successful blogger. SEO plays an essential role in deciding a blogger career. SEO is the backbone and dwelling body example of a successful blog as well as website.

By applying appropriate seo tips on blog it will eventually must rank higher in search engine results. The Most solid seo tips applied on your blog the more you will get higher result in every popular search. So today I made a tutorial for beginner bloggers to make their blogger blog SEO friendly by using these easy tips.

1. Change Default Template To Professional Template:

You will not waste your precious time if you're still using the particular default blogger theme. We are overlooking default template on account of several reasons. A blog using default blogger default template won't ever get better rank in search engine as well as also have much less subscribers and visitors. No specialized design & appears to be ugly. This is actually little about building. A default blogger template is just not SEO friendly but not robots friendly. It will not provide you with a lot in search results. Since we are already analyzed since from few years that there is no pro blogger which uses default blogger template.. So then why are you currently waiting for >> only change your blogger template & ensure it is highly friendly for everyone search robots.

How to Change Blogger Blogspot Template?

2. Custom Robots.txt file Setting:

This is probably the foremost job to feature custom robots. txt file into blogger blog. By including this file in blogger it is going to bring remarkable change inside your blog traffic. Most significant advantage through the use of robot. txt document is it tell the search engine how for you to crawl the blog. Robot. txt file give instruction to everyone search engine crawlers and actually tell them which a part of your need to be access for robots and which regions of your blog need to be blocked forever from indexing. We could strongly recommended for anyone who is still unaware the normal parts associated with robot. txt document the browse the below link:

Add Custom robots.txt file in Blogger

3. Custom Robots Header Tags Settings:

This is the other basic seo strategies for all blogger users immediately after applying high quality template and robots.txt file in blog. Robot header tags is an advance option came into being with brand new blogger software. Robot header tag words is also known as Search Preferences (SP). The (SP) contain several possibilities which stipulate different undertaking by permitting or disabling these kinds of options. It will eventually escape your blog from duplication data & blocked the labels and repository pages. To understand more about how to environment for personalized robots header tag words then abide by the underneath post.

Add Custom Robots Header Tags in Blogger

4. Make Your Blog Post Title SEO Friendly:

If you want to boost your post the height of success in search engine result the first job is to customize your post title for search engines results. Always try to add reach keywords in post title. Add relevant targeted keywords according to your post contents. Also Make your blog post title SEO friendly by doing these all title customization inside blogger template. To know more about how to make SEO friendly Title for search result the read the below given post link.

Place Posts Title Befire Blog Title for Better SEO

5. Add Meta Description to all Blog Posts:

After the launching of new blogger interface there were following additional features included by Blogger Developers. The blogger new interface is fully SEO friendly and robots friendly by including this Advance options (Meta Description). It summarize blog or post page for robots that what about this page is?. Meta description work for blog home page as well as we could also easily insert separate meta description for blogger each post. If you want know more how to add separate meta description for blog and blogger each post the read the below article for better understanding and help:

Add Meta Description to All Blogger Posts

So these are the 5 basic tips for blogger users to make their blog SEO friendly and attract a lot of organic traffic. Now It's your turn to share this post with your friends and write your views in comment box till then Peace, Blessings and Happy Optimizing.

How To Create A Free Blog on Blogger Blogspot?

2015-03-23T11:25:00.001-07:00

Do you want to create a blog free of charge? Here is the tutorial how to make a free blog using Blogger.com . Blogger is most in-demand free Blogging platform owned by Google. If you are going to make your own blog on Blogger, and looking for almost any tutorial for doing that, you are landed on the right place. This is the step by step guide to create a free blog.

Blogger/BlogSpot is a one of the most popular blogging platform by Google which let you create your individual free blog. Your all images in blogger blog is hosted by Picasa that too is a product of Google. There are a lot of resources on sale for Blogger such like Blogger Templates, Widgets. Not only this, you can also Make Money online by your blogger blog. So, Here Let me share how to create a Blogger blog within few minutes. Follow the tutorial given below for making your own blog free of charge.

How To Create A Blogger/ Blogspot Blog?

Before starting for a Blogger blog, make sure you have a Gmail account. If you don’t have a Google account, create a gmail account first.

1- Go to Blogger.com and Sign In using your Gmail/Google Account.

2- What profile you want to use for your blog choose either Google+ Profile or Blogger Profile.

3- Now you have your own Blogger profile on this page. Click on "Continue To Blogger"

4- Click on “New Blog” to create your Blog.

5- Enter your Blog details that you want to create.

Enter your Blog Name/Title
Enter your Blog Address, Select any Template (You can change it later)

6- Click on Create Blog. Congrats, now you have your own blog.

This is a basic tutorial for newbies to follow this guide and create their own blogger blog. We soon sharing more basic tutorial for bloggers so Stay tuned. Don't forget to share this post with your friends and views in comments till then Peace, Blessings and Happy Blogging.

How To Change Blogger Blogspot Template?

2015-03-23T11:06:00.000-07:00

When we starts blogging using Blogger Platform, we use Blogger Default Templates but when we spend more time on blogging then we realise that our blog is not professional looking like other blogs. Blogger Default Templates has a simple look and they are not SEO friendly as they are not updated a single time from many years.

Visitors also wants to watch the blog having professional looks. So we have to move to a third party template which was designed by others or by us. So today we are discussing about a very easy topic for beginners that how can we change our blogger blog template?

Where To Download Templates?

Below I have listed popular Blogger Templates blog which provides SEO Friendly and Professional looking Blogger Templates:

How To Change Template?

First You have to download your favourite third party template from above listed sites and use its .xml file to change your template.

1- Log in to your Blogger account.

2- Now click on the drop down menu and choose Template.

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

4- First you should download your existing template as a backup. So, click on “Download full template” button.

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

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

7- You are done!

So that's the easy steps for beginners to change blogger blog template. Now It's your turn to share this post with your fiends and write your views in comments till then Peace, Blessings and Happy Changing.

Hongkiat.Com Like Popular Post Widget for Blogger

2015-03-23T10:56:00.001-07:00

Hongkiat.Com is a very popular and well-known site for Bloggers, Designers. It was founded in 2007 by Hongkiat Lim. after lefting his job. He concentrate on blogging seriously after lefting his job. In now a days Hongkiat becomes very popular blog for web designers and bloggers.

It widely focuses on Photoshop, Wordpress, Tumblr, HTML5 , CSS3, Web 2.0 and much more. Hongkiat has a preety look which makes it more interesting and user friendly. It shows a Professional Looking Popular Post on the Sidebar and when we look at this we always think to use it in our blog. So we will discuss about how you can add Hongkiat like Popular Post Widget in Blogger Blogs. So lets start this amazing tutorial.

How To Add This Widget:

Open Blogger dashboard → Layout → Add a gadget → Add Popular Post Widget (Do not repeat if widget is already added)
Now open Blogger dashboard → Template → Html editor
Now add below given css code just before ]]></b:skin>

.PopularPosts {

width:100%;

margin: 0 auto;

padding: 0!important;

border-radius: 2%;

-moz-border-radius: 2%;

-webkit-border-radius: 2%;

counter-reset: trackit;

box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);

-moz-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);

-webki-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);

border: 1px solid #EEE;

}

.PopularPosts h2 {line-height:1.5em!important;display: block!important;font-family: "Calibri","Droid Sans",Tahoma,Geneva,sans-serif;font-weight: 500!important;

text-transform: uppercase!important;padding: 5px 10px!important;margin: 0!important;color: #D1D9E5;background-color: #5A77A0!important;text-shadow: 1px 1px #486286;border-bottom: 1px solid #4D678C;

box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);

-moz-box-shadow: 0 5px 12px -7px rgba(0,0,0,0.5);

-webkit-box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);

font-size: 16px!important;

border-top-right-radius: 3px;

border-bottom-right-radius: 0;

border-bottom-left-radius: 0;

border-top-left-radius: 3px;

-moz-border-radius-topright: 3px;

-moz-border-radius-bottomright: 0;

-moz-border-radius-bottomleft: 0;

-moz-border-radius-topleft: 3px;

-webkit-border-top-right-radius: 3px!important;

-webkit-border-bottom-right-radius: 0;

-webkit-border-bottom-left-radius: 0;

-webkit-border-top-left-radius: 3px;

bottom:0;

top:0;

}

.widget-content.popular-posts {border-top: 1px solid #CCC;padding: 0em;margin: 0 0 0;

}

.popular-posts ul{padding:0!important;margin:0!important;}

.popular-posts ul li {

border-bottom: 1px solid #f1f1f1;

list-style: none outside none !important;

margin-left: 0 !important;

overflow: hidden;

padding: 10px 0 !important;

transition: all 0.25s linear 0s;

counter-increment: trackit;}

#PopularPosts1 li:nth-child(odd) {background: #F9F9F9;}

#PopularPosts1 li:nth-child(even) {background: #FFF;}

#PopularPosts1 li:first-child {border-top: 1px solid #f1f1f1;}

#PopularPosts1 li {padding-right: 1em !important;padding-left: 1em !important;}

#PopularPosts1 ul li:before {content: counters(trackit,".");padding: 0 .1em 0 0;font-size: 20px;font-weight: bold;color: #D8D8D8;float: left;}

.PopularPosts .item-thumbnail,.PopularPosts .item-snippet {display: none;}

#PopularPosts1 a:hover {text-decoration: underline;}

#PopularPosts1 a {color: #3F3F3F;font-size: .9rem;}

.PopularPosts .item-title {padding: 0 0 .2em 1.5em;}

After adding the code save your template and preview the changes made in your widget.

So that's a little hack to add Hongkiat like Popular Post Widget in your Blogger Blog. Now It's your turn to share this post with your friends and write your review in comments till then Peace, Blessings and Happy Blogging.

Use Disqus and Google+ Comment Systems Tgether in Blogger

2015-03-22T14:47:00.000-07:00

As I discussed in the previous post about the benefits of adding Disquscommenting system in your blog. We also likesGoogle+ Commenting System also because of its advantages and lot of Google+ users. But we can install only one comment system in our blog so we have to choose one and it is really a difficult task. But now the using a little trick we can use both Disqus and Google+ Comment Systems together in our blogs.

Disqus increases the visibility of our posts and comments because it is connected to major social media like Facebook, Twitter and LinkedIn and now we are adding one of the most social media to our comment system. It is just an blasting trick which is designed by David Kutcher and i just make some customization to make it work perfectly. So lets start the tutorial to add both comment systems in your blog.

How To Install Disqus Commenting System In Blogger?

How To Use Blogger and Google+ Commenting Systems Together?

How to Install :

First You'll need to install disqus in your blogger blog.
Then open your Blogger Dashboard → Template → Html editor
And search for: (As shown in below screenshot)

<b:includable id='comment_picker' var='post'>

</b:includable>

Select the whole piece of code as shown in screenshot and replace it with below given code.

<b:includable id='comment_picker' var='post'>

<b:if cond='data:post.forceIframeComments'>

<b:include data='post' name='iframe_comments'/>

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

<b:else/>

<b:if cond='data:post.commentSource == 1'>

<b:include data='post' name='iframe_comments'/>

<b:else/>

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='threaded_comments'/>

</b:if>

</b:includable>

Now again Search for:

<b:includable id='threaded_comments' var='post'>

</b:includable>

and replace it with the below code:

<b:includable id='threaded_comments' var='post'>

<div id='comment-header'>

<img class='comment-on' id='comments-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y7rCY6Em9b0FB3rtnH1Rd7UXmRBJ7mkEpYKxFyYqSm7z7q-xcCniQhFyyHzBGeILiC-zp63__ciyWDuamZFQvRshrtgJ_1QR3huuceUlKe73m2dD9JCffCtT-iNg1LU0Y1Ufarpm3g/s50/disqus-social-icon-blue-transparent.png' title='view Blogger comments'/>

<div class='choice'>Comment With Your Choice</div>

<image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYl25b5jUyksRjq0KgE_gp9Qmh9k7piAaaprlGcC_C_G8jpwWnw65Da628mOr3d7eK8zmq5ENGbAtnJtkdzCNygHpkTvCQZKXmnNrMbMsCY-a4-wx1irKVqRMgdo36pIXdZz1_jCmIURy8/s50/plus_off.png' title='view Google+ comments'/>

</div>

<div id='comment-zone'>

<div class='comments' id='comments'>

<h4><data:post.commentLabelFull/>:</h4>

<div class='comments-content'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='threaded_comment_js'/>

</b:if>

<div id='comment-holder'>

<data:post.commentHtml/>

</div>

<b:if cond='data:post.allowNewComments'>

<b:include data='post' name='threaded-comment-form'/>

<b:else/>

<data:post.noNewCommentsText/>

</b:if>

</p>

<b:if cond='data:showCmtPopup'>

<div id='comment-popup'>

<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>

</iframe>

</div>

</b:if>

<div id='backlinks-container'>

<div expr:id='data:widget.instanceId + "_backlinks-container"'>

<b:if cond='data:post.showBacklinks'>

<b:include data='post' name='backlinks'/>

</b:if>

</div>

<div id='gcontainer'><div id='gcomments'/></div>

<script src='http://apis.google.com/js/plusone.js'/>

<script>

gapi.comments.render('gcomments', {

href: window.location,

width: '750',

first_party_property: 'BLOGGER',

view_type: 'FILTERED_POSTMOD'

});

$('#comments-norm').click(function(){

// switch to normal comments displaying

$('#gcontainer').css('display','none');

$('#comments').css('display','block');

$('#comments-norm').addClass('comment-on');

$('#comments-gplus').removeClass('comment-on');

$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y7rCY6Em9b0FB3rtnH1Rd7UXmRBJ7mkEpYKxFyYqSm7z7q-xcCniQhFyyHzBGeILiC-zp63__ciyWDuamZFQvRshrtgJ_1QR3huuceUlKe73m2dD9JCffCtT-iNg1LU0Y1Ufarpm3g/s50/disqus-social-icon-blue-transparent.png');

$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYl25b5jUyksRjq0KgE_gp9Qmh9k7piAaaprlGcC_C_G8jpwWnw65Da628mOr3d7eK8zmq5ENGbAtnJtkdzCNygHpkTvCQZKXmnNrMbMsCY-a4-wx1irKVqRMgdo36pIXdZz1_jCmIURy8/s50/plus_off.png');

});

$('#comments-gplus').click(function(){

// switch to google plus comments displaying

$('#comments').css('display','none');

$('#gcontainer').css('display','block');

$('#comments-norm').removeClass('comment-on');

$('#comments-gplus').addClass('comment-on');

$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPvCkGyJHyKR4OCq_swX81CAvxsFdYaRbyn2Syk0mHd3qsG_S5K1mzrqAI6xnbmlICtqXLVBH6iX4OFdywXb_Na_TaFfzFlQOE0OOlqmlu9oZNInsZKxk6Hk0zT6SmY2o23NCt4sIpg/s50/disqus-social-icon-dark-transparent.png');

$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzfB6ayVsmWXbinkNelDVLVRmDKv-UxiNpyc_J5K8jT4chOAy3xcTd2mI4H70TvuG0xedx9nLYHa-siFm-k0MZd2L-qhBoqYSirRF4kVS8IAO_tT2Ci0IAYzMulVZEZezB9Qt_BNtbua3l/s50/plus_on.png');

});

$('#comments-norm').hover(

// switch to normal comments displaying

function(){

if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4y7rCY6Em9b0FB3rtnH1Rd7UXmRBJ7mkEpYKxFyYqSm7z7q-xcCniQhFyyHzBGeILiC-zp63__ciyWDuamZFQvRshrtgJ_1QR3huuceUlKe73m2dD9JCffCtT-iNg1LU0Y1Ufarpm3g/s50/disqus-social-icon-blue-transparent.png');}

}, function(){

if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPvCkGyJHyKR4OCq_swX81CAvxsFdYaRbyn2Syk0mHd3qsG_S5K1mzrqAI6xnbmlICtqXLVBH6iX4OFdywXb_Na_TaFfzFlQOE0OOlqmlu9oZNInsZKxk6Hk0zT6SmY2o23NCt4sIpg/s50/disqus-social-icon-dark-transparent.png');}

}

);

$('#comments-gplus').hover(

// switch to gplus comments displaying

function(){

if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzfB6ayVsmWXbinkNelDVLVRmDKv-UxiNpyc_J5K8jT4chOAy3xcTd2mI4H70TvuG0xedx9nLYHa-siFm-k0MZd2L-qhBoqYSirRF4kVS8IAO_tT2Ci0IAYzMulVZEZezB9Qt_BNtbua3l/s50/plus_on.png');}

}, function(){

if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYl25b5jUyksRjq0KgE_gp9Qmh9k7piAaaprlGcC_C_G8jpwWnw65Da628mOr3d7eK8zmq5ENGbAtnJtkdzCNygHpkTvCQZKXmnNrMbMsCY-a4-wx1irKVqRMgdo36pIXdZz1_jCmIURy8/s50/plus_off.png');}

}

);</script>

</div>

</b:includable>

Now Save the Template and You're Done!

You have successfully added Disqus and Google+ Commenting Systems together and you're ready to receive lot of comments from your visitors. Now It's your turn to share this post with your friends and write your views in the comment box below till then Peace, Blessings and Happy Commenting.

How To Install Disqus Commenting System In Blogger?

2015-03-22T14:33:00.000-07:00

Disqus is one of the best commenting system to make a good discussion and also to get a lot of comments. It has many new features which others does not have. Disqus is the choice of many popular blogs likehongkiat.com, wired.comand also of the top blog of India Labnol.Org.

I asked many probloggers who are using Disqus commenting system about their experience with this commenting system and all of them are happy and satisfied. So I am going to show you 4 easy steps on how you can add Disqus commenting System to your blogger.

Must Read: How To Use Blogger and Google+ Commenting Systems Together?

Why Use Disqus:

1. Free

Disqus is free to use plugin and supporting many major blogging platform also

2. Easy To Install:

Disqus is very easy to install plugin that also proved itself to be user-friendly. You just need to do is sign up with your email and Choose your Platform.

3. Socially Connected:

Disqus allows you to comment on your favourite social media from one place. It also fetches your profile picture from your Social Profile and displays it along with your comments.

4. Anti Spam Policy:

Disqus Commenting System is totally free of Spam so it saves your time by checking each comment automatically. It is connected to social media so there is no risk of getting spam comments.

I listed the top 4 but there are so much benefits of Disqus Commenting System.

How To Install Disqus In Blogger?

You need to sign-up and create a account in disqus using your e-mail id.
After sign-up quickly sign-in with your registered e-mail id and then click on Add Disqus To Your Site (as shown in the image below)

After that you'll be landed on the page,where you need to create your site's profile, which you will be using as a disqus profile while commenting.

After filing the required fields click Finish Registration.
Now select the platform and add the widget code in your blogger site.
After saving the widget view the pages of your site, you will find disqus loading instead of default blogger comment system.

I hope you know the benefits of Disqus and install it successfully on your blog. Now It's your turn to share this post with your friends and share your views with us through comments till then Peace, Blessings and Happy Commenting.

Online Characters Count Tool For Post Title And Meta Description

2015-03-22T14:13:00.000-07:00

Every blogger know that Post Title and Meta Description both play a vital role in the Eyes of SEO. Post title and Meta description will surely make your blog more SEO friendly if you write them in proper way, what does it mean?

You might have observed that now a days when we search any topics in google search engine it gives us about 10 to 8 results on first page, and mostly we click on those titles which fulfilled our required. Same as if you want to make your post title and Meta description eye catchy for everyone then you will bring a little change in post title and meta description whenever to write them .

How To Write Seo Friendly Post Title

Its more important and i urge you that your post title should not be exceeded 66 charactersto get illustrative result in search engine while if it exceeded the target then your blog title will be seen broken in search engine.

Post Title Within Limit 66 CharactersView

Post Title Exceeding Limit 66 CharactersView

How To Write Seo Friendly Blog/Post Description

Again i would strongly recommended for better view and seo friendly blog/post description meta description should not be exceeded 145 character. To exceed the limilt you will get broken in search engine.

Blog Description Within Limit 145 Characters

Blog Description Exceeding Limit 145 Characters

Now you can clearly see the above results where post title written within the limits of 66 characters are not broken and well result while exceeding limits it becomes unaffected. same as the description you written in 145 characters has better view and while exceeding the limit than some texts appear broken in search result.

Write Your Post/Description Attractive

Whenever goes to write blog description/ post description and Post title than write them in required limits to attract more and more traffics to your blog.

Now to count your characters for specific task mentioned above use the PBT count character tools below. Remember this tool will include to your counting numbers, letters, spaces etc.

Counter Tool For Post Title

Enjoy it

66 characters remaining.
Counter Tool For Blog Description

145 character remaining.

Source:probloggertricks

My Web Blogger Tricks

Make A Rollover Image Effect - Image Changes On Hover

How To Add Stylish Sliding Up Image Description Widget

Google’s $100 Chromebit Will Turn Any Display Into A Computer

14 Amazing Examples To Customize Blockquote Style In Blogger!

HOW TO ADD FACEBOOK LIKE AND SEND BUTTON TO BLOGGER

How To Add Twitter Feeds Widget in Blogger

Create Google+ “Add To Circles” Widget For Blogger

How to Add Pinterest Pin Button to all Images in Blogger?

How To Completely Backup Your Blogger Blog?

Blogger is the first choice of a blogger to start the blogging career because it is 100% free of hosting and SEO friendly too. It is on Google's server hence it is too fast. Google automatically revert those posts to drafts which are other's copyrighted or by someone DMCA application warns us.

Earn Money Online By Watching Movies

How To Earn Money Online With Elance?

5 Tips To Use Digg To Drive Blog Traffic

Add Floating dropdown Menu To Blogger

5 Syntax Highlighters For Blogger

How Enable Blogger Dynamic Views?

Hyphens v.s Underscores in URLS for Better Seo

How To Stop All Search Engines From Indexing Blogger Blog?

Some time you might be interested to stop search results from indexing as well as crawling your blogger blog also it happens when we will introducing or creating new blogger blog. When its must stop search engine from your blogger blog?.

All In One SEO Pack 2014 For Blogger Blogspot

As you all know about SEO/Search Engine optimization and it is a must thing for bloggers. In fact without SEO a blog is not going to followed by google search or any search engine crawlers and the mean no visitors visits your blog.

5 Basic SEO Settings For Blogger Blogs

For a blogger user, simple seo setting may be the foremost job for becoming a successful blogger. SEO plays an essential role in deciding a blogger career. SEO is the backbone and dwelling body example of a successful blog as well as website.

How To Create A Free Blog on Blogger Blogspot?

How To Change Blogger Blogspot Template?

Hongkiat.Com Like Popular Post Widget for Blogger

Hongkiat.Com is a very popular and well-known site for Bloggers, Designers. It was founded in 2007 by Hongkiat Lim. after lefting his job. He concentrate on blogging seriously after lefting his job. In now a days Hongkiat becomes very popular blog for web designers and bloggers.

Use Disqus and Google+ Comment Systems Tgether in Blogger

How To Install Disqus Commenting System In Blogger?

How To Use Blogger and Google+ Commenting Systems Together?

How To Install Disqus Commenting System In Blogger?

Disqus is one of the best commenting system to make a good discussion and also to get a lot of comments. It has many new features which others does not have. Disqus is the choice of many popular blogs likehongkiat.com, wired.comand also of the top blog of India Labnol.Org.

Online Characters Count Tool For Post Title And Meta Description

Every blogger know that Post Title and Meta Description both play a vital role in the Eyes of SEO. Post title and Meta description will surely make your blog more SEO friendly if you write them in proper way, what does it mean?

Counter Tool For Blog Description