Skip to main content

Posts

Showing posts from June, 2013

Metro style social widget for blogger

Log in to Blogger Dashboard > Layout Click on Add Gadget Choose HTML / JavaScript Paste the following code <div class="metro-social"> <li><a class="fb" href="http://www.facebook.com/your blog name"></a></li> <li><a class="tw" href="http://twitter.com/your blog name"></a></li> <li><a class="gp" href="https://plus.google.com/user id"></a></li> <li><a class="pi" href="http://pinterest.com/user id"></a></li> <li><a class="in" href="https://www.linkedin.com/in/user id"></a></li> <li><a class="yt" href="http://www.youtube.com/user id"></a></li> <li><a class="fd" href="http://feeds.feedburner.com/your blog name"></a></li> </div> <style>            .metro-socia

How to customize blogger official popular post widget

Popular Post widget in blogger shows most viewed & commented post in the sidebar. This helps visitor to find quality articles, tips and guide in just one click. One can easily add this widget by login to dashboard > layout > add gadget > click popular post. Now add style sheet to the gadget so that it looks attractive to your readers.  Go To Blogger Dashboard > Template Click on Customize > Advanced Add CSS Just copy & paste the following css code .popular-posts ul{padding-left:0px;} .popular-posts ul li { list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #dddddd; -moz-box-shadow:1px 1px 2px #dcdcdc; -web-kit-box-shadow: 1px 1px 2px #dcdcdc; -goog-ms-box-shadow:1px 1px 2px #dcdcdc; box-shadow:1px 1px 2px #dcdcdc; border-radius:5px; background: rgb(44,83,158); /* Old browsers */ background: -moz-linear-gradient(top, rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%); /* FF3.6+ */ backgroun

Add stylish search box to your blog

A search box helps visitors to access specific information on your website or blog. So adding a search engine enhances blog page view & keep readers stick to the site. Here is the code for search box. <style> #abt-search-btn {     background: none repeat scroll 0 0 #359BED;     border: 0 none;     border-radius: 0 0 0 0;     color: #FFFFFF;     font-weight: 700;     padding: 10px 20px; } #abt-search-box {     background: none repeat scroll 0 0 #EEEEEE;     border: 0 none;     padding: 10px;     width: 250px; } </style> <form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="abt-search-box" name="q" size="40" type="text" placeholder="  imzas "/> <input id="abt-search-btn" value="Search" type="submit"/> </form>