Metro Tarzı Sosyal Medya Eklentisi

Windows 8 ile hayatımıza giren “Metro” tarzı, web sitelerin ve blogların tasarımında da sıkça kullanılıyor. Ben Windows 8’i ve bloglardaki metro tarzı tasarımları pek sevmedim ama kenar çubuğunda kullanılan metro tarzı sosyal butonlar ve eklentiler hiç fena durmuyor. 

Pek çok blogda kullanıldığını gördüğüm  Bu kez daha küçük butonlardan ve yine metro tarzında bir arama kutusundan oluşan, kenar çubuğunuzda biraz daha az yer kaplayacak bir eklentiyi sizlerle paylaşmak istiyorum.

# Code #

<!--Blog Hocam Metro Tarzı Sosyal Butonlar Ve Arama Kutusu--> <div class="BH-metro-sosyal"> <li><a class="fb" href="http://www.facebook.com/bloghocam"></a></li> <li><a class="tw" href="http://twitter.com/bloghocam"></a></li> <li><a class="gp" href="https://plus.google.com/108761595756468128383/"></a></li> <li><a class="fd" href="http://feeds.feedburner.com/bloghocam"></a></li> <form action="/search" class="form-wrapper cf" id="searchthis" method="get" style="display: inline;"> <input id="form-wrapper input" name="q" placeholder=" Ara... " required="" type="text" /> <button type="submit"></button> </form> <br /></div> <style> .BH-metro-sosyal { width:300px;} .BH-metro-sosyal li { position:relative; cursor:pointer; padding:0; list-style:none;} .BH-metro-sosyal .fb,.tw,.gp,.pi,.in,.yt,.fd { z-index:7; float:left; margin:2.5px; position:relative; display:block;} .BH-metro-sosyal .tw { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAnARbqQ_Cs2UN7EA4Qgs6BrgE0AGJIoKO8gBFOputT8PDNw5HNDH1Jq1wmBvsttPulef_TPaaBnQT2M00x5p42X2MjCCi7_fFkHpi5bdHtilPhjE2hgGeO-AtfVta94BUp9PZqtZRppA/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;} .BH-metro-sosyal .fb { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN21uupcq1G5cfc6yChwQzis_cOnPhnUKjKNuUm-Wnrx_gAes8psGjR0JYealn2a6JjHYNa4NvNVJbKEcRrniQ0UzM0tjjwUY9zyIhJOVbiP2Pf6WYoPl7wej1zHTSa_pVQeRAuLhXLyE/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;} .BH-metro-sosyal .gp { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz1R10zNlR0iVFqP1h1W4Lpnpo_xjHwu4tvdTcdwTOrCLatEHb-VnAmGF4U-qy98WIEqDCaMYct2jts5kqNpCI3CRUqiG67eiy2t8ZB2mz4ErwwNllK8EVIV8E5isEhd1hlPFciovU3I8/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;} .BH-metro-sosyal .fd { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyMyxlNjenFCwoZv4s_BDBloYivIEzSZkzEi9r0iKfC10WV0wLo9GtG2ki53mClGZrW7v7sOXVteFRjYIbkVN4KqzYjU5u3Wlr0rAv-ncc9n0U9m9sX5dQP2OOZNgwPnZgjZHO-p5KOYk/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;} .BH-metro-sosyal li:hover .fb { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoqVlbmmlEGL0WEyrQ6QjsjIk3zEkVPkBs2R1STOY0_gOwiNo31Vurn4m2tPoxx6Qn0jK8Sn9dP2OpP9yN-xWVCMxQWNldbgKpZKRzReCfa5INpUF9eu-5R65MZLebjQFfFqMOknrgbOo/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;} .BH-metro-sosyal li:hover .tw { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjixsRWDSrcM-xdU81-Drf1oVRXsikqc12Ap-ZWO9A-J28jNA-qkyNV6Nu7p5KaT7us92Nk2tbAt31cg7GvGr2LLWrnyCqfEChJCc_gAaFBBlW131XHiP8365BfwLKLFW2ea1_U4D21MgI/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;} .BH-metro-sosyal li:hover .gp { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmsV84Wohncb-xxgwjI_zT1djUFKlX9zxdg-mXE70E8dwm-BoNJPTJX-59-imdDpry1zg4HE98i9zDMP37bnXG-oFXWlw6Ai4FyxAZKxH6CGKC88G1nfHBXd4xO1IM6s_YPYBnLFVbKGE/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;} .BH-metro-sosyal li:hover .fd { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-nQ5jxQp1XlEdl-TEelW1yrv6Xpc6gmPisljt_chgyjan7Zcaake0hZs37HCqGowcPEFjMq8yHQrkYEq-C_ZLUFrXvzla0lnYEQk68_bH0qBXZ3515C4kibn1CQzfqGMOQs4dNQZI9n4/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 { width: 280px;} .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-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/AVvXsEgVrqiFhh1yVcjnsP2AbhRBgyQjE8P67iP7Kq3ngAifQU6NSkjXgH0RgxFnNF2B-Vmpg6z7Ma0A4ngVHYCZb9iO8a1AFe5xktmo9eJXnDkpCk4vahu9UTx6N1jgRW-ki2UWE7T89-EnvU8/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/AVvXsEgVrqiFhh1yVcjnsP2AbhRBgyQjE8P67iP7Kq3ngAifQU6NSkjXgH0RgxFnNF2B-Vmpg6z7Ma0A4ngVHYCZb9iO8a1AFe5xktmo9eJXnDkpCk4vahu9UTx6N1jgRW-ki2UWE7T89-EnvU8/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/AVvXsEgVrqiFhh1yVcjnsP2AbhRBgyQjE8P67iP7Kq3ngAifQU6NSkjXgH0RgxFnNF2B-Vmpg6z7Ma0A4ngVHYCZb9iO8a1AFe5xktmo9eJXnDkpCk4vahu9UTx6N1jgRW-ki2UWE7T89-EnvU8/h120/1367665345_search.png) no-repeat center center #26B11E; outline: 0; } .form-wrapper button:before { 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 { border: 0; padding: 0;} </style> <!--Blog Hocam Metro Tarzı Sosyal Butonlar Ve Arama Kutusu—>

Bu eklentide, ziyaretçilerin blogunuzu takip etmeleri için ilgili kanallara yönlendirecek, metro tarzında Facebook, Twitter, Google+ ve RSS butonları var. Hemen altlarında ise yine metro tarzında bir arama kutusu yer alıyor. Eklentinin en güzel özelliklerinden biri ise butonlara eklenmiş olan CSS hover efekti.