Tema Ofisi

Animasyonlu Sosyal Medya Sekme Butonları

<div style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzRCu_QZ2yLm4A2dw6LcbJJsx-B6QY2z4GSSpcY4HRUTPmJDVCAPno327cysEM8oWKD8umG_yyzc_D1P9-AAuKMwPV6gIoWv-Tf99rurfisa3SG5D9Va9rHoHmc7aUEFkhHubaAyuhqv0H/s1600/Animasyonlu_Sosyal_Medya_Sekme_Butonlari.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; color: #fa7029; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="jQuery Animasyonlu Sosyal Medya Sekme Butonları" border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzRCu_QZ2yLm4A2dw6LcbJJsx-B6QY2z4GSSpcY4HRUTPmJDVCAPno327cysEM8oWKD8umG_yyzc_D1P9-AAuKMwPV6gIoWv-Tf99rurfisa3SG5D9Va9rHoHmc7aUEFkhHubaAyuhqv0H/s1600/Animasyonlu_Sosyal_Medya_Sekme_Butonlari.png" style="border-width: 0px;" title="jQuery Animasyonlu Sosyal Medya Sekme Butonları" width="610" /></a><br />Bugün sitenize renk katacak bir eklentiyi sizlerle paylaşmak istiyorum. 18 <a class="klas" href="http://www.meftunmede.com/search/label/Sosyal%20Medya" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="Sosyal Medya">sosyal medya</a>, 1 rss butonu, beyaz ve siyah olmak üzere 2 renk temasıyla uygulaması kolay bir eklenti. Sitenizin Sol, Sağ, Yukarı veya sayfanın aşağı tarafında konumlandırabileceğiniz şık bir eklenti. Dilerseniz lafı fazla uzatmadan anlatıma geçeyim.</div>
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
Blogger'a JQuery Animasyonlu Sosyal Medya Sekme Butonlarını ekleme:</h3>
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">1. Blogger kontrol panelinize giriş yapın > Şablon </span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">2. </span><a class="klas" href="http://www.meftunmede.com/2014/07/blogger-sablon-yedekleme.html" style="-webkit-transition: 0.5s; background-color: white; color: #ee5c11; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="Blogger Şablon yedekleme">Şablonunuzu yedekle</a><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">meyi unutmayın. </span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">3. HTML'yi Düzenle</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">4. </span><b style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"></body></b><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> kodunun hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın: </span><br />
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;"><span style="color: red;"><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script></span>
<div id="mefmed">
<script type="text/javascript" src="http://meftun-mede.googlecode.com/svn/trunk/Meftun_Sosyal_bar.js"></script>
</div>
<link href='http://meftun-mede.googlecode.com/svn/trunk/Meftun_Sosyal_bar.css' rel='stylesheet' type='text/css'/>

<script type="text/javascript">
$(document).ready(function(){
$.mefSocialBar({
items: {
<span style="color: #59983b;">facebook</span>: { url: '<span style="background-color: yellow;">#</span>', text: 'Facebook Profili' },
<span style="color: #59983b;">twitter</span>: { url: '<span style="background-color: yellow;">#</span>', text: 'Twitter Profili' },
<span style="color: #59983b;">google</span>: { url: '<span style="background-color: yellow;">#</span>', text: 'Google+ Profili' },
<span style="color: #59983b;">youtube</span>: { url: '<span style="background-color: yellow;">#</span>', text: 'Youtube Profili' },
<span style="color: #59983b;">pinterest</span>: { url: '<span style="background-color: yellow;">#</span>', text: 'Pinterest Profili' },
<span style="color: #59983b;">stumbleupon</span>: { url: '<span style="background-color: yellow;">#</span>', text: 'Stumbleupon Profili' },
<span style="color: #59983b;">reddit</span>: { url: '<span style="background-color: yellow;">#</span>', text: 'Reddit Profili' },
<span style="color: #59983b;">rss</span>: { url: '<span style="background-color: yellow;">#</span>', text: 'RSS Feed' },
},
show: <span style="background-color: #f9cb9c;">8</span>,
position: "<span style="background-color: #a2c4c9;">left</span>",
skin: "<span style="background-color: #b4a7d6;">clear</span>"
});
});
</script>
</pre>
</div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Not: Zaten jQuery kütüphanesi kaynak kodu blogunuzda yüklü varsa kırmızı renkle işaretlediğim kodu eklemeyin. </span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">(</span><span style="background-color: white; color: red; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script></span><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">)</span><br />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
Özelleştirme</h3>
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Eklentiyi özelleştirmek ve denemek için </span><a class="klas" href="http://www.meftunmede.com/2013/02/online-html-editor.html" rel="nofollow" style="-webkit-transition: 0.5s; background-color: white; color: #ee5c11; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="Online Html Editör">Online Html editörde</a><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> istediğiniz şekilde aşağıdaki değişikleri yapabilirsiniz.</span><br />
<ul style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin: 0px 0px 0px -40px; padding-left: 40px;">
<li style="margin-left: 20px;"><b>URL'yi ekleme:</b> "<span style="background-color: yellow;">#</span>" işaretli olan yerlere sosyal medya hesaplarınızı yazın.</li>
<li style="margin-left: 20px;"><b>Pozisyonları değiştirme:</b> Widget konumunu isteğinize göre değiştirin:<br />Kodlama:<br />“<span style="background-color: #a2c4c9;">left</span>” = Sol,<br />“<span style="background-color: #a2c4c9;">right</span>” = Sağ,<br />“<span style="background-color: #a2c4c9;">top</span>” = Yukarı,<br />“<span style="background-color: #a2c4c9;">bottom</span>” = Aşağı<br />Unutmayın: Büyük Harfler kullanmayın, aksi takdirde çalışmaz.</li>
<li style="margin-left: 20px;"><b>Sosyal Medya butonları:</b> Sosyal medya butonları yukarıdaki örnekte "<span style="background-color: #f9cb9c;">8</span>" tanedir. Azaltmak veya çoğaltmak isterseniz; istemediğiniz buton bölümünü script kodundan silerek, yada istediğiniz butonu ekleyerek, show:<span style="background-color: #f9cb9c;">8</span>, yazan yerdeki sayısal değeri 10 veya 7,6,5 gibi değiştirebilirsiniz.</li>
<li style="margin-left: 20px;"><b style="color: #59983b;">Kullanabilir Butonlar:</b> Yeşille işaretlediğim yerlerde bu sosyal medya iconlarını kullanabilirsiniz;<br />twitter, facebook, rss, google+, youtube, stumbleupon, reddit, pinterest, instagram, vk, linkedin, tumblr, xing, myspace, digg, flickr, foursquare, vimeo, soundcloud</li>
<li style="margin-left: 20px;"><b>Arayüzü değiştirme:</b> Sosyal Medya Barda iki Tema var yani “<span style="background-color: #b4a7d6;">clear</span>” = açık renk ve “<span style="background-color: #b4a7d6;">dark</span>” = siyah renkte arka plan. Güncel “<span style="background-color: #b4a7d6;">clear</span>” = açık renk temasını değiştirmek için JavaScript kodlamada “<span style="background-color: #b4a7d6;">dark</span>” = siyah renk olarak değiştirebilrsiniz.</li>
</ul>
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">5. Son olarak </span><b style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Şablonu kaydet</b><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> diyip çıkıyoruz. işlem bukadar!</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Barış ve bereket Arkadaşlar!Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...</span>

Blogger Eklentileri Animasyonlu Sosyal Medya Sekme Butonları

Bugün sitenize renk katacak bir eklentiyi sizlerle paylaşmak istiyorum. 18 sosyal medya , 1 rss butonu, beyaz ve siyah olmak üzere 2 renk ...

Devamı »

Profesyonel CSS katlama efektli Dikey Sidebar Menü

07:38 ScriptOFisi 0

<div style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIvpVvp-s_rp3yBiSwf2wuffyq8wcbtt0zzvwf5vmiPhElzKyGhRjioaQjfhp3xTrCUCwu6m0gjyIdFs9dIPUT52KLr0tbr94PLvIxHksV6iEoz9s1ku3-a4kTo_z-JI4nu684oX9sj8fM/s1600/Profesyonel_CSS_katlama_efektli_Dikey_Sidebar_Menu.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; color: #fa7029; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="Profesyonel CSS katlama efektli Dikey Sidebar Menü" border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIvpVvp-s_rp3yBiSwf2wuffyq8wcbtt0zzvwf5vmiPhElzKyGhRjioaQjfhp3xTrCUCwu6m0gjyIdFs9dIPUT52KLr0tbr94PLvIxHksV6iEoz9s1ku3-a4kTo_z-JI4nu684oX9sj8fM/s1600/Profesyonel_CSS_katlama_efektli_Dikey_Sidebar_Menu.png" style="border-width: 0px;" title="Profesyonel CSS katlama efektli Dikey Sidebar Menü" width="610" /></a><br />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.</div>
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
Menüyü sidebarınıza eklemek için</h3>
<ul style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin: 0px 0px 0px -40px; padding-left: 40px;">
<li style="margin-left: 20px;">Blogger panelinize giriş yapın <b>Yerleşim</b> →<b> Gadget Ekle </b>→<b> HTML/JavaScript </b>yolunu takip edin.</li>
<li style="margin-left: 20px;">Ve aşağıdaki kodları <a class="klas" href="http://www.meftunmede.com/2013/02/online-html-editor.html" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank">Online HTML Editör</a> ile isteginize göre ayarlayarak kopyalayıp yapıştırın.</li>
<li style="margin-left: 20px;"><b>Kaydet</b> diyip çıkın.</li>
</ul>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;">
<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="<b style="color: red;">http://www.meftunmede.com/search/label/Seo</b>"><b style="color: red;">SEO</b></a></li>
   <li><a href="<b style="color: red;">http://www.meftunmede.com/search/label/Blogger%20Eklentileri</b>"><b style="color: red;">Blogger Eklentileri</b></a></li>
   <li><a href="<b style="color: red;">Bağlantı linki</b>"><b style="color: red;">Menü Adı</b></a></li>
   <li><a href="<b style="color: red;">Bağlantı linki</b>"><b style="color: red;">Menü Adı</b></a></li>
<!-Burdan itibaren yukarıdaki şekilde menünüzü çoğaltabilirsiniz->
  </ul>
</nav>

</pre>
</div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><b style="background-color: white; color: red; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">■</b><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 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.</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...</span><br />
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Kaynak:</span><span style="font-family: open sans, Arial, Helvetica, sans-serif;"><span style="font-size: 12px; line-height: 18px;">http://www.meftunmede.com/</span></span>

Blogger Eklentileri 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ı y...

Devamı »

Blogger en çok yorumlanan yazılar eklentisi

07:37 ScriptOFisi 0

