Saturday, October 17, 2009

    How to add retweet (twitter) button to Every Blogger Posts

    Twitter  is fastest growing social networking site and also most famous . So, by Bookmarking in this site .
    This would be the cause of more traffic comes to your site . Most person have twitter account when they visiting your post if they think to bookmark your post then the most common option will be this .
    and it is so easy to submit in the twitter also display how many times it had been marked in twitter .
    Also if your site's SEO is not good then it will help your site .If any user just search anything like ( Common Widgets ) you have a post of this name but user can't find your sites post because your SEO is not good In this time If your post had been marked in Twitter User see the twitter page of the term that was searched by him/her . Usually they were going to click it because of popularity and many thing and then they will see the post author is your website and user were come to you ..

    Let , see how to add the RETWEET  :---

    Now find these codes on your template
    div class='post-header-line-1'  or  data:post.body (if you have data:post.body
    the put the code after data:post.body and before
    )

    Then just put the codes after the line ( choose this button with image or without image and choose which side left or right ) .

    retweet button

    Put the code given below 

    <div style="float:right;padding:4px;">
    <script type="text/javascript">
    tweetmeme_url = '<data:post.url/>';
    tweetmeme_source = 'your_twitter_user_name';
    script></div>


    Your_twitter_user_name = put your twitter username
    float:right = to put it on right and float:left = to put it on left .
    If you want to change the positon then float:left or right 
    left to put it in left or right to put it on right
    
    

    retweet button compact.jpg

    Put the code given below 

    <div style="float:left;padding:4px;">
    <script type="text/javascript">
    tweetmeme_style = 'compact';
    tweetmeme_url = '<data:blog.url/>';
    tweetmeme_source = 'your_twitter_user_name';
    script></div>

    Your_twitter_user_name = put your twitter username
    float:right = to put it on right and float:left = to put it on left .
    If you want to change the positon then float:left or right 
    left to put it in left or right to put it on right
    
    

    Some tip :-

    How to check how many times marked a post ?

    To check the retweet count of any url ,just go to this adressbar  in your browser. and type http://api.tweetmeme.com/imagebutton.gif?url=http://twitter.com .Make sure to replace http://twitter.com with the url whose retweet count you want to know .

    Sunday, September 27, 2009

    Sexy Bookmarks for Blogger V.2

    Sexy Bookmark 2


    In Previous post you had saw the Sexy Bookmark .Now you will see the upgraded version of that .
    With more bookmarking options .Now it have more social icon buttons and some resolved bugs .
    It is the improved version of Sexy Bookmark .

    Do you Know the original creator of this trick is HOME OF SEXYBOOKMARK
    He has created for Wordpress .and afterward also converted for Blogger .You can see the example in any post of the given website that this version is suitable for you or not .

    NOTE : BEFORE YOU USE IT TAKE A BACKUP OF YOUR TEMPLATE OR SAVE THE FULL TEMPLATE .

    Go to your Dashboard -> Layout ->Edit HTML with Expand Widget Templates :-


    1. Put this below code before </head>
    <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
    <script type='text/javascript'>
    jQuery(document).ready(function() {
    // xhtml 1.0 strict way of using target _blank
    jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
    // this block sets the auto vertical expand when there are more than
    // one row of bookmarks.
    var sexyBaseHeight=jQuery('.sexy-bookmarks').height();
    var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height();
    if (sexyFullHeight>sexyBaseHeight) {
    jQuery('.sexy-bookmarks-expand').hover(
    function() {
    jQuery(this).animate({
    height: sexyFullHeight+'px'
    }, {duration: 400, queue: false});
    },
    function() {
    jQuery(this).animate({
    height: sexyBaseHeight+'px'
    }, {duration: 400, queue: false});
    }
    );
    }
    // autocentering
    if (jQuery('.sexy-bookmarks-center')) {
    var sexyFullWidth=jQuery('.sexy-bookmarks').width();
    var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width();
    var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length;
    var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
    var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
    var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
    jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px');
    }
    });
    </script> 


    2. Then also, add the below code too before </head>
    <style type="text/css">
    div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
    div.sexy-bookmarks-expand{height:29px; overflow:hidden}
    .sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat}
    div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
    div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left}
    div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
    div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
    div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
    div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
    .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://img512.imageshack.us/img512/3131/sexysprite.png') no-repeat !important;border: 0;outline: none;}
    .sexy-digg{background-position:-980px bottom !important}
    .sexy-digg:hover{background-position:-980px top !important}
    .sexy-reddit{background-position:-700px bottom !important}
    .sexy-reddit:hover{background-position:-700px top !important}
    .sexy-stumbleupon{background-position:-630px bottom !important}
    .sexy-stumbleupon:hover{background-position:-630px top !important}
    .sexy-delicious{background-position:-1190px bottom !important}
    .sexy-delicious:hover{background-position:-1190px top !important}
    .sexy-yahoobuzz{background-position:-1120px bottom !important}
    .sexy-yahoobuzz:hover{background-position:-1120px top !important}
    .sexy-blinklist{background-position:-1260px bottom !important}
    .sexy-blinklist:hover{background-position:-1260px top !important}
    .sexy-technorati{background-position:-560px bottom !important}
    .sexy-technorati:hover{background-position:-560px top !important}
    .sexy-myspace{background-position:-770px bottom !important}
    .sexy-myspace:hover{background-position:-770px top !important}
    .sexy-twitter{background-position:-490px bottom !important}
    .sexy-twitter:hover{background-position:-490px top !important}
    .sexy-facebook{background-position:-1330px bottom !important}
    .sexy-facebook:hover{background-position:-1330px top !important}
    .sexy-mixx{background-position:-840px bottom !important}
    .sexy-mixx:hover{background-position:-840px top !important}
    .sexy-scriptstyle{background-position:-280px bottom !important}
    .sexy-scriptstyle:hover{background-position:-280px top !important}
    .sexy-designfloat{background-position:-1050px bottom !important}
    .sexy-designfloat:hover{background-position:-1050px top !important}
    .sexy-newsvine{background-position:left bottom !important}
    .sexy-newsvine:hover{background-position:left top !important}
    .sexy-google{background-position:-210px bottom !important}
    .sexy-google:hover{background-position:-210px top !important}
    .sexy-comfeed{background-position:-420px bottom !important}
    .sexy-comfeed:hover{background-position:-420px top !important}
    .sexy-linkedin{background-position:-70px bottom !important}
    .sexy-linkedin:hover{background-position:-70px top !important}
    .sexy-friendfeed{background-position:-1750px bottom !important}
    .sexy-friendfeed:hover{background-position:-1750px top !important}
    .sexy-link{ margin-left:25px; float:left}
    .sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>



    3. Now Put the below code after <data:post.body/>
    <div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
    <ul class='socials'>
    <li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
    <li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
    <li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
    <li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
    <li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
    <li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
    <li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
    <li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
    <li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>
    <li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
    <li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
    <li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
    <li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
    <li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li>
    <li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
    <li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
    <li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
    <li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
    </ul>
    <div style='clear:both;'/>
    </div> 


    Any Problem , Please reply here ..

    Friday, September 25, 2009

    How to display code box with "onclick" select text and "mouse actions"


    code box

    You can use <textarea> code for the code box its is easy .
    Just write your text between the <textarea></textarea> code .


    Let see some more actions with this hack:-

    CODE BOX WITH "ONCLICK SELECT" and MOUSE ACTIONS


    • Some details to customize 
    1. YOUR TEXT AREA  [Fill this area with the text for the box]
    2.  onmouseout="this.style.borderColor='blue'" [put the colour you want in the "code box border" mouse pointer is out of the code box . Here it is in "blue" colour ].
    3.  onmouseover="this.style.borderColor='green'" [put the colour you want in the "code box border" mouse pointer is inside of the code box . Here it is in "green" colour ].
    4. Width: 200px[width of your code box]
    5. height: 35px[height of your code box]
    6. readonly="readonly" [readonly will protect your text inside the box for editing  .If you want to edit the text inside it just remove it from the code . ] It will look like this :-


    • NOTE SOME IMPORTANT TIPS BEFORE YOU USE IT .
    1.  Inside the text area .Please , convert these symbols if you are going to put in it.
    • &gt; : >
    • &lt;  :<
        2. If your blog is enable to convert new lines into <br> then don't leave lines in the text area .



    ENJOY !

    How to display any code on Post in scroll box in Blogger

    show scroll-box in post

    Code Box is a box where you put some note, codes to show in your post .
    Let see below carefully .How it works.


    <div style="width: 395px; height: 40px; background-color: a0ffff; color: 000000; font-family: arial; font-size: 12px; text-align: left; border: 0px solid 00000; overflow: auto; padding: 4px;">YOUR TEXT </div>


    Details for the code box .



    width: 395px;                     [width of your scroll box.]
    height: 40px;                    [height of yor scroll box.]
    background-color: a0ffff;    [Back ground colour of your box.(a0ffff; -here it is grey ) ]

    YOUR TEXT                   [The text you are going to write in the scroll box .]

    NOTE  : TO SEE THE SCROLL BAR ADJUST THE HEIGHT OF TEXT BOX .

    Enjoy ! Please comment for any directions .

    Thursday, September 24, 2009

    How to add Sexy Bookmarks to Blogger

    Sexy Bookmarks

    Bookmarks :Bookmark means mark your post or websites  . It can hel your website to increase your rank in web .Like Facebook , Technorati , Digg  they have higher rank in SEO if your post will also be publish in these sites your page rank will increase due to high traffic of Backlinks .


    SEXY BOOKMARK - THE TRICK IS HERE :-

      Go to DASHBOARD -> LAYOUT -> Edit HTML .

    First , Put the CSS codes 

    1. Search  this code in your template: "]]></b:skin>" then add following code below this code "]]></b:skin>" .
    <style type='text/css'>
    div.sexy-bookmarks {
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
    position:relative;
    width:540px;
    }

    div.sexy-bookmarks span.sexy-rightside {
    width:17px;
    height:54px;
    background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
    position:absolute;
    right:-17px;
    }

    div.sexy-bookmarks ul.socials {
    margin:0 !important;
    padding:0 !important;
    position:absolute;
    bottom:0;
    left:10px;
    }

    div.sexy-bookmarks ul.socials li {
    display:inline-block !important;
    float:left !important;
    list-style-type:none !important;
    margin:0 !important;
    height:29px !important;
    width:48px !important;
    cursor:pointer !important;
    padding:0 !important;
    }

    div.sexy-bookmarks ul.socials a {
    display:block !important;
    width:48px !important;
    height:29px !important;
    font-size:0 !important;
    color:transparent !important;

    }

    .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
    background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
    }

    .sexy-furl {
    background-position:-300px top !important;
    }
    .sexy-furl:hover {
    background-position:-300px bottom !important;
    }
    .sexy-digg {
    background-position:-500px top !important;
    }
    .sexy-digg:hover {
    background-position:-500px bottom !important;
    }
    .sexy-reddit {
    background-position:-100px top !important;
    }
    .sexy-reddit:hover {
    background-position:-100px bottom !important;
    }
    .sexy-stumble {
    background-position:-50px top !important;
    }
    .sexy-stumble:hover {
    background-position:-50px bottom !important;
    }
    .sexy-delicious {
    background-position:left top !important;
    }
    .sexy-delicious:hover {
    background-position:left bottom !important;
    }
    .sexy-yahoo {
    background-position:-650px top !important;
    }
    .sexy-yahoo:hover {
    background-position:-650px bottom !important;
    }
    .sexy-blinklist {
    background-position:-600px top !important;
    }
    .sexy-blinklist:hover {
    background-position:-600px bottom !important;
    }
    .sexy-technorati {
    background-position:-700px top !important;
    }
    .sexy-technorati:hover {
    background-position:-700px bottom !important;
    }
    .sexy-myspace {
    background-position:-200px top !important;
    }
    .sexy-myspace:hover {
    background-position:-200px bottom !important;
    }
    .sexy-twitter {
    background-position:-350px top !important;
    }
    .sexy-twitter:hover {
    background-position:-350px bottom !important;
    }
    .sexy-facebook {
    background-position:-450px top !important;
    }
    .sexy-facebook:hover {
    background-position:-450px bottom !important;
    }
    .sexy-mixx {
    background-position:-250px top !important;
    }
    .sexy-mixx:hover {
    background-position:-250px bottom !important;
    }
    .sexy-script-style {
    background-position:-400px top !important;
    }
    .sexy-script-style:hover {
    background-position:-400px bottom !important;
    }
    .sexy-designfloat {
    background-position:-550px top !important;
    }
    .sexy-designfloat:hover {
    background-position:-550px bottom !important;
    }
    .sexy-syndicate {
    background-position:-150px top !important;
    }
    .sexy-syndicate:hover {
    background-position:-150px bottom !important;
    }
    .sexy-email {
    background-position:-753px top !important;
    }
    .sexy-email:hover {
    background-position:-753px bottom !important;
    }

    </style>
    SECOND : Put  the HTML code 


    1. Now find this code on your Template "<data:post.body/>"


    IMPORTANT NOTICE   : If you have more than one of <data:post.body/> , you have to find the last <data:post.body/>. Usually, this is only for blogger which use readmore. The last also means that, the sexy bookmark will appear when we enter the single page.

     Now , copy paste following HTML composition below <data:post.body/>; :
    <div class='sexy-bookmarks'>
    <ul class='socials'>
    <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    <li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

    <li class='sexy-email'><a expr:href='&quot; mailto:YOUR-EMAIL-ID?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

    </ul>
    <span class='sexy-rightside'/></div>

    Please see the blink green text. You may need to edit it with your own feedburner ID and your email id  .

    Now, your all work is complete for it . Save Your Template. And CHECK IT OUT .

    any suggestions or complaint about this trick Please comment below .

    ENJOY !

    Tuesday, September 22, 2009

    How to add readmore or expandable post to Blogger

    Expandable Post in Blogger blog
    In the blog, the home page shows the full content of each and every blog post. Sometimes Post are bit of long and it makes your Blog Homepage Lengthy and it makes your Blog's  loading speed slow .
    We can add a Read More link for the post and make it short.

    It is also called Expandable Posts or  Post Summary. It is an useful method were only the summary of the Post will be shown in the blog homepage and rest of the post will be shown after expand .To expand

    -------------------THE HACK IS HERE---------------

     Step#1 - Edit your template with his hack .

     

    You are going to update your template .So , save your full template first .



    save your full template in blogger

     Add the following code below the <div class=’post-header-line-1′/> and <div class=’post-header-line’> tags if you’ve got both.

    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>


    see it will be like this :-

    Expandable post or Post Summary 1
    If you don’t have the default  <div class='post-header-line-1'/>  tag then your result should look something like this :-


    Expandable post or Post Summary code 2

    Just see both codes at the image below that they are right or not .
    Expandable post or Post Summary full code in blogger


    The first code is for make the post summary and now add one more code to add the "read more" link you can change the link name or add an "image of your readmore or anything" .


    STEP#2

    This code will go below the <data:post.body/> tag so copy the following and paste it in. Feel free to change the “Read more…” text to whatever you want the link to look like. Be careful not to delete any other code during this process.You can add any image source url to add an image readmore link Just change the "Read more..." to your image url in between of <img src="your image url" />
    and paste it at the place of"Read more..." in the code below .

    like this source is my image readmore :- <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6NNS-aUr5md5vVBy8s8SkfC9CkQluvoKbTmlY70O3F-ItFX6z6xoS9GdbCu5NXpCD6hkuQjjsWTBFwHoFR6kSWXRTb2a5WhWEYZmjWfwIbr869PdEzSxnPKVC0r4U4WgKVZinzrZ83fFd/s1600/readmore.png'/>

    <b:if cond='data:blog.pageType != "item"'><br />
    <a expr:href='data:post.url'>Read more...</a>
    </b:if>
    </b:if>




    add readmore or an image on readmorelink in blogger
     Dashboard -> Settings ->Formatting . In the last option called “Post Template”.
    Add the following code . 
    <span class="fullpost">


    </span>


    read more code in post templates
    NOW FIRST YOU WRITE YOUR POST SUMMARY . AND THE MAIN POST YOU WRITE 
    in The main body of your post needs to go in between the <span class=”fullpost”> and </span> tags in order for the “read more…” link to work properly. See the screenshot below.
    How to Post with Read more


     ENJOY !




    Sunday, September 20, 2009

    How to Change Blogger Favicon

    Favicon



    1. What is Favicon ?
    :    Favicon is an Icon Which is symbolize your blog or website .
    IN WEBSITES you can only use icon (.ico) files :
    You can see the blogger favicon is in (.ico)icon file   Bogger Favicon   :-http://www.blogger.com/favicon.ico
    BLOGGER is a website and its favicon is situated in its server .
    We are using its Blogger hosting srever if you see that my favicon is not the default icon from blogger I have changed it . If we find that http://my-domain/favicon.ico you 
    will see the Blogger   Bogger Favicon   Favicon . So, we have to put a shortcut icon to the blog to change the Blogger Favicon .

    Here is a trick to change it :-

    Go to your Blog's Dashboard ->  Layout -> Edit HTML .

     Search for "</head>" in your template Just before it ,add the following code

    <link href='your image url' rel='shorcut icon'  type='image/x-ico'/>  

    The "your image url" is the web address of the image you are going to use as your favicon. It may either be in the following format: jpg, gif, or png. Since it is a web address, you need to upload it on a photo hosting site, Photobucket. Replace the " your image url " with your exact your image url.

    Here you found the "head" tag:-


    <head> tag
     

    Saturday, September 19, 2009

    Blogger Partial Hide

    Blogger Partial Hide

    In Partial hide : when user places the mouse pointer at the top of the page the navbar will appear &  work.

    1. HOW TO DO THIS :-

     GO TO YOUR  DASHBOARD -> LAYOUT -> Edit HTML .

    search and paste the code below before the tag :


    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

    NOTE THIS TRICK WILL ONLY WORK WITH NEW BLOGGERS .

    Is it legal to hide the Blogger Navbar

    How Legal To Hide Blogger Navbar

    All the templates from Google Blogger(Blogspot) is it in Default with navbar.
     At now google hasn't made any Law for hiding the Blogger Navbar .
     
    YOU CAN READ THE FULL (real) STORY AT  Digital Yogtec  .

    Tuesday, September 15, 2009

    How to remove or hide the Blogger Navbar

    CHANGE THE COLOUR OF YOUR NAVBAR
    1. What is "Blogger Navbar" ?

    : Blogger Navbar is "blogger navigation bar".Which is located on the top of your Blog .

    Blogger Navbar

    The top navigation bar on blogger blogs distracts the attention of the readers of your Blog .Blogger Navbar allows users to easily navigate to other random blogs and it also has a feature to search the blogs ,and mark any blog as spam.
    This navbar is like Google's own version of Stumble-upon where visitors can search existing blog or discover new Blogger blogs just by clicking the NextBlog link. And if you are logged-in to your Google account, the navbar turns into a personal dashboard toolbar similar to what you have seen on Wordpress.com blogs

    Here is a simple trick to get rid of this navigation bar .


    2. HOW TO REMOVE  THE BLOGGER NAVBAR ?
     :  There are the following ways to remove or hide the Blogger Navbar  .Actually here i am telling abot how to hide the blogger navbar .


    1.Sign in to your blogger account and click the layout button .

    2.Next,click the edit html tab . It is shown on the image below .
    Edit Html

    3.Search the following code "]]></b:skin>" and paste the following code just before the line you have to search .
    the following code is :-



    #navbar {                
    height: 0px;       
    visibility: hidden;
    display: none;     
    }                        

    OR
    Add the below html code as specified in the below picture :




    #navbar-iframe {                      
    display: none ! important ;     
    }                     
    REMOVING NAVBAR BY PUTTING HTML CODE
     
    NOW YOU CAN SEE THAT THE YOU BLOG IS WITHOUT BLOGGER NAVBAR (BLOGGER NAVIGATION).
    AND IF YOU WANT TO APPEAR AGAIN IN YOUR BLOG .
    IF YOU HAVE TO ANY THING ASK ABOUT THIS POST OR  ANYTHING FEEL FREE TO COMMENT ME BELOW THIS POST .
     
    3. How much legal to hide Navbar on yor blog ?
     

    About

    Site Info

    Text

    Daltbos Blogging Garage Copyright © 2009 Community is Designed by Free Blogger Template