Display Guest Author Box Automatically in Blogger

The steps are kept simple so you will find it really interesting to apply.

1. Go to Blogger > Template
2. Backup your template
3. Click Edit HTML
4. Click Proceed
5. Then Click Expand Widget Templates
6. Search For ]]></b:skin>
7. Just above it paste the following CSS code,
   
   
   
   

   /* MBT Code For Author Box */

   .about-author {

   width : 98%;

   overflow : hidden;

   margin:10px 0px;

   border:0px;

   }

   
   

   .about-author img {

   width:70px;

   padding:3px;

   border:1px solid #ddd;

   margin:0px 5px 0px 0px;

   }

   .about-author h3{

   font-family:verdana !important;

   font-size:18px !important;

   margin:9px 0px !important;

   color:#666666 !important;

   border-bottom:2px solid #666 !important;

   border-top:0px !important;

   }

   .about-author p {

   margin:0px;

   text-align:justify;

   color:#666;

   }
   
   To change color of the text "About author" edit     color:#666666
    
8.  Next Search for data:post.body
9.  Just below it paste the following code :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;AUTHOR NAME&quot;'>
<div class='about-author'>
<h3>About Author:</h3>
<img align='left' src='IMAGE LINK OF AUTHOR'/>
<p>WRITE AUTHOR BIO HERE</p>
<p>Follow him @ <a href='BLOG LINK' target='_blank'>BLOG NAME</a> | <a href='FACEBOOK LINK' rel='nofollow' target='_blank'>Facebook</a></p>
</div>
</b:if></b:if>

All steps are self explanatory. you just need to fill the bolded parts with correct requirement details. There is one thing that needs care.

• Replace AUTHOR NAME with the account name of the guest author. This name should match exactly the name appearing on his posts. See the screen shot below: 

 

      10.   Finally save your template and you are all done!

Visit your blog and check the post of any of your co-authors. You will find his bio appearing just perfectly at the bottom of all articles published by him. You can even create an author box for yourself by simply replacing the AUTHOR NAME , profile pic and bio to that of yours.

Happy Blogging

Author

Mashable Sharing Widget For Blogger

Previously I've posted about LofsliderNews - Slider for Top Post Blogger. This time, I will post on Mashable Sharing Widget For Blogger. This widget is somewhat impractical, because the widgets are a few buttons to share a single container. So, you do not need to find the codes for the share of each site. Here is a picture of the widget that I mean:


1. To put it in your blog, just follow these steps:
2. Go To Blogger > Design
3. Choose "Add a gadget"
4. Select HTML/JavaScript Widget
5. Paste the following code inside it,

<style>
    /* Social Widget */
    #MBT-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }
    .fb-likebox {
        background: #fff;
        padding: 10px 13px 0 10px;
        border-right: 1px solid #D8E6EB;
       border-left: 1px solid #D8E6EB;
       border-bottom: 1px solid #D8E6EB;
        margin:0px;
            height:45px;
    }
    .googleplus {
        background: #F5FCFE;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #ebebeb;
        border-right: 1px solid #D8E6EB;
        border-left: 1px solid #D8E6EB;
        border-image: initial;
        font-size: .90em;
        font-family: "Arial","Helvetica",sans-serif;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;}
    .googleplus span {
        color: #000;
        font-size: 11px;
        position: absolute;
        display:inline-block;
        margin: 9px 70px;}
    .g-plusone {    float: left;}

.gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}

    .twitter {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
    #mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
    #email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:35px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}  
    #email-news-subscribe .email-box input.email:focus{color:#333}  
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}  
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:37px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}  
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9oh11MBkt2rooqz7jzpnz_3pFKk329afdAYEtJlAFWHdNtn7Nep8XGzepkJDsqfp59TYv1hTjtVCoa35p8Ehm0vXszsn37hFsA9VYQ0fuc9AorXqeIwyU_XFUa4VQo5v7RCeQ70rTla4/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}

    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }

    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }

    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRPAHRoEq8PZzzhLKS6aphR6f1DQUo5E19vn6NrbXOtNuBiUIn7beMMiACdHGUOyK4Xrncxn1AKRYAxucDmXDZQVZAPRzm1iea00v2XGJePzoeOzURwq4JC_AdrdCcUP3CsRRtnGHkjzs/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7l99WxaTPxQjLc-nxshlUntHRY9G35CuRom__DrfZw08WuUF7M4XWc7NKDhz_Zj7pbuExlOHi8RdweKP6aJ7IRfjZ4wb-eF5s0lnQcr-Ab8nH2x-uTcInYdGhINXGKBoylY-sq6s1Xx4/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

    </style>

    <!--[if IE]>

    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #FFCA00;
        }
    </style>

    <![endif]-->

<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" > <!-- Begin Widget -->

<div class="gplus"> <link href="https://plus.google.com/111531258366007458448" rel="publisher" />

<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>

<!-- Place this tag where you want the badge to render --> <g:plus href="https://plus.google.com/111531258366007458448" width="300" height="131" margin="0px" theme="light"></g:plus> </div>

<div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/johannez.albert&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp; font&amp;height=100px&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div>

<div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>

<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=en&amp;link_color=&amp;screen_name=@j0hannezz&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

<div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="ifundefinedthis.value==this.defaultValue)this.value=&#39;&#39;;" onblur="ifundefinedthis.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="hooligan" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/hooligan" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/@j0hannezz"  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/111531258366007458448 target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.mybloggertricks.com" target="_blank" >Blogger Widgets »</a></span></div></div> <!-- End Widget --> </div>

<!--end of social widget-->

Make these important changes:

• Replace bloggertricks with your Facebook username
• Replace mybloggertricks with your twitter username
• Replace hooligan with your Feedburner title. Your Feedburner title is the word added at the end of your Feedburner link. Example: http://feeds.feedburner.com/tntbystc
• Replace http://feeds.feedburner.com/tntbystc with your feedburner  link.
• Replace https://plus.google.com/111531258366007458448 with your Google Plus profile link

5.  Next search for this ]]></b:skin>   Paste the following code just below it

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

6.  Now save your widget and you are all done!

 Good Luck

Source : My Blog Tricks

Widget

jQuery Popup For Facebook LikeBox

On this occasion we will discuss about the jQuery Popup For Facebook LikeBox. Sure we've seen a variety like the look up box. But in this discussion, we will see a new sesuat than ever. At this widget, Facebook like box will appear when we opened the first page of the blog. So, you no longer need to put up like a floating box on the blog or something, because it may make your blog look tacky. Thus, this widget will make your blog visitors to be more than happy to see your blog. So, if you tertaik with this widget and want to put your blog, just follow these steps may lead to rigorous:

• Go To Blogger > Design
• Click choose a gadget
• Select HTML/javascript widget
• Paste the following code inside it 

 <style>

/*
   ColorBox Core Style:
   The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

   User Style:
   Change the following styles to modify the appearance of ColorBox.  They are
   ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
        box-shadow:0 0 15px rgba(0,0,0,0.4);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
       }
  

#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGs901sowBsPolsNmi-f8bCpzFbzv-grV2EEE1wQPl8L5I8QQ5erAFKVKniu42Jlk08DnLBSUiMlDdHSPaPGHhybtQsVxG0hKKT8xHN20AJv38fklxNnQxFuQ4oQJ0fCrgKHdsPH2XJiE/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGs901sowBsPolsNmi-f8bCpzFbzv-grV2EEE1wQPl8L5I8QQ5erAFKVKniu42Jlk08DnLBSUiMlDdHSPaPGHhybtQsVxG0hKKT8xHN20AJv38fklxNnQxFuQ4oQJ0fCrgKHdsPH2XJiE/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) repeat-y -211px 0;}
     #cboxContent{background:#fff; overflow:visible;}
         #cboxLoadedContent{margin-bottom:5px;}
         #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Oud32Gl_GAWPvvHsiTN6MUF2y8IX65L7g8apSoT0047he231RMhjJgLoNual_D6JGt4lx1sRYmyr7VhOkDt0IXm7rJYaxzmhnmzZPXynFp1kgX-dHP3QMd9VF2GwGMOLPyjvbqJJoGY/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ch65DWbJcgtIs3fl2WLOuRlDfp3DAECdAZqHK8WINXXV_MTd0A_Qd2uBmtOoEPHVVWdf6kbaHpfaaFOyfh2EutN99yRwHnezCHGthE8QlV3FZf1padiJZ8uoUEfold525zmg8AehBj0/s400/loading.gif) no-repeat center center;}
         #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
         #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
         #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIV97vKSbLygqJ8uxepcwl5p8YCC2yCTAnAOPfs05cteFqnb6j6sxRA3nlRWR_a6amiJIYHfOlnVn6CNCbx1KjZyV6OYet1BtRp3QFLzJNZsjum-86Ifi6aTIrhVf8UKkpD8VSwZxPRs/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
         #cboxPrevious{left:0px; background-position: -51px -25px;}
         #cboxPrevious.hover{background-position:-51px 0px;}
         #cboxNext{left:27px; background-position:-75px -25px;}
         #cboxNext.hover{background-position:-75px 0px;}
         #cboxClose{right:0; background-position:-100px -25px;}
         #cboxClose.hover{background-position:-100px 0px;}
         .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
         .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
         .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
         .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*-----------------------------------------------------------------------------------*/
