Using the :before and :after Pseudo Elements on Sidebar Titles alphause animated flash here

Helplogger Home Blog DesignWidgets SEO Menus Po ... Using the :before and :after Pseudo Elements on Sidebar Titles 7 comments This is another method of using the:afterand:beforeproperties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an explanatory title and the right, a related link. The idea of generating Adobe-like Arrow Headers was actually discussed by css-tricksand adapted to Blogger. How to Add Adobe-like Headers to Blogger Step 1.Log in to your Blogger dashboard> go toTemplate>Edit HTML,then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag: Step 2.Just above it, copy and paste this code: Step 3.Save the Template. Screenshot: Step 4.Now go toLayoutandAdd a new HTML/JavaScript Gadgetwith one of the codes below for each of the widget title: Background inblue:

Title inBlue

Background inyellow:

Title inYellow

Background ingreen:

Title inGreen

Background inred:

Title inRed

Note:Change "Title in" text with your widget's title andBlue,Yellow,GreenandRedwith the text on the right, then addaLink URLto it. Step 5.After you saved the HTML/Javascript gadgets containing the codes above, drag and drop them just above the widgets you want to show... andSave the Arrangement. DEMO You can see how the sidebar titles has been replaced with some cool header bars on this demo blog. Like 5 Random Posts Create a CSS Image Slider with Thumbnails for Blogger13/01/2014 - 4 Comments What is blogger and how you can create a blogger blog?06/03/2012 - 2 Comments How to Add Google Analytics to Blogger20/10/2013 - 5 Comments Related Posts: How to add custom Variable definiti... Understanding the Page Elements of ... What is the difference between padd... How to Use Cookies in Javascript How to Add Numbered Page Navigation... 7 comments: Cerwenlloyd Gefjun 6/02/2013 Amazing trick sir, many blogger will be glad to use this method. Reply jempot2-office 6/04/2013 thank you for the tutorial, it will beautify the sidebar on the blog. Reply Orlando website design 6/05/2013 Nice post, very informative. A great trick to use on blogs. Thanks for sharing! Reply Mohammad Fazle Rabbi 6/17/2013 its really cool..u r the best bro..thanks for sharing Reply satoshi48 6/18/2013 Thanks for this, good job sir. Reply Anonymous 6/28/2013 Thanks Reply Agents 9/11/2013 my text is not adjusting in between the coloured box..as above in code "Text in" please tell from where to adjust the text iside box Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,784 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 5 Like