Latest: Add Latest Article Here | Recommended: Add Recommended Article Here
Subscribe For Free Latest Updates!

We'll not spam mate! We promise.


blogger threaded commentsBlogger threaded comments are everywhere now and its time you redesign the style and format of your comments. A good blog commenting system helps to build a strong readership and help readers to engage more into discussion. Since 2009 we have been introducing various ways of customizing comment forms on blogger blogs. We introduced Facebook Comments Plugin, Customized BlogSpot comment Forms, then Blogger nested comments, Google+ comments and now finally a more appealing and advance version of BlogSpot threaded comments to make your blog stand out. You can see a practical demo of this feature on our blog. You will find a beautiful header with comment policy, total comment count and anchor link to comment form. The nested comments and parent comments are both styled differently. Author comments are styled using a  ribbon that hangs on top-right corner. 

Each comment is automatically counted using CSS3 counter-reset property. I will be sharing the exact stylesheet that we use at MBT as a gift to our readers. Lets start coding!

DEMO

Install Threaded Comments:

If you have not yet upgraded to threaded comments then kindly first follow this easy tutorial below and get back here:

Note: In the above tutorial skip the part where it says to Customize Threaded Comments.

Customize Your Comments Format!

Here we will override your default comment styles with our custom CSS code. We will customize almost everything from profile avatar images to reply and delete links. All I want from you is careful implementation of the easy steps below:

  1. Go To Blogger > Template
  2. Backup your template - You must keep a backup of your copy if incase you wanted to undo steps
  3. Search for this piece of code:

<b:includable id='threaded_comment_css'>

threaded comments CSS

   Click the highlighted region to expand its code. You will now need to replace all the CSS code inside <style>   and </style>   with the following styles:

  
/* Fancy Blogger Threaded Comments by MBT starts */                

