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

8 Aralık 2013 Pazar

Google Plus Popup Beğeni Kutusu


Google Plus devreye girdiği günden beri SEO açısından oldukça önemli bir hal aldı, bunu size her fırsatta açıklamaya çalıştım. Google Plus takipçilerinizi artırmak ve yayınlarınızın daha fazla kişi tarafından +1 lenmesi size uzun vaade de ciddi bir katkı sağlayacaktır. Google Plus takipçilerini artırmanın yöntemlerinden birisi hiç kuşkusuz beğeni kutuları kullanmak bunlardan biri de : Google Plus Popup Beğeni Kutusu. Kesinlikle ve kesinlikle Popup kutular kullanmayı tavsiye etmiyorum fakat kimileri popup kullanmaktan hiç çekinmiyor. Sizde bu arkadaşlardansanız ve Google Plus üzerinden sizi takip edenleri artırma niyetindeyseniz işinizi görecektir.


Blogger - Google Plus Popup Beğeni Kutusu Demo 


1 ) Blogger ana kullanıcı panelinden yerleşim menüsüne geçin.
2 ) Herhangi bir yerde Gadget Ekle seçeneğini kullanın ,  HTML/JavaScript kutusunu açın.
3 ) Aşağıdaki kodları yerleştirin.

Blogger Eklentileri - Google Plus Popup Beğeni Kutusu Kodları


<style type="text/css">
/***********************************************
***********************************************/
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_pI1FYu7YxQy8XMCwZUzGzrnONpchHBSSamoWw1GqqyAztcRyabudeyEfjp6JFKy09F6qcxNV8-JSOuRdwTQczfaB0tuSSVFPDUo64Wq9uu8-KlGjh2K_CXRtz2K1y0gelHBZmHmPScjz/s1600/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#exestylepopup {z-index:9999;background-color: #fff; overflow:none;}
.exestylepopup {width:400px; height:440px; position:fixed; top:45%; left:50%; margin-top:-220px; margin-left:-200px; border: 10px solid #999; padding: 20px;}
.exe-title {background:#000;color: #fff;font-size: 20px !important;font-weight:bold;margin:5px 0;border:20px solid #ddd;padding:10px;line-height:25px; font-family:arial !important;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<center><h3 class="exe-title">Buraya İstediğinizi Yazın</h3></center>
<center>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/117069198363134832012" data-source="blogger:blog:followers" data-width="310">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</center>
<br />
<center style=" float:left; margin-left:35px; font-size:9px;cursor:pointer;" ><a style=" font-size:9px; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">Bu Adımı Geç >> </a></center>
</div>
</div>

Google Plus Popup Beğeni Kutusu Üzerinden Yapılacak Değişiklikler

  • Kodlar arasında kırmızı olarak işaretlenmiş kısım Popup penceresinde açılmasını istediğiniz sayfanın linki. 
  • Mavi olan kısım Popup penceresinde üst kısımda bulunan alan. Kişisel iletinizi ekleyebilirsiniz.

Devamı...

Blogger kullanıcıları kayıtlarınına olan ilgiyi istatistikler bölümünden yada Google analytics tarzı site takip sistemleri ile izleyebilir. Sayfalarınıza olan ilgiyi diğer kullanıcılarla paylaşmak istiyorsanız ufak bir kod sistemi ile bunu başarabilirsiniz. Kodları hemen yazınızın altına koymanızı tavsiye ediyorum.

 Blog Yazılarım Kaç Kere Okundu Demo >>   : Demo örneğinde sayfayı biraz indirirseniz konunun kaç kere okunduğunu gösteren pembe yazıyı görebilirsiniz.

Blogger Yazılarımı Kaç Kişi Okudu? Eklentisi


1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle kodlarımızı açıyoruz. Widgetleri genişlet kutucuğunu işaretliyoruz.
 2 ) Ardından CTRL+F yardımı ile <data:post.body/></div> kodunu bularak hemen altına aşağıda ki Blogger yazılarım kaç kere okundu eklentisi kodlarını ekliyoruz.


<div style='text-align: left;'>
<b:if cond='data:blog.pageType == &quot;item&quot;'><span style='color: magenta;'><b> Bu yazı daha önce  <img alt='counter' expr:src='&quot;http://www.e-zeeinternet.com/gd-count.cgi?page=&quot; + data:post.id + &quot;&amp;style=times&amp;nbdigits=1&amp;reloads=1&quot;'/> kişi tarafından okundu.</b></span><b:else/></b:if></div>

Blogger Yazıları Kaç Kere Okundu Eklentisi Düzenlemesi

  • Mavi ile yazılmış alan eklentinizin sayfanızın altında hangi aralıkta duracağını belirler. Sol için left. Sağ için Right ve ortada durması için center yazabilirsiniz. 
  • Kırmızı ile yazılmış alan ise Blogger kullanıcılarınıza sayacı nasıl göstereceğinizi belirler. Kendinize uyacak şekilde değiştirebilirsiniz. 
  • Meganta kısmı ise size ait olan yazının rengini belirler. Renk kodlarını kullanarak değiştirebilirsiniz. Renk Kodları >> 

Devamı...

Blogger İletişim Kutusu Eklentisi



Google, Blogger kullanıcıları için kullanışlı eklentiler sunmaya devam ediyor. Karşınızda Blogger iletişim kutusu eklentisi. Daha öncede sizlere yeni bir eklenti olarak Wikipedia eklentisini sunmuştum gözünüzden kaçtıysa incelemenizi tavsiye ederim : Blogger İçin Wikipedia Eklentisi >> Sürekli gelen eklentiler ve Google Drive ile farklı kod kullanma imkanlarına açık olması Blogger formatını her geçen gün daha da güçlendiriyor. İletişim formunu Gadget olarak kullabiliyorsunuz yeni bir sayfada açılması şimdilik olası değil.


Blogger İletişim Kutusu Eklentisi Demo 

Açılan demo sayfasında ki iletişim formunu sayfanın en altında görebilirsiniz. Eklentiyi kullanmak için Blogger kontrol paneli >> Yerleşim >> Gadget Ekle açılan sayfada ise Diğer Gadget'lar menüsünü takip edin.


Diğer Gadget'lar kısmında iletişim kutusu seçeneğini göreceksiniz


İletişim formu üzerinden mail gönderenlerin maillerini Blogger hesaplarınız bağlı olduğu gmail hesabından görüyorsunuz faydalı olması dileği ile.

Devamı...

Blogger Skype Contact Eklentisi



Blogger Eklentileri konu başlığı altında Blogger şablonların da Skype adresini kullanarak ziyaretçileri ile buluşmayı amaçlayanlar için bir Skype eklentisi sunacağım. Özellikle Messenger'ın Skype üzerinden çalışır duruma gelmesi ile Skype oldukça popüler oldu. Demo linkine tıklayarak sağ sütunda  demoyu görebilirsiniz.

Blogger Skype İletişim Eklentisi Demo 

Skype kutusunu oluşturmak oldukça kolay , bunun için Skype özel bir sayfa hazırlamış Blogger Skype Contact Eklentisi oluşturmak için buradan buyurun : https://dev.skype.com/skype-uri/generator

Üç adet basamağı kendinize göre doldurmanız gerekiyor. İlk bölüme kullanıcı adınızı , ikinci aralığa size nasıl ulaşılmasını istediğinizi , üçüncü adamdı ise şekli belirleyebilirsiniz. Ardından dördüncü boşlukta sizin için hazırlanmış kodlar olacak. Kodları kullanmak için Blogger kontrol panelinden yerleşim seçeneğine geçerek kullanmak istediğiniz alana Gadget Ekle,  Html/Javascript olarak ekleyebilirsiniz. Ayrıca kodlar yayınlar içerisinde de sorunsuz çalışıyor.


Devamı...

3 Aralık 2013 Salı

Blogger Oyunlar Eklentisi

.

Yapmanız gereken işlem çok basit;Kumanda Panelinden>Yerleşim>Gadget Ekleyolunu takip edip,Html/Javascript gadgeti içerisine yapıştırıyoruz.Bu işlemi yaptıktan sonra artık blogumuzda oyunlar olacak ve bu oyunlar sürekli güncellenecek.Blogunuzu biraz daha renklendirecek güzel bir eklenti.




<div id="24work">
<img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /><script language="JavaScript">
imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZwAXuqvwREHiDU2FJwayYRB3zgH8OgDbsZ8giP3E-CuhUHO2rlGVtIvqVF4O1SMDQVnN2yhlRHAgUAR2J0ENRgRsbUuS6M8mXo4NaGFqPfugjzL_E8Tx_AyG8R16u-D3bwT-9PDTuysc/s400/noimage.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZwAXuqvwREHiDU2FJwayYRB3zgH8OgDbsZ8giP3E-CuhUHO2rlGVtIvqVF4O1SMDQVnN2yhlRHAgUAR2J0ENRgRsbUuS6M8mXo4NaGFqPfugjzL_E8Tx_AyG8R16u-D3bwT-9PDTuysc/s400/noimage.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZwAXuqvwREHiDU2FJwayYRB3zgH8OgDbsZ8giP3E-CuhUHO2rlGVtIvqVF4O1SMDQVnN2yhlRHAgUAR2J0ENRgRsbUuS6M8mXo4NaGFqPfugjzL_E8Tx_AyG8R16u-D3bwT-9PDTuysc/s400/noimage.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZwAXuqvwREHiDU2FJwayYRB3zgH8OgDbsZ8giP3E-CuhUHO2rlGVtIvqVF4O1SMDQVnN2yhlRHAgUAR2J0ENRgRsbUuS6M8mXo4NaGFqPfugjzL_E8Tx_AyG8R16u-D3bwT-9PDTuysc/s400/noimage.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZwAXuqvwREHiDU2FJwayYRB3zgH8OgDbsZ8giP3E-CuhUHO2rlGVtIvqVF4O1SMDQVnN2yhlRHAgUAR2J0ENRgRsbUuS6M8mXo4NaGFqPfugjzL_E8Tx_AyG8R16u-D3bwT-9PDTuysc/s400/noimage.png";


showRandomImg = true;

tablewidth = 4;
cellspacing = 5;
borderColor = "transparent";
bgTD = "#ffff";

imgwidth = 157;
imgheight = 120;

fntsize = 0;
acolor = "white";
aBold = true;
icon = " ";

text = "no";

showPostDate = false;

summaryPost = 0;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 16;

home_page = "http://www.oyun04.com/";

</script>
<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/rec-thumbnail/recentposts_thumbnail-1.js"></script>
</div>


Devamı...

Blogger Title Seo Ayarı


Blogger sitelerde varsayılan olarak gelen bazı ayarlarda değişiklikler yapmanız gerekiyor. Bu değişikliklerden kuşkusuz ilki title seo ayarı kısmı. Çünkü sitemize gelen arama motorlarının sitemizi daha iyi indekslemeleri ve anahtar kelimemiz de daha yukarılara çıkmamız için gerçekten gerekli olan ayarların başında geliyor.

Hemen blogger title seo ayarı nasıl yapılır buna geçiyorum. İlk olarak blogumuzun kodları içerisinde yer alan aşağıdaki kodu buluyoruz.


<title><data:blog.pageTitle/></title>




Bulduğumuz bu kodu ise aşağıda yer alan kodumuz ile değiştiriyoruz. 



<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/>-<data:blog.title/></title>
</b:if>


Bu şekilde sitemiz seo açısında güçlenmiş oluyor arkadaşlar. Kodlar içerisinde herhangi bir değişiklik yapmadan önce sitemiz site başlığı-içerik başlığı şeklinde indeks alıyordu. Artık sitemiz içerik başlığı-site başlığı şeklinde indeks alarak bizi seo çalışmalarında bir adım öne çıkarıyor.
Devamı...

28 Kasım 2013 Perşembe

Blogger Hover Efekti Son Yazılar Eklentisi



1-Yerleşim Tıklıyoruz > 2-Gatget Ekle > 3-HTML/JavaScript dedikten sonra aşağıdaki kodları içersine yerleştiriyoruz.



<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0kSlBLaihuCJ-_7CqgQSgTswEqWr-aq9yojTecpVMzRtgvnkAe6leQGbP4y3GWl2vI179if88wVUSWlhiQ8ygQlgzT2NnqGEn-aFZOP155iac1_BPwYoamWk66Bd-GRzRTX0lKzSIhTpV/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "Son Yazılar",       // Eklenti Başlığı
    numposts    = 14,      // Kaç tane yayın gösterilsin ayarları
    numchar     = 200,      // Resim altında gösterilecek yazı karekter sayısı
    rcFadeSpeed = 600,      // Eklenti hızı ayarları
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // Resim olmayan yazılarınız için kullanılacak resim
    blogURL     = "http://hk-y.blogspot.com/";       // Blog adresini yaz
</script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js" type="text/javascript"></script>

"Son Yazılar", // Eklenti Başlığı
numposts = 14, // Kaç tane yayın gösterilsin ayarları
numchar = 200, // Resim altında gösterilecek yazı karekter sayısı
rcFadeSpeed = 600, // Eklenti hızı ayarları
pBlank = "http://1.bp.blogspot.com/-pBlank = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", // Resim olmayan yazılarınız için kullanılacak resim
blogURL = "http://hk-y.blogspot.com/"; // Blog adresini yaz
Devamı...

Blogger İçin Harika Resim Slayt Eklentisi


Blogunuz için çok güzel bir resim slayt eklentisi, benim çok hoşuma gitti şahsi fikrim... 

Şablon Tıklıyoruz > HTML Düzenle > CTRL+F yardımı ile </head> kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz





<style>
  #rotatescroll {
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .viewport { /* 
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: 300px
  }
  #rotatescroll .overview {
    left: 0;
    list-style: none; 
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
  }
  #rotatescroll .overview li { 
    float: left;
    height: 300px;
    position: relative;
    width: 300px;
  }
  #rotatescroll .overlay { 
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih8beHE3nDoA3Vxxb3GMF8wJPvDBKLQPHPGVp14PYtzMSN5Y3rb2XkhVQxsGStrjtssbIEsZ2EUoF3xG8UPVV-eaty721Y3160Q7BQLXDMb6-kYSg9BSaKe32HjvHbMAxeJLhMQv-5s4Ap/s1600/bg-rotatescroll.png) no-repeat 0 0;
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    width:300px;
  }
  #rotatescroll .thumb { 
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdvhcUWNGEwsbjUj94EPFob8KehnmSpZblrnDKoQvcB7TLKzMHRj4Z8R5pda1Y4hqpZRR9-ikJvQTflAMjbo6zA7elhpSv13nmotEnJKO2zLyB7j7Nl1X6UPxHtfu-OaYNQ3G164redsGH/s1600/bg-thumb.png) no-repeat 0 0;
    cursor: pointer;
    height: 26px;
    left: 137px;
    position: absolute;
    top: -3px;
    width: 26px;
    z-index: 200;
  }
  #rotatescroll .dot { 
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMNXYeWVMykr1nZbIFMy6WFU0N_H7l6NFXrg2_OXAZOucfgmmk8AifP7vDev4UvheNfq4aGdwnwDtZZpXOQw5vDyRHrep7OKyjwBTVs_WTF3fG1iJP7lgHjfJEKrjEDfEzAzeBTTJGj6Rc/s1600/bg-dot.png) no-repeat 0 0;
    display: none;
    height: 12px;
    left: 155px;
    position: absolute;
    top: 3px;
    width: 12px;
    z-index: 100;
  }
  #rotatescroll .dot span { 
    display: none;
  }
</style>

Daha sonra Blogger Panelinden Yerleşim diyoruz Gatget Ekle ve içerikten HTML/JavaScript seçiyoruz.


<div id="rotatescroll">
  <div class="viewport">
    <ul class="overview">
      <li><img src="Resim Linki" /></li>
      <li><img src="Resim Linki" /></li>
      <li><img src="Resim Linki" /></li>
      <li><img src="Resim Linki" /></li>
      <li><img src="Resim Linki" /></li>
    </ul>
  </div>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</div>

<script type="text/javascript">
$(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
$('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
</script>

Yukarıdaki kod içersinde bulunan "Resim Linki" bölümüne seçtiğiniz resimlerin linkini yerleştiriyorsunuz.


<iframe width="640" height="360" src="//www.youtube.com/embed/vClXihtsdgY?feature=player_embedded" frameborder="0" allowfullscreen></iframe>
Devamı...

Hover Efektli Resimli Benzer Yazılar Eklentisi



1-Şablon Tıklıyoruz > HTML Düzenle > CTRL+F yardımı ile ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz 





#related_posts h4{font-size:220%;font-family:&#39;Open Sans Condensed&#39;,&quot;Arial Narrow&quot;,Arial,sans-serif;text-transform:capitalize;margin-top:20px}
.isirelated h5{text-transform:capitalize;font-size:120%;margin-bottom:3px}
#relpost_img_sum img{width:120px;height:120px;border: 2px solid #1d1d1d;
border-radius: 5px;
background-image:-moz-linear-gradient(top,#ffffff,#eeeeee);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#eeeeee));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#eeeeee);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffffff),color-stop(1,#eeeeee));
background:-moz-linear-gradient(center top,#fff 0,#eee 100%);
-pie-background:linear-gradient(270deg,#ffffff,#eeeeee);
-moz-box-shadow:0 0 0 4px rgba(100,100,100,0.1);
box-shadow:0 0 0 4px rgba(100,100,100,0.1);
-webkit-box-shadow:0 0 0 4px rgba(100,100,100,0.1);}
.isirelated{width:300px;z-index:2;padding:5px 8px;background-color:#F3F3F3;border-bottom:2px solid black;position:absolute;top:-70%;left:200px;visibility:hidden;opacity:0;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s}
#relpost_img_sum li:hover .isirelated{visibility:visible;opacity:1;left:10px}
.isirelated::after{content:&quot;&quot;;width:0;height:0;border-width:10px 5px;border-style:solid;border-color:black transparent transparent transparent;position:absolute;top:100%;left:11px}
#relpost_img_sum li{list-style:none;width:120px;height:120px;position:relative;float:left;margin-right:5px}
.news-text{font-size:90%}
#related_posts{height:180px;border: 2px solid #c4c4c4;
border-radius: 5px;
background-image:-moz-linear-gradient(top,#ffffff,#eeeeee);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#eeeeee));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#eeeeee);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffffff),color-stop(1,#eeeeee));
background:-moz-linear-gradient(center top,#fff 0,#eee 100%);
-pie-background:linear-gradient(270deg,#ffffff,#eeeeee);
-moz-box-shadow:0 0 0 4px rgba(100,100,100,0.1);
box-shadow:0 0 0 4px rgba(100,100,100,0.1);
-webkit-box-shadow:0 0 0 4px rgba(100,100,100,0.1);}


2-Tekrar CTRL+F yardımı ile  </head> kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz




//<![CDATA[
$(document).ready(function(){
if(!$.browser.msie) $(".glap ul li").hover(function() {$(this).siblings().stop().fadeTo(400,0.4);},
function() { $(this).siblings().stop().fadeTo(400,1); });
});
//]]>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var relnojudul=0;var relmaxtampil=4;var numchars=150;var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(d,c){var b=d.split("<");for(var a=0;a<b.length;a++){if(b[a].indexOf(">")!=-1){b[a]=b[a].substring(b[a].indexOf(">")+1,b[a].length)}}b=b.join("");b=b.substring(0,c-1);return b}function relpostimgcuplik(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];reljudul[relnojudul]=d.title.$t;postcontent="";if("content" in d){postcontent=d.content.$t}else{if("summary" in d){postcontent=d.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in d){postimg=d.media$thumbnail.url}else{postimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZs-zbWyuNQtcC7YrnG8Ni-sFLfXRGuPeRo36HN8ZnDDveXD43A08Qpuw9v3ou9gS-msDwkCTSKb2WCtbkLbfKsXsqIlzqBqg0lk6c_HaTMP0CcutnrdFr6A4sQOGi4kJBJ871kHm-Rs/s1600/no_image.jpg"}relgambar[relnojudul]=postimg;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relurls[relnojudul]=d.link[a].href;break}}relnojudul++}}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function artikelterkait(){var j=new Array(0);var h=new Array(0);var g=new Array(0);var d=new Array(0);for(var k=0;k<relurls.length;k++){if(!contains(j,relurls[k])){j.length+=1;j[j.length-1]=relurls[k];h.length+=1;h[h.length-1]=reljudul[k];g.length+=1;g[g.length-1]=relcuplikan[k];d.length+=1;d[d.length-1]=relgambar[k]}}reljudul=h;relurls=j;relcuplikan=g;relgambar=d;for(var k=0;k<reljudul.length;k++){var c=Math.floor((reljudul.length-1)*Math.random());var p=reljudul[k];var m=relurls[k];var f=relcuplikan[k];var b=relgambar[k];reljudul[k]=reljudul[c];relurls[k]=relurls[c];relcuplikan[k]=relcuplikan[c];relgambar[k]=relgambar[c];reljudul[c]=p;relurls[c]=m;relcuplikan[c]=f;relgambar[c]=b}var n=0;var a=Math.floor((reljudul.length-1)*Math.random());var e=a;var o;var l=document.URL;while(n<relmaxtampil){if(relurls[a]!=l){o="<li class='news-title clearfix'>";o+="<a href='"+relurls[a]+"' rel='nofollow'  target='_top' title='"+reljudul[a]+"'><img src='"+relgambar[a]+"' /></a>";o+="<div class='isirelated'><h5>"+reljudul[a]+"</h5>";o+="<span class='news-text'>"+relcuplikan[a]+" ... </span></div>";o+="</li>";document.write(o);n++;if(n==relmaxtampil){break}}if(a<reljudul.length-1){a++}else{a=0}if(a==e){break}}};
//]]></script>
</b:if>


3-Tekrar CTRL+F yardımı ile <data:post .body=""> kodunu buluyoruz ve aşağıdaki kodları hemen altına yerleştiriyoruz bu kod için bir kaç sonuç çıkabilir siz ikinci bulduğunuz kodun altına uygulayın




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<p style='color:#111; font-weight: bold; font-size: 22px;font-family: &quot;Trebuchet MS&quot;,sans-serif; margin:0px 0px 5px 0px; '>Benzer Yazılar</p>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=40&quot;' type='text/javascript'/>
</b:loop>
<span class='glap'><ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul></span>
</div>
</b:if>

Buraya kadar bütün kodları doğru yere yapıştırdıysanız blogunuzda herhangi bir konuya girin ve kontrol edin.
Devamı...

Yuvarlak Stil Popüler Yayınlar Eklentisi

 
1-Şablon Tıklıyoruz > HTML Düzenle > CTRL+F yardımı ile ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları hemen üstüne yerleştiriyoruz 

.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px; list-style-type: none;padding:5px 5px 5px 20px !important; border: 1px solid #ddd;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; height: 40px; -moz-box-shadow: 3px 2px 5px #242424; -webkit-box-shadow: 3px 2px 5px #242424; box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px; } .popular-posts ul li a { font-style: italic; } .popular-posts ul li:hover { border:1px solid #d10202;  -moz-box-shadow: 3px 2px 5px #d10202; -webkit-box-shadow: 3px 2px 5px #d10202; box-shadow: 3px 2px 5px #d10202; } .popular-posts ul li a:hover { text-decoration:none; } .popular-posts .item-thumbnail img { height:40px;width:40px; webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4); } .popular-posts .item-thumbnail img:hover{ -moz-box-shadow: 0px 0px 5px #d10202; -webkit-box-shadow: 0px 0px 5px #d10202; box-shadow: 0px 0px 5px #d10202;}


Son adım olarak Popüler Yayınlar gatgetini yandaki resimde olacak şekilde yapıyoruz.
Devamı...

blogger super etiketler eklentisi css3

Blogger css3 ile Etiketleri özelleştirme eklentisi


Blogger Etiketleri özelleştirme ( renklendirme ) eklentisi

Bu eklentimizde blogger blogunuzda bulunan etiketleri css3 yardımı ile biraz daha görselleştirmeyi anlatacağız..

Öncelikle blogunuzda etiketler gadgetinin ekli olduğundan emin olun , yoksa eklemek için , Yerleşim >> Gadget Ekle >> Etiketler sekmesinden eklentiyi ekleyin..

Etiketler eklentisini eklerken "Görüntüle" kısmını "BULUT" olarak seçelim..

Şimdi şablon ksımına girip alttaki kodumuzu buluyoruz..

]]></b:skin>

Bu kodumuzun hemen üstüne , aşağıda yer alan kodları ekliyoruz..


.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}
 
.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}
 
.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}
 
#Label1 {
    height: 210px;
}
 
.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}
 
.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

Devamı...

En Çok Yorum Yapılan Yazılar / Konular Eklentisi



Blogunuz için mükemmel bir eklenti daha sizlerle.Blogunuzda en çok yorum yapılan konularınızı göstermek istemezmisiniz . İşte size kodlar......

Blogunuzun Yerleşim kısmına girerek Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodları ekleyin..


<!-- Popular posts with comment hk-y.blogspot.com -->
<script type="text/javascript">
function getYpipePP(feed) {
 document.write('<ol style="">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment); //to remove comment count delete this line
 document.write('</a></li>');
 }
 document.write('</ol>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://hk-y.blogspot.com
 &ShowHowMany=10
 &_id=390e906036f48772b2ed4b5d837af4cd
 &_callback=getYpipePP
 &_render=json" 
type="text/javascript"></script>

<!-- Popular posts with comment hk-y.blogspot.com -->


Yukarıdaki kodları eklediyseniz , kod içinde geçen ; hk-y.blogspot.com adresi yerine , kendi blog adresinizi , mavi ile yazılmış olan 10 rakamını değiştirerek göstermek istediğiniz yazı sayısını ayarlayabilirsiniz..
Devamı...

27 Kasım 2013 Çarşamba

Blogger POP - UP Twitter Beğen Kutusu


Blogger Pop - Up Twitter Beğen Kutusu Kurulumu

Blogger eklentisini isterseniz belli bir sayfada kullanabilirsiniz. Bunun için yayın içeriği oluştururken HTML bölümüne kodları yapıştırmanız yeterli. Tüm blog sayfalarınızda kullanmak istiyorsanız Şablon >> Gadget Ekle >> HTML/Java Script kutucuğunu açarak kodları eklemeniz gerekiyor.  


Blogger Pop-Up Twitter Beğen Kutusu Kodları 




<!-- http://www.bloggerdersleri.com/. -->
<style type="text/css">
/***********************************************
* CSS POP-UP With Light Box Effect- © EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
* Visit http://www.exeideas.com/ for full source code.
***********************************************/
* html #exestylepopupdiv {position:absolute;}
#exestylepopupdiv {display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCYrL1wdDFUyQ569CGqEQWUBf4YB1O08lEZKUC56FpDp7b7SMBQWrULtPKlGv6JWeeyaq8OTt0T1TC9I7QQCoRtndqVLyYPlyT1G04TmdjIalQMDmDRf1CwQqOyIoL0oU_yC8wiCELvQ/s128/exeideasopacity0.5.png');margin:0; overflow-y:auto;}
#exestylepopup {background-color: #fff; overflow:none;}
.exestylepopup {width:400px; height:420px; position:fixed; top:45%; left:50%; margin-top:-210px; margin-left:-200px; border: 10px solid #999; padding: 20px;}
.exe-title {background:#000;color: #fff;font-size: 20px !important;font-weight:bold;margin:5px 0;border:20px solid #ddd;padding:10px;line-height:25px; font-family:arial !important;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<center><h3 class="exe-title">Yeniliklerden Haberdar Olun..</h3></center>
<center>
<script type="text/javascript">
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 237px; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("Bloggerblog_");</script></center>
<br />
<center style=" float:right; margin-right:35px; font-size:9px;" > <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.bloggerdersleri.com/">Blogger Dersleri</a></center>
<center style=" float:left; margin-left:35px; font-size:9px;cursor:pointer;" ><a style=" font-size:9px; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">Beğenmeden Geç</a></center>
</div>
</div>
<!-- http://www.bloggerdersleri.com/. -->

Blogger Pop-Up Twitter Eklentisi Üzerinde Yapmanız Gereken Değişiklikler : 

Blogger eklentisi üzerinde yapmanız gereken kodlar arasında kırmızı olarak yazılmış Twitter kullanıcı adınızı değiştirmek. 


Devamı...

Blogger Sayaçlı Sosyal Paylaşım Butonları


Blogger Sayaçlı Sosyal Paylaşım Site Butonları 

Blogger Eklentisini isterseniz her sayfanızda kullanabilirsiniz. Bunun için yapmanız gereken Şablon >> Gadget Ekle >> HTML/Java Script kutucuğunu kullanarak Blogger Eklentileri - Sayaçlı Sosyal Paylaşım Butonları kodlarını eklemelisiniz.

Belirli sayfalarda kullanmak istiyorsanız ise yayın girerken HTML bölümüne Blogger Eklenti kodlarınızı eklemelisiniz.

Blogger Sayaçlı Sosyal Paylaşım Site Buton Kodları  

<style> 
.rss-hb {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhYIJ6yrriwdaf4fT8K2k3lalxkX1qEjwctT6aS9dTeG7kr8r0_LYazMXrxzfoM5pzYBQ0myHgSGJcZP2QjnaegBUR8UbY9Tjg4ipwOLWaCZke8U8kNgbklOi8L4adSloyu50UvyUiB_o/s1600/rss+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 5px;
}

.rss-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJhx71fk75ZrRmtBnxLy7i08nNpIVnsowWka25vIhHrVnM-Nd6PY0zjI3B_1OKZwA1I6cYhX4k0Xpa4ssImxn2YM6Y9QrrNjelRhw_5npMHCVU-H7taOc0a6hGIvgSF8DoNkLXi119go4/s1600/rss.png) no-repeat;
}

.twitter-hb {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpfRs1gVmLqC95Zo1-LlGAQwJ1kRLx-KULiWCil9QJdODyMO8EVzAohO43QSFG9plCfSpLnH9G7sl6LHByi8kZoJ8woWDiPChWIIpJo-mZRAgC2KMJ7zrBkI-N1AB8xGcXq2f_4UO5Uy0/s1600/twitter.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}

.twitter-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRRxkuEJu6OkS2phB997cWsXA8DLYO9pgD2ZXNoH6FWs8F9crOnNuFcFATEOtyGOBh0g4uDDzt_V9jKk0EePXZukQFPkpDms_ifl1m0RHgvnr8tVlvuOoGAMBYF94kyb0F_XV-JtpiSAA/s1600/twitter.png) no-repeat;
}

