Slayt Manşet [ JavaScript Versiyonu ]

Çok kişi istediği için daha önce kullandığım Featutured Content Slider isimli slayt manşet eklentisini paylaşmıştım.Paylaştığım o eklentide Jquery kullanıldığı için blogu yavaşlatıyordu.Kullananlar da bundan şikayetçiydi.

 

Daha hızlı  ve daha patik bir slayt çin çözümler ararken asdece JavaScript kullanılarak oluşturulmuş bu pluginle karşılaştım.Özelliklerini ve kağnağını görmek için buraya tıklayabilirsiniz.

 

 

Bu slaytı blogunuza eklemek için Blogger kumanda panelinde tasarım ayarlarından sayfa öğeleri ( yerleşim ) bölümünü açın ve Üst Bilginin altındaki gadget ekleme yerine HTL/JavaScript gadget olarak aşağıdaki kodları ekleyin.

 

<style type="text/css">

#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjvhTRRyGH7diWe0FuvgtXELS14PnJQz3lJEDq0VlNb8YRmJmirGG-XAAjilj0MvkTu7DoqY41UIe8uwuby3Ft8wywGUfZsrTePUsZcPcWaUF0aYFlAFIFN3cXpufDA56aUtYjpKR-Esw/s109/ribbon-ozellikli.png) no-repeat;
z-index: 7;
}

#slider {
width: 500px;
height: 218px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBw7q_Z2PYKtDsGyfrd7xUxjo3FaKdxKdBrd8PDppfmvMlDZeCVYC76dj0iIPzhcyoHPbMZXuYZ6AQLUNC_yWO20LaDwEgAgAEZLHz9ykg_UVQz8gGTbEEEFRqICPU5a5Spg76O4PpJgw/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
color: #DA0;
}

div.navBulletsWrapper {
top: 250px;
left: 190px;
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitDGLrztBJ5ugFY8BMmLQSG6JCTY-_wsQLB6TCjyNp1CVInqUhA-h6w5HHHpuQsfixugfCIqCE1Hh5YY5v-zQysNthLBLgc9jYEzNTFvyuuP05ap8bIQ2cprRQI0JlD4f1TIyloqixwGE/s22/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}

div.navBulletsWrapper div.active {
background-position: 0 -11px;
}

#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style>

<script src="http://yourjavascript.com/19641174312/bloghocam-slayt.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh7kRcdrQS9ggIi7r_9nmir7v2d9zYJCHkQGAOqxETPCOUg2BgO-GXRyUr6gUr5W-x-tvfO8Mds07xg6G-x5c_dXDs0NUHekzfF3cHpJfdEU1UbuP_hyphenhyphenkJeK3Oq33zxGUmGyj_bHvgqmec/s1600/bloghocama-misafir-olmanin-faydalari.jpg'" alt="blog hocam'a Misafir Olmanın Faydaları"/></a>

<a href="http://bloghocam.blogspot.com/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGhnbDAxgOqtyLW068z6xtx9_0rViQh47Lu0xqixOgwn6JMhvMeKfCeSiys1fRXOAST11MbpWg7QULbzNttTk1Ui1itpn-inpGYIVsvbGbm_05g2PnFo7bVAs7xKtc_SDzZE5YGp56-W3g/s576/misafir-blogculuk.png'" alt="misafir blogculuk"/></a>

<a href="http://bloghocam.blogspot.com/2011/06/basarl-blogcularn-alskanlklar.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDXcO3oIhQ6n42zQ1UNZoOC0iqauonteZdttsQwxQCsnOeyzqjBH5y1qkp0VFlC5a8d8I5fj4pC-aiKJKtPH1n7D5GJn6uR8DEph0BcUcCAvpI8WZX87NE3myjCuurLuYyywkeTk9aEU_/'" alt="başarılı blogcuların özellikleri"/></a>

<a href="http://bloghocam.blogspot.com/2011/08/bir-blogcunun-sahip-olmas-gereken-5.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGr4rORIzVMsd7B8gGMv7ATwzv6Ac7t59SseooVSDKMQaVilT9_3Gtgz2izt03AXsyjbFgRfGThR1wRRXJIAgNXEHJntIAidwc6KQEEW0WYifTtKhZU2DRdbiemnwVsh36kB5l0zU4UEa/'" alt="bir blogcunun sahip olması gereken 5 temel beceri"/></a>

                </div></div>

 

Slaytta gösterilecek öğelerin kodlarını şu şekilde düzenleyeceksiniz:

 

<a href="Resme tıklayınca açılacak asyfanın adresi"><img src="Slaytta gösterilecek resmin adresi" alt="Resmin altında gözükecek yazı metni"/></a>

Kullandığım E-Posta Aboneliği Eklentisi

Blogumun kenar çubuğunda gördüğünüz e-posta aboneliği kutusu ilk yaptığm günden beri çok beğenildi ve çok kişi tarafından istendi.Sanırım bu eklentiyi siznle paylaşmanın zamanı geldi.

 

Tasarımı ve kodları bana ait olan bu eklentiyi blogunuzda kullanmak isterseniz değiştirmeniz gereken yerleri değiştirdikten sonra kodları HTML/Java Script gadget olarak eklemeniz yeterli.

 

<style>
#subscribe {
  float:right;
  width:258px;
  padding:10px;
  margin:0 0 20px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBqPcbeDUlyskF2uBcsj1aAbKhnfyorphnN_7tSCr7y2FLHcc432ukNg-Q-24CrBzx8YxV149zClfmiDjr-LMbMGZp_1wJtpk53YFP4EiGTU1bxCc7TbM9ktssSE5hA1sOjC2K-4WAFoAR/s266/e-posta.png)  no-repeat 0px 0px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
  height:auto;
border:1px solid #656E75;
color:#000;
font-weight:bold;

}

#subscribe h {
font-size:12px;
color:#F1921A;
}

.feed {
  width:260px;
  min-height:60px;
  margin:0 0 10px 0;
  padding:0;
}
.input{
  margin:10px 7px 0 0;
  float: left;
  width: 175px;
  padding: 4px 5px;
  -webkit-border-radius:4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
border:1px solid #656E75
}

.sbutton {
  background:#F1921A;
  margin:10px 0 0;
  float: left;
  height:26px;
  border: 1px solid #656E75;
  color: #fff;
  width:65px;
  -webkit-border-radius:4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.sbutton:hover {
  background:#E6E7E8;
color:#669900;
}
</style>
<div id='subscribe'>
<div class='feed'>
         <br/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bloghocam&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='input' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-Mail Adresiniz...&quot;;}' onfocus='if (this.value == &quot;E-Mail Adresiniz...&quot;) {this.value = &quot;&quot;;}' type='text' value='E-Mail Adresiniz...'/>
<input name='uri' type='hidden' value='bloghocam'/><input name='loc' type='hidden' value='en_US'/><input class='sbutton' type='submit' value='Abone Ol'/></form>
       </div>
       <div>
       Blog Hocam&#39;da yayınlanacak yeni yazılar e-mail adresinize gelsin.
       </div></div>

 

Değiştirmeniz gereken yerleri kırmızı renkle gösterdim.

• bloghocam yerine kendi FeedBurner ID’nizi yazın.
• Blog Hocam&#39;da yayınlanacak yeni yazılar e-mail adresinize gelsin.
  yerine kutunun altında olmasını istediğini yazıyı yazın.

Son olarak bu eklentiyi kendi blogum için hazırladığımdan dolayı genişlikler sizin temanıza uygun olmayabilir.Bu durumda genişlikleri düşürmek yetmez.Arkaplan olarak kullandığım resmi de değiştirmeniz gerekebilir.

Ο τυφώνας Σαόλα πλησιάζει τις βόρειες περιοχές της Ταϊβάν. 

Στην Α.Τ.Ε. να δεις

Pinterest “Pin It” Butonu

Bazılarına göre Pinterest balonu sönmüş gibi durabilir ama ben, kendim kullanmasam da Pintrerest’in sağlam bir kullanıcı kitlesi olduğunu gözlemliyorum.Önümüzdeki bir kaç gün içinde sosyal paylaşım butonlarım arasına Pin It butonuna ekleyeceğim ama bu kez bir deişiklik yapıp kullanmaya başlamadan önce paylaşayım dedim.

 

 

Öncelikle kodu nereye ekleyeceğinizden bahsedeyim.Ben sosyal paylaşım butonlarını yazının sonuna yerleşirmenin daha doğru olduğunu düşündüğüm için size de şablonunuzdaki <div class='post-footer'> kodunun hemen altına eklemenizi öneririm.Eklemeniz gereken kodlar ise şunlar:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>
</b:if>

 

Buton kayıt sayfasının içine girdiğinide gözükecektir.Butona basınca eğer yazıda bir görsel varsa o görsel otomatik olarak tanınacak ve pinterest hesabınızla bağlantı kurularak seçmiş olduğunuz bir panoya pinlenecektir.

Tüm Zamanların En Özellikli Blogger Teması

Bu güne kadar gördüğünüz en orjinal Blogger temasıyla tanışmaya hazır mısınız? Giriş cümlesi size çok iddialı gelmiş olabililr ama temayı test edip özelliklerini görünce bana hak vereceksiniz.

 

Aslında premium olan bu tema ilk kodlandığında yanlış hatırlamıyorsam $20 civarında bir fiyata satılıyordu.Sonra ne oldu bilmiyorum temanın yapımcısı ücretsiz dağıtmaya karar verdi.İşte bu temanın özellikleri:

• ThumbCropper: Bildiğiniz gibi normal temalarda ana sayfada yazıya ait resmin thumbnail şeklinde küçültülmüş haki gözükür.Bu temada kullanılan ThumbCropper aracı sayesinde yazının içerisindeki resim kırpılarak ana sayfada gözükür.
• Sonsuz Scroll: Twitter2da ve bazı sitelerde sayfanın altında daha fazla diye bir buton yer alır ve o butona tıkladığınızda sayfaya yeni öğeler eklenerek saşağı doğru ayar.İşte bu temada da ileri-geri veya numaralı sayfa geçişleri yerine bu özellik kullanılmış.
• 2 Renk Seçeneği: Temayı indirdiğinizde zip dosyasının içinde açık ve koyu renk seçenekleri için 2 adet .xml dosyası bulacaksınız.Eğer beyaz versiyonunu tercih etmiyorsanız gri versiyonunu da kullanabilirsiniz.
• Tarayıcı uyumluluğu: Temalarda yaşanan en büyük sorulardan biridir farklı tarayıcılarda düzgün çalışmaması.Bu tema tarayıcı uyumlu olduğu için tüm tarayıcılarda sorunsuz çalışmaktadır.

 

 

 

         

 

Demosuna da baktıysanız bu temayı neden bu kadar övdüğümü anlamışsınızdır.Fotoğraf ağırlıklı blog yazanlar veya blogunu portföy gibi kullananlar için bu şiddetle tavsiye ediyorum bu temayı.Gördüüm tek zayıf tarafı ise sanırım yorum bölümü.