Blog 3D Sosyal Paylaşım Bütonları ve Abone Ol Eklentisi

2/05/2016
Blogger blogspot butonlar

Blog 3D Sosyal Paylaşım Bütonları ve Abone Ol Eklentisi - CSS ile benzersiz, temiz ve zarif tarıma sahip pushable sosyal paylaşım düğmeleri 2016.

Sosyal Paylaşım Bütonları ve Abone Ol Eklentisi 3D Görünümlü


3D görünüme sahip olan bütonları ile okuyucularınızın ilgisini çekmeyi artırabilirsiniz. Ve içerisinde ABONE OL eklentisiyle blogunuza estetik katın. Blogunuzun görünümü içerik kadar önemlidir. Ziyaretçilerin ilgisini çekebilmek için ve blogunuzun daha hızlı yayılarak büyümesini sağlamak için sade ve harika görünümlü menülere ve bütonlara sahip olmalısınız. Şimdi bütonları eklemek için;

1- Blogger kontrol paneli > Tema > HTML'i Düzenle
2- Şablonu yedekleyelim
3- HTML düzenle
4- Şimdi Ctrl+F yardımıyla ]]></b:skin> yada </style> aratarak aşağıdaki CSS kodunu ]]></b:skin> yada </style> kodunun bir satır üzerine ekliyoruz.

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
#pmmash {
    margin: 0 auto;
    padding: 20px;
    border-style: solid;
    border-color: #34495e;
    border-width: 5px;
    background: #ecf0f1;
    max-width: 450px
}
#pmmash a {
    color: white
}
.roundbtn {
    width: 85px;
    height: 85px;
    border: 5px solid #9a9a9a;
    display: inline-block;
    background-color: #6c6161;
    -moz-border-radius: 75px;
    -webkit-border-radius: 75px;
    border-radius: 75px;
    -moz-transition: all 35ms linear;
    -o-transition: all 35ms linear;
    -webkit-transition: all 35ms linear;
    transition: all 35ms linear;
    -ms-transition: all 35ms linear;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none
}
.roundbtn.sea {
    border: 5px solid #1abc9c;
    background-color: #16a085
}
.roundbtn.red {
    border: 5px solid #e74c3c;
    background-color: #c0392b
}
.roundbtn.blue {
    border: 5px solid #51a9ff;
    background-color: #0077ea
}
.roundbtn.dark {
    border: 5px solid #34495e;
    background-color: #2c3e50
}
.roundbtn .inner {
    position: relative;
    width: 75px;
    height: 75px;
    background-color: #9a9a9a;
    margin-top: -8px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -moz-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
    -o-transition: margin 35ms 35ms linear, box-shadow 35ms linear;
    -webkit-transition: margin 35ms 35ms, box-shadow 35ms linear;
    -webkit-transition-delay: linear, 0s;
    transition: margin 35ms 35ms linear, box-shadow 35ms linear;
    -ms-transition: margin 35ms 35ms linear, box-shadow 35ms linear
}
.roundbtn.sea .inner {
    background-color: #1abc9c
}
.roundbtn.red .inner {
    background-color: #e74c3c
}
.roundbtn.blue .inner {
    background-color: #51a9ff
}
.roundbtn.dark .inner {
    background-color: #34495e
}
.roundbtn:active .inner {
    margin-top: 0;
    -moz-box-shadow: #6c6161 0 8px 0 inset;
    -webkit-box-shadow: #6c6161 0 8px 0 inset;
    box-shadow: #6c6161 0 8px 0 inset;
    -moz-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
    -o-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
    -webkit-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms;
    -webkit-transition-delay: 0s, linear;
    transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear;
    -ms-transition: margin 35ms linear, box-shadow 17.5ms 17.5ms linear
}
.roundbtn:active.sea .inner {
    -moz-box-shadow: #16a085 0 8px 0 inset;
    -webkit-box-shadow: #16a085 0 8px 0 inset;
    box-shadow: #16a085 0 8px 0 inset
}
.roundbtn:active.red .inner {
    -moz-box-shadow: #c0392b 0 8px 0 inset;
    -webkit-box-shadow: #c0392b 0 8px 0 inset;
    box-shadow: #c0392b 0 8px 0 inset
}
.roundbtn:active.blue .inner {
    -moz-box-shadow: #0077ea 0 8px 0 inset;
    -webkit-box-shadow: #0077ea 0 8px 0 inset;
    box-shadow: #0077ea 0 8px 0 inset
}
.roundbtn:active.dark .inner {
    -moz-box-shadow: #2c3e50 0 8px 0 inset;
    -webkit-box-shadow: #2c3e50 0 8px 0 inset;
    box-shadow: #2c3e50 0 8px 0 inset
}
.text {
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    font-family: Courier New;
    font-size: 13px;
    color: white;
    font-weight: 300;
    letter-spacing: 1px;
    text-shadow: rgba(0, 0, 0, 0.5) 0 0 5px
}
#subscriber-foot {
    display: block;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0 0;
}
#subscriber-foot p {
    margin: 1em 0
}
#subscriber-foot .emailfooter {
    margin: auto;
    text-align: center;
}
#subscriber-foot .emailfooter form {
    margin: 0;
    padding: 0;
}
#subscriber-foot .emailfooter input {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    padding: 12px;
    color: #999;
    font-size: 14px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