.facebook-hb {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl9N9OJ8zPyL7AyowmPCueauycuYaSCPJgJ-Qx8bM1q_t6QGbDyguNHnXZuTiYo-Uqn0qHG19L4cAE2LHtwrMCS7vTBalTFERg7RB3vJcBGc6-7FRGfIrOM3lqLgykdB2ZiKRWx1uckAw/s1600/fb+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}

.facebook-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZIgD6ElhkwMB0SA5gfJK5_IW-fi7txnLWJdnegujd1zbg3pEuBFWPdwKaj0VNwQlKRqbhQgNU48__T0BnXNZ3pm5R8fUKbMunsTke_su8DES_Ffq4h6ji6XUPYYdJE4Tz1DU1Sf1nU5s/s1600/facebook-logo.png) no-repeat;
}

.follower-rss, .follower-twitter, .follower-facebook {
    font-family: Georgia,  sans-serif, Times;
    font-size: 1.5em;
    font-style: italic;
    color: #D3C5B1;
    padding-top: 05px;
    text-shadow: 1px 1px #B2A99D;
}

.follower-rss a, .follower-twitter a, .follower-facebook a {
    color: #AA9C89;
}

.follower-rss span {
    font-size: 2.2em;
    font-weight: bold;
    font-style: italic;
}