.comment-thread ol {
                counter-reset: mbt-comments;
}
            .comment-thread li:before {
            content: &quot;\25C4&quot;counter(mbt-comments) &quot;\25BA&quot;;
            counter-increment: mbt-comments;
            font-size: 16px;
            position: relative;
            top: 100px;
            font-weight: bold;
            font-family: arial, georgia;
            color: rgb(199, 199, 199);
            left: -110px;
            padding: 4px 8px;

}
            .comment-thread ol ol {
            counter-reset: mbt-comments-sub;
              padding-top: 20px!important;
              margin-bottom: 25px;
}
            .comment-thread li li:before {
            content: counter(mbt-comments) &quot;.&quot; counter(mbt-comments-sub);
            counter-increment: mbt-comments-sub;
            font-size: 14px;
            position: relative;
            top: 100px;
                left: -80px;
}
                 
          .comments .comments-content .comment-thread ol ol {
                padding: 0px 10px 40px 40px;
                border: 1px solid #ddd;
                box-shadow: 3px 4px 9px rgb(218, 218, 218);
                margin-top: 10px;
                  }
                .comments .comments-content .comment-thread ol ol li {
                    margin-bottom: -40px;
}
                 
                  .comments {
                    clear: both;
                    margin-top: 10px;
                    margin-bottom: 0px;
                    line-height: 1em; border:0px !important;
                  }
                  .comments .comments-content {
                    font-size: 12px;
                    margin-bottom: 16px;
                    font-family: Verdana;
                    font-weight: normal;
                    text-align:left;
                    line-height: 1.4em;
                    width:88%; margin-left:70px;
                  }

                    .comment-form {
                    max-width: 100%;
                    clear: both;
}
                 
                  .comments .comments-content .comment-thread ol li {
                    margin-top: -30px;
}
                 
                 
                  .comments .comment .comment-actions a {
                 
                    cursor: pointer;
                    color: rgb(46, 46, 46);
                    padding: 2px 3px 2px 30px;
                    Position: RElative;
                    -moz-border-radius: 6px;
                    -webkit-border-radius: 6px;
                    border-radius: 6px;
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
                    font-size: 12px;
                    font-weight: 700;
                    margin-right: 15px;
                    background: url(http://3.bp.blogspot.com/-IRuG_QnOUaM/UakmzAR_JRI/AAAAAAAAJxA/cfgolzZifRE/s1600/reply.png) no-repeat 9px 0px;
                    float:right;
                  }
                 
                
               
                 
                  .comments .comment .comment-actions a:hover {
                    text-decoration: underline;
                   
                  }
                  .comments .comments-content .comment-thread ol {
                    list-style-type: none;
                    padding: 0;
                    text-align: none;
                  }
                 
                  .comments .comments-content .comment-thread ol li {
                  border-bottom: 0px dashed rgb(196, 196, 196);
                    margin-bottom:25px
                  }
                 
                  .comments .comments-content .inline-thread {
                    padding: 0.5em 1em;
                  }
                  .comments .comments-content .comment-thread {
                    margin: 8px 0px;
                  }
                  .comments .comments-content .comment-thread:empty {
                    display: none;
                  }
                  .comments .comments-content .comment-replies {
                    margin-top: 1em;
                    margin-left: 40px;
                    font-size:12px;
                   
                  }
                  .comments .comments-content .comment {
                    margin-bottom:16px;
                    padding-bottom:8px;
                  }
                  .comments .comments-content .comment:first-child {
                    padding-top:16px;
                  }
                  .comments .comments-content .comment:last-child {
                    border:0px;
                    padding-bottom:0;
                  }
                  .comments .comments-content .comment-body {
                    position:relative;
                  }
                  .comments .comments-content .user {
                   
                    font-weight: 700;
                     font-size: 14px;
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
                    color: #333!important;
                  }
               
                 
                  .comments .comments-content .icon.blog-author{
                    position: absolute;
                    top: 52px;
                    right: -36px;
                    margin: 5px 0px 0px 0px !important;
                    background: url(&quot;http://4.bp.blogspot.com/-9PqmPwn5OTc/UakmGeTAJ1I/AAAAAAAAJw4/fv8iqn6sVOo/s320/aDMIN.png&quot;) no-repeat scroll 0% 0% transparent;
                    width: 90px !important;
                    height: 90px !important; }
                 
                 
                  .comments .comments-content .datetime, .comments .comments-content .datetime a {
                    margin:0px;
                    display: block;
                    line-height: 30px!important;
                    font: italic 11px georgia;
                    width:180px;
                  }
                 
                  .comments .comments-content .datetime a {
                    text-decoration:none;
                  }
                  .comments .comments-content .comment-header
                  {
                    margin:0 0 15px 10px;
                  }
                 
                  .comments .comments-content .comment-content {
                    margin: 0 0 10px -50px;
                    }
                 
                  .comment-header a {
                    color:#333;
                  }
                 
                  .comment-header a:hover {
                    color:#666;
                  }
                 
                 
                  .comments .comments-content .comment-content {
                    text-align:justify;
                    text-align: justify;
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
                    font-size: 13px;
                    border: 1px solid #ddd;
                    padding: 20px;
                  }
                  .comments .comments-content .owner-actions {
                    position:absolute;
                    right:0;
                    top:0;
                  }
                  .comments .comments-replybox {
                    border: none;
                    height: 250px;
                    width: 100%;
                  }
                  .comments .comment-replybox-single {
                    margin-top: 5px;
                    margin-left: 48px;
                  }
                  .comments .comment-replybox-thread {
                    margin-top: 5px;
                  }
                  .comments .comments-content .loadmore a {
                    display: block;
                    padding: 10px 16px;
                    text-align: center;
                  }
                  .comments .thread-toggle {
                    cursor: pointer;
                    display: inline-block;
                  }
                  .comments .continue {
                    cursor: pointer;
                  }
                  .comments .continue a {
                    display: none;
                    padding: 0.5em;
                    font-weight: bold;
                  }
                  .comments .comments-content .loadmore {
                    cursor: pointer;
                    max-height: 3em;
                    margin-top: 3em;
                  }
                  .comments .comments-content .loadmore.loaded {
                    max-height: 0px;
                    opacity: 0;
                    overflow: hidden;
                  }
                  .comments .thread-chrome.thread-collapsed {
                    display: none;
                  }
                  .comments .thread-toggle {
                    display: inline-block;
                  }
                  .comments .thread-toggle .thread-arrow {
                    display: inline-block;
                    height: 6px;
                    width: 7px;
                    overflow: visible;
                    margin: 0.3em;
                    padding-right: 4px;
                  }
                  .comments .thread-expanded .thread-arrow {
                    background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
                  }
                  .comments .thread-collapsed .thread-arrow {
                    background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
                  }
                  .comments .avatar-image-container {
                    float: left;
                    width: 36px;
                    max-height: 36px;
                    margin-top: 15px;
                    overflow: hidden;
                  }
                  .comments .avatar-image-container img {
                    width: 36px;
                     box-shadow: 2px 2px 0px rgba(0,0,0,0.13)
                  }
                  .comments .comment-block {
                    margin-left: 48px;
                    position: relative;
                  }
                 
                  .comments .comments-content .comment-replies {
                        margin-top: 3em;
                        margin-left: 40px;
                        font-size: 12px;
                            }
                 
                  .comments .comments-content .comment-replies a {
                    color: #333;
                        }

/* For Animating Comment Header*/

.trigger {
margin-top: 3px;
font-weight: bold;
color: #A1A1A1;
cursor: pointer;
float: right;
font-size: 12px;
margin-right: 10px;
}
.triggeractive {
color:rgb(255, 5, 5);
}
.toggle_container {
overflow: hidden;
clear: both;
font-size: 12px;
font-weight: normal;
line-height: 20px;
margin-top: 10px;
}


                  
                  
                  /* Responsive styles. */
                  @media screen and (max-device-width: 480px) {
                    .comments .comments-content .comment-replies {
                      margin-left: 0;
                    }
                  }

/* Fancy Blogger Threaded Comments by MBT  ENDS*/


 

Make these Customizations:

To be honest you will need to use browser inspector to fill up all the missing gaps in alignment and styling. Since every template is coded differently therefore there will be slight difference in how this Design appears on your blog. So use Chrome and its inspect element to perfect things.

  • The yellow highlighted parts represent the Hexadecimal code for the two arrows that surround the Comment Counter Number. You can change this if you know how to edit the content property else leave it default.
  • The brown highlighted code represents the icon next to reply and delete link. you can replace it with your own custom image link if you wish.
  • The green highlighted code represents the Admin Ribbon. You can change it also if you wish
  • Leave all other styles default because they will blend a light background very nicely unless your blog has a black background.

   

4. Next search for this #comments h4   and replace this CSS ID completely with this one:


#comments h4{

color: #4E555A;
font-size: 25px;
font-family: 'Open Sans Condensed', sans-serif!important;
line-height: 1.6em !important;
font-weight: bold;
margin: 20px 0 50px 0px;
padding: 5px 0 5px 55px;
background: url(http://1.bp.blogspot.com/-tZR7Njp97jo/UalQRiCT3UI/AAAAAAAAJxg/ba4PGdYsHj4/s1600/mbt-postcomment.png) no-repeat 5px 10px;
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.13);
border: 2px dashed #DDD;
border-radius: 4px;

}

5.  Save your template and you are half done!

Design Comment Header

Comment Header with comment policy

Nested comments uses an iframe comment box which can't be customized unless we use JQuery. I therefore removed the message that appears at the top of comment box which display a message above the comment box. We used to add a message above form by going to Blogger > Posts and comments. I removed that option and introduced a much more flexible way of warning visitors about the comment policy.

How it works?

Do you guys remember the Expand/collapse functionality we created for hiding the comment box? We will utilize the exact same script here and create a toggle tab for comment policy.

Be careful here:

  1. Inside your template search for:

<b:if cond='data:post.numComments == 1'>

Now this code will appear a total 2 times inside your template, having the exact similar format as the code below:

Tip: this code will appear once inside <b:includable id='comments' var='post'> and the next time inside <b:includable id='threaded_comments' var='post'>

<h4>
                   <b:if cond='data:post.numComments == 1'>
                     1
                     <data:commentLabel/>
                     :
                     <b:else/>
                     <data:post.numComments/>
                     <data:commentLabelPlural/>
                     :
                   </b:if>

 

</h4>

 

If your code matches the exact code shown above then just above </h4> paste the following HTML:

<a href='#comment-form'>Post Yours!</a> <span class='trigger'>Read Comment Policy &#9660;</span>
<div class='toggle_container'>
<div class='block'>

<font style='color:rgb(255, 0, 0); font-weight:bold;'>PLEASE NOTE:</font>
 
  <br/>
<b><u>We have Zero Tolerance to Spam.</u></b>  Chessy Comments and Comments with <b>Links</b>  will be deleted immediately upon our review.

</div>
</div>

You can replace the entire yellow highlighted part with any message that you would like to display to your readers. You can add links, images, even a video message! anything you want to guide your visitors to avoid spam.

 

Make the Comment Header Animate:

When you click the comment Policy link, the Message slides down. When you click it back it collapses and hides the message. We will use Jquery slideToggle function to apply this effect. I have also included the Google link to "Open Sans condensed" font to style the fonts. Follow these steps:

  1. Paste the following code just above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>


$(document).ready(function(){


    $(&quot;.toggle_container&quot;).hide();
 
    $(&quot;.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;triggeractive&quot;).next().slideToggle(&quot;slow&quot;);
    });
 
});


</script>

Don't add the bolded code if you have already added JQuery library source link in your template.

  2.  Save your template and you are all done!

Need help?

Oh Of course! You may need a lot of help in customization but relax buddies, I am available for any help needed. I hope this new commenting Theme adds a new life to your blog and makes your blogging journey even more exciting. Please don't forget to spread this knowledge and share it with your friends and loved ones. May peace and mercy of God be on all of you! :)

Read More >>


Read More >>











Adobe Reader software is the global standard for electronic document sharing. It is the only PDF file viewer that can open and interact with all PDF documents. Use Adobe Reader to view, search, digitally sign, verify, print, and collaborate on Adobe PDF files.
View, print, and search PDF files, including PDF Portfolios and PDF maps
Author, store, and share documents, and share your screen, using Acrobat.com services
Experience richer content and greater interactivity with native support for Adobe Flash technology
Review documents using familiar commenting tools such as sticky notes, highlighting, lines, shapes, and stamps (When enabled by Acrobat Pro or Acrobat Pro Extended)
Digitally sign PDF documents (When enabled by Acrobat Pro or Acrobat Pro Extended).

Password = WWW.TALITMAHMOOD.TK








Read More >>


Accordion Widget for bloggerUpdate: The Script  has been updated and it will work just perfect!

It is really important to organize your content and make certain sections of your blog to appear only when the visitor is interested in it. We are using an Accordion Widget that you can find at the footer of our blog in order to display a list of Popular Series. Its an effective way for us to display long list of links in a neat and clean way. I created this widget using  JQuery and the Easing Plugin. This Accordion widget is a modified version of the Fresh content Accordion released by Martin Angelov in 2009. We customized its stylesheet and edit some parts of the scripts to make it compatible with blogger blogs. It has a great Expand/Collapse Feature. This widget collapses and hides all content inside it by default but when user clicks it, the content is displayed by expanding that tab section. I am sure you would love to add this Fancy Accordion widget to your BlogSpot blogs.

