28 Temmuz 2014 Pazartesi

Blogger Galeri Kodu

Written by PeakyBlinders on Temmuz 28, 2014 in Blogger, Blogger Eklentileri

bir süre önce zaten çekici geçiş efektleri ile Bloglar On jQuery Animasyon Slider Feature ekleme tartışıldı sonra, o zaman bu yazının sıçramak Slayt jQuery eklentisi kullanarak daha az ilginç değildir efektleri ile blogda bir kaydırıcı özelliği eklemek için geri görüşecek.Öğretici içine daha delving önce, ben sıçramak Slayt jQuery eklentisi hakkında biraz anlatacağım. Sıçramak bizi görüntüleri animasyonlu geçiş efektleri ile slayt haline dönüştürmek için olanak sağlayan bir jQuery eklentisi. jQuery sıçramak gerçekten bize ilginç bir görüntü efektleri ile bir slayt gösterisi oluşturmak için izin verir ve 22 geçiş efektleri oluşur. Sıçramak Slayt numaralara veya küçük ve öğeleri gibi slaytlar listesi prev ve sonraki düğmeleri yardımı ile ulaşılabilir görüntüleyebilirsiniz. (Animasyonlu partiküller için) hızı, on / off her slayt veya etiket görüntü arasındaki aralığı: gibi maksimum özelleştirme için sunulan çeşitli seçenekler vardır. Bir diğer güzel özelliği bize bir slaytta animasyon çeşit kullanmak için izin veren bir sınıf ismi olarak her slayt için animasyon hangi tür belirtmek için yeteneğidir. Bu kaymak Blog sıçramak Slayt yükleme öğretici aşağıdaki, bloga takılı olduğundan emin olun.

1.. Blogger giriş yapın.
2.. Düzen gidin ve ardından Widget HTML / Javascript ekle.
3.. Aşağıdaki kodu kopyalayın.

