Aşağıdaki kodları Blogunuzda slider slayt alanı olarak göstermek istediğiniz yere, Blogger Kullanıcı paneli > Yerleşim > Gadget ekle > HTML/JavaScript ekle yolunu izleyerek ekleyebilirsiniz.
Bu sliderde standart HTML/CCS yapısı kullanılmıştır, isterseniz değiştirip temanıza uygun görsellikte kullanabilirsiniz.
Resim ölçülerini (px) ekleyeceğiniz alana göre önceden boyutlandırmanız gerekmektedir.
<style type="text/css">
.skitter_slideshow {background:#111;padding:10px 10px 30px 10px;float:left;margin:auto; }
.skitter_slideshow img {width:850px; height:300px;}
.label_skitter {text-transform:uppercase;z-index:150;position:absolute;bottom:0px;left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTx3aQYafc_K-uBHaINEhwCGhhPAd2OawZxs6aBVG9DLR0mT-rv4LAN-ubYj3Yihhz64vMC349PzNNeK_hD9wg-eyV0BcZl6rH1AHibm6O7Rlsxqzx4_hOSEVRHsiC-YMzpIYXUVabpE/h120/back-box-label-black.png) repeat-x left top;color:#fff;display:none;border-top:1px solid #000;}
.label_skitter p {padding:10px;margin:0;font:normal 22px arial,tahoma;letter-spacing:-1px;}
.info_slide * {font-family:Consolas,arial,tahoma !important;}
.slideshow_skitter {position:relative;width:850px;height:300px;}
.slideshow_skitter ul {display:none;}
.slideshow_skitter .container_skitter {overflow:hidden;position:relative;}
.slideshow_skitter .image {overflow:hidden;}
.slideshow_skitter .image img {display:none;}
.slideshow_skitter .slideshow_clone {position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20;}
.slideshow_skitter .slideshow_clone img {position:absolute;top:0;left:0;z-index:20;}
.slideshow_skitter .prev_button {position:absolute;top:50%;left:0px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNHMpp5tQrrocvONwGXzmEhGhSedIIkgpg4fSkM-S29Lgr4fMuX07qIOxcUVnp7Qkry-o8fgoxD3FHB3L-03kIbhEjgyTgSKZKrMuioOP5GRQKM-lxfVyLddEksGkAUiL0wUmYjIKAbxk/h120/prev.png) no-repeat left top;}
.slideshow_skitter .next_button {position:absolute;top:50%;right:0px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWPx_bntpwT5rH6l7xwHNdOfVh75ClZQ7GKK8m9gGflZ0tH1Jg6HjuUnCV0fWUpNb29JeJcLa6aLWbz2EZjRpj3sh0merLnhxp8mqR6ao2ohpdaK3k2QlY3EujzM8ccHonqUqY02heYf4/h120/next.png) no-repeat left top;}
.slideshow_skitter .info_slide {position:absolute;bottom:-27px;left:40px;z-index:100;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;}
.slideshow_skitter .info_slide .image_number {background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;}
.slideshow_skitter .info_slide .image_number_select {background:#cc0000;float:left;padding:2px 10px;margin:0 5px 0 0;}
.slideshow_skitter .container_thumbs {position:relative;overflow:hidden;height:50px;}
.slideshow_skitter .info_slide_thumb {-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0;}
.slideshow_skitter .info_slide_thumb .image_number {overflow:hidden;width:70px;height:40px;position:relative;}
.slideshow_skitter .info_slide_thumb .image_number img {position:absolute;top:-50px;left:-50px}
.slideshow_skitter .slideshow_scroll_thumbs {padding:0 10px;}
.slideshow_skitter .slideshow_scroll_thumbs .scroll_thumbs {position:absolute;bottom:60px;left:50px;background:#ccc;background:-moz-linear-gradient(-90deg, #555, #fff);background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;cursor:pointer;border:1px solid #333;}
.slideshow_skitter .info_slide_dots {position:absolute;bottom:-40px;z-index:100;padding:5px 0 5px 5px;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
.slideshow_skitter .info_slide_dots .image_number {background:#333;float:left;margin:0 5px 0 0;cursor:pointer;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden;}
.slideshow_skitter .info_slide_dots .image_number_select {background:#cc0000;float:left;margin:0 5px 0 0;}
.slideshow_skitter .label_skitter {z-index:150;position:absolute;bottom:0px;left:0px;display:none;}
.loading {position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1XQuuEhdflQg6JRvHaQ9O8_n3o6j5Za_reyNdTvWnv2QxkDTMPANZs4bzwlpPBMs_Dp7PjTbiJu1fnqdCoQv8Bo2_JUpFvIiQa6jCgcCZNrgzoe2uPOX7R-V8Hw4x4V8_eWLXk-D8m9U/h120/ajax-loader.gif) no-repeat left top;width:32px;height:32px;}
.slideshow_skitter_large {width:850px;height:300px;}
.slideshow_skitter_small {width:200px;height:200px;}
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.skitter.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery.animate-colors-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {};
if (document.location.search) {
var array = document.location.search.split('=');
var param = array[0].replace('?', '');
var value = array[1];
if (param == 'animation') {
options.animation = value;
}
else if (param == 'type_navigation') {
options[value] = true;
if (value == 'dots') $('.skitter_slideshow').css({'margin': 'auto'});
}
}
$('.slideshow_skitter_large').skitter(options);
});
</script>
<div class="skitter_slideshow">
<div class="slideshow_skitter slideshow_skitter_large">
<ul>
<li><a href="http://bloggelistirme.blogspot.com.tr/"><img src="http://3.bp.blogspot.com/-3XHTX3F44bs/UkcXyyjS3AI/AAAAAAAAKzk/pB_iV2LaBGU/s205/etiket2.png" class="cube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj88PVmrA90R-t6EjM4Wj6SQFTuOIUtYI3YAB4w0Xe9-Lb1H2tBC1ZEsUSN5Uz1pADQlnFD8VwVahIvYZ3yQYK5_5ajqYV9k54IGCfLgD15DEAcetXBwYcvuo82wxiHx-zZFdchA6S9SUQ/w600-h300-no/" class="cubeRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cuberandom</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRbZTy3uRu2a6Ybt9qGdURlNHgFHjwQqf66sTZYZGzcZKTm5CHmdNvQwD2JuwEsaft_P4eemWxdMEId1tMBEY7fEMm8ejz-ny964QRdg9EEgJnmYkrr9rM6w1TF6N_nDV7ltQ53InAFk/w790-h286-no/" class="block" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek block</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2lMUy5MLU-_kcq_QwZuwXWEQLF5VWpNBQfyfJJB4u4n1mPPb8OUOxU38kdmSIaKuZhTAdvREu4qzM2Yr3M-B6aNEqJy55gLFw8uctc04L5zUplfZJEEvfzp_1ukwo5NA5kByne-W2tow/w463-h240-no/" class="cubeStop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubestop</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCcU0zrvxFlkkPPJhW5idtqL19cKTYuyOkUv6wgzIGQ-czCf6TQwMB_KJvPKFzaYAaq5f29RQZbB2u2-T1gOnUhavqaNXCqUQrF2gEyvQzDk2TtUfaxDrKnU25_-ZSTWhhNbPiJbr2X7Y/w463-h240-no/" class="cubeHide" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubehide</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRyk7RlQdj_zCQaVrQ31pepB21laT-rv8YqqySJ-qHS054c1cKTQv8IwOEGea-vmq3xD4YvfcJz1pvPnNZ2UEArCvjxht0wqxQ1_LJoJj1X2S6JY8qSKvVU9zMqlcSNDbL9udL2Ba-qMY/w463-h240-no/" class="cubeSize" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cube size</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0UjP5Y_3L8nWwhKyUknFHm-Ab5B5k8oGabCPf-s3FdVP1paW1I-5gfChydkTesJmi8vyZAWYdZeoryAFc1A_EOivs5DjDgMgJ04tUhsRRbXMJDANskTcrHafYkZQVX0GMVSifBDfiOsI/w500-h300-no/" class="horizontal" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek horisontal</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMPGaohsUp08WhYvwfhFePy-ErQFSojcZpJr2cK_kFbhGMsScv6BdLCpDsgIdhBkqRBaGWMSh7uczMd-jGS1ciC4VKQS79Jfq0umwhXm4CIszf7ABH7_2pMwyod0amuVayGo5YnwDa80s/w852-h284-no/" class="showBars" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbars</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIILsWIqMefZ1SVumqp1SNR-bKK43Cl-CLUBO_sF7EaX48Rngj9jqZ3-lE1wEKskZ7FLeHql2JFcf1y6q406_xL7g_CS2omKYxc-4TdFcatGVDxS6qk5YK6y3H7oYX5TqmFV74es-K1sE/w500-h300-no/" class="showBarsRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek showbarsrandom</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVyUDlvz-fmF-hw6NrauU03Y8ioTn6dPf8P0qAgasxSCMmn_YgEBp3ppo27eKjommiUhiXLfnecUXKRZTJhnz96w5W0qW_audNeqDgkDBZVw_QQ3ANZtbCJegOzMx00HZDQ_iIuL0VZ_k/w758-h438-no/widget-contact-form-blogger.jpg" class="tube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek tube</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxtngsZb0VyC5_LH7kzT_dajrhxchZB8bvz0zzOwP_bkrIveu1z71L7Gttu-eReVZ4hhX3Ph1JTz-0l_G23qJKJ-Qzj6Zn-t5ez6RcamQRAZ5E46SpTazTb7E_QpPBn8z3EX3CGVp9FbI/w500-h300-no/" class="fade" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fade</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3rH2W9BSzGRpj7XG2Q0iNXzPK8FXiCW-681IXCflXxcxezxZ_m2EfwuJS15dhqOJ4hFRdgMgXsJnXbw2tvHgyGO0joJWaZQ62CSe98w-YM-2TKSihRKeyj0aezBn84FX9trP8gE4YjpE/w600-h300-no/form-email-subscribe-blogger.png" class="fadeFour" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek fadefour</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-7b5XQg3yaMNZ214IyqxJJ5E1-7-BaebTzUdzkieFdMrQuljzuP5npKvP6W2pz_uQhkRSLUjIO0SLfL5AQwSZ5yM5xdWFs4USLlA4g3v8sGyDqXLaZKu6qvRIi9cvJWK1VUO5_udo3Io/w985-h533-no/widget-contact-form-official-blogger.jpg" class="paralell" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek paralell</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiomEhyphenhyphenEA_kErDjX5ItTdebiHa-QQ97xNcrPhQFTJa6dtVugtu3PAtE9xALCxKSSNC5dK3AZSjR-W7ulo2eonUltkbNx4NfM_uR3QCX8dHdCkCpgVAAawbFYPLVdSD7681bgCDS8BPvAlc/w540-h180-no/Pop-Up-Widget-Google%252B-Follower-for-blogger.png" class="blind" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blind</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpay1tgxFFMFJz4AMYQlP5ewPuvtwHRpBUmT2B2Lu2DjelXVcdhrbQRnpLiqez7vNfes04ezqky5SmLcT01vcBMmn3jtGJQFp-QiOH8H0h_Hqdwt2-akpq7ZUGMsoc-FRQpXd0jskameA/w353-h243-no/Pop-Up-Widget-Google%252B-Follower-2.png" class="blindHeight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindheight</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6pSBA_4mYOsdGiEDlEvnB8FEvx7v4A9L8cfGCrlC6thKnkWFvpbdvXL_Q-Nc9LfSUlH4kPfgRH7mVZmVtL1luXjAleAZG8TRAaVLf3kV25EyNcNeg7wPVKThkfCJ6_H1LI8EXxgzawi4/w540-h180-no/modifikasi-email-subscribe.jpg" class="blindWidth" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek blindwidth</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggI1fcZ5YwkK5CA9CXGVaH5rNku7thSKbiUVEWnFdkuR9cL-4bNozPfnbqcrSYLRvptpV_uTGroSf1jI5TtyMKt9WtiDuhJcYTkvQe2Opjef6BzZl100M1pwsWfZUPfr2c37xzj9sa4hs/w540-h179-no/modifikasi-facebook-like-box.jpg" class="directionTop" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionTop</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIYAzFu-B91YkoaqUd4Tz4KlxAXEbXGxsz2-oUL8Z3czpjPGglQ3zKev9p82J0jlZAsiNfJ7KeF1BsAfrwvwbeSvljWWPsSTrHcPXyK6qiIyGDsvm8_e88ttOcp18YSTZHsCIKEH_wEng/w540-h179-no/modifikasi-widget-google%252B.jpg" class="directionBottom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionBottom</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhMNU0t-cDa8sOYcX2zIy0K4zFdylhnqovwu7UjOedgbrvNWRkmo_o_VxTnKtmwfjz_ZDNIryhrucYwCkRRUC9JwIdAbj43NMjHWNsAmWdfR6AQPhiu5SUMtTD6SZ1q7Yy13lQ7fpumNA/w500-h300-no/" class="directionRight" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionRight</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3jFWDCClINh5BRq_iliwjzb2XeKIPm3soRUeS0jFepWa1m9nGaW7qTNwt58Zbk_Ewoa5zPrLH6rd4OwiNTfPqRbFckiREayT9sMgWC5OYpPbKZKhJAGdZZTmoFWoVv6e2JNF4liOcC4g/w400-h274-no/flod-image-hover.jpg" class="directionLeft" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek directionLeft</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtUMAGDEvco9IhamksJS0UgoViIU7DUJ59_nJu8pbocCZEY8soz7lEmxaZfzI2prsFIVkgyC9wc423Z53tQj0s2L-1b8mL6MoRE4LklfpJlKqiqZkcbb5mnIzdQvAnnOlT1MvWUBsHdqY/w725-h459-no/widget-sidebar-ribbon.jpg" class="cubeStopRandom" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeStopRandom</p></div></li>
<li><a href="http://webseyyahi.blogspot.com.tr/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiboGClKUpN8SjZUNtZrTU61_ivQC8_I9QwjO8wTaSNo_vpOMOftMLUv4NaJoslIOYIMmhbHIVRn_0sz3fZH3GbyTcR2yaR6muiqKgK7BbvxaQHbY4Xc1mj4eLi9_BONPm3JWnnT17EJ5w/w587-h344-no/sidebar-ribbon.2.jpg" class="cubeSpread" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text"><p>Efek cubeSpread</p></div></li>
</ul>
</div>
</div>
<li><a href="http://bloggelistirme.blogspot.com.tr/"> : Tıklandığında gitmesini istediğiniz URL
class="cube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/> : Üstünde yazan bilgiler
<img src="http://3.bp.blogspot.com/-3XHTX3F44bs/UkcXyyjS3AI/AAAAAAAAKzk/pB_iV2LaBGU/s205/etiket2.png" Resim URL si.
.slideshow_skitter_large {width:850px;height:300px;}
.slideshow_skitter_small {width:200px;height:200px;}
Tabi diğer px değerleride değişeceği için normlara göre ayarlamak gerekir.
Slaytların üzerine tıkladıgımızda ayrı bir pencereden açılmasını istiyorsanız
<a href="http://bloggelistirme.blogspot.com.tr/" target="_blank">http://bloggelistirme.blogspot.com.tr/</a> gibi.
Geçiş efektlerini ise JS kodlarının içindeki stilleri istediğiniz gibi değiştirerek ayarlayabilirsiniz
Geçiş efektlerini ise JS kodlarının içindeki stilleri istediğiniz gibi değiştirerek ayarlayabilirsiniz
Hiç yorum yok:
Yorum Gönder