Blogger Resimlerinizi Zoomlayın
Profesyonel olarak tasarlanmış alışveriş sitelerinde, imlec ile bir ürünün yada resmin üzerine geldiğiniz zaman resim büyüyor, böylece kullanıcı ürünü daha detaylı ve yakından görme imkanını buluyor.Bu tür siteleri mutlaka ziyaret etmişsinizdir diye düşünüyorum.Blog Okulu, blogları orjinal ve profesyonelce tasarlanmış sitelerle yarışır seviyelere getirecek eklentileri kullanıma sunmaya devam ediyor. Profesyonel sitelerdeki gibi resim zoomlama yada türkçesi resim yakınlaştırma eklentisini bir kaç
kopyala yapıştır işleminden sonra sizde blogunuza ekliyebilirsiniz.Bu eklentiyi ekledikten sonra; resimleriniz üzerinde ziyaretçileriniz imleci gezdirip resmimlerinizi daha detaylı ve yakından görme imkanını bulacaklar.
1.Adım:Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edin widget şablonlarını genişlet kutucuğunu işaretleyin.Ctrl+F yardımı ile kodlar içerisinde ]]></b:skin> kodunu aratıp buluyoruz aşağıdaki kodu kopylayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.
#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}
2.Adım:Yine aynı kodlar içerisinde Ctrl+F yardımı ile </head> kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.<!-- start Gadget Code From http://www.memurvadisi.com/ --><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://suyb.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$('a.zoom').each(function(i) {
$(this).easyZoom();
});
});
</script><!-- End Gadget Code From http://www.memurvadisi.com/ -->
şablonumuzu kaydedip çıkıyoruz.3.Adım:Son olarak da blogunuza eklediğiniz resimlerden zoom eklentisinin aktif halde olmasını istediğiniz resme;
resminizin HTML kodu normalde aşağıdaki gibidir.
<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRezZKPqNwuGvmcYeyRaW2kpb_isAXiJP4hOLEHAixzJy2TupdtAv7hiofUxhd3bljOUNSMT-ydM-wFSUKlszKmOE8RTC92uXMGNaJXlQf-ReM0zgbpXQ34kFcP4KCSHOGW-_xsXxkvvgx/s1600/large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRezZKPqNwuGvmcYeyRaW2kpb_isAXiJP4hOLEHAixzJy2TupdtAv7hiofUxhd3bljOUNSMT-ydM-wFSUKlszKmOE8RTC92uXMGNaJXlQf-ReM0zgbpXQ34kFcP4KCSHOGW-_xsXxkvvgx/s320/large.jpg" width="320" /></a></div>
zoom efektisinin aktif olmasını istediğiniz resmin html koduna kod içerisinde mavi renkle belirttiğimiz class="zoom" kodunu ekliyoruz.Zoom eklentimiz kullanıma hazır.VİDEOLU ANLATIM:
kaynak:blogokulu.org Bu haber: www.memurvadisi.com sitesine aittir.
Güncel Blog Sayfası * Online Tv Sayfası * Online Radyo Dinle * Günlük Gazeteler * Kimineli Blog * Beles Radyo * Cep Telefonları * Digg * Maçlar * Altın Döviz Borsa * Ödevler * Arama Motoru * Canlı Maç Seyret * Ödev Sitesi * Yemek Tarifi * Bedava Backlink * Cep Telefonu * Free Backlink * SEO Yarışmaları * Memur Blog * Türk Filmi İzle * Yalan Dünya Dizisi * Koyu Kırmızı Dizisi * Ayrılık Olmasa Dizisi * Ha Babam Uzay Dizisi * SEO Yarışmaları * Memur Blog * Güncel * Güncel Blogcu * Zarfat * Memurblogspot * gazete * memurcep * acemtr * İşler Güçler Dizisi * Kötü Yol Dizisi * SSK SGK BAĞKUR SORGU EKRANI
Posted in: Blogger Eklentisi
Bu yazı;
Blogger Eklentisi kategorisine eklenmiştir. Bu ve buna benzer yazılardan ilk senin haberin olsun istersen ücretsiz Takipçimiz olabilirsiniz , ayrıca istersende bu yazıya 1 yorumda sen yapabilirsin!
0 yorum:
Yorum Gönder