Blogger Slide Haber Geçişi

Add comments


Arkadaşlar resimde görüldüğü gibi blogger slide yapımını sizlere anlatmaya çalışacağım, öncelikle bu işleri yaparken blogunuzun yedeğini mutlaka alın işlemler 3 aşamadan oluşuyor. Yapılması gayet basit olan 3 aşama var yapamadığınız yerler olursa yazın yardımcı olmaya çaışırım. Öncelikle bu uygumayı Savaş Çocukları' sitesinden öğrendim ve kendi bluguma denedikten sona sizlerle paylaştım. Herkese kolay gelsin, Savaş Çocukalrı'na teşekkürler...

1. AŞAMA :

Blogger hesabından girşi yapalım, yerleşim/html'yi düzenle'ye girelim. CTRL+F tuşnuna basarak altaki kodu bulalım. 

]]></b:skin>
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPQpUYafVYPfVrDZrloMPj69PkSMwhjFHX5vJv3QNFSBAD6w7fE7s4BLLKr0XZlIFvulzR8M_FQpZ0ThOjRGKoyqX7L2x1c8wRAxdsHexF9yvelKhrJ6U4WPKvJYzQcVptWd8_sVSaJM/?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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPQpUYafVYPfVrDZrloMPj69PkSMwhjFHX5vJv3QNFSBAD6w7fE7s4BLLKr0XZlIFvulzR8M_FQpZ0ThOjRGKoyqX7L2x1c8wRAxdsHexF9yvelKhrJ6U4WPKvJYzQcVptWd8_sVSaJM/?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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrGz5Kb7RsxQQTS6T_h8sj_k9cG0Xj4Zvb1GMes95JpJuODO_V7ZgzhW7g8yFnsuBMVTy_Z5gaPLDkrMK42eOKClFv9vVaPV3Npe1vzL2_-WlMkUFWhh5crqrOSm0Uvrv2hmsfRgLvjY/?imgmax=800') no-repeat center left;}
* html .jdGallery a.left { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkrGz5Kb7RsxQQTS6T_h8sj_k9cG0Xj4Zvb1GMes95JpJuODO_V7ZgzhW7g8yFnsuBMVTy_Z5gaPLDkrMK42eOKClFv9vVaPV3Npe1vzL2_-WlMkUFWhh5crqrOSm0Uvrv2hmsfRgLvjY/?imgmax=800') no-repeat center left; }
.jdGallery a.right
{right: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIFVNtk9ZfVmptG52u1j4D-RIlgVejuIH_FUBUTDz61iyX1CLSuROHPp_6Me8mV7NDcQpRuKw4mj_Y3bvVDYX8EP0H6JcO7UhntkRyRxF5fICpU2vDzx0RHV2AvpW362SzCjE3pSIQDEk/?imgmax=800') no-repeat center right;}
* html .jdGallery a.right { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIFVNtk9ZfVmptG52u1j4D-RIlgVejuIH_FUBUTDz61iyX1CLSuROHPp_6Me8mV7NDcQpRuKw4mj_Y3bvVDYX8EP0H6JcO7UhntkRyRxF5fICpU2vDzx0RHV2AvpW362SzCjE3pSIQDEk/?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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJD4ffIwK16kNPfvP27XyZe_-OwiVRtivQfDmcupgcaGJKmtRDR56LLRD0qWPI-U4gEJGxnL4bid2UunaJj0vh9yQRtOfw0JE7tyfSeM7ohUuufY7st8-3EPMDCbMnlyhJ53IzFeiQGg/?imgmax=800') no-repeat center center; }
* html .withArrows a.open:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJD4ffIwK16kNPfvP27XyZe_-OwiVRtivQfDmcupgcaGJKmtRDR56LLRD0qWPI-U4gEJGxnL4bid2UunaJj0vh9yQRtOfw0JE7tyfSeM7ohUuufY7st8-3EPMDCbMnlyhJ53IzFeiQGg/?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>


2. AŞAMA:

2. Aşamada ise alttaki kodu bulalım.
</head>
Bu kodu ondan önce yapıştıralım.

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

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

Sonra önizle diyelim sayfada sorun yoksa kaydedelim.

3. AŞAMA:

Bu aşamada 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://indianmonsters.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...

Unutmadan etiket boyunu değiştirmek için:

#myGallery, #myGallerySet, #flickrGallery
{width: 590px;height: 200px;z-index: 5;}
Kırmızı olan yerleri kendi sitemize göre değiştiriyoruz.



4 Responses to "Blogger Slide Haber Geçişi"

  1. gravatar Adsız Says:
    Pazar, 01 Mart, 2009

    Ben bu blog olayında cok yenıyım sızlerın bloglarına baktıkca cok sade cok yalın gelıyor kızımın blogu .. ve bır cok terımı anlamıyorum. Bu konu ıle ılgılı degıl sorum.. bu ETIKET BULUTU nasıl yapılıyor..bır ara yazarsanız sevınırım..

  2. gravatar Adsız Says:
    Pazartesi, 02 Mart, 2009

    ETIKET BULUTU yapımını, ilk olarak hemen yazacağım...Yardımcı olurum umarım.

  3. gravatar Adsız Says:
    Pazartesi, 02 Mart, 2009

    Her seferinde konu rsimlerini kendimiz ayarlıyoruz değil mi? yani konu yayınladıkça otamatik olarak slide da çıkmıyor yani.

  4. gravatar Adsız Says:
    Pazartesi, 02 Mart, 2009

    yazıyada yazdım nasıl değiştirileceğini, kolay gelsin...

Leave a Reply