09 July, 2013

Window 8 Like Social Sharing Widget For Blogger

Tuesday, July 09, 2013

By: Mughees Ahmad on Tuesday, July 09, 2013
Share it Please

Window 8 Like Social Sharing Widget For Blogger

Window 8 Like Social Sharing Widget For Blogger

As we know that social sharing widget is very helpful in increasing traffic,subscriber and many other things.So,every blogger or site holder must have social sharing widget in their blog or site.Today, i am sharing beautiful window 8 like social sharing widget for blogger or websites.This beautiful widget have many features like hover effects,colourful and eye catching and also shows good impression of your site or blog on visitors and readers...


See The Demo Before Starting...


                                                Demo

Window 8 Like Social Sharing Widget For Blogger

Step 1
  1. Go To Your Blogger Template
  2. Edit Template
  3. Now Search for  

]]></b:skin>

And Paste Below Code Above It...

/***** Window 8 like Social Sharing Widget from http://www.futurelearning4u.blogspot.com Start*****/
/*===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; }
/***** Window 8 like Social Sharing Widget from http://www.futurelearning4u.blogspot.com end*****/


Step 2 
  1. Now Go to Layout 
  2. Add HTML/Java Widget
  3. And Paste Below Code In It
  4. Above To The Post Body or Below To The Post Body(Where You Want)
/***** Window 8 like Social Sharing Widget from http://www.futurelearning4u.blogspot.com start*****/<!-- mblmetromenu --><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/AVvXsEjsrkprlx3Z0zMWz65RYlktXX_q6eA8YjLx5bQhrGgDJvnhbRojgezsspQOkQtG5z6X99grbA9snjJBXqrSO0_aHqoR31SX9hMFz8fZqwvGci34ytXQejE8CLBF4_gEPmntsabuY0LFlkQ/s1600/home.png" alt="" /><span class="light-text">Homepage</span></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/AVvXsEiquaoIddXjmTuJE2XkQRDdR5NvScrwFUkGkHgGLHKE6vgcqUdYobhWMpbllFVtcObH6WhSJdB0vccApDm4N8ATdacSuuZ8lBom8D8cFocQvcimLSz6_mprkhQ1V9J_YgzDhp1bSOFVpus/s1600/messanger.png" alt="" /><span class="light-text">About US</span></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/AVvXsEhuPQIKFvQ2TqPBjQDws8vwASZKu_G4yk3-e0ukWhgjy3QMkqP5xhmWzgxJTTNPMQ0fCqYI6lTotX9GoISXx2GDwYa37D8WsB6TSiWH13tcDm0rqMSHc3EE8lj2aqWqVHVDr2vmyaANTag/s1600/rss.png" alt="" /><span class="light-text">Rss Feeds</span></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/AVvXsEh6_QQz5iSgodX5WgGzHll6WjTF15RC45teIkTfZ-4la5dM1hR_kRzqce71UnXbxT6gGVN2jx-cm__ufFvcfrNaAiGv26xd4kD6Todja8plEByQv01AhnAeK-Q0cMNvuZhyphenhyphen6TmamfzGE1E/s1600/search.png" alt="" /><span class="light-text">Search</span></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/AVvXsEiDxBBdrEvGR_vhHwdebHkhb4sSCc-zi1cBB4zAHGVZzNIIrfUsTOb5WW1x-OTMMsIoPSOEAQTrpUXZtzrrvKA2oX5ohNYnO4NhgbV7lwcd4JybiJytYEYgupmfSEKVm08qICDRWHhKNC4/s1600/mail.png" alt="" /><span class="light-text">Contact US</span></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/AVvXsEj_ncIIjxuEHKrpbAmAPCBfhOBsXn1yXcKejcZV5d83Y_UidlRFwn9QqkOmUcdPmN5zYKpvaCGBmrZRv6Q1wYSwTY-Q34Un3H_NfA5Kn5vXBfQJG3YteqpXmcnPdpOYv1R49qrG-QKg8oY/s1600/help.pn" alt="" /> <span class="light-text">Get HELP</span></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/AVvXsEhHNCxToBYT30yVdd0982DHHeDFhSrVzZk_HWOWgIT4azNJkE46VFbr5fQ4eyuW2H9KJ_0dPnIoxy0_cDbxIFYCdpTqUhhJh65Utul36ir8oJK3IMbJ8pDrBrCA34W21d_8X6bcR61ovpg/s1600/youtbe.png" alt="" /><span class="light-text">YouTube</span></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/AVvXsEirAeu4AZFNnfGjtM1kHE4iZLQNK6ts6fDG0YT10fXpRgcY6lcnfaR8mE7fui_JhdHU1dv5Zq4ROknzR9EbHLrqOaFe3X5BY-hL6H-AZ-ahcYuewaNYphAkZMAkAALNxLG385ENCdZPJ_A/s1600/face.png" alt="" /><span class="light-text">Facebook</span></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/AVvXsEgl-2CM2k-Fb3FRv3GiMOAPFTdMK60BNZ99ZizXAjEYWb49rNMthdgbRS99VOheQslol801iIw6rmDEuph44rknL6uOFF4kjGb636HqGpM9yIpe7IQaL6mT5xUEjr8aAy5US1SyKGmCv1M/s1600/photo.png" alt="" /><span class="light-text">Photos</span></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/AVvXsEj56SAaiK0fn9ieXy-Vkf2JWWOpqXN6KdFnG0-lfJqnk88za3RupcuDKSLTIU74ooXamc7LZBtP5ii7zd5OoG5_lzY9FkVAFjBtoy_QZagcoEmu2PgQht6QirEfc3ibgT4QtnVbfbNmPZQ/s1600/music.png" alt="" /><span class="light-text">Music</span></a> </div><div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu"><a href="#" class="gradient"><img src="https://lh3.googleusercontent.com/-wSxu4PbMPko/UZSTgEJFCWI/AAAAAAAAAGk/CSoTV_Kr8C8/w506-h281-o/Bloggeraxelogo.png" alt="" /><span class="light-text">Bloggeraxe</span></a>    
</div>        <!-- End MblMetroMenu -->  <!-- END mblmetromenu --></div>/***** Window 8 like Social Sharing Widget from http://www.futurelearning4u.blogspot.com end*****/

Add Your Desired Link At place of #

 Note

 If you face any difficulty regarding 'Window 8 Like Social Sharing Widget For Blogger' then feel free to contact us or comment below...

2 comments:

  1. Ankit SinglaTue Jul 09, 02:15:00 PM 2013

    Awesome and really cooooool social sharing widgets.
    Really a creative and master piece. :)
    Regards!
    Ankit

    ReplyDelete

Subscribe to: Post Comments (Atom)

 
©2013 GoGreen Theme Designed by Templateism.com