.follower-twitter span {
    font-size: 1.9em;
    font-weight: bold;
    font-style: italic;
}

.follower-facebook span {
    font-size: 1.9em;
    font-weight: bold;
    font-style: italic;
} 

</style> 

<div class='rss-hb'>
    <div class='follower-rss'>
        <span>
            <a href='http://feeds.feedburner.com/bloggerdersleri/MOiP'>33</a>
        </span>RSS Okuyucusu</div>
</div>
<div class='twitter-hb'>
    <div class='follower-twitter'>
        <span>
            <a href='https://twitter.com/Bloggerblog_' rel="nofollow">270</a>
        </span>Twitter Takipçisi</div>
</div>
<div class='facebook-hb'>
    <div class='follower-facebook'>
        <span>
            <a href='http://www.facebook.com/BloggerDersleri'>63</a>
        </span>Facebook Hayranı</div>
</div>


Blogger Sayaçlı Sosyal Paylaşım Butonları Eklentisi İçin Gerekli Düzenlemeler

  • Mavi ve kırmızı olarak kodlar içerisinde belirlenmiş alanları kendinize göre özelleştirebilirsiniz. 
Devamı...

Blogger Rastgele Yazılar Eklentisi

Blogger Rastgele Yazılar Eklentisi Kullanımı 