Need Demo? Check the footer of our blog! Click Here

Design a Fancy Accordion For Blogger!

Just follow this step by step easy tutorial. You don't need to worry about browser compatibility issues because we have done all that work for you. The widget is compatible with all major browsers including IE8+.

Follow these steps:

  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Search for </head>
  5. Just above it paste the following code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
$.easing.def = "easeOutBounce";
/* Binding a click event handler to the links: */
$('li.button a').click(function(e){

/* Finding the drop down list that corresponds to the current section: */
var dropDown = $(this).parent().next();

/* Closing all other drop down sections, except the current one */
$('.dropdown1').not(dropDown).slideUp('slow');
dropDown.stop(false,true).slideToggle('slow');

/* Preventing the default event (which would be to navigate the browser to the link&#39;s address) */
e.preventDefault();
})

});
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
  //alert(jQuery.easing.default);
  return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
  return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
  return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t + b;
  return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
  return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t + b;
  return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
  return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
  return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
  return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
  return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
  return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
  return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
  return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
  if (t==0) return b;
  if (t==d) return b+c;
  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
  return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
  return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
  return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
  return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
  if ((t/=d) < (1/2.75)) {
   return c*(7.5625*t*t) + b;
  } else if (t < (2/2.75)) {
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
  } else if (t < (2.5/2.75)) {
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
  } else {
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
  }
},
easeInOutBounce: function (x, t, b, c, d) {
  if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
  return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
//]]>
</script>


Note: The yellow highlighted code is for producing the bouncing effect using the Easing Plugin. If you don't want too much animation then you can delete the yellow part of the code.

 

    6. Search for </b:skin>.  Click the black arrow to expand the code.

compressed blogger stylesheet

   7.  Paste the following CSS Styles just above </b:skin>

 

/*------ Accordion Widget by MBT  -----*/

ul.container{

    width:275px;
    margin:0 auto;
    padding:0px;
}

 

li.menu{

    padding:5px 0;
    width:100%;

}

li.button a{

    display:block;
    font-family: Arial, sans-serif,Helvetica;
    font-size:12px;
    overflow:hidden;
    padding:0px 0px 5px 0;
    position:relative;
    width:100%;
        text-transform:capitalize;
}

li.button a:hover{

    text-decoration:none!important;
}

li.button a span{
   
    right:0px;
        top:0px;
    position:absolute;
    color:#ccc;
    display:block;
}


.dropdown1{

    display:none;
    padding-top:5px;
    width:100%;
}

.dropdown1 li{
   
   
   
border:1px solid #7E7E7E;
    color:#CCCCCC;
    margin:5px 0;
    padding:4px 10px;
       
}

.dropdown1 li:hover {
border:1px solid #ccc;
text-decoration:none;
}


.dropdown1 li a:hover {
text-decoration:none;
}

Note: The look and colors of the links and fonts can be customized by editing the above the code. But the default colors would work fine with any dark footer except if your footer has white background.

   8.  Save your template and you are all done!

Add Accordion To Blogger Layout

Now you need to add your widget in the layout section and start making a list of your own popular series or any content that you wish to display inside it.

  1. Go to blogger > Layout
  2. Click Add a Gadget
  3. Choose HTML/JavaScript widget
  4. Paste the following HTML code inside it:

<ul class="container">
     
     

<!- TAB ONE -->


      <li class="menu">
     
          <ul>
            <li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>             

            <li class="dropdown1">


                <ul>
<li>1. <a  href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
<li>2. <a  href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>3. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>5. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>4. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

                </ul>
            </li>

          </ul>
         
      </li>

 

<!- TAB TWO -->


<li class="menu">
     
          <ul>
            <li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>

            <li class="dropdown1">
                <ul>

<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
<li>2. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>3. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>5. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>4. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>


               
             </ul>
            </li>

          </ul>

      </li>

 

 
  </ul>

In the above code I created two tabs with 4 rows each.

  • Replace ADD TAB TITLE HERE with the name of the list title.
  • Replace ADD LINK HERE with your Link URL
  • Replace ADD LINK TEXT HERE with your anchor text

 

I don't think the above code needs further clarification. Every part is highlighted to make it more simple to be understood. If incase you wanted to add another tab then just add the following code above </ul>

 

<li class="menu">

<ul>
<li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>

<li class="dropdown1">
<ul>

<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>

</ul>
</li>

</ul>

</li>

To increase the number of rows simply keeping adding this line of code:

<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>

  • Simply change 1 with the row number.

    5.  Click Save and you are all done!

Visit your blog to see it hanging just nicely on your blog sidebar. Click the tabs and play with your newly created Accordion widget. It's all yours now! :)

Need Help?

Most of your requested this tutorial and it is my habit to share everything that we apply to our blog in order to help you customize your blogs to the bets possible look. Please let me know if you needed any help. I just hope it helps you to effectively organize your blog even more. Peace and blessings dear brothers :)

