KODBLOGCUM | Kod Paylaşımı: facebook beğen eklentisi

facebook beğen eklentisi etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Merhaba arkadaşlar,

bu yayınımda sizlere yeni bir blogger sosyal paylaşım eklentisinden bahseceğim.Kullanışlı zarif oluşu bloğunuza güzel bir hava oluşturacaktır.Üzerine geldiğimizde rengi değişen bu eklentiyi anlatayım.

Nasıl Eklenir?

-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapıştırıyoruz.


<style>#sosmed{margin:16px auto 5px;}
#sosmed li:hover{background-color:#414b5e;}
#sosmed li{line-height:30px;font-weight:400;margin:auto;margin-bottom:3px;border-radius:5px;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
#sosmed li a{padding:5px 5px 3px 14px;display:block;color:#fff;}
#sosmed li i{border-right:1px solid rgba(0,0,0,.2);padding-right:5px;margin-right:5px;width:15px;}
.bg-fb{background:#5772bb;}
.bg-tw{background:#3494e5;}
.bg-gp{background:#e34242;}</style>

<div>
<nav id="sosmed">
<ul>
<li class="bg-fb"><a href="#"><i class="fa fa-facebook"></i> Facebook'ta Takip Et</a></li>
<li class="bg-tw"><a href="#"><i class="fa fa-twitter"></i> Twitter'da Takip Et</a></li>
<li class="bg-gp"><a href="#"><i class="fa fa-google-plus"></i> Google+'da Takip Et</a></li>
</ul>
</nav></div>

# ile olan yerlere sosyal medya adreslerimizi yazıyoruz.

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Hazır Sosyal Paylaşım Eklentisi - 10

BLOGGER EKLENTİLERİ blogger sosyal medya facebook beğen eklentisi sosyal medya butonu

Unknown Çarşamba, Temmuz 01, 2015 3 Yorumlar

Unknown

Merhaba Arkadaşlar,

bu yayınımda sizlere blogger için hazır sosyal paylaşım eklentilerinden onuncusunu göstereceğim.Bir nevi yalancı bir eklenti de diyebiliriz çünkü eklentinin üzerinde takip sayısını kendimiz ayarlayabiliyoruz.Mesela Facebook için 2k+ şeklinde veya istediğimiz takipçi sayısını yazıyoruz.Güzel ve kullanışlı bir eklentidir.

Nasıl Kurulur?

-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapıştırıyoruz.Düzeltmemiz gereken yerleri aşağıda belirttim.

<style>
.btrix-social-slidebox {
    font: 16px normal 'Denk One', sans-serif;
    display: inline-block;
    position: relative;
    width: 95%;
    max-width: 200px; 
    padding: 12px;
}
.btrix-social-slide {
    width: 95%;
    max-width: 280px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.btrix-social-slide a {
    text-decoration: none !important; 
   }
.btrix-social-slide ul {margin-top:-5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.btrix-social-slide ul li {margin-bottom:15px;
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0;
 margin-left:10px;
}
.btrix-social-slide ul li a.facebook {
    border-left: 65px solid rgba(59, 89, 152, 1);
    color: rgba(59, 89, 152, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover {
    background: rgba(59, 89, 152, 1);
    border-left: 0px solid rgba(59, 89, 152, 0.1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.facebook:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.twitter {
    border-left: 65px solid rgba(64, 153, 255, 1);
    color: rgba(64, 153, 255, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover {
    background: rgba(64, 153, 255, 1);
    border-left: 0px solid rgba(64, 153, 255, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.twitter:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.gplus {
    border-left: 65px solid rgba(219, 74, 57, 1);
    color: rgba(219, 74, 57, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover {
    background: rgba(219, 74, 57, 1);
    border-left: 0px solid rgba(219, 74, 57, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.gplus:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest {
    border-left: 65px solid rgba(174, 45, 39, 1);
    color: rgba(174, 45, 39, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.btrix-social-slide ul li a.pinterest p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.pinterest:hover {
    background: rgba(174, 45, 39, 1);
    border-left: 0px solid rgba(174, 45, 39, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.pinterest:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}

.btrix-social-slide ul li a.rss {
    border-left: 65px solid rgba(255, 102, 0, 1);
    color: rgba(255, 102, 0, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss:hover {
    background: rgba(255, 102, 0, 1);
    border-left: 0px solid rgba(255, 102, 0, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}

.btrix-social-slide ul li a.rss:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
</style>

<div class="btrix-social-slide">
    <ul>
        <li><a class="btrix-social-slidebox facebook" href="https://www.facebook.com/kodblogcum"><p>17</p>Facebook </a></li>
        <li><a class="btrix-social-slidebox twitter" href="https://twitter.com/kodblogcum"><p>50+</p>Twitter</a></li>
        <li><a class="btrix-social-slidebox gplus" href="https://plus.google.com/#"><p>40+&nbsp;</p>Google+</a></li>
        <li><a class="btrix-social-slidebox pinterest" href="http://pinterest/kodblogcum"><p>20+&nbsp;</p>Pinterest</a></li>
        <li><a class="btrix-social-slidebox rss" href="http://feeds.feedburner.com/kodblogcum"><p>11+</p>RSS</a></li>
    </ul>
</div>

-Yukarda kodblogcum yazan yerlere kendi sosyal medya adreslerimizi yazıyoruz.
-# ile olan yerede Google Plus adresimizi yazıyoruz.

Yardım için yoruma yazabilirsiniz...Sağlıcakla Kalın...

Sayfada Aşağı İnince Sağda Çıkan Sosyal Medya Eklentisi

BLOGGER EKLENTİLERİ blogger sosyal medya facebook beğen eklentisi SOSYAL MEDYA sosyal medya butonu

Unknown Çarşamba, Temmuz 01, 2015 Yorum Yapmak İstermisiniz?

Unknown

Merhaba Arkadaşlar,

bu yayınımda sizlere değişik bir sosyal medya eklentisinden bahsedeceğim.Sayfada aşağı doğru indikçe sağ altta çıkan sosyal medya.Bu eklenti kullanıcınında dikkatini çekecektir sayfalarda dolaşırken sürekli karşısına çıkması sizi sosyal medyada takip etmeye yönlendirir.

Nasıl Kurulur?

-Blogger Admin Panel > Yerleşim > Gadget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu yapışıtırıyoruz düzeltmemiz gereken yerleri renkli olarak gösterdim.

Bu eklentiyi herhangi bir gadgete ekleyebiliriz illaki sağdaki gadget olacak diye bir şey yok.

<style>
#socialslide{background: rgb(41, 40, 40) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQtFra9gDN8AT_mmmMboQOLKI1RnJi2ptJmertLZxUm9hQyoBQZFRvpXrU8WV1lMZbvomYZktirqNdwFno_dbeoPMxk_GfomGCjRQLwqg-yRy-oBMqpy1ZG4pUBcodQJdg9v22JQdMi2Q/s1600/recbg-btrix.png) left top repeat-x;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
-moz-box-shadow: inset 0 0 3px #333;
-webkit-box-shadow: inset 0 0 3px #333;
box-shadow: inner 0 0 3px #333;
padding: 12px 14px 12px 14px;
width: 300px;
position: fixed;
bottom: 13px;
right: 2px;
display: none;
z-index: 3;
height: 65px;
}
</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#socialslide").show("slow");else $("#socialslide").hide("slow");});function closesocialslide(){$('#msocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
<div id="socialslide" style="display: none;">
<a href="javascript:void(0);" onclick="return closesocialslide();" style="color: #555555; font-size: 10px; font-weight: bold; position: absolute; right: 10px; top: 14px;">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Sosyal Medyada Takip Et!</span><br />
<div style="float: left; margin: 15px;">
<g:plusone annotation="none"></g:plusone></div>
<div style="float: left; margin: 15px;">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fkodblogcum&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" style="border: none; height: 21px; overflow: hidden; width: 80px;"></iframe></div>
<div style="float: left; margin: 15px;">
<a class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-size="large" href="https://twitter.com/kodblogcum">Takip Et @kodblogcum</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
</div>
<div class="clear">
</div>

-Yukarda kodblogcum yazan yerlere sosyal medya kullanıcı adreslerimizi yazıyoruz.

Sağdan Açılır Facebook Beğen Eklentisi

BLOGGER EKLENTİLERİ facebook beğen eklentisi

Unknown Pazartesi, Haziran 22, 2015 Yorum Yapmak İstermisiniz?

Unknown

Merhaba Arkadaşlar,

bu yayınımda sizlere sağdan açılır Facebook beğen eklentisinden bahseceğim.Bloglarda önemli olan şeylerden biri sosyal medyada takipçi kazanabilmektir.Bunu bu eklenti sayesinde yapabilirsiniz blogunuza giren ziyaretçinin gözüne çarpan bu eklenti hangi sayfada olursanız olun sağda görenecektir.

Peki bu eklenti nasıl eklenir?

Adım 1:

Blogger Admin Panel > Yerleşim > Widget Ekle > Html/JavaScript diyoruz ve aşağıdaki kodu ekliyoruz.

Yukarda http%3A%2F%2Ffacebook.com%2Fkodblogcum yazan yere kendi facebook adresinizi yazıyorsunuz.

Adım 2:
Blogger Admin Panel > Şablon > Html'yi Düzenle diyoruz ve </head> kodunu bulup hemen üstüne aşağıdaki kodu ekliyoruz.

Hepsi bu kadar sağlıcakla kalın....İyi bloglamalar...

Blogger Hazır Sosyal Paylaşım Eklentisi - 12

Hazır Sosyal Paylaşım Eklentisi - 10

Sayfada Aşağı İnince Sağda Çıkan Sosyal Medya Eklentisi

Sağdan Açılır Facebook Beğen Eklentisi