Eklentiyi kullanmak için  Şablon >> Gadget Ekle >> HTML/Java Script kutucuğunu kullanarak Blogger Eklentileri - Blogger Rastgele Yazıları Göster Eklentisi kodlarını eklemelisiniz.

Blogger Rastgele Yazılar Eklentisi Kodları 

<style>#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Yorum Var';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkgQ8MLZ4ajrmCC41gROkw2MJdhN5MjvioILVKIsdVQZzYFQrfjccFW_8CDIDQFjl-WFvb8VDt_CQkBkIx2t0DfV-uxdSIMUqt28VaTOEEmS3tdSDHzZzyIgUVAjy_4F7E1jnXfhheW4Y/s1600/na_image.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Blogger Rastgele Yazıları Goster Eklentisi Düzenleme 

  • Kodlar üzerinde herhangi bir değişiklik yapmanız gerekmiyor. İsterseniz kırmızı olarak yazılmış 5 yazısını değiştirerek gösterilecek olan konu sayısında düzenleme yapabilirsiniz.

Devamı...

Blogger Dersleri - Sayfa Altında Sabit Duran Menü 


1 ) Blogger kumanda paneline gelip Şablon >> HTML'yi Düzenle sekmesiyle temamızın kodlarını açıyoruz.
2 ) Ctrl + F yardımı ile ]]></b:skin> kodunu buluyoruz.
3 ) </head> kodunun öncesine aşağıdaki  Blogger Sayfa Altında Sabit Duran Menü kod dizinini ekliyoruz.
/*---www.Bloggerdersleri.com Like To Enter Advance Traffic POP ---*/
  
