PARIWARA

شرح اضافة سلايد شو تلقائى لمدونات بلوجر

<style type="text/css">
#gallery{position:relative;margin:0 35px 20px;width:500px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2fk_CGCfB3dDL7h3yp-T7pH-Mr_lT9HFrWMVGtodwMJZYkrb6fQRNOBf6Eqc4HX4Cf16DsHzdXfo7C53Nf8CnfB2Y6mGJlZgSwgjbVYJNOCEM5bNqVnhBKgG6AY2Qq_CKGOLWJl338Y/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
</style>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/>
<script src=https://sites.google.com/site/gehadhussien/popular-posts.js type=text/javascript/>
<script type=text/javascript>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxchyphenhyphenvVWpgSgriogxrBILheWVOVxD2focKYnZ1j4HRymEEd0My_vQlKiwg1ft6YQHXO37Eh1ErR1zRkWerbHU_4ckGJDvs48uD50wIxc19x8HJnJSW5NQC_Mc-tt-XDTs4vJxnAdR6emA/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIfM4hJOryNZv2gM9VhPEjhnc7mYRVDJB_UtXHuQZKxVraRsr4rXvKG_HsHk0dYyUfK2mWRrlV321QNac9WeE2s2YVOFib0MBtWZSkRgxmGnwBzgQRZhQlob7Drlpdb5C2qq6UKEdvS-8/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

<b:section class=main id=main showaddelement=no>

<b:widget id=PopularPosts7 locked=false title=Popular Posts type=PopularPosts>
<b:includable id=main>
<b:if cond=data:blog.url == data:blog.homepageUrl>
<div style=margin-top:20px;margin-bottom:70px;margin-left:-20px;>
<div id=gallery>
<ul class=belt>
<b:loop values=data:posts var=post>
<li class=panel>
<b:if cond=data:showThumbnails == &quot;false&quot;>
<b:if cond=data:showSnippets == &quot;false&quot;>
<a expr:href=data:post.href expr:title=data:post.title rel=bookmark><data:post.title/></a>
<b:else/>
<div class=item-title>
<a expr:href=data:post.href expr:title=data:post.title rel=bookmark><data:post.title/></a>
</div>
<div class=item-snippet>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href=data:post.href expr:title=data:post.title rel=bookmark>
<b:if cond=data:post.thumbnail>
<img expr:alt=data:post.title expr:src=data:post.thumbnail/>
<b:else/>
<img alt=no image src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_sSus7qnevJ01rT1ZFNDOiZVgxFeCyFVg7wkWEN_0C25_cOUXPyu8uYukxXIXIn3x1jqFtl6ibsOMzCveZUCERqIYrJf41mJz7JvSYf5_eUbdWvkHQpS9IMEkFyX0ZkmtpszIyc2kYI/s1600/defaultimage.jpg/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div></b:if>
</b:includable>
</b:widget>