#subscriber-foot .emailfooter input:hover {
    border-color: rgba(0, 0, 0, .24);
}
#subscriber-foot .emailfooter input:focus {
    color: #000;
    outline: none;
    border-color: #66afe9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}
#subscriber-foot .emailfooter .submitfooter {
    background: #7f8c8d;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    border: 0;
    margin-bottom: 0;
    border-radius: 3px;
    overflow: hidden;
    transition: all .3s;
    padding: 14px;
}
#subscriber-foot .emailfooter .submitfooter:hover {
    background: #e67e22;
    color: #fff;
    outline: none;
    box-shadow: none
}
#subscriber-foot .emailfooter .submitfooter:active {
    color: #fff;
    outline: none;
    box-shadow: none
}

5- CSS kodlarını ekledikten sonra şablonu kaydedin. Aşağıdaki HTML kodları blogunuzun kontrol panelinde bulunan yerleşim sayfasından widget oluşturarak HTML kodları widget içerisine ekleyin ve kaydedin.

<div id="pmmash">
<div id="pmmash2">
<div class="roundbtn dark">
<div class="inner"><span class="text"><a href="Facebook URL"><i class="fa fa-facebook fa-2x"></i></a></span>
</div>
</div>
<div class="roundbtn red">
<div class="inner"><span class="text"><a href="Google+ URL"><i class="fa fa-google-plus fa-2x"></i></a></span>
</div>
</div>
<div class="roundbtn blue">
<div class="inner"><span class="text"><a href="Twitter URL"><i class="fa fa-twitter fa-2x"></i></a></span>
</div>
</div>
<div class="roundbtn sea">
<div class="inner"><span class="text"><a href="LinkedIn URL"><i class="fa fa-linkedin fa-2x"></i></a></span>
</div>
</div>
</div>
<div class="footer-menu" id="subscriber-foot">
<div class="emailfooter">
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/YRCZsC', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-posta adresiniz&quot;;}" onfocus="if (this.value == &quot;E-posta adresiniz&quot;) {this.value = &quot;&quot;;}" type="text" value="E-posta adresiniz">
<input name="uri" type="hidden" value="blogspot/YRCZsC">
<input name="loc" type="hidden" value="tr_TR">
<input class="ripplelink submitfooter" type="submit" value="Gönder">
</form>
</div>
</div>
</div>


Şimdi buradaki değişiklikleri yapmalısınız.

1- Facebook URL yazan yere sizin facebook sayfanızın url'sini ekleyin.
2- Google+ URL yazan yere sizin google+ sayfanızın url'sini ekleyin.
3- Twitter URL yazan yere sizin twitter sayfanızın url'sini ekleyin.
4- LinkedIn URL yazan yere sizin linkedin sayfanızın url'sini ekleyin.
5- Şimdi HTML kod içerisinde (blogspot/YRCZsC) yazan yere sizin Feedburner Email Besleme ID'sini ekleyin.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

Hiç yorum yok