div.cap {
 display: block;
 height: 100px; 
 width: 40px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-qx1zgIXBc8aMy_tcnkSshY911yM8MTmmCyIvpOroCfrLLWcDvtePedy10ktOJF9h5kYvwZ7PrrvMBajSGt2TKhU9-M7B5lCoP8qc_tCA2A0b3b2HVIsjoAxdRis51zUbY6r1Z1YiTo/s1600/dock-background-left.png)bottom left no-repeat; }
  
div.cap.left { 
 position: absolute; 
 bottom: 0px; 
 left: 0px; }
  
div.cap.right { 
 background-position: right bottom;
 position: absolute; 
 top: 0px;
 right: 0px; }
  
ul.mbl-dock { 
 display: inline-block; 
 height: 130px;
 padding: 0 40px 0 0; 
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-qx1zgIXBc8aMy_tcnkSshY911yM8MTmmCyIvpOroCfrLLWcDvtePedy10ktOJF9h5kYvwZ7PrrvMBajSGt2TKhU9-M7B5lCoP8qc_tCA2A0b3b2HVIsjoAxdRis51zUbY6r1Z1YiTo/s1600/dock-background-left.png) no-repeat right bottom;
 overflow: hidden; 
 margin: 0 0 0 40px; }
  
ul.mbl-dock li { 
 display: block; 
 position: relative;
 float: left;
 width: 50px; 
 height: 50px; 
 margin: 60px 0 4px 0;
 -webkit-transition: 0.15s linear; 
 -webkit-transition-property: -webkit-transform margin;
 text-align: center; }
  
