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şlığı - I" src="http://capsverlan.com/pictures/cc09620a72fa107f8f8cc85507845a17.jpg" /></a> <a href="http://www.aspsitem.com/"><img alt="Slayt Başlığı - II" src="http://capsverlan.com/pictures/afc104f4471269fedb47a43e983b54eb.jpg" /></a> <a href="http://www.aspsitem.com/"><img alt="Slayt Başlığı - III" src="http://capsverlan.com/pictures/cd1a89688d8548c452441c57bf29066c.jpg" /></a> <a href="http://www.aspsitem.com/"><img alt="Slayt Başlığı - IV" src="http://capsverlan.com/pictures/6884873302225211c91317f69e3e2d41.jpg" /></a> <a href="http://www.aspsitem.com/"><img alt="Slayt Başlığı - V" src="http://g1208.hizliresim.com/10/r/c5d0d.jpg" /></a> </div> </div>
