Blogger Slider Eklemek

Merhaba, bu anlatımımızda blogumuzun ana sayfasına slider ekleme yöntemini adım adım aktaracağım. Kullanımı gayet kolay ve sadece görünmesini istediklerinizi gösterebilirsiniz.
Blogger ana sayfayı açıyoruz ve ardından ''Yerleşim'' kısmını seçiyoruz.
Gadget eklemek istediğimiz yere ''gadget ekle'' diyerek butona basıyor.
Açılan sekmeden ''HTML/Javascript'' seçeneğini seçip aşağıda vermiş olduğumuz kodu yazıyorsunuz.
<style type="text/css">
/* http://dimpost.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
    
#slider {
    width:700px;height:306px;/* Make it the same size as your images */
 background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 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;
}

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}

/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://lh4.googleusercontent.com/-oxV19sM3O5I/Uc_MfCW09hI/AAAAAAAAAPU/8K4xW8f5ID4/h120/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://lh6.googleusercontent.com/-_V9ia-vRQDw/Uc_Me-WX21I/AAAAAAAAAPQ/1HZH3J08jr0/h120/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://lh6.googleusercontent.com/-E6waK4w3Pyg/Uc_MekrMOpI/AAAAAAAAAPI/WcXBXJKmb9E/h120/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://lh4.googleusercontent.com/-IIz2KjyU3W0/Uc_Mfiw-QaI/AAAAAAAAAPg/kLf_VnQ1YHE/h120/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://lh4.googleusercontent.com/-SH8EBmFLe2A/Uc_MfjT6POI/AAAAAAAAAPk/y4XTNq80Wdk/h120/image-slider-5.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Code by <a href="http://www.ogzhn.net" target="_blank">Haakblog</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.ogzhn.net" rel="dofollow" target="_blank" title="Image Slider Widget"><img src="http://img1.blogblog.com/img/blank.gif" alt="Image Slider Widget" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a></div>
</div>
Dipnot: Bu kodlar üzerinden genişlik ve uzunluğu rahatça ayarlayabilirsiniz!
Umarım hepinizin işinize yarar. Konu ile ilgili aklınızda kalan sorularınızı yorum atabilirsiniz.
Etiketler: Blogger Slider, blogger slider eklemek, blogger slider nasıl eklenir, slider kodları

Bilgi paylaştıkça çoğalır..

Bu makale hakkında fikirlerinizi paylaşın..
Bildirim
Bu özellik henüz aktif değil.
Anladım