/*   Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.box-title {
   color: #F66303;
   font-size: 20px !important;
   font-weight: bold;
   margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
   color: #999;
   margin: 0;
   text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*30;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"400px", inline:true, href:"#subscribe"});
       }
});
</script>
    <!-- This contains the hidden content for inline calls -->
 
        <div style='display:none'>
   <div id='subscribe' style='padding:10px; background:#fff;'>
        <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3> 
      <center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricks&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right;  margin-right:35px;  font-size:9px;" >Support by<a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://johannezalbert.blogspot.com">Bol | Joe</a></p>
</div>
</div>

Make this simple change:

• Replace bloggertricks with your facebook username.

Update :If your Facebook URL is too long and contains numbers then you may first create a branded Facebook username in seconds at Facebook.com/username
   5.   Hit the save button. Drag the widget to anywhere on your right sidebar.
     6. Click the orange save button towards top right.
done! Visit your blogs to see it poping up just beautifully. To review the widget just delete your browser cookies and refresh the page to see it appearing again.

Want the widget to appear Repeatedly:

If you want to prompt the likebox every time the visitor enters your blog then simply delete this *30 from the code above.

Good Luck

Source : My Blog Tricks

Widget

LofsliderNews – Slider for Popular Post Blogger

This time I'll post again about LofsliderNews - Slider for Top Post Blogger. This is a widget to display a Popular Post. If we usually see the most popular post in list form, we will now see a new look with this widget. In this widget, widget popular posts will be shaped slide. This Asrtikel I quote from Abu Farhan.

See examples of what I mean:

This script very easy to install, you only have to put the script to the new Gadget

• Login to Blogger Dashboard and navigate to Design – Page Elements
• Click “Add Gadget” and Choose “Popular Posts”(If you already have this gadget skip this step)
• After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
• Put all script bellow to the “Content” of HTML/Javascript Gadget
• If you have already jQuery in your Template please delete from my script
• Done- your popular post now with animation

<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent, .lof-slidecontent a {
 color:#FFF;
}
.lof-slidecontent a.readmore{
 color:#58B1EA;
 font-size:95%;

}
.lof-slidecontent{
 position:relative;
 overflow:hidden;
 border:#F4F4F4 solid 1px;
}
.lof-slidecontent .preload{
 height:100%;
 width:100%;
 position:absolute;
 top:0;
 left:0;
 z-index:100000;
 text-align:center;
 background:#FFF
}
.lof-slidecontent .preload div{
 height:100%;
 width:100%;
 background:transparent url(http://i879.photobucket.com/albums/

ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
 position:relative;
 height:100%;
 width:800px;
 z-index:3px;
 overflow:hidden;
}

/*******************************************************/
.lof-main-item-desc{
 z-index:100px;
 position:absolute;
 bottom:50px;
 left:0px;
 width:350px;
 background:url(http://i879.photobucket.com/albums/ab351/

bloggerblogimage/blogger/bg_trans.png);
 height:100px;
 /* filter:0.7(opacity:60) */
 padding:10px;
}
.lof-main-item-desc p{
 margin:0 8px;
 padding:8px 0
}
.lof-main-item-desc h3{
 padding:0;
 margin:0
}
.lof-main-item-desc h2{
 padding:0;
 margin:15px 0 0 0px;
}
.lof-main-item-desc h3 a{
 margin:0;
 background:#C01F25;
 font-size:75%;
 padding:2px 3px;
 font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
 text-transform:uppercase;
 text-decoration:none
}
.lof-main-item-desc h3 a:hover{

 text-decoration:underline;
}
.lof-main-item-desc h3 i {
 font-size:70%;
}

/* main flash */
ul.lof-main-wapper{
 /* margin-right:auto; */
 overflow:hidden;
 background:transparent url(http://i879.photobucket.com/albums/

ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
 padding:0px;
 margin:0   !important;
 position:absolute;
 overflow:hidden;
}

ul.lof-main-wapper li{
 overflow:hidden;
 padding:0px   !important;
 margin:0px;
 float:left;
 position:relative;
}
.lof-opacity  li{
 position:absolute;
 top:0;
 left:0;
 float:inherit;
}
ul.lof-main-wapper li img{
 padding:0px  !important;
}

/* item navigator */
.lof-navigator-wapper {
 position:absolute;
 bottom:10px;
 right:10px;
 background:url(http://i879.photobucket.com/albums/ab351/

bloggerblogimage/blogger/transparent_bg.png) repeat;
 padding:5px 0px;
}
.lof-navigator-outer{
 position:relative;
 z-index:100;
 height:180px;
 width:310px;
 overflow:hidden;
 color:#FFF;
 float:left
}
ul.lof-navigator{
 top:0;
 padding:0;
 margin:0;
 position:absolute;
 width:100%;
 background:none !important;
 margin-top: 0 !important;
 margin-left: 0 !important;
 margin-right: 0 !important;
}
ul.lof-navigator li{
 cursor:hand !important;
 cursor:pointer !important;
 list-style:none !important;
 padding:0 !important;
 margin-left:0px !important;
 overflow:hidden !important;
 float:left !important;
 display:block !important;

 text-align:center !important;

}
ul.lof-navigator li img{
 border:#666 solid 3px;
}
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
 border:#A8A8A8 solid 3px;
}
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{
 display:block;
 width:22px;
 height:30px;
 color:#FFF;
 cursor:pointer;

}
.lof-navigator-wapper .lof-next {
 float:left;
 text-indent:-999px;
 margin-right:5px;
 background:url(http://i879.photobucket.com/albums/ab351/

bloggerblogimage/blogger/arrow-l.png) no-repeat right center;
}
.lof-navigator-wapper .lof-previous {
 float:left;
 text-indent:-999px;
 margin-left:5px;
 background:url(http://i879.photobucket.com/albums/ab351/

bloggerblogimage/blogger/arrow-r.png) no-repeat left center;
}
#lofslidecontent45 {width:880px;height:340px;}
.lof-main-outer {width:880px; height:340px;}

.lof-main-wapper img {height:340px !important; width:880px !important}
.lof-navigator-wapper img {height:32px !important; width:80px !important}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/

1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/

svn/trunk/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" 

src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofblogv2.js">

</script>
<script type="text/javascript">
 $(document).ready( function(){
  var buttons = { previous:$('#lofslidecontent45 

.lof-previous') , 

next:$('#lofslidecontent45 .lof-next') };

  $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
        
    direction  : 'opacitys',
        
     easing   : 'easeOutBounce',
        
    duration  : 1200,
        
    auto    : true,
        
    maxItemDisplay  : 4,
        
    navPosition     : 'horizontal', // horizontal
        
    navigatorHeight : 32,
        
    navigatorWidth  : 80,
        
    mainWidth:880,
        
    buttons   : buttons} );
 });
</script>

Popular