Blogger 3D Sosyal Paylaşım Butonları Ve Abone Ol Widgeti Ekleme

Sosyal paylaşım butonları ve e-mail aboneliği bir blog için oldukça önemlidir. Çünkü yazılarınızın paylaşılmaya ihtiyacı vardır. Bu eklenti sayesinde blogunuza 3D tasarımma sahip sosyal medya paylaşım butonları ekleyebileceksiniz. Ayrıca eklenti içerisinde ki e-mail aboneliği ile blogunuza takipçiler kazandırabileceksiniz. Bu şekilde blogunuz daha hızlı büyüme eğilimi gösterecek.

Yazının devamında blogger sosyal paylaşım butonlarını sitenize nasıl ekleyeceğinizi öğrenebilirsiniz.

3D Görünümlü Sosyal Paylaşım Butonları Ve Abone Ol Eklentisi Blogger'a Nasıl Eklenir ?

Sosyal paylaşım butonları ve abone ol eklentisi ile blogunuza şıklık ve daha çok takipçi kazandırabileceksiniz. Bunun için yapmanız gerekenler ;

Birinci adım : Blogger kontrol panelinize giriş yapınız. Ardından "Tema> HTML'yi düzenle" yollarını izleyerek blog şablon kodlarınıza ulaşın.

İkinci adım : Blog kodlarınız içerisinde CTRL+F yardımı ile ]]></b:skin> yada </style> kodunu aratarak aşağıdaki CSS kodlarını ilgili kodun bir satır üzerine ekliyoruz.

CSS KODLARI

*,
*: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
}

Üçüncü adım : CSS kodlarını ekledikten sonra şablonu kaydedin ve aşağıdaki HTML kodlarını blogger yerleşim panelinizden yeni HTML/JavaScript widget'i oluşturarak kodları widget içerisine ekleyin.

HTML KODLARI

<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>

Dördüncü adım : HTML kodları içerisinde belirttiğim yerleri kendinize göre değiştirmelisiniz.

Facebook URL : Kendi facebook sayfanızın URL'sini ekleyin.
Google+URL: Kendi google+ sayfanızın URL'sini ekleyin.
Twitter URL : Kendi twitter sayfanızın URL'sini ekleyin.
Linkedin URL : Kendi linkedin URL'nizi ekleyin.
blogspot/YRCZsC : Kendi feedburner besleme ID'nizi ekleyin.

Feedburner besleme ID'nizi bilmiyorsanız Feedburner sitesine girerek Edit Feed Details kısmından Feed adres bölümündeki kutucuğun içerisinde yazanlar feedburner ID'nizdir.

Ön İzleme

Ön izleme için aşağıki kodları kopyalayıp KOD ÖN İZLEME sayfamızda test ederek inceleyebilirsiniz.

ÖN İZLEME KODLARI

<!DOCTYPE html>
<html>
<head>
<title>Kodeks Editör</title>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' />
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family: 'Fira Sans Condensed', sans-serif;
-webkit-font-smoothing: antialiased;margin: 30vh auto 0 auto;text-align: center;}
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#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
}
</style>
</head>
<body>
<div id="pmmash">
<div id="pmmash2">
<div class="roundbtn dark">
<div class="inner"><span class="text"><a href="http://bloggereklentileri.blogspot.com/2016/02/blog-3d-sosyal-paylasm-butonlar-ve.html"><i class="fa fa-facebook fa-2x"></i></a></span>
</div>
</div>
<div class="roundbtn red">
<div class="inner"><span class="text"><a href="http://bloggereklentileri.blogspot.com/2016/02/blog-3d-sosyal-paylasm-butonlar-ve.html"><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="http://bloggereklentileri.blogspot.com/2016/02/blog-3d-sosyal-paylasm-butonlar-ve.html"><i class="fa fa-twitter fa-2x"></i></a></span>
</div>
</div>
<div class="roundbtn sea">
<div class="inner"><span class="text"><a href="http://bloggereklentileri.blogspot.com/2016/02/blog-3d-sosyal-paylasm-butonlar-ve.html"><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>
</body>
</html>