How To Easily Add 3D Social Bookmark Buttons To Your Blog Posts

In this post i will show you how to add a set of social bookmarking buttons to your posts that requires just adding a simple piece of code to your blog.

Social bookmarking is a vital resourse all bloggers must use.
In an earlyer post i went into detail on the power of social bookmarking Click here for that post.
If you aint got bookmarking buttons under your blog posts Get Them !

They can increase :

Your blogs rank in google,bing and other search engines

Visitor numbers to your blog

Return visitor numbers to your blog

These are the buttons we will be adding :

In three steps you will be clicking save and your Done :

1.Click Layout---> edit html for your blog
(Tick expand widget templates box)

2.Find this piece of code in your blogs html :
(Use ctrl f for a search box to find the code)

<data:post.body/>

3.Now copy the piece of code below and paste it Immediately AFTER the above code


<a href='http://okkomadewaltricks.blogspot.com/'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwCGk9UlXMar6k_eruJGa8nOgD2J_3lsZrrjZaUznOXKQEZM8OB5-D1GliRXlsFxgUS259rZ3Bue6fukMOh9wBdy18VWt7ifsRU1OqoWuxowJDzdkOGhy8lwz_GF-xBTOmOxDnSpgK0GfY/s1600/best+blogger+tips.png'/></a><div style="clear:both; ">
<div style="width:60px; float:left;">
<script type="text/javascript">
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"/>
</div>
<div style="width:60px; float:left;">
<script badgetype="square" src="http://d.yimg.com/ds/badge2.js" type="text/javascript"><data:post.url/></script>
</div>
<div style="width:65px; float:left;">
<a expr:href="&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" target="_blank" rel="external nofollow"><img alt="Stumble" style="padding:0;margin:0;border:none;" src="http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/stumble.gif"/></a>
</div>
<div style="width:65px; float:left;">
<a expr:href="&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" target="_blank" rel="external nofollow"><img alt="Delicious" style="padding:0;margin:0;border:none;" src="http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/delicious.gif"/></a>
</div>
<div style="width:65px; float:left;">
<a expr:href="&quot;http://technorati.com/faves?add=&quot; + data:post.url" target="_blank" rel="external nofollow"><img alt="Technorati" style="padding:0;margin:0;border:none;" src="http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/technorati.gif"/></a>
</div>
<div style="width:65px; float:left;">
<a expr:href="&quot;http://twitthis.com/twit?url=&quot; + data:post.url" target="_blank" rel="external nofollow"><img alt="Twitter" style="padding:0;margin:0;border:none;" src="http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/twitter.gif"/></a>
</div>
<div style="width:65px; float:left;">
<a expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title" target="_blank" rel="external nofollow"><img alt="Facebook" style="padding:0;margin:0;border:none;" src="http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/facebook.gif"/></a>
</div>
</div>

Click save and your done !

I have lots more social bookmarking options Click Here To see a list.
Do you like these ones ?

Read More

How To Add A Random Post Link To Your Blog.

There are many different random post widgets available but i quiet like this one.This is a simple text random post link that can be added to any part of your blog.

You will have this link up in a few seconds.

1.In the Layout section of your blog click "Add a gadget"

2.Select HTML/Javascript

3.Paste in the code below:

<div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Feeling Lucky? Click Here For A Random Post'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

Click Save You Done !

The text "Feeling Lucky? Click Here For A Random Post" can be changed to whatever you want displayed.

Easy Huh...

Read More

How To Add A Digg Button To The Bottom Of All Your Blog Posts

Adding a Digg this button to all your blog posts is easily achieved.One simple piece of code will put the button below all your posts including your previous posts.

What is Digg? - Digg is one of the coolest websites known to man. Digg is a way for the public to filter through blog posts/images/videos/articles/websites/whatever and determine which ones are cool or not. Digg is also completely free to use. Can u dig it?

How does Digg work? - Digg is like a ginormous voting system for web information. The more people who vote or “Digg” any specific item… the higher it will rise in the Digg rankings.

You can have a digg button in your blog posts in three quick steps :


1.Click Layout-->Edit html for your blog

2.Click the box next to Expand Widget Templates and Find the following piece of code in your html :

<p><data:post.body/></p>

(To quickly find code click "CTRL and F" on your keyboard a search box will appear use it to search for the code)

3.This is the code to be added:

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url=&quot;<data:post.url/>&quot;; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

Placement Options:

Place the code ABOVE <p><data:post.body/></p> for the digg button to appear at the top of your posts.

Place the code BELOW<p><data:post.body/></p> for the digg button to appear at the bottom of your posts.

Move The button across your blog?
To move your button across blog simply change the part of code in blue to "right" "left" or "center"

I use the button and You can see it at the bottom right of this post.

More info on Digg:

We Are Nearly Finished - First A Quick Reminder: If you need more help or have an opinion or suggestion, Please leave a comment Below.It also really helps with future posts if you let me know if a tip has worked on your blog. This is a Do-Follow Blog so leaving a comment will also help Your blogs Google rank. OK Back to business....

What is Digg? - Digg is one of the coolest websites known to man. Digg is a way for the public to filter through blog posts/images/videos/articles/websites/whatever and determine which ones are cool or not. Digg is also completely free to use. Can u dig it?

How does Digg work? - Digg is like a ginormous voting system for web information. The more people who vote or “Digg” any specific item… the higher it will rise in the Digg rankings. Sounds rather simple, huh?

Who uses Digg? - Anyone and Everyone. Digg is a system which is powered by the people. We choose what gets submitted and ultimately we choose which submissions are cool or not. This means that no website is too big or small, even your lame website about windows vista can make it into the Digg rankings.

How can I make money using Digg? - Here is the really cool part, so pay attention my friend… Submissions that make it to the front page of Digg get massive amounts of traffic. So much traffic in fact, that there is actually a new term called the “Digg Effect” - Digg effect is “the term given to the phenomenon of a popular website linking to a smaller site, causing the smaller site to slow down or even temporarily close due to the increased traffic.

Read More

How To Make An Easy Email Me Or Mailto Link Or Picture Link For Your Blog

If you would like to give your blog readers the option to email you, a quick and safe why to do this is with a email me or mailto link.In this post i will show you how to make a mailto link, mailto picture link or mailto button and add it to your blog.It's easier than you may think.

All three are made up of just a short piece of code and are very easy to add to your blog.You could place one in your sidebar of footer or even in a post if required.

How To Make A Mail To Link

1.Mailto Link

Here's a preview of a mailto link :

Click Here To Contact Me By Email

And here's the code:

<a href="mailto:spiceyourblog@gmail.com.com">
Click Here To Contact Me By Email</a>

Note

Simply change my email in Bold above to your email address.

change the text 'Click Here To Contact Me By Email' in Bold above to the text you want displayed.

2.Mailto Picture Link

Here's a preview of a mailto Picture link:



And here's the code:

<a href="mailto:spiceyourblog@gmail.com"
><img src="http://i631.photobucket.com
/albums/uu40/paulcrowe/email-3.png" alt="Click to email me" /></a>

Note: change my email in bold to your email address.

You can change the picture link in bold to another picture if you want.

3.Mailto Button Link

Here's a preview of a mailto button link:

Here's the code:

<form>
<input value="Email Me"
onclick="location.href='mailto:spiceyourblog@gmail.com'"
type="button">
</form>

Note: - Simply change my email in bold to your email address.

You can change the Text 'Email Me' in bold to the text you want displayed on your button.

To add one to your blog copy the code add your Email and paste the code were you want it.The code can be placed anywere Html is accepted.
To add one to your sidebars in your dashboard click 'Layout' > 'Add a gadget' > Choose 'Html/Javascript' from the pop up menu > paste in the code and save.

Read More

How To Create Two Types Of Easy Drop Down Menus For Your Blog

Drop Down menus can be used in so many ways in your blog from creating a menu for your visitors to linking to past posts.Their popularity is mainly down to how tidy they are taking up little room yet displaying an infinite amount of links that would otherwise fill your blog.Here i will cover two types of html drop down menu
.Both these menus can be added in your posts/sidebar are anywhere you want them.

1.A drop and click menu.

2.A drop down menu with a go button.

Drop and click :

Here is how the menu looks:

Change This To Title You Want This is the title of your first link This is the title of your second link This is the title of your third link This is the title of your forth link This is the title of your fifth link

And here is the code that makes the menu:

<select id="Select1" onchange="window.open(this.options[this.selectedIndex].value,'_blank');this.options[0].selected=true" class="text_noresize" name="select">
<option selected="selected">Change This To Title You Want</option>
<option value="http://okkomadewaltricks.blogspot.com/"> This is the title of your first link</option>
<option value="http://okkomadewaltricks.blogspot.com/"> This is the title of your second link</option>
<option value="http://okkomadewaltricks.blogspot.com/"> This is the title of your third link</option>
<option value="http://okkomadewaltricks.blogspot.com/"> This is the title of your forth link</option>
<option value="http://okkomadewaltricks.blogspot.com/"> This is the title of your fifth link</option>
</select>

Just copy the code above paste it were you want your menu and you just have to make a few quick changes.

1.The text in red is displayed on the front of your menu just change to suit.
2.Change each of the URLs in green and their corresponding titles in blue to suit.
3.You can of course add more links or remove links.


This is a drop down menu with a GO button:

 title 1 title 2 title 3 title 4 title 5 title 6

And this is the code:

<form title="jump"> <select name="menu"> <option value='URL ------- 1 here' > title 1</option> <option value='URL ------- 2 here' > title 2</option> <option value='URL ------- 3 here' > title 3</option> <option value='URL ------- 4 here' > title 4</option> <option value='URL ------- 5 here' > title 5</option> <option value='URL ------- 6 here' > title 6</option> </select> <input type="button" onClick=" location=document.jump.menu.options [document.jump.menu.selectedIndex].value;" value="GO"> </form>

This menu has two differences,
First it has a go button
Second the title of the first link is the title displayed on the front of the menu.

If you need more help or have an opinion or suggestion, Please leave a comment Below.

You an change GO in red to select/advance etc....
Add your UR L's and Ti tiles as shown with the first menu.
You don't change name="menu"

Job Done !

Both very effective and both very simple.

Read More

How To Add A Small Search Box To Your Blog

Its easy to add a search box for your readers to search your blog.

On blogger we have the option to add a google search to our blog.
I think the google search box is too big and un-editable so i added my own small search box.

This search is just as effective and very easy to add to your blog and you can make it appear to suit your blogs style and colors.

This is the search box:

Search Okkomadewaltricks



To place this on your blog you just gotta copy the code below and replace by URL with yours and you have the option to make some changes to its appearance.

Below is the exact code that makes up my search box:

<form id="searchthis" action="  http://www.okkomadewal.com/search " style="display:inline;" method="get"><br /><strong>Search Okkomadewaltrick<br/></strong><br /><input id="b-query" maxlength="255" value=" Type and search..." name="q" size="20" type="text"><br /><input id="b-searchbtn" src=" http://i631.photobucket.com/albums/uu40/paulcrowe/searchbuttonsbx.jpg" type="image" align="top"><br /></form>

Only one part of this code must be edited before adding it to your blog that is the URL :

1.The URL :  http://www.okkomadewal.com/search  - change this to your blogs address : http://www.yourblogaddress.com/search

Your search box is now ready and will search Your blog OR you have the option to make three more changes to personalise your search box .

We Are Nearly Finished  If you need more help or have an opinion or suggestion, Please leave a comment Below.

2.The text : Search Spice Your Blog- is the text that appears above your search box you can change it to anything you like or leave blank to have no text.

3.The text : Type and search... - is the text that appears inside the search box and can be changed or left blank for no text inside the box.

4.The URL : http://i631.photobucket.com/albums/uu40/paulcrowe/searchbuttonsbx.jpg - is the URL of the image that appears below the search box.This can be changed (checkPhotobucket.com for some small search icons) or it can be removed to have no image.

Read More

Social Bookmarking Buttons With Spinning Effect for Blogger

Till now many social bookmarking widgets has been released for Blogger. Simply, social bookmarking buttons and icons helps you to make your blog socialize and get more traffic. Adding social bookmarking buttons is cool way to get more readers and targeted audience.

Before using social bookmarking option, you must be aware of icons design how much clickable is it. Your readers are likely to click social bookmarking button containing in your blog if they find the buttons really cool. If you haven't such buttons, so here is something special for you.

Social bookmarking buttons with spinning hover effect. Buttons are cool itself and when your reader hover the mouse over it, it spins a round.

Check the demo yourself!

Here is how to add these cool buttons to your Blogger blog:

Login to Blogger > Design > Edit HTML > Expand widget templates. Find the following code in your template:

<data:post.body/>

Just below that add the following group of codes:

<b:if cond='data:blog.pageType == "item"'>
<div class='spinning_icons'>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank' title='Twitter'>Twitter</a>
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'>Delicious</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'>Digg</a>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'>Facebook</a>
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumbleupon'>Stumbleupon</a>
<a class='rss' href='http://feeds.feedburner.com/hacktutors' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>

Replace hacktutors with your feedburner username. Again, find the following code:

]]></b:skin>

Just above that code, past the following:

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB3t_A346gLe04Kw9dcEfPiyewANOx0wch4YiDcOTsMAKiJSlt7CKdosSQQjRhudGRzvwlrSLozoomBAhqOVhq-_HinTLMcA0gSoQfK5JV3sMZ1N5ELRqp1BJHIz76DCSEk5pdMp6rzW4/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaAce886wjH5WQkK7nnd0StB8DhW9v5axMhf5TUeXjXWh1UrpC9TMMP5OxFzOVnr_EDtsf6u6_RZTX0mQGqXe6e9LhwH8QI8pMd6MjtXEBbgDEjsF6f1bkkK9A6hsfC4s4d1VtBbXWgN8/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrB9FqM-GSDDiEqhe0F5pkwVlUSuW9JAZxR2U0o3tHZvadWZGlNBFfKQ9ZKUW9jxbFNbrJUIWrrocVihcDQTRvkgFQ4sFb-2ar2BhTgg7OzSdZgMl7Mj0rRIgGEAp4pVWt0X35cmuHjlI/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSBQ4mEoqhorKq9T3n8O3vrHv7ZzXhpKeWF18Y14g9bsyClIDLOOk7_RqiwGjv2k4Yb5hBTD_CO9QrEOv_4Z7krhHMtNQ9eo4eBlSEHMVdEHwggguXWU-ix3kMT0TLARPpG399N0JTync/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9mNnoxfjdhjq9wJQgO_a2gnKUMeljt7sHpldmvlFrnPsJMvGO6Zq13I5u7oFH5ltuNDw77UILcmJdSfsBJheXl6LZKZX4-C23zPO5agEyezqjaDcN1RC2wN2CcTNxP5e8_nc92iacG-U/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgagjaB5DvVMA33U6cO3UtAVjzBWASxZBvermxV-PVBqQ1G5aW8zxJS-zMqZ5UhBSsejcEMsnJDvOiPuILDDAQ2LpVabmE4imseOPxxv2N4TRSDGTKJZL6T26p3EJkZv7ta54Q1AMHbi9Q/s1600/stumbleupon_32.png'); }
.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

Now save the template and your are done! Have a look at your cool new bookmarking button that appears at the bottom of your post.

Read More

Threaded Comments for Blogger With Awesome Style

A month ago, Blogger released threaded comment system which is greatest feature so far. It allow users to reply to certain comment and make thread like structure of comment. But Threaded Commenting feature came up with some certain bugs like users directly landing up to the comment section after once complete load of a page.

Some people might have noticed that the 'Reply' button of threaded comment is not working. For that, revert widgets temples to default and re follow the given instructions in this post.

Playing with CSS and making your blog cool is hard task to do. Considering this, I have created CSS specially designed for threaded comment system of Blogger. You can watch the demo yourself in this blog (in the comment section). If you like that comment section style the follow the following instructions to use it in your Blogger blog.

Threaded Comment with Cool Layout Style
First you need to enabled threaded comment system. (If you already enabled, then please ignore this step).

Go to Edit HTML page and find the following line of code:

<b:include data='post' name='comments'/>

Replace the above code with the following:

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Please note: If you found 2 codes lines of given spinet, then you have to replace both.

Now search for ]]></b:skin> and just above that paste the following CSS codes:

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;

border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);

}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}

.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}

.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 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 {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}

.comments .comments-content .user a {
  color: #444;
}

.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}

.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}

.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.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 .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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

Now save the template and your are done!

Go to one of your page which have comment and see if it works. Enjoy using cool threaded comment system.

Read More