add slider for featured content in Blogger
معرض المواضيع المتحرك
الى بلوجر
طريقة الأضافة
(1)
"أذهب الى تصميم > تحريرHTML > أضغط " تنزيل قالب كامل
Go to Layout > Edit HTML and click on " Download Full Template"
(2)
ضع علامة على " توسيع قوالب عناصر واجهة المستخدم "
وأبحث عن
]]></b:skin>
وضع فوقها الى قبلها هذا الكود بالأسفل
#myslides{
background:#000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQUCpeA3JY-MSKrhtSoIxuwjyIzQyLoi9Zm7DwSLkNeeIWLMSNmOnF_wERDX1PdEDE2RCOszQ1ynbr9fUcQpF2g1L8I0NocOPFD51dkJQl7uGa4ALNLX3TzY8wjrF_Ibnl_-4AZzkaNA/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
وتغير ما هو ملون الى ما يناسب قالبك
(3)
ثم أبحث عن هذا الكود
</head>
وضع فوقه أو قبله الكود الذى بالأسفل
<!-- JavaScript Slider -->
<script src='http://www.yourjavascript.com/57180121136/jquery-1.3.2.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/30111191622/slider.js' type='text/javascript'/>
<!-- End JavaScript Slider -->
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:1500, wraparound:true, persist:true},
autostep: {enable:true, moveby:1, pause:1000},
defaultbuttons: {enable: true, moveby: 4, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0z6-P3Sn_YYKYxJUpUUXxxyFgev6doTgutqw_ZQNzYEUeEnB4ktC9txn2rgpKDObwGkk5AinLXUEfKhMttIXAy0yChsMnAyk7Ds2fwRYy2DVHDB6y0ZppBKSNMfg3UKBGc7thTm9CebQ/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2kk2WNSfz2l8-WgA5razSAn36flrDdkxn4495pRvTdPxRNlEozBLNMgLyONFxfHhPFY_cwiyrW2JZiLCNwcFxDbZMLX7FcM16eFd_ouajTT8bhGGfINymKchrX_LWF_oyOwF0BC0zUeI/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
يفضل اعادة تحميل الملفين وأفضل " جوجل سيت "
http://www.yourjavascript.com/30111191622/slider.js
http://www.yourjavascript.com/57180121136/jquery-1.3.2.js
وتغير الصور التى باللون الأزرق الى ما يناسب مدونتك
(4)
"أذهب الى تصميم > عناصر الصفحة > اضافة اداة > Html /Javascript واضف هذا الكود بالأسفل واحفظ الاداة فى المكان الذى تفضل ان يكون فيه العرض
<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- 1st Template -->
<div class='panel'>
<a href="http://holoul.blogspot.com/" target="blank">
<img alt="برنامج جهاد الإسلام الأصدار الأول" height="135" src="http://img59.imageshack.us/img59/4294/25170809.png" width="185" /></a><a href='http://www.bloggertemp.com/2010/01/blogger-template-made-in-spain.html' target='blank' title='برنامج جهاد الإسلام الأصدار الأول'> </a>
</div>
<!--end code of 1st Template -->
<!-- 2nd Template -->
<div class='panel'>
<a href="http://holoul.blogspot.com/" target="blank">
<img alt="برنامج جهاد الأسلام الأصدار الثانى" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUYGdSZkvqQXGPKWzT_MZuGJSY2glAm0H5nH_YDrR2QwBnDqmb0A-Z69MJkdLVZUmJO3WAaw3t_YM1X46LV3NpLPprxZKsa6aL5T24l2UYG1eoZ9zjmeRUyQ_l8u4Kb4tzoHUxYvOjzI/s320/12658683491.png" width="185" /></a><a href='http://www.bloggertemp.com/2010/01/blogger-template-fashion-press.html' target='blank' title='برنامج جهاد الأسلام الأصدار الثانى'> </a>
</div>
<!--end code of 2nd Template -->
<!-- 3rd Template -->
<div class='panel'>
<a href="http://holoul.blogspot.com/" target="blank">
<img alt="برنامج جهاد الإسلام الأصدار الثالث" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuIDaLy28zuySZc-vNPs49rxMrgd1b6H4ZcacGT06DuLT0ssZFOphyphenhyphenFYZpM0ANnFmQKJVwI3yt-FJbz_1O8oXGNB9wDO2YNLC5kk93dkua63CGKV6O5DARVCi2diFmht35_OySIGCY8_Y/s1600/6.png" title="برنامج جهاد الإسلام الأصدار الثالث" width="185" /></a><a href='http://www.bloggertemp.com/2010/01/blogger-template-techlure.html' target='blank' title='برنامج جهاد الإسلام الأصدار الثالث'> </a>
</div>
<!--end code of 3rd Template -->
<!-- 4th Template -->
<div class='panel'>
<a href="http://holoul.blogspot.com/" target="blank">
<img alt="برنامج الأصلاح jihad xp" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRj0ZoT6z1GkCo-MMDK__ljUiyWsbD5QAKPpypd0Vg0ZF6N0uDqoe-7I_P7yYgqMBZF7_FFwCn3wJDPBjYwaKkC7Dg6IEMPFwFMngBKfq8cyNigQpc_GFTf0U2Nznh_VUczU9ZCptczH0/s1600/1.png" title="برنامج الأصلاح jihad xp" width="185" /></a><a href='http://www.bloggertemp.com/2010/02/blogger-template-woodmag.html' target='blank' title='برنامج الأصلاح jihad xp'> </a>
</div>
<!--end code of 4th Template -->
<!-- 5th Template -->
<div class='panel'>
<a href="http://holoul.blogspot.com/" target="blank">
<img alt="folder-lock-6.41+serial" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiacRiiLFBtGPQ_CaCW9_RGaiPSgNLLsLQC0rSROslfUHD2XymaCAfUQVuqmxmYqXewzFDYAGRsJcr7ABuPKJUJjL24LpKse0teIZe_tIl5anVzQxbatHvPTWVz1tQCxkzFjEqCWD4-W_M/s320/1.png" title="folder-lock-6.41+serial" width="185" /></a><a href='http://www.bloggertemp.com/2010/02/blogger-template-showcase.html' target='blank' title='folder-lock-6.41+serial'>
</a>
</div>
<!--end code of 5th Template -->
<!-- 6th Template -->
<div class='panel'>
<a href="http://holoul.blogspot.com/" target="blank">
<img alt="أفضل جدار نارى كامل Outpost Firewall Pro" height="135" src="http://g.imagehost.org/0874/Outpost_Firewall_Pro_2009.jpg" title="أفضل جدار نارى كامل Outpost Firewall Pro" width="185" /></a><a href='http://www.bloggertemp.com/2010/03/blogger-template-versatile.html' target='blank' title='أفضل جدار نارى كامل outpost firewall pro'>
</a>
</div>
<!--end code of 6th Template -->
</div></div></div>
1 التعليقات:
شكرأ أخي وجاري التطبيق
إرسال تعليق