ALL MOBILE DRIVERS: Metro UI

Add Related Posts With Thumbnails In Metro UI Blogger Template

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Add Related Posts With Thumbnails In Metro UI Blogger Template</div> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSdBZs9HyYq_YsQOU4N-wht5LObYGkiYii6ngDgAL62WCUTeMNtZCDoeDMzJLJsclj80ola00PSPW4k0hgB_mtUGiDfn-E-MH9AOIZyOphfaln9zlYM70iNznJAbEmbgfeLz_Gp0S3XkBR/s1600/free-premium-metro-ui-blogger-template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSdBZs9HyYq_YsQOU4N-wht5LObYGkiYii6ngDgAL62WCUTeMNtZCDoeDMzJLJsclj80ola00PSPW4k0hgB_mtUGiDfn-E-MH9AOIZyOphfaln9zlYM70iNznJAbEmbgfeLz_Gp0S3XkBR/s1600/free-premium-metro-ui-blogger-template.png" /></a></div> Metro UI is an innovative Windows 8 Style Blogger Template. This theme has a lot of similarities with the Microsoft’s latest operating system Windows 8. This template is ideal for blogging niche like technology, multimedia, entertainment, magazine, and etc. Nonetheless, that’s not all because it is robust enough to be used on any kind of website. By default, this theme has a greenish color scheme. However, you can customize the theme as per the needs. It has some built-in extra-ordinary features like Numbered page navigation, Elegant Menu, 4 column footer, and much more. <div style="text-align: center;">Now We Are Telling You How To Add Related Posts With Thumbnails In Metro UI Blogger Template</div><div style="text-align: left;"> </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZUnN0Kv8KMnwudv1BcNsFIWXslLL4TtJmdaYAUM1580GBATnP8VfKN6bcT5qNRUPuCsXtsVDIZcIowyhj0kM4krRlAwP1B6sGwG0VFJxs7J3dC0tFDmi8al_nSeTjMI8LOBReVqe0Esl/s1600/Metro-UI-related-posts-with-+thumbnails.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZUnN0Kv8KMnwudv1BcNsFIWXslLL4TtJmdaYAUM1580GBATnP8VfKN6bcT5qNRUPuCsXtsVDIZcIowyhj0kM4krRlAwP1B6sGwG0VFJxs7J3dC0tFDmi8al_nSeTjMI8LOBReVqe0Esl/s1600/Metro-UI-related-posts-with-+thumbnails.jpg" /></a></div><div style="text-align: left;"> </div><div id="left"><div class="block"><h1>Metro UI Blogger Template Show Related Post Under Each Post!</h1>LinkWithin is a blog widget that appears under each post, linking to related stories from your blog archive.</div><div class="block"><h2>Don't Let Your Past Stories Go to Waste!</h2>We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them.</div><div class="block"><h2>Increase Pageviews, Keep Readers Engaged</h2>The widget links to stories that are relevant and interesting to readers of a particular post, keeping them engaged with your blog, and increasing your traffic.</div><div class="block"><h2>Elegant, Unobtrusive Design</h2>Our widget is minimally styled and blends in with your site design.</div><div class="block"><h2>Free and Easy to Install</h2>The widget is free and ad-free. It takes a minute to get the widget up and running on your blog, no signup required! STEP TO ADD RELATED/YOU MIGHT LIKE ALSO VISIT <a href="http://www.linkwithin.com/" target="_blank">http://www.linkwithin.com</a> Enter your blogger Details : <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRHxUCNBZ0ZN12egk_dvFTnUF1ZdyfpMKP7jkMZrBOvUmWI1KJNBq3dU-FXdtuSDTVGk5S_mUgwB_UyOUohWU7ili_TnjrfLD6HPUhT5M4hS2myeBm_Hm-M5yx7b-lMcTfbA8N8YSutMy/s1600/Step1-Metro-UI-related-posts-with-+thumbnails.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRHxUCNBZ0ZN12egk_dvFTnUF1ZdyfpMKP7jkMZrBOvUmWI1KJNBq3dU-FXdtuSDTVGk5S_mUgwB_UyOUohWU7ili_TnjrfLD6HPUhT5M4hS2myeBm_Hm-M5yx7b-lMcTfbA8N8YSutMy/s1600/Step1-Metro-UI-related-posts-with-+thumbnails.jpg" /></a></div> <blockquote class="tr_bq"><blockquote class="tr_bq">You may change Platform for blogger, wordpress (Self-Hosted),Type pad & others </blockquote></blockquote>Click on Get Widget Next Window <div class="step">1. Click Install Widget to open Blogger in a new window, and follow the steps below in that window. Login to your Blogger account if necessary. </div> <div class="step">2. Select a blog if you have more than one, then click on Add Widget.</div><div class="step"> </div><div style="text-align: center;"><img class="box" src="http://www.linkwithin.com/blogger_step_1.png" /></div> <div class="step">3. (Optional) For better performance, Drag and Drop the LinkWithin box under the "Blog Posts" box.</div><div class="step"> </div><div style="text-align: center;"><img class="box" src="http://www.linkwithin.com/blogger_step_relocate.png" /></div> <div class="step">4. Click on Save.</div><div style="text-align: center;"><img class="box" src="http://www.linkwithin.com/blogger_step_save.png" /></div> <div class="step">And you're done! The widget should now appear on your blog.</div><div class="step"><a href="http://www.linkwithin.com/install?platform=blogger&site_id=1738977&url=http%3A//smartlog3g.blogspot.com/&email=smartlog3g%40gmail.com#"></a> </div> <a href="http://www.linkwithin.com/" target="_blank">Source VIA</a> _________________________________________________________________</div></div><div id="left"></div><div id="left"> </div><div id="left"> </div></div>

Add Related Posts With Thumbnails In Metro UI Blogger Template

Add Related Posts With Thumbnails In Metro UI Blogger Template Metro UI is an innovative Windows 8 Style Blogger Template. This theme has a...

