.jpg)
15 Ocak 2014 Çarşamba
Blogger Resimli Son Yorumlar Eklentisi
Bu eklentimiz ise blogumuza yapılan son yorumların sağ tarafta sidebarda görünmesini sağlıyor. Üstelik resimli son yorumlar göstermekte. Eklenti tek koddan oluşmakta otomatik olarak resimli bir şekilde göstermekte. Hiçbir ayar gerektirmez isterseniz anlatıma ve kodlara gelelim.
Yerleşim > Gadget Ekle > HTML / JAVASCRİPT yolunu izliyoruz ve alttaki kodları kutucuğa giriyoruz.
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0; list-style-type:none; padding-top:5px; }
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none; list-style-type:none}
.w2b_recent_comments li a{font-weight:bold; list-style:none; list-style-type:none}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 10,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "Git »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/60346665/bloghocam-resimli-son-yorumlar.js"></script>
<script type="text/javascript" src="http://www.noteaz.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
İlgili Aramalar: blogger son yorumlar eklentisi, blogger resimli son yorumlar, son yorumlar, son yorumlar eklemek, blogger eklentileri, blogger
Etiketine Sahip Kayıtlar Gösteriliyor Yazısını Kaldırmak
Biliyorsunuz ki bir sayfadan diğer sayfaya geçerken üstte "Etiketine Sahip Kayıtlar Gösteriliyor" yazmakta. Bu yazı ve arkaplanı temamız ile uyuşmamakta. Biz bunu küçük bir kod sayesinde ortadan kaldıracağız.
Öncelikle temamızdan aşağıda ki kodu buluyoruz.
<b:includable id='status-message'> <b:if cond='data:navMessage'> <div class='status-msg-wrap'> <div class='status-msg-body'> <data:navMessage/> </div> <div class='status-msg-border'> <div class='status-msg-bg'> <div class='status-msg-hidden'><data:navMessage/></div> </div> </div> </div> <div style='clear: both;'/> </b:if> </b:includable>
Yukarıda bulduğumuz kodların tamamını aşağıda ki kodlarla değiştiriyoruz.
<b:includable id='status-message'> <b:if cond='data:navMessage'> <div> </div> <div style='clear: both;'/> </b:if> </b:includable>
İlgili Aramalar: blogger etiketine sahip kayıtlar gösteriliyor yazısını kaldırmak, etiketine sahip kayıtlar gösteriliyor, etiketine sahip kayıtlar gösteriliyor yazısını kaldırmak, blogger eklentileri, blogger
Blogger Yazı İçine Sosyal Ağlarda Paylaş Butonu Ekleyin
Bu yazımızda blogumuzda herhangi bir yazımıza paylaş butonları ekleyeceğiz. Bu sayede ziyaretçileriniz blogunuzda okuduğu makaleleri sosyal ağlarda paylaşabilecek. Üstelik paylaştığımız eklenti çok hoş bir görünüme sahip. İsterseniz anlatıma ve kodlara geçelim.
Aşağıdaki kodu CSS bölümüne ekliyoruz.
#bh-paylas {
width:560px;
height:30px;
}
ul.bh-sosyal {
list-style:none;
display:inline-block;
margin:auto;
}
ul.bh-sosyal li {
display:inline;
float:left;
background-repeat:no-repeat;
margin:auto;
margin-right:4px;
}
ul.bh-sosyal li a {
display:block;
width:182px;
height:33px;
position:relative;
text-decoration:none;
}
ul.bh-sosyal li.bh-facebook {
background-image:url(http://1.bp.blogspot.com/-dQHwOYDM9VE/Ub4deG_tBzI/AAAAAAAABR8/FgxvbQ5xREg/s1600/facebook.png);
}
ul.bh-sosyal li.bh-twitter {
background-image:url(http://3.bp.blogspot.com/-MGGVJ0DGWjU/Ub4deARZVMI/AAAAAAAABSE/RRIPQvxlHXk/s1600/twitter.png);
}
ul.bh-sosyal li.bh-googleplus {
background-image:url(http://4.bp.blogspot.com/-LgrkzbtK1OM/Ub4deCj49sI/AAAAAAAABSA/Iy9DPbmqjgI/s1600/google+.png);
}
Daha sonra data:post.body kodunu temamızdan buluyoruz ve altına aşağıdaki kodu ekliyoruz.
<b:if cond='data:blog.pageType == "item"'> <div id='bh-paylas'> <ul class='bh-sosyal'> <li class='bh-facebook'> <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'/> </li> <li class='bh-twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'/> </li> <li class='bh-googleplus'> <a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'/> </li> </ul></div> </b:if>
Blogger Anonim Yorumlara Kendi Avatarınızı Ekleyin
Bu eklentimiz ise pek görülmemiş veya kullanılma sayısı bir az eklenti. Blogunuza adsız yani anonim yorum yapan kişilerde blogger altyapısında kullanılan anonim avatarı yerleşmekte. Fakat vereceğimiz kod sayesinde istediğiniz avatarı anonim yorumlarda gösterebilceksiniz.
Eklentinin kurulumu:
Blogger şablonunuza girip aşağıdaki kodu aratın.
</body>
Kodu bulduktan sonra hemen üzerine gelecek şekilde aşağıdaki kodu ekleyin
<script src='http://code.jquery.com/jquery-latest.js'/> <script> $("img[src='http://img1.blogblog.com/img/anon36.png']") .attr('src', 'Anonim Yorumlarda Görülmesini İstediğiniz Resim URL') .ssyby('blank') </script>
Not: Kod içerisinde yazan cümlenin yerine anonim yorumlarda göstermek istediğiniz resmin avatarını ekliyoruz.
Blogger’da ‘Yorum Gönder’ Yazısının Yerine Resim Koymak
Blogger yorum kutusu biliyorsunuz ki her nekadar da olsa göze hoş görünmüyor. Fakat biz bunun yanına ekleyeceğimiz eklentiler ile daha hoş görünüme sahip olacak. Sadece css ile yapılan bu eklenti yorum kutunuzda güzel ve görünüşlü bir bölüm olacak. İsterseniz eklenti anlatımına ve bir demoya göz atalım.
Demo
Aşağıdaki kodu temamızdan buluyoruz.
Bulduğumuz kodun üstüne aşağıdaki kodu ekliyoruz ve kaydediyoruz.
Demo
Aşağıdaki kodu temamızdan buluyoruz.
]]></b:skin>
Bulduğumuz kodun üstüne aşağıdaki kodu ekliyoruz ve kaydediyoruz.
#comment-post-message {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPmhv5-xDKRZfu8z-B6EKst4KvCSJpighmx5tOxFrSpLn2r985HtUP0mm6t1Dzb4Qt2Py_Aob06aVXLjE9RfkZOcRzvef7QDLlp_uahDGL6X_c6pu8GW2KamuVxU0hgOc6rTqESUfb1Bvi/s1600/yorum.png") no-repeat scroll left top transparent;
height:52px;
margin-bottom:10px;
text-indent:-9999px;
width:485px;
}
Blogger Animasyonlu Buton Eklentisi
Blogunuza bir şıklık getirecek eklenti ile karşınızdayız. Bu eklentimiz ise blogunuzda paylaştığınız bağlantı linklerine verilebilecek buton örneğinden birisi. Üzerine gelince arkaplanda ki kutucukların hareketlenmesiyle şıklık veren bu butonu sitemizde sizler için paylaşıyoruz. İsterseniz anlatıma ve canlı bir demoya geçelim.
Aşağıda ki kodu temamızdan buluyoruz.
]]></b:skin>
Hemen üstüne aşağıda ki kodu ekliyoruz.
.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH_orLj1HImF7OLGWAOPi5nODxaoVBjYw-Xtbhc8FVCmrcy7LPDDwSZelaReUwUv6t5DSf9aeIuyL6yfJA_liYvT6sTJxupjnxQTvH65IIyLZsU5b9RkOB48OcIF6_OmVsCrkeipqRMieC/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
Butonları Kullanmak için aşağıdaki kodları kullanıyoruz..
<a class="button big blue" href="LİNK/URL" target="_blank">Buton Yazısı</a> <a class="button big orange" href="LİNK/URL" target="_blank">Buton Yazısı</a> <a class="button big green" href="LİNK/URL" target="_blank">Buton Yazısı</a> <a class="button big gray" href="LİNK/URL" target="_blank">Buton Yazısı</a>
Blogger Yazı İçine Adsense Koymak
Bu ipucumuzda ise blogunuza aldığınız adsenseyi yazı içinde göstermeyi anlatacağız. Basit bir işlem olsada kodlamadan anlamayanlar için zor olabiliyor. İsterseniz sizleri anlatıma ve kodlara yönlendirelim.
Aşağıda ki kodu temamızdan buluyoruz.
<data:post.body/>
Ve hemen altına adsense reklam kodlarını yerleştiriyoruz ve kaydediyoruz.
Blogger Sonsuz Scroll Eklentisi
Bu eklentimizi bilen veya gören vardır sanırım genellikle Tumblr bloglarında çok kullanılır. Aşağıya indikçe yazıları kendisi açmaktadır yani siz ileri - geri tuşlarına basmaya gereği kalmaz. Yalnız eklentinin tek sorunu var özel yapım temalarda çalışmayabilir yani blogger altyapısının özel ürettiği bir tema kullanıyorsanız sorun çıkmayabilir fakat özel temalarda hata verebilir.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='http://www.fieg.nl/wp-content/themes/fieg-b/js/jquery.ias.min.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery.ias({
container : '.blog-posts',
item: '.post-outer',
pagination: '#blog-pager',
next: '#blog-pager-older-link a',
loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifGhpEcOwbzm6RjfmW8ZxY9j4kidEbOuG47-fDsgPO53PLDtJS0KtLVeeQ5DlBNAQ88GdzGKURIiTC19BlcrjaKM3ujT30BzBPjIZte1dhdJKq2Ffnv1xJaB8DIB41eMODGx6OVmhJEzXS/s1600/loading.gif'
});
</script>
Yukarıda ki kodları aşağıdaki kodun altına yerleştiriyoruz.
<head>
Temayı kaydediyoruz.
Blogger SEO Uyumlu Meta Tag ve Title Ayarı
Seo nedir diye bir özet geçeyim. SEO sitenizi aramalardan üste çıkarmaya yaramaktadır. Bu yüzden temanızı ona göre uyumlu olması da gerekli. Bu ipucumuzda ise aramalarda sitenizin açıklaması, başlığı, konu başlığı ve yazar bilgileri ayarlama görevini yapmakta. İsterseniz sizlere anlatıma ve kodlara yönlendirelim.
Tasarım kodları arasında CTRL+F ile aşağıdaki kodu bulun.
<head>
Bulduğumuz kodun hemen altına aşağıdaki kodları ekliyoruz.
<b:if cond='data:blog.url == data:blog.homepageUrl'> <meta content='Buraya blogunuzun tanımı gelecek' name='description'/> <meta content='Buraya aralarında virgül olacak şekilde birkaç etiket girmeniz gerekiyor. Standart olarak 20 etiketi aşmayın derim.' name='keywords'/> <meta content='Adınız' name='Name'/> <meta content='root' name='author'/> <meta content='Yapımcının adı' name='Creator'/> <meta content='Paylaşımcının adı' name='Publısher'/> <meta content='Bazı Hakları Saklıdır' name='Copyrıght'/> <meta content='Global' name='Dıstrıbutor'/> <meta content='General' name='Ratıng'/> <meta content='All' name='Robots'/> <meta content='1 days' name='Revısıt-After'/> </b:if> <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/> « <data:blog.title/></title> </b:if>
Yukarıda ki kodları kendinize göre düzenlemeniz yeterli olacaktır. Sadece Google'ın sitenizin ana sayfasını indexlemesi ile arama mototrlarında ki bilgileriniz yaptığınız ayara göre düzelecektir.
Blogger İletişim Formunu Sayfaya Eklemek
Bu, sistemin hızlı bir şekilde geliştiğinin ve gelişmeleri takip eden kullanıcı sayısının artmasının bir sonucu. Her neyse yayınlanan bu gadget blog sayfanızın sidebardenilen diğer adıyla kenar çubuğu kısmına panelden kolayca eklenebiliyor ve isim, mail, mesaj gibi bilgilerinizi alarak blog sahibine pratik şekilde mesaj göndermenize yarıyor.
Bende kendi iletişim sayfamda bu gadgeti kullanıyorum. Yalnız sabit sayfaya bu özelliği eklemek kenar çubuğuna eklemek kadar kolay değil bunun için 1-2 işlem daha yapmanız gerekiyor.
Aşağıdaki adımları takip ederek sizlerde blogunuzdaki sabit sayfalara iletişim gadgetini kolayca ekleyebilirsiniz.
› İletişim Formu Yeni! ögesini seçip biraz bekledikten sonra açılan yeni sayfadaki Kaydetbutonuna tıklayın ve gadgeti ekleyin.
Bu kısım iletişim formunun blogla bağlantısını sağlamaktan ibaretti. Direk olarak gadget kodlarını sabit sayfaya eklediğimizde form görüntüleniyor ancak etkin olmuyordu. Bundan sonraki adımda bağlantısını sağlamış olduğumuz formun bir kısım kodlarını kullanarak gadgeti sabit sayfada çalıştıracağız.
› Şimdi tekrar kumanda paneline gelerek Blog ➜ Şablon ➜ Html'yi Düzenle yolunu izleyin.
› Açılan kod sayfasında Şablonu Kaydet butonunun yanındaki Widget'a Atla butonuna tıklayın, ContactForm1 seçin.
Daha sonra aşağıdaki resimde olduğu gibi <b:includable id='main'> ile </b:includable> kodları arasındaki tüm kodları silin.
Sıkıştırılmış kodları yanlarındaki ▶ işaretine tıklayarak genişletebilirsiniz.
Şablonu kaydet deyip çıkın.
› Daha sonra Sayfalar ➜ Yeni Sayfa ➜ Boş Sayfa yolunu takip ederek bir sabit sayfa oluşturun ve Html kısmına aşağıdaki kodları yapıştırın.
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
İsim *
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-Posta *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Mesaj*
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
<style>
.contact-form-widget{width:350px;max-width:300%;padding:10px}
.contact-form-name,.contact-form-email,.contact-form-email-message{max-width:350px}
.contact-form-button-submit{width:100px;height:28px}
#ContactForm1_contact-form-email-message{width:350px;border-radius:4px;margin-bottom:10px;padding:15px 10px 15px 5px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:250px;height:30px;border-radius:4px;margin-bottom:10px;padding-left:5px}
</style>
Sayfa ismini de belirleyip Yayınla dedikten sonra iletişim formunuz aktif olacaktır.
Blogger Logonuzu Saydamlaştırıp İleri Geri Hareket Ettirmek
Bu eklentimizde ise site logonuzu hem saydamlaştırıp hemde ileri geri hareket etme efektini uygulayacağız. Uzun zamandır bana gelen mailler bu eklenti üzerineydi. Bende müsait olduğum için paylaşmak istedim. Eklenti basit ama kod bilginiz varsa yapabileceksiniz. İsterseniz konuya geçelim.
Logo kodlarımızı buluyoruz örn: <img src='Logo Url' class='logo'>
Bir diğer yöntem örn: <div class='logo'> <img src='Logo Url'> <div>
Bu verdiğim 2 kodda turuncu ile işaretlediklerimden birini kendi temanızda logonuzun bulunduğu kısma ekliyoruz yukarıda örnekte ki gibi.
Sıra geldi css kodlarına aşağıda ki kodları blogger css bölümüne ekliyoruz.
.logo a:link{
transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
}
.logo{width:350px;height:120px;text-align:left;color:#fff;overflow:hidden;float:left;-webkit-transition:all .9s ease-out;-moz-transition:all .9s ease-out;-ms-transition:all .9s ease-out;-o-transition:all .9s ease-out;transition:all .9s ease-out}
.logo a:hover{
filter: blur(1.5px);
-moz-filter: blur(1.5px);
-webkit-filter: blur(1.5px);
-o-filter: blur(1.5px);
}
.logo:hover{margin-left:30px;-webkit-transition:all .9s ease-out;-moz-transition:all .9s ease-out;-ms-transition:all .9s ease-out;-o-transition:all .9s ease-out;transition:all .9s ease-out}
Temamızı kaydedip önizlemesine bakıyoruz ve tamamlandı.
Blogger İlk Makalenize "Yeni" Yazısı Eklentisi
Bu eklentimizde ise yeni yayınladığımız bir makalenin sağ köşesinde "Yeni" adlı bir yazı yazacak ve hoş bir görüntüye el atacak. İsterseniz eklentiye ve anlatıma geçelim.
İlk adım olarak asağıdaki kodu temamızdan buluyoruz.
Kodu bulduktan sonra üstüne asağıdaki kodu ekliyoruz.
Sonra temamızdan asağıdaki kodu buluyoruz.
Yukardaki kodun üstüne asağıdaki kodu ekliyoruz.
İlk adım olarak asağıdaki kodu temamızdan buluyoruz.
]]></b:skin>
Kodu bulduktan sonra üstüne asağıdaki kodu ekliyoruz.
#yeniyazisi {
background-image: url('http://f1209.hizliresim.com/11/7/crjzm.png');
background-repeat: no-repeat;
position:relative;
z-index: 99999;
width:55px;
height:55px;
right: 2px;
float:right;
top:1px;
}
Sonra temamızdan asağıdaki kodu buluyoruz.
<b:section class='main' id='main' showaddelement='no'>
Yukardaki kodun üstüne asağıdaki kodu ekliyoruz.
<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='yeniyazisi'/></b:if>
Blogger Resimlere Lightbox Özelliği Verin
Eklentiden isterseniz söz edelim. Lightbox nedir derseniz, Lightbox linkle verilmiş resimlere tıkladığınızda yeni sekme açmayıp blog içinde siyah ekran oluşturup resimi göstermekte. İsterseniz anlatıma geçelim.
Blogger panelinden > Ayalar > Yayınlar ve yorumlar kısmına doğru ilerleyin "Resimleri Lightbox ile Gösterin" seçeneğini Evet işaretleyin.
Temanızdan aşağıda ki kodu buluyoruz.
Yukarıdaki kodu aşağıda ki kodla değiştirin.
Daha sonra aşağıda ki kodu temamızdan buluyoruz.
Hemen altına aşağıda ki kodu ekliyoruz.
Blogger panelinden > Ayalar > Yayınlar ve yorumlar kısmına doğru ilerleyin "Resimleri Lightbox ile Gösterin" seçeneğini Evet işaretleyin.
Temanızdan aşağıda ki kodu buluyoruz.
<data:post.body/>
Yukarıdaki kodu aşağıda ki kodla değiştirin.
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'><data:post.body/></div>
Daha sonra aşağıda ki kodu temamızdan buluyoruz.
<head>
Hemen altına aşağıda ki kodu ekliyoruz.
<b:include data='blog' name='all-head-content'/>
Yazı Altına Url - Html - Forum Linki Bağlantısı Verme
Bu eklenti ise okuduğunuz konunun Bağlantı linkini, HTML kodunu ve Forum kodunu sizlere hazır veriyor. Anlatılacak pek birşey yok aslında, yapmanız gereken sitenize göre CSS ile oynayıp uyumlu hale getirmek örneğini bu konu altında da görebilirsiniz.
Demo :
Demo :
<style type='text/css'>
.about-article{
background-color:#fff;
padding-bottom:5px;
padding-left:20px;
}
.about-article input{
background-color:#ffffff;
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<div class="about-article">Bu yazıyı paylasmak icin asağıdaki linkleri kullanabilirsiniz.<p class="noborder"><label for="aa-url">URL:</label><br /><input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-url" value="<data:post.url/>" /></p><p><label for="aa-forum">HTML Link:</label><br /><input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-forum" value="<a href=&quot;<data:post.url/>&quot;><data:post.title/></a>" /></p><p>
<label for="aa-forum">Forum Link:</label><br />
<input size="80" readonly="readonly" onclick="this.focus();this.select();" type="text" id="aa-forum" value="[url=<data:post.url/>]/<data:post.title/>[/url]" /></p>
</div>
</b:if>
Blogger 125x125 Reklam Alanı Oluşturma
Bu yazıyı okuyan herkesin bir blogu olmalı. Siteniz çok iyi bir şekilde ilerliyor fakat reklam alamıyorsunuz veya güzel reklam alanı bulamıyorum diyorsanız işte eklenti burada. 4 adet 125x125 reklam alanları alt alta dizilerek güzel görünüme sahip. İsterseniz anlatıma ve kodlara geçelim.
Yerleşim ➜ Gadget Ekle ➜ HTML/JavaScript seçeneği ile açılan kutucuğa aşağıda yer alan kodları ekliyoruz.
<center><table border="1"><tr><td width="125" height="125" align="center"> <a href="http://www.bloggereklentileri.org/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjflVEZWhcD9ByelcVFCwRSS-sEmD1zU96JCBsIurrX84MjKDSgfhDiUw1rLqlCgaUd-gROxi_mzM5lsQCReTHOLxn2A-Js-x7ddpBfcgV9tVrpe37C9DwmQa-9P1s8dIwb8SFwpj1nT6aU/s1600/125x125.gif"/></a></th> <td width="125" height="125" align="center"> <a href="http://www.bloggereklentileri.org/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjflVEZWhcD9ByelcVFCwRSS-sEmD1zU96JCBsIurrX84MjKDSgfhDiUw1rLqlCgaUd-gROxi_mzM5lsQCReTHOLxn2A-Js-x7ddpBfcgV9tVrpe37C9DwmQa-9P1s8dIwb8SFwpj1nT6aU/s1600/125x125.gif"/></a> </th> </tr><tr> <td width="125" height="125" align="center"> <a href="http://www.bloggereklentileri.org/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjflVEZWhcD9ByelcVFCwRSS-sEmD1zU96JCBsIurrX84MjKDSgfhDiUw1rLqlCgaUd-gROxi_mzM5lsQCReTHOLxn2A-Js-x7ddpBfcgV9tVrpe37C9DwmQa-9P1s8dIwb8SFwpj1nT6aU/s1600/125x125.gif"/></a> </td> <td width="125" height="125" align="center"> <a href="http://www.bloggereklentileri.org/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjflVEZWhcD9ByelcVFCwRSS-sEmD1zU96JCBsIurrX84MjKDSgfhDiUw1rLqlCgaUd-gROxi_mzM5lsQCReTHOLxn2A-Js-x7ddpBfcgV9tVrpe37C9DwmQa-9P1s8dIwb8SFwpj1nT6aU/s1600/125x125.gif"/></a> </td></tr></table></center>
Not: width="125" height="125" kodlarında geçen 125 değerini değiştirerek resim boyutlarını ayarlayabilirsiniz.
Kaydol:
Kayıtlar (Atom)