<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/AVvXsEi2ju8Y5ELy9JQvHiYndmjMKue4Cuc6yxQc3WCpJslP-eZJK8tRfxiavu68zFdYGBILFAnZp3NscZZdZXRwJNskqlKU0fxTYzwRbjWb8vYTeOOtH1UVfz5B_w5zUH3UTD-nef2EY9mU7cw/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/AVvXsEgWDNN9Tga-lh2c9yZiv2Wkj2kiTqhPkGzD6yt7Na4IxZXqj9GHe9oIutvdUVPAF_JqJhzAkeeNXDNLLIzTjzZZ097Bjj2MiTzsR62nICBFiSqAAe3DxfuJXUv8rHEBMngSa5wcCsOd5Ck/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/AVvXsEjjMTwbyly2azVHrtfzXdytPl-1qq8ZRy8bYtV0e9R27D_VrLy30kCKvPA1GbdObGDTo72uR644UTAvrtF_ErJGtlDkbk9BUVn5wqvlVsZC8ar5AadpdAXOHDXZturZFMJuoZoVzBnaQ4c/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/AVvXsEjX_LR0KNrBOvuFZEIdoPfVpxhAIMIWOHPSdO5UlOra0ojVYpCScVv80NXDlUVbIJRFvUYPbmnt6YCfEmT23cNTZ49gnGCvY7PHy7BEcjRKRb2qefDtjEpbTvl8OpcUJzyv3gzF1G0jWQU/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9bB00txlkhkgzvq-mOirGGxcoaNYXZKftFOUmbRIyCWDfaCRBC1tSUKfJxXss4OKSiGz_cdx-FKfRBoO_xfE5dN2zz27YmxlQMPYymC_5ky8mpuYXNDb_b9wfyP3k88R0Em29RetbfKM/w600-h300-no/" class="cube" alt="Faceblog Evolutions" title="Faceblog Evolutions"/></a><div class="label_text">
<p>
Efek cube</p>
</div>
</li>
<li><a href="http://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBZTRXTrrzsQZgsFcMivrja5avudqWdmnWC5D-TM6VuiAebAWCFj2DPLghQyPbNMhklsYsuYA8oayLpA9hw4dY72Gv-VoJ4xVuQS1UKprfKRtYD1_TT7yhluKjgW5YJ_xyBL2gYwKWzNs/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhul9J8YEmBMgR8VCfOiifdNujI3tZ4KeAli-dDhB9pLW8pVAwurrqm5UYFZnE_jdhqjq4NBrw0zRy09CD1mGcDd1qxBz6SdZ7L7pxI3lfZSaYw4sWynIJ8Y0bJ-A_nrbWoqWmfrXtOm7s/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUOTH76dBuh9Mm9PeIMfEpXPNIshKFRZHtRuji2AhoFmiIyR9Tb9ueYDEkzhkZ94w0bG0osw5snaDcjuCYn2cipeRp9ZxK2R_Q0NpwbVVe8mmkdJprrvWkh1eJLpJnXaGakuYUtsar-6o/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis9lr8mvSbRhsuYjo2_n7rMPxCgzawULJqU3DMaKsOZEqLIk4bUOTIeyKOzptXinQCqkmVToUXjIbLOX-XYrxCwv518TgEuAo0LHeO7dOQAHxwjJ9OVhWFuPVd689lHseVYqO0mQaUTJc/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJtlCmTX3Ar0T8VAnl8A-_bqmdsOc-5mqExYkfZvS9xQ45ZUTxdd8Gpgy8zfD2nSbZ03oYw4WpXMGLV3ZNbZhxyrE3qmRAmngj0qeaE53or2a0FTYw5kNlIhEf98NoCeLbK65DW8zA-S0/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR3F1VC8qaIIqh6kIQaaSyy7OraXcZdkvbTmZTqNgyRqOzauM_ZGDQ3IttJjXyOQaQj4KT3YYA95r1I0OoVlYY-qUnmA76myCDdxBUYNOXWq2Hyey085OTjDmrVxhciiNdP7lUplvBubU/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3qTPs1v7qPp12aez_hEKrqTnusP0VMICbPTqFbB4FfYIpohwdDzU-Wmy8pnydhdIZYOJtnPynChdPQkWeQNW2IlGsL9y_U5TJlmd8NO8FuGzXDLC93kNGKeDfdf5aWFMcDBScEeOQKUA/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZ3pQXDAm-sy8zWheMeqgMbSuU3ZDR3DzlcoLiBhhH_SVRIXq-6Qmp10LF2RoBlbv75eJ9n3UNqSe_4svFfS5YYB07fLZkS4haAXb1lTzwqQoU3WpO3yuWPTpCuF9hvO93DDUf4mwT8s/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivoukGCJi1iAMY5IY0V7SUZ7DGei60lFatIAn1RhjPR7yE-OK-PBoMbRHi3S1sfK3by8UDGxKalq4RzEzrrfNU6VckYNnZAdRophExRXbeTw-g2wej74xFvGgAroiXZwezuNmbEtDBeN8/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://mas-andes.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaojaTojYlUOQCC2fm8fPsKO62UO4jhEKSkJrbXXsylFxsN5KEGpmLdS2_XKMLsqSVZRD8ck9RAI9AFE55BrmnH9h4_e2bpXysFpuELG4PACnYnnQcLaPhYMdhObI_DjAoslYqsUhCI-Y/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ACgA3lYodqW8uPhuCMKKi-EBy_aDrSzcautiW0jF75PLcoDDlwrBE7r3R3gfE846yHvraGHc7Ipnbez7GJrF_dfHFwgWTe_rV34EhuK0BzEpVM0UZ-Oivy_1_YJs-CxXK1P8PG7TIqk/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOSTvGnwKw0JJF7D_7CLVf1gWMLRWVKzUt-_XtmsQTrgJhYIC79WNE8akNbKOEVeg4z-e27UUo9Q_pADizHMXv7J7Cek0U5bn01qgSekGXQ8B5B5BanB8Yp8tWaz_mLiuRr9QQPiH1FZM/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgviX8w6GlIiifHRSv3hQcJ6ET8oZn-GGLTQJut3oKDhq7Vzwk4oW9vMWBNk1ywxgDp1KVe-vj1G_y0jG14e2eFAcQ3CdWSpl-koXZ9BJ2E0JdKINbh8xknKNM1SkokbpYj2LkoPBzC4eA/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMqaNkkmvWWcRmFmhNYON2u8eP9ULjZZOU8ww-dDFNLK9Qddv6l4_ExR1TtPIYfOGzbFTxBO5U9ARdiEM1FNx23hH0_KnJsr_Sd24Bg9akjj0gQhJlwjQZeYQcPb3Sj3ELB4gy3JjaFp0/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitzvIj50RN_Jb-ptSUgUMkTXxeOmWccjHDHQiOwE1EcTmgHXYyL1RX3H8YdUR5XEb4gsAGFfMkk6eY6jSNGHyX_r4qdjrjnmWGXFnQ4ui5O1vOojhrXsKoV5RxnTiQIgDnljbkJkSIJnc/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw8qDEj6C-dz6D-2sfM9ScT1n0OXjfaNe9TmLfsR2WyX4btNoIpABIXIPJWzL15Z_mKwX8_qsfQ3v_tbYsYPX9BCpPkYlb31PdKVIsepdxQOerNJeNjSmfzD6hq40X_-hAZ-DMKth1OH8/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFSwGnVNvgIQ_wLLYoBXHel0pR8ZVhClbIx-gEk9oIcpK7RA343jc-zjA4fzWdBXIwbYvwrtqWkva3yioxohuAqfad6Q6GKWwjROXsOCdjpW2kaUOKZYpjt8HIxnrNUrU0f5Wyz7kYPQ/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnDW_yWMrjYXNEq3OPnrXQQxff71WdyU2qMS_PtIDviYSWOsq6ehXd50dHcU9KwUd1xkfBwHqxobqsLo9MibS0-gx6_S6ms2CVfAlMfI1d7vGW47BN43iYezcBt7Ap1u7fHBzH4ryfkTk/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUIaVAwqiNVhE9IoDkdIPoThtdjEl_B8S1L1MQGs556Nivq8rW3qn1gdfZZ1SnsLhppkusP2urTzJnFTKtMDLTxg6H9LFMEKMleZl5mhIwc8DUGKyZs5RWVS7RFsknodR3il2r93iBu9E/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhImRtOQzuUIFjUSEcL5NiS_oe8atTjAAdGZnFq9zBJnfySEqjU2GJaiWmWwV1o3nOJbBAWcKeOnzD3YVxQpK09ZWTt9SkNP9XDS44QS6K6BLwzTdGSukukad0PR5_Y4RTfLyRuru30Qio/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://teknodr.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhej_lOcC1idrrzMLcA2yHw8yPiqttjoMHZ-Jz6RvWJ4b7YCxdg-3-3L8wp00qHnD6zEoUN9hGJZI7WR7s8mtprKKHVIUbWbc3siqyWWOVwUFVXlm_Qeu7BLJTjCCS0367aL7riljO4APU/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>

Açıklama:
http://teknodr.blogspot.com ve Görüntü URL'leri değiştirin.

4. HTML / Javascript içine widget kodunu yapıştırın.
5. Son olarakkaydet ve çıkın.

Share: