Thursday, August 6, 2015
شرح اضافة سلايد شو تلقائى لمدونات بلوجر
شرح اضافة سلايد شو تلقائى لمدونات بلوجر
كود سلايد شو تلقائى لبلوجر سهل جدا فى التركيب وبدون اى تعب او تعديلات فقط تضع الكود فى الاماكن المخصصه لها وستظهر المواضيع من تلقاء نفسها بدون اى تعديلات اخرى
سلايد شو تلقائى سهل التركيب , اضافة اسلايد شو تلقائى بلوجر , كود سلايد شو تلقائى , شرح اضافة سلايد شو تلقائى للبلوج سبوت
 |
| شرح اضافة سلايد شو تلقائى لمدونات بلوجر |
نبدأ الشرح
بسم الله الرحمن الرحيم
ندخل على تعديل القالب HTML EDIT
ونبحث عن </head>
ونضيف قبله الكود التالى :
<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/AVvXsEhAUUIJFNtxEqSaP_-sI1hXxgUr-T64vcRrriFsvrdbpHrobQHWUdnm7KdIPzf98nMe1oAoKlTijoqcM2Ob4kk1F1GHHjx-eYq0DVBAmDqknv_NonIMo8zN3kHnIWf0zfELAWWf7LNX5wE/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/AVvXsEh0pc5cvFhF1PAkv65C4hl1pQYeYDeKy17aK_f7UxcVzCT0XcyTwEsIRBRxbafZ4D9pg-yZzsLJadkXI76RC91oW89mUNmVlcaeI_B_w4GG5c2SLw0g2TiikAw2fa4aXPVQJoHKfYm4F_Y/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBJzmgz_yUC5yaTHwHEjrS_HYqp3_Cz-h-45KS5cHzF6VhGL2N7a6buHJYznNuf9kqKlVnlP04V1a1poWRx-sFjuvAC_RGe1F6porPXfmIjVlxmZy-kF7zdG0_VUeWGOF-dDniqkXWQlw/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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<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/AVvXsEiloC2guy1E4-mQV6KB7FyOvFTef8_MYJYpbVhE2j13v46Okk9HIs6H4zyIBd2J9nmT0_heViJxC2xpmWkDZMBQJL3waYgbqxB3W2KTgSXeJMk4SX9bJPnsTuTdXEdPzB3-QHOw5KUCnh8/s1600/defaultimage.jpg'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div></b:if>
</b:includable>
</b:widget>
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment