Track My Blog | Design Your Blogger With Us: Widgets

Showing posts with label Widgets. Show all posts

Dec 9, 2013

Green Lava Threaded Comment Theme For Bloggers

Hey Friends I am back again with the most awaited thing by you all. If you might have read my previous posts on which I have provided a freebie i.e. customized comment theme for bloggers used by trackmyblog itself. But due to lack of time second theme was left as coming soon, but friends really I would have felt bad myself if I kept you waited for long for this simple freebie widget, so soon I completed some left works and then prepared this article for you.

Comment System 1 : Dark Sun

Comment System 2 : Green Lava

customized threaded comments for bloggers

Comment System 2 : Green Lava

This comment theme has been used in gadget mag, a simple but responsive blogger theme created by me. I have shared it as freebie on our sister site Template Trackers. Well to say about there are lot of things in this theme, but I'll mention important features only here and for the rest of review you will be appointed soon after the end of this para :)

This theme is named as green lava because this theme is painted with green color and with it's shades. Yeah! Green is my favourite color so I've given a touch of greenry in this new theme for blogger comments. This theme is also auto-numbers the nested comments with the help of counter-reset and counter-increment property I've used in the stylesheet of this theme.

Yeah! I know it, now you might be wondering that what is this counter-reset and counter-increment. That's why I've already written in brief on this topic.

Learn The Trick To Auto Number Comments Using Counter-increment Property?

So moving on ahead let's have a look on the screenshot of this comment theme named Green Lava

Screenshot

Click on the image to see live demo of the comments.

So I must stop talking now about this theme and let me show you the stylesheet code of this comment theme.

Here's The Code

Css

