Customise your blockquote with syntax highlighter

Most bloggers use the standard blockquote to share tutorials based on scripts and codes with their visitors but Alex Gorbatchev has created an amazing fully functional Highlighter that neatly displays web technologies such as HTML, CSS, JavaScript, Php, Python, Sql, xml etc. The codes are displayed line by line number wise. It also provides the user with options to Print the code, copy it to clip board or to see the code Source.

Alex has released the latest version (3.0.83) but we will use the old version (2.1.383) as it contains the options I mentioned above. Each code type comes with a script called Brush. I have used the most popular brushes as I mentioned earlier but if you wish to use a brush of your choice then you can select one from this Brush list.

How To Add Syntax Highlighter In Blogger?

The steps are more simple than you can imagine. I have tried to make the installation as easy as possible. Follow these steps,

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Search for this,

]]></b:skin>

     4.  And just below it paste the following code,

<!--SYNTAX HIGHLIGHTER STARTS-->
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

     5.   Save your template and you are done!

How it works?

Whenever you wish to share a code of any type with your readers, simply enclose the code between these lines,

<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
ADD THE PARSED CODE HERE
</pre>

I have combined all brushes into one making it easier for newbie to implement the tutorial.
Note: Do not add the code directly because you will get error in Blogger Editor, instead first parse the code using the Parser Tool provided by us.
Replace ADD THE PARSED CODE HERE with the parsed/encoded code and publish your post to the see the magic.
That's it! Hope you like it. I will publish different color schemes for Syntax Highlighter in my next posts so make sure you don't miss the update. I also published some block quotes with auto number list and if you wish you can use them instead by reading this tutorial,

Read More

How to add sticky alert bar

Now days stickybar's are getting quite famous because of their attention grabbing capacity.They can easily grab any visitors attention.Today we are sharing some information about a interesting free stickybar named as Hellobar.Hellobar is type stickybar which scroll along with page and grab the attention of any reader easily.You can show your notices,notification and link to your any important article on it.Also the biggest advantage of this bar is you don't need to edit any code or script you just have to edit your text and customize your bar by logging in your hellobar account.Below are the some great features of hellobar.

Features Of Hellobar

• Beautiful look and awesome textures
• Easy Installation
• Easy to customize (No need to edit any code just update your bar)
• Endless possibilities to customize the color combination of your HelloBar
• Full statistics of the Click Throughs

Above are the some features of hellobar.Now lets see how to add it on blogger blog.

How To Add Hellobar To Blogger Blog?

1. First go to Hellobar
2. Give your email address and check your mailbox because you will get your password in that mail.
3. Now login to your hellobar account
4. You will redirect to Create Hellobar page.
5. Now create your own Hellobar and hit Save button.
6. As soon as you hit save button a popup box will comes up with embed code of your hellobar.

7. Copy that code and add it just before </head> tag in your template
8. Save your template and you are done.

Now visit your blog you will watch this amazing hellobar on your blog.
That's all.

Read More

Animated CSS3 Bubble Buttons

These bubble buttons are made with pure CSS3 and on mouse hover the bubble star shaking and this effect makes these button more beautiful.This button is available in four color themes and three sizes so that you can add any button of any size just by just changing the class name of button.

Demo

How To Add Animated CSS3 Bubble Buttons To Blogger

1. CSS Part
2. HTML Part

1. CSS Part

1. Go to Blogger Dashboard > Template
2. As always take a backup of your template
3. Search for below code in your template

]]></b:skin>

Add below code just above it

.button {
    font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
    background-position: bottom left;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
/* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
/* A 1px highlight inside of the button */
    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;
    box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
    background-position: top left;
    background-position: top left, bottom right, 0 0, 0 0;
}

.button:active {
/* Moving the button 1px to the bottom when clicked */
    bottom: -1px;
}
/* The three buttons sizes */
.button.big {
    font-size: 30px;
}

.button.medium {
    font-size: 18px;
}

.button.small {
    font-size: 13px;
}
/* A more rounded button */
.button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
    color: #0f4b6d !important;
    border: 1px solid #84acc3 !important;
/* A fallback background color */
    background-color: #48b5f2;
/* Specifying a version with gradients according to */
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover {
    background-color: #63c7fe;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
    color: #345903 !important;
    border: 1px solid #96a37b !important;
    background-color: #79be1e;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover {
    background-color: #89d228;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
    color: #693e0a !important;
    border: 1px solid #bea280 !important;
    background-color: #e38d27;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover {
    background-color: #ec9732;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button {
    color: #525252 !important;
    border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover {
    background-color: #b6bbc0;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAKTBKCdUvSNFMEryaD0_azNav1oxdv7Jp2Kx7Py6ZgSksOA4BSksQ6r4Xqm-3hPOiF7tFgUn12K4lMTr0Ejwod7nNFcL_7BDPoNFRJ3vdrH3qFsg0YdtbGhp9oI-iFlucWxkaO3Zo6rE/s1600/truebloggertricks.blogspot.com-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

Now we have integrated the CSS part in the template let's see how to use them.

2. HTML Part

Here I am listing button's HTML part according to their sizes.First choose size of button then choose color of button.

1.HTML For Big Button (Choose anyone according to button color)

<a href="LINK HERE" class="button big blue">TEXT HERE</a> 

<a href="LINK HERE" class="button big green">TEXT HERE</a> 

<a href="LINK HERE" class="button big orange">TEXT HERE</a> 

<a href="LINK HERE" class="button big gray">TEXT HERE</a>

2.HTML For Medium Button (Choose anyone according to button color)

<a href="LINK HERE" class="button blue medium">TEXT HERE</a> 

<a href="LINK HERE" class="button green medium">TEXT HERE</a> 

<a href="LINK HERE" class="button orange medium">TEXT HERE</a> 

<a href="LINK HERE" class="button gray medium">TEXT HERE</a>

3.HTML For Small Button (Choose anyone according to button color)

<a href="LINK HERE" class="button small blue">TEXT HERE</a> 

<a href="LINK HERE" class="button small green">TEXT HERE</a> 

<a href="LINK HERE" class="button small orange">TEXT HERE</a> 

<a href="LINK HERE" class="button small gray">TEXT HERE</a>

4.HTML For Small Rounded Buttons (Choose anyone according to button color)

<a href="LINK HERE" class="button small blue rounded">TEXT HERE</a> 

<a href="LINK HERE" class="button small green rounded">TEXT HERE</a> 

<a href="LINK HERE" class="button small orange rounded">TEXT HERE</a> 

<a href="LINK HERE" class="button small gray rounded">TEXT HERE</a>

Now replace "LINK HERE" with the link which you want to add it to button and replace "TEXT HERE" with the text which you want to appear on your button.

Read More

3 in one pop up subcription widget

Before I told you how to add facebook popup in blogger.Today I am going to reveal a new widget with facebook , google plus and twitter popup.It also featured with timer.lets see how to do it>First See the demo.

Live Demo

How to add 3 in one pop up subcription widget

• First go to blogger dashboard>>>Design>>>Page elements>>>add gadget>>>Html/javasript.

And copy this code and paste it in that gadget box.

<!--  http://truebloggertricks.blogspot.in/ 3 In 1 Likebox Start -->
<script type='text/javascript'>
//<![CDATA[
TITLEKN='Join us at Facebook';FBKN='your facebook username';TWITTERKN='your twitter id';URLKN='https://plus.google.com/Google Page + ID';
//]]>
</script>
<style>#stp-bg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:998;}#stp-main{position:fixed;top:220px;_position:absolute; /* hack for IE 6*/display:none;width:450px;border:7px solid #2f2f2f;background:#fff;z-index:999;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif !important;font-size:13px;}#stp-title{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;font-size:18px;padding:13px 0 13px 15px;}#stp-close{float:right;font-size:14px;font-weight:bold;font-family:Verdana, Geneva, sans-serif;color:#777777 !important;margin:0 13px 0 0;border-bottom:0px !important;text-decoration:none !important;}#stp-close:hover{text-decoration:none !important;}#stp-msg{background:#4074CF;padding:10px 15px;color:#ffffff;font-family:Arial, Helvetica, sans-serif !important;font-weight:bold;line-height:20px;}#stp-buttons{margin:25px 0px 25px 0;padding:0 0 0 15px;}#stp-bottom{padding:15px 10px;background:#EFEFEF;color:#95989F;border-top:1px solid #DDE0E8;}#stp-counter{font-size:11px !important;text-align:right;font-weight:bold;}.stp-button{float:left;width:120px;}.step-clear{clear:both !important;}</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
<script src='
http://yourjavascript.com/81988231124/truebloggertricks.txt.js' type='text/javascript'></script>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){                                
        $().KN3IN1({
            timeout: 60,
            wait: 0,
            closeable: true        });
});
//]]>
</script>
<!--  http://truebloggertricks.blogspot.in/ 3 In 1 Likebox End -->

 

Modification:

 

• Replace your facebook username with your Facebook fan page username or url with http://www.facebook.com
• Replace your twitter id with your twitter id without http://www.twitter.com/
• Replace Google Page + ID with your google + id
• Join us at Facebook is title of widget
• How long like box will display on blog is define by 60. ( means 60 second ) after 600 seconds it will close automatically

• 5 define the time in minute after which it will popup again.

That was all!

Read More

Recommended post widget for blogger

The Recommended Post slide Out Widget is an invitation to the reader to read any other post once he has read one of your blog entries. It's both useful for you (can improve your Click Through Rate (CTR) ) and for your blog visitors too.

Demo

How to add the Recommended Post Slide out Widget

1. Log in into your Blogger account, then go to Design (or Layout) > Page Elements
2. Click on Add a Gadget Link
3. Choose "HTML/JavaScript" option
4. Paste this code inside the empty box:

<div id="hlslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="hlslidein_image"></div> <div  id="hlslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof hl_onload_queue=='undefined')var hl_onload_queue=[];if(typeof hl_dom_loaded=='boolean')hl_dom_loaded=false;else var hl_dom_loaded=false;if(typeof hl_async_loader!='function'){function hl_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(hl_dom_loaded){newcallback()}else hl_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof hl_domLoaded!='function')function hl_domLoaded(callback){hl_dom_loaded=true;var len=hl_onload_queue.length;for(var i=0;i<len;i++){hl_onload_queue[i]()}}hl_domLoaded();hl_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){hl_async_loader("http://yourjavascript.com/30910102822/recemmend post.txt.js",function(){},"hl-out-slide")},"jQueryjs")} </script> <a href="http://truebloggertricks.blogspot.in/2012/08/recommended-post-widget-for-blogger.html" target="_blank"></a>

5. Save The Widget.
6. Go to Edit HTML > Check the "Expand Widget Template" box
7. Search (CTRL + F) for the following code :

<div class='post-footer-line post-footer-line-1'>

OR

<p class='post-footer-line post-footer-line-1'>

OR

<data:post.body/>

Immediately below any of these lines, add the following snippet

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

Now when the reader scrolls down to this div, the slide will open up.

8. Save your template. And that's it!

Read More

Get Ads Box with cool CSS effect as used in Spice Up Your Blog

Click to enlarge the image (on the image)

Hi guys as every one knows these days the Spice Up Your Blog ads widget for the blogs are very hot to be seen and look well equipped ad box with some cool rates going high well with this post you can also get the same kind of ad widget as shown in the image beside even at your blog. This widget has got cool CSS effect  so that it makes all the advertisers think that this blog is well designed and developed and get cool advertisers.First see the demo:

Demo

To do this just follow the steps given below:                                                      

Step 1. Go to your Blogger Dashboard => Template => Click Edit HTML => Search ]]></b:skin> and paste the following code in the content area before the above given code asked to search for.

/* -------------------Ads------------------*/
div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}
div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}
div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}
div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_125 a.adhere{width:123px;height:123px;}
div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_468 img{border:0;clear:right;}
div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}
div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_728 a.adhere{width:726px;height:90px;}
div.bsap_728 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_728 img{border:0;clear:right;}
div.bsap_728 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:128px;height:90px;line-height:730%;}
div.bsap_728 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_336 a.adhere{width:334px;height:280px;}
div.bsap_336 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_336 img{border:0;clear:right;}
div.bsap_336 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:336px;height:280px;line-height:2200%;}
div.bsap_336 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>