<div style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqKz5n3-JwnuOUTvsyZesg9FN1FyVPSOOy1Ag8rVWpWmIKHU0G21n0mse3wlGM3gzrwg7Q_d6xGN8iWrwtq7ho8sjX5_bO0IvLM_TTZGEfNyfd52GLs215f4O3UuAQ1iTIkw6o1JG_Hgw/s1600/Blogger_en_cok_yorumlanan_yazilar_eklentisi.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; color: #fa7029; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="blogger en çok yorum yapilan yazılar eklentisi" border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqKz5n3-JwnuOUTvsyZesg9FN1FyVPSOOy1Ag8rVWpWmIKHU0G21n0mse3wlGM3gzrwg7Q_d6xGN8iWrwtq7ho8sjX5_bO0IvLM_TTZGEfNyfd52GLs215f4O3UuAQ1iTIkw6o1JG_Hgw/s1600/Blogger_en_cok_yorumlanan_yazilar_eklentisi.png" style="border-width: 0px;" title="blogger en çok yorum yapilan yazılar eklentisi" width="610" /></a><br />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 <a class="klas" href="http://pipes.yahoo.com/pipes/pipe.info?_id=646ff03c0c31474866da421f8a061632" rel="nofollow" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank">Yahoo pipe</a> 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 <a class="klas" href="http://www.meftunmede.com/2014/08/blogger-populer-yayinlar-otomatik.html" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank">popüler yayınlar</a>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 <a class="klas" href="http://www.meftunmede.com/2013/03/html-renk-kodu-bulucu.html" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank">rengini</a>, boyutlarını vs. ayarlayarak sidebar'ınızda kullanabilirsiniz. Umarım beğenirsiniz. </div>
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
Blogger'a ekleme</h3>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">Blogger kontrol panelinize giriş yapın.</li>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;"><b>Yerleşim</b> ›<b> Gadget Ekle </b>›<b> HTML/JavaScript </b>yolunu takip edin.</li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1KEUoda1SnxbMIRDVH1_twNix-b4n1Z93xrSpwD-nykHZNlZlwglZk_rxSYWnLPFmTxw6NdMY3naZ5U8kYfPH6Mss-Tn71o3XgISR3k6BwF500wmJZI-zW9eGL41XB0f5BcRfX86s6hQ/s1600/1.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; background-color: white; color: #fa7029; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="HTML/JavaScpript Gadget Ekle" border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1KEUoda1SnxbMIRDVH1_twNix-b4n1Z93xrSpwD-nykHZNlZlwglZk_rxSYWnLPFmTxw6NdMY3naZ5U8kYfPH6Mss-Tn71o3XgISR3k6BwF500wmJZI-zW9eGL41XB0f5BcRfX86s6hQ/s1600/1.png" style="border-width: 0px;" title="HTML/JavaScpript Gadget Ekle" width="610" /></a><br />
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">Ve aşağıdaki kodları isteğinize göre ayarlayarak, kopyalayıp yapıştırın.</li>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;"><b>Kaydet</b> diyip çıkın.</li>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
En çok yorum alan yazılar eklentisi 1. Stil</h3>
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;">
<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 <b style="color: blue;">#F49A9A</b>;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(2n+0) {
background:none repeat scroll 0 0 <b style="color: blue;">#FCD092</b>;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(3n+0) {
background:none repeat scroll 0 0 <b style="color: blue;">#ee6107</b>;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(4n+0) {
background:none repeat scroll 0 0 <b style="color: blue;">#B1DAEF</b>;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(5n+0) {
background:none repeat scroll 0 0 <b style="color: blue;">#ff0</b>;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(6n+0) {
background:none repeat scroll 0 0 <b style="color: blue;">#c7e93d</b>;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(7n+0) {
background:none repeat scroll 0 0 <b style="color: blue;">#f8e000</b>;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(8n+0) {
background:none repeat scroll 0 0 <b style="color: blue;">#fcad37</b>;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(9n+0) {
background:none repeat scroll 0 0 <b style="color: blue;">#ee377a</b>;
width:100%;
height:72px;
}
.encok-yorumlananlar:nth-child(10n+0) {
background:none repeat scroll 0 0 <b style="color: blue;">#5ebded</b>;
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><b style="color: #ffde66;"><div class="yorum-sayaci">' + postComments + "</div>"</b> + postthumbnail + "<a href=" + postURL + '>'
 + postTitle + "</a>"  + '<p>' +stripTags(postDescription,<b style="color: red;">10</b>)+'...</p>' + '</li></ul></div>';
 document.write(postList);
     }
 }
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
BlogAdresiniz=<b style="color: red;">http://www.meftunmede.com</b>
&YaziSayisi=<b style="color: red;">5</b>
&_id=646ff03c0c31474866da421f8a061632
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="float:right;"><a style="font-size:11px;color:#FFF !important;" href="http://www.meftunmede.com">Created by Meftun MEDE</a>
</span>

</pre>
</div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioVd42fcuCABxku5q0_LuT-crPgBVjxE6fCGkjwLcfnIoptWwpoz6zzWxOVXxzKxXyvpY4vz784hi64gEDX6K3uKKrIHZUfgSnBJIkfyJUlXK2Xx85Igp0nqB_wCrsENogSdOHLe4ZN0wd/w318-h374-no/Blogger_en_cok_yorumlanan_yazilar_eklentisi_stil_1.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; background-color: white; color: #fa7029; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="En çok yorum alan yazılar eklentisi 12. Stil" border="0" height="374" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioVd42fcuCABxku5q0_LuT-crPgBVjxE6fCGkjwLcfnIoptWwpoz6zzWxOVXxzKxXyvpY4vz784hi64gEDX6K3uKKrIHZUfgSnBJIkfyJUlXK2Xx85Igp0nqB_wCrsENogSdOHLe4ZN0wd/w318-h374-no/Blogger_en_cok_yorumlanan_yazilar_eklentisi_stil_1.png" style="border-width: 0px;" title="En çok yorum alan yazılar eklentisi 1. Stil" width="318" /></a><br />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
En çok yorum alan yazılar eklentisi 2. Stil</h3>
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;">
<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 <b style="color: blue;">#FFF</b>;
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><b style="color: #ffde66;"><div class="yorum-sayaci">' + postComments + "</div>"</b> + "<a href=" + postURL + '>'
 + postTitle + "</a>"  + '<p>' +stripTags(postDescription,<b style="color: red;">10</b>)+'...</p>' + '</li></ul></div>';
 document.write(postList);
     }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
BlogAdresiniz=<b style="color: red;">http://www.meftunmede.com</b>
&YaziSayisi=<b style="color: red;">5</b>
&_id=646ff03c0c31474866da421f8a061632
&_callback=mostcommented
&_render=json"
type="text/javascript"></script><span style="float:right;"><a style="font-size:11px;color:#FFF !important;" href="http://www.meftunmede.com">Created by Meftun MEDE</a>
</span>

</pre>
</div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju_djuOxmDQaQt_gm7tuXUKv6x1ipovbZgep-fcMblqiJzIcdn5bhO9hovhvWDJMd4sZawDwi6S9ZC8D5z_G_YijRO35MTA5XsRm8xayWl70tBgDZ3jlsPutuojlSSbHGetRH818wuYw8O/w318-h377-no/Blogger_en_cok_yorumlanan_yazilar_eklentisi_stil_2.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; background-color: white; color: #fa7029; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="En çok yorum alan yazılar eklentisi 2. Stil" border="0" height="377" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju_djuOxmDQaQt_gm7tuXUKv6x1ipovbZgep-fcMblqiJzIcdn5bhO9hovhvWDJMd4sZawDwi6S9ZC8D5z_G_YijRO35MTA5XsRm8xayWl70tBgDZ3jlsPutuojlSSbHGetRH818wuYw8O/w318-h377-no/Blogger_en_cok_yorumlanan_yazilar_eklentisi_stil_2.png" style="border-width: 0px;" title="En çok yorum alan yazılar eklentisi 2. Stil" width="318" /></a><br />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
Özelleştirme</h3>
<b style="background-color: white; color: blue; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">■</b><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> Kodlar içinde mavi renkle işaretlediğim yerlerde arkaplan renklerini değiştirebilirsiniz.</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><b style="background-color: white; color: red; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">■</b><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> Kırmızıyla işaretlediğim yerlerde;</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">BlogAdresiniz= Blog adresinizi yazın.</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">YaziSayisi=</span><b style="background-color: white; color: red; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">5</b><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> ; Kaç blog yazınız görünsün, çoğaltabilir veya azaltabilirsiniz.</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">postDescription,</span><b style="background-color: white; color: red; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">10</b><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> ; Eklentideki konu açıklamasının karakter sayısal değerini azaltabilir yada çoğaltabilirsiniz.</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><b style="background-color: white; color: #ffde66; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">■</b><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 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.</span><br />
<div class="Code2" style="-webkit-transition: background-color 1s ease-in-out; background-color: #9fcfff; border-radius: 5px; border: 1px solid rgb(196, 196, 196); color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 0px; overflow-wrap: break-word; overflow-x: auto; padding: 4px 15px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;"><b style="color: #ffde66;"><div class="yorum-sayaci">' + postComments + "</div>"</b>
</pre>
</div>
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Yerine</span><br />
<div class="Code2" style="-webkit-transition: background-color 1s ease-in-out; background-color: #9fcfff; border-radius: 5px; border: 1px solid rgb(196, 196, 196); color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 0px; overflow-wrap: break-word; overflow-x: auto; padding: 4px 15px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;"><div class="yorum-sayaci">' + postComments + " Yorum" + "</div>"
</pre>
</div>
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Bu bölümü yazabilirsiniz. </span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Bu kadar. Kodu denemek için </span><a class="klas" href="http://www.meftunmede.com/2013/02/online-html-editor.html" style="-webkit-transition: 0.5s; background-color: white; color: #ee5c11; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; text-decoration: none; transition: 0.5s;" target="_blank">Online html editor</a><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">'ü kullanabilirsiniz.</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...</span><br />
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Kaynak:</span><span style="font-family: open sans, Arial, Helvetica, sans-serif;"><span style="font-size: 12px; line-height: 18px;">http://www.meftunmede.com/</span></span>

Blogger Eklentileri Blogger en çok yorumlanan 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 ...

Devamı »

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

07:36 ScriptOFisi 0

<div style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQNEH59APC92sp2EnkgG-gKOEg69I9wAK2jPRtbyOF8R7TXbyAxeLrYdt6uloZol_n4OAXD7eLny41hSsGrx_3ncFD2QoJjpVkuW_KBOe6faAMsQ9gTd_2FKD7PLdhPoW7Yp25sGIgsyLD/s1600/Blogger_Yukari_Cik_Sayfa_Basina_Don_Butonu.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; color: #fa7029; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="Blogger Yukarı Çık - Sayfa Başına Dön Butonu" border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQNEH59APC92sp2EnkgG-gKOEg69I9wAK2jPRtbyOF8R7TXbyAxeLrYdt6uloZol_n4OAXD7eLny41hSsGrx_3ncFD2QoJjpVkuW_KBOe6faAMsQ9gTd_2FKD7PLdhPoW7Yp25sGIgsyLD/s1600/Blogger_Yukari_Cik_Sayfa_Basina_Don_Butonu.png" style="border-width: 0px;" title="Blogger Yukarı Çık - Sayfa Başına Dön Butonu" width="610" /></a><br />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.</div>
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
CSS Kodlarıyla Sayfa Başına Dön, Yukarı Çık Butonu:</h3>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">Blogger panelinize giriş yapın > <b>Şablon</b> ><b> HTML'yi Düzenle </b></li>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">Ctrl+F yardımı ile <code style="background: none 0% 0% repeat scroll rgb(245, 245, 245); border-radius: 2px; border: 1px solid rgb(235, 235, 235); color: #444444; font-family: 'open sans', cursive;"></body></code> kodunu aratıp bulun.</li>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">Ve hemen üzerine aşağıdaki kodu kopyalayıp yapıştırın.</li>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<code style="font-family: 'open sans', cursive;"><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="<b style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfs4tsbA5qQllFKYBn0RCJBACHf7gNIe1vOK0ykzCKD1S4rUWclK_3EsLmDNlnFrRawVAey1WtNXadkD3uxDM_As0-2bec17fPzg2ctjVENnUWuDtYpw5wqqhTQjDrLWz5B7gDvvmu016Z/s32/up.png</b>" title="Sayfa Başına Dön"/></a></code></div>
<h4 style="background-color: white; border: medium none; color: #444444; font-family: oswald, arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 10px; list-style: none outside none; margin: 15px 0px 0px; outline: none medium; padding: 0px; text-decoration: underline;">
Buton Örneği:</h4>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfs4tsbA5qQllFKYBn0RCJBACHf7gNIe1vOK0ykzCKD1S4rUWclK_3EsLmDNlnFrRawVAey1WtNXadkD3uxDM_As0-2bec17fPzg2ctjVENnUWuDtYpw5wqqhTQjDrLWz5B7gDvvmu016Z/s32/up.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; background-color: white; color: #fa7029; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="Yukarı Çık - Sayfa Başına Dön Butonu" border="0" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfs4tsbA5qQllFKYBn0RCJBACHf7gNIe1vOK0ykzCKD1S4rUWclK_3EsLmDNlnFrRawVAey1WtNXadkD3uxDM_As0-2bec17fPzg2ctjVENnUWuDtYpw5wqqhTQjDrLWz5B7gDvvmu016Z/s32/up.png" style="border-width: 0px;" title="Yukarı Çık - Sayfa Başına Dön Butonu" width="35" /></a><br />
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">Burdaki buton resmi (Kırmızıyla gösterdim) siyah ve 35x35 boyutlarında. Siz isterseniz zevkinize göre başka bir buton ekleyebilirsiniz.</li>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
Script (jQuery) Kodlarıyla Sayfa Başına Dön, Yukarı Çık Butonu:</h3>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">Aynı şekilde bunuda <code style="background: none 0% 0% repeat scroll rgb(245, 245, 245); border-radius: 2px; border: 1px solid rgb(235, 235, 235); color: #444444; font-family: 'open sans', cursive;"></body></code> kodunun hemen üzerine kopyalayıp yapıştırıyoruz.</li>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;"><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>
<i style="color: red;"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script></i>
<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;'><b style="color: red;">Sayfa Başına Dön</b></a>
</pre>
</div>
<h4 style="background-color: white; border: medium none; color: #444444; font-family: oswald, arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 10px; list-style: none outside none; margin: 15px 0px 0px; outline: none medium; padding: 0px; text-decoration: underline;">
Buton Örneği:</h4>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><a href="http://www.meftunmede.com/2014/11/blogger-yukari-cik-sayfa-basina-don.html#" style="-webkit-transition: all 0.17s ease-in-out 0s; background: rgb(238, 238, 238); border-radius: 5px; border: 1px solid rgb(201, 201, 201); color: black; cursor: pointer; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; padding: 5px; text-align: center; text-decoration: none; transition: all 0.17s ease-in-out 0s; width: 130px;" title="Sayfa Başına Dön">Sayfa Başına Dön</a><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><br />
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">Eğer sayfanızda <i style="color: red;">jquery</i>'nin herhangi bir versiyonu varsa kırmızıyla gösterdiğim <i style="color: red;">jquery.min.js</i> bölümünü silebilirsiniz.</li>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">Ben <b style="color: red;">Sayfa Başına Dön</b> metnini kullandım, siz isterseniz başka bişey yazabilirsiniz.</li>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...</span><br />
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Kaynak:</span><span style="font-family: open sans, Arial, Helvetica, sans-serif;"><span style="font-size: 12px; line-height: 18px;">http://www.meftunmede.com/</span></span>

Blogger Eklentileri 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 ek...

Devamı »

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

07:35 ScriptOFisi 0

<div style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdLup0LmC4c46YDL8oe8I2DfwS2C_kVn4FPZZzdIYB9WqpzI9mEDAvSDFMHqFVlFN7quDmFR14n9JvDXcGCAJeQ_VYl4muRwVG8T0uQ_1Ls0ZgcM46PoCtfg25b9DxLYNBgMgo78aGgbEu/s1600/Google_Arama_Sonuclarinda_Star_Rating_Degerlendirmesini_gosterme.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; color: #fa7029; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="Google Arama Sonuçlarında Star Rating Değerlendirmesini gösterme" border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdLup0LmC4c46YDL8oe8I2DfwS2C_kVn4FPZZzdIYB9WqpzI9mEDAvSDFMHqFVlFN7quDmFR14n9JvDXcGCAJeQ_VYl4muRwVG8T0uQ_1Ls0ZgcM46PoCtfg25b9DxLYNBgMgo78aGgbEu/s1600/Google_Arama_Sonuclarinda_Star_Rating_Degerlendirmesini_gosterme.png" style="border-width: 0px;" title="Google Arama Sonuçlarında Star Rating Değerlendirmesini gösterme" width="610" /></a><br />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.</div>
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
Rich Snippet (Zengin snippet) Nedir?</h3>
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">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.</span><br />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
Blogger'da Star Rating Değerlendirmesini ayarlama</h3>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">1. Blogger panelinize giriş yapın > <b>Şablon</b> ><b> HTML'yi Düzenle </b></li>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">2. Ctrl+F yardımı ile aşağıdaki kodu aratıp bulun.</li>
<div class="Code2" style="-webkit-transition: background-color 1s ease-in-out; background-color: #9fcfff; border-radius: 5px; border: 1px solid rgb(196, 196, 196); color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 0px; overflow-wrap: break-word; overflow-x: auto; padding: 4px 15px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;"><div class='post-footer'>
</pre>
</div>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">3. Bu koddan iki tane bulacaksınız, bizim aradığımız ikinci kod.</li>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">4. Ve hemen altına aşağıdaki kodları kopyalayıp yapıştırın.</li>
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;">
<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>

</pre>
</div>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">5. <b>Şablonu Kaydet</b> diyip çıkın.</li>
<li style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: 20px;">6. Şimdi <a class="klas" href="http://www.google.com/webmasters/tools/richsnippets" rel="nofollow" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="Yapısal veri test aracı">yapısal veri test aracını</a> kullanarak sitenizi test edin.</li>
<h4 style="background-color: white; border: medium none; color: #444444; font-family: oswald, arial, sans-serif; font-size: 20px; font-weight: 400; line-height: 1.29; list-style: none outside none; margin: 15px 0px 8px; outline: none medium; padding: 0px;">
Örnek:</h4>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp87XH4YRGwBdkuuB-mmHJZDKF2nMIy5larQDJ4VpmGtEOBC2z-iswxPH2Q8B5sVZyQxucslo0MwOZ8zQhHpc9svhHXlwTcCTcF2770H6p2N302RwEfn0oCZtetg3z38ex7syjaJJR0avr/s1600/meftunmede_google_star_rating.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; background-color: white; color: #fa7029; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="Google Arama Sonuçlarında Star Rating Değerlendirmesi Örnek" border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp87XH4YRGwBdkuuB-mmHJZDKF2nMIy5larQDJ4VpmGtEOBC2z-iswxPH2Q8B5sVZyQxucslo0MwOZ8zQhHpc9svhHXlwTcCTcF2770H6p2N302RwEfn0oCZtetg3z38ex7syjaJJR0avr/s1600/meftunmede_google_star_rating.png" style="border: 1px solid rgb(196, 196, 196);" title="Google Arama Sonuçlarında Star Rating Değerlendirmesi Örnek" width="532" /></a><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcjHeQ-jk7OIViU0ivyWr0672QlP8aJhyphenhyphen_7O7bkjIZrLpKukytK7ntSufJR1QbEbR7gnhJ3lGBQcybRCJLmpOBFPhO2Qb2iC5IE9MknEPdOVBOIPDcNRcg_Ihg7dBMrvq2m0cdT4QQZpi9/s1600/meftunmede_com_google_star_rating.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; background-color: white; color: #fa7029; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="Google Arama Sonuçlarında Star Rating Değerlendirmesi Örnek" border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcjHeQ-jk7OIViU0ivyWr0672QlP8aJhyphenhyphen_7O7bkjIZrLpKukytK7ntSufJR1QbEbR7gnhJ3lGBQcybRCJLmpOBFPhO2Qb2iC5IE9MknEPdOVBOIPDcNRcg_Ihg7dBMrvq2m0cdT4QQZpi9/s1600/meftunmede_com_google_star_rating.png" style="border: 1px solid rgb(196, 196, 196);" title="Google Arama Sonuçlarında Star Rating Değerlendirmesi Örnek" width="532" /></a><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">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:</span><br />
<ul style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin: 0px 0px 0px -40px; padding-left: 40px;">
<li style="margin-left: 20px;"><a class="klas" href="https://support.google.com/webmasters/answer/answer.py?answer=146645" rel="nofollow" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="Yorumlar">Yorumlar</a></li>
<li style="margin-left: 20px;"><a class="klas" href="https://support.google.com/webmasters/answer/answer.py?answer=146646" rel="nofollow" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="Kişiler">Kişiler</a></li>
<li style="margin-left: 20px;"><a class="klas" href="https://support.google.com/webmasters/answer/answer.py?answer=146750" rel="nofollow" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="Ürünler">Ürünler</a></li>
<li style="margin-left: 20px;"><a class="klas" href="https://support.google.com/webmasters/answer/answer.py?answer=146861" rel="nofollow" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="İşletmeler">İşletmeler ve kuruluşlar</a></li>
<li style="margin-left: 20px;"><a class="klas" href="https://support.google.com/webmasters/answer/answer.py?answer=173379" rel="nofollow" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="Yemek tarifleri">Yemek tarifleri</a></li>
<li style="margin-left: 20px;"><a class="klas" href="https://support.google.com/webmasters/answer/answer.py?answer=164506" rel="nofollow" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="Etkinlikler">Etkinlikler</a></li>
<li style="margin-left: 20px;"><a class="klas" href="https://support.google.com/webmasters/answer/answer.py?answer=1623047" rel="nofollow" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="Müzik">Müzik</a></li>
</ul>
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Google, </span><a class="klas" href="https://support.google.com/webmasters/answer/answer.py?answer=162163" rel="nofollow" style="-webkit-transition: 0.5s; background-color: white; color: #ee5c11; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="video içeriğin">video içeriğin</a><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> işaretlenmesini de tanır ve arama sonuçlarını geliştirmek için kullanır.</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...</span><br />
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Kaynak:</span><span style="font-family: open sans, Arial, Helvetica, sans-serif;"><span style="font-size: 12px; line-height: 18px;">http://www.meftunmede.com/</span></span>

Blogger Eklentileri 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 optimizas...

Devamı »

Jquery Haber Manşet Slider

07:35 ScriptOFisi 2

<div style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLG1qq5mFn1np2kza8UD13my2io5SFLqbmTJ2MQldNvHCKqYEh5sdPcN1AuIXLLnXOzleXcP4vSg6UydUfovYTdtf3OzS-iUX0z4-mHHhlO1ozWpmNgy0qvUXoZDAoSZXoNGIb29Y0sIni/s1600/Jquery_Haber_Manset_Slider.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; color: #ee5c11; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="jQuery Haber Manşet Slider" border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLG1qq5mFn1np2kza8UD13my2io5SFLqbmTJ2MQldNvHCKqYEh5sdPcN1AuIXLLnXOzleXcP4vSg6UydUfovYTdtf3OzS-iUX0z4-mHHhlO1ozWpmNgy0qvUXoZDAoSZXoNGIb29Y0sIni/s1600/Jquery_Haber_Manset_Slider.png" style="border-width: 0px;" title="jQuery Haber Manşet Slider" width="610" /></a><br />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.</div>
<div style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin: auto; width: 248px;">
<a class="klas" href="http://meftun-demo.blogspot.com/2014/11/jquery-haber-manset-slider.html" rel="nofollow" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank">Jquery Haber Manşet Slider önizleme</a></div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
1. Adım</h3>
<ol style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: -40px;">
<li style="margin-left: 20px;">Blogger panelinize giriş yapın > <b>Şablon</b> ><b> HTML'yi Düzenle</b></li>
<li style="margin-left: 20px;">Ctrl+F yardımı ile <b style="background-color: #cccccc;">]]></b:skin> </b> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.</li>
</ol>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;">/*---jQuery Haber Manşet Slider by www.meftunmede.com---*/
.MEFmanset{border:1px solid #dcdbdb;width:<span style="color: red;">648</span>px;height:<span style="color: red;">302</span>px;}
.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:<span style="color: blue;">640</span>px;height:<span style="color: blue;">270</span>px;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:<span style="color: green;">640</span>px;height:<span style="color: green;">40</span>px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4eu24tfQ4kEOsGYbyaA2JhY2Mbr8WIv2EZCXlAmJF_UyWr0ZDDkgOmXc6T7vtQhNnaR2Wqr2D2-tvXOp99QB5tT75Lmp1-DXmSL-SZBiWTRRqVZBgM-v6nwmzMLciwO-N9FT0IdX0KSA/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/AVvXsEg4eu24tfQ4kEOsGYbyaA2JhY2Mbr8WIv2EZCXlAmJF_UyWr0ZDDkgOmXc6T7vtQhNnaR2Wqr2D2-tvXOp99QB5tT75Lmp1-DXmSL-SZBiWTRRqVZBgM-v6nwmzMLciwO-N9FT0IdX0KSA/s1600/caption-bg.png) repeat scroll 0 0 transparent;}
</pre>
</div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
2. Adım</h3>
<ol style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: -40px;">
<li style="margin-left: 20px;">Tekrar Ctrl+F yapıp <b style="background-color: #cccccc;"> </head></b> kodunu buluyoruz ve hemen üstüne aşağıdaki javascript kodlarını kopyalayıp yapıştırıyoruz.</li>
<li style="margin-left: 20px;"><b>Şablonu Kaydet</b> diyip çıkın.</li>
</ol>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;"><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>
</pre>
</div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
3. Adım</h3>
<ul style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin: 0px 0px 0px -40px; padding-left: 40px;">
<li style="margin-left: 20px;">Şimdi Blogger panelinizden <b>Yerleşim</b> ><b> Gadget Ekle </b>><b> HTML/JavaScript </b>yolunu takip edin.</li>
<li style="margin-left: 20px;">Ve aşağıdaki kodları <a class="klas" href="http://www.meftunmede.com/2013/02/online-html-editor.html" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank">Online HTML Editör</a> ile isteğinize göre ayarlayarak, istediğiniz bölüme kopyalayıp yapıştırın.</li>
<li style="margin-left: 20px;"><b>Kaydet</b> diyip çıkın.</li>
</ul>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;"><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>
<span style="color: green;"></span>
<span>Başlık-resim altyazısı</span>
<span style="color: green;"></span>
</li>
<span style="color: green;"></span>
<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>
<span style="color: green;"></span>
<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/AVvXsEgaXLmNXnlM0BzQjju8cXj3vkx-WFw2lhYCBDVm9ll6HCB4yLeml1_8jR4VebJVzii1L8d3czDej5Y5ID36erPRpaj12y62wyY6U5XVKEJMHXdvgns1HWFcjx6B2e-Q45tRaL0bBpdAmvo/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>
<span style="color: green;"></span>
</ul>
<span style="color: green;"></span>

<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>
<span style="color: green;"></span>
<li class="tumu">
<a href="#" title="Tüm Haberler" target="_blank">TÜMÜ</a></li>
</ul>
</div>
</pre>
</div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
Özelleştirme</h3>
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Style kodlarında Kırmızıyla işaretli yerlerde;</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">1 - width:</span><span style="background-color: white; color: red; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">648</span><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">px; slider çercevesi genişliği, height:</span><span style="background-color: white; color: red; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">302</span><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">px; slider çercevesi yüksekliği</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Mavi işaretli yerlerde;</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">2 - width:</span><span style="background-color: white; color: blue; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">640</span><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">px; Resmin genişliği, height:</span><span style="background-color: white; color: blue; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">270</span><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">px; Resmin yüksekliği</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Yeşil işaretli yerlerde;</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">3 - width:</span><span style="background-color: white; color: green; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">640</span><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">px; Başlık-resim altyazısı bölümü şerit genişliği, height:</span><span style="background-color: white; color: green; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">40</span><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">px; Başlık-resim altyazısı bölümü şerit yüksekliği</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">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.</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">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.</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">6 - Yapamayanlar yorum kısmına "yapamadım" yazmak yerine, Lütfen bana </span><a class="klas" href="http://www.meftunmede.com/p/iletisim.html" style="-webkit-transition: 0.5s; background-color: white; color: #ee5c11; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; outline: none; text-decoration: none; transition: 0.5s;" target="_blank" title="iletişim">iletişim</a><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> 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:)</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...</span><br />
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Kaynak:</span><span style="font-family: open sans, Arial, Helvetica, sans-serif;"><span style="font-size: 12px; line-height: 18px;">http://www.meftunmede.com/</span></span>

Blogger Eklentileri 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 b...

Devamı »

Blogger için Mashable stil ajax navigasyon menü

07:34 ScriptOFisi 0

<div style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjTwGL3baQFp9srYuBX-AGuOiXNflE2SEgvcPsSSpmm9J1sTX0zvBUOIM_ya9OutEFKD2H3-slwBQ3Jl-2OuBD1vvcXf2atfI7QU3c3bw8a_g6mv0OVizZSXeqLiw8Lp95SBgtYczvLlZ/s1600/Blogger_Mashable_stil_Ajax_Menu.png" imageanchor="0" style="-webkit-transition: all 0.17s ease-in-out 0s; color: #fa7029; outline: none; text-decoration: none; transition: all 0.17s ease-in-out 0s;"><img alt="Blogger Mashable stil Ajax Menü" border="0" height="313" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikjTwGL3baQFp9srYuBX-AGuOiXNflE2SEgvcPsSSpmm9J1sTX0zvBUOIM_ya9OutEFKD2H3-slwBQ3Jl-2OuBD1vvcXf2atfI7QU3c3bw8a_g6mv0OVizZSXeqLiw8Lp95SBgtYczvLlZ/s1600/Blogger_Mashable_stil_Ajax_Menu.png" style="border-width: 0px;" title="Blogger Mashable stil Ajax Menü" width="610" /></a><br />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.</div>
<div style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin: auto; width: 186px;">
<a class="klas" href="http://meftun-mede.googlecode.com/svn/trunk/Blogger_Mashable_stil_Ajax_Menu.html" rel="nofollow" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank">Blogger Ajax Menü önizleme</a></div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
Bu Eklenti Nasıl Kurulur?</h3>
<ol style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: -40px;">
<li style="margin-left: 20px;">Blogger panelinize giriş yapın > <b>Şablon</b> ><b> HTML'yi Düzenle</b></li>
<li style="margin-left: 20px;">Ctrl+F yardımı ile <b style="background-color: #cccccc;">]]></b:skin> </b> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.</li>
</ol>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;">.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 {<span style="color: red;">width:960px;</span>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/AVvXsEgsTbOWFgsdCkvSqC_cRczkxMk4BeAbuvSYNthNLwG2vmS9drwp1X2EHaOatnJVBmPVjKj9FVmfCYOWeiW-ax7WhDxEB-CbYMwFNPz3Ca2WeWFdtwiX4dgObksg3dcxwvU-txpRLV8HwrU/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;}
</pre>
</div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<ol style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin-left: -40px;">
<li style="margin-left: 20px;">Tekrar Ctrl+F yapıp <b style="background-color: #cccccc;"> </head></b> kodunu buluyoruz ve hemen üstüne aşağıdaki javascript kodlarını kopyalayıp yapıştırıyoruz.</li>
<li style="margin-left: 20px;"><b>Şablonu Kaydet</b> diyip çıkın.</li>
</ol>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;"><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 : <span style="color: red;">4</span>, // Konu Sayısı
defaultImg : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGVxoDzXET3Kn-ffoXurJNREUdgriDHt6I73f8NnAhmfbBvMAZ685HnaPkWFIrYQaGtxxJ3EinlNncfG3frbb38BBvlfgrBiTpPRK45bCEZW0JIyjhU1AZe-OHWjydFfSEYgIWZiDdmoI/s1600/no-photo-available.jpeg' // Varsayılan küçük resim
});});
</script>
</pre>
</div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Bu bölümde HTML linklerimizi dikkatli eklememiz gerekiyor, aksi takdirde eklenti doğru çalışmaz.</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">AJAX Menü URL'ler üç tür kabul eder. Menüde sadece bu URL'leri kullanmanız gerekir. Bunlar </span><strong style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Etiket (Label)</strong><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">,</span><strong style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Arama Sorgusu (Search Query)</strong><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"> ve </span><strong style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Etiket ile Arama Sorgusu (Label with Search Query)</strong><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">.</span><br />
<table style="background-color: white; color: black; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"><tbody style="border-top-style: none;">
<tr><td>Etiket URL</td><td>http://blogadresiniz.blogspot.com/search/label/LABELNAME</td></tr>
<tr><td>Arama Sorgusu</td><td>http://blogadresiniz.blogspot.com/search?q=SEARCHQUERY</td></tr>
<tr><td>Etiket ile Arama Sorgusu</td><td>http://blogadresiniz.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY</td></tr>
</tbody></table>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<ul style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; margin: 0px 0px 0px -40px; padding-left: 40px;">
<li style="margin-left: 20px;">Son olarak Blogger panelinizden <b>Yerleşim</b> ><b> Gadget Ekle </b>><b> HTML/JavaScript </b>yolunu takip edin.</li>
<li style="margin-left: 20px;">Ve aşağıdaki kodları <a class="klas" href="http://www.meftunmede.com/2013/02/online-html-editor.html" style="-webkit-transition: 0.5s; color: #ee5c11; outline: none; text-decoration: none; transition: 0.5s;" target="_blank">Online HTML Editör</a> ile isteginize göre ayarlayarak kopyalayıp yapıştırın.</li>
<li style="margin-left: 20px;"><b>Kaydet</b> diyip çıkın.</li>
</ul>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<div class="Code1" style="-webkit-transition: background-color 1s ease-in-out; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3_5KAt89EbRaV2W4M1gTu8XGBkvytPWkE-uWsEiUjfa4U5PTFYdzkTFjwWj5FkFG-K1qn49au-CY03o1DZ5DCGdwnIAYdsyfNFPGIDDVxjNH2GjdfGXHgo1rklvvRXFZx0Lc-Am6fc4b/s1600/MefCode1.png) 0% 0% no-repeat rgb(159, 207, 255); border-radius: 5px; border: 1px solid rgb(196, 196, 196); clear: both; color: #111111; font-family: 'open sans', Courier; font-size: 12px; line-height: 18px; margin: 1px 0px 0px; overflow-wrap: break-word; overflow-x: auto; padding: 30px 5px 1px; transition: background-color 1s ease-in-out;">
<pre style="font-family: 'open sans', cursive;"><ul id="mefajaxmenu" class="mefmenu">
<li>
<a href="<span style="color: red;">http://www.meftunmede.com</span>"><span style="color: red;">ANA SAYFA</span></a>
</li>
<li>
<a href="<span style="color: red;">#</span>"><span style="color: red;">ÖRNEK 1</span></a>
<ul>
<li><a href="<span style="color: red;">http://www.meftunmede.com/search/label/Sosyal%20Medya</span>"><span style="color: red;">SOSYAL MEDYA</span></a></li>
<li><a href="<span style="color: red;">http://www.meftunmede.com/search/label/Blogger%20Eklentileri</span>"><span style="color: red;">BLOGGER EKLENTİLERİ</span></a></li>
<li><a href="<span style="color: red;">http://www.meftunmede.com/search/label/Yemek%20Tarifleri</span>"><span style="color: red;">YEMEK TARİFLERİ</span></a></li>
<li><a href="<span style="color: red;">http://www.meftunmede.com/search/label/Filmler</span>"><span style="color: red;">FİLMLER</span></a></li>
</ul>
</li>
<li>
<a href="<span style="color: red;">#</span>"><span style="color: red;">ÖRNEK 2</span></a>
<ul>
<li><a href="<span style="color: red;">http://www.meftunmede.com/search/label/Html%20Kodlar%C4%B1</span>"><span style="color: red;">HTML KODLARI</span></a></li>
<li><a href="<span style="color: red;">http://www.meftunmede.com/search/label/Programlar</span>"><span style="color: red;">PROGRAMLAR</span></a></li>
<li><a href="<span style="color: red;">http://www.meftunmede.com/search/label/%C4%B0nternet</span>"><span style="color: red;">İNTERNET</span></a></li>
<li><a href="<span style="color: red;">http://www.meftunmede.com/search/label/Ara%C3%A7lar</span>"><span style="color: red;">BLOGGER ARAÇLARI</span></a></li>
</ul>
</li>
<li><a href="<span style="color: red;">http://www.MeftunApart.com</span>"><span style="color: red;">NORMAL LİNK</span></a></li>
</ul>
</pre>
</div>
<br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" />
<h3 style="background-color: white; border: medium none; color: #e67e39; font-family: Oswald, Helvetica, sans-serif; font-size: 22px; font-weight: 400; line-height: 26px; list-style: none outside none; margin-bottom: 10px; outline: none medium; padding: 0px;">
Özelleştirme</h3>
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Kırmızıyla işaretli yerlerde;</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">1- Style kodlarında width:</span><span style="background-color: white; color: red; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">960</span><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">px; menünüzün genişliği,</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">2- Script kodunda numPosts : </span><span style="background-color: white; color: red; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">4</span><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">, // Alt menüde görünmesini istediğiniz konu sayısı</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">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.</span><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><br style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;" /><span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Umarım eklenti hoşunuza gitmiştir. Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...</span><br />
<span style="background-color: white; font-family: 'open sans', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Kaynak:</span><span style="font-family: open sans, Arial, Helvetica, sans-serif;"><span style="font-size: 12px; line-height: 18px;">http://www.meftunmede.com/</span></span>

Blogger Eklentileri 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 na...

Devamı »

Tema Ofisi

#AdsenseSpace 300 x 250

Sosial Media ( Sticky! )

Komentar Terbaru

Animasyonlu Sosyal Medya Sekme Butonları

Profesyonel CSS katlama efektli Dikey Sidebar Menü

Blogger en çok yorumlanan yazılar eklentisi

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

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

Jquery Haber Manşet Slider

Blogger için Mashable stil ajax navigasyon menü

Popüler Yayınlar

Blog Arşivi