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

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

A Chapter On Html5's Download Attribute

HTML5 is bringing evolution in web-designing, really it is doing so. But I came to know about this very later. And as soon as I got this whole new thing to learn, I decided to share it on my site. 

Still after so many years of advancement in web world, it's design structure, there are some web-elements, which don-not download, when you click on them like images, pdf, audio, videos and webpages are examples of it. For image it opens in same window or new window when you click on it and then you have to right click → and click on save image as..

So previously before the launch of HTML5 either ajax or jquery or javascript were used to make such files to download forcefully onclick. 

But HTML5 with its download attribute has made it easier. Let us learn something about HTML5 download attribute in this tutorial.

What is it?

Actually download attribute is used in any element which is to be downloaded. So when user click on element download attribute forces the browser to download the element and replaces the name of downloading element with the name specified in attribute.

Link Without Download Attribute

We are taking one pdf file and one image file, as a simple link without using download attribute

<a href='http://goo.gl/fcnSra' alt='all is mind'>Download Pdf</a> 
<a href='http://goo.gl/IvFC5q' alt='hum-tum'>Download Image</a>

Link With Download Attribute

Now we will add download attribute to the same links used above for example.

<a href='http://goo.gl/fcnSra' alt='all is mind' download='all is mind.pdf'>Download Pdf</a> 
<a href='http://goo.gl/IvFC5q' alt='hum-tum' download='hum-tum.jpeg'>Download Image</a>

See The Live Demo

Browser Compatibilty

At present download attribute functions on Chrome 14+ and Firefox 20+. Hope that very soon HTML5 should also cover the IE, Safari and Opera etc.

Continue Reading(...)

by Unknown 12/03/2013 2 comments

Numbering Blogger Comments Using Counter-increment Property

Css property counter increment is very handy property, because you can do magic with it like auto numbering sections, divs, list etc. Counter increment is used along with counter reset property. Today we will see some interesting use of it in your blogspot sites.

Beginning the tutorial, let us see how can we use counter increment property to number the comments in your blog. I will detail how to use this property and finally achieve result like this one displayed below.

Screenshot

Step#1

Setting up the counter.

First of all you need to reset the counter at it's base value or I must say you will have to set in the parent element inside which those elements are present which are to be numbered. And this can be done by counter-reset property.

Here we are going to add counters to comments, after seeing the html structure of blogger comments, I found that parent element to which counter-reset property is to be added is ol, means comment are present in the form of lists.

So I added following code given below first in Html editor of my template. You can name the counter-reset with any name, for a case here I've used trackit, you can use any another name also but remember it must be same in counter-increment property also

CSS

.comments ol {
counter-reset: trackit;
}

Step#2

Now incrementing the counter

Now you will have to need to increment the counter. You have this property in the element where counter is be achieved. Like we want to achieve counters in all comments so I have incremented counter in lists in this step see the css code below

CSS

.comments ol li {
counter-increment: trackit;
}

Step#3 : Final Step 

In this step we will call the counters using pseudo-property :before, observe the code carefully below

CSS

.comments ol li:before {
content: counters(trackit, ".");
font-size: 3.5rem;
color: rgba(0, 0, 0, 0.16);
right: 0.3em;
position: absolute;
padding: .2em 0 0 0;
text-shadow:1px 1px 1px white
}

Overall

Overall the whole code looks like this

CSS

.comments ol {
counter-reset: trackit;
}
.comments ol li {
counter-increment: trackit;
}
.comments ol li:before {
content: counters(trackit, ".");
font-size: 3.5rem;
color: rgba(0, 0, 0, 0.16);
right: 0.3em;
position: absolute;
padding: .2em 0 0 0;
text-shadow:1px 1px 1px white
}

Beginners Copy Paste The Code

Beginners must simply copy paste the final code given just above by following the instructions mentioned below.

Open Blogger dashboard → Template → Html Editor

and search ]]></b:skin> (by pressing Ctrl+F)

Now paste the copied code just before it and save your template and then view your blogs comments.

Continue Reading(...)

by Unknown 11/30/2013 2 comments

Learn To Create Sections In Blogspot Template

Blogspot platform is just awesome, it's because the simplicity and handy interface it provide. It has capability of moulding itself according to the users need and wish. I've never seen such a great flexibility on any blogging platform ever since, and this is that quality which makes the blogspot a favourite choice for the millions of it's active users around the world.

Today in this tutorial we will learn more about designing and coding. We will see how you can create different sections in your blogger templates.

Screenshot

But first what you have to do is open Blogger template editor(Html).
Blogger dashboard → Template → Html Editor

What It Needs To Generate Section

Sections in blogger is generated either by template designer or you can create it manually with simple coding which we'll deal few steps below.

If you are using Blogger then you must be knowing it that, Blogspot accepts template in XML format only.

So there are some preset codes which onload of your blog transforms itself as a HTML element of the body of your site/blog. Same is the story of sections also. See below

To generate Sections in Blogger template

XML

<!-- Basic Structure Of Coding -->

<div class="class_name">
<b:section id="id_name" class="class_name" preferred='yes'>
.
.
</b:section>
</div>

Remember!

Remember that <b:section>...</b:section> should be inside a div element, it's necessary because division acts as the parent-element for <b:section>...</b:section>, so it becomes easier for you when you need to float or move the sections in your template to any particular part applying CSS property.

Example

For side-wrapper or blog's content

Section Code For Sidebar-wrapper

<div class='side-wrapper'>
<b:section id="side wrapper" preferred="yes">
.
.
.
</b:section>
</div>

Now when you apply CSS-property to sidebar-wrapper and want it to float to right-side of screen all you need to do is apply property to parent element that is .sidebar-wrapper{} as

Css property for Sidebar-section

.sidebar-wrapper{
float:right;
width:300px
}

Now after adding division save the template and view the new generated section in
Blogger Dashboard → Layout/Page Elements

Final Words

Avoid using the same id for sections, like if you have created new section in your template structure with id='sidebar', but another section with same id is already existing in your template's structure then html editor will reject the id name for your new section.

Be careful while creating new section, and always keep a backup of your template's previous structure.

Enter proper CSS property without nay error or it will mess-up the whole structure of your template. But don't worry ever it happens with you just leave a comment or a message to my inbox I'll resolve it :)

Continue Reading(...)

by Unknown 11/28/2013 Leave a Comment