Demo:
Blogger Kitap Tarzında Popüler Yayınlar slayt ekleme ne demek istediğimi öğrenmek için demoyu açın ve demo içersindeki slaytı göreceksiniz.
Sizlere daha önce paylaştığım diğer PopülerYayınlardan Nasıl Slayt yapılır onların linklerini vermek istiyorum.
Sizlere daha önce paylaştığım diğer PopülerYayınlardan Nasıl Slayt yapılır onların linklerini vermek istiyorum.
Bu yayınlarımın sayfa görünümlerinden ve google dan ilgi gördüğünü takip ettim ve bende bunlar gibi neler bulabilirim araştırdım ve ekledim.Bunu eklerken diğer yazılarımda olduğu gibi Blog Kayıtları üstünde duracak şekilde Popüler Yayınları yerleştiriyoruz gerisinide aşağıda nasıl yapacağını resim ve yazılar ile anlatıyorum.
Kolay gelsin
Kolay gelsin
<style> @charset "utf-8"; /* CSS Document */ .lof-slidecontent, .lof-slidecontent a { color:#FFF; } .lof-slidecontent a.readmore{ color:#58B1EA; font-size:95%; } .lof-slidecontent{ position:relative; overflow:hidden; border:#F4F4F4 solid 1px; } .lof-slidecontent .preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF } .lof-slidecontent .preload div{ height:100%; width:100%; background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%; } .lof-main-outer{ position:relative; height:100%; width:800px; z-index:3px; overflow:hidden; } /*******************************************************/ .lof-main-item-desc{ z-index:100px; position:absolute; bottom:50px; left:0px; width:350px; background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/bg_trans.png); height:100px; /* filter:0.7(opacity:60) */ padding:10px; } .lof-main-item-desc p{ margin:0 8px; padding:8px 0 } .lof-main-item-desc h3{ padding:0; margin:0 } .lof-main-item-desc h2{ padding:0; margin:15px 0 0 0px; } .lof-main-item-desc h3 a{ margin:0; background:#C01F25; font-size:75%; padding:2px 3px; font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif; text-transform:uppercase; text-decoration:none } .lof-main-item-desc h3 a:hover{ text-decoration:underline; } .lof-main-item-desc h3 i { font-size:70%; } /* main flash */ ul.lof-main-wapper{ /* margin-right:auto; */ overflow:hidden; background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%; padding:0px; margin:0 !important; position:absolute; overflow:hidden; } ul.lof-main-wapper li{ overflow:hidden; padding:0px !important; margin:0px; float:left; position:relative; } .lof-opacity li{ position:absolute; top:0; left:0; float:inherit; } ul.lof-main-wapper li img{ padding:0px !important; } /* item navigator */ .lof-navigator-wapper { position:absolute; bottom:10px; right:10px; background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png) repeat; padding:5px 0px; } .lof-navigator-outer{ position:relative; z-index:100; height:180px; width:310px; overflow:hidden; color:#FFF; float:left } ul.lof-navigator{ top:0; padding:0; margin:0; position:absolute; width:100%; background:none !important; margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } ul.lof-navigator li{ cursor:hand !important; cursor:pointer !important; list-style:none !important; padding:0 !important; margin-left:0px !important; overflow:hidden !important; float:left !important; display:block !important; text-align:center !important; } ul.lof-navigator li img{ border:#666 solid 3px; } ul.lof-navigator li.active img, ul.lof-navigator li:hover img { border:#A8A8A8 solid 3px; } .lof-navigator-wapper .lof-next, .lof-navigator-wapper .lof-previous{ display:block; width:22px; height:30px; color:#FFF; cursor:pointer; } .lof-navigator-wapper .lof-next { float:left; text-indent:-999px; margin-right:5px; background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-l.png) no-repeat right center; } .lof-navigator-wapper .lof-previous { float:left; text-indent:-999px; margin-left:5px; background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-r.png) no-repeat left center; } #lofslidecontent45 {width:880px;height:340px;} .lof-main-outer {width:880px; height:340px;} .lof-main-wapper img {height:340px !important; width:880px !important} .lof-navigator-wapper img {height:32px !important; width:80px !important} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/jquery.easing.js"></script> <script language="javascript" type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/scriptlofblogv2.js"></script> <script type="text/javascript"> $(document).ready( function(){ var buttons = { previous:$('#lofslidecontent45 .lof-previous') , next:$('#lofslidecontent45 .lof-next') }; $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000, direction : 'opacitys', easing : 'easeOutBounce', duration : 1200, auto : true, maxItemDisplay : 4, navPosition : 'horizontal', // horizontal navigatorHeight : 32, navigatorWidth : 80, mainWidth:880, buttons : buttons} ); }); </script>
Burda dikkat edilmesi gereken Küçük Resim ve Snippet işaretli olması
Burdada gördüğünüz gibi Blog Kayıtları üstünde Popüler Yayınlar,Kodları eklediğimiz gatgette kenarda ve herhangi bir yerdede durabilir.
0 yorum:
Yorum Gönder