Dark Sun : Trackmyblog Style Threaded Comment System

Blogger has updated it's old one level comment system into nested levels comments by bringing threaded comments on which I've already written a post, but problem with the default blogger comment system is that it doesn't provides you good designs like that of disqus, comment-luv etc.

And for the design lovers like me, this can't be expected straightly, because I simply believe that a good design is the only thing which represents your personality. So, keeping this fact in mind I have coded a few stylesheets which will re-invent your old class blogger comment system into a whole new comment system giving it an elegant feel.

Comment System 1 : Dark Sun

Comment System 2 : Green Lava

Comment System 1

This comment system is given a nick name of Dark Sun, as it is the default comment system stylesheet used by trackmyblog.com. Css2 counter-increment property has been used to auto number the comments you receives and you'll also find that when blog's author post any comment then font-color of his name is changed which give him a good presence among the crowds.

Here is the screenshot of the comment system which you'll get after implementation of stylesheet on your blog.

Screenshot

See Live Demo Here

Here is The Stylesheet Code!

• Open Blogger dashboard → Template → Html Editor
• Now search for ]]></b:skin> 
• Now copy and paste the below given css code in before the skin code

Css

/* Drak Sun http://www.trackmyblog.com style blogger threaded comments */
#comments{background:#FFF;border:1px solid #dcdcdc;padding:20px}
#comments h4{font-size:28px;color:#414141;line-height:2em}
.comments ol li:before{content:counters(trackit,".");font-size:3.5rem;color:rgba(0,0,0,0.16);right:.3em;position:absolute;text-shadow:1px 1px 1px #FFF;padding:.2em 0 0}
.comments ol li{counter-increment:trackit}
.comments ol{counter-reset:trackit}
.comments .comments-content .comment-content{text-align:justify;border:1px solid #e1e1e1;margin-left:-40px;margin-top:35px;padding:20px}
.comments .comments-content .comment-header{width:58%;position:relative;margin:10px 0 0;padding:0 25px}
.comments .comments-content .user{font-style:normal;font-weight:400;color:#414141;font-size:20px}
.comments .comments-content .user a{color:#414141;font-family:impact, arial, sans serif}
.comments .comments-content .user.blog-author a{color:#4085FD}
span.datetime.secondary-text a{color:#b9b9b9;font-style:italic}
.comments .comments-content .datetime{color:#616161;fontsize:12px;display:block;margin:0}
.comments .comments-content .comment-thread ol{list-style-type:none;text-align:left;margin:0;padding:0}
.comments .comment .comment-actions a{padding-right:5px;padding-top:5px;text-decoration:none;text-align:right}
.comments .continue a{display:none!important}
.comments .avatar-image-container img{max-width:60px;max-height:60px;width:60px;height:60px;z-index:1;float:left}
.comments .avatar-image-container{float:left;max-height:60px;height:60px;overflow:hidden;width:60px;max-width:60px;border-radius:0 50% 50% 50%;-moz-border-radius:0 50% 50%;-o-border-radius:0 50% 50% 50%;border:1px solid #dcdcdc;background:#fff}
.comment .comment-replies .comment{border-top:5px solid #414141;border-left:3px solid #f5f5f5;border-right:3px solid #f5f5f5;background:#f5f5f5;padding:10px}
.comments .comments-content .comment-replies .comment,.comments .comments-content .comment-replies .comment:first-child,.comments .comments-content .comment-replies .comment:last-child{margin:0;padding:1em}
.comments .comments-content .comment:last-child,.comments .comments-content .comment:first-child{padding-top:5px;padding-bottom:5px;list-style:none;position:relative}
.comment-thread.inline-thread .comment-content{background:#fff}
span.item-control.blog-admin,.comments .thread-toggle{display:none}
#comments .comment-actions.secondary-text,.comments .comment .comment-actions a:hover{text-decoration:none}

• After adding the code save your template, and view the comment system.
• Congratulations! you have successfully added customizations to your blogger comment system.

Final Words

Hey! friends if you liked this blogger freebie provided by trackmyblog team, then don't forget to share it with your friends. I am very eager to hear you, so do tell us your words about this widget provided here at trackmyblog. See you soon with next customizations so stay tuned to grab new theme for your blogger comments

Continue Reading(...)

by Unknown 12/09/2013 3 comments

Hongkiat Like Popular Post Widget For Bloggers

Hongkiat.com a very popular site among the designers, developers and bloggers. It was found in 2007 by Hongkiat Lim, who left his job in the same year and started working seriously on his site Hongkiat. And now after 7 years Hongkiat.com has become very popular among all the most popular and top designers sites, with alexa rank of #777.

Well! This site is popular among all the geeks and designers, as it constantly publishes articles on web-design, photoshop, artworks, inspirations, HTML5 and CSS3 tutorials.

But wait and think for a moment that how will it be if the popular posts widget used in Hongkiat.com can be designed same for the bloggers too?
Answer is yes! because you can get the customized popular posts designed by me specifically for blogspot users.

How To Add This Widget?

This hongkiat like popular posts widget can be added to your blog in few simple steps.

• Open Blogger dashboard → Layout → Add a gadget →  Add Popular Post Widget (Do not repeat if widget is already added)
• Now open Blogger dashboard → Template → Html editor
• Now add below given css code just before ]]></b:skin>

Css

.PopularPosts {
width:100%;
margin: 0 auto;
padding: 0!important;
border-radius: 2%;
-moz-border-radius: 2%;
-webkit-border-radius: 2%;
counter-reset: trackit;
box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
-webki-box-shadow: 0px 4px 0px -2px rgba(0, 0, 0, 0.1),0px 3px 0px 0px rgba(0, 0, 0, 0.07), 0px 2px 0px 0px rgba(0, 0, 0, 0.03);
border: 1px solid #EEE;
}

.PopularPosts h2 {line-height:1.5em!important;display: block!important;font-family: "Calibri","Droid Sans",Tahoma,Geneva,sans-serif;font-weight: 500!important;
text-transform: uppercase!important;padding: 5px 10px!important;margin: 0!important;color: #D1D9E5;background-color: #5A77A0!important;text-shadow: 1px 1px #486286;border-bottom: 1px solid #4D678C;
box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 5px 12px -7px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.5);
font-size: 16px!important;
border-top-right-radius: 3px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 3px;
-webkit-border-top-right-radius: 3px!important;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 3px;
bottom:0;
top:0;
}
.widget-content.popular-posts {border-top: 1px solid #CCC;padding: 0em;margin: 0 0 0;
}
.popular-posts ul{padding:0!important;margin:0!important;}
.popular-posts ul li {
border-bottom: 1px solid #f1f1f1;
list-style: none outside none !important;
margin-left: 0 !important;
overflow: hidden;
padding: 10px 0 !important;
transition: all 0.25s linear 0s;
counter-increment: trackit;}
#PopularPosts1 li:nth-child(odd) {background: #F9F9F9;}
#PopularPosts1 li:nth-child(even) {background: #FFF;}
#PopularPosts1 li:first-child {border-top: 1px solid #f1f1f1;}
#PopularPosts1 li {padding-right: 1em !important;padding-left: 1em !important;}
#PopularPosts1 ul li:before {content: counters(trackit,".");padding: 0 .1em 0 0;font-size: 20px;font-weight: bold;color: #D8D8D8;float: left;}
.PopularPosts .item-thumbnail,.PopularPosts .item-snippet {display: none;}
#PopularPosts1 a:hover {text-decoration: underline;}
#PopularPosts1 a {color: #3F3F3F;font-size: .9rem;}
.PopularPosts .item-title {padding: 0 0 .2em 1.5em;}

• After adding the code save your template and preview the changes made in your widget.

Final Words

So friends what are your thoughts about this widget hacked from hongkiat. Don't forget to tell me your views and thoughts about this popular post widget in  the comment box below. Feel free and express your words, I am just waiting for it.

Continue Reading(...)

by Unknown 12/07/2013 Leave a Comment

Labels Widget For Bloggers Customized By Designcart.org

Today while surfing in vain on web I stumbled upon Designcart.org, a theme-resource site for bloggers and theme designers.In this whole site one thing which I liked the most was the Customized Label Widgets which was a very simple and attractive. Soon I decided how will it be if other bloggers can also avail this customized labels widget? That's how this article came out to you just for sharing this beautiful widget

So friends lets us now dive into the tutorial to learn how can we implement this widget on our bloggers site.

Step#1 : Adding Widget

• Before customizing first add the widget 
• To add widget open Blogger dashboard → Layout → Add a gadget → Labels Widget.
• And then add the labels widget

Remember It: Add list style labels only do not add cloud labels.

Step#2 : Customizing Widget

• Open Html editor from Blogger dashboard → Template → Html editor
• Now add the below given css code before ]]></b:skin> 

Css

.Label {display: block;width: 100%;background: #FDFDFD;margin: 0 auto;padding: 10px;}
.Label h2 {display: table;margin: 0 auto 5%;line-height: 1.5em;font-style: normal;font-size: 22px;letter-spacing: 0.5px;padding-bottom: 0%;border-bottom:1px solid #C4C4C4;text-align: center;font-weight: normal;color: #5A5A5A;}
.Label .widget-content {
padding: 5px 5px;
margin: 0;
font-family: 'Arial', arial, serif;
}
.Label ul {list-style-type: none;margin: 0 0px;padding: 0;
}
.Label ul li {float: left;width: 42.5%;margin: 0 0 5px 5px;color: #616060;text-decoration: none;padding: 6px;display: block;text-align: left;font-family: 'Arial', arial, serif;text-indent: 0px;font-size: 13px;background: #FFF;border: 1px solid #EFEFEF;text-transform: capitalize;border-radius: 1px;-moz-border-radius: 1px;-webkit-border-radius: 1px;}

• Save the customization made in your template and have a look on preview.

Congratulations! you have successfully added customizations to your labels widget

Share is Care! I hope owner of the designcart will not get annoyed when he sees I have hacked and share this widget to others. Any ways friends do not forget to share your words in comment box below, feel free to share your words with me.

Continue Reading(...)

by Unknown 12/07/2013 Leave a Comment

Custom Style Popular Posts Widget For Blogger

If you are an avid reader of trackmyblog.com, then surely you might have explored one of our article on customizing threaded comments of blogger using counter-increment property. In that article I have briefly explained, that how can you use counter-reset and counter-increment property to number the threaded comments in blogger. Here in this article I am just extending the application of counter-increment property in old looking bloggers popular posts widget.

So let's dive into it. This tutorial will be dealing with all simple terms so that you can understand it very easily.

Step#1

• Prior to customization, install popular post plugin in your blogger site.
• Check out the boxes of display snippet and display thumbnail. (No Snippet and Thumbnail should be displayed)
• Now comes the part of Css customizations.

Show Me the Code

Before viewing the code, learn something about some basic things of the codes.

• nth-child property has been used to achieve different colors.
• css selector :before has been used to achieve counters

Css

.PopularPosts h2{
padding-right:.4em;
padding-left:1em
} 
.popular-posts ul {  padding-left: 0; 
  counter-reset: trackit;/*setting counter-reset*/
 }
.popular-posts ul li {  
border-bottom: 1px solid #f0f0f0;  
list-style: none outside none !important;  
margin-left: 0 !important;  
overflow: hidden;  
padding: 10px 0 !important;  
transition: all 0.25s linear 0s;
counter-increment: trackit;/*setting counter-increment*/
  }
.PopularPosts ul li:before{
content: counters(trackit, ".");
padding: 0 .1em 0 0;
font-size: 20px;
font-weight: bold;
color: #C4C4C4;
float:left;
margin-right:10px;
} /* creates counter before lists */

.PopularPosts li:first-child{
border-top:1px solid #f0f0f0
} /* define background for even number lists */

.PopularPosts li:nth-child(odd)
{background:#f5f5f5
}/* define background for odd number lists */

.PopularPosts .item-thumbnail, .PopularPosts .item-snippet {  
display: none!important}/* Hides Thumbnail and Snippet */

.PopularPosts a, .PopularPosts a:hover{
color:#959595;
font-size:.9rem
}
#PopularPosts1 li{
padding-right: 1em !important;
padding-left: 1em !important;
}
.widget.PopularPosts{padding:1.2em 0em !important}

If you carefully go though the code you will not need to get any further guidelines. Therefore all you need to do is simply copy-paste this code in your blog's template editor before ]]></b:skin> and then save the template.

So you liked this?

You liked this simple minimal style right? Oh! Surely you might have been fascinated by this awesome but very simple widget. And there's a great saying that love and knowledge increases on sharing it, so do share your love with us by sharing our contents in social share media. And leave your comments so that I may know how much my work satisfies you.

Continue Reading(...)

by Unknown 12/03/2013 4 comments

CSS Push Buttons Like Css-Tricks

Css-tricks, every css-lover is familiar with this site and also with the owner of this site, that is Chris Coyer. Chris coyer discuss about web-designing and about Css properties in his site, and frankly I admit it that I've learnt lot of new things in his site.

Among them one is the Css 3D push buttons. This buttons are purely powered by Css and they make 3D push effect when clicked on it. But my question is why all the good things happen on other sites only which are not hosted on blogger platform. And while finding the answer to this question incidently I redesigned it specifically for blogspot users. So here we go through the article, we will now add this into your blogger sites.

Enjoy the posts by taking your time and see the fun in this tutorial.

For The Beginner Bloggers

Before diving into deep of the tutorial, first of all you must learn how to imply this button effect in your blogger.

Step#1

Open Blogger dashboard → Template → Html editor 

Now search ]]></b:skin>  and paste the css code of button just before it.

Step#2

In this step you will have to add Html element with class="button", it can be elements such as div, span, button, abbr. To clear your confusion see the below given example and remember the points mentioned.

Example:
<span>Demo</span>
<button>Demo</button>

Remember:
If you want to achieve button effect then you will have to add class='button' to the element which you want to work as push-button.

See The live Demo Working Here

Yeah! I have embedded live demo in my posts, so that you can learn some basics of this push buttons. Remember that without playing with codes you are not going to learn so here is the small playground specifically for you.

 

4 Different Push Buttons

1. Css for Light Blue Button

/* Light Blue Button */
.button {display:inline-block;border: 0;border-radius: 0;outline: 0;font-size: 18px;background: rgb(0, 159, 209);box-shadow: 0px 0px 1px #003F63,0px 1px 1px #0092C0,2px 1px 1px #003F63,1px 2px 1px #0092C0,3px 2px 1px #003F63,2px 3px 1px #0092C0,4px 3px 1px #003F63,3px 4px 1px #0092C0,5px 4px 1px #003F63,4px 5px 1px #0092C0,6px 5px 1px #003F63;color: white;white-space: nowrap;padding: 9px 16px;margin: 0 10px;color:white;position: relative;}
.button:active {box-shadow: 1px 0px 1px #003F63,0px 1px 1px rgb(0, 146, 192),2px 1px 1px #003F63,1px 2px 1px rgb(0, 146, 192),3px 2px 1px #003F63;top:0px;right:-3px;bottom:-3px;}
.button:hover{background: rgb(2, 181, 238);}
.button a, .button a:hover{color:white}
.button:active:after{top:3px;left:3px}

2. Css for Dark Blue Button

.button {border: 0;border-radius: 0;outline: 0;font-size: 18px;background: #4e68c7;box-shadow: 1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891,2px 3px 1px #3852b1,4px 3px 1px #203891,3px 4px 1px #3852b1,5px 4px 1px #203891,4px 5px 1px #3852b1,6px 5px 1px #203891;color: #FFF;white-space: nowrap;padding: 9px 16px;margin: 0 10px;
position: relative;display:inline-block;}
.button:hover {background: #3d57b4;}
.button:active {box-shadow: 1px 0px 1px #203891,0px 1px 1px #3852b1,2px 1px 1px #203891,1px 2px 1px #3852b1,3px 2px 1px #203891;top: 0px;right: -3px;bottom: -3px}
.button a,.button a:hover{color:white}
.button:active:after {top: 3px;left: 3px;}

3. Css For Orange Button

.button{border: 0;border-radius: 0;outline: 0;font-size: 18px;background: #FF6124;box-shadow: 0px 0px 1px #AF3F14,0px 1px 1px #C94921,2px 1px 1px #AF3F14,1px 2px 1px #C94921,3px 2px 1px #AF3F14,2px 3px 1px #C94921,4px 3px 1px #AF3F14,3px 4px 1px #C94921,5px 4px 1px #AF3F14,4px 5px 1px #C94921,6px 5px 1px #AF3F14;color: #FFF;white-space: nowrap;padding: 9px 16px;margin: 0 10px;position: relative;display:inline-block;}
.button:hover {background: #FF4700;}
.button:active {box-shadow: 0px 0px 1px #AF3F14,0px 1px 1px #C94921,2px 1px 1px #AF3F14,1px 2px 1px #C94921,3px 2px 1px;top: 0px;right: -3px;bottom: -3px;}
.button:active:after {top: 3px;left: 3px;}
.button a,.button a:hover{color:white}

4. Css For Yellow Button

/* CSS Button - Yellow */
.button {border: 0;border-radius: 0;outline: 0;font-size: 18px;background: #E6CA00;box-shadow: 0px 0px 1px #B19525,0px 1px 1px #D1B832,2px 1px 1px #B19525,1px 2px 1px #D1B832,3px 2px 1px #B19525,2px 3px 1px #D1B832,4px 3px 1px #B19525,3px 4px 1px #D1B832,5px 4px 1px #B19525,4px 5px 1px #D1B832,6px 5px 1px #B19525;color: #FFF;white-space: nowrap;padding: 9px 16px;margin: 0 10px;position: relative;display:inline-block;}
.button:hover {background: #F3D605;}
.button:active {box-shadow: 0px 0px 1px #B19525,0px 1px 1px #D1B832,2px 1px 1px #B19525,1px 2px 1px #D1B832,3px 2px 1px #B19525;top: 0px;right: -3px;bottom: -3px}
.button:active:after {top: 3px;left: 3px;}
.button a,.button a:hover{color:white}

Final Words

There are lots of peoples who might have already written on this topic, but one thing in common among them was they just copied the whole thing from chris coyer and pasted it in their sites, making only little changes to the stylesheet.

But think out of box, like you are the user and have no knowledge of codes and all then what? Even if you don't like the color of the button then also you'll have to use that color, as you have no choice. And that's why I have provided this push buttons in 4 different colors so that our users can choose their respective colors.

Note: yeah in the end I want to tel you that if you need a push button for you with some other color then freely tell me by leaving your comments below, I'll be delighted to help you.

Continue Reading(...)

by Unknown 12/03/2013 Leave a Comment