Showing posts with label Java Script. Show all posts

Friday, 3 August 2012

Transparent Blogger Menubar With Subscription And Fan Page

Actually menubar is important to blogger.
This is newest menubar that helps you to
increase your Feed subscribers and
Facebook fans.And its transparent bar.It
will show bottom of your page.This is also
good ways to increase subscribers and fans.
Follow these simple steps to add it to your
blog.

Demo

1. Log in to blogger Design > Edit HTML

2. Find this tag by using Ctrl+F </body>

3. Paste below code Before </body> tag

<style type='text/css'>
#ut-sticky
{
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0GaFPNqds7msXxmskB8BGQomXfAsmU5wWvJWuF001pQgfYzoZY5Bmw8kYYA0VcjhfGoGba7_UyseJnaj6m8ZFmJnBgGXiN0WvJXCE1qje_b3PkLAOrtahRxqyKQkBL_s8yTds496nOmNP/s1600/ut-bg.png&#39;) repeat;
color:#fff;
text-align: center;
margin:0 auto;
border-top: 1px solid #fff;
height:28px;
font-size:13px;
position:fixed;
bottom:0;
z-index:999;
width:95%;
border-top-left-radius:15px;
border-top-right-radius:15px;
display:block;
font-weight: bold;
font-family: arial,&quot;Helvetica&quot;;
font-color:#fff;
}
#ut-sticky:hover
{background:#333;}
#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:&quot;Arial&quot;; color:#FF0000; line-height:30px;}
</style>

<div id='ut-sticky'>


<p>Get Latest Updates: <a href="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix" target="_blank">Subscribe Now</a> | <a href="http://www.facebook.com/bloggertrix" target="_blank">Like Us Facebook</a></p>

<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div>

</div>

<script language='JavaScript'>


function hide_cross() {

crosstbox = document.getElementById(&quot;ut-sticky&quot;);

crosstbox.style.visibility = &#39;hidden&#39;;

}

</script>

4. Now save your Template

You are done...

Monday, 30 July 2012

Social Bookmark Buttons Below To Post Title In Blogger

Social bookmarking helps you to drive quick
traffic to your blog.To get quick traffic, you
have to submit your all post to social networks.
Therefore,you have to add social sharing
gadgets to your blog. It will helps to share your
blog post with social networks.I made a post
about Slide out buttons ,Spinning effect buttons
and more to click here. This tutorial will helps to
add social sharing button below to your blog title.
Follow these steps to add it to your blog.

1. Log in to blogger and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F </head>

4. Paste below code Before </head> tag

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

5. Now Find this code by using Ctrl+F <data:post.body/>

6. Paste below code Before <data:post.body/> code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:4px;'>
<table border='0'>
<tbody><tr>
<td>
<div style='margin-right:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='mybloggertips' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>
<td><div style='margin-right:10px;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
</td>
<td>
<div style='margin-right:10px;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
</div>
</td>
</tr>
</tbody></table></div>
</b:if>

7. Now save your template
cheers

Friday, 20 July 2012

Attractive Rss Subscription Widget With Nice Style For Blogger

Feed Subscription is important in bloggers.Because
it helps to get new post by email.So, today i bring
a nice feed subscription widget with counter. It
Include Twitter and Technorati.You can check my
other Rss subscribe widget from here. Follow this
simple steps to add it to your blog.

1. Log in to blogger account > Go to Design >> Page Element

2. Click Add Gadget and select 'HTML/Javascript'

3. Paste below code.

<div class='widget-content'>
<div class='third' style="border:0px solid #000;">
<center>
<form style="padding-top:6px;" id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" value="Enter your email address..." id="subbox" onfocus="if (this.value == &#39;Enter your email address...&#39;) {this.value = &#39;&#39;;}" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address...&#39;;}" name="email" style="width:200px;" />
<input type="hidden" value="Bloggertrix" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input style="
        padding-left:3px;
        padding-right:3px;
        border: 1px solid #333333;
        cursor: pointer;
        background-color: #000000; 
        color: #FFFFFF;" 
type="submit" value="Submit" />
</form>

</center>
<center>
<table border="0">
<tr>
<td>
<a href="http://twitter.com/bloggertrix" target="_blank" title="Follow Me On Twitter">
<img style="width:54px; height:54px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6w6oN4IU3T7U2cR5qkYVbaxbBLzMT9cJ9yU3CZpajFIVmxSCYnGULcYNG_8WDhzmpTCZ-yEh2CEa-WMUVqlw8Q_q-vsyRJbR7fh-C99UHbQg9vZuPauXqrL7HAR8ffMWcWKbsQojjpLI/s800/EAB_twitter%2520icon.png" /></a>
</td>
<td>
<a href="http://technorati.com/faves?sub=addfavbtn&add=http://www.bloggertrix.com" target="_blank" title="Add To Technorati">
<img style="width:54px; height:54px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkgdUJyrhyphenhyphenKTeR626tv38Uu7u0QALIo2pwuJAfsXquvz_apeycy_leOXoRAzVejsl3AAPP8-ybT1MsYOuN97dPA24_bqdHxsYNkUeWzanczULelfFQK566RDqSiE86-hrHvO6MFJ6VjCk/s800/EAB_technorati%2520icon.png" /></a>
</td>
<td>
<a href="http://feeds.feedburner.com/bloggertrix" target="_blank" title="Subscribe Via RSS">
<img style="width:54px; height:54px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyKwqfJzMfij5MnJJ1CVzwfiCJKJc0ZlNEvNHjnxy6PEJliVjF9TSlwxhuz7-vai3OfFu5UmBMSbUnDRptNXHyPOyi23SolhYEZwt395j9zo9uvTPmBltZ3nOfqNEU5oO4gCJTBRfY5B4/s800/EAB_rss.png" /></a>
</td><td><td>
<br/><br/>
<a href="http://feeds.feedburner.com/bloggertrix"><img src="http://feeds.feedburner.com/~fc/bloggertrix?bg=99CCFF&amp;fg=444444&amp;anim=1" height="26" width="88" alt="Fellow Readers" /></a>
</td></td></tr></table></center></div></div>

Replace bloggertrix with your Facebook fan page Id
Replace bloggertrix with your twitter Username
Replace bloggertrix with your Feedburner Id
Replace bloggertrix.com with your site name

4. Save HTML/Javascript. you are done.

Sunday, 15 July 2012

Attractive Slide Out Social Network Sharing Buttons To Blogger

This is also great social share buttons.its
showing bottom left and, share button showing
with hover style.So, this also helps you to
share your articles easily.you can try it.Check
my earlier post about social buttons.Social
Network Widget With Spinning Hover Effect
For Blogger.Try below steps.

DEMO

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F </head>

3. Paste below code before </head> tag

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

6. Find this code by using Ctrl+F </body>

7. Paste below code before </body> code

<div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style">
    <a class="addthis_button_more">Share</a>
    <ul>
        <li><a class="addthis_button_preferred_1"></a></li>
        <li><a class="addthis_button_preferred_2"></a></li>
        <li><a class="addthis_button_preferred_3"></a></li>
        <li><a class="addthis_button_preferred_4"></a></li>
    </ul>
</div>

9. Now save your template
You are done.

Saturday, 7 July 2012

How To Add Classic Drop Down Menubar For Blogger

This is Another classic menu-bar.you can add it
with simple steps.Earlier i made a post about
Attractive Css Drop Down Menu Bar For Blogger.
Actually, its also cool menu-bar.So , try to add these
classic menu bar o to blogger. Follow these steps.

DEMO

1. Log in to blogger Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Paste below code.

<div class="slider-wrapper theme-pascal">
<div class="ribbon">
</div>
<div class="nivoSlider" id="slider">
<script src='http://bloggertrix.googlecode.com/files/classic-menu.js'
type='text/javascript'></script>
<style>
.ddsubmenustyle, .ddsubmenustyle div {
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}
.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}
.ddsubmenustyle li a {
    display: block;
    width: 170px;
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}
* html .ddsubmenustyle li {
        /*IE6 CSS hack*/
    display: inline-block;
    width: 170px;       
}

.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}

.downarrowpointer {
        /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}
.rightarrowpointer {
        /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}
.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}   
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}
.mattblackmenu li {
    display: inline;
    margin: 0;
}
.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
        /*padding inside each tab*/
    border-right: 1px solid white;
        /*right divider between tabs*/
    color: white;
    background: #414141;
}
.mattblackmenu li a:visited {
    color: white;
}
.mattblackmenu li a:hover {
    background: black;
        /*background of tabs for hover state */
}
.mattblackmenu a.selected {
    background: black;
        /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
    <ul>
        <li>
            <a href="#">LINK-1</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu1">LINK-2</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu2">LINK-3</a>
        </li>
        <li>
            <a href="#">Link-4</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu3">LINK-5</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
    <li>
        <a href='#'>LINK-2.1</a>
    </li>
    <li>
        <a href='#'>LINK-2.2</a>
        <ul>
            <li>
                <a href='#'>LINK-2  2.1</a>
            </li>
            <li>
                <a href='#'>LINK-2  2.2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK-2.3</a>
        <ul>
            <li>
                <a href='#'>LINK-2 3.1</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINk-2.4</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
    <li>
        <a href='#'>LINK-3.1</a>
    </li>
    <li>
        <a href='#'>LINK-3.2</a>
    </li>
    <li>
        <a href='#'>LINK-3.3</a>
        <ul>
            <li>
                <a href='#'>LINK-3  </a>
            </li>
            <li>
                <a href='#'>LINK-3 </a>
            </li>
            <li>
                <a href='#'>LINK-3  </a>
            </li>
            <li>
                <a href='#'>LINK-3 </a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK-3</a>
    </li>
    <li>
        <a href='#'>LINK3 </a>
        <ul>
            <li>
                <a href='#'>LINK-3 </a>
            </li>
            <li>
                <a href='#'>LINK-3 </a>
                <ul>
                    <li>
                        <a href='#'>LINK-3  </a>
                    </li>
                    <li>
                        <a href='#'>LINK-3  </a>
                    </li>
                    <li>
                        <a href='#'>LINK-3  </a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 6</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
    <li>
        <a href='#'>LINK5 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 3</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 5</a>
    </li>
</ul></div></div>

Replace # with your Links
Replace Links name with your any name.

4. Now save your HTML/Javascript'.

You are done...

Tuesday, 3 July 2012

How To Add Floating Horizontal Share Button For Blogger

This Is also Another Cool another cool tutorial.
You can add floating horizontal bar for blogger.
It include with share buttons.When users will
scroll down, Horizontal bar will appear on top.
I think this helps you to get share your post and
blog.So,there have lot of social networks to share.
Earlier i post about 4 In 1 Smooth Social
Subscribing Slide Out For Blogger. You can
Follow these steps to add it to your blog.

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F </head>

3. Paste below code Before </head> tag

<script type="text/javascript">
var addthis_config = {
    bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

4. Again Find this tag by using Ctrl+F </body>

3. Paste below code Before </body> tag

<div class="addthis_bar addthis_bar_medium">
    <label>Share This Page:</label>
    <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
        <span><a class="addthis_button_preferred_1"></a></span>
        <span><a class="addthis_button_preferred_2"></a></span>
        <span><a class="addthis_button_preferred_3"></a></span>
        <span><a class="addthis_button_preferred_4"></a></span>
        <span><a class="addthis_button_compact"></a></span>
        <span><a class="addthis_counter addthis_bubble_style"></a></span>
    </div>
</div>

7. Now save your template
you are done.

Monday, 25 June 2012

How To Add Pinterest Follow Me Button To Blogger

Pinterest is latest social bookmaking site. It
attracting millions of people now.It also like
Facebook Google Plus and Twitter. This Site
allow users to Pin any image or feature videos
to there virtual Pinbord. so your followers,
friends can repin it. This social network also
helps you to get traffic.So you can add follow
me button in your blogger. Follow these steps.

Follow me in here

1. Log in to your blogger account and Go to Design >> Edit HTML

2. Put checked mark in Expand Widget Templates

3. Find this tag by using Ctrl+F <data:post.body/>

Add Pinterest Below Post Title.

If you want to add it to below post title, add any of below code before <data:post.body/> tag

Add Pinterest End of the Post

If you want to add it end of the post, add any of below code after <data:post.body/> tag

Style 1

<a href="http://pinterest.com/bloggertrix/">
<img src="http://passets-cdn.pinterest.com/images/about/buttons/
follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a>

Style 2

<a href="http://pinterest.com/bloggertrix/">
<img src="http://passets-cdn.pinterest.com/images/about/buttons/pinterest-button.png"
 width="80" height="28" alt="Follow Me on Pinterest" /></a>

Style 3

<a href="http://pinterest.com/bloggertrix/">
<img src="http://passets-cdn.pinterest.com/images/about/buttons/big-p-button.png" 
width="60" height="60" alt="Follow Me on Pinterest" /></a>

Style 4

<a href="http://pinterest.com/bloggertrix/">
<img alt="Follow Me on Pinterest" height="16" src="http://passets-cdn.pinterest.com/images/about/buttons/small-p-button.png" 
width="16" /></a>

* Replace Bloggertrix with your Pinterest username
Now save your Template. You are done.

Sunday, 24 June 2012

How To Add Vertical Floating Social Sharing Bar To Blogger

Social Bookmarking helps you to get quick traffic to
your blog.So, you have to keep social bookmark
gadget, where the visitors can get it quickly.SO, they
will force to share it.This gadget is vertical bar. it will
appear on side of your blog.it work with every pages
with home page.Earlier I designed another floating
share buttons to blogger Follow these steps to add it
to your blog.

1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)

2. Find this tag by using Ctrl+F </head>

3. Paste below code Before </head> tag

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

4. Find this tag by using Ctrl+F </body>

5. Paste below code before </body> code

<script>
var options={ "publisher": "ur-449c40c9-a162-33c2-af86-4ab2d3534cb", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "delicious", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

8. Now click Save Template.
Cheers you are done.

Thursday, 21 June 2012

Learning C++ and Javascript Project

It is impossible for us to learn a programming language deeply without giving it enough time. But basic introductory can help us with our future goal or focus. I have 'mastered' the basics of HTML and CSS by practicing with my blog. Now the next easiest thing is learning Java Script which is my next goal. I am gathering up some resources and since it is much harder I will try to create some 'explanation' or practices on this blog to share and update on my learning for your benefit. I am also planning to start with C++ as well during this summer but I know it will take lot longer to engulf the basics.

The Why

First of all reason for me to create this post is to push myself to continue learning as I have a bad habit of giving up. And for you about some updates and future posts on this blog. I will continue writing regular tricks and trips topic but this is be my main focus for learning.

The reason for me to learn either of the programming language is to explore more into the subject and application. I will not have enough experience but basics to know what this is about and why should I learn it or not later deeply. I am just a high school kid and I am not going to say anything is my passion since I just have too little experience, but I am deeply interested in Physics, Robotics and programming. These are the subjects I am trying to understand more during this summer. Beside I have been blogging for a while (6 month) and I think I can help out other bloggers with new tricks and tools to mess with.

The How

I am using Internet resources from all over the place but I will try to organize them for you with my choice of best if you are interested in learning these programming language. I am going to use two books as well - C++ UnderC learning Edition by Steve Donovan and Java Script by Eric Pascarello. I wouldn't recommend buying them since they are still on my table waiting to be read but I will be using them for sure.

For the tools that I am going to use are Microsoft Visual Studio for C++ which you can download for trial or free with your student account and Notepad++ for HTML and JavaScript in them combined with online tools.

For You

If you are interested or a new learner like me you are welcomed to follow me. You can subscribe by email to my blog from right but note that I will also write my regular posts along the way. You can also bookmark this page since I will be adding all the future post link below on this post right here.

Monday, 18 June 2012

How To Add Automatically Readmore Option To Blogger

This is great option for bloggers.earlier i made tutorial
about manual mode.This will helps to short your page with
button.With using this option we can reduce height of home
page.So this post will important person who care about
home page size.You can add it to your blog with simple steps.

How To Show Post Title Only On Home page

1. Log in to blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F </head>

4. Paste below code Before </head> tag

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://btrixx.googlecode.com/files/btrix.js' type='text/javascript'/>

5. Now Find this code by using Ctrl+F <data:post.body/>

6. Replace above code with this code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumbundefined&quot;summary<data:post.id/>&quot;);
</script><div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Reade More >></b></a></span>
</b:if>

7. Now save your template
you are done.

Sunday, 17 June 2012

How To Show HTML,Css,Java Script And Other Code in Blogger Post

This is useful for bloggers who posting about codes.
When we posting code, that mean we are providing
codes for users.So, if we can put our codes in specific
place like text box. it will easy to grab the code.
This tutorial will helps to make some attractive to your
code ares background.

1. Log in to blogger account and Go to Design >> Edit HTML

2. Find this tag by using Ctrl+F ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

/*--Code View www.bloggertrix.com--------------*/
.post blockquote {
background: #C8EFFF url();
background-position:top left;
background-repeat:repeat-y;
margin: 0 0px;
padding: 10px 20px 10px 5px;
border-top: 2px solid #666;
border-right: 2px solid #666;
border-left: 2px solid #666;
border-bottom: 5px solid #666;
font-size: 1em;
color:#000000;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;

}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;

Now when you make new post you can add like below in Edit HTML

* You have start with <blockquote> here your code </blockquote> end.

<blockquote> This is my code </blockquote>

Done, Cheers.

Saturday, 16 June 2012

How To Add "ShareThis" Social Bookmark Buttons To Blogger Post

This is also Nice social Bookmark buttons.it include
with hover effect.So this buttons helps you to get
more visitors by sharing your post. Earlier i posted
about How to add "Add This" Social Bookmark Buttons.
This is more attractive than it. So, in this tutorial also
helps you to add this social bookmark button to
below post title and end of the post.Follow these
steps to add it to your blog.

Add Button Just below to Post Title

1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)