body div.bsap_468 a.adhere{width:466px;height:58px;}
.bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}
.bsap .even{margin-right:0!important;}
.bsap .ad1{background:#e42b2b!important;}
.bsap .ad2{background:#ff8400!important;}
.bsap .ad3{background:#a800ff!important;}
.bsap .ad4{background:#49a7f3!important;}
.bsap .ad5{background:#41d05f!important;}
.bsap .ad6{background:#B24700!important;}
.bsap .ad7{background:#FFE500!important;}
.bsap .ad8{background:#007D47!important;}
.bsap .ad9{background:#330000!important;}
.bsap .ad10{background:#990000!important;}
.bsap .ad11{background:#f70000!important;}

Step 2: Click Save Template
Step 3: Go to "Layout - Page Elements"=>Click on Add Gadget=>create new HTML / JavaScript widget
Step 4: Copy the code in the field below and paste it in the new widget created:

The size of 125x125

<center>
<div id="bsap_125" class="bsap_125 bsap">
<a href="http://AddURL" class="ad1" title="Ad Title" id="bsa_1451626" target="_blank"> <img src = "http://Imageurl "alt ="AdName"height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "http://AdURL"alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad3" title="AdTitle" target="_blank"> <img src = "http://Ad Image URL "alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "http://AdURL"alt =" AdName "height =" 125 "width =" 125 "/> </ a>
</ Div>
</ Center>

The size of 468x60

<div id="bsap_468" class="bsap_468 bsap">
<span class="bsap_468 bsap"> <a href="AdURL" title="Advertise Here" class="adhere ad4" target="_blank"> Advertise Here </ a> </ span>
</ Div>

The size of 728x90

<div id="bsap_728" class="bsap_728 bsap">
<span class="bsap_728 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ Div>

The size of 336x280

<div id="bsap_336" class="bsap_336 bsap">
<span class="bsap_336 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ div>

Use the code below to add a picture

< img src="ImageURL" alt="AD Name" <img height="125" width="125" />
Orange Blocks Size color banner, change the numbers according to the code used.

P.S. The one Highlighted with purple should be changed with any thing you like among ad1 - ad11 (It changes the color of the background image)
And the one with red to be changed as directed.

Hopefully helpful, Good luck. If you any doubts please ask by commenting below....

Read More

Chronicl-Responsive Blogger Template

Chronicl Free Responsive Blogger Template. This is a thesis skin which was designed by Alex from kolakube.com and bloggertipsntricks converted it to blogger template. This is a Responsive blogger template and this template has some inbuilt features such as Email subscription widget, search bar, customized heading tags (h1 to h6),code view and custom css3 buttons in three different sizes. He has focused on each and every small elements and Designed it specially.

Live Demo

Page Layout Preview :-

 

 

The main Features of chronicl Blogger Template

• Nice and Simple Design
• Responsive theme
• SEO Optimized
• 4 Column Footer Widgets
• 2 Navigation Menus
• Search bar 
• Custom About me widget
• Page navigation Widget
• Stunning Threaded Comments Section
• Default Jump Breaks for Post excerpts
• Custom Email subscription widget
• Customized heading tags (h1 to h6)
• HTML Code view 
• Custom css3 buttons in three different sizes 

      

Adding Custom CSS3 Buttons

You can add custom css3 buttons in three different sizes. To add it copy the button codes as per your need.
Code for Big size Buttons:-

<div style="text-align: center;">
<a class="button green big" href="YOUR_LINK">Button text</a> </div>

Code for Medium size Buttons:-

<div style="text-align: center;">
<a class="button green medium" href="YOUR_LINK">Button text</a></div>

Code for Small size Buttons:-

<div style="text-align: center;">
<a class="button green small" href="YOUR_LINK">Button text</a></div>

Now paste the code where you want to add the button and Replace the highlighted code with your link and button text.

Download:

Note:

       If you are a true and genuine blogger,Kindly please leave the footer link.This may help many bloggers like you.

Download Now
 

If you are satisfied with this template,Kindly Do this,

• Like us on Facebook.
• Follow Us on Twitter .
• Subscribe to our Updates by filling the form below the post where it says "Enter Your Email Here"and click on submit.
• Join this site with google connect

 

Read More

Cool Social Media Sharing Touch Me Widget

This cool widget calls "Touch Me". Its named such due to its appealing look that forces a visitor to roll hover the cursor over the icons and hit follow! :) This gadget is neatly structured using buttons from popular services like Google Plus, Facebook, Twitter and RSS.First see the demo

 DEMO:

Cool Social Media Sharing Touch Me Widget by Blogger Widgets

How To Add Cool Social Media Sharing Touch Me Widget To Blogger?

1. Go To Blogger Dashboard > Layout.

2. Choose "Add a Gadget".

3. Select HTML/JavaScript.

4. Copy and paste below code inside it:

<style> /*--------http://truebloggertricks.blogspot.in/ Touch Me Sharing Widget ------*/ .touchme a { display:block; height:50px; width:50px; padding:0 4px; float:left; background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } </style> <p style="display:none;">Cool Social Media Sharing Touch Me Widget by <a href="http://truebloggertricks.blogspot.in/2012/08/cool-social-media-sharing-touch-me.html">Blogger Widgets</a></p> <div class='touchme'> <!--RSS--> <a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a> <!--Google Plus--> <a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='nofollow' target='_blank'></a> <!--Facebook--> <a class='facebook' href="YOUR FACEBOOK LINK" rel='nofollow' target='_blank'></a> <!-- Twitter --> <a class='twitter' href="YOUR TWITTER LINK" rel='nofollow' target='_blank' ></a> </div>

Thats all!!

Read More

Spiceupyourblog like Social Buttons With Rotate Spin Effect

Today, I am back with beautiful 3D Social Buttons With Rotate Spin Effect For Blogger Blogs. You can see live demo on my Beautiful Blogger Widgets. These buttons created with the help of useful CSS trick. With CSS rotate when you place your cursor over each icon they spin 360 degrees, they spin back 360 when the cursor is removed.

You will see hover effect on these buttons.These buttons are related to your RSS feed, Email RSS, Facebook, Twitter, Google+, Pinterest and Feedburner reader count.


Live Demo 3D Social Buttons With Rotate Spin

How To Add 3D Social Buttons With Rotate Spin Effect To Blogger?

1. Go to Blogger Dashboard > Layout.
2. Click 'Add A Gadget' > HTML Javascript.
3. Copy and paste below code in HTML Javascript Gadget.

<style> #social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center> <div id="social"><a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf2hGA2q1DilIJLrVTry3i2bwrgZkyJhGAQVNEUofYPrEp1x2L59eoZMKJ3Z4kVT4uqflYY284YFXji1wu7gnRtxCsbBZtkzdDBs6xtDNMlwJ4-gcK4TpK1wcc70LDKVUgCDiSKVNMxG2a/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9g5fw6EVsZfmT-lFTAxHmeQS3h-FZ0kE020fM5gGe_xxmFOQdyOph0pvzhi0j6-thAlNzQqWkikUMFGBdirYrDh0uocTF4HHJ-XyrxrJKJBZYoCY01Oro1Dj3HXJPtPQKXzB4eSuRBvTU/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipTWu2Kjet6jPx0pcR3NF5cPY_3qg-PALYBzuYOEjCJnRGKwtfkIrHRUszHQPhXj4GE5K_1fEzXxT-OPWvm0ywNEYd7IkAjrCLqwvygNzQbtmSaeJmRNH4RM7GKLA-TemjjHnqhfqn7b7n/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUpwFt447fPKnu8gS2wrVqggZz37nzDar-V31JlByR8fMn-7zfaDShk0AjY-h4aMg-VrJO-SIzAqN2E7d95K2YSf7r_f75Q7dWz3rQmsrndZexSNJB8RqE-xXmYb0ZaedjsRvQHq3c3Ihe/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3bq7tJ0bImFhgLQU1serzegVuJSTF6BnhFY1oSTlkdN_LsuCeXHtM0iBqk3xi83uOcFiOjqk10Zbh4V_lIRHpfSimmxdwKH-BYV7tqqnbc89kkevaJxDltAG8fM-tFn_xM-AZ4abEmys4/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO5ws1adJ20gevWXj7mTvfjmIW3SNVIpPTFe0s4zKRc0LjaVKkc5zfvjQKiTILR4ozBGSKujqYpUQkEoOTPDfN8ckAUYFHRn2TOt176HNCmdZFcv6GkC6cW7auT79sdaSI0D962dkNVTPa/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div> <br/> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="Blogger Widgets" src="http://feeds.feedburner.com/~fc/truebloggertricks?bg=FF9999&amp;fg=444444&amp;anim=1" style="border:0" /></a> </center>

Note: Replace the following sections with your social profiles and feed URLs.

• YOUR-FEED-URL-HERE
• YOUR-EMAIL-RSS-URL-HERE
• YOUR-FACEBOOK-PAGE-URL-HERE
• YOUR-TWITTER-URL-HERE
• YOUR-GOOGLE-PLUS-URL-HERE
• YOUR-PINTEREST-URL-HERE
• YOUR-FEEDBURNER-URL-HERE

4. Save it.

That's it you have a very cool subscribe section on your blog. Thanks for reading it.

Read More

Stylish recent comment widget with thumbnail

The Recent Comments Widget for Blogger displays recent blog comments on your sidebar.You can use this widget to display the recent comments of any blogger blog. In this widget we can show the Avatar of Commenter using. As you seen my Recent Comments Widget, this looks exactly same to my Recent Comments Widget.This widget is highly customizable. So that you can easily customize your recent comments widget.You can also set the default avatar image and much more things that you can easily customize.


SEE THE DEMO:






How To Add Recent Comments Widget for Blogger With Avatar To Blogger?

1, Go to Blogger Dashboard > Layout.
2. Click on Add a Gadget > HTML/JavaScript.
3. Paste below code and save it.

<style type="text/css">    ul.latest_recent_comments{list-style:none;margin:0;padding:0;}    .latest_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}    .latest_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}    .latest_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}    .latest_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
.latest_recent_comments span{display:none;}</style><script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var    numComments     = 8,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 30,    showMorelink    = true,    moreLinktext    = "More &#65533;",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = true;//]]></script><script src="http://yourjavascript.com/43012082112/truebloggertricks.txt.js"></script><script src="http://truebloggertricks.blogspot.com/feeds/comments/default?alt=json&amp;callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script>

4. Now change truebloggertricks.blogspot.com with your own blog URL.


Customizations (Optional)

• To change number of comments find this numComments = 5,
• If you don't want to show avatar then find this code showAvatar = true
• To change avatar size find this code avatarSize = 40
• If you don't want to show rounded avatars then find this code roundAvatar = true
• To set maximum number of characters find this code characters = 40
• To show more link find this code and change value to true showMorelink = false
• If you enable show more link value then you can change the text which shows more link.Find this code moreLinktext = "More »"
• To change default avatar image find this code defaultAvatar = "http://www.gravatar.com/avatar/?d=mm

5. Now save you widget.

Now you should have a working Recent Comments Widget for Blogger With Avatar on your blog.
I hope you all will like this gadget. Do not forgot to share this widget with your friends.

Read More

Create bubles falling effect on Blogger

To make your blog good looking, it needed creativity your own. To make it happens you can add some effects, or animated pictures, or even you can experiment with the color that makes your blog looks good, even if you have to, you can trial and error before you got the final result as You wanted, but make sure you're create it in trial template, instead of your current template to avoid something bad happened before you apply them as backup.

Talking about to make or add the blog's effect in order to make your blog looking good, this post will show you ho to create bubles falling effect. To make the bubles falling effect it's very easy and simple. 

How to add/Make/Create bubles falling effect on Blogger (Blogspot):

1. Login to Your Blogger account

2. From Dashboard, go to "Design" > "Page Elements", then click "Add A Gadget" 

3. Now You choose "HTML/Java Script"

4. Then You just simply copy the following code and paste it to the HTML box

<script src=”http://clief.googlecode.com/files/bubble.js”></script>

Thats all!!!

Read More