Blog Dairesel Sosyal Ağ Butonları

Dairesel sosyal medya takip butonları ile blogger sitenizin sosyal medya sayfalarını ziyaretçileriniz tarafından ilgi çekici hale getirin.

Blog sitelerinde bugüne kadar bir çok sosyal paylaşım ve sosyal medya takip butonları yayınlandı. Bugün sizlerle Blogger Eklentileri ailesi olarak şık tasarımıyla blog sitenize değer katacak olan dairesel açılır sosyal medya butonlarını sizlerle paylaşıyoruz.

Blog Dairesel Sosyal Ağ Butonları Nasıl Eklenir?

1. Blogger hesabınıza giriş yapın ve eklemek istediğiniz blogun kumanda panelinden Şablon > HTML'i Düzenle tıklayın ve CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> yada </style> kodunun bir satır üzerine ekleyin.

*,*:before,*:after{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
.absolute-center,.blogdaire,.blogdaire .btn .fa,.blogdaire .btn.trigger .line{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}
.blogdaire{width:5em;height:5em}
.blogdaire .btn{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background:#237dac;color:#fff;opacity:0;z-index:-10;cursor:pointer;-webkit-transition:all 1s,z-index 0.3s,-webkit-transform 1s;transition:all 1s,z-index 0.3s,transform 1s;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
.blogdaire .btn .fa{font-size:3em;-webkit-transition:color 0.3s;transition:color 0.3s}
.blogdaire .btn:hover .fa{color:#fff}
.blogdaire .btn:hover{background:#e77600}
.blogdaire .btn.trigger{opacity:1;z-index:100;cursor:pointer;-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s}
.blogdaire .btn.trigger:hover{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);background-color:#f5f7fa;color:#30abd5}
.blogdaire .btn.trigger:hover .line{background-color:#30abd5}
.blogdaire .btn.trigger:hover .line:before,.blogdaire .btn.trigger:hover .line:after{background-color:#30abd5}
.blogdaire .btn.trigger .line{width:60%;height:6px;background:#fff;border-radius:6px;-webkit-transition:background-color 0.3s,height 0.3s,top 0.3s;transition:background-color 0.3s,height 0.3s,top 0.3s}
.blogdaire .btn.trigger .line:before,.blogdaire .btn.trigger .line:after{content:"";display:block;position:absolute;left:0;width:100%;height:6px;background:#fff;border-radius:6px;-webkit-transition:background-color 0.3s,-webkit-transform 0.3s;transition:background-color 0.3s,transform 0.3s}
.blogdaire .btn.trigger .line:before{top:-12px;-webkit-transform-origin:15% 100%;-ms-transform-origin:15% 100%;transform-origin:15% 100%}
.blogdaire .btn.trigger .line:after{top:12px;-webkit-transform-origin:25% 30%;-ms-transform-origin:25% 30%;transform-origin:25% 30%}
.blogdaire .rotater{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}
.blogdaire.active .btn-icon{opacity:1;z-index:50}
.blogdaire.active .trigger .line{height:0;top:45%}
.blogdaire.active .trigger .line:before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);width:110%}
.blogdaire.active .trigger .line:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);width:110%}
.rotater:nth-child(1){-webkit-transform:rotate(-22.5deg);-ms-transform:rotate(-22.5deg);transform:rotate(-22.5deg)}
.blogdaire.active .rotater:nth-child(1) .btn-icon{-webkit-transform:translateX(-10em) rotate(22.5deg);-ms-transform:translateX(-10em) rotate(22.5deg);transform:translateX(-10em) rotate(22.5deg)}
.rotater:nth-child(2){-webkit-transform:rotate(22.5deg);-ms-transform:rotate(22.5deg);transform:rotate(22.5deg)}
.blogdaire.active .rotater:nth-child(2) .btn-icon{-webkit-transform:translateX(-10em) rotate(-22.5deg);-ms-transform:translateX(-10em) rotate(-22.5deg);transform:translateX(-10em) rotate(-22.5deg)}
.rotater:nth-child(3){-webkit-transform:rotate(67.5deg);-ms-transform:rotate(67.5deg);transform:rotate(67.5deg)}
.blogdaire.active .rotater:nth-child(3) .btn-icon{-webkit-transform:translateX(-10em) rotate(-67.5deg);-ms-transform:translateX(-10em) rotate(-67.5deg);transform:translateX(-10em) rotate(-67.5deg)}
.rotater:nth-child(4){-webkit-transform:rotate(112.5deg);-ms-transform:rotate(112.5deg);transform:rotate(112.5deg)}
.blogdaire.active .rotater:nth-child(4) .btn-icon{-webkit-transform:translateX(-10em) rotate(-112.5deg);-ms-transform:translateX(-10em) rotate(-112.5deg);transform:translateX(-10em) rotate(-112.5deg)}
.rotater:nth-child(5){-webkit-transform:rotate(157.5deg);-ms-transform:rotate(157.5deg);transform:rotate(157.5deg)}
.blogdaire.active .rotater:nth-child(5) .btn-icon{-webkit-transform:translateX(-10em) rotate(-157.5deg);-ms-transform:translateX(-10em) rotate(-157.5deg);transform:translateX(-10em) rotate(-157.5deg)}
.rotater:nth-child(6){-webkit-transform:rotate(202.5deg);-ms-transform:rotate(202.5deg);transform:rotate(202.5deg)}
.blogdaire.active .rotater:nth-child(6) .btn-icon{-webkit-transform:translateX(-10em) rotate(-202.5deg);-ms-transform:translateX(-10em) rotate(-202.5deg);transform:translateX(-10em) rotate(-202.5deg)}
.rotater:nth-child(7){-webkit-transform:rotate(247.5deg);-ms-transform:rotate(247.5deg);transform:rotate(247.5deg)}
.blogdaire.active .rotater:nth-child(7) .btn-icon{-webkit-transform:translateX(-10em) rotate(-247.5deg);-ms-transform:translateX(-10em) rotate(-247.5deg);transform:translateX(-10em) rotate(-247.5deg)}
.rotater:nth-child(8){-webkit-transform:rotate(292.5deg);-ms-transform:rotate(292.5deg);transform:rotate(292.5deg)}
.blogdaire.active .rotater:nth-child(8) .btn-icon{-webkit-transform:translateX(-10em) rotate(-292.5deg);-ms-transform:translateX(-10em) rotate(-292.5deg);transform:translateX(-10em) rotate(-292.5deg)}
.rotater:nth-child(9){-webkit-transform:rotate(337.5deg);-ms-transform:rotate(337.5deg);transform:rotate(337.5deg)}
.blogdaire.active .rotater:nth-child(9) .btn-icon{-webkit-transform:translateX(-10em) rotate(-337.5deg);-ms-transform:translateX(-10em) rotate(-337.5deg);transform:translateX(-10em) rotate(-337.5deg)}

2. </body> kodunu bulun ve aşağıdaki JavaScript kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<script src='https://googledrive.com/host/0B2RaeOjprqzBQzBxWHRxVGY5RWM' tipi='text/javascript'/>

3. Blogunuzun kumanda panelinden Yerleşim > Gadget Ekle > HTML/JavaScript Ekle tıklayın ve aşağıdaki HTML kodu HTML/JavaScript içene ekleyin ve kaydedin. Bir başka seçenek ise blogunuzun Hakkında yada blogunuzun tanıtıp sayfasına da ekleyebilirsiniz. Bunu yapmak için Blog Hakkında yada Blog Tanıtım Sayfasına gelerek HTML kısmına ekleyebilirsiniz.

<div class="blogdaire">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="rotater"><a  href="#">
<div class="btn btn-icon">
<i class="fa fa-codepen"></i>
</div></a>
</div>
<div class="rotater"><a  href="#">
<div class="btn btn-icon">
<i class="fa fa-facebook"></i>
</div></a>
</div>
<div class="rotater"><a  href="#">
<div class="btn btn-icon">
<i class="fa fa-google-plus"></i>
</div></a>
</div>
<div class="rotater"><a  href="#">
<div class="btn btn-icon">
<i class="fa fa-twitter"></i>
</div></a>
</div>
<div class="rotater"><a  href="#">
<div class="btn btn-icon">
<i class="fa fa-dribbble"></i>
</div></a>
</div>
<div class="rotater"><a  href="#">
<div class="btn btn-icon">
<i class="fa fa-linkedin"></i>
</div></a>
</div>
<div class="rotater"><a  href="#">
<div class="btn btn-icon">
<i class="fa fa-github"></i>
</div></a>
</div>
<div class="rotater"><a  href="#">
<div class="btn btn-icon">
<i class="fa fa-behance"></i>
</div></a>
</div>
</div>

extension Blogger Eklentileri
Blog Dairesel Sosyal Ağ Butonları hakkında daha fazla bilgi için iletişim sayfasından yada yorum bölümünden bize ulaşabilirsiniz.

4. Dairesel Sosyal Ağ Butonları Renkleri.
5. Dairesel Sosyal Ağ Butonları Simgeleri.