ul.mbl-dock li a {
 display: block;
 height: 50px;
 padding: 0 1px; 
 -webkit-transition: 0.15s linear;
 -webkit-transition-property: -webkit-transform margin; 
 margin: 0;
 -webkit-box-reflect: below 2px
 -webkit-gradient(linear, left top, left bottom, from(transparent),
 color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));}
  
ul.mbl-dock li a img { width: 48px; }
  
ul.mbl-dock li:hover { 
 margin-left: 9px; margin-right: 9px;}
  
ul.mbl-dock li:hover a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.5);}
  
ul.mbl-dock li.nearby { 
 margin-left: 6px; margin-right: 6px;
 z-index: 100;}
  
ul.mbl-dock li.nearby a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.25);}

ul.mbl-dock li span { 
 background:#fff;
 position: absolute; 
 bottom: 80px; margin: 0 auto;
 display: none; 
 width: auto;
 font-family:arial; 
 font-size: 11px;
 font-weight: bold; 
 padding: 3px 6px;
 -webkit-border-radius: 6px; 
 color: #000; }
  
  
ul.mbl-dock li:hover span { display: block; }
  
div#mbldockwraps { 
    position: fixed; 
 bottom: 12px; 
 height: 120px;
 padding: 50px 0 0; 
 text-align: center; 
 -webkit-border-radius: 6px; 
 -moz-border-radius: 6px;
 width: 100%;
 line-height: 1; z-index: 100; }
  
div#macWrap { 
    width: auto; 
 display: inline-block;
 position: relative; 
 border-bottom: solid 2px rgba(255,255,255,.35);
 line-height: 0; }


1 ) Ardından Ctrl + F yardımı ile </head> kodunu buluyoruz.
2 ) </head> kodunun öncesine aşağıdaki  Blogger Sayfa Altında Sabit Duran Menü kod dizinini ekliyoruz.


 <script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script>
 <script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.tipsy.js"></script>

 <script type="text/javascript">
  // Place all Javascript code here

  $(document).ready(function(){
   $("a[rel=tipsy]").tipsy({fade: false, gravity: "s"});

    $("ul.mbl-dock li").each(function (type) {
        $(this).hover(function () {
          $(this).prev("li").addClass("nearby");
          $(this).next("li").addClass("nearby");
        },
        function () {
          $(this).prev("li").removeClass("nearby");
          $(this).next("li").removeClass("nearby");
        });
      });
  });
  
 </script>

Blogger Dersleri - Sayfa Altında Sabit Duran Menü Kullanımı

Blogger Sayfa Altında Sabit Sosyal Paylaşım Butonu kullanmak için  Şablon >> Gadget Ekle >> HTML/Java Script kutucuğunu kullanarak aşağıda ki kodları ekleyin .


<div id="mbldockwraps">
<div id="macWrap">  
<div class="cap left"></div>
<ul class="mbl-dock">
<li class="active">
<span>Ana Sayfa</span>
  <a href="http://www.bloggerdersleri.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvQ4CfHvGAh_WeBqFZsFNAlUGL5Sj8lGvMeD5OXam-ZNaT_X9WhUbBoi66Pe7zdLwsHWrgy9VBh7iCLrXZYa6JlsqBb2DnQoerFFYIX03WrIJfunaBsihCtZPTz_aIxST_fR8w1_FBtng/s1600/MBL_home.png" /></a>
   </li>
   <li>
   
<span>İletişim</span>
   <a href="http://www.bloggerdersleri.com/p/iletisim.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkEgHpH5gUbNVzuS4lpWKIZz94zO1To-tiWJsw0Qn25M4ikJM_TCEYIeaCevJ465oCyOzS1cKscjzePAVithuT0_sT9FE9YTynJSkBYZlC9XR67qZ8vvJqLyRwmlG6yKLFy9On2u3eUCg/s1600/MBL_contact.png" /></a>
 </li>
 <li>
 
<span>Hakkında</span>
 <a href="http://www.bloggerdersleri.com/p/blogger-dersleri-site-icerigi.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdSAaLtOzEMshzqnSOOa81Rz8roTY1EtwHOBXvf7mkRGahNTq9R3mKJegUQ1lJVzMu1XrRxz0ae24l84U73gtp7dvVFIK0Djzo4M3gXZd6z7kaCwWcpJ6n3RUMqI24ztKNTpEplAe8gxk/s1600/MBL_about.png" /></a>
 </li>
 <li>
     
<span>Site İçeriği</span>
 <a href="http://www.bloggerdersleri.com/p/blogger-dersleri-site-icerigi.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKawB3IY16zwhCTsRtpmxYFlck-CJzLoUE1NtijxfUFQEQw9Q3lLgr83L52zeoe7PHS90PSWdAgoR5xu5Sc_CExE_8dprGGUS-N2_12T_zpfhA38GIRoTAeuUweIbnqGASbwOngfdUjJk/s1600/MBL_search.png" /></a>
 </li>
 <li>
     
<span>RSS</span>
 <a href="http://feeds.feedburner.com/bloggerdersleri/MOiP"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6f8VFXXHBfUKhqh_mcINXKGZ9QKxUDGDCoZVwhgIUpvhUqW6jouWt-0wcjMu6UB1S-xEgz1yT68x_l3IOusnDYgLkoOisplOk7fQjfyGveYRqbjQ5ovcWZXBfkHSznbR3xy_xRnvxIu0/s1600/MBL_rss.png" /></a>
 </li>
 <li>
<span>Blogger</span>
 <a href="http://www.blogger.com/profile/3635639306019249049"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJUDqa9Z32Njs1fAdGPQ_mTmvmzuqGdthKc1Av1ql6XLGfUgpsjPaLrf5LpknjuD3ACiBtf7pN477To8vERr5eXN7EloRt6NBr4DwoeqB8O79kY8gK8qJ9JQbw9r7JK3OzgD00F5ojof0/s1600/MBL_blogger.png" /></a>
 </li>
 <li>
 
<span>PAGE</span>
 <a href="https://www.facebook.com/BloggerDersleri"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPoRNxfKHEyNNf6MfJG5POXktGG8bWZnfRxipq3yqXUKLAE3rmqqkcfqlUNQ9R24zc6QgdYOQ5kPa7SgqwAezSi7DJdb6aTAHArCIJ6LN2oCKnjzYo2bLJQDLHEBdZCMeCotl-AvlP6WM/s1600/MBL_FB.png" /></a>
 </li>
 <li>
 
<span>Twitter</span>
 <a href="https://twitter.com/Bloggerblog_"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJoVHY7ak_G7pB095GSrx3hpwk7aCNuw_KEpSAn5Ixk5H6jAmOqd_oOvAQ5z-xh4dlSmfT0Cm0KYcdF719SF9yEgn3RYumtapCCmk70cTNAWiIWa6_nUu2ibJL1M8IO-04Dm79viO3foM/s1600/MBL_Twitter.png" /></a>
 </li>
 <li>
 
 <span>Pin IT</span>
 <a href="http://pinterest.com/atolyye/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4TllvAVvXHddjDlm8p3_4hbJu57D0Go-c89AlHbINxkICpVyw8_e_8i1W-8ojMWYM63XT8vdXHfLppIA2CKxRNFyylmSYdpaEHvn7ZV6oAYFKof_YSEMyGO0xmUAnG1oTPJAKjkpnv_c/s1600/MBL_pin.png" /></a>
 </li>
 <li>
 
 <span>Google</span>
 <a href="https://plus.google.com/u/0/106374439082237286396"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFTfSvzBLH_gwey_HDJCgyqh2Bjm_2L0aN5RaW_LAkRtte9qHl_iRViDfoKJE5FiMLcS0RQz7iPnwBPpYudMLeuBDWyGovMjFCwx5FMexDMZwntbodY_eHihLeFpOV7GC5PC1Ym7wRG78/s1600/MBL_googleplus.png" /></a>
 </li>
 </ul>
 </div>
 </div>

Sabit Duran Sosyal Paylaşım Sitesi Butonları İçin Düzenlemeler:

  • Blogger Eklenti kodlarında : Kırmızı ile yazılmış alanlar butonların üzerine gelindiğinde görünecek metin içeriği. 
  • Mavi ile yazılmış linkler ise sizin sosyal paylaşım sitesi profil linkleriniz. 

Devamı...
Domain Domain