Metro Tarzı Sosyal Butonlar Ve Arama Kutusu

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 metro tarzı sosyal medya eklentisi oldukça beğenilmişti. 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.

 

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.

 

Eklentiyi blogunuza eklemek için Blogger kumanda panelinize girdikten sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izleyin ve aşağıdaki kodları yapıştırın.

 

<!--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/AVvXsEj9P4fs1PK_qG7EhQPoV5krjGhwPqo_gDwo9ZpRrubS-7nnreCvFKJZXwobszACf4rQJQlDsw4GhBM50hZZPifq54MSWvwq_CbYCTtQsxuIYcSw9rkaSUgK2Az6xOcoA1tpAg6pmxsydm4/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/AVvXsEhjvCp13-YylHvv_-gbNNfMBAEjUleEyAWwxbLGl-rYyk1oUxHY4zDqfOZHxIxtdMBKYefTVxuKwiGX7K9wy9zlTJeOMvVFv2Jgqq5yyybE1FB7FmyMnwAaDjo1FQh823W6zpQjAAF1wxk/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/AVvXsEgztrwqmvq3CYAlvaLuTZT94Oov92gyR9JZ-FNZszZjHifE-XgI8Sx4mqctBhKitf6dqT7ykaknfKVsHqj3ECkyHt_BeENPUm29tK5G-bbplBHw7kcjIQ-UIdNvalFZYPE3Ml1QHnlvE3k/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/AVvXsEiObivAoyCzqF54-pGoA2PJSZlkPTB0IxjVNQo_8cxAq26fhIbvihgmdd0ZXEg-yg3G5moHJ08vKqS2gAzWhAPG4SYlEDFSRC7ECyn1bBvahnE48zS8P497xiP5Q3qDyeLjypvmME9lp2w/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/AVvXsEiEBYUvMPT4bQxz7uL4snLxiZeV3pKhsOqQfyKnbKXzzHuzB-r37XHdEdJgnD00mI6OAiXIboaNtjf4MH4ZjYzG5AcOrBSi_KzOA-y7S_1-6FLkENsOzp16MDPrWcguSP71AhE76Ry5EDA/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/AVvXsEhzUqLyeUnGKw9G5EZPQpNFRkwIJjkNeGiVNg7Q9yExcze14cO5EhdGGWc5hiWiU_Q9IrqWyUMzwQHbjwuKGkI1Ojl_jXCzCwxgDWuMjKneqfyst6JzreAFlQS1XJWfnM-SYKUMb2WkWlk/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/AVvXsEhkSS0PfF_dzMVLyBJSCFHIiGZUN74NSEbOIHAF-0YpUKb8zZukn8pytGBqoLOdbv0x8hTDLJj1QxbNlqeOX_hnFCXMtGzHxu89xtI5dCIPume09IsA2KLzc1kSyB8vRgclkhRfXrmuuew/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/AVvXsEhqWtwQSlfcnxtZvEeAvd82-58wg10doVlQHJ2Xpm91-WEVQHDF87n2mqKVc8YZBpS4h0SEld5Wns3HcaXBQJIAxIt2OTNrAApT8lc-8vI1mnTPSW65KlqxO6Lf8OP4P9qHdJv5fUGGk9g/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/AVvXsEiKlg_QNmLKlbQdD6jB1EfYxuWLhhmL2-EIy1o_SgDTMRNxuiGk-NfP2EsO1rPRpFwPpWYXBXC1r6I1ZlvEW5Q_6qIACi_F9iNz8OZuRHs1jNTKF0OXWQIqRQTpvOCREkquawKudhWyuIg/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/AVvXsEiKlg_QNmLKlbQdD6jB1EfYxuWLhhmL2-EIy1o_SgDTMRNxuiGk-NfP2EsO1rPRpFwPpWYXBXC1r6I1ZlvEW5Q_6qIACi_F9iNz8OZuRHs1jNTKF0OXWQIqRQTpvOCREkquawKudhWyuIg/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/AVvXsEiKlg_QNmLKlbQdD6jB1EfYxuWLhhmL2-EIy1o_SgDTMRNxuiGk-NfP2EsO1rPRpFwPpWYXBXC1r6I1ZlvEW5Q_6qIACi_F9iNz8OZuRHs1jNTKF0OXWQIqRQTpvOCREkquawKudhWyuIg/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—>

 

Kodlarda renkli yazdığım yerlere kendi adreslerinizi yazmak dışında bir değişikliğe gerek yok. Bir sorunuz veya öneriniz olursa yorum bölümünden sorabilirsiniz.

6 yorum:

  1. çok güzel ellerinize sağlık

    YanıtlaSil
  2. Hocam ben de eklentiler ile sitemi zenginleştirmek istiyorum. fakat her eklediğim kod sitenin açılmaz hızını yavaşlatıyor. Dolayısı ile çok bir eklenti kurmak istemiyorum.
    Blogger sitelerin optimizasyonu ile bir yazı yayınlayacak mısınız?

    YanıtlaSil
  3. @Serdar
    Dengeyi tutturmak gerek. Dediğiniz gibi her eklediğimiz eklenti ve kod blogumuzun açılış hızını yavaşlatır. Optimizasyon konusunda da yapılacaklar sınırlı ama detaylı bir makale yazmaya çalışacağım.

    YanıtlaSil
  4. Optimizasyon konusundaki yazılarınızı ve yardımlarınızı bekliyoruz o zaman. Şimdiden teşekkür ederim.

    YanıtlaSil
  5. peki bunun sadece arama kısmını kullanmak için koddan tam olarak nereleri silmemiz lazım ?

    YanıtlaSil

Blogger tarafından desteklenmektedir.