Skip to main content

Posts

Showing posts from July, 2013

Transform your post footer element to all capital

Post footer in uppercase gives your blog more style in look and feel. Its very easy. Just add some stylesheet by login to your dashboard > template > advanced > add css .post-footer { color:#000000; text-transform:uppercase; letter-spacing:0px; font-family:arial; font-size:10px; } Copy and paste the above code & save your template. display: none; }

Stylish horizontal menu bar for your blog

Go to Blogger Dashboard > Layout Click on Add a Gadget (below header) Select HTML/JavaScript Paste below code inside it, <style> #catmenucontainer{ border-bottom: 0 solid #CCCCCC; width:860px; margin:0 auto;margin-left:-65px; height:40px; background-color:#2F8BE8; display:block; padding:0 0 0 0; font:15px "tahoma",verdana,Arial,sans-serif; font-weight:normal} #catmenu, #catmenu ul{height:40px; list-style:none outside none; margin:0; padding:0; width:860px} #catmenu a{color:#fff; display:block; border-right:0px solid #504A4B; padding:9px 4px 12.5px 6px; text-decoration:none} #catmenu a:hover{color:#000;background-color:#f09d28;outline:0} #catmenu li{float:left; margin:0; padding:0} #catmenu li li{background-color:#ffc97c;float:left; margin:0 0 0 0; padding:0; width:130px} #catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited{background-color:#f09d28; width:135px; float:none; margin:0; padding:4px 5px 5px 10px; color:#000; border-bottom:1px; text-decoratio

How to customize blogger post footer

The Post Footer describes author name, post date & time, tags etc.Primarily certain things can be customized by going to Layout & click the 'edit' button in blog post section. a pop up window will appear like this : Now you can select items through clicking the check boxes at the left side. Drag the elements to rearrange according to your choice. APPEARANCE OF LABELS To change the appearance of your labels go to Template----->Customize------->Advanced------>Add CSS and paste the code : .Label { color:#b4h6td; background:#afafaf; }

How to Add Extra Widget Section to Blogger Header

In this tutorial you will learn tips to add extra widget in blogger header section in new template designers. Within this gadget section you can add anything that you may want, for example, subscribe buttons, search box or your AdSense ads within the Blogger header. Step 1: Login to your blogger dashboard and backup your template. Click "Edit HTML" button. Step 2: Find for the below codes which you have edited and implemented in previous tutorial: <b:section class='header header-left ' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Blog's Title (Header)' type='Header'/> </b:section> <div style='clear:both;'/> Now find for <div style='clear:both;'/> which is marked in red in the above codes and before it add: <b:section class='header-right crosscol' id='header-right' maxwidgets='1' showadde