15 Mayıs 2013 Çarşamba

Bloogerda Haber Manşeti Eklentisi ile sitenizi güzelleştirin.

Bloogerinizda Resimli Manset haberleri yayinlayin.

Blogger sitenizi güzellestirmek ve ziyaretciler acisindan daha ilgi cekici hale getirmek icin asagidaki kodu bloggeriniza ekleyebilirsiniz.

Eklentinin özellikleri. Mansette 5 Adet resim ekleme ve slayt (resim gecisleri) özelligi ve mansetlere link verebilme , kisacasi büyük haber sitelerinde Anasayfada 1,2,3,4,5 gibi yer alan bir tür manset alani.

Simdi gelelim blogger'a kodu eklemeye:


Blogger Ekletileri - Blogger Resimli Manşet Slayt Menüsü Kodları Üzerinde Yapılacak Değişikler :
 <a href ile başlayan beş adet kod var , sıralı bir biçimde resimlere aittir. en üsteki ilk resmin diğerleri ikinci , üçüncü olarak devam ediyor.
<a href="http://www.aspsitem.com/"> kodu resme ait linktir durumunuza göre uyarlayın.
Devam eden kod dizininde <img alt="Slayt Başlığı - I" kısmı resmin üzerinde görünecek başlıktır.
En sonda bulunan src="http://g1208.hizliresim.com/10/r/c5d0d.jpg kısmı ise slayta ait olan resim linkidir.
 width: 500px;
 height: 218px; ve width: 500px boyutları belirler. Size ait boş alanın ölçülerine göre ayarlama yapabilirsiniz.
Size uygun şekilde değişikler yaparak sayfa içerisinde html kod kısmına kopyalayarak yada Gadget Ekle seçeneği ile kullanabilirsiniz.



<style type="text/css"> /* JavaScript Image Slider By http://www.aspsitem.com/ */ #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() no-repeat; z-index: 7; } #slider { width: 500px; height: 218px; background: #fff url(http://g1208.hizliresim.com/10/r/c5db2.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(http://g1208.hizliresim.com/10/r/c5dbx.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://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script> <br /> <div id="sliderFrame"> <div id="ribbon"> </div> <div id="slider"> <a href="http://www.aspsitem.com/"><img alt="Slayt Ba&#351;l&#305;&#287;&#305; - I" src="http://capsverlan.com/pictures/cc09620a72fa107f8f8cc85507845a17.jpg" /></a> <a href="http://www.aspsitem.com/"><img alt="Slayt Ba&#351;l&#305;&#287;&#305; - II" src="http://capsverlan.com/pictures/afc104f4471269fedb47a43e983b54eb.jpg" /></a> <a href="http://www.aspsitem.com/"><img alt="Slayt Ba&#351;l&#305;&#287;&#305; - III" src="http://capsverlan.com/pictures/cd1a89688d8548c452441c57bf29066c.jpg" /></a> <a href="http://www.aspsitem.com/"><img alt="Slayt Ba&#351;l&#305;&#287;&#305; - IV" src="http://capsverlan.com/pictures/6884873302225211c91317f69e3e2d41.jpg" /></a> <a href="http://www.aspsitem.com/"><img alt="Slayt Ba&#351;l&#305;&#287;&#305; - V" src="http://g1208.hizliresim.com/10/r/c5d0d.jpg" /></a> </div> </div>

Hiç yorum yok:

Yorum Gönder