3. Add check mark in Expand Widget Templates.

4. Find this tag by using Ctrl+F <data:post.body/>

5. Paste below code before <data:post.body/> code

<!-- AddThis Button bloggertrix.com -->
<span id="st_finder"></span>
<script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js">
</script><script type="text/javascript">var switchTo5x=true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",
 {"facebook":["hcount","Facebook",""],"twitter":["hcount","Tweet",""],"googleplus":["hcount","Google +",""],"sharethis":
["hcount","ShareThis",""]} );var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for 
(i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>

Add Button To End of the Post

6. Now Find this tag also by using Ctrl+F

<div class='post-footer-line post-footer-line-1'>
If cant find above tag try to find below tag

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

7. After found one of above code, paste below code after it

<!-- AddThis Button bloggertrix.com -->
<span id="st_finder"></span>
<script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js">
</script><script type="text/javascript">var switchTo5x=true;stBlogger2.init("http://w.sharethis.com/button/buttons.js",
 {"facebook":["hcount","Facebook",""],"twitter":["hcount","Tweet",""],"googleplus":["hcount","Google +",""],"sharethis":
["hcount","ShareThis",""]} );var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for 
(i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>

8. Now click Save Template.
Cheers you are done.

Friday, 15 June 2012

How To Change Default Anonymous Avatar In Blogger Comments

This is also nice hack for comment system in blogger.
When we allow anonymous comment, everyone can
comment your post without using any Google account.
As a result of it. there are no way to provide diffrent
avatar for commentators.So , bloggers use a default
avatar for every anonymous commentator.So, in this
Tutorial helps you to change that default avatar,
Follow these steps to add it to your blogger.

How To Change Default Profile Image In Blogger Comments

Those who are not enable anonymous comment
system, follow this.

Log in to blogger account and Go to Setting >> Comments
And make setting like this and click save setting.

How To Change Default Anonymous Avatar In Blogger Comments

1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)

3. Find this tag by using Ctrl+F </body>

3. Paste below code before </body> tag

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'your-avatar-url-here')
.ssyby('blank')
</script>

