en en fr en en en en en en en en en en en en en en en en en ceb en en ceb en en en en en en en en en en de en en ceb en en en en en en en en en en en en en en en en en en en en la en en la en en la en en la en en la en en la en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en pt en kn en en en en es en en en en en en en en en en en en en en hbs_lat en en en en en en en en en en en en en de en en en en en en en en es en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en de en en en en en en en en en en en ar en en en en en ar en en it en en en en en en en en en en en en en en en en en en en en en fr en en en en en de da en en cs da da en en en it de en en en it en en en en en en
Display post author, date, labels and comments with icons below post titles
Rishi M | 3:55 pm | Title Picture Be the first to comment!
n this post, i will show you how to add default Author Name, Post Date, Labels and Comments with some little icons to the left of each other. You can see under each of my post title, some details like author name, time when posts have been published, labels and the comment count links. When there are no comments posted the link says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. This is a nice hack that will make your blog look beautiful and professional.
Let's start adding the codes.
Step 2. Check the "Expand widgets templates" box
Step 3. Search for this code:
If you can't find it, look for this one:
Be the first to comment!     Comment so far   Comments so far
Details that can be customized:
... with the URL address of your image.
Step 5. Save template... and you're done!
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
Rishi M | 3:49 pm | Blockquote Trick Be the first to comment!
Add awesome designs, backgrounds and CSS3 effects for displaying HTML, CSS and other codes in blogger posts using CSS and CSS3. Just follow these steps:
Step 2. Search for this piece of code:
Step 3. Just above it, paste the following code:
Step 4. Save the Template
Now everytime you create a post, switch to Edit HTML tab, choose the syle you like and add the red codes below to the beginning and end of the text you want to quote. See the screenshot below:
Here are the available designs:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Posted by Rishi M at 3:49 pm No comments:
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
How to add an image next to Blogger Post Title
Rishi M | 3:37 pm | Title Picture Be the first to comment!
By default, Blogger's post title is a plain text. In this tutorial, I'll show you how you can add an image beside your post title.
First thing first you have to do is to prepare an image. After that you'll need a direct link to an image before you proceed further. You can upload it to tinypic.com and copy the URL located in the Direct Link for Layouts box. Also, make sure your image is sized appropriately. You don't want to see a huge image next to your post title.
If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Expand Widget Template (don't forget to make a backup)
If you're using the new Blogger interface: Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (don't forget to make a backup)
After that, find (CTRL + F) and delete the following code:
The code to be deleted:
Paste the following code in the place (be careful when replacing) of the deleted code in Step 2:
Now, replace the image address in red line above with that of your image (the one that you've gotten from Step 1).
Step 5: Save the Template.
Posted by Rishi M at 3:37 pm No comments:
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
Add a Popular Posts Gallery just above your Blogger posts
Rishi M | 3:35 pm | Popular Post | Post Trick Be the first to comment!
The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usability and engage the user. This widget shows the most popular 10 posts on your blog just above your Blogger posts. You can see the Demo on my blog.
Let's start adding it
Before adding it you should know that this widget is not fully compatible with all templates, so please make a backup before making any changes to your blogger template. Now, follow these steps:
1. If you are using the old Blogger interface:
Go to Dashboard - Design - Edit HTML - (make a backup) Expand Widget Template
If you are using the new Blogger interface:
Go to Dashboard - Template - Edit HTML - Proceed - (make a backup) Expand Widget Template
2. Search (CTRL + F) for this piece of code:
3. Just above/before it, add the following code:
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(http://2.bp.blogspot.com/-_Srvna_zg0M/T393_LXqDLI/AAAAAAAABrQ/_t2GmPexCHo/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
Note: you can adjust the size of gallery, changing the values in red (590 and 126).
4. Now search for the following piece of code:
5. Just above/before it, add this code:
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["http://2.bp.blogspot.com/-0Iss3Wjr36Q/T393U65TcKI/AAAAAAAABq4/K_uzwyuNzrE/s1600/prev.png", -40, 36], rightnav: ["http://1.bp.blogspot.com/-DtspeRHclnQ/T393WdyB8EI/AAAAAAAABrA/TKHickb2iI8/s1600/next.png", 2, 36]},
Next thing to do is to place the widget just above the blogger posts.
6. Search for this code:
...or if you can'find it, search for this one:
7. Just below it, add the following code:
Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also.
8. Preview and if everything is ok, Save the Template.
Posted by Rishi M at 3:35 pm No comments:
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
Labels: Popular Post, Post Trick
How to Change Default Anonymous Avatar in Blogger Comments
Rishi M | 3:29 pm | Comment Box Be the first to comment!
In the past tutorial you've learned how you can change avatars size in blogger comments but this simple tutorial will show you how to change or customize default avatar of anonymous commenters or Blogger users with no photo added on their profiles. After Blogger announced new feature of threaded comment, we can still customize it by adding a jQuery plugin to our template and replacing the default anonymous avatar URL http://img1.blogblog.com/img/anon36.png and the one for blogger users http://img2.blogblog.com/img/b36-rounded.png with our own.
If you are using the old Blogger interface:
Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)
If you are using the new Blogger interface:
Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)
Step 2. Find (CTRL + F) this code in your template:
Step 3. Add the following code just above it:
Step 4. Save the Template
How to change avatar:
For Anonymous users: Replace the code in red with the url address of your image
For Blogger users: Replace the URL in blue with your own.
You can choose one from these below (copy the url address):
If you liked this post, please consider sharing it. Thanks!
Posted by Rishi M at 3:29 pm No comments:
Email ThisBlogThis!Share to TwitterShare to FacebookShare to Pinterest
Newer Posts Older Posts Home
Subscribe to: Posts (Atom)
Subscribe Updates, Its FREE!
Add New Widget Blockquote Trick Bullet List Style Button Color code generator Comment Box Comment Count Contact Css CSS Menu Cursor Facebook Like Falling snow Favicon Feature Post Footer Box Heading Style Home Link Style Hosting javascript JQuery Label trick Links Tricks Marquee Trick Menu Bar Mouse Point Navigation Nudging Page Number Photo Effect Popular Post PopUp Post Trick Read More Recent Post Related post Rss Search Box SEPARATE BOX post Shadow box Picture SideBar Color Slide Show Slider Social Media Subscription Animation Subscription Box Text Effects Title Picture vertical menu
Customize Blogger Contact Form
Adding a Contact Form to Blogger
Customized Blogger Contact Form
Subscribe Box 1,2, 3, 4, 5
Slidehsow 1, 2, 3 4
Commnet Box 1, 2, 3
Blockquote Style 1, 2, 3
View my complete profile
Ethereal theme. Powered by Blogger.