Read More >>


Maybe my friend feel uncomfortable with the blog archives too long so it takes a lot of space on the sidebar of the blog and also felt that the display seem less neat ... Well on this occasion, I would like to explain how to spruce up the Blog Archive by making a scroll so that it takes up less space and seem neater .. OK, just follow these simple steps:

1. Go to Blogger Dashboard > Template
2. Download a copy of your template
3. Now click on Edit HTML
4. Use Ctrl + F to find ]]></b:skin> and paste the following code above/before it.
#BlogArchive1 .widget-content{height:200px; width:auto;overflow:auto;}
Note: Edit the "height:200px" parameter to fit your personal needs.
 5. Click on Save the template.
Enjoy and happy blogging!
Read More >>









CCleaner is a freeware system optimization, privacy and cleaning tool. It removes unused files from your system - allowing Windows to run faster and freeing up valuable hard disk space. It also cleans traces of your online activities such as your Internet history. Additionally it contains a fully featured registry cleaner. But the best part is that it's fast (normally taking less than a second to run) and contains NO Spyware or Adware! :)

Password = WWW.TALITMAHMOOD.TK





Read More >>




QuickTime Player from Apple allows the playback of quicktime movies (.mov) and many other formats.

The new QuickTime Player not only delivers startling quality, but it's easier to use than ever. It requires no set up for content that streams over the network. Instead, QuickTime Player automatically determines your system's connection speed and chooses the highest quality stream for the amount of bandwidth you have available. And if you ever lose a connection while watching streaming video, QuickTime Player automatically reconnects. Now, thats convenience.



Password = WWW.TALITMAHMOOD.TK





Read More >>


(Articles Cannot Be Reproduced Without Author Permission.)
Design By : | Powered By: Blogger