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

7 Best Logo Making Softwares For Bloggers

While creating a blog everyone keeps a logo for his blog in his head. But implementing that thought becomes the problem when it comes to creating it in reality using some logo design softwares. Having a nice interpretable logo is the hallmark of a successful blog.

For newbies it is very tedious to figure out which software is going to serve him/her well for creating a logo for his/her blog. We have made it easier for all those who don't know which software is best for creating logo.

We are enlisting such seven software one-by-one. This is just a  personal review about the software.

1. AAA Logo-Maker

AAA-Logo-Maker is a very awesome software for designing a logo. It has large collection of pre-installed figures, arts, and texts. Though you have to buy this but this software will be worth buying as it will fulfill all your needs by satisfying you.

2. Logo-ease

Logo-ease is an online program which helps you in creating a appealing logo for your blog. Logo-ease offers many sophisticated images, designs and texts, helpful in creating a business grade logo for your blog or website. It's free of cost to use online.

3. Laughing Bird Logo Maker

The easiest logo designing software I have ever used and seen. All you have to do is download this software either by paying or you can download it for free using torrent. The package contains more than 200 elements, graphics and texts which you have to drag and drop. We strongly recommend this software to our readers.

4. SoThink Logo Maker

So Think Logo Maker is also like Laughing bird drag and drop, but it has limited graphics elements. Then also a person with creativity can do very good with this software. There are near about 300 graphic elements in this software useful in designing a logo.

5. Logo Design Studio

Logo Design Studio is a very astounding software for creating a logo for your blog or website. Again I would suggest that rather than wasting money in buying its cracked version torrent it down directly to your PC. The package contains graphics and pictures, animations, special effects, texts, graphic elements. Easy to export in compatible image form (jpg, png, gif).

6. Quick Logo Designer

This software is a payable software, but its design and uniqueness is worth appreciating. One must definitely use this software. It is user friendly software and also contains some basic tools which a graphic designer will need. Over all this software is worth using.

7. Photoshop Illustrative CS6

This software is just king among all. Though it is little difficult for beginners but once mastered the basics of this software you will find it easy to make a logo using this software. All you need is creativity and innovative look in your mind. You can do more than good with this software.

Conclusion

All the above reviews are personally made by the author based on his study and experiences in using those softwares. We have tried our best to bring out the affordable and user friendly software here in our review. We hope that it will help our readers in selecting the best to design their logo.

Continue Reading(...)

by Unknown 11/30/2013 1 comment

Switch To HTML5 and Start Using Voice Search In Blogger Sites

It's common to find a site/blog with custom search engine installed in their pages. Custom search engine is same as search engine only, but it's algorithm is quite simpler than a search engine is. It's called as a custom search engine because it just search the thing from your sites/blogs pages only.

You can measure it's importance from the fact only that all the major blogs/sites have their own custom search engine installed in their all their pages. It's importance is as a plugin serving better navigation to your readers and visitors. It's also handy thing for you too because it can bring good traffic also.

SEO Fact

There is a group of unique visitors who just wishes to fetch out one single post from your blog. Suppose you have published near about 500+ posts in your site, then may be your visitor would not compromise his time in searching whole of the thing to find out just one article for which he has been crawled from Google to your site.

In such case you may not want to fed up your visitor. To avoid this you install custom search engine in your blog.

Custom search engine have a text area where he writes text using his keyboard and then press enter or click on the search button after mentioning his query in text area given. But what if he can enter his query just by speaking the words?

Yes it is possible now to enter your queries/feedbacks using small piece of Voice Input Code in your sites.

You can see a demo below here.

How It Works?

It works along with a small piece of code of javascript which we sill see soon as we proceed ahead.

As click on mic and speak up, the voice recognization tool starts to analyze the words and letters you have spoken and then it transcribed text will be sent to the mic input. But with the help of javascript function a copy of the transcribed text is instantly sent to the text input area.

Get The Code

Javascript & HTML

<script id='speech-input' type='text/javascript'>
  function transcribe(words) {
    document.getElementById(&quot;sbox&quot;).value = words;
    document.getElementById(&quot;mic&quot;).value = &quot;&quot;;
    document.getElementById(&quot;sbox&quot;).focus();
  }
</script>

<input class='sbox' id='sbox' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}' onfocus='if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}' type='text' value='Search this blog...'/>
<input id='mic' onwebkitspeechchange='transcribe(this.value)' style='width: 15px; height:20px;border: 0px;background-color:transparent' x-webkit-speech=''/>

What Codes Speak?

• You can change the id name of the inputs according to you, but you may also have to change the input in script code corresponding to the modification you have done in inputs id name.
• See the code above id name of the text area input is sbox and id name of speech area input is mic.
• You will also notice the same id name repeated in script code. So while changing the id name remember that you also have to provide same id name to the script code also otherwise the speech recognized on speaking will not be copied to the text area.

Continue Reading(...)

by Unknown 10/20/2013 3 comments