android nexus 7

Home / All posts

Expandable Recent Comments Widget for Blogger

Posted by Unknown Sabtu, 21 Desember 2013 0 komentar

Our recent Widget Latest Recent Commets widget with avatars was also an Awesome widget you may like it. But this time we come with a different widget Expandable Recent comments Widget for Blogger the main difference between our recent widget and this widget is big.In this widget there is no Avatar But it have an Awesome Expanding and collapsing feature. There is a plus sign along side the comment which is for expanding the comment and then it become minus sign can be used for collapsing the expansion.

Live Demo

How To Add Expandable Recent Comments Widget to Blogger

Go to Blogger Dashboard.
Click on Layout and then add a gadget.

Now a menu will pop-up, select the HTML Javascript gadget from that menu.

Now copy the Below script and paste it inside the HTML Javascript gadget box.

<style type="text/css" media="screen">
.row-aa { background: #f2f2f3; }
.row-bb { background: #F8F5F1; }
.row-div {
margin:0px;
padding:5px;
}
.comment-header {
font-size:0.9em;
// border:1px solid #E0E0E0;
// background-color:#F3F3F3;
padding:4px;
margin-top:10px;
margin-bottom:5px;
}
.comment-box {
margin:0px;
padding:0px;
font-size:0.9em;
height:500px;
overflow:auto;
}
.comments1 {
// background: #F3F3F3;
padding:3px;
border-left:1px dashed #A6A6A6;
color: #888888;
font-style: italic;
padding-top:4px;
margin-bottom:5px;
}
.comment-footer {
text-align:center;
font-size:0.9em;
padding:4px;
margin-top:5px;
}
</style>

<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == 'Show all') { unfold_all(this); this.value='Hide all'; } else { fold_all(this); this.value='Show all'; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>

<div class="comment-box">
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript" src="http://trickspunch.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript" src="http://trickspunch.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>

</div>

Customization

In the above script http://trickspunch.blogspot.com Replace with you own Blog URL and that's it you have done this.

Hit the Save Button you will see a gadget having recent comments.
If you have any problems ask us we are giving answers for free that's for sure.

Baca Selengkapnya ....

Related Post widget with Thumbnails for Blogger

Posted by Unknown 0 komentar

Related Post Widget with thumbnails for blogger:Its time to boost your blog traffic with more efficiency then ever before. You would think what is that? So the answer is Related post widget-Yeah there are many more way to increase you blog pageviews and page-rank But adding Related post widget to blogger is very nice trick because it gives your readers a little bit summary about your blog posts so in this way they can see more post then ever on the same page.So let me teach the Tutorial.

How To add Related Post Widget to Blogger

Login to your Blogger Dashboard
Navigate to template and then Edit HTML.
Now search for the </head> code. (Pressing ctrl+f) to find.
Copy the below code and paste it above the </head> tag.

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7xdKfLqp2bR41jOlHrh6g0qXw0wdJr3R8PoMnh-TPYOlMx9tvHri6aXR0oEtc_0mpinskEe46LxF51ieJe0nuNSzL9oTwja3ofPeCGRUbYIQHZTtQpyCUuTFrkH7jOCxi7KK-g0HlS1dx/s1600/no_image.jpg"; var maxresults=4; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/> </b:if>

Customization:

If you want to display this widget also on the Homepage then remove the Blue code from the above script.
If you wish to show more then 4 posts in this widget according to your Blog width then change the value 4 that is in red in the above code.

Now search for the below script( Some templates have this script more then one time so do the below steps for all)

<div class='post-footer'>

Copy the below code and paste it above <div class='post-footer'> Tag.

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=4"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://thatsblogging.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj36Ij6fERRr8nIcyEKITLej3sk_N0RZg-CmEcmTsYQ6ltryQ70QGQUszPXRhYfi_i8vgSHWCWSfMvPpdttX4Gja5cU-u2u3QyrXP6OuLjdz7gWshH7UgOivFGzTsEOOYwdXgWS_ay1OqcS/s1600/best+blogger+tips.png'/></a> </b:if></b:if>

Customization:

If you want to display this widget also on the Homepage then remove the Blue code from the above script.
If you wish to show more then 4 posts in this widget according to your Blog width then change the value 4 that is in red in the above code.
Save your Template that,s it you have done this Tutorial.See your Blog with new look.

Groom Your Blog

Make your Blog awesome and professional by adding this cool widget don,t wait anymore! If you have problems then share your thoughts in the comment Box below :)

Baca Selengkapnya ....

How To add adsense ads in Blogger posts

Posted by Unknown 0 komentar

Adding adsense ads in Blogger posts is a cool way to get more clicks then before.This Hack is especially for Blogger whose pageviews is More and clicks are very less on their ads. This will surely increase your clicks through ads.But you have to take care of the page CTR.So let me describe the Tutorial for all of you.

Parsing your AdSense Code

Before adding AdSense ads into work first of all you have to Parse your code from HTML to XML form Because Blogger Templates are in XML form.To parse your Code first of all create an ad Unit and then copy it, for parsing in the parser. Follow the Below Link to Parse your AdSense Code.

AdSense Code Parser Tool

After parsing the Code follow the Below Easy steps:

How to Add AdSense Ads Below Post title in center

First Go to Blogger Dashboard>> Template>> Edit HTML.
Now search for the Below code.(CTRL+F)

<data:post.body/>

Now copy the Below script and paste it above the <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
Paste the Parse Adsense Code here
</b:if>

In the above code Replace the Paste the Parse Adsense Code here with your Parse AdSense code.

Note

In some Blogger Templates you may found <data:post.body/> Tag three or two times so do the above steps for All.

Then just save your Template, you have done adding the ads below post title in center.

How to add AdSense ads below post title at the Right Corner

Go to Blogger Dashboard>>Template>>Edit HTML.
Proceed it and find the following code by pressing ctrl+f

<data:post.body/>

Now copy the Below script and paste it above the <data:post.body/> Tag(Must Replace your parse AdSense code).

<b:if cond='data:blog.pageType == "item"'> <div style="float:Right;">Paste the Parsed Adsense Code here </div></b:if>

In some Blogger Templates you would find the <data:post.body/> Tag two or three times so do the above steps for all.
Now just save your Template you have done adding adsense ads below post title at the right side.

How to add AdSense ads Below post title in Left corner

Again Goto Blogger Dashboard>>Template>> Edit HTML.
Proceed and find the below tag

<data:post.body/>

Now copy the below Tag and paste it above the <data:post.body/> Tag.For template having more of these tags do the steps for all.

<b:if cond='data:blog.pageType == "item"'>
<div style="float:left;">
Paste the Parsed Adsense Code here
</div>
</b:if>

Must Replace Paste the Parsed Adsense Code here with your Parse AdSense code.
Save your Template you have done the Tutorial of adding Adsense ads below post title at left corner.
Recommended: Add adsense ads to blogger header.

Baca Selengkapnya ....

How To Add 5 Star Rating Widget to Blogger

Posted by Unknown 0 komentar

5 Star Rating Widget gives a cool way to you to get Feedback from your visitors.Actually adding this Widget Below Post or Above the Post Add 5 Stars to your Blog post through which readers can vote your Post and Rate it as they wish.This cool Widget also add the number of stars to your Post in Google Search results. So let me Describe the Tutorial.

How To Add 5 Star Rating Widget To Blogger:-

The following Tutorial Will lead you to Add 5 Star Rating Widget To your Weblog.

Login To Blogger Dashboard.
Then Click the Template Tab<< Edit Html.
Now search for the </head> Tag.
When you find </head> tag, Copy the Below code and paste it above or before the </head> tag.

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />

If you have done the above Steps, Then search for <data:post.body/>
Now copy the Below code and paste it above/below the <data:post.body/> tag.

<b:if cond='data:blog.pageType != "static_page"'><div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[['<img src="http://static.graddit.com/img/star.png"/>']]}</div><div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes"'></script></b:if>

Now Save your Template Because you have done this Tutorial.

Groom Your Blog

This will simply Groom your Blog, add this widget and Enjoy cool widgets from Tricks Punch!. If you have any problem share that with us we are here to solve your Problems.

Baca Selengkapnya ....

Simple Clean White Blogger Template

Posted by Unknown 0 komentar

Simple Clean White Blogger Template:Free Blogger Template having Fresh white look,Two columns with Right sidebars.This cool template is very famous for its simplicity in the Template World.This Template has rounded corners, Minimalist, and exclusive design for blogger. Moreover this cool template is ads ready, also having a cool navigation or menu Bar.This Template has also footer columns.The post are in thumbnails sort of manner, But there the Thumbnails are Rounded, and whenever mouse arrow come over it, the thumbnail rotate Beautifully. However the main thing in this Template is its Simplicity and cool Layout which attract readers towards itself.

Simple Clean White Blogger Template

Download Link

How To install Blogger Template

Newbies have problems installing Blogger Template, To learn how to install blogger template follow the below link.

Installation Method

Recommended: Perfect Blogger Templates

Baca Selengkapnya ....

How to Add Custom Robots Header Tags in Blogger

Posted by Unknown 0 komentar

How to Add custom Robots Tags in Blogger: Today I am going to teach you a special SEO related Tutorial which will just boost your ranking in the search engines and also drive some Targeted Traffic to your Blog if you make good use of it. The Tutorial is "How to add Custom Robots Tags to Blogger"Before I start exaggerating the Tutorial, Let me first describe what Custom Robots Tags Are?

What is custom Robot Tags?

These Tags actually helps you to increase your Blog ranking in search engines and also enhances your Blog SEO which results in the Increase in organic or targeted traffic of your Blog.These Tags also help you to Index certain part or post of your Blog and certain not.But the main thing which you need to be remembered is to use it appropriately.

How to Add Custom Robots Tags to Blogger

Sign up to your Blogger Dashboard.
Now click on the Setting Tab of your site.
Then click the search preferences from the menu.
Now click on the edit Link in front of the Custom robots tags option. (As shown Below).
- When you click on the Edit Link various options will be there select those options which is shown Below.
- Now click on the Save changes Button.
- You have Done the Tutorial.Enjoy cool Tricks from TricksPunch.
If you have any problem Regarding adding these tags to Blogger, Don,t worry to ask Questions, I am not gonna charge you of Questions.
Regards Admin

Baca Selengkapnya ....

How to Resize all Images In Blogger

Posted by Unknown 0 komentar

Resize All Images In Blogger: Now a days the most Boring Problem Blogger faces is the Size of Images on their Blogs.Actually Images of high width can Overflow through you sidebar and can destroy you Blog appearance or Layout.And the best Impressive thing in your blog is your Blog layout, How you navigate your visitors with your Post and pages Links.And this Image Issue is really a threat for your Blog Layout or Appearance.
However, Blogger provides the Facility of Resizing all the Images in your Blog in the Post editor But this Doesn,t work well.Because If you have 50 Posts and all of these posts have Images and you want to Re size it.Then you will go to each post by editor and Manually Resizing the Images, which will take your costly time.And also it is a very Boring for Gallery blogs Because Gallery Blogs contains A lot more Images Manually Resizing those Images is somewhat digging a well.Don,t worry we have a CSS Trick to Resize all the Images in your Blogger Posts.

How To Resize All Images In Blogger Using Css Coding

First of all Visit Blogger Dashboard.
Then Click on your site.
Now click on the Template Tab.
Then click on the EDIT HTML Tab.
Now In the HTML editor search for This tag ]]></b:skin>
After Finding The above Tag, Paste the Below CSS coding above the ]]></b:skin> Tag.

.post-body img {
width: 500px!important;
height: auto!important; }

Changes You Should Make In the CSS Coding Before Pasting

Now change 500 to your own desire Width.
And you can Reset the Height of the Images by changing auto to you desired Height. Such as Replace auto with a Number 600.
If you have made changes in the Coding and have pasted it in the Template Editor above the ]]></b:skin> Tag.
Then Save your Template.
You have Completed the Tutorial or Blogger Hack.