/*====================
Green Lava Comment Theme
======================*/
.comments {padding: 30px 1em 0;clear: both;margin: 0 1em 1em;background: #FFF;border: 1px solid #DADADA;}
.comments ol{list-style:none;counter-reset:trackit}
.comments ol li {list-style:none;counter-increment:trackit}
.comments ol li:before {
content: counters(trackit,".");position: absolute;right: 1.5em;color: #6CB61A;font-size: 24px;background: rgba(133, 206, 53, 0.4);border-radius: 50%;-moz-border-radius: 50%;
padding: 1px 9px;}
.comments .comments-content .comment-replies .comment-thread ol li:before {
content: counters(trackit,".");position: absolute;right: 2.5em;color: rgba(1, 111, 1, 0.34);font-size: 24px;
background: rgba(0, 0, 0, 0);
border-radius: 0%;-moz-border-radius:0%;}
.comments h4 {  font-size: 25px;  line-height: 30px;  padding: 0;  text-transform: capitalize;  }
.comments .avatar-image-container {float: left;max-height: 65px;overflow: hidden;width: 65px;max-width: 65px;}
.comments .avatar-image-container img {max-width: 65px;max-height: 65px;min-height: 65px;min-width: 65px;}
.comments .comment-block {margin-left: 5em;position: relative;word-wrap: break-word;}
.comments .comments-content .user {font-style: normal;font-weight: bold;background: #85CE35;padding: 1px 5px;font-size: 14px;}
.comments .comments-content .user a {
color: #FFF;}
.comments .comments-content .icon.blog-author {display: none;}
.comments .comments-content .datetime {margin: 0;background: rgba(133, 206, 53, 0.25);padding: 1px 5px;font-size: 14px;}
.comments .comments-content .datetime a{color:#6CB61A}
.comments .thread-toggle {
display: none;}
.comments .comments-content .comment-header {margin: 0 0 8px -2em;overflow: overlay;position: relative;}
.comments .comments-content .comment-replies .comment-thread ol li {border-top: 2px solid #86B15E;border-bottom:0px!important;background: rgba(100, 201, 22, 0.1);padding: 10px;}
.comments .comments-content li.comment {
border-bottom: 2px solid #86B15E;
}
.comments .comments-content .comment:last-child {border-bottom: 2px solid #86B15E;padding-bottom: 0;
}

Listen Now

Dear readers you have to copy and paste this code before ]]></b:skin> in your blog's template.

For this open your Blogger dashboard→ Template → Html editor
Now by pressing Ctrl+F search for the above highlighted code and paste the stylesheet of the comment theme just before it.

After adding the code save the template and see the whole new theme installed to your blogger template.

Final Thoughts

Friends as we all know that we need support from others and so we also support others so that we can stand together to help each other, with what we have got special with us. So please show us your respect by leaving your valuable comments below in comment box. With your love we will able to perform well as we will get recognized by more and more peoples.

Friends as I have mentioned that this is a freebie so you can share this comment theme in your respective blog's but do not forget to give proper credit to us. We want you to respect the time consumed while creating this themes for blogger users.

Continue Reading(...)

by Unknown 12/09/2013 15 comments

Dec 7, 2013

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

Dec 3, 2013

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

Nov 19, 2013

Google+ And Blogger Comment System Together In Blogger

Day before I've talked about how to use disqus and google+comment together in blogger. Today I'll explain some very simple steps on how to use default blogger comment along with Google+ comment system. Though blogger's threaded comment system can't control spam like disqus, but yet it is effective and also the favourite comment system for many bloggers even today.

So let us see now how you're going to make both of them work together in same time. Just follow the instructions I'm elaborating below

Open Blogger Dashboard → Template → Html Editor
Open Blog1 from widget list menu
And search (by pressing Ctrl+F) <b:includable id='comment_picker' var='post'>

Screenshot

Select the whole piece of code shown in screenshot and replace it with below given code.

<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='threaded_comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>

Now Search for <b:includable id='threaded_comments' var='post'>
Select the complete code from <b:includable...> to </b:includable>
And replace it with the below given code.

<b:includable id='threaded_comments' var='post'>
<div id='comment-header'>
  <img class='comment-on' id='comments-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkBsj3kuOhj_VA5q4FewaW7MlrQ7gt1kpKyBGLwQVI3kjYKJJlH6Q4RBiRm4oToMTvfMbINjBAtWWJ9VO2VaI6BKOgciWPzu38B7yfvshQlXIQG2ZVmOfUqRmPPM0ss9qa1alNnh_x36-/s50/blogger_on.png' title='view Blogger comments'/>
  <div class='choice'>Comment With Your Choice</div>
<image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90FCBoXebtBpZDyyI-JdEng8PK0gr8gKfXIiSUzZgRgFBphw2DAW-Ro6Nwzq0S9ZxrpVd66v_2nYqiZFCnTUWnpqICn3iucFTBPWZJVGKHU-l7HGnnNb2RkYQmWR-p6MzPcuMP2-8tTGZ/s50/plus_off.png' title='view Google+ comments'/>
</div>
<div id='comment-zone'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>

      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
  <div id='gcontainer'><div id='gcomments'/></div>
<script src='http://apis.google.com/js/plusone.js'/>
<script>
gapi.comments.render('gcomments', {
    href: window.location,
    width: '750',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
$('#comments-norm').click(function(){
 // switch to normal comments displaying
 $('#gcontainer').css('display','none');
 $('#comments').css('display','block');
 $('#comments-norm').addClass('comment-on');
 $('#comments-gplus').removeClass('comment-on');
 $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkBsj3kuOhj_VA5q4FewaW7MlrQ7gt1kpKyBGLwQVI3kjYKJJlH6Q4RBiRm4oToMTvfMbINjBAtWWJ9VO2VaI6BKOgciWPzu38B7yfvshQlXIQG2ZVmOfUqRmPPM0ss9qa1alNnh_x36-/s50/blogger_on.png');
 $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90FCBoXebtBpZDyyI-JdEng8PK0gr8gKfXIiSUzZgRgFBphw2DAW-Ro6Nwzq0S9ZxrpVd66v_2nYqiZFCnTUWnpqICn3iucFTBPWZJVGKHU-l7HGnnNb2RkYQmWR-p6MzPcuMP2-8tTGZ/s50/plus_off.png');
});
$('#comments-gplus').click(function(){
 // switch to google plus comments displaying
 $('#comments').css('display','none');
 $('#gcontainer').css('display','block');
 $('#comments-norm').removeClass('comment-on');
 $('#comments-gplus').addClass('comment-on');
 $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD25geRqgdVNKLCI4QmigSisdn9o6M7_dHONfneQZpgh97cyCU52hg0mUMsxaP_pR2W2daLPB4VILAJstWpFt53THOSA87Vt0hyNdFmfZG21cOz4VXFTJj5GR8ECdlMAbp98LueS_lRItB/s50/blogger_off.png');
 $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIytwJVobQU7_JuJ5qLVSkx0Q-GhLh-a1ZZk1r_QyK_bRmJMsfbXJRqeZXunD8D3auEV3Czoip9Sj_jErcwnSLblXq2Vi_Q9BQw1pvotYnbH_IyiHMGOvs7Ooi-rG17AFnl0pJ8nh9zebx/s50/plus_on.png');
});
$('#comments-norm').hover(
 // switch to normal comments displaying
 function(){
  if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAkBsj3kuOhj_VA5q4FewaW7MlrQ7gt1kpKyBGLwQVI3kjYKJJlH6Q4RBiRm4oToMTvfMbINjBAtWWJ9VO2VaI6BKOgciWPzu38B7yfvshQlXIQG2ZVmOfUqRmPPM0ss9qa1alNnh_x36-/s50/blogger_on.png');} 
 },  function(){
  if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD25geRqgdVNKLCI4QmigSisdn9o6M7_dHONfneQZpgh97cyCU52hg0mUMsxaP_pR2W2daLPB4VILAJstWpFt53THOSA87Vt0hyNdFmfZG21cOz4VXFTJj5GR8ECdlMAbp98LueS_lRItB/s50/blogger_off.png');} 
 }
);
$('#comments-gplus').hover(
 // switch to gplus comments displaying
 function(){
  if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIytwJVobQU7_JuJ5qLVSkx0Q-GhLh-a1ZZk1r_QyK_bRmJMsfbXJRqeZXunD8D3auEV3Czoip9Sj_jErcwnSLblXq2Vi_Q9BQw1pvotYnbH_IyiHMGOvs7Ooi-rG17AFnl0pJ8nh9zebx/s50/plus_on.png');} 
 },  function(){
  if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi90FCBoXebtBpZDyyI-JdEng8PK0gr8gKfXIiSUzZgRgFBphw2DAW-Ro6Nwzq0S9ZxrpVd66v_2nYqiZFCnTUWnpqICn3iucFTBPWZJVGKHU-l7HGnnNb2RkYQmWR-p6MzPcuMP2-8tTGZ/s50/plus_off.png');} 
 }
);
</script>
</div>
</b:includable>

After proper replacement save the template and preview you site pages.
I would like to thank David Kutcher of Blogxpertise for providing this source code and he is only the creator of this widget.

Continue Reading(...)

by Unknown 11/19/2013 9 comments

Dec 9, 2013

Green Lava Threaded Comment Theme For Bloggers

Comment System 2 : Green Lava

Here's The Code

Css

Listen Now

Final Thoughts

Dec 7, 2013

Hongkiat Like Popular Post Widget For Bloggers

How To Add This Widget?

Css

Final Words

Labels Widget For Bloggers Customized By Designcart.org

Step#1 : Adding Widget

Step#2 : Customizing Widget

Css

Dec 3, 2013

Custom Style Popular Posts Widget For Blogger

Step#1

Show Me the Code

Css

So you liked this?

Nov 19, 2013

Google+ And Blogger Comment System Together In Blogger

Recipes For You

Most Trending

Followers

About Trackers

Navigation

Our Sister Sites

Dec 9, 2013

Green Lava Threaded Comment Theme For Bloggers

Comment System 2 : Green Lava

Here's The Code

Css

Listen Now

Final Thoughts

Dec 7, 2013

Hongkiat Like Popular Post Widget For Bloggers

How To Add This Widget?

Css

Final Words

Labels Widget For Bloggers Customized By Designcart.org

Step#1 : Adding Widget

Step#2 : Customizing Widget

Css

Dec 3, 2013

Custom Style Popular Posts Widget For Blogger

Step#1

Show Me the Code

Css

So you liked this?

Nov 19, 2013

Google+ And Blogger Comment System Together In Blogger

Recipes For You

Join Community of 1000+ Subscribers

Most Trending

Followers

About Trackers

Navigation

Our Sister Sites