*Replace Your-avatar-url-here With below URL or any avatar URL

Example URLs

http://4.bp.blogspot.com/-dmYyFEad9ak/T9riPTHY6NI/AAAAAAAABHY/
NN5T-ZJ4t2k/s1600/btrix1.png

http://2.bp.blogspot.com/-3yhvpRp973o/T9riZzwH2CI/AAAAAAAABHg
/SGPBZ0-LE5A/s1600/btrix2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI2pT1vq2QqjTSXbzrtc-4znndIJy1S6_q5aUwZEHPt6lrNgKKA3WOY6N-GiNonyZlerQV5PN1ul7Yws28q0yrgi0BYIcrHeW3xhUP0CL2UhCAQoMHulBF_AypyyqOAP4x3_uVs_272oKd/
s1600/btrix4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguFAz1hDOn_8L7_d5kzIz9cjZDlXE82sJJYuKiw2ejAG0qB0B6QnYlHOzubsC3ewHWpAO2xpzLP3f1s5SlD_48x-fuuQGlF2iVT5k2CoG67h-A0sp6ZmIDoN7vJKwJ9BLfyfZ8V0QuF9gt/
s1600/btrix3.png

4. Now click Save Template. you are done.

Wednesday, 6 June 2012

How To Change Default Profile Image In Blogger Comments

