JavaScript Resimli Manşet Slayt eklentisi

● JavaScript Image Slider For Blogger
● JavaScript Resimli Manşet Slayt eklentisi

Bugün sizlerle daha önce paylastığım Jquery Otomatik resim slayt galerisi ve Jquery slider manşet eklentisi yazılarımdan farklı olarak JavaScript versiyon resimli manşet slayt eklentisini paylaşacağım.
Ziyaretçilerinizi resimlerinizle dikkatini çekmek için kullanabileceğiniz Resimli Manşet Slayt eklentisi JavaScript versiyonu. Haber siteleri tarafından da kullanılan bu slayt manşet eklentisini sizde bloglarınız da kullanabilirsiniz. Resimleri ve linkleri değiştirip sürekli güncelleyebilir ve istediğiniz konuların tanıtımını yapabilirsiniz. Resimler sırayla altında kısa notlarla slayt olarak akar ve Jquery kullanılmadığı için blogu yavaşlatmaz.

Örnek Slayt

Bu slaytı blogunuza eklemek için;
1. Blogger Kumanda Panelinize gidin
2. Yerleşim tıklayın
3. Üst Bilginin altındaki yere Gadget/Widget Ekle
4. HTML / JavaScript seçeneğini seçin.
5. Aşağıdaki kodu kopyalayın ve yapıştırın.

<style type="text/css">
#mcis{display:none;}
#sliderFrame{position:relative;width:532px;border:5px solid #000;margin:0 auto;}
#ribbon{width:111px;height:111px;position:absolute;}
#slider{width:532px;height:300px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQtmxKJQJiGLd5Tg2k67arFYprHxiDN7S3b8C8FQH2MzL5tNR5ze1mrqWm_odjnyuFj-IXBU-rdOu2jcrGO_ohCtITfYVQ5Dhuxg2icgs83BQ5DdUX2QmEHK6gNJgAHx9ktW86dZnz9bM/s1600/loading.gif) no-repeat 50% 50%;position:relative;box-shadow:0 1px 5px #999;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);margin:0 auto;}
#slider img{position:absolute;border:none;display:none;}
#slider a.imgLink{z-index:2;display:none;position:absolute;top:0;left:0;border:0;width:100%;height:100%;margin:0;padding:0;}
div.mc-caption-bg,div.mc-caption-bg2{position:absolute;width:100%;height:auto;left:0;bottom:0;z-index:3;overflow:hidden;font-size:0;padding:0;}
div.mc-caption-bg{background-color:#000;}
div.mc-caption{font:bold 14px/20px Arial;color:#EEE;z-index:4;text-align:center;padding:10px 0;}
div.mc-caption a{color:#FB0;}
div.mc-caption a:hover{color:#DA0;}
div.navBulletsWrapper{top:310px;left:200px;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;}
</style>
<script src="http://social-media-dosyalari.googlecode.com/files/Meftunapartblog-slayt.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
</div></div>

Kod içinde kırmızı ile belirtdiğim yerleri Resimlerinizin genişliğine-yüksekliğine göre ayarlayabilirsiniz.
<a href="Resme tıklayınca açılacak sayfanın adresi"><img src="Slaytta gösterilecek resmin adresi" alt="Resmin altında gözükecek yazı metni"/></a>
Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

Okuyucudan: Dikey Akordeon Menü

Menüler blogların olmazsa olmazlarıdır ve genellikle yatay olanları tercih edilir. Ancak bu, dikey menü kullanılmayacak anlamına gelmez. Dikey menülerin fazla tercih edilmemesinin nedeni bence çok yer kaplamaları ancak ufak bir scriptle bu sorun çözülebilir.

 

Blog Hocam’da daha önce bu tarz bir menü paylaşmadığımı gören Mustafa Aydın blogunda kullandığı akordeon menünün kodlarını bizimle paylaşmak istedi. Menüde ana başlıklara tıkladığınızda akordeon şeklinde açılıyor ve alt başlıklar gözüküyor. Akordeon şeklinde açılır kapanır olması daha az yer kaplamasını sağlıyor. Yani oldukça kullanışlı bir menü diyebiliriz.

 

 

Görmüş olduğunuz resim, menüyü bizimle paylaşan Mustafa Aydın’ın bloguna ait. Nasıl çalıştığını görmek için blogunu ziyaret edebilirsiniz.

 

Bu menüyü blogunuza eklemek isterseniz Blogger kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget ekle > HTML/JavaScript yolunu takip ederek aşağıdaki kodları yapıştırın.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});
</script>
<style>
ul.container{
    width:100%;
    padding:5px;

}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;
    }
li.title
{
background:#45a2bf;
list-style:none;
padding:5px;
}
li.title a{
color:#fff;
    display:block;
padding:5px;
    font:14px georgia, verdana;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{

list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
background: #f8f8f8;
   list-style:none;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
border-left:1px solid #ccc;

    margin:5px ;
    padding:4px 10px;    
}

.downlistie li:hover {
background: #63beda;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333;
}
</style>
<ul class="container">
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Başlık</a></li>            
<li class="downlistie">
<ul>
<li><a href='#'>Alt başlık</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Başlık</a></li>
<li class="downlistie">
<ul>
<li><a href='#'>Alt başlık</a></li>
</ul></li></ul></li>
</ul>

 

Düzenlemede, özellikle yeni öğe eklemede biraz zorluk çekebilirsiniz ancak deneme yanılmalarla mantığını kısa sürede çözeceğinizi düşünüyorum. Şöyle bir örnek vereyim. Menüye yeni bir ana başlık eklemek istiyorsanız son </ul> kodundan önce şu kodları ekleyin:

 

<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Başlık</a></li><li class="downlistie">
<ul>
<li><a href='#'>Alt başlık</a></li>
</ul></li></ul></li>

 

Ana başlıklardan birinin altındaki alt başlıkları çoğaltmak isterseniz <li><a href='#'>Alt başlık</a></li> hemen yanına aynısından bir tane daha ekleyin.

Kolay gelsin!

Burçlara Göre Bloggerlar

Son dönemlerde çok gerildik,biraz magazinsel yazı yazalım dedim.Serinleyelim…

Burçlar bana çok iyi fikir olarak göründü.Hadi bakalım; burçlarına göre kim nasıl blogger…?

Ver bir sipali söyleyeyim… :)

 

 

Koç: Koç burcuna; öncüdür, ateş gibidir, azıcık da gösteriş meraklısıdır demişler. Her şeyin en yenisi ve iyisi onlarda olmalıdır. Apple ve I-Phone 5 olmazsa olmazlarıdır. Koç burcu bloggerların Pinterest hesaplarında, arkadaşlarıyla parti fotoğraflarını görebilirsiniz. Foursquare’de ‘Ben gördüm,ben buldum,ben buradayım!’ demek için bayrak dikerler. Genellikle spor, yarışma(oyun), fotoğraf, parti, organizasyon ve iş hayatı üzerine yazarlar.

 

Boğa: Evcimen boğa burcu bloggerlar Facebook veya Skype üzerinden arkadaşlarıyla görüşürler. Tek yerden herkesi idare edeceklerini düşünürler. Venüs’ün kızları/oğulları genelikle moda, takı, dekorasyon, eğitim ve finanskonularında yazarlar. Pinterest’te ailesi, dostları ve eviyle ilgili paylaşımlar yapar, Foursquare’de ise gittiği restorantları ve kafeleri işaretlerler.

 

İkizler: Ne yere ne göğe sığmayan ikizler bloggerları mutlaka bir GPS cihazı takmalıdır ki, o da Foursquare’dir. Merkür’ün yaramaz çocukları, oyun oynamayı sevdiklerinden oyun sitelerinden çıkamazlar. Kısa ve öz konuşmayı sevdiklerinden tweetlerler. Seyahat, tasarım, bilişim, oyun, dekorasyon ve de eğitim konularında blog yazmaya yatkınlardır.

 

Yengeç: Aile, yemek, çocuklar, su-denizcilik, içki denilince onlar akla gelir. Pinterest’te aile üyeleri, Facebook’ta bahçeleri ve çocuklarıyla ilgili paylaşımları görürsünüz. Aile, yemek, çocuklar, su-denizcilik, içki konularında blog yazarlar. Yengeç burcu bloggerlar

mütevazidir, teknoloji konusunda seçici olduklarını düşümüyorum.

 

Aslan: Aslan burcu bloggerların elinden Apple, Mac ve tablet düşmez. Kadınlarının pırlantalı I-Pad ve I-Phone’ları hemen göze çarpar. Yemezler içmezler ; bunlardan kendilerine mutlaka alırlar. Aslanlar her yerdedir,tüm mecralarda olmayı severler. Arkadaşlarıyla bir şekilde iletişime geçerler.İş hayatı, eğlence, ticaret ve oyun konularında blog yazarlar.

 

Başak: Titiz mi titiz, akıl-mantık tutkunu olan başaklar sağlık, iş dünyası, finans, ticaret konusunda blog yazarlar. Pinterest’teki paylaşımları da bu konular üzerinedir.

 

Terazi: Düzen, adalet, güzellik duyguları hayatlarının düsturu olan burcun bloggerlar

hukuk, siyaset, dekorasyon, grafik, oyun, alışveriş konularında blog yazarlar. Teraziler görsel yönleri kuvvetli olduğundan Pinterest’i daha çok kullanır. Eline aldığı cihazı biraz kurcalayınca teknik haritasını çıkarabilen teraziler ’Yüksek performans uygun maliyet’ felsefesini edinmiştir.

 

Akrep: Gündemi takip eden akreplerin söyleyeceği ve paylaşacağı çok konu vardır. Lafı dokundurmayı sevmezler, yapıştırırlar. Facebook ve Twitter’da onları hemen bulursunuz.

Hukuk,siyaset ve araştırma alanları onun favorileridir.Blogları da bu konular üzerindedir.

 

Yay: Bir o yanda bir bu yanda dolanan yayları, arkadaşları Foursquare’da takip ederler.

Seyahat,bilim,siyaset,astroloji ve oyun ilgi alanı olduğundan bloglarında bu konuları yazarlar. Eğitim-öğretimin eğlenceli ve oyun tarzında olmasını düşünen bu burcun bloggerları Pinteresti tercih eder, Twitter’dan hiç çıkmazlar. “Bütün dünya kardeş olsa.” diyerekten arkadaşlık ve çöpçatanlık siteleri de kurabilirler.

 

Oğlak: Kuralcı,sorumluluk sahibi oğlaklar devlet kurumları ile kurumsal şirketlerin sitelerini düzenleyip yazı yazar. İş,finans ve eğitim-öğretim konusunda site ve bloglarda başta olmak üzere uzmanlığını yaptığı her konuda bilgi paylaşır. Pinterest’te işiyle ilgili infografikler ve doğal fotoğraflar paylaşırlar.

 

Kova: İnternet onların burcunda doğduğundan “Bilişim dünyası” ondan sorulur.

Kovalara sınır tanımıyoruz. Özgür ruhlu kovalar, Pinterestte ilginç ve sıra dışı fotoğrafları paylaşırlar. Facebook sayfasında arkadaşlarıyla sürekli iletişim halindedirler.

 

Balık: Balıklar denizdeki dalgalar gibidir. İlgilerinin bazen üstüne düşer;bazen de oluruna bırakırlar. Genelde moda, tıp, takı-tasarım, yiyecek-içecek, doğa, seyahat, güzellik ve astroloji konuları üzerinde blog yazmayı severler. Güzel bulduğu her şeyi Pinterestte yayınlarlar.

 

 

Ben Bahceperim yukarıdaki yorumları az biraz astroloji bilgimle harmanlayıp sizinle paylaşıyorum.Kusurumuz varsa affola...

 

Blogumda; doğal bitki+meyve+sebzelerden oluşan tariflerle sağlığımız, güzelliğimiz, huzurumuz için ve yaşama dair konularda sizlerle paylaşımlar yapıyorum.

 

Bir senedir “Bloghocam” ı izliyorum.Takıldığım konuları kendisine sorabilmek-çoğu zaman uygulayamasam da- beni mutlu ediyor. Misafir yazar olmak için epey bir konu aradım; umarım okuyanlar da yazıdan keyif alır.

 

Herkese sevgilerimle.....

Tablet Çekilişinin Sonuçları Belli Oldu!

Yaklaşık 10 gün önce KartTR’nin sponsorluğunda düzenlediğim çekilişin sonuçlrını 4 Eylül çarşamba günü duyuracağımı açıklamıştım fakat özel sebeplerden ötürü bu tarihi daha erkene aldım. Katılımcılar için de daha iyi olduğunu düşünüyorum. Yine de çekilşi takvimine uyamadığım için herkesten özür dilerim.

Gelelim çekilşin sonuçlarına. Çekiliş kurallarına ugun 93 kişi katılımda bulundu. Daha önceki çekilişlerde olduğu gibi bunda da çoğunluk bayan bloggerdı. Random.org aracıyla yapılan çekiliş sonucunda ismi ilk 3 sırada çıkanlar ödül kazanırken, arkasından gelen 3 kişi her ihtmale karşı yedek talihli oldu.


Resmimde de gördüğünüz gibi;

 

1. Fatma Nur Yangın, tablet bilgisayarı kazandı.

2. Burak Demircan, Mp3 çaları kazandı.

3. Cansu Selin, kitap setini kazandı.

 

4.5. ve 6. sıradaki Elif Hazal Taşkıngül, Seyfettin Bozkurt ve Ezgi Örentepe ise yedek talihli oldular.

 

Her zaman olduğu gibi çekiliş anının video kaydını yaptım. İsterseniz izleyebilirsiniz:

 

 

 

Kazananları tebrik ederim!

Alternatif Ödeme Yöntemi: Ukash

İnternet artık hayatımızın tüm noktasına girmiş bulunmaktadır. Sanal ortamda alışveriş birçoğumuz için vazgeçilmez bir tutkudur. Birçok insan zamanının birçoğunu sanal ortamda geçirmektedir.

Sanal ortamda alışveriş yaparken gerçekten çok dikkat etmemiz gerekir. Çünkü birçok güvenilir site olduğu kadar bir o kadar da dolandırıcı sitelerde mevcuttur. Alışveriş yaparken sitenin kalitesine her zaman içi dikkat etmemiz gerekmektedir. Çünkü sonuç olarak biz buradan ürün alacağız ve bunun karşılığı olarak para ödeyeceğiz.

 

 

Sanal ortamdaki alışverişler ve bu alışverişlerdeki ödeme metotları hakkında her gün yüzlerce konu açılmaktadır. Amerikan şirketi olan Smart Voucher, bu tarz şikayetleri göz önünde bulundurarak ödeme sistemleri hakkında yeni bir soluk yaratmak istemiş ve ukash kartı piyasaya sürmüştür.

Öyle ki alışverişlerimizde bizlerden bir çok kişisel bilgiler istenilmektedir. Ukash kart bu tarz durumlarla karşı karşıya gelmemiz için tasarlanmış kullanımı son derece kolay ve basit olan 19 haneden oluşan elektronik bir pindir. Ukash logosunu gördüğümüz tüm sitelerde rahatlıkla kullanabilirsiniz.