DavutErarslan 10 von 109Oy 5 Kritik
Bloggerda gerçekten sizi bilmem ama benim gerçekten çok görmek istediğim bir eklenti.Bunu ilk olarak birbifirver'da gördüm baktım çok güzel..


Başka sitelerdede gördüm bunun değişik modellerini ilerdede bunları anlatacam..--


Dikkat ettimde bu daha öncedende varmış üzüldüm şimdi :( Nese eklentinin kurulumuna geçiyoruz..

]]></b:skin>



Kodunu buluyoruz ve hemen üstüne şu kodu yapıştırıyorus.
Bu kodun hemen üstüne, yapıştıralım.

#myGallery, #myGallerySet, #flickrGallery
{width: 590px;height: 200px;z-index: 5;}
#flickrGallery
{width: 500px;height: 334px;}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{display: none;}
.jdGallery
{overflow: hidden;position: relative;}
.jdGallery img
{border: 0;margin: 0;}
.jdGallery .slideElement
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOO5Za74I/AAAAAAAAAbc/w1cX7FKk97Y/loading-bar-black_thumb%5B1%5D.gif?imgmax=800');
}
.jdGallery .loadingElement
{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOO5Za74I/AAAAAAAAAbc/w1cX7FKk97Y/loading-bar-black_thumb%5B1%5D.gif?imgmax=800');}
.jdGallery .slideInfoZone
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 50px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}
* html .jdGallery .slideInfoZone
{bottom: -1px;}
.jdGallery .slideInfoZone h2
{padding: 7px 10px 2px 10px;font-size: 12px;margin: 0;font-weight: bold;color: #ffffff;text-transform: uppercase;background: #111111;letter-spacing:0em;}
.jdGallery .slideInfoZone p
{font-size: 12px;margin: 2px 5px;color: #fff;padding: 0px 0px 0px 5px;font-family:arial;}
.jdGallery div.carouselContainer
{position: absolute;height: 135px;width: 100%;z-index: 10;margin: 0px;left: 0;top: 0;}
.jdGallery a.carouselBtn
{position: absolute;bottom: 0;right: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;}
.jdGallery .carousel
{position: absolute;width: 100%;margin: 0px;left: 0;top: 0;height: 115px;background: #000;color: #fff;text-indent: 0;overflow: hidden;}
.jdExtCarousel
{overflow: hidden;position: relative;}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{position: absolute;width: 100%;height: 78px;top: 10px;left: 0;overflow: hidden;}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{position: relative;}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{cursor: pointer;background: #000;background-position: center center;float: left;border: solid 1px #fff;}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{margin-bottom: 10px;}
.jdGallery .carousel .label, .jdExtCarousel .label
{font-size: 13px;position: absolute;bottom: 5px;left: 10px;padding: 0;margin: 0;}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{font-size: 10px;position: absolute;bottom: 5px;right: 10px;padding: 1px 2px;margin: 0;background: #222;border: 1px solid #888;cursor: pointer;}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{color: #b5b5b5;}
.jdGallery a
{font-size: 100%;text-decoration: none;color: inherit;}
.jdGallery a.right, .jdGallery a.left
{position: absolute;height: 99%;width: 25%;cursor: pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;}
* html .jdGallery a.right, * html .jdGallery a.left
{filter:alpha(opacity=50);}
.jdGallery a.right:hover, .jdGallery a.left:hover
{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.jdGallery a.left
{left: 0;top: 0;background: url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOSD0HNeI/AAAAAAAAAbk/yGPQEEfCcDA/fleche1-1_thumb%5B1%5D.png?imgmax=800') no-repeat center left;}
* html .jdGallery a.left { background: url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOSD0HNeI/AAAAAAAAAbk/yGPQEEfCcDA/fleche1-1_thumb%5B1%5D.png?imgmax=800') no-repeat center left; }
.jdGallery a.right
{right: 0;top: 0;background: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOUynKksI/AAAAAAAAAbs/v7o0XgwYdTg/fleche2-1_thumb%5B1%5D.png?imgmax=800') no-repeat center right;}
* html .jdGallery a.right { background: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOUynKksI/AAAAAAAAAbs/v7o0XgwYdTg/fleche2-1_thumb%5B1%5D.png?imgmax=800') no-repeat center right; }
.jdGallery a.open
{left: 0;top: 0;width: 100%;height: 100%;}
.withArrows a.open
{position: absolute;top: 0;left: 25%;height: 99%;width: 50%;cursor: pointer;z-index: 10;background: none;-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
.withArrows a.open:hover { background: url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOXmTl_xI/AAAAAAAAAb0/GLqpxNapKAg/open_thumb.gif?imgmax=800') no-repeat center center; }
* html .withArrows a.open:hover { background: url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOXmTl_xI/AAAAAAAAAb0/GLqpxNapKAg/open_thumb.gif?imgmax=800') no-repeat center center;filter:alpha(opacity=80); }
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{z-index: 15;position: absolute;top: 0;left: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #333;color: #fff;cursor: pointer;opacity: .4;-moz-opacity: .4;-khtml-opacity: 0.4;filter:alpha(opacity=40);}
.jdGallery .gallerySelector
{z-index: 20;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;}
.jdGallery .gallerySelector h2
{margin: 0;padding: 10px 20px 10px 20px;font-size: 20px;line-height: 30px;color: #fff;}
.jdGallery .gallerySelector .gallerySelectorWrapper
{overflow: hidden;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{margin-left: 10px;margin-top: 10px;border: 1px solid #888;padding: 5px;height: 40px;
color: #fff;cursor: pointer;float: left;}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{background: #333;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{background: #000;background-position: center center;float: left;border: none;width: 40px;height: 40px;margin-right: 5px;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{ margin: 0;padding: 0;font-size: 12px;font-weight: normal;color: #aaa;}
.status-msg-wrap{
display:none;
}

--></style>


Daha sonra... alttaki kodu bulalım.

</head>

Bu kodu önüne yapıştırın.


<script src='http://gujaratisite.com/blogger/indianmonsters.js' type='text/javascript'/>

<script src='http://gujaratisite.com/blogger/indianmonsters1.js' type='text/javascript'/>


Son olarak.. -->yerleşim/Sayfa Öğeleri/Gagget ekle/HTML JavaScript diyelim ve bu kodu ekleyelim.

<div id="myGallery">
<div class="imageElement">
<h3>Blogger</h3>

<p>Blogger Tutorial</p>
<a href="KENDİ SİTENİ EKLE" class="open" title="Click here"></a>
<img src="RESMİNİZİN LİNKİ" class="full"/>
<img src="RESMİNİZİN LİNKİ" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>KONUNUN BAŞLIĞI</h3>
<p>KONUNUN AÇIKLAMASI</p>

<a href="http://davuterarslan.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/8232/paraheaderwv1.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/8232/paraheaderwv1.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Software</h3>
<p>Get software for free here!</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>

<img src="http://img148.imageshack.us/img148/6201/gamheaderpf6.png?imgmax=800" class="full"/>
<img src="http://img148.imageshack.us/img148/6201/gamheaderpf6.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Wallpapers</h3>
<p>Nice wallpapers !</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img149.imageshack.us/img149/3273/gamesheaderpv6.png?imgmax=800" class="full"/>

<img src="http://img149.imageshack.us/img149/3273/gamesheaderpv6.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Blogging</h3>
<p>Learning</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/4818/pnggamesheaderze7.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/4818/pnggamesheaderze7.png?imgmax=800" class="thumbnail"/>
</div>
<div class="imageElement">
<h3>Blogger Hack</h3>
<p>Blogger Tricks!</p>
<a href="http://indianmonsters.blogspot.com" class="open" title="Click here"></a>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="full"/>
<img src="http://img352.imageshack.us/img352/3115/firstxs1.png?imgmax=800" class="thumbnail"/>
</div>

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready', startGallery);
</script>
</div>


Bunu kaydedelim ve işlemler bitmiş oluyor bu yukarıdaki koda göre siz kendi sitenizi ayarlayın, takıldığınız yerler olursa sorun ceplamaya çalışırım herkese tekrar kolay gelsin...

Aşağıdaki kod ise etiket boyutunu belirler siz belirleyinn..

#myGallery, #myGallerySet, #flickrGallery
{width: 590px;height: 200px;z-index: 5;}

Kırmızı olan yerleri kendi sitemize göre değiştiriyoruz.
http://www.davuterarslan.blogspot.com Demo (Test):Görmek için tıklayınız..







TeknoMobi dedi ki...

Keşke alıntı yaptığınız veya çevirisini yaptığınız makalenin linkini kaynak olarak belirtseydiniz. Sonuçta insanlar emek harcıyor bunları hazırlarken...

Bu arada kullandığın tema benim hazırladığım tema... yazıların yanindaki tarih bölümünü biçimlendirmeden ayarla şu an gözükmüyor.

Admin dedi ki...

ayarlayamıyorum nasıl olacak yardım edermisin?

TeknoMobi dedi ki...

Verdiğim resimdeki http://i42.tinypic.com/jt01sk.jpg kırmızı işaretli yeri aynen uygula...

Admin dedi ki...

sağolasın..

bestofblogger dedi ki...

bunu yapabilen gerçekten var mı?

TeknoMobi dedi ki...

@Bestofblogger
yapabilen varmı derken tam olarak ne kastettin acaba... Yukarıda anlatılanları tam olarak yaparsanız uygulamayı sorunsuz yapabilirsiniz. Ben bu uygulamayı çok daha iyi bir şekilde optimize ettim fakat bir ay kadar fazla evde olamayacağımdan haziran sonunda yayınlayacağım...

davut erarslan dedi ki...

@teknomobi teşekkürler.

Burada yorum yazman inan beni çok memnun etti.

Tekrar teşekkürler.

TeknoMobi dedi ki...

Ne demek Davut elimden geldiğince takip ettiğim bloglarda veya nette rastgele girdiğim bloglarda bilgim olan konulardaki yazılara yorum yazmaya çalışıyorum.

Navio.XII dedi ki...

HARİKASİN BABA :D
Sorunsuz yaptim
demo : http://filmciyizbiz.blogspot.com/

Admin dedi ki...

Teşekkürler,gördüm blogunda güzel olmuş zaten o temanın vardı ama pek çalışmıyo değil mi ?

Navio.XII dedi ki...

Evet Çalişmiyordu Değiştim Temayi Şimdi daha güzel Oldu xD
http://filmciyizbiz.blogspot.com/

Alper Barış Soydan dedi ki...

dostum kendi linklerini yerleştirmesen olmazmıydı. blog açılırken "davur eraslan" açılıyor ilk :)

Yorum gönderirken lütfen alakalı yorumlar yollayın.

Burada yer alan Haber7 haberleri ile güncel hayattan haberdar olun. Davut Erarslan haber eklentisi vardı önceden onu da bir ara eklerim.

Daha fazka haber için tıkla. Haber7 haberleri
blogger"