bakalimbir: Blogger Eklentileri

Blogger Eklentileri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

24 Ocak 2015 Cumartesi

Profesyonel CSS katlama efektli Dikey Sidebar Menü

Bu eklenti sadece CSS ve bazı betik kodları ile yapılmıştır. Son derece kullanıcı dostu ve blogunuza uyulamanız kolaydır. Bu eklenti bazı yerlerde JavaScript'i kullanılarak yapılmıştır. Ama ben CSS kodlarıyla yaptım. Çünkü script kodlar genel olarak site açılısını yavaşlatan kodlardır. Sitenizde ne kadar az script kodu bulunursa okadar iyidir. CSS katlama efektli dikey sidebar menüsü, buton üzerine gelindiginde içe dogru katlanma efekti ile şık bir görünüm yaratır. Ve blogunuza profesyonel görünüm verir. Ayrıca açılıp kapanma fonksiyonuda var. Etiketlerinizi, sosyal medya linklerinizi yada sabit sayfalarınızı bu menüyle sidebarınızda kullanabilirsiniz.

Menüyü sidebarınıza eklemek için

Blogger panelinize giriş yapın Yerleşim → Gadget Ekle → HTML/JavaScript yolunu takip edin.
Ve aşağıdaki kodları Online HTML Editör ile isteginize göre ayarlayarak kopyalayıp yapıştırın.
Kaydet diyip çıkın.

<!--Profesyonel CSS katlama efektli Dikey Sidebar Menü by MeftunMede.blogspot.com-->
<style>
.medekatlamamenu{vertical-align:middle;width:300px;display:inline-block;font-family:arial, sans-serif;transform:translate3d(0,0,0);}
.medekatlamamenu input{position:absolute;left:-9999px;}
.medekatlamamenu #togglemedekatlamamenu:checked ~ ul{max-height:300px;padding-bottom:1em;}
.togglemedekatlamamenu{background:#FC634B;color:#FFF;display:block;text-align:center;cursor:pointer;font-family:arial, sans-serif;padding:.75em;}
.togglemedekatlamamenu:before{content:"\2630";font-size:22px;font-family: initial;vertical-align:middle;}
.medekatlamamenu ul{margin-top:1px;text-align:left;max-height:0;overflow:hidden;padding:0;transition:300ms ease all;list-style:none;line-height:1;}
.medekatlamamenu li{margin-bottom:1px;position:relative;z-index:10;transition:300ms ease all;}
.medekatlamamenu li a{display:block;position:relative;width:100%;font-size: 14px;font-weight: 600;background:silver;text-decoration:none;color:#FFF;box-sizing:border-box;transition:300ms ease all;padding:1em;}
.medekatlamamenu li:hover a{width:99%;margin-left:1%;box-shadow:inset 300px 0 300px -300px rgba(255,255,255,0.6);}
.medekatlamamenu li:before{content:"";position:absolute;width:50%;height:30%;left:1%;bottom:16px;box-shadow:10px 0 0 #000;transition:300ms ease all;transform:rotate(0deg);}
.medekatlamamenu li:hover:before{box-shadow:10px 0 30px #000;transform:rotate(-4deg);bottom:6px;}
.medekatlamamenu li:hover + li{z-index:1;}
</style>
<nav class="medekatlamamenu">
 <input type="checkbox" id="togglemedekatlamamenu" checked />
 <label for="togglemedekatlamamenu" class="togglemedekatlamamenu"></label>
  <ul>
   <li><a href="http://meftunmede.blogspot.com/search/label/Seo">SEO</a></li>
   <li><a href="http://meftunmede.blogspot.com/search/label/Blogger%20Eklentileri">Blogger Eklentileri</a></li>
   <li><a href="Bağlantı linki">Menü Adı</a></li>
   <li><a href="Bağlantı linki">Menü Adı</a></li>
<!-Burdan itibaren yukarıdaki şekilde menünüzü çoğaltabilirsiniz->
  </ul>
</nav>
<!--Profesyonel CSS katlama efektli Dikey Sidebar Menü by MeftunMede.blogspot.com-->

■ Kırmızıyla işaretlediğim bölümleri istediğinize göre değiştirmeyi unutmayın. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

22 Aralık 2014 Pazartesi

Blogger en çok yorumlanan yazılar eklentisi

blogger en çok yorum yapilan yazılar eklentisi

Bugün sizler için hazırladığım blogger en çok yorumlanan yazılar eklentisini paylaşacağım. Öncelikle eklentiyi hazırlamamda yardımcı olan Yahoo pipe sistemine teşekkür ediyorum. Eklenti hakkında kısaca bilgi vermek gerekirse; ziyaretçilerinizin en çok yorum yaptığı konuları, yanındaki sayaçla birlikte blogger'ın popüler yayınlar eklentisi gibi gösterir. Sizlerle iki stil paylaştım. Rengarenk resimli ve sade beyaz resimsiz stil olmak üzere. İsteğinize göre kaç blog yazınız görünsün veya rengini, boyutlarını vs. ayarlayarak sidebar'ınızda kullanabilirsiniz. Umarım beğenirsiniz.

Blogger'a ekleme

Blogger kontrol panelinize giriş yapın.

Yerleşim › Gadget Ekle › HTML/JavaScript yolunu takip edin.

Ve aşağıdaki kodları isteğinize göre ayarlayarak, kopyalayıp yapıştırın.

Kaydet diyip çıkın.

En çok yorum alan yazılar eklentisi 1. Stil

<!--En çok yorum alan yazılar eklentisi by MeftunMede.blogspot.com-->
<style>
.yorum-sayaci {
background:none repeat scroll 0 0 #fff;
color:#000;
font-family:arial,Helvetica,sans-serif;
font-size:14px;
float:right;
padding:5px;
margin:2px 3px;
}
.encok-yorumlananlar ul {
font-family:arial,Helvetica,sans-serif;
padding:0!important;
margin: 12px 0px;
}
.encok-yorumlananlar ul li {
list-style-type:none;
color:#555;
margin-top:-10px;
padding:6px 0px 2px 4px;
}
.encok-yorumlananlar ul li a {
color:#000;
font-weight:700;
text-decoration:none;
font-size:12px;
margin-top: 0px;
}
.encok-yorumlananlar ul li p {
color:#444;
font-weight:400;
text-decoration:none;
font-size:11px;
padding: 0px;
margin: 0px;
}
.encok-yorumlananlar ul li img {
float:left;
width:60px;
height:60px;
margin:0 5px 0 0;
}
.encok-yorumlananlar:nth-child(1n+0) {
background:none repeat scroll 0 0 #F49A9A;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(2n+0) {
background:none repeat scroll 0 0 #FCD092;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(3n+0) {
background:none repeat scroll 0 0 #ee6107;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(4n+0) {
background:none repeat scroll 0 0 #B1DAEF;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(5n+0) {
background:none repeat scroll 0 0 #ff0;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(6n+0) {
background:none repeat scroll 0 0 #c7e93d;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(7n+0) {
background:none repeat scroll 0 0 #f8e000;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(8n+0) {
background:none repeat scroll 0 0 #fcad37;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(9n+0) {
background:none repeat scroll 0 0 #ee377a;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(10n+0) {
background:none repeat scroll 0 0 #5ebded;
width:100%;
height:72px;
}
</style>
 <script type="text/javascript">
function stripTags(s,n) {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
    var i;
    for (i = 0; i < feed.count ; i++) {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" alt='" + feed.value.items[i].title + "'/>";
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="encok-yorumlananlar"><ul><li><div class="yorum-sayaci">' + postComments + "</div>" + postthumbnail + "<a href=" + postURL + '>'
 + postTitle + "</a>"  + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
 document.write(postList);
     }
 }
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
BlogAdresiniz=http://meftunmede.blogspot.com
&YaziSayisi=5
&_id=646ff03c0c31474866da421f8a061632
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="float:right;"><a style="font-size:11px;color:#FFF !important;" href="http://meftunmede.blogspot.com">Created by Meftun MEDE</a>
</span>
<!--En çok yorum alan yazılar eklentisi by MeftunMede.blogspot.com-->

En çok yorum alan yazılar eklentisi 12. Stil

En çok yorum alan yazılar eklentisi 2. Stil

<!--En çok yorum alan yazılar eklentisi by MeftunMede.blogspot.com-->
<style>
.yorum-sayaci {
background:none repeat scroll 0 0 #292D30;
width:30px;
float:left;
font-weight:700;
font-size:17px;
font-family:arial,Helvetica,sans-serif;
text-align:right;
color:#FFF;
text-shadow:4px 1px #202022;
position:relative;
top:5px;
margin:0 5px 5px;
padding:8px 7px 8px 0;
}
.yorum-sayaci:after {
content:" ";
position:absolute;
width:0;
height:0;
top:35px;
right:6px;
border-color:#292D30 #292D30 transparent transparent;
border-style:solid;
border-width:5px 8px;
}
.encok-yorumlananlar ul {
font-family:arial,Helvetica,sans-serif;
margin:4px 0;
padding:0!important;
}
.encok-yorumlananlar ul li {
list-style-type:none;
color:#555;
border-bottom:1px dashed #dedede;
line-height:20px;
margin:0;
padding:5px 0;
}
.encok-yorumlananlar ul li a {
color:#000;
font-weight:700;
text-decoration:none;
font-size:12px;
margin-top:0;
}
.encok-yorumlananlar ul li p {
color:#444;
font-weight:400;
text-decoration:none;
font-size:11px;
margin: 0px 0px 0px 48px;
padding:0;
}
.encok-yorumlananlar:nth-child(n) {
background:none repeat scroll 0 0 #FFF;
width:100%;
height:auto;
}
</style>
 <script type="text/javascript">
function stripTags(s,n) {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
    var i;
    for (i = 0; i < feed.count ; i++) {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="encok-yorumlananlar"><ul><li><div class="yorum-sayaci">' + postComments + "</div>" + "<a href=" + postURL + '>'
 + postTitle + "</a>"  + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
 document.write(postList);
     }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
BlogAdresiniz=http://meftunmede.blogspot.com
&YaziSayisi=5
&_id=646ff03c0c31474866da421f8a061632
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="float:right;"><a style="font-size:11px;color:#FFF !important;" href="http://meftunmede.blogspot.com">Created by Meftun MEDE</a>
</span>
<!--En çok yorum alan yazılar eklentisi by MeftunMede.blogspot.com-->

Özelleştirme

■ Kodlar içinde mavi renkle işaretlediğim yerlerde arkaplan renklerini değiştirebilirsiniz.
■ Kırmızıyla işaretlediğim yerlerde;
BlogAdresiniz= Blog adresinizi yazın.
YaziSayisi=5 ; Kaç blog yazınız görünsün, çoğaltabilir veya azaltabilirsiniz.
postDescription,10 ; Eklentideki konu açıklamasının karakter sayısal değerini azaltabilir yada çoğaltabilirsiniz.
■ Son olarak eklenti yorumların sayısını belirtiyor. Eğer "15" yazması yerine "15 yorum" yazmasını isterseniz; aşağıda gösterdiğim değişikliği yapabilrsiniz.

<div class="yorum-sayaci">' + postComments + "</div>"

Yerine

<div class="yorum-sayaci">' + postComments + " Yorum" + "</div>"

Bu bölümü yazabilirsiniz.
Bu kadar. Kodu denemek için Online html editor'ü kullanabilirsiniz.
Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

23 Kasım 2014 Pazar

Blogger Yukarı Çık - Sayfa Başına Dön Butonu

Blogunuza CSS veya jQuery ile "Yukarı Çık - Sayfa Başına Dön" butonu ekleyin. Uzun sayfalar için oldukça önemli ve yararlı bir eklenti "Başa Dön" bağlantısı. Sayfa uzadıkça sitenin yönlendirme bağlantılarından da uzaklaşılır. Bunları tekrardan kullanabilmek için sayfanın başına gitmek gerekir. Bu yüzden bloglarınıza renk katacak bu eklentiyi iki güzel yöntemle paylaşacağım bugün sizlerle. Hangisi hoşunuza giderse onu kullanabilirsiniz.

CSS Kodlarıyla Sayfa Başına Dön, Yukarı Çık Butonu:

Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle

Ctrl+F yardımı ile </body> kodunu aratıp bulun.

Ve hemen üzerine aşağıdaki kodu kopyalayıp yapıştırın.

<a title="Sayfa Başına Dön" style="position:fixed;right:15px;bottom:15px;outline:medium none;border:0px none;" href="#"><img border="0" alt="Sayfa Başına Dön" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Txa8hDwhj1yHzUTsv6Yts2h671K-ny50LLG04HDlmjRBeAd6l7gE2uZrB17aRK38SCUZMiidR8Dj7L8v4nm1MCJu0EpPWZufI522rch41SeVV6kVKOXqLfMiyEaXoPrIApI_HvmAObFW/s32/up.png" title="Sayfa Başına Dön"/></a>

Buton Örneği:

Burdaki buton resmi (Kırmızıyla gösterdim) siyah ve 35x35 boyutlarında. Siz isterseniz zevkinize göre başka bir buton ekleyebilirsiniz.

Script (jQuery) Kodlarıyla Sayfa Başına Dön, Yukarı Çık Butonu:

Aynı şekilde bunuda </body> kodunun hemen üzerine kopyalayıp yapıştırıyoruz.

<style type="text/css">
#mef-BckTop{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;width:150px;text-shadow:1px 1px 0 #C9C9C9;background:#EEEEEE;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#000;text-decoration:none;border:1px solid #C9C9C9;padding:5px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6(1(a){a.9.7=1(){a(2).c().d("e");"0"!=a(4).5()&&a(2).8("3");f b=a(2);a(4).g(1(){"0"==a(4).5()?a(b).h("3"):a(b).8("3")});a(2).i(1(){a("j, k").l({5:0},"3")})}});6(1(a){a("#m-n").7()});',24,24,'|function|this|slow|window|scrollTop|jQuery|scrollToTop|fadeIn|fn|||hide|removeAttr|href|var|scroll|fadeOut|click|html|body|animate|mef|BckTop'.split('|'),0,{}))
//]]>
</script>
<a href='#' id='mef-BckTop' style='display:none;'>Sayfa Başına Dön</a>

Buton Örneği:

Sayfa Başına Dön

Eğer sayfanızda jquery'nin herhangi bir versiyonu varsa kırmızıyla gösterdiğim jquery.min.js bölümünü silebilirsiniz.

Ben Sayfa Başına Dön metnini kullandım, siz isterseniz başka bişey yazabilirsiniz.

Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

18 Kasım 2014 Salı

Google Arama Sonuçlarında Star Rating Değerlendirmesini gösterme

Star Rating google’ın kullanıcılar için sunduğu bir derecelendirme sistemidir. Google’ın web siteleri için sunmuş olduğu ücretsiz optimizasyon tekniklerinden biri olan Star Raiting, web sitelerinin Google arama sonuçları sayfasında yıldızlı olarak görünmesini sağlar. Google, sitenizde yazmış olduğunuz bir yazı(genellikle multimedya içerikli yazılarda uygulanıyor) hakkında sizin derecelendirmenizi alıp, aramalarda sayfa başlığınızın altında gösteriyor. Google’ın sizin siteniz hakkında olumlu düşünmenizi sağlattıran bir uygulama. İkinci olarak arama sonuçlarında yıldız çıkan ile çıkmayan iki aynı başlığa sahip yazıdan, yıldızlı içeriğe tıklanma olasılığı daha fazladır. Çünkü ziyaretçi o sitenin güvenilir ve kaliteli olduğunu düşünür. Bu şekilde ek bilgiler ile seo teknikleri alanında biraz daha ilerleyebilir ve ziyaretçilere sitenizin kaliteli olduğunu hissettirip, sitenize çekmeyi başarabilirsiniz. Star rating sitenize ziyaretçi ile köprü olur.

Rich Snippet (Zengin snippet) Nedir?

Rich Snippet' i kısaca açıklamak gerekirse sitenizin içeriğini arama motorlarına çok daha ayırıntılı gösterme biçimi olarak tanımlayabiliriz. Snippet'ler, her arama sonucunun altında çıkan birkaç satır metin olup kullanıcılara sayfada neler olduğuyla ve sorgularıyla neden alakalı olduğuna ilişkin fikir vermek için tasarlanmıştır. Bir kullanıcının arama yaptığı konularda kararı çoğunlukla bu zengin snippet ve yıldız değerlendirmesine bağlıdır. Bu zengin snippet'ler, kullanıcıların siteniz aramalarıyla alakalı olduğunda bunu fark etmelerine yardımcı olur ve sonuç olarak sayfalarınız daha fazla tıklanabilir.

Blogger'da Star Rating Değerlendirmesini ayarlama

1. Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle

2. Ctrl+F yardımı ile aşağıdaki kodu aratıp bulun.

<div class='post-footer'>

3. Bu koddan iki tane bulacaksınız, bizim aradığımız ikinci kod.

4. Ve hemen altına aşağıdaki kodları kopyalayıp yapıştırın.

<!-- Google Arama Sonuçlarında Star Rating Değerlendirmesi -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<div style='display:none;'>
Item Reviewed: <span itemprop='itemreviewed'><data:post.title/></span>
Description: <span itemprop='description'><data:blog.metaDescription/></span>
Rating: <span itemprop='rating'>5</span>
Reviewed By: <span itemprop='reviewer'><data:post.author/></span>
</div></div></div>
</b:if>
<!-- Google Arama Sonuçlarında Star Rating Değerlendirmesi -->

5. Şablonu Kaydet diyip çıkın.

6. Şimdi yapısal veri test aracını kullanarak sitenizi test edin.

Örnek:

Star rating değerlendirmesi hemen aramalarda çıkmayabilir.Biraz zaman alacaktır. Örneğin, bir restoran snippet'i ortalama yorum ve fiyat aralığını gösterebilir; bir yemek tarifi sayfası snippet'i toplam hazırlama süresini, bir fotoğrafı ve yemek tarifinin yorumlarda aldığı kullanıcı oyunu gösterebilir; müzik albümü ise şarkıları sunarken snippet kullanarak her şarkının yanında dinlemek için bir bağlantı görüntüleyebilir. Google, aşağıdaki içerik türleri için zengin snippet'leri destekler:

Google, video içeriğin işaretlenmesini de tanır ve arama sonuçlarını geliştirmek için kullanır.
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

5 Kasım 2014 Çarşamba

Jquery Haber Manşet Slider

Merhaba arkadaşlar, biliyorsunuzki javascript ile manşet alanı birçok sitede kullanılan bir yöntem. Bu yazımda sizlerle javascript'in bir kütüphanesi olan jquery kullanarak birçok haber sitesinde görebileceğiniz bir slider paylaşacağım. Tıklanabilir linkler, tıklanabilir slayt, numaralı geçişleri tanımlayabilirsiniz. Haber makale başlıklarınızı ister resimlerinizde isterseniz altyazı bülümünde yazabileceğiniz çok şık bir haber manşet slider eklentisi. Birçok internet tarayıcısı (Internet Explorer, Firefox, Google Chrome, Safari) ile test edilen eklenti sorunsuz olarak çalışmaktadır.

Jquery Haber Manşet Slider önizleme

1. Adım

Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

/*---jQuery Haber Manşet Slider by MeftunMede.blogspot.com---*/
.MEFmanset{border:1px solid #dcdbdb;width:648px;height:302px;}
.eleman{display:block!important;}
.MEFmanset .manset_resimler img{border:0 none;text-decoration:none;width:630px;height:265px;}
.MEFmanset .manset_resimler a,.MEFmanset .manset_butonlar a{text-decoration:none;color:#6f6f6f;display:block;font-size:11px;padding:0;}
.MEFmanset .manset_butonlar a{display:block;text-align:center;}
.MEFmanset .manset_resimler a{padding:0;}
.MEFmanset .manset_resimler,.MEFmanset .manset_butonlar{list-style:none;margin:0;padding:0;}
.MEFmanset .manset_butonlar{border-top:1px solid #ccc;border-bottom:0 none;height:24px;}
.MEFmanset .manset_resimler li,.MEFmanset .manset_butonlar li{list-style:none;background-color:#FFF;font-size:14px;font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased;text-align:center;margin:0;padding:0;}
.MEFmanset .manset_resimler{width:648px;height:277px;}
.MEFmanset .manset_resimler li{position:relative;width:648px;height:277px;display:none;}
.MEFmanset .manset_resimler li img{width:640px;height:270px;margin:4px;}
.MEFmanset .manset_butonlar li{float:left;width:29px;line-height:24px;height:24px;border-right:1px solid #ccc;background:linear-gradient(tobottom,#efeded0,#fff7f750%,#efeded100%);font-family:Arial,sans-serif;}
.MEFmanset .manset_butonlar li.tumu{width:47px;height:24px;border-right:0 none;background-color:#f8f8f8;}
.MEFmanset .manset_butonlar li.tumu a{color:#6F6F6F;}
.MEFmanset .manset_butonlar li.tumu:hover{background:#fd0000!important;}
.MEFmanset .manset_butonlar li.aktifbuton,.MEFmanset .manset_butonlar li:hover{background:#fd0000 url(http://i.imgur.com/FgOGXrJ.gif?1) no-repeat top center;color:#FFF!important;}
.MEFmanset .manset_butonlar li.aktifbuton a,.MEFmanset .manset_butonlar li:hover a{color:#FFF;border:1px solid #900;border-top:0 none;}
/*-----Altyazı bölümü-----*/
.MEFmanset span{width:640px;height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHcztU7G3-LoWnylNZemDN_J1OiIQIpFtA6KKGIzEyZPUCeUbyojLPjmUHsiY_cCMLDILr9KqrVy1_aejuMhuN8BiIenzuGTIe5CgvVW6Sozkl71Efqoao8Mj-cL1_WPLGUxMoBuPnZU/s1600/caption-bg.png) repeat scroll 0 0 transparent;display:block;text-shadow:1px 1px 0 #000;font-size:20px;color:#FFF;font-family:Arial,sans-serif;font-weight:400;overflow:hidden;top:225px;left:4px;text-align:center;position:absolute;z-index:4;margin:0;padding:8px 0 0;}
.MEFmanset span:hover{color:#CCC;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWHcztU7G3-LoWnylNZemDN_J1OiIQIpFtA6KKGIzEyZPUCeUbyojLPjmUHsiY_cCMLDILr9KqrVy1_aejuMhuN8BiIenzuGTIe5CgvVW6Sozkl71Efqoao8Mj-cL1_WPLGUxMoBuPnZU/s1600/caption-bg.png) repeat scroll 0 0 transparent;}

2. Adım

Tekrar Ctrl+F yapıp </head> kodunu buluyoruz ve hemen üstüne aşağıdaki javascript kodlarını kopyalayıp yapıştırıyoruz.
Şablonu Kaydet diyip çıkın.

<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'></script>
<script src='http://meftun-mede.googlecode.com/svn/trunk/JQuery_Haber_Manset_Slider.js' type='text/javascript'></script>

3. Adım

Şimdi Blogger panelinizden Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip edin.
Ve aşağıdaki kodları Online HTML Editör ile isteğinize göre ayarlayarak, istediğiniz bölüme kopyalayıp yapıştırın.
Kaydet diyip çıkın.

<div class="MEFmanset">
<ul class="manset_resimler">
<li  class="eleman">
<a href="Haber_Linki.html" title="Haber_Başlığı" target="_blank"><img src="Resim_Linki.jpg" alt="Resmin tanımı" width="Resmin orjinal genişliği" height="Resmin orjinal yüksekliği"/></a>
<!--Örnek-1 Başlık-resim altyazısı bölümü başla-->
<span>Başlık-resim altyazısı</span>
<!--Örnek-1 Başlık-resim altyazısı bölümü bitiş-->
</li>
<!--Örnek-1 bölümü bitiş-->
<li >
<a href="http://www.örnek.com/örnek_yazi.html" title="Örnek yazı" target="_blank"><img src="http://www.örnek.com/images/örnek_yazi.jpg" alt="Örnek yazı" width="580" height="385"/></a>
<span>Örnek yazı</span>
</li>
<!--Örnek-2 bölümü bitiş-->
<li >
<a href="http://www.meftun-demo.blogspot.com/2014/08/googledan-kontakt-lens-kamera.html" title="Google'dan kontakt lens kamera" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYIC2Wm_FdI7pNtbXkofkSIVNfJ_CIcNHBayVwJ173lgYF2pqu8rF3OG7DfKOlqJ8SBexsWQDBhxxYiLbJxg6f8g9HAJobqGyeAa27OFvlenGsMRBe1zTdgahcQjc5uiQEvoWsKk_mkCI/s1600/contact-lens-google-glass-eyeball-670.jpg" alt="Google'dan kontakt lens kamera" width="670" height="440"/></a>
<span>Google'dan kontakt lens kamera</span>
</li>
<!--Örnek-3 bölümü bitiş-Burdan itibaren istediginiz kadar çoğaltabilirsiniz-->
</ul>
<!--manşet resimler bölümü bitiş-->

<ul class="manset_butonlar">
<li class="aktifbuton">
<a href="Haber Linki.html" title="Haber Başlığı" target="_blank">1</a></li>
<li>
<a href="http://www.örnek.com/örnek_yazi.html" title="Örnek yazı" target="_blank">2</a></li>
<li>
<a href="http://www.meftun-demo.blogspot.com/2014/08/googledan-kontakt-lens-kamera.html" title="Google'dan kontakt lens kamera" target="_blank">3</a></li>
<!--Burdan itibaren istediginiz kadar çoğaltabilirsiniz-->
<li class="tumu">
<a href="#" title="Tüm Haberler" target="_blank">TÜMÜ</a></li>
</ul>
</div>

Özelleştirme

Style kodlarında Kırmızıyla işaretli yerlerde;
1 - width:648px; slider çercevesi genişliği, height:302px; slider çercevesi yüksekliği
Mavi işaretli yerlerde;
2 - width:640px; Resmin genişliği, height:270px; Resmin yüksekliği
Yeşil işaretli yerlerde;
3 - width:640px; Başlık-resim altyazısı bölümü şerit genişliği, height:40px; Başlık-resim altyazısı bölümü şerit yüksekliği
4 - Eğer altyazı başlık şerit'ini istemezseniz; 1. adımdaki style kodlarından işaretlemiş olduğum bölümü ve 3. adımdaki span kodlarını silebilirsiniz.
5 - Bu haber manşet slider'ındaki style kodları 20 resim ve konuya göre ayarlanmıştır. isterseniz bunu çoğaltabilir veya azaltabilirsiniz. Buna göre style kodlarında yukarıda belirttiğim width ve height değerlerini değiştirmelisiniz.
6 - Yapamayanlar yorum kısmına "yapamadım" yazmak yerine, Lütfen bana iletişim bölümünden resim liklerini, yazı linklerini, boyutlarını vs. ayrıntılı bi şekilde yazarak göndersinler. Ben istediğiniz şekilde hazırlayıp geri gönderirim sizlere. Ondan sonra güzel bi yorum yazabilirsiniz:)
Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

31 Ekim 2014 Cuma

Blogger için Mashable stil ajax navigasyon menü

Blogger için AJAX Navigasyon menüsü Blogger JSON beslemesi API ve AJAX kullanarak Blogger platformu için oluşturulan çok yeni widget. Bu navigasyon menüsü Mashable.com eski sitesinden esinlenmiştir. Tekrardan kodlanmış ve geliştirilmiş bu widget'a özelleştirilebilir özellikler eklendi. Bu widget jQuery kütüphanesi ve Blogger json beslemesi, API tabanlı çalışır. Javascript devre dışı olduğunda menü sadece normal açılır menü gibi çalışır ve javascript etkin olduğunda bu AJAX dönerek açılır ve alt menüleri resimli şekilde açar.

Blogger Ajax Menü önizleme

Bu Eklenti Nasıl Kurulur?

Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

.mefmenu *{margin:0;padding:0;}
ul.mefmenu{list-style:none;line-height:1;overflow:visible!important;}
ul.mefmenu:after{content:' ';display:block;height:0;clear:both;margin:0;padding:0;}
#mefajaxmenu {width:960px;background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}
ul.mefmenu li{list-style:none;position:relative;float:left;margin:0!important;padding:0!important;}
ul.mefmenu li a{font-family:Arial, georgia, Helvetica, sans-serif!important;color:#6b6b6b!important;text-shadow:0 1px 0 #fff;text-decoration:none;font-weight:400!important;text-transform:capitalize!important;font-size:12px!important;display:block!important;border:0 none!important;margin:0;padding:12px 16px!important;}
ul.mefmenu li a:hover,ul.mefmenu li a.hoverover{background:#f5f5f5!important;}
ul.mefmenu ul{position:absolute;display:none;top:100%;border:1px solid #ccc;}
ul.mefmenu ul li{float:none;min-width:160px;background:#f5f5f5;text-shadow:none;}
ul.mefmenu ul li a{text-transform:none;font-weight:400;padding:12px 14px;}
ul.mefmenu ul li a:hover,ul.mefajaxmenu ul li a.hoverover{background:#fff!important;}
ul.mefmenu ul ul{display:none;left:100%;top:0;}
ul.mefajaxmenu li div.submenu{display:none;position:absolute;width:600px;z-index:90;left:-1px;top:100%;overflow:hidden;min-height:150px;background:#fff;border:1px solid #ccc;border-top:0 none;}
ul.mefajaxmenu ul,ul.mefajaxmenu ul li{display:block!important;border:0 none!important;margin:0!important;padding:0!important;}
ul.mefajaxmenu ul li{background:none!important;float:none!important;}
ul.mefajaxmenu ul.verticlemenu{position:absolute;width:33%;left:0;top:0;bottom:0;background:#f5f5f5;}
ul.mefajaxmenu ul.postslist{position:relative;display:block;width:65%;float:right;background:none;margin:8px 0!important;}
ul.mefajaxmenu ul.postslist li{display:block;overflow:hidden;border-bottom:1px #eee solid;position:relative;min-height:60px;padding:8px 8px 8px 110px !important;}
ul.mefajaxmenu ul.postslist li:last-child{border-bottom:none 0;}
ul.mefajaxmenu ul.postslist li .imgCont{position:absolute;left:0;top:8px;width:100px;height:60px;overflow:hidden;border:1px solid #dcdcdc;font-size:0;line-height:0;}
ul.mefajaxmenu ul.postslist li .imgCont img{position:relative;top:-20px;width:100px;height:100px;display:block;padding:0;}
ul.mefajaxmenu ul.postslist li a{display:block;line-height:1.4;padding:0!important;}
ul.mefajaxmenu .loader{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zu5cWxVlormWQ5nVmkYE8fCvovQq3gIHCTwGJ1EfOIhkn-ru5c0ekEt9KMdrqOOoFWRDt0OMQYdcTIYuv3iavXHE_zYYjMG6nKVmLIXCQ9f2gmMov2BtfHNxzKsYAeXRnyLx01H-F_E/s128/loading_icon_1.gif) no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px;}
ul.mefajaxmenu .menuArrow{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #999;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0;}
ul.mefmenu li:hover > ul,ul.mefajaxmenu li:hover div.submenu{display:block;}

Tekrar Ctrl+F yapıp </head> kodunu buluyoruz ve hemen üstüne aşağıdaki javascript kodlarını kopyalayıp yapıştırıyoruz.
Şablonu Kaydet diyip çıkın.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#mefajaxmenu').ajaxBloggerMenu({
numPosts : 4, // Konu Sayısı
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg' // Varsayılan küçük resim
});});
</script>

Bu bölümde HTML linklerimizi dikkatli eklememiz gerekiyor, aksi takdirde eklenti doğru çalışmaz.
AJAX Menü URL'ler üç tür kabul eder. Menüde sadece bu URL'leri kullanmanız gerekir. Bunlar Etiket (Label), Arama Sorgusu (Search Query) ve Etiket ile Arama Sorgusu (Label with Search Query).

Etiket URL	http://blogadresiniz.blogspot.com/search/label/LABELNAME
Arama Sorgusu	http://blogadresiniz.blogspot.com/search?q=SEARCHQUERY
Etiket ile Arama Sorgusu	http://blogadresiniz.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Son olarak Blogger panelinizden Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip edin.
Ve aşağıdaki kodları Online HTML Editör ile isteginize göre ayarlayarak kopyalayıp yapıştırın.
Kaydet diyip çıkın.

<ul id="mefajaxmenu" class="mefmenu">
<li>
<a href="http://meftunmede.blogspot.com">ANA SAYFA</a>
</li>
<li>
<a href="#">ÖRNEK 1</a>
<ul>
<li><a href="http://meftunmede.blogspot.com/search/label/Sosyal%20Medya">SOSYAL MEDYA</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Blogger%20Eklentileri">BLOGGER EKLENTİLERİ</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Yemek%20Tarifleri">YEMEK TARİFLERİ</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Filmler">FİLMLER</a></li>
</ul>
</li>
<li>
<a href="#">ÖRNEK 2</a>
<ul>
<li><a href="http://meftunmede.blogspot.com/search/label/Html%20Kodlar%C4%B1">HTML KODLARI</a></li>
<li><a href="http://meftunmede.blogspot.com/search/label/Programlar">PROGRAMLAR</a></li>
<li><a href="http://meftunmede.blogspot.de/search/label/%C4%B0nternet">İNTERNET</a></li>
<li><a href="http://meftunmede.blogspot.de/search/label/Ara%C3%A7lar">BLOGGER ARAÇLARI</a></li>
</ul>
</li>
<li><a href="http://www.MeftunApart.com">NORMAL LİNK</a></li>
</ul>

Özelleştirme

Kırmızıyla işaretli yerlerde;
1- Style kodlarında width:960px; menünüzün genişliği,
2- Script kodunda numPosts : 4, // Alt menüde görünmesini istediğiniz konu sayısı
3- Ve menüde kendi blogumdan örnekler verdiğim kırmızıyla işaretli bölümleri (Linkler ve isimleri) değiştirebilirsiniz, çoğaltabilirsiniz.

Umarım eklenti hoşunuza gitmiştir. Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

17 Ekim 2014 Cuma

Blogger ".tr" Yönlendirmesini Engelleme

Google Blogger'a Türkiye’den yapılan ip girişlerinde site uzantısını .com.tr uzantısına yönlendirmeye başladı. Bunun olmasıyla beraber bir çok sitenin alexa,index ve pr değerleri malesef kayboldu yada düştü. Blogger'in şimdilik 18 ülkeye verdiği bu özellik "country-code top level domain (ccTLD)" olarak adlandırılıyor. Bu durumdan rahatsız olanlar için .tr uzantısı yönlendirilmesini engellemek çok kolay. Bu sorunu ufak bir yönlendirme ile halledilebiliyoruz. Blogumuza hangi ülkeden girilirse girilsin ".blogspot.com" şeklinde çıkıyor ve site değerlerimizde herhangi bir düşüş yaşamıyoruz. Böylece global bir blog adresiniz oluyor. Yapmanız gereken aşağıdaki scripti kodunu blogunuza eklemek.

Ülkeye özgü yönlendirme uygulanan aktif ülkeler listesi

1. Argentina – Yönlendirir [blogspot.com.ar]
2. Australia – Yönlendirir [blogspot.com.au]
3. Brazil – Yönlendirir [blogspot.com.br]
4. Canada – Yönlendirir [blogspot.ca]
5. France- Yönlendirir [blogspot.fr]
6. Germany – Yönlendirir [blogspot.de]
7. India – Yönlendirir [blogspot.in]
8. Italy – Yönlendirir [blogspot.it]
9. Japan – Yönlendirir [blogspot.jp]
10. Mexico – Yönlendirir [blogspot.mx]
11. New Zealand - Yönlendirir [blogspot.co.nz]
12. Portugal - Yönlendirir [blogspot.pt]
13. Spain - Yönlendirir[blogspot.com.es]
14. Sweden – Yönlendirir [blogspot.se]
14. Türkiye – Yönlendirir [blogspot.com.tr]
15. UK – Yönlendirir [blogspot.co.uk]

Toplamda Blogger 259 domaine sahip. Ben sadece 15 tane örnek verdim. Merak edenler daha fazlası için buraya bakabilirler.

1- Blogger kontrol panelinize giriş yapın

2- Şablon > HTML'yi Düzenle

3- Aşağıdaki script komutunu <head> kodunun hemen altına kopyalayıp yapıştırın


<script type='text/javascript'>var str=window.location.href.toString();if(str.indexOf(&quot;.com/&quot;)==&quot;-1&quot;){var str1=str.substring(str.lastIndexOf(&quot;.blogspot.&quot;));if(str1.indexOf(&quot;/&quot;)==&quot;-1&quot;){var str2=str1}else{var str2=str1.substring(0,str1.indexOf(&quot;/&quot;)+1)}window.location.href=window.location.href.toString().replace(str2,&quot;.blogspot.com/ncr/&quot;)}
</script>

Barış, huzur, sağlık ve bereket Arkadaşlar!Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

24 Eylül 2014 Çarşamba

Blogunuza blogger giriş formu/Login form Widget'i ekleyin

Blogunuz için blogger giriş formu Widget'i ekleyin. Bildiğiniz gibi Bloggerda Yazılara cevap yazabilmek yada yorum yapabilmek için giriş yapılması gerekmekte. Bu eklenti sayesinde blogunuza yorum yapmak isteyenler bu Login Form/Giriş formunu oturum açmak için kullanabilecekler. Hem blogunuzu daha profesyonel gösterecek hemde blogger kullanıcıları burdan oturum açıp giriş yapabilecekleri kullanışlı bir eklenti. Ayrıca formunuza stil vererek kendi zevkinize göre fontunu, rengini, genişliğini vs. ayarlayabilirsiniz. Blogunuzun sidebarına aşağıdaki kodları bir widget şeklinde eklemek ve bu giriş formundan kontrol paneline erişmek mümkün.

Blogger giriş formu önizleme

● Blogger kontrol panelinize giriş yapın.

● Yerleşim › Gadget Ekle › HTML/JavaScript yolunu takip edin.

● Ve aşağıdaki kodları kopyalayıp yapıştırın.

● Kaydet diyip çıkın.

<p>Google Hesabınızla oturum açın</p>
<form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()" target="_blank"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> E-posta: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Şifre: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Şifrenizi mi unuttunuz?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Oturum aç" class="ubtn ubtn-block" name="submit" type="submit"/>
</form>

Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

27 Ağustos 2014 Çarşamba

Blogger Popüler Yayınlar Otomatik Numaralandırma eklentisi

Bugün CSS3 otomatik artış özelliğini kullanarak popüler yayınlar listesini Otomatik Numaralandırma eklentisini görüntülemeyi öğreneceğiz. Numaralara kare/dikdörtgen ve yuvarlak gibi değişik şekiller stil uygulayabilirsiniz. Kenar çubuğunda sidebarda bu pratik uygulamanın demosunu görebilirsiniz. Blogger için bu efekti oldukça kolay adımda JavaScript kullanmayı gerektirmeden Saf stilleri kullanarak eklemenizi sağlar. Popüler Yayınlar eklentisi blog sayfası Görüntülenme sayısını arttıran ve blogunuza daha fazla okuyucu kazandıran etkili bir araçtır. Google analytics verilerini kullanarak en çok ziyaret edilen sayfalar temel alınarak yayınları sırayla gösterir.

Popüler Yayınlar Widget'ını ekleme

1. Blogger kontrol panelinize giriş yapın > Yerleşim
2. "Gadget ekle" ye tıklayın.
3. Listeden "Popüler Yayınlar" seçin.

4. Aşağıdaki resimde gösterildiği gibi kendi ayarlarınızı yapılandırmanız gerekir: Mesela "küçük resim" kutusunu işaretlerseniz paylaştıgınız yazılardaki kullandıgınız ilk resim eklentinizde görünür.

5. Kaydet diyip çıkıyoruz.

Popüler Yayınlar Eklentisi özelleştirme

Şimdi varsayılan stillerini değiştirmek ve Özel stilleri kullanarak istediğiniz tasarımı kendi görünüşünü değiştirmek gerekir.

Blogger kontrol panelinize giriş yapın > Şablon
Şablonunuzu yedeklemeyi unutmayın.
HTML'yi Düzenle
Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp bulun ve Kodunu genişletmek için (►) siyah oku tıklayın.

5. </b:skin> kodunun hemen üstüne aşağıdaki style kodlarını kopyalayıp yapıştırın.

.popular-posts ul{padding-left:0;counter-reset:popcount;}
.popular-posts ul li:before{background:#292D30;color:#fff;box-shadow:1px 2px 9px #666;float:left;list-style-type:none;margin-right:15px;counter-increment:popcount;content:counter(popcount);font-size:16px;position:relative;font-weight:700;font-family:georgia;border:2px solid #ddd;padding:.3em .6em;}
.popular-posts ul li{border-bottom:1px dashed #ddd;}
.popular-posts ul li:hover{border-bottom:1px dashed #696969;}
.popular-posts ul li a{text-decoration:none;color:#5A5F63;}
.popular-posts ul li a:hover{text-decoration:none;}

Özelleştirme:

Kare baloncukları düzenlemek arka plan rengini değiştirmek için #292D30
Baloncuk metin rengini değiştirmek için #fff
Varsayılan olarak numaralandırma solda, eğer sağa almak istiyorsanız float:left olan bölümde left'i right yapın.
Varsayılan olarak baloncuğun şekli kare. Yuvarlak yapmak istiyorsaniz değiştirmek için box-shadow: 1px 2px 9px #666666; kodundan hemen sonra aşağıdaki kodu ekleyin.

border-radius:15px;

6. Şablonu kaydet diyip çıkıyoruz. işlem bukadar!
Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

16 Ağustos 2014 Cumartesi

Blogger'da tüm Dış Linkleriniz Otomatik Yeni Pencerede açılsın

Linkleri otomatik olarak Yeni pencerede açın

Bu eklenti sayesinde yazılarılarızda eklediğiniz dış bağlantı linklerinize target="_blank" komutu yazmanıza gerek kalmayacak. Bütün linklerinize tıklandığında otomatik yeni sekmede açılacak. Blogunuzun sayfa içindeki tüm köprüleri kontrol edecek ve sadece harici bağlantılara target="_blank" niteliğini katacak basit bir jQuery komutu. Bu script blogun iç bağlantılara herhangi bir etkisi olmaz. Script sadece dış host adlarını tespit edecek ve bulduğu an, o html içine yeni bir pencerede bağlantıyı açmak için tarayıcıya bildirirecek ve bir hedef niteliği ekleyecektir. Böylece okuyucularınızın blogunuzdan ayrılmasını engelliyor ve aynı zamanda genel sayfa görünümleri ve hemen çıkma oranı artmasında yardımcı oluyor.

Tüm harici linkleri Yeni bir sekmede açın

Not: Bu yöntem blogger ve wordpress bloglar için çalışır.

Blogger kontrol panelinize giriş yapın > Şablon
Şablonunuzu yedeklemeyi unutmayın.
HTML'yi Düzenle
</head> kodunun hemen üstüne aşağıdaki script komut dosyasını yapıştırın:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$("a[href^='http://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
});
</script>

Not: Zaten jQuery kütüphanesi kaynak kodu blogunuzda yüklü varsa kırmızı renkle işaretlediğim kodu eklemeyin.
5. Son olarak Şablonu kaydet diyip çıkıyoruz. işlem bukadar!
Blogunuzu kontrol edin ve çalışıp çalışmadığını görmek için bazı dış bağlantıları tıklayın.

Nasıl çalışıyor? (İsteğe bağlı-teknik bilgi)

İki kez http:// ve https:// ile başlayan bağlantılar için bir kez kontrol etme kodu eklenmiş. Normalde tüm blogcular blogları http:// ile başlayan host adları var, https:// güvenli protokolü olmadan. Bu nedenle ikinci örnek eklendi böylece komut dosyası wordpress blogları için bile çalışabilir.
Sarı kısım komut değeri negatif birine eşit ise (== -1) href nitelikleri içindeki değerleri tarar ve vurgulanır, daha sonra, bu ana bilgisayar hostname adını dış etki alanı olduğunu gösterir.
Not: Eğer koşullu deyimi içinde (== 1) pozitif bir birine href değeri eşit olursa, o zaman tüm iç linkler yeni pencerelerde açılmaya başlayacak!
Koşul bir kez karşılanmaktadır, komut dosyası daha sonra bir hedef hyperlink köprü etiketinin içine target="_blank" özniteliği ekler. Bu kadar basit!
Bu son derece SEO dostu ve tüm büyük tarayıcılar IE, webkit tarayıcılar veya Mozilla ile çalışıyor.
Barış ve bereket Arkadaşlar! Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. İyi bloglamalar...

14 Ağustos 2014 Perşembe

Orjinal Blogger İletişim Formu ile İletişim Sayfası Oluşturma

orjinal blogger iletişim formu ile iletişim sayfası oluşturma

Bu yazımda blogger'ın kısa zaman önce hizmete sunduğu orjinal blogger iletişim formunu sabit sayfaya nasıl ekleyeceğimizi göstereceğim. Böylece herkezin okuyucularıyla bağlantı kurmaları için bir iletişim sayfası olacak. Blogger bu eklentisini hizmete sunmadan önce kendimiz Google Dökümanları kullanarak iletişim formu oluşturmuştuk. Bu gadgetı sidebar yani blog sayfamızın yan kısımına eklemek oldukça basit. Fakat bunu sabit bir sayfaya eklemek için ek olarak işlemler yapmamız gerekiyor. Tüm blogger kullanıcıları için iletişim formu çok önemli bir yer almaktadır. Bu makalemde blogger iletişim formunu sabit sayfaya eklemeyi göstereceğim.

1. Adım:

Öncelikle Blogger’ın iletişim formu gadgetını blogunuzun sidebarına eklemeniz gerekiyor. Bunun için Blogger kumanda panelinize girdikten sonra Yerleşim > Gadget Ekle > Diğer Gadgetlar yolunu takip ederek listeden İletişim Formu gadgetını seçin.

2. Adım:

İletişim formunun sidebarda olmasını istemediğimiz bu adımda formun gadget olarak görünmemesi için gerekli kod değişikliğini yapacağız. Blogger kumanda paneline girip Şablon > HTML’yi Düzenle yolunu takip ettikten sonra sonra Widget’a Atla > ContactForm1 diyerek iletişim formuna ait kodların olduğu bölüme gelin. Bu bölümdeki kodların sol tarafındaki ► ikonuna tıklayarak kodları genişletin. Genişletme işlemini yaptığınızda iletişim formu gadgetına ait kodlar şu şekilde gözükecektir:

<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'>
    <b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

Burada kırmızı renkle gösterdiğim kodların tamamını silerseniz blogunuz iletişim formunu algılayacak ancak sidebarda gadget olarak gözükmeyecek. Sonraki adım sabit bir iletişim sayfası oluşturarak iletişim formunu burada göstermek olacak.

3. Adım:

Sıra sayfayı oluşturma geldi. Sayfalar > Yeni Sayfa > Boş Sayfa yolunu takip ederek yeni bir sayfa oluşturun ve sayfa başlığına İletişim yazın. Daha sonra sol üst taraftaki Oluştur / HTML sekmelerinde HTML sekmese geçerek aşağıdaki kodları buraya yapıştırın:

<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>İsim<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-Posta *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Mesaj *</p>
        <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'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

Önizleme yaptığınızda sorun yoksa ve iletişim formu gözüktüyse sayfayı kaydedebilirsiniz.

4. Adım:

Yukarıda verdiğim kod bloggerin standart orjinal iletişim formuydu. Sidebarınızdan alıp iletişim sayfanıza koyduk. Ama Eğer orjinalini beğenmiyorsanız, isterseniz aşağıda resimlerle gösterdiğim stillerden birini seçip iletişim sayfanıza direk onuda ekleyebilirisiniz.

<style type='text/css'>
#ContactForm1{display:none;}
#contact_wrap{width:321px;height:380px;border-radius:1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#ccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f2f2f2',endColorstr='#cccccc');background-image:linear-gradient(top,#f2f2f20%,#e6e6e650%,#cccccc100%);box-shadow:1px 1px 5px #ccc;margin:auto;padding:25px;}
#contact_wrap h3{color:#e8f3f9;font-family:oswald,Georgia,arial;font-size:20px;font-weight:400;text-align:center;text-shadow:2px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;position:relative;margin:0 -36px 20px;padding:12px;}
#contact_wrap h3:before{content:' ';position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px;}
#contact_wrap h3:after{content:' ';position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px;}
#ContactForm1_contact-form-name{width:270px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibu4bE4C938PgViT_AMV1ijJjvpu3EmgIYsK05314ZuaaF9aQygNbB9gHA8A62wYWULdO5CP7Ht1_3kNzDLMlBKG-piu2SETNnlA3khJkKaZOZBFJwL7hdmznvrRIAaG4_NTXYRsjOrPQ/s1600/user.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-email{width:270px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr6JQc-GWlBWNDq4L3PjGFSb7cb7AHaifRnt-ntV7UXBKPWVK8wBJU-cPlhzILBO5VsB9UZrlntUGJD9YQTQIEgpf2KYVb02Qt9aVuWgm2KU3_lNF1FA68ViHzX__39V49BESQ7KWegLI/s1600/msg2.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-email-message{width:270px;height:150px;font-family:Arial, sans-serif;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhqYG2GenQM4uX0N-q6U53rUFMfww5f5KlA9L1QB9eaKUVX7-F9HeLzoVsW5K1KyNLT8yQwMC8WQ0r8YKf5ovyarMGF1EdU3bbwVEMCItcPaTyV_bctq816P6nlJEoC3nuRfXzKu2wFA/s1600/pen.png)no-repeat 10px 10px;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-submit{width:95px;height:30px;float:right;color:#FFF;cursor:pointer;border-radius:4px;text-shadow:1px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;border:1px solid #194f6d;margin:10px 0;padding:0;}
#ContactForm1_contact-form-submit:hover{background:#4c9bc9;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:320px;margin-top:35px;}
</style>
<div id="contact_wrap">
<h3>İletişim</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="İsim" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="E-Posta" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mesaj" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type='text/css'>
.contact-form-widget{width:500px;max-width:100%;background:#E6E7E8;color:#000;border:1px solid #656E75;box-shadow:0 1px 4px rgba(0,0,0,0.25);border-radius:10px;margin:0 auto;padding:10px;}
.contact-form-name,.contact-form-email,.contact-form-email-message{width:100%;max-width:100%;margin-bottom:10px;}
.contact-form-button-submit{background:#E6E7E8;color:#000;width:20%;max-width:20%;margin:0;border:1px solid #656E75;}
.contact-form-button-submit:hover{background:#679EC9;color:#fff;border:1px solid #FAFAFA;}
</style>
<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>İsim<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-Posta *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Mesaj *</p>
<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'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</form>
</div>
</div>
</div>

<style type='text/css'>
.contact-form-widget{width:75%;max-width:100%;background:#5F8CB0;color:#fff;border:1px solid #5F8CB0;border-radius:1px;margin:0 auto;padding:10px;}
.contact-form-name,.contact-form-email,.contact-form-email-message{width:100%;max-width:100%;margin-bottom:10px;}
.contact-form-button-submit{height:40px;color:#5F8CB0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPioLEWeCipTYlWMhgC49jcYHqvgDku0k7Eb7_ZnBuaKMOLZ6c2wJJuojVOq2lOrTJYKZWkIW7Y-EoKg5bGekmmPJOtyXQNZGUIFKqYBzj7LhwoVR8SGJfZ9W-fctlFLTa0w1m33TmLKtM/s1600/send_message_40.png) #fff 5px center no-repeat;padding-left:44px;}
.contact-form-button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPioLEWeCipTYlWMhgC49jcYHqvgDku0k7Eb7_ZnBuaKMOLZ6c2wJJuojVOq2lOrTJYKZWkIW7Y-EoKg5bGekmmPJOtyXQNZGUIFKqYBzj7LhwoVR8SGJfZ9W-fctlFLTa0w1m33TmLKtM/s1600/send_message_40.png) #357AE8 5px center no-repeat;border:1px solid #404040;color:#FFF;border-color:#2F5BB7;}
</style>
<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>İsim<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-Posta *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Mesaj *</p>
<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'/>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</form>
</div>
</div>
</div>

<style type='text/css'>
.contact-form-widget{margin:0;width:75%;max-width:100%;padding:10px;}
.contact-form-name,.contact-form-email,.contact-form-email-message{max-width:220px;width:100%;font-weight:700;}
.contact-form-name{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4l_sM6syOzRtKmMBtiAIN_CuPmZ38NiMLhi7oEg-MQEyCqwDR73A7MTvpPCs-Q2e8Sk4UlM3heWftWa2FO1PyTZVcucDclYzokjhvGRXjOR-c6dBo_P_F-p_53SyxJxfREJkr16xyE40/s320/name.png) no-repeat 7px 8px;background-color:#FFF;border:1px solid #ddd;box-sizing:border-box;color:#A0A0A0;display:inline-block;font-family:Arial,sans-serif;font-size:12px;font-weight:700;height:24px;vertical-align:top;margin:5px 0 0;padding:5px 15px 5px 28px;}
.contact-form-email{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBEHU7e2eLo6g6-sILs-5bDzJZP_ngtjhD1nsqKAKK2cYQOTT-GoXDH4SZaFJ81v3lZMrY_BIvNw2skgxYSDI7y_nlr0Wt21XVDsQei5eLKavoJiHLkD5mc152cIis7i_D5msI8sSG_8/s320/email.png) no-repeat 7px 10px;background-color:#FFF;border:1px solid #ddd;box-sizing:border-box;color:#A0A0A0;display:inline-block;font-family:Arial,sans-serif;font-size:12px;font-weight:700;height:24px;vertical-align:top;margin:5px 0 0;padding:5px 15px 5px 28px;}
.contact-form-email:hover,.contact-form-name:hover{border:1px solid #bebebe;box-shadow:0 1px 2px rgba(5,95,255,.1);padding:5px 15px 5px 28px;}
.contact-form-email-message:hover{border:1px solid #bebebe;box-shadow:0 1px 2px rgba(5,95,255,.1);padding:10px;}
.contact-form-email-message{background:#FFF;background-color:#FFF;border:1px solid #ddd;box-sizing:border-box;color:#A0A0A0;display:inline-block;font-family:arial;font-size:12px;vertical-align:top;max-width:350px!important;height:150px;border-radius:4px;margin:5px 0 0;padding:10px;}
.contact-form-button{height:32px;line-height:28px;font-weight:700;border:none;zoom:1;display:inline;vertical-align:baseline;outline:none;cursor:pointer;text-align:center;text-decoration:none;font:14px/100% Arial, Helvetica, sans-serif;text-shadow:0 1px 1px rgba(0,0,0,.3);-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2);margin:0 2px;padding:.5em 2em .55em;}
.contact-form-button:hover{text-decoration:none;}
.contact-form-button:active{position:relative;top:1px;}
.MEF-button-color{color:#fef4e9;border:solid 1px #da7c0c;background:-webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));background: -moz-linear-gradient(top, #faa51a, #f47a20);;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',endColorstr='#f47a20');}
.MEF-button-color:hover{background:-moz-linear-gradient(top, #f88e11, #f06015);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',endColorstr='#f06015');border-color:#F47C20!important;}
</style>
<!--[if IE 9]>
<style type='text/css'>
.contact-form-name{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4l_sM6syOzRtKmMBtiAIN_CuPmZ38NiMLhi7oEg-MQEyCqwDR73A7MTvpPCs-Q2e8Sk4UlM3heWftWa2FO1PyTZVcucDclYzokjhvGRXjOR-c6dBo_P_F-p_53SyxJxfREJkr16xyE40/s320/name.png) no-repeat 7px 0;}
.contact-form-email{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBEHU7e2eLo6g6-sILs-5bDzJZP_ngtjhD1nsqKAKK2cYQOTT-GoXDH4SZaFJ81v3lZMrY_BIvNw2skgxYSDI7y_nlr0Wt21XVDsQei5eLKavoJiHLkD5mc152cIis7i_D5msI8sSG_8/s320/email.png) no-repeat 7px 6px;}
</style>
<![endif]-->  
<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="&#304;sim" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;&#304;sim&quot;;}' onfocus='if (this.value == &quot;&#304;sim&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="E-Posta"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-Posta&quot;;}' onfocus='if (this.value == &quot;E-Posta&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Mesajınızı bırakın...'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Mesajınızı bırakın...&quot;;}' onfocus='if (this.value == &quot;Mesajınızı bırakın...&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit MEF-button-color' type='reset' value='Temizle'/> 
<input class='contact-form-button contact-form-button-submit MEF-button-color' id='ContactForm1_contact-form-submit' type='button' value='G&#246;nder'/>
<p></p>
<div style='text-align: center; max-width: 250px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
</div>

Şablonu kaydedin ve Blogger’ın resmi iletişim formunu kullanarak oluşturduğunuz iletişim sayfanız hazır.

Blogger resmi iletişim formu önizleme

Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

25 Temmuz 2014 Cuma

jQuery Son Konular Haber Akışı Eklentisi

Bu yazımda soldan sağa doğru sıra ile blogunuzda yazdıgınız son yazıların yazılarak geldiği farklı haber bandı uygulaması yapacağız. Diğer adıyla Haber manşet akışı, News Ticker ismiyle çağrılıyor. jQuery ile çalışan bu şık eklenti ziyaretçilerinizin dikkatini çekecek ve son konularınız daha fazla okunacak. Aşağıdaki kod Oluşturucuyla blogunuza ekstra bir görünüm vermek, konularınıza ziyaretçi çekmek için Sadece birkaç tıklama ile bu Son Konular Haber Akışı Eklentisini eklemenizi sağlar. Ana menünüzün hemen altına bu widget'i ekleyebilirsiniz.

Özellikler:

1. jQuery/JavaScript Eklenti.
2. News Ticker daktilo Stil Son Konular kaydırma özellikli.
3. Tam özelleştirilebilir özellikleri ile harika ve şık bir görünüm.

jQuery Son Konular Haber Akışı Eklentisini ekleme

1. Blog Url'nizi girin.
2. Kaydırma için son yazılan sayısını seçin.
3. Kaydırma hızını ayarlayın.
4. Önceki, Sonraki ve Play Basma düğmelerinin gösterilip gösterilmeyeceğini seçin.
5. Eklenti başlığını seçin.
6. istediğiniz rengi seçin.
7. Blogunuzda jQuery Eklentisi var ise Evet, Yoksa Hayır'ı seçin. (Örnek: http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js gibi.)
8. Oluştur ve ardından Önizleme'yi tıklayın.
9. Son olarak Blogger ekle'yi tıklayın.
10. Veya Oluşturulan Kodu kopyalayın ve blogunuzda / web sitenizde istediginiz herhangi bir yere yapıştırın.

● Eklenti Oluşturucu yardımıyla kolayca blogunuza veya web sitesi için bu şık Son Konular Haber Akışı kodunu alabilirsiniz.
● Eklenti oluşturucuyu kullanmadan önce Blogger hesabınıza giriş yapın!

Şimdi Blogunuzu kontrol edin. işlem bukadar.
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

22 Temmuz 2014 Salı

Pop-up Facebook beğen, Twitter takip & Email Box eklentisi

Bu eklenti, ziyaretçileriniz blogunuza, websitenize girdiğinde bir kereye mahsus otomatik olarak ekranın ortasında popup açılır ve ziyaretçileriniz facebook sayfanızı beğenebilir, twitter'da sizi takip edebilir ve ayrıca mail takip yoluyla yazılarınıza abone olabilirler. Bu gerçekten çok güzel ve tamamen özelleştirilmiş. Aşağıda eklenti oluşturucu ile eklenti rengini değiştirebilirsiniz. Blogger ve aynı zamanda wordpress üzerine eklemek için kolay. Bu eklenti 15 gün varsayılan ayarı ile birlikte geliyor, ihtiyacınıza göre değiştirebilirsiniz.
Sizde Pop-up Facebook beğen, Twitter takip & Email Box eklentisini kullanmak isterseniz aşağıdaki kod Oluşturucuyla bilgilerinizi girip eklentinizi Oluşturabilirsiniz.

Özellikler:

1. jQuery/JavaScript eklenti.
2. Yeni bir ziyaretçi web sitenize geldiğinde otomatik olarak ekranın ortasında açılır.
3. Harika ve Şık görünüş.
4. Facebook beğen, Twitter takip et ve E-posta Abone eklentisi bulunuyor.

Pop-Up Takip Kutusunu Blogunuza/web sitenize ekleme?

1. Benim kullanıcı adı olan bölümleri değiştirin.
2. renk kutusundaki eklenti renginizi seçin.
3. Eğer istiyorsanız her ziyaretimde görünür? Evet / Hayır'ı seçin.
4. Eklenti için blogda görünür gün ayarını Ayarlayın.
5. Oluştur ve ardından Önizleme'yi tıklayın.
6. Son olarak Blogger ekle'yi tıklayın.

● Eklenti oluşturucuyu kullanmadan önce Blogger hesabınıza giriş yapın!
● Kodu Manuel eklemek isteseniz Yerleşim >> Gadget ekle >> HTML/JavaScript şeklinde istediğiniz yere ekleyebilirsiniz.
Şimdi Blogunuzu kontrol edin. işlem bukadar.
Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...