AllBlogTools.com | Blogger Templates and Tricks

---

Add An Animated Sliding Underline To Your Text Or Headings Posted: 02 Oct 2013 10:11 PM PDT Today's featured tutorial is by Paul Crowe from SpiceUpYourBlog. It's nothing fancy in terms of functionality but if you want to make your blog look completely different and refreshing then try his trick out. The trick is simply to add a sliding line underneath your text; it could be your blog's body text or headings. This sliding line will appear or rather slide out underneath the (tagged) text every time the mouse pointer is hovered over it. Crowe says that this would be ideal for links and post headings as they're the ones that get hovered over by the mouse the most. The trick is pretty easy to implement as the tutorial instruction doesn't require any solid coding knowledge or experience to follow. All it takes is for you to add a CSS code into your template's HTML. Below is just a portion of the CSS. /* Underline Slide */ .uslide { display: inline-block; } .uslide:after { content: ''; display: block; height: 3px; width: 0; background: transparent; transition: width .5s ease, background-color .5s ease; } .uslide:hover:after { width: 100%; background: #990000; }      If you'd like to see the complete set and find out how to go about it and where should you put it, click here.

Boutique Blogger Template Posted: 02 Oct 2013 09:30 PM PDT Looking for a chic template for your online boutique store website? Here's a beautiful Blogger template created by Elegant Themes. The Boutique Blogger Template is one of the latest Blogger templates released this month and we will be featuring it here. This is perfect for online stores that display their products, be it bags, shoes, clothing, perfume, school supplies, accessories, furniture, musical instruments, etc. It has an eye-candy look that will definitely attract potential customers and perhaps bookmark your site and follow the latest updates. The hovering effect brings an interactive approach as well. Boutique Blogger Template features a clean design, has a featured content slider, fixed width, available drop down menu, also includes page navigation widget, well-suitable for business site, shopping, online store and open cart. Aside from its minimal look, this template is also inspired by WordPress, which has become a trend these days in which you have a WP designed template for Blogger. It is licensed under Creative Commons Attribution 3.0 and you can customize it too. How to customize the featured slider: Login to Blogger Dashboard > Layout > Edit HTML Look for the code below: <div class='slide'>  <div class='featured-image'>  <a href='#'><img alt='Back To School Supplies' height='230' src='/product.png' width='380'/></a>  <div class='featured-price'>  <a class='add_cart et-shop-item' href='#'>Add To Cart</a>  <a class='more_info' href='#'>More Info</a>  <span class='price'>25</span>  <span class='currency_sign'/>  </div>  </div>  <div class='featured-description'>  <h2 class='featured-title'><a href='#'>Back To School Supplies</a></h2>  <p>Vivamus eget nulla id elit volutpat...</p>  <a class='readmore' href='#'><span>More Info</span></a>  </div>  </div>  ............ Change “#” with your featured post URL and “product.png” with your slider image. The dropdown Menu can also be customized, simply follow this: Blogger Dashboard  > Layout > Edit HTML Look for this code   <div id='menu-content'> <div id='menu-shadow'/> <ul class='nav clearfix' id='secondary-menu'>  <li><a href='#'>Backpacks</a></li>  <li><a href='#'>Bathroom</a></li>  <li><a href='#'>Accessories</a> <ul class='sub-menu'>  <li><a href='#'>Bathroom</a></li>  <li><a href='#'>Clothing</a></li>  ........... Change “#” with your menu item URL. Download it for free right here.

You are subscribed to email updates from Blogger Templates, Tutorials, Tools | WordPress Themes | Allblogtools.com To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610