Add Attractive Stylish Related Post With Thumb For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Add Attractive Stylish Related Post With Thumbnails Widget For Blogger</div> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidH1sIe5yxP3tayaoy2E87tewfjr3iQqhjYuml1mx_hlKiAUfRxa_xPz1Ro5AakWgUgvEojxXf5ZzPpan5R5Rt_0TD6AgJNAZnKcoce9D_yrfUhKY3WQVBIVJjE3hlMyakhxAsqykN7mTy/s1600/Related-Posts-With-Thumbnails-Widget-For-Blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidH1sIe5yxP3tayaoy2E87tewfjr3iQqhjYuml1mx_hlKiAUfRxa_xPz1Ro5AakWgUgvEojxXf5ZzPpan5R5Rt_0TD6AgJNAZnKcoce9D_yrfUhKY3WQVBIVJjE3hlMyakhxAsqykN7mTy/s1600/Related-Posts-With-Thumbnails-Widget-For-Blogspot.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFHmsq_r7oL2GFvWnhiPRPin6gVi5-FhknDnLIF4iKqFTPoR8a0iXk44Spo2c7tXYmoWh5Px9MHjuQUPK0fIiPlww10bP1tQEHIjZWxPVEFiRos64lKfC0CWFQHPNcUPWN5r0O6RKKBc4/s1600/Related-Posts-With-Thumbnails-Widget-For-Blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> </a></div> <div style="text-align: center;">Matched With Metro UI Style Blogger Template. Smartlog Team Also Using it...</div><div style="text-align: left;">Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails as shown in the image above. Now without any more preface, here we proceed right to the code afters seeing the awesome features below.</div><div style="text-align: left;"> </div><h2>Features:</h2>1.) Simple And Stylish Code. 2.) Quick To Load And Easy To Navigate. 3.) One Click Links. 4.) Will DecreaseYour Bounce Rate. 5.) Much Better For SEO. 6.) It Will Be Displayed Only On Post Pages. 7.) Awesome And Professional Look. 8.) Will Also Increase Your PageViews. 9.) Full Customizable CSS. 10.) You Can Also Increase Related Posts Counts. <h2>How To Add In Blogspot?</h2>1.) Go To Your <a href="http://www.blogger.com/" rel="" target="_blank">www.blogger.com</a> 2.) Open Your Desire Blog. 3.) Go To "Template". 4.) Click "Edit HTML". 5.) Now "Expand Widget Template". 6.) Click "CTRL+F" And Search For </head> 7.) Now Copy The Below Code And Paste It Before It. <blockquote class="tr_bq"><div id="execodediv2"> <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts {float:center;text-transform:none;height:215px;background-color: #f4f4f4; box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset; padding:5px;border: 1px solid black;  } #related-posts h2{padding: 10px 15px; font-family: Helvetica, Arial; line-height: 1.1em; font-weight: bold; text-shadow: 0 1px 0 white; font-size: 20px; letter-spacing: -1px;color:#333; background: #E4E4E4; border: 1px solid white;width:auto;box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset;} #related-posts a{color:#D80556;} #related-posts a:hover {background-color: #D80556;color: white; font-weight: bold; text-decoration: initial;} </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8B9ojO_CaVn1hrbdzT7WwNRwQStBWh3OT4BGtIAFxiF4vO1OE-1H8ZGKkaNqWkP20Lhbm31yHBC18J-a38UP6Zy5K8OqmGvbfdBNHIZOwoyRQO9gNG5dZoEclG1-AXGaYaMO-RPYqruA/s400/noimage.png"; var maxresults=6; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/> </b:if> </div></blockquote><div style="text-align: left;"> 8.) Again Click "CTRL+F" And Search For <blockquote class="tr_bq"><div id="execodediv0"><div class='post-footer-line post-footer-line-2'></div> <div class='post-footer-line post-footer-line-3'></div> </div> </div></div><div id="execodediv0"></div></blockquote><div id="execodediv0"><blockquote>9.) Now Copy The Below Code And Paste After It. <div id="execodediv1"> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script> </div> <div style='clear:both'/> </b:if> </div></blockquote><div id="execodediv1"></div><div id="execodediv1">10.) Save And Done. <h2>Customization:</h2>1.) Change 6 With Your Desire Related Post Count. 2.) You Can Change Related Posts With Your Desire Text. 3.) If Your Post Have No Image, Then A Default Image Will Be Shown, To Change Default Image, Just Change https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8B9ojO_CaVn1hrbdzT7WwNRwQStBWh3OT4BGtIAFxiF4vO1OE-1H8ZGKkaNqWkP20Lhbm31yHBC18J-a38UP6Zy5K8OqmGvbfdBNHIZOwoyRQO9gNG5dZoEclG1-AXGaYaMO-RPYqruA/s400/noimage.png With Your Image URL. 4.) To Change Color, Size, Fonts, Padding Feel Free To Change CSS Code. 5.) Save And Done. </div> </div></div><div style="text-align: left;"> _____________________________________________________________ IF You Want 3rd Party Post Related + Thumbnails without know coding check out this post   </div></div>

Add Attractive Stylish Related Post With Thumb For Blogger

Add Attractive Stylish Related Post With Thumbnails Widget For Blogger Matched With Metro UI Style Blogger Template. Smartlog Team Also Usin...

Free Metro Icon Set For Metro UI Blogger Template

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Free Metro Icon Set For Metro UI Blogger Template  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZKElH-GBcz1KHRWqKeox9csGGahe5MtTA-id1rUXlGm3tpKy6x85W4FJRBR6lw-gPYgpoYpDMB0qRFBSYiL8MUezQz7kdt9pHsus50UHi_PnbvGXOdEHZEJr4U0SzkeA2E7xQciXBOH-S/s1600/MetroUi-Template-blogspot-metro.icons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZKElH-GBcz1KHRWqKeox9csGGahe5MtTA-id1rUXlGm3tpKy6x85W4FJRBR6lw-gPYgpoYpDMB0qRFBSYiL8MUezQz7kdt9pHsus50UHi_PnbvGXOdEHZEJr4U0SzkeA2E7xQciXBOH-S/s1600/MetroUi-Template-blogspot-metro.icons.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-IP4hYNvbdXoHYwPXRtak3afbLu4lUC_MW_uLOsiZFW7I4Zze3vCELsvyHtdouE0oPoK2o0Qmqjedb0bAQgERaAnIG7kmdafHqqtLKytd-QbHdBG9tvkcyK5DiBUIbfuGmgTKS3jantaH/s1600/MetroUI-Blogger-Template-Iconset-free-metro.descr.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-IP4hYNvbdXoHYwPXRtak3afbLu4lUC_MW_uLOsiZFW7I4Zze3vCELsvyHtdouE0oPoK2o0Qmqjedb0bAQgERaAnIG7kmdafHqqtLKytd-QbHdBG9tvkcyK5DiBUIbfuGmgTKS3jantaH/s400/MetroUI-Blogger-Template-Iconset-free-metro.descr.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="http://metro.windowswiki.info/mi/metro.icons.zip" target="_blank"><img border="0" height="71" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSs0iKEb0A0pK11llEoUQL261dnz8KO6VLJsloBta-IfPcuSvfdwAQbSe8PXWKMavzj2ZjJM3AdPBDSq7aVx_FES7-zGgc-2UbAw_6hgA9uWeOGyXx-dAroV51dh0iuQuuoowLKSLM9tLV/s400/Donwlaod_MetroUi_template_icons_set_metroui8-themes-get.png" width="400" /></a><a href="http://www.blogger.com/"></a></div><div class="separator" style="clear: both; text-align: center;">You Can Resize Them Into 60x60 for Metro UI Blogger Template</div><div class="separator" style="clear: both; text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"> </div><div style="text-align: center;"> </div></div>

Free Metro Icon Set For Metro UI Blogger Template

Free Metro Icon Set For Metro UI Blogger Template You Can Resize Them Into 60x60 for Metro UI Blogger Template

Create A Metro Style Cloud Label Or Categories List For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">Create A Metro Style Cloud Label Or Categories List For Blogger <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh07sEP_o5qnn6RZuxxVchPKUWD5cNct72nUsn79WzjeOcJ4K1amjn7NRXMPZaXnHytYGKQJcb_Ut59GBPMjlOvJEd52m8xv_Bl0gq5R6EontJP8jDDss0BWmL-xFDZ3zlFMWIwJQD4H3M1/s1600/Metro-UI-Blogger-Labels-widget-.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh07sEP_o5qnn6RZuxxVchPKUWD5cNct72nUsn79WzjeOcJ4K1amjn7NRXMPZaXnHytYGKQJcb_Ut59GBPMjlOvJEd52m8xv_Bl0gq5R6EontJP8jDDss0BWmL-xFDZ3zlFMWIwJQD4H3M1/s320/Metro-UI-Blogger-Labels-widget-.jpg" width="320" /></a></div> <div class="separator" style="clear: both; text-align: center;"></div> <div style="text-align: center;">Perfect Cloud Label Style For Metro UI Blogger Template </div><div style="text-align: center;"> </div><div style="text-align: center;">This tips help you custom your Label Cloud or Categories into a Metro UI Style Label same as Windows 8 Only for Blogger & specially for Metro UI Blogger Template. For Demo Check Side bar of my Home Page.</div><div style="text-align: center;"> </div><div style="text-align: left;">1. From your Blogger dashboard, go to Design and then Template. 2. Choose "Edit HTML" then click on "Proceed". 3. Combine Ctrl+F, look for ]]></b:skin> in your blog’s template code. 4. Copy/paste the following code below right above it. </div><div style="text-align: center;"> </div><div style="text-align: left;"><blockquote class="tr_bq"> /*--- TricksHunt.com Custom Label Cloud --- */ .Label a{ padding-left:10px; background:#0090D5; padding:0 10px; color:#fff!important; height:26px; line-height:26px; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:1px; margin-top:1px; font-size:13px; } .Label a:hover{ background:#69625A; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: px; }  </blockquote></div><div style="text-align: center;"> </div>TIP: To change the label color, simply replace #0090D5 with the corresponding HEX Code Color Generator of your preferred color. To change the color of the label upon mouseover or on hover, replace #69625A. You can also change 13px t adjust the font size. <ul><li>Save your template.</li></ul><ul><li>Next, go to Layout, click on the Edit button of your Labels gadget.</li></ul>NOTE: If you currently have no Labels gadget then just click on an Add a Gadget button and then scroll down the list of gadgets and select Label. <ul><li>Now follow these Label gadget settings:</li></ul>Title = Labels Show = All Labels Sorting = Alphabetically Display = Cloud <ul><li>Uncheck Show number of posts per label.</li></ul><ul><li>Save your gadget and you’re done.</li></ul>View your blog to see the effect. Enjoy and have a good day! <div style="text-align: center;"> </div></div>

Create A Metro Style Cloud Label Or Categories List For Blogger

Create A Metro Style Cloud Label Or Categories List For Blogger Perfect Cloud Label Style For Metro UI Blogger Template This tips help you c...

Metro UI Icon Set - 725 Icons For Websites And Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Metro UI Icon Set - 725 Icons For Websites & Blogger</div><div style="text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqs-7cS3ilUQNKlgOUFnMr3dWkXxjuS7OMo5ufgksfDKooKQVaO_UWAboL6b8imOy6diemXuXPfud8p2QZ90967H5p2BIUvyYDEiSqFI70MCQdpsotdzOdxoBl8-wj4wlPGrU8in-Y3JQ1/s1600/metro_ui_icon_set___725_icons_by_smartlog3g.blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqs-7cS3ilUQNKlgOUFnMr3dWkXxjuS7OMo5ufgksfDKooKQVaO_UWAboL6b8imOy6diemXuXPfud8p2QZ90967H5p2BIUvyYDEiSqFI70MCQdpsotdzOdxoBl8-wj4wlPGrU8in-Y3JQ1/s400/metro_ui_icon_set___725_icons_by_smartlog3g.blogspot.png" width="400" /></a></div><div style="text-align: center;"> </div>Greatest realease ever! Here is the release of my Windows 8 Tiled Metro UI inspired icon set! THIS SET CURRENTLY INCLUDES 725 512x512 Dock Icons for today's top applications, internet browsers, Operating Systems/system icons, manufacturers, 1-5 alternative icons for the top websites, AND MORE! **THIS SET ALSO INCLUDES ALL ICONS AS REFLECTIVE AS WELL IF YOU DON'T HAVE/USE THE MAC DOCK OR XWINDOWS DOCK! **ALSO INCLUDES ALL ICONS AS 256x256 .ICO FORMAT!!! <div style="text-align: center;"><a href="http://fc08.deviantart.net/fs70/f/2013/059/7/1/metro_ui_icon_set___725_icons_by_dakirby309-d4n4w3q.zip" target="_blank">Direct Link </a><a href="http://fc08.deviantart.net/fs70/f/2013/059/7/1/metro_ui_icon_set___725_icons_by_dakirby309-d4n4w3q.zip" target="_blank">Download</a> </div> </div>

Metro UI Icon Set - 725 Icons For Websites And Blogger

Metro UI Icon Set - 725 Icons For Websites & Blogger Greatest realease ever! Here is the release of my Windows 8 Tiled Metro UI inspired...

Social Profile Widget for Blogger: Metro UI v3.0

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Social Profile Widget for Blogger: Metro UI v3.0 </div><div style="text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Hb2DBHUMZmeyWUwT5wq1N1GtHUZSoVq6SQXezVbko15Qzfc9K1lsTVJvDRStCVoXbiychjwaHdf8OF9zkGU6T5zzwiDfKfpvskJUsoSGG2bj-ofJvcTndYs8dmcbm4Io8LCQh303RYrd/s1600/metro-ui-3.0-social-profile-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Hb2DBHUMZmeyWUwT5wq1N1GtHUZSoVq6SQXezVbko15Qzfc9K1lsTVJvDRStCVoXbiychjwaHdf8OF9zkGU6T5zzwiDfKfpvskJUsoSGG2bj-ofJvcTndYs8dmcbm4Io8LCQh303RYrd/s1600/metro-ui-3.0-social-profile-widget.png" /></a></div><div style="text-align: center;"></div><h1 class="post-title entry-title" itemprop="name" style="text-align: center;">Metro UI Social Profile Widget v3.0</h1> <h3> </h3><h3></h3><h3>How to Install Social Profile Gadget for Blogger: Metro UI V3.0</h3>It's very easy to install this gadget/widget to your Blogger, Wordpress or other blogging service where html and css style sheets are accepted in widget or template. You only have to add a HTML/Javascript Gadget and Save the following code in that. Note: Do not forget to change the following highlighted values: Facebook page/user name, Twitter username, Google+ user-id, Pinterest username, Linkedin profile url, Youtube username or url, RSS/Feedburner feed url. Before claiming this work as own, first cross check the entire code and widget effects. <div style="border: 1px solid #ccc; font: 16px/26px Georgia, Garamond, Serif; height: 600px; overflow: auto; width: 700px;"> <pre><pre><div class="metro-social"> <li><a class="fb" href="http://www.facebook.com/s2free"></a></li> <li><a class="tw" href="http://twitter.com/s2free"></a></li> <li><a class="gp" href="https://plus.google.com/127257327507123455"></a></li> <li><a class="pi" href="http://pinterest.com/s2free"></a></li> <li><a class="in" href="https://www.linkedin.com/pk/s2free"></a></li> <li><a class="yt" href="http://www.youtube.com/s2free"></a></li> <li><a class="fd" href="http://feeds.feedburner.com/s2free"></a></li> </div> <style> /*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs Web link to gadget code: http://www.techprevue.com/2013/02/social-profile-widget-metro-style.html Distributed under license CC BY-NC-ND 3.0 INT Please keep license information intact while using this widget*/ .metro-social{width:285px} .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} .metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block} .metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px} .metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px} .metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px} .metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px} .metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px} .metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px} .metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px} .metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3} .metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5} .metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38} .metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532} .metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd} .metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41} .metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c} </style></pre></pre></div> I hope you'll enjoy it.Social Profile Widget for Blogger: Metro UI v3.0  <h3> </h3></div>

Social Profile Widget for Blogger: Metro UI v3.0

Social Profile Widget for Blogger: Metro UI v3.0 Metro UI Social Profile Widget v3.0 How to Install Social Profile Gadget for Blogger: Me...

Metro UI Classic Responsive Blogger Template - Windows 8 Style

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"> Metro UI Classic Responsive Blogger Template </div> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiANVqzcP11weVU_2e3UVjst_kdVBLjHoWcpvImgdw0qz270J3ok6k5AGCh76u82SOBMHJtGdicbEtJXr8HGfyq0jNLZeeQOgAvNLwBis-lT0AqpWySwXs9Igwy2KEFPDBO4CYsG8MFJxBx/s1600/Metro-Classic-Responsive-Blogger-Template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiANVqzcP11weVU_2e3UVjst_kdVBLjHoWcpvImgdw0qz270J3ok6k5AGCh76u82SOBMHJtGdicbEtJXr8HGfyq0jNLZeeQOgAvNLwBis-lT0AqpWySwXs9Igwy2KEFPDBO4CYsG8MFJxBx/s1600/Metro-Classic-Responsive-Blogger-Template.png" /></a></div> Metro Classic is an enhanced version of our previous Metro UI Blogger Template. Metro Classic is an old-school Windows 8 style Responsive Blogger template that is jam-packed with some tremendous features. This theme is ideal for blogging niche like technology, gadgets, reviews, news, personal, etc. it is also compatible with almost all leading browsers like Chrome, Firefox and internet explorer. The color scheme of this template is also adorable and eye-friendly. On the top of that, you get this template for absolutely free. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFlpt7DnGUGX0BEB54AVAJ31asECyvFJi7tB0B6QZ-TRggArEYZNsjB-yzEq7_Vg-Sw9ZVrWWcLuorYtvFHRuc_qoBy4LjA5z1miilhIKMLf93yytaiBvXW9j3zI4x-0yS3uqsyhlKzRzJ/s1600/Metro-Classic-Responsive-Blogger-Templatev3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFlpt7DnGUGX0BEB54AVAJ31asECyvFJi7tB0B6QZ-TRggArEYZNsjB-yzEq7_Vg-Sw9ZVrWWcLuorYtvFHRuc_qoBy4LjA5z1miilhIKMLf93yytaiBvXW9j3zI4x-0yS3uqsyhlKzRzJ/s320/Metro-Classic-Responsive-Blogger-Templatev3.png" width="320" /></a></div> <h3 style="text-align: justify;">Features of Metro Classic Blogger Template:</h3><ol style="text-align: left;"><li style="text-align: justify;">Windows 8 Look: As we have said before, we have tried to make this theme much a like Microsoft’s Windows 8. The interface of the blog is not a replica but its outlook is like windows 8. To sum up, we have tried to give it a slight touch of a blog with a combination of metro style. </li><div style="text-align: justify;"></div><li style="text-align: justify;">Left Full Height Sidebar: Unlike other themes, we have added a full-height sidebar. It does not break and keeps on continuing till you reach the end of the web page. This sidebar gives your site a stunning touch. </li><div style="text-align: justify;"></div><li style="text-align: justify;">Responsive Theme: This theme is highly responsive and works absolute perfectly on monitors, LCDs of different dimension. You can reduce the size of your browse and can see the responsiveness yourself. </li> <li style="text-align: justify;">SEO-Friendly: This template is highly optimized for on-page SEO. We have used different heading tags for posts so that you can maximize the opportunity of getting your content on the top of the Search engine ranking. </li> <li style="text-align: justify;">Featured Area: We have also incorporated a featured area on the homepage, which would help you to display some of the prominent hits. However, it is not automatic you have to customize it yourself.</li></ol><div style="text-align: justify;">More Features: Magazine Style, greenish color scheme, threaded commenting system,  2 column template and much more</div><div style="text-align: justify;"></div><div style="text-align: center;"><a class="hb-buttons downloads" href="http://templateism.com/blogger-templates/Metro-Classic.zip" rel="nofollow" target="_blank">Download</a> <a class="hb-buttons" href="http://www.templateism.com/p/preview.html?url=http://metroclassic.blogspot.com/" rel="" target="_blank">Preview</a>  </div> </div>

Metro UI Classic Responsive Blogger Template - Windows 8 Style

Metro UI Classic Responsive Blogger Template Metro Classic is an enhanced version of our previous Metro UI Blogger Template. Metro Classic...

Add Stylish Metro UI Premium Navigation Menu in Blogger Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Stylish Metro UI Premium Navigation Menu in Blogger </div><div style="text-align: left;"> </div><div style="text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglKgDD89Jqp4t85cT6y83Z-iWI0SRIBMUTVylOc98JYeNSxeiYiH51gD_ZBxLpRceupuetiqYJjS5xIftS5wq7bJYB_x9x0E0GcN1IGhJKKzpYalhG7ODlfCimbQAS7LEiF4A2e_fVVhsm/s1600/Stylish-Win-8-style-Metro-UI-Navigation-Menu-for-Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglKgDD89Jqp4t85cT6y83Z-iWI0SRIBMUTVylOc98JYeNSxeiYiH51gD_ZBxLpRceupuetiqYJjS5xIftS5wq7bJYB_x9x0E0GcN1IGhJKKzpYalhG7ODlfCimbQAS7LEiF4A2e_fVVhsm/s1600/Stylish-Win-8-style-Metro-UI-Navigation-Menu-for-Blogger.png" /></a></div></div><div style="text-align: left;"> Are you bored with your website’s navigation menu? Does anyone want to revamp his unappealing navigation menu into Windows 8 Style Metro Menu? Navigation menu is one of the core elements of a website because without a user-friendly Menu visitors can’t search the content in depth. In this situation, an ugly Navigation Menu could act a piece of garbage. Therefore, it is essential to have an elegantly style Navigation Menu that attracts a person like a bee to a honey. To provide more power to Blogger users, we have created a new windows 8 look like Metro UI Navigation menu for blogger enabled websites. It has tons of features which we will discuss in today’s article.  <h4 style="text-align: left;"> What Is Metro UI Menu </h4>  If anyone has experience the interface of Microsoft Windows 8, or the new range of Windows Smart phones, then this METRO UI menu is not a new thing for them. This Menu is inspired from the navigation interface of Windows 8. If anyone is still chaotic about it, then he can check out the following screenshot.  <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.2px; text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5a5zGvVm0QgV9bhcXWLxquG0jPgHz7MzkiH6Mx6ZNeK9I9an5Lobs2cTBxOOLboNzRzzw-_NbUwQnxmOAJx3K56TnsLrrQ0yeb3AalyuddZsJU7RIDSzx0FUE0YEtGZA-GLvnQ_HXEow/s1600/METRO.png" style="color: #0084ce; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: initial;"><img border="0" height="119" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5a5zGvVm0QgV9bhcXWLxquG0jPgHz7MzkiH6Mx6ZNeK9I9an5Lobs2cTBxOOLboNzRzzw-_NbUwQnxmOAJx3K56TnsLrrQ0yeb3AalyuddZsJU7RIDSzx0FUE0YEtGZA-GLvnQ_HXEow/s640/METRO.png" style="border-width: 0px; list-style: none; margin: 0px; outline: none; padding: 10px;" width="540" /></a></div><h4>Where The Metro UI Menu Would Appear In Blogger?  </h4></div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.2px; text-align: justify;">It depends on a person that where he wants to utilize this Menu because it is so flexible that it can take shape of any theme or template. However, it would be ideal if anyone places this menu at the top of his website by doing that, visitors can easily access it without facing any hesitation whatsoever. We have attached an interactive Metro menu below so don’t hesitate to try it. </div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.2px; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE9Y5cFIDGqC7g_uxGCmouVRp4EWYzRG3OBTTuBAXX9VWb-mpeQV6mdHhxymc1CVCtOVfS5iJ97GTNlluWJ2i1RXGCcFOCZXAEy772tb7PO3GWRJqgD96e3zQNCDtqh6xHlbvE-Bw2vo/s1600/Untitled.gif" style="color: #0084ce; list-style: none; margin: 0px 1em; outline: none; padding: 0px; text-decoration: initial;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbE9Y5cFIDGqC7g_uxGCmouVRp4EWYzRG3OBTTuBAXX9VWb-mpeQV6mdHhxymc1CVCtOVfS5iJ97GTNlluWJ2i1RXGCcFOCZXAEy772tb7PO3GWRJqgD96e3zQNCDtqh6xHlbvE-Bw2vo/s1600/Untitled.gif" style="border-width: 0px; list-style: none outside none; margin: 0px; outline: medium none; padding: 10px;" /></a> </div><h4>Step To Create Windows 8 Like Metro UI Navigation Menu In Blogger.</h4></div><div style="text-align: left;">The steps mentioned below are ideal for those bloggers who have less knowledge about HTML coding. Following instructions are extremely straightforward so anyone can easily apply them. Follow following instructions correctly. <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"></div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> </div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">Step#1: Adding CSS StyleSheet:</div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"></div><ul style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; list-style: none; margin: 0px; outline: none; padding: 0px;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA4Fbjt6evamh6CXnalty8nV6nf63-cKnkF8VfSv9i7pFd-8hq8hCMtEdegd7YXTTmVcmjxldiDM_pIF4skptQZ8eFxRQulIXQUAKMl9y6Y5_TiJOnyyXI7dYFHQyl-4gApS-KTRVOd0c/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.8em; list-style: none; margin: 0.3em 0px; outline: none; padding: 0px 0px 0.8em 20px; text-align: justify;">Go to Blogger.com >> Template.</li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA4Fbjt6evamh6CXnalty8nV6nf63-cKnkF8VfSv9i7pFd-8hq8hCMtEdegd7YXTTmVcmjxldiDM_pIF4skptQZ8eFxRQulIXQUAKMl9y6Y5_TiJOnyyXI7dYFHQyl-4gApS-KTRVOd0c/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.8em; list-style: none; margin: 0.3em 0px; outline: none; padding: 0px 0px 0.8em 20px; text-align: justify;">Select Edit HTML >> Proceed.</li><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA4Fbjt6evamh6CXnalty8nV6nf63-cKnkF8VfSv9i7pFd-8hq8hCMtEdegd7YXTTmVcmjxldiDM_pIF4skptQZ8eFxRQulIXQUAKMl9y6Y5_TiJOnyyXI7dYFHQyl-4gApS-KTRVOd0c/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.8em; list-style: none; margin: 0.3em 0px; outline: none; padding: 0px 0px 0.8em 20px; text-align: justify;">Now within the template search for ]]></b:skin> tag and just above it paste the following CSS Coding. Once, everything is done Save the Template by pressing “Save Template” Button and proceeds to the next step. </li></ul><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"></div><blockquote class="tr_bq">/*===MBL METRO UI Menu==*/ body { font-family:sans-serif; } a { text-decoration:none; } .mblmetromenu { width:960px; margin:auto; } @media screen and (max-width:960px) { .mblmetromenu { width:100%; } } /* MblMetroMenu */ .MblMetroMenu { position:relative; } .om-nav { position:absolute; width:100%; z-index:999; display:none; } .om-ctrlbar { width:100%; height:48px; } .om-ctrlitems { margin:auto; padding:0px; height:48px; display:inline-block; text-align:center; } .om-ctrlitem { height:48px; width:48px; display:none; cursor:pointer; float:left; opacity:0.5; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; filter: alpha(opacity=50) !important; /* For IE8 and earlier */ } .om-ctrlitem:hover { opacity:0.8; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important; filter: alpha(opacity=80) !important; /* For IE8 and earlier */ } .om-activectrlitem { opacity:1 !important; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; filter: alpha(opacity=100) !important; /* For IE8 and earlier */ } .om-controlitems { width:960px; margin:auto; } .om-controlitem { height:48px; cursor:pointer; } .om-closenav { float:left; } .om-movenext { float:right; } .om-itemholder { margin:auto; padding:20px 0px; } @media screen and (max-width:960px) { .om-closenav { position:absolute; z-index:9999; left:0; top:0; } .om-movenext { position:absolute; z-index:9999; right:0; top:0; } .om-controlitems { width:100%; } .om-itemholder { width:100%; } } .om-centerblock { display:inline-block; } .om-item { display:none; } .om-showitem { margin:5px; float:left; display:none; } /* END MblMetroMenu */ /* TILE BUTTONS */ /* Standar Buttons */ .tile-bt { text-align:center; cursor:pointer; width:90px; height:90px; } .tile-bt a { display:block; padding-top:12px; text-decoration: !important; } .tile-bt img { margin:0 auto 0 auto; padding-bottom:5px; height:48px; width:48px; position:relative; display:block; } .tile-bt span { font-size:12px; padding-bottom:10px; display:block; } .tile-bt:active { opacity:0.5; } /* End Standard Buttons */ /* Large Buttons */ .tile-bt-large { width:190px; height:90px; line-height:90px; text-align:center; cursor:pointer; } .tile-bt-large a { display:block; text-decoration: !important; } .tile-bt-large img { vertical-align: middle; margin:auto; padding:0px; position:relative; width:48px; height:48px; } .tile-bt-large span { vertical-align: middle; display:inline; } .tile-bt-large:active { opacity:0.5; } /* End Large Buttons */ /* Extralarge Buttons */ .tile-bt-extralarge { text-align:center; cursor:pointer; width:190px; height:190px; } .tile-bt-extralarge a { display:block; padding-top:52px; text-decoration: !important; } .tile-bt-extralarge img { margin:0 auto 0 auto; padding-bottom:22px; height:80px; width:80px; position:relative; display:block; } .tile-bt-extralarge span { font-size:14px; padding-bottom:20px; display:block; } .tile-bt-extralarge:active { opacity:0.5; } /* End Extralarge Buttons */ /* END TILE BUTTONS */ /* SHADOW LIST */ .shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red { /*display:inline-block;*/ } .shadow-white:hover { box-shadow:0px 0px 6px 3px #fff; -webkit-box-shadow:0px 0px 6px 3px #fff; -moz-box-shadow:0px 0px 6px 3px #fff; -o-box-shadow:0px 0px 6px 3px #fff; -ms-box-shadow:0px 0px 6px 3px #fff; } .shadow-blue:hover { box-shadow:0px 0px 6px 3px #38D1F7; -webkit-box-shadow:0px 0px 6px 3px #38D1F7; -moz-box-shadow:0px 0px 6px 3px #38D1F7; -o-box-shadow:0px 0px 6px 3px #38D1F7; -ms-box-shadow:0px 0px 6px 3px #38D1F7; } .shadow-green:hover { box-shadow:0px 0px 6px 3px #AACA37; -webkit-box-shadow:0px 0px 6px 3px #AACA37; -moz-box-shadow:0px 0px 6px 3px #AACA37; -o-box-shadow:0px 0px 6px 3px #AACA37; -ms-box-shadow:0px 0px 6px 3px #AACA37; } .shadow-red:hover { box-shadow:0px 0px 6px 3px #E81750; -webkit-box-shadow:0px 0px 6px 3px #E81750; -moz-box-shadow:0px 0px 6px 3px #E81750; -o-box-shadow:0px 0px 6px 3px #E81750; -ms-box-shadow:0px 0px 6px 3px #E81750; } .shadow-black:hover { box-shadow:0px 0px 6px 3px #444; -webkit-box-shadow:0px 0px 6px 3px #444; -moz-box-shadow:0px 0px 6px 3px #444; -o-box-shadow:0px 0px 6px 3px #444; -ms-box-shadow:0px 0px 6px 3px #444; } /* END SHADOW LIST */ /* BACKGROUND LIST */ /* Solid Colors */ .solid-blue { background:#00BBE2; } .solid-blue-2 { background:#2C84EE; } .solid-darkblue { background:#044E94; } .solid-violetred { background:#781766; } .solid-red { background:#E51400;} .solid-red-2 { background:#E81750; } .solid-pink { background:#FF539B; } .solid-purple { background:#D02090; } .solid-orange { background:#FB8F02; } .solid-orange-2 { background:#FF6600; } .solid-orange-3 { background:#DD5F37; } .solid-coral { background:#CD5B45; } .solid-green { background:#67B239; } .solid-green-2 {background:#96BF01; } .solid-darkgreen { background:#016C38; } .solid-olive { background:#999900} .solid-grass { background:#CDCD00; } .solid-darkred { background:#5F0000; } .solid-gold { background:#FEE9AE; } .solid-yellow { background:#F7D100; } .solid-black { background:#000; } .solid-smoke { background:#F5F5F5; } /* End Solid Colors */ /* MISC */ .clearspace { clear: both; } .floatleft { float:left; } .floatright { float:right; } .none { display: none !important; width:0px !important; } .light-text { color:#fff; } .dark-text { color:#1e1e1e; } .gradient { background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */ background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */ } .margin-5 { margin:5px; }</blockquote><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> </div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">Step#2: Adding METRO Menu in Blogger:</div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"></div><ul style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; list-style: none; margin: 0px; outline: none; padding: 0px;"><li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA4Fbjt6evamh6CXnalty8nV6nf63-cKnkF8VfSv9i7pFd-8hq8hCMtEdegd7YXTTmVcmjxldiDM_pIF4skptQZ8eFxRQulIXQUAKMl9y6Y5_TiJOnyyXI7dYFHQyl-4gApS-KTRVOd0c/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.8em; list-style: none; margin: 0.3em 0px; outline: none; padding: 0px 0px 0.8em 20px; text-align: justify;">Now it entirely depends on a person where he wants to place this menu. The ideal place of adding it would be just under the header. Therefore, paste the following coding anywhere you want to see this Menu on your site.</li></ul><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><blockquote class="tr_bq"> <div class="mblmetromenu"> <div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGyfGrlMini3wpdtZXgmgg9NQY_j4Txl2-a4ogHeNjO03krL_GEmDgyb7AcJHhgo_o1M_WrTZwqWR41RLNy9SlOIIhyphenhyphenoaJRYU5xYE4V_X73lyeoHBDm972GGuvDBjhYwXU2ttKuyRQgNQ/s1600/home.png" alt="" /> Homepage </a> </div>   <div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqF0w0fdYApihMo9juxghHWmM3NESK73fH4N4z1M-f33EscHbc74perZTKF_nSQ55HX6O_T0p2hW7-zTjdT2jNndGFODElQxMDq71_11o3z_CDb8OU3DFNc6Yj9nm7yYor-YWkAzMcdoc/s1600/messanger.png" alt="" /> About US </a> </div>   <div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSMOzaT_BVPNjbGpjddbwkEs4pr2pznDZr-zTQMTCr4WV6McZgiCs9CVYvXdB5Rqi-Z93KPS4xgcgxJmkxPzI_BOt9zMm4JAdhpCQrZGGWCXruyP0kGak_1YBqy8K6F-dhmx4XQmQPIjk/s1600/rss.png" alt="" /> Rss Feeds </a> </div>    <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkft6G4hNUEfh-Eercj7LyOrv5_mJVLHM7Wyn-WGiWP4PRntGLP7PobyeaK0zgKbUbbH3YxjgC51BELMzenGUtBOMCIJH4becsnWIQFcScgCo0fP0XqHzC8eI5FZ-FcpydSzI1Grj-Plg/s1600/search.png" alt="" /> Search </a> </div>      <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxReB7wvpC3HSCpG3dtgzdTgXmVBOrN5tuJ3JQspy5RgBKCPci4-KEvcQPps713Nl6ebZbQpA9g8UiKBBqZf24-i5eWcClwQn8y7mkC0UgTAmuHfITbRqb4RzERr58kHRf_7hjA0X79v8/s1600/mail.png" alt="" /> Contact US </a> </div>     <div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOw3kA0cuNqynm8_rSAak1DS4WoJu5rgxom3z5wxQ9TQblZ0H-lLpeI2zSdJOPh6nzeacczfWnLouxLqvhk3Q_UUBQwz4qs4kdBEaXiVflbgAG0oviEZIdjaT7tn9xBsBJaNDwRi_DSVQ/s1600/help.pn" alt="" />  Get HELP </a>  </div>     <div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaTF89JEKTYjTRHk-yjN2HA9dZ56riiH3yxXl-hkwfms1mpxYeJ3IwyPB9kmXMZDt9ssfywz4-d10wNho2Jm45acRcXqrb23qd1WYlgsF2O4kzeO21_OiKL1QUhb59X7rhTHOk7NTJ-qM/s1600/youtbe.png" alt="" /> YouTube </a> </div>     <div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfPgvMc4gQiuust3ITdLa4C4ZbTbBt_Wp4vXTmLBzMbXluQziePg1VWfgi5nUaflBP68Yy0uuDdNVNNoqDkAX3KNasJ525ssm2XiLu2xND1ORPTZwvtUe0VureV8R_NnQ6n3gq7ZYeBg/s1600/face.png" alt="" /> Facebook </a> </div>     <div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2zkA0xyRwluLjEpv_HGSpMZa09edKhYIwmA6KBq7JrG8RBtS2tbhCv0t5o0HTsW237d8mq-JzP_Nin7OFQgJUCcKmO7j9R2T-38N-Yp_R1ADTelIF-_o_IxMUsC4k4kUpmw0Zf7EqZQs/s1600/photo.png" alt="" /> Photos </a> </div>     <div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu"> <a href="#" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidDFATpbROK65FQ1l1J6lT-sfaf-6wlDJTRJYP4xBB-pSDbieC5MpKcsnI8opk8a2wLG9W0KL0EB941J6jcDgqdu6jbi82zQUWtQMzVs5SHJQ1VGjyW9ofe3xyQUocdSrFp3ZOpkFcn6M/s1600/music.png" alt="" /> Music </a>  </div>     <div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu"> <a href="http://www.muhammadakbar1.blogspot.com" class="gradient"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfAW7bnUhWtg75tdtmL-EgeeR5XKYc6KqgPVnGgmMjdygUqI7xodltwefpUjOcXTgnqyPgIiqUD0rTZjc5ZzQDcQl7dBmlmnXcwKefyUZ7Kfv1NnlwUmjl4-TyLjuJxeBkoFfIOydjfW0/s1600/MBL.png" alt="" /> Uhammad Akbar </a> </div>          </div> </blockquote></div><div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;">All Done: Indeed straightforward? Well, that’s all. The responsive Windows 8 look like navigation menu has been integrated in your website. Remember: This Menu can be used on any Platform that supports HTML or CSS i.e. WordPress, Jhoomla and etc.</div></div></div>

Add Stylish Metro UI Premium Navigation Menu in Blogger Blog

Stylish Metro UI Premium Navigation Menu in Blogger Are you bored with your website’s navigation menu? Does anyone want to revamp his unap...

Animated Metro UI Social Profile And Search Box with Zoom & Glow Effects Widget v1.1 For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Metro UI Social Profile and Search Box with Zoom & Glow Effects Widget v1.1  For Blogger</div> <div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCoPRlxuH9ymiKl_WIeGeD1xikih37kuOFCr29v7aEEjZnVyaKobEqdo_64_I6PyDmzt_epyXvyX5XnfBUI3Q5saH0hpOihqZb5ANnsknS0-EMnXTNPiQXC_Q0X4bN2Dezn6ubdSQ3PZZk/s1600/Animated-Metro-UI-Social-Profile-and-Search-Box-with-Zoom-Glow-Effects-Widget+v1.1-For-Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCoPRlxuH9ymiKl_WIeGeD1xikih37kuOFCr29v7aEEjZnVyaKobEqdo_64_I6PyDmzt_epyXvyX5XnfBUI3Q5saH0hpOihqZb5ANnsknS0-EMnXTNPiQXC_Q0X4bN2Dezn6ubdSQ3PZZk/s1600/Animated-Metro-UI-Social-Profile-and-Search-Box-with-Zoom-Glow-Effects-Widget+v1.1-For-Blogger.png" /></a></div> You may have Seen Many CSS3 Widgets in my before Posts of my blog.. If you are new to my blog . you can have a look at my before posts.. And also subscribe for Much More Latest Updates.. Before Posts of CSS3 Category was not made by my own but shared it  so that it will be helpful to you all.. I am here to share My First Attempt In Making Widgets Using CSS3 & HTML.. Hope you all like it and also thinking to update it using much more effects lately.. Here is a Live Demo :  Make Sure That the Images Loads completely.. <div class="separator" style="clear: both; text-align: center;"> </div><div class="testbutton" style="text-align: center;"><a class="hupt" href="http://s2freelab.blogspot.com/" target="_blank">Live Demo </a></div><div class="separator" style="clear: both; text-align: center;"></div> <h4 style="text-align: left;">How to Add Animated Metro UI Profile Search+Zoom Into Your Blog ??  </h4><ul style="text-align: left;"><li>Go to Blogger and go to your blog..</li><li>Now go to Layout in Left side of your Blogger Dashboard..</li><li>Now click on Add Gadget and Choose HTML/JavaScript..</li><li>Now paste the Below Set of codes in it..</li></ul><blockquote class="tr_bq"><div class="codebox"><style> .mjn-metro-social { width:300px; } .mjn-metro-social li { position:relative; cursor:pointer; padding:0; list-style:none; } .mjn-metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd { z-index:7; float:left; margin:2.5px; position:relative; display:block; } .mjn-metro-social .tw { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRwr_hwBG7F1qKGJ0HqfAXffbEUpxsKjaBJwNRPYLr_jsMt6kU6tYJ6z_btpNgyaLdSJkeSYBl2rJ2W1gWPVy9rtae4Nl7-t8gi4V1nHNykmnNAGJfvf8YtgjFyi4hyqMRVjd2W2kCLLg/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5; width:70px; height:70px; -webkit-transition: box-shadow .3s linear, background .2s linear; -moz-transition: box-shadow .3s linear, background .2s linear; -ms-transition: box-shadow .3s linear, background .2s linear; -o-transition: box-shadow .3s linear, background .2s linear; transition: box-shadow .3s linear, background .2s linear; } .mjn-metro-social .fb { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie_HGIEgJ3C5aAw7sGK2sVlbW7wMe59Gjrfeot5EMtnyRJ26jiMQhK6HtP68kSY1KCEpOpepZ2vV7GfzxjCQAyVQvv2Hi2IfQc8TJPqXdqLlkLgKLX6BYRCHx5SuwSEmguX6Dd5dtSyNc/h120/facebookf.png.png) no-repeat center center #1f69b3; width:70px; height:70px; -webkit-transition: box-shadow .3s linear, background .2s linear; -moz-transition: box-shadow .3s linear, background .2s linear; -ms-transition: box-shadow .3s linear, background .2s linear; -o-transition: box-shadow .3s linear, background .2s linear; transition: box-shadow .3s linear, background .2s linear; } .mjn-metro-social .gp { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzIIbg2Uv1q5kVVKXzmjAFoPtNBmEXWo6WxzhkkQE7BwSnuhgKHPPLPAqMRE9KfGrPoHiyRzdZEiY0PcAnRwlMuDMSTs8GC9g7UPhyphenhyphenSh0dSOvUsoxMwmSSKlBcDA_lNQ9PGOX5jFXu0A/h120/google+plus.png) no-repeat center center #da4a38; width:70px; height:70px; -webkit-transition: box-shadow .3s linear, background .2s linear; -moz-transition: box-shadow .3s linear, background .2s linear; -ms-transition: box-shadow .3s linear, background .2s linear; -o-transition: box-shadow .3s linear, background .2s linear; transition: box-shadow .3s linear, background .2s linear; } .mjn-metro-social .fd { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh11GDaHveQsiVakJhlZoSiqYgxKfomVnbnDKI-4gMTfce3kETlgG_cRneA9t3G3YwJm99LoBl4g-NamQlDh9VtykkHSnYgUOE7us2U7F9qHiKZK5iek1TcaJyn_XusplZnusc-9UwE6g8/h120/feed.png) no-repeat center center #e9a01c; width:70px; height:70px; -webkit-transition: box-shadow .3s linear, background .2s linear; -moz-transition: box-shadow .3s linear, background .2s linear; -ms-transition: box-shadow .3s linear, background .2s linear; -o-transition: box-shadow .3s linear, background .2s linear; transition: box-shadow .3s linear, background .2s linear; } .mjn-metro-social li:hover .fb { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2wlhzowoqxJXUe6CVrH-_MVzk1QnArFUwLVe0qQAEmOiSZpDhysIlVFJ2mozS843qWAD7Irb8Wplm061U4IzkpbnoLUl9GcqLqspBn2fKkUZDkfLOqD2Ta4d7tZ3Vof856o8HOg-_Ok8/h120/facebookfh.png) no-repeat center center #1f69b3;  box-shadow:0px 0px 6px 3px #217BC0; -webkit-box-shadow:0px 0px 6px 3px #217BC0; -moz-box-shadow:0px 0px 6px 3px #217BC0; -o-box-shadow:0px 0px 6px 3px #217BC0; -ms-box-shadow:0px 0px 6px 3px #217BC0; } .mjn-metro-social li:hover .tw { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiAi3Abj0Hoojiw7RbRWeiNAfgv3PJDz6KlYbR7TzQTJZ_Q9ywJiw5ZtmCyoEMQ2qYDFNA0LysNOnTHhB6gSUlsrLuyd0A5P2ZhNsj8xB4BCzvrF449p0zEwJ7g-2X-2LImoXvnR3hfxE/h120/twitter-bird-dark-bgsx.png) no-repeat center center #43b3e5;  box-shadow:0px 0px 6px 3px #38D1F7; -webkit-box-shadow:0px 0px 6px 3px #38D1F7; -moz-box-shadow:0px 0px 6px 3px #38D1F7; -o-box-shadow:0px 0px 6px 3px #38D1F7; -ms-box-shadow:0px 0px 6px 3px #38D1F7; } .mjn-metro-social li:hover .gp { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYn5Ukm38BLDZ3x0Bdt7CIK-iPfYzT11DOeDvTbCuzRvRq-Pgeb585bkO-BD7teMkrCH5cqO-1ipvshZQdtAjRj31phwRqFmADNShKe_eQP2Rrxt_ORGoONR30lWVkvSC2-eIFNKya62E/h120/google+plush.png) no-repeat center center #da4a38;  box-shadow:0px 0px 6px 3px #F43431; -webkit-box-shadow:0px 0px 6px 3px #F43431; -moz-box-shadow:0px 0px 6px 3px #F43431; -o-box-shadow:0px 0px 6px 3px #F43431; -ms-box-shadow:0px 0px 6px 3px #F43431; } .mjn-metro-social li:hover .fd { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhuP6e0QzDptF0Dg9Dkwp0sDSrLevOHDTf3GvBcLPhgVZrG_d-j09KrjsdTA_wzzgKeboZPlaXMoNTftxs5IGxOWo9LfPVNNBFSp2vPUyfhNJwBrE0U4Ht_o7gQZJ9f2hzitmcgXCupC0/h120/feedh.png) no-repeat center center #e9a01c;  box-shadow:0px 0px 6px 3px #e9a01c; -webkit-box-shadow:0px 0px 6px 3px #e9a01c; -moz-box-shadow:0px 0px 6px 3px #e9a01c; -o-box-shadow:0px 0px 6px 3px #e9a01c; -ms-box-shadow:0px 0px 6px 3px #e9a01c; } .cf:before, .cf:after{     content:"";     display:table; } .cf:after{     clear:both; } .cf{     zoom:1; }   /* Form wrapper styling */ .form-wrapper {     width: 280px; } /* Form text input */ .form-wrapper input {     width: 215px;     height: 20px;     padding: 10px 5px;     float: left;      font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';     border: 0; box-shadow: 0 0 6px rgba(0,0,0,.3) inset; webkit-transition: box-shadow .3s linear, background .2s linear; -moz-transition: box-shadow .3s linear, background .2s linear; -ms-transition: box-shadow .3s linear, background .2s linear; -o-transition: box-shadow .3s linear, background .2s linear; transition: box-shadow .3s linear, background .2s linear; } .form-wrapper input:focus {     outline: 0;     background: #fff;     border-color: #51a7e8;    box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input::-webkit-input-placeholder {    color: #999;    font-weight: normal;    font-style: italic; } .form-wrapper input:-moz-placeholder {     color: #999;     font-weight: normal;     font-style: italic; } .form-wrapper input:-ms-input-placeholder {     color: #999;     font-weight: normal;     font-style: italic; }  /* Form submit button */ .form-wrapper button {     overflow: visible;     position: relative;     float: right;     border: 0;     padding: 0;     cursor: pointer;     height: 40px;     width: 75px;     background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji2mYdZMdL85z2IArRJCA-mVpUzIFliK_okTHPCKR_WCNUFhD2n79nqvzP4St1hhJKZXrcenQ68HvMkFA4hvH25hzqcPwS4e9ltCtC6RMF1FI_IsIUaB-L4nzSM1u6QZT0O0TAsYsr0DI/h120/1367665345_search.png) no-repeat center center #26B11E;     border-radius: 0 0 0 0;        text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); webkit-transition: box-shadow .3s linear, background .2s linear; -moz-transition: box-shadow .3s linear, background .2s linear; -ms-transition: box-shadow .3s linear, background .2s linear; -o-transition: box-shadow .3s linear, background .2s linear; transition: box-shadow .3s linear, background .2s linear; } .form-wrapper button:hover{         background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji2mYdZMdL85z2IArRJCA-mVpUzIFliK_okTHPCKR_WCNUFhD2n79nqvzP4St1hhJKZXrcenQ68HvMkFA4hvH25hzqcPwS4e9ltCtC6RMF1FI_IsIUaB-L4nzSM1u6QZT0O0TAsYsr0DI/h120/1367665345_search.png) no-repeat center center #26B11E; box-shadow:0px 0px 6px 3px #44D816; -webkit-box-shadow:0px 0px 6px 3px #44D816; -moz-box-shadow:0px 0px 6px 3px #44D816; -o-box-shadow:0px 0px 6px 3px #44D816; -ms-box-shadow:0px 0px 6px 3px #44D816; } .form-wrapper button:active, .form-wrapper button:focus{     background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji2mYdZMdL85z2IArRJCA-mVpUzIFliK_okTHPCKR_WCNUFhD2n79nqvzP4St1hhJKZXrcenQ68HvMkFA4hvH25hzqcPwS4e9ltCtC6RMF1FI_IsIUaB-L4nzSM1u6QZT0O0TAsYsr0DI/h120/1367665345_search.png) no-repeat center center #26B11E;     outline: 0; } .form-wrapper button:before { /* left arrow */     content: '';     position: absolute;     border-width: 8px 8px 8px 0;     border-style: solid solid solid none;     border-color: transparent #26B11E transparent;     top: 12px;     left: -6px; } .form-wrapper button:hover:before{     border-right-color: #26B11E; } .form-wrapper button:focus:before, .form-wrapper button:active:before{         border-right-color: #26B11E; }    .form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */     border: 0;     padding: 0; }   </style> <div class="mjn-metro-social"> <li><a class="fb" href="http://www.facebook.com/yourlink"></a></li> <li><a class="tw" href="http://twitter.com/yourlink"></a></li> <li><a class="gp" href="https://plus.google.com/123456789"></a></li> <li><a class="fd" href="http://feeds.feedburner.com/yourfeedlink"></a></li> <form action="/search" class="form-wrapper cf" id="searchthis" method="get" style="display: inline;"> <input id="form-wrapper input" name="q" placeholder="  Search here.. " required="" type="text" /> <button type="submit"></button> </form> </div></blockquote> <ul style="text-align: left;"><li>Now click save..That's it ..all Done!! </li></ul> Customization : <ul style="text-align: left;"><li>Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS with your Link..  </li><li>In some templates search box may not fit..so to change Height and Width Edit the Text Highlighted in Green Color..</li></ul></div>

Animated Metro UI Social Profile And Search Box with Zoom & Glow Effects Widget v1.1 For Blogger

Metro UI Social Profile and Search Box with Zoom & Glow Effects Widget v1.1 For Blogger You may have Seen Many CSS3 Widgets in my befor...

Simple And Stylish Metro Ribbon UI Social Profile Widget v1.1 For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Simple And Stylish Metro Ribbon UI Social Profile Widget v1.1 For Blogger</div> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCRwgh0fZExdkvyiOL8mS0Mcebm7srlTZxfFkx3mSAUfsiRl5FCrLn89iiU6Bab0b9nFaTvEa252YyZf1bserSjOcosZX0earQDGQ_HhbZZ3iAq_j9Wo41pisIqM8r8uW25MgLaT6c3MdQ/s1600/Simple-and-Stylish-Metro-Ribbon-UI-Social-Profile-Widget-v1.1-For-Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCRwgh0fZExdkvyiOL8mS0Mcebm7srlTZxfFkx3mSAUfsiRl5FCrLn89iiU6Bab0b9nFaTvEa252YyZf1bserSjOcosZX0earQDGQ_HhbZZ3iAq_j9Wo41pisIqM8r8uW25MgLaT6c3MdQ/s1600/Simple-and-Stylish-Metro-Ribbon-UI-Social-Profile-Widget-v1.1-For-Blogger.png" /></a></div> As you all know My First Attempt in CSS3 was and also is "Animated Metro UI Social Profile And Search Box with Zoom & Glow Effects Widget v1.1 For Blogger" .. So I am here Today with another Social Profile Widget with Metro Ribbon UI Win 8 Style.. <div style="text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div> <div style="text-align: left;"> Let's Begin !!!!!!</div><div style="text-align: left;"></div> <h4 style="text-align: left;"> How To Add Metro Ribbon UI Social Profile Widget Into Blogger :</h4><ul style="text-align: left;"><li>First Go to <a href="http://www.blogger.com/home" target="_blank">"Blogger</a>" and then go to your Blog "Dashboard"..</li><li>Now go to "Layout Section" which is in Left side of your Blog "Dashboard"..</li><li>Now click on "Add Gadget" .. Scroll Down and Click on "HTML/JavaScript"..</li><li>Now Paste the Below Code in it..</li></ul><blockquote class="tr_bq"><div class="codebox"><style> .mjn-social_ribbon_icons a{     width:48px;     height:100px;     margin-top:10px;     display:inline-block;     text-indent:-9999em;     background-position:0 0;     background-repeat:no-repeat;     z-index:2000;     overflow:hidden; } .twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-a7RWmcTxcgkDluq-GDl7tTiRxWqMHjq64OBwRmtZ-05PqpHyMjoxcpG3tGIzhfvwqkhZ5jAuc37alclzHNJhbKM67ZhEM0fqKyiY9V7iIiDvinwFFqAlykEp-hugiKHG7ylIriezqV0/h120/Twitter+R.png'); margin-bottom:10px; } .facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2AA7F6KKu3yFGbVF4fMU0nRVSA1mmJJmIbb88td9yvMPCyQaTcXXxlug0Vv84qeFRnF2xqfqTS7LAPJlJyxiX3w9BuP8YjrOAj86CER__q8apUIKvr1AQAtw_M4PubZxp4FIHTEPqQs4/h120/Facebook+R.png'); margin-bottom:10px; } .google{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJNKk8bOzetgdSM7CJI_cQOAonj2gD1Alaj1SLrAEOj9ftzM0mRQYvsTT6Im7G2W5mydS_hkPaPq_AHtkYEtV74Vz791u5y_opD0YzwB34MPJFutZdxApEwxp2BRpJ4efGZ_iBquLOIN4/h120/Google++R.png'); margin-bottom:10px; } .rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE93CRrSpq7ju3bdQIUUdNhX_IHpNEvfEl9Zg2yLV1dBmL84yME47DNggR6aZo5S6-kVdsEUEQ3ZJgdvolcW9EOo5YYxBPt3W2uJwQfEiGj9ap5d4Gn6T6SLH3zlXx-V_drqWV1n1dd58/h120/RSS+R.png'); margin-bottom:10px; } .twitter:hover{ border-top: 2px solid #fff ; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .facebook:hover{ border-top: 2px solid transparent; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .google:hover{ border-top: 2px solid transparent; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } .rss:hover{ border-top: 2px solid transparent; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } </style>     <div class="mjn-social_ribbon_icons"> <a href="http://www.facebook.com/youlink" class="facebook" title="Follow us on Facebook">Facebook</a> <a href="http://www.twitter.com/youlink" class="twitter" title="Follow us on Twitter">Twitter</a>  <a href="https://plus.google.com/u/0/yourlink" class="google" title="Follow us on Google+">Google+</a> <a href="http://feeds.feedburner.com/yourlink" class="rss" title="Subscribe Us on RSS">RSS</a>     </div> </div></blockquote> <div dir="ltr"> <li>Now click save..That's it ..all Done!! </li></div> <h4 style="text-align: left;"> Customization : </h4><ul style="text-align: left;"><li>Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS with your Link..</li></ul></div>

Simple And Stylish Metro Ribbon UI Social Profile Widget v1.1 For Blogger

Simple And Stylish Metro Ribbon UI Social Profile Widget v1.1 For Blogger As you all know My First Attempt in CSS3 was and also is "Ani...

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;">Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxE_NtrlyBDvzeyqjJ3HelUD5ZHnrgWoGya42pkEQysiJxjzYRqM9N5YxVIuwHyqnEfkpNncElZP9TMO7fsrfd556Ke5DuEMJo53OeHPjJycESIbADbk3nnIGAaf7Qih9soizv9Hkg1VuM/s1600/Animated-CSS3-Metro-UI-Drop-Down-Menu-With-Sliding-Tiles-Effect-v1.1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxE_NtrlyBDvzeyqjJ3HelUD5ZHnrgWoGya42pkEQysiJxjzYRqM9N5YxVIuwHyqnEfkpNncElZP9TMO7fsrfd556Ke5DuEMJo53OeHPjJycESIbADbk3nnIGAaf7Qih9soizv9Hkg1VuM/s320/Animated-CSS3-Metro-UI-Drop-Down-Menu-With-Sliding-Tiles-Effect-v1.1.PNG" width="305" /></a></div><div style="text-align: left;"> </div><div style="text-align: left;"></div><div style="text-align: left;">I have Posted My First Two Creation Using CSS3   Earlier In my Posts Before,, Those are</div><ol style="text-align: left;"><li> <a href="http://s2free.blogspot.com/2013/05/animated-metro-ui-social-profile-and.html" target="">Metro UI Social Profile and Search Box with Zoom & Glow Effects Widget v1.0 by MJN For Blogger ..</a></li><li> <a href="http://s2free.blogspot.com/2013/05/simple-and-stylish-metro-ribbon-ui.html" target="_blank">Simple and Stylish Ribbon UI Social Profile Widget v1.0 by MJN For Blogger..</a></li></ol><div style="text-align: left;">So after Working on Those Two <a href="http://s2free.blogspot.com/search/label/Metro%20UI" target="_blank">Metro UI</a> and Ribbon UI Widgets today  I am Here With One More Metro UI Win 8 Style Drop Down Menu Using CSS3..  </div><div style="text-align: left;"> </div><div style="text-align: center;">Demo of Metro UI Drop Down Menu With Sliding Tiles Effect v1.1</div><div style="text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://s2freelab.blogspot.com/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeg62wF9XTW-Qg1YQr1-EEIexxWGOILgbuIbLnMUrPwLFvxn9XKgdFAreQMaRxMga2wziuZerIogUfyWXeKYi4vq1J8M2cIUBCL6QQfqliw6iUxkvWS98rhT0tBl5H1acaCbLBPmWpyERC/s1600/demo-button-s2free.gif" /></a></div>  After Previewing Live Demo I think you are "Happy!!" to add it to your Blog or Site.. <div style="text-align: left;"> </div><h4 style="text-align: left;"> How to Add Metro UI Drop Down Menu With Sliding Effect Into Your Blog: </h4><ol style="text-align: left;"><li>First Go to <a href="http://www.blogger.com/home" target="_blank">"Blogger"</a> and Go to  your Blog Dashboard..</li><li>Now Click On "Layout" In Left Side of your Blog..</li><li>Now Click on "Add Gadget"..</li><li>You Will Get Many Widgets..Scroll Down to "HTML/JavaScript"..</li><li>Click On "HTML/JavaScript"..</li><li>Now Paste This Below Set of Code in it..</li></ol><blockquote class="tr_bq" style="text-align: left;"><div class="codebox"><style> /* demo page styles */ .mjn-tab1 { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFEvzo_pQaMr4SFCfPNWEJKayQ9cjmQKJEy2uZyZ8kF8JJLP8jC9XXAZjILj9UsIbpsm4ZR7rQ3Z-TDe0QXFFSFJcYam7U0Aq1yR41arGfgFfsXRHcjI9xpv8GFTwA5KfXY-7TKZaB1w/h120/home.png) no-repeat center center #4d90fe; } .tab1:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFEvzo_pQaMr4SFCfPNWEJKayQ9cjmQKJEy2uZyZ8kF8JJLP8jC9XXAZjILj9UsIbpsm4ZR7rQ3Z-TDe0QXFFSFJcYam7U0Aq1yR41arGfgFfsXRHcjI9xpv8GFTwA5KfXY-7TKZaB1w/h120/home.png) no-repeat center center #3682FC; } .mjn-fb { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipySYk891GXg6ylmeLe-9iCYY-qXe3-D9f70_lkfRSvOYgtHsT35vBRZrm5QjPDNUf38w_NoBhrDu9cgdjIE-LvAL5iF8Wh5FuUMKRYS85FTPBeiCMkqkEjKqIT4Qpw1shPRtl0U29ELs/s1600/facebook2.png) no-repeat center center #2A82D9; } .mjn-fb:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipySYk891GXg6ylmeLe-9iCYY-qXe3-D9f70_lkfRSvOYgtHsT35vBRZrm5QjPDNUf38w_NoBhrDu9cgdjIE-LvAL5iF8Wh5FuUMKRYS85FTPBeiCMkqkEjKqIT4Qpw1shPRtl0U29ELs/s1600/facebook2.png) no-repeat center center #1f69b3; } .mjn-tw { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6E9AjPwOGuiprVhlvQAEVOqL0cKOEr2USmx1bX3iVl2t91GOah9jWvLoux258NXnIjHH8VHw-gei0A0JXpuH9ETzEhOu-J-DISppzvWSVZR3I7MourFkoyr2ZuFmbv1K2AAusQP7pErs/h120/twitter-bird-dark-bgs.png) no-repeat center center #0CA8F0; } .mjn-tw:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6E9AjPwOGuiprVhlvQAEVOqL0cKOEr2USmx1bX3iVl2t91GOah9jWvLoux258NXnIjHH8VHw-gei0A0JXpuH9ETzEhOu-J-DISppzvWSVZR3I7MourFkoyr2ZuFmbv1K2AAusQP7pErs/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5; } .mjn-g { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwnHpfSae6pWVj1FfWnK62Q4xFCooUR4ZQB38WEcTIGIbqRL97C57M3TRC5768cP5IAgnsFdXhrU7V_oJDq6UTpDdJoZf6GxlfQYlQWJYhdAF3XIGaEe0IF5tr8nXMlyYBH3YAhoi8V94/s1600/google+plus2.png) no-repeat center center #DC321E; } .mjn-g:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwnHpfSae6pWVj1FfWnK62Q4xFCooUR4ZQB38WEcTIGIbqRL97C57M3TRC5768cP5IAgnsFdXhrU7V_oJDq6UTpDdJoZf6GxlfQYlQWJYhdAF3XIGaEe0IF5tr8nXMlyYBH3YAhoi8V94/s1600/google+plus2.png) no-repeat center center #c53727; } .mjn-rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bW8UkvyKfKiQcyoMwMHe7au9AINJyQdsScWRRic5O76s-BhvKAY3l6H2Bs0ZiPNYMN7xKuJ8mxTyxGEhJcxSc0eoMv3mtwm0LW-AWPbTz79namapF_QiaV4PdwJifOJbBJrCE9d8at0/s1600/feed2.png) no-repeat center center #E9A01C; } .mjn-rss:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_bW8UkvyKfKiQcyoMwMHe7au9AINJyQdsScWRRic5O76s-BhvKAY3l6H2Bs0ZiPNYMN7xKuJ8mxTyxGEhJcxSc0eoMv3mtwm0LW-AWPbTz79namapF_QiaV4PdwJifOJbBJrCE9d8at0/s1600/feed2.png) no-repeat center center #F9A914; } .mjn-tab2 { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbGQblxp4PnBSDgEAxyKN_zvf0uGK04CR-FNncprk6DIkCNmXP5sfzi4Q4pzq_kCUOPzoZe6NE0cWk9ctwOJAZoDiTT578lcAAcqigQv4u68wjTv9zpF80tO2lmx-7J7XN7SrIxOBpGM/h120/Tag.png) no-repeat center center #35aa47; } .mjn-tab2:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKbGQblxp4PnBSDgEAxyKN_zvf0uGK04CR-FNncprk6DIkCNmXP5sfzi4Q4pzq_kCUOPzoZe6NE0cWk9ctwOJAZoDiTT578lcAAcqigQv4u68wjTv9zpF80tO2lmx-7J7XN7SrIxOBpGM/h120/Tag.png) no-repeat center center #1d943b; } .mjn-tab2sub { background: #35aa47; } .mjn-tab2sub:hover{ background: #1d943b; } .mjn-tab3 { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzb_P0R2cK6_5OzUgeWBkpXNfeVj_ZgeedVscYdDxn1YJLtklWBk-nrKtHG56Dhyphenhyphenp83Eocvt3RhxD0EDyKUh4NwsUHpoIiszj4c__BX19uitvDGJQ-8DNHZ2izBFQQQYdOx7VVpKIUMl0/h120/archives.png) no-repeat center center #852b99; } .mjn-tab3:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzb_P0R2cK6_5OzUgeWBkpXNfeVj_ZgeedVscYdDxn1YJLtklWBk-nrKtHG56Dhyphenhyphenp83Eocvt3RhxD0EDyKUh4NwsUHpoIiszj4c__BX19uitvDGJQ-8DNHZ2izBFQQQYdOx7VVpKIUMl0/h120/archives.png) no-repeat center center #6d1b81; } .mjn-tab3sub { background: #852b99; height:70px; } .mjn-tab3sub:hover { background: #6d1b81; } .mjn-tab4 { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKc3V8qAVN2G4vBWrNUWj7IoMWbuT8Ps4w4mWH3y8l1o9iXcA75M5ch9LYW5o7byc4iJO_Zh-lXgNevwiEw5A7B6yPaQyRrvu4s_Dl_sJp0aoIxJhWYABg4OzJoyfEKLJlDss4o8PdC80/h120/contact.png) no-repeat center center #d84a38;; } .mjn-tab4:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKc3V8qAVN2G4vBWrNUWj7IoMWbuT8Ps4w4mWH3y8l1o9iXcA75M5ch9LYW5o7byc4iJO_Zh-lXgNevwiEw5A7B6yPaQyRrvu4s_Dl_sJp0aoIxJhWYABg4OzJoyfEKLJlDss4o8PdC80/h120/contact.png) no-repeat center center #c53727; } .mjn-tab4sub { background: #d84a38;; } .mjn-tab4sub:hover{ background: #c53727; } .mjn-tab5 { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMoKU8YoX-dKVWsAwti68WUe5n2ss2m-xdLFNGJWBsKfNilGlQ-MHGQJLRjJYG2INzScCGRqZhzqy4X0KeJGlyRDr0TU7nlpZyPucPgpDVHYQbDaK5isy5nR69ACtyGkFNzxlOcxrqeMw/h120/Menu.png) no-repeat center center #555; } .mjn-tab5:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMoKU8YoX-dKVWsAwti68WUe5n2ss2m-xdLFNGJWBsKfNilGlQ-MHGQJLRjJYG2INzScCGRqZhzqy4X0KeJGlyRDr0TU7nlpZyPucPgpDVHYQbDaK5isy5nR69ACtyGkFNzxlOcxrqeMw/h120/Menu.png) no-repeat center center #222; } body {     background:none;     margin:0;     padding:0;     font-family: Helvetica,Arial,sans-serif;     font-size: 11px; } .mjn-metro-menu {     position:relative;     background:none;     width:500px;     height:90px;     border:none;     margin:20px auto;     padding:20px; float:left; } /* navigation menu styles - main styles */ ul.navi {     position:relative;     z-index:100;     padding:0;     margin:0 0 0 60px;     list-style:none;     width:auto;     height:30px; } ul.navi > li {     width:70px;     height:70px;     position:absolute;     left:0;     top:0;     -moz-transition: -moz-transform 0.5s ease-in-out;     -ms-transition: -ms-transform 0.5s ease-in-out;     -o-transition: -o-transform 0.5s ease-in-out;     -webkit-transition: -webkit-transform 0.5s ease-in-out;     transition: transform 0.5s ease-in-out; } ul.navi a {     display:block;     width:70px;     height:70px;     position:absolute;     left:0;     top:0;     line-height:30px;     text-align:center;     text-decoration:none; } ul.navi a img {     border:0; } ul.navi a span {     position:relative;     top:30%;     font: 14px Segoe UI, Helvetica, Arial, sans-serif;     color:#fff; } /* top line - hover styles */ ul.navi:hover {     height:200px; } ul.navi:hover li#n1 {     -moz-transform: translatex(0px);     -ms-transform: translatex(0px);     -o-transform: translatex(0px);     -webkit-transform: translatex(0px);     transform: translatex(0px); } ul.navi:hover li#n2 {     -moz-transform: translatex(90px);     -ms-transform: translatex(90px);     -o-transform: translatex(90px);     -webkit-transform: translatex(90px);     transform: translatex(90px); } ul.navi:hover li#n3 {     -moz-transform: translatex(180px);     -ms-transform: translatex(160px);     -o-transform: translatex(160px);     -webkit-transform: translatex(160px);     transform: translatex(180px); } ul.navi:hover li#n4 {     -moz-transform: translatex(260px);     -ms-transform: translatex(270px);     -o-transform: translatex(270px);     -webkit-transform: translatex(270px);     transform: translatex(270px); } ul.navi:hover li#n5 {     -moz-transform: translatex(360px);     -ms-transform: translatex(360px);     -o-transform: translatex(360px);     -webkit-transform: translatex(360px);     transform: translatex(360px); } /* submenus - common styles */ ul.sub {     padding:0;     margin:0;     list-style:none;     width:100%;     height:200px auto;     position:absolute;     left:0;     top:0;     z-index:-1;     opacity:0;     -moz-transition: opacity 0s linear 1s;     -ms-transition: opacity 0s linear 1s;     -o-transition: opacity 0s linear 1s;     -webkit-transition: opacity 0s linear 1s;     transition: opacity 0s linear 1s; } ul.sub li {         width:80px auto;        height:80px;        position:absolute;        left:0;       top:0;       z-index:-1;     -moz-transition: -moz-transform 0.5s ease-in-out 0.5s;     -ms-transition: -ms-transform 0.5s ease-in-out 0.5s;     -o-transition: -o-transform 0.5s ease-in-out 0.5s;     -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s;     transition: transform 0.5s ease-in-out 0.5s; } /* submenus - hover styles */ ul.navi > li:hover ul {     opacity:1;     -moz-transition: opacity 0s linear 0.5s;     -ms-transition: opacity 0s linear 0.5s;     -o-transition: opacity 0s linear 0.5s;     -webkit-transition: opacity 0s linear 0.5s;     transition: opacity 0s linear 0.5s; } ul.navi li:hover ul li.l {     -moz-transform: translatex(-70px) translatey(90px);     -ms-transform: translatex(-70px) translatey(90px);     -o-transform: translatex(-70px) translatey(90px);     -webkit-transform: translatex(-70px) translatey(90px);     transform: translatex(-70px) translatey(90px); } ul.navi li:hover ul li.c { -moz-transform: translatex(2px) translatey(90px);     -ms-transform: translatex(2px) translatey(90px);     -o-transform: translatex(2px) translatey(90px);     -webkit-transform: translatex(2px) translatey(90px);     transform: translatex(2px) translatey(90px); } ul.navi li:hover ul li.r {     -moz-transform: translatex(74px) translatey(90px);     -ms-transform: translatex(74px) translatey(90px);     -o-transform: translatex(74px) translatey(90px);     -webkit-transform: translatex(74px) translatey(90px);     transform: translatex(74px) translatey(90px); } ul.navi li:hover ul li.r1 {     -moz-transform: translatex(146px) translatey(90px);     -ms-transform: translatex(146px) translatey(90px);     -o-transform: translatex(146px) translatey(90px);     -webkit-transform: translatex(146px) translatey(90px);     transform: translatex(146px) translatey(90px); } </style> <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <div class="mjn-metro-menu">  <ul class="navi">  <li id="n1"><a class="mjn-tab1" href="http://s2free.blogspot.com/" title="Home" ></a> <ul class="sub">  <li class="l"><a class="mjn-fb" href="https://www.facebook.com/yourlink" title="Like Us on Facebook"></a></li>  <li class="c"><a class="mjn-tw" href="https://www.twitter.com/yourlink" title="Follow Us on Twitter"></a></li>   <li class="r"><a class="mjn-g" href="https://plus.google.com/u/0/123456789"></a></li> <li class="r1"><a class="mjn-rss" href="https://feeds.feedburner.com/yourlink"></a></li> </ul> </li> <li id="n2"><a class="mjn-tab2" href="http://s2free.blogspot.com/search/label/" title="Tags" ></a> <ul class="sub"> <li class="l"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/Windows"title="Windows">Windows</a></li> <li class="c"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/label/Blogger" title="Blogger">Blogger</a></li>  <li class="r"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/CSS3" title="CSS/HTML">CSS/HTML</a></li> <li class="r1"><a class="mjn-tab2sub" href="http://s2free.blogspot.com/search/label/Softwares" title="Softwares">Softwares</a></li> </ul> </li> <li id="n3"><a class="mjn-tab3" href="s2free.blogspot.com/2013/" title="Blog Archive" ></a> <ul class="sub"> <li class="l"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/">2013</a></li> <li class="c"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/">2012</a></li> <li class="r"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013/">2011</a></li> <li class="r1"><a class="mjn-tab3sub" href="s2free.blogspot.com/2013">2010</a></li> </ul> </li> <li id="n4"><a class="mjn-tab4" href="http://mjntechtips.blogspot.in/p/blog-page.html" title="Contact Us" ></a> <ul class="sub"> <li class="l"><a class="mjn-tab4sub" href="#">LINK 1</a></li> <li class="c"><a class="mjn-tab4sub" href="#">LINK 2</a></li> <li class="r1"><a class="mjn-tab4sub" href="#">LINK 3</a></li> <li class="r"><a class="mjn-tab4sub" href="#">LINK 4</a></li> </ul> </li> <li id="n5"><a class="mjn-tab5" href="#" ></a> </li> </ul> <div style="clear:both"></div> </div> </!doctype></div></blockquote> <ul style="text-align: left;"><li>Now Click Save and Drag it to your desired position..</li></ul> <h4 style="text-align: left;">Customization : </h4>Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS and other in Red with your Link..  Replace the Names Highlighted in  Pink with your Words appropriate to link given..</div>

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1

Animated CSS3 Metro UI Drop Down Menu With Sliding Tiles Effect v1.1 I have Posted My First Two Creation Using CSS3 Earlier In my Posts Be...