Saturday, November 16, 2013
How Recent Posts With Thumbnails For Particular Label Or Category In Blogger
 |
| Screenshot |
To add this cool gadget/widget for the latest categories, just follow the next steps:
Steps
Step 1. From your Blogger Dashboard, go to Template/Edit HTML
...then tick the Expand Widget Templates checkbox:
Step 2. Search for this piece of code:
]]>
and just above it, paste this one:
/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}
.label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
.label_with_thumbs a { text-transform: uppercase;}
.label_with_thumbs strong {padding-left:0px; }
Step 3. Now search for this tag (CTRL + F)
...and add the following script above it:
Note: to add your own pic for the posts with no thumbnail, replace the image url in blue with your own
So we have added the Css to style the widget and the script to make it work. Now all we have to do is to add the widget's code to the blog sidebar in a Html/Javascript gadget:
Step 4. Go to Layout - click on Add a Gadget
Step 5. Choose the HTML/Javascript widget and paste this code inside the empty box:
Note: Where it says Name-of-the-label is the name of the label you want to display, and if your label is case sensitive, like in my example, then you should type it that way.
Also within the last code, there are parts that we can customize, just change true with false or vice versa:
var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the read more link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)
Remember that the gadget displays the latest posts from a particular label, therefore, if you want to display the latest posts from other labels then just repeat step 5 for each additional category you want to add.
That's it :) Enjoy!
SHARE THIS POST
Author: Van Chien Software
2 comments:
Hoan nghênh sự góp ý của bạn cho website!
- Nếu bạn không có các tài khoản để nhắn tin/bình luận bạn có thể chọn trong "Nhận xét với tư cách" với tài khoản "Ẩn danh" (Anonymous).
Cám ơn bạn đã đọc blog! Chúc bạn tìm được nhiều bài viết hay và hữu ích cho mình!
Subscribe to:
Post Comments (Atom)
Ok
ReplyDelete123
ReplyDelete