Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Add Image Next to posted by and Counter Comments for Blogger


Posted by: Unknown on Sunday, October 6, 2013 Be the first to comment













How to add:

   1. First of all go to blogger and login your account
   2. Now go to template section and backup your template
   3. Now click on Edit HTML and search for <div class='post-header-line-1'/>

   4. Paste below code under/after: <div class='post-header-line-1'/>
   -------------------------------------------------------------------------- 
    <div class='MBT-CSS3'>
      <br><img align='absbottom' border='0' height='20' src='http://4.bp.blogspot.com/-HKZJEparc2g/Uk2L9hz_TdI/AAAAAAAAAvo/LGXne_5zbtk/s1600/dark-evil-.JPG' width='20'/><font style='font-size:12px; font-family:Arial; word-spacing:1px; color:#555555;'><b> Posted by: <a href='https://plus.google.com/101144324548653235589/posts' rel='nofollow'><data:post.author/> </a> on  <data:post.date/></b></font>
        <span class='post-comment-link' style='Float:right;'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(http://4.bp.blogspot.com/-_m8R-FWYpwo/Uj0GQ25kqDI/AAAAAAAAAhE/RT7r5xsFLOA/s15/comment_bubble.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
            </b:if>
          </b:if>
      </span></br>
   </div>

   -------------------------------------------------------------------------- 
   Note: Replace blue texts with your URL image.

   5. Search for ]]></b:skin> and paste code below before ]]></b:skin>
     -------------------------------------------------------------------------- 
       .MBT-CSS3 img{
       padding:2px;
       border: 1px solid #ddd;
       -moz-transition: all 0.7s ease-out;
       -o-transition: all 0.7s ease-out;
       -webkit-transition: all 0.7s ease-out;
       -ms-transition: all 0.7s ease-out;
       border-radius: 2px; 2px; 1px; 1px;
       }
       .MBT-CSS3 img:hover{
       opacity: 0.5;
       -moz-transition: all 0.7s ease-out;
       -o-transition: all 0.7s ease-out;
       -webkit-transition: all 0.7s ease-out;
       -ms-transition: all 0.7s ease-out;
       }

     -------------------------------------------------------------------------- 
    6. Click on Save Template.  

Show Posts Summary With Thumbnails And READ MORE Button On Blogger Homepage


Posted by: Unknown on Sunday, October 6, 2013 Be the first to comment










How to add:

  1. Log in to your Blogger Dashboard.

  2. Go to Template

  3. Now click “Edit HTML”.

  4. Search for </head> tag by pressing Press CTRL+F.

  5. Copy & Paste the following code just before </head> tag.
---------------------------------------------------
   <script type='text/javascript'>
              summary_noimg = 600;
              summary_img = 600;
              img_thumb_height =160;
              img_thumb_width = 280;
            </script>
        <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(strx,chop)
    {
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] =   

    s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}
    chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && 

    strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}
    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img 

    src="'+img [0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>
    </span>';
    summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>  

   </script> 
--------------------------------------------------- 
   6. Now search for the following line by pressing Press CTRL+F.

<data:post.body/> (You can find this line probably at 2 places)
   7. Replace the above line wherever you find it, with the following code:
   --------------------------------------
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'>
    <data:post.body/>
    </div>
    <script type='text/javascript'>createSummaryAndThumb
    (&quot;summary<data:post.id/>&quot;);</script>
    <div class='readmore'>
   <a expr:href='data:post.url'>Read More</a>
   </div>
   </b:if>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <data:post.body/>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <data:post.body/>
   </b:if>
-------------------------------------- 
  8. Click “Save Template”.
Note:
  1. summary_noimg = 600; means that the no of characters show when there is no image with blog post. 
      Change the 600 to your own value to adjust.
  2. summary_img = 600; means that the no of characters show when there is an image with blog post. 
      Change the 600 to your own value to adjust.
  3. img_thumb_height = 180; shows the height of thumbnail with blog post summary. 
      Change the 250 to your own value to adjust.
  4. img_thumb_width = 280; shows the width of thumbnail with blog post summary. 
      Change the 350 to your own value to adjust.
 

Add Slide Bar Style in Blogger


Posted by: Unknown on Sunday, October 6, 2013 Be the first to comment
How to add:

    1. First of all go to blogger and login your account
    2. Now go to template section and backup your template
    3. Now click on Edit HTML and search for <b:skin>...</b:skin>


   



   4. There hit the arrow icon and it will be expanded
   5. Now add the following code above ]]></b:skin>

   --------------------------------------------------
    h2{
    background:#FF6600;
    padding:8px 0 8px 0px;
    font-size:12px;
    font-family: Arial, Sans-serif, Helvetica;
    font-weight:bold;
    text-align:center;
    text-shadow: 1px 1px 1px #2a2b2b;
    text-transform:uppercase;
    color:#ffffff;
    border: 0px solid $(image.border.color);
    box-shadow: 0px 1px 3px #999999;
    }

  --------------------------------------------------
    6. Click on Save Template 

Add Image Slider in Blogger Post


Posted by: Unknown on Monday, September 23, 2013 Be the first to comment
Add Image Slider in Blogger Post
You can follow below step by step guide to Add Image Slider in Blogger Post:

Step 1

Login to your Blogger Dashboard.
Add Image Slider in Blogger Post

Step 2

Go to Layout then Click on Add A Gadget as shown in below picture.
 Add Image Slider

Step 3

Select HTML/JavaScript as shown in below picture.
 Add Image Slider

Step 4


Copy and paste below code.
-------------------------------
<style type="text/css">
/* http://dimpost.com */
#sliderFrame {position:relative;width:347px;margin: 0 auto 40px;}
   
#slider {
 width:347px;height:200px;/* Make it the same size as your images */
 background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid-FSXyoejMndEqlQ-x9up7SkuzbMgB68BJHOcWmW9ErbEq37lD61PYB6XzYaiVuGF4LcXztpkYK5gsYNGp1zy594YtL4mcSQRFXJf5NBfwEfYpTeFgc8vDiD1b-IPVZvz8a9B2OyBhqmj/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
 box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;

}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:5px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:215px; left:106px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWOy-XdL0MJaLX410YWRBEJXwSpnvqvz_IZPNfN3tLUHKN-ihOaxcEr3Q5ExXL6JozkX-kX4DeHOeLYb3nyHcwwg6q8-mA9eNHukoxk92-bQjRz3Zee5w6Xs4AYntEA-wRw7BmOEZMCIcK/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}

/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="http://digimovie.ws/"><img src="http://4.bp.blogspot.com/-QWrsrNGRL84/Uj-qmiQbiQI/AAAAAAAAAlM/1XhjTNdWbmE/s1600/2.JPG" alt="Internet Sevice and Movies download" /></a>
<a href="http://www.l192.com/"><img src="http://3.bp.blogspot.com/-Vrq4aVAzYKk/Uj-qmipsHPI/AAAAAAAAAlI/MVtfsAc7yPc/s1600/3.JPG" alt="Men and Women Clothes" /></a>
<a href="http://www.khmer24.com/"><img src="http://2.bp.blogspot.com/-xIrS5InskEw/Uj-qmmKqNxI/AAAAAAAAAlY/NhAx26aamek/s1600/4.JPG" alt="Buy and Sell" /></a>
<a href="http://www.cambodroid.com/#chitika_close_button"><img src="http://1.bp.blogspot.com/-O_09km8yAR4/Uj-sx1IV-2I/AAAAAAAAAlk/kDP8QjYlOAM/s1600/5.JPG" alt="Android OS Technology" /></a>
<a href="#"><img src="http://2.bp.blogspot.com/-GdlvW4330_E/Uj6zOf-QSNI/AAAAAAAAAkA/mPT6lPtHid8/s1600/Untitle3copy.jpg" alt="The Best Colors" /></a>
</div>
<div id="htmlcaption1" style="display: none;">
Code by <a href="http://www.haakblog.com" target="_blank">Haakblog</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>
-------------------------------
Tips: You can change your width and height as you wish. You can also change image URL which is show in red color.

Step 5

Now click on save.

Add Floating Facebook Like Box for Blogger


Posted by: Unknown on Saturday, September 21, 2013 Be the first to comment
Floating facebook like box for Blogger
This is how to add floating facebook like bok follow the instruction below:

1. Login To Blogger Account.
2. Click Layout > Add A Gadget.
3. Select HTML / Javascript > Paste The Following Code In content Box.
4. Now save and you are done.
---------------------------------------------------

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/ThingsGuide/281417998619583&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border:none; overflow:hidden; width:292px; height:258px;" >
----------------------------------------------------

Replace blue texts (pages/ThingsGuide/281417998619583) with your facebook page URL, Change Width And Height According To Your Template.

How to Apply Code:

1. Go To Dashboard > Template > Edit HTML
2. Search for </head> teg in your template and copy code and then paste before </head>teg
------------------------------------------
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
------------------------------------------
1. Go to Layout > Add A Gadget
2. Select HTML/Javascript
3. Paste the following code inside it,
-----------------------------------------------------------------
<script type="text/javascript">
 //<!--
 $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
 //-->
 </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9yHWKrX8j_0D8CIP4rnMIe6eqLvyLPl5Hw0xnMFfP2nSUaOJ87CgTcHDHcUSV1AqJoUeL210w8wR7raEumHuleSYfBJrnZL0wGtBzbPpnzNPzYBOFQnr82JUGQUWLAwaKUNM_-fr08-5/s1600/FloatingFB.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpages/ThingsGuide/281417998619583&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><a style="font-family: arial, sans-serif; font-size: 9px; color: #999;" href="http://things-guide.blogspot.com/2012/07/how-to-add-facebook-like-box-into.html" target="_blank"> +Get this</a></span> </div> </div>
-----------------------------------------------------------------
4. Replace pages/ThingsGuide/281417998619583 with your Facebook fan page URL.
5. Now save your template and test your blogger with browsers!

Add Popular Post With Thumbnail


Posted by: Unknown on Saturday, September 21, 2013 Be the first to comment
How to add Popular Post with Thumbnail:
1. First of all go to blogger and login your account
2. Now go to template section and backup your template
3. Now click on Edit HTML and search for <b:skin>...</b:skin>


 


4. There hit the arrow icon and it will be expanded
5. Now add the following code above </b:skin> or below <b:skin>
         ----------------------------------------------------------------------------
/*****Popular Posts By WBT******/
.popular-posts ul{padding-left:0px;}
list-style-type: none;
margin:0 0 0px 0px;
padding:1px 5px 5px 13px !important;
}
.popular-posts ul li a:hover {
text-decoration:none;
}
.PopularPosts .item-thumbnail {
padding:2px;
border: 0px solid #ddd;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
height: 72px;
}
.popular-posts img {
 padding:2px;
 border: 0px solid #ddd;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
 box-shadow: 0px 1px 3px #999999;
 border-radius: 3px; 3px; 1px; 1px;
}
.popular-posts img:hover {
opacity: 0.5;
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
}
          ----------------------------------------------------------------------------
 6. Click on "Save Template"