How to change blogger default image.Always blogger
profile picture showing blogger logo if the user hasn't
change the profile picture. So blue avatar image showing
in blogger. But comment section it appear as blogger
logo like below. So, in this tutorial im going to tell a
simple hack that helps you to change default icon in comment
section.you can use any nice image as default image. follow
these steps to add it to your blog.

1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Put checked mark in Expand Widget Templates

3. Find this tag by using Ctrl+F    <b:includable id='comments' var='post'>

4. After you found above code. you have to scroll down till you find this code.

                                        </b:includable>

5. You have to pass some more line to find out this, so be patient and find it carefully.
( Tip: most of time it will place with single line)

6. After you found it, paste below code before </b:includable> tag

<script type='text/javascript'>
//<![CDATA[
if(document.getElementById("comments-block")) document.getElementById
("comments-block").innerHTML = document.getElementById("comments-block")
.innerHTML.replace
(/http:\/\/img2\.blogblog\.com\/img\/b16-rounded\.gif/g, 
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5BYCSsNmmBijSKPbx1hLHjM4574hbKw2EMHqMwaqcSG_yKlmnA0Up4hbeb9gvhfIPZkXDDTBfFlGV4Gf6CNvIelGl_zvjZ14jXg6EmejnxuTCQxVD8csmKIetW3fs0zM1-NKxS9qixmk/s1600/avatar.png");

7. You can change red color Image link with your own image link.

8. Now click Save Template, you are done.

Monday, 21 May 2012

How To Add Cool Subscribe Gadget For Blogger

This is a cool subscribe gadget with nice buttons.
Add to your blog and make it attractive.
i have Facebook ,Twitter and Google +

1. Log in to blogger and Go to Design >> Page Element.

2. Click Add Gadget and select 'HTML/Javascript'

3.Paste below code.

<style type="text/css">                                                        
.abtbar{width:300px;float:left;background:#FFF top no-repeat;margin:0 0 10px;padding:10px;border:0px solid #DDD;}.abtbar .abt-credit{}.abtbar .abt-credit a{float:right;font-size:10px;font-weight:bold;text-shadow:1px 1px white;color:#1E598E;text-decoration:none;}.abtbar h2{background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-DtWCDbhvqzqVOQ6LQ-txbayhvixvi77SOZ6yOkQBZaKTXHk1kviFU692j4QVjSpJt_N-gm9J_dxv5WDIXNOmQ93gq0f_ZCIRfBp0mNDlNTVy1HtP8VU0SvwmYCEPMR0ANf9Ao378LjU/s1600/%5Bwww.internetricks4u.blogspot.in%5DSUBSCRIBE.gif) no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 0px;font-size:0px;font-family:Sans-serif, Arial, Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 0 #fff;}.abtbar .count{color:#F17C18;font-size:14px;font-weight:bold;font-family:Helvetica, Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0px 0 4px;margin:0;}.abtbar .count span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px 0px 0;}.abtbar .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 0px 0;float:left;width:300px;font-family:Helvetica, Arial;font-size:12px;}.abtbar .subicons a{text-decoration:none;color:#333333;}.abtbar .subicons a:hover{text-decoration:underline;color:#333333;}.abtbar .subicons .rssicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNs1AsulQAZCBt_1wYJoUDACVupuFxc9xo09FhvwahdivUNo8V1bBJmmvdzW5gCASBlf7dyOSiKklsBxRD25n7Ktuco4jV5p4zr8FXgw746Nlnl5i1AUxGCy1ScSlv8zqHo9yMiqdswU/s1600/Widget_icon.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .googleicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNs1AsulQAZCBt_1wYJoUDACVupuFxc9xo09FhvwahdivUNo8V1bBJmmvdzW5gCASBlf7dyOSiKklsBxRD25n7Ktuco4jV5p4zr8FXgw746Nlnl5i1AUxGCy1ScSlv8zqHo9yMiqdswU/s1600/Widget_icon.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .fbicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNs1AsulQAZCBt_1wYJoUDACVupuFxc9xo09FhvwahdivUNo8V1bBJmmvdzW5gCASBlf7dyOSiKklsBxRD25n7Ktuco4jV5p4zr8FXgw746Nlnl5i1AUxGCy1ScSlv8zqHo9yMiqdswU/s1600/Widget_icon.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .subicons .twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVNs1AsulQAZCBt_1wYJoUDACVupuFxc9xo09FhvwahdivUNo8V1bBJmmvdzW5gCASBlf7dyOSiKklsBxRD25n7Ktuco4jV5p4zr8FXgw746Nlnl5i1AUxGCy1ScSlv8zqHo9yMiqdswU/s1600/Widget_icon.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.abtbar .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.abtbar .emailsub .emailicon{background:url(http://www.fordfarmhouse.com/images/email.png) no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.abtbar .emailsub .emailupdatesform{margin:15px 0 5px 5px;width:300px;float:left;}.abtbar .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.abtbar .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#F9EAD4,0),color-stop(#F9780E,1));background:-webkit-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-moz-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-o-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#F9780E));border:1px solid #F9780E;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}
</style><div class="abtbar">
<h2 class="title"></h2>
<div class="count">
<span class="bigcount"></span>Learn Free Pro Tricks daily </div>
<div class="subicons">
<div class="rssicon">
&nbsp;<a href="http://feeds.feedburner.com/FeedburnerID" rel="nofollow" target="_blank">  RSS</a></div>
<div class="googleicon">
&nbsp;<a href="https://plus.google.com/Username 1" rel="author" target="_blank"> G+</a></div>
<div class="fbicon">
&nbsp;<a href="http://www.facebook.com/Username 2" rel="nofollow" target="_blank">FB</a></div>
<div class="twittericon">
&nbsp;<a href="https://twitter.com/bloggertrix" rel="nofollow" target="_blank">Twitter</a></div>
</div>
<div class="emailsub">
<div class="emailicon">
<div style="color: #3a3a3a; font-family: Helvetica, Arial; font-size: 13px; font-weight: normal; margin: 0; padding: 0; width: 270px;">
Receive Our All Updates  In Your Inbox by &nbsp; &nbsp; submitting your Email ID below.</div>
</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedburnerID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="emailupdatesinput" gtbfieldid="10" name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" placeholder="Enter your email here..." /><input name="uri" type="hidden" value="AllBloggingTricks" /><input class="joinemailupdates" type="submit" value="Submit" /></form>
<span class="abt-credit" style="font-family: Arial,Helvetica,sans-serif;"></span></div>
</div>
</div>

* Repalce placewith FeedburnerID with your ID
* Replace Username 1 With Google plus username
* Repalce Username 2 with your Facebook ID
* Replace bloggertrix with your Twitter ID

4. Now save your HTML/Javascript'.

you are done.

Sunday, 20 May 2012

How To Add Shareaholic Sassy Bookmarks To Blogger

This is a new style social bookmark widget.
it will helps to share your post with social bookmarks.
Follow these steps.