رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 

معرض قوالب معهد خبراء بلوجر - دليل مدونات بلوجر - موقع نشر بلوجر - اضافات بلوجر




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر


إضافة رد
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
قديم 02-06-2014, 07:01 PM   #1
Blog-Add
مدون نشيط
 
تاريخ التسجيل: Feb 2014
المشاركات: 124
افتراضي اضافة شريط صور متحركة - اضافات بلوجر

أنا : Blog-Add




السلام عليكم ورحمة الله وبركاتة



اقدم لكم اليوم اضافة شريط صور متحركة للتدوينات الخاصه بمدونتك تظهر بشكل

انيق وتعرض مواضيع مدونتك مع نظام تحريك ممتع نتابع

الشرح :

نقوم بالذهاب اللي التصميم واختيار تحرير HTML أبحث عن : ]]></b:skin>

واضف الكود التالي اعلاه :

كود PHP:
#myslides{

background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;
width650px;
height:165px;
margin-bottom:5px;
}

.
stepcarousel{
positionrelative/*leave this value alone*/
overflowscroll/*leave this value alone*/
width554px/*Width of Carousel Viewer itself*/
height160px/*Height should enough to fit largest content's height*/
margin0px 48px 5px 48px;

}

.
stepcarousel .belt{
positionabsolute/*leave this value alone*/
left0;
top0;
}

.
stepcarousel .panel{
floatleft/*leave this value alone*/
overflowhidden/*clip content that go outside dimensions of holding panel DIV*/
margin20px 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-alignleft/*leave this value alone*/
overflowhidden/*clip content that go outside dimensions of holding panel DIV*/
margin5px 5px /*margin around each panel*/

}

.
stepcarousel .panel h2{
text-alignleft/*leave this value alone*/
height:20px;
overflowhidden/*clip content that go outside dimensions of holding panel DIV*/
margin2px 5px /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdanasans-serif;
}

.
stepcarousel .panel img{
floatleft/*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin5px 5px 5px 5px/*margin around each panel*/
padding:0px 0px;

ثم قم بالبحث عن : </head>

واضف اعلاه الكود التالي :

كود PHP:
<!-- JavaScript Slider -->
<
script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad.js' type='text/javascript'/>
<
script src='http://sites.google.com/site/mohamedabuiyad/slid-move1/abu-iyad2.js' type='text/javascript'/>

<!-- 
End JavaScript Slider -->
<
script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery', //id of carousel DIV
beltclass: &#39;belt', //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel', //class of panel DIVs each holding content
panelbehavior: {speed:1500wraparound:truepersist:true},
autostep: {enable:truemoveby:1pause:1000},
defaultbuttons: {enabletruemoveby4leftnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg', -48, 0], rightnav: ['http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg', 0, 0]},
statusvars: [&#39;statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external'] //content setting ['inline'] or ['external', 'path_to_external_file']

})

</script> 
ثم قم بالحفظ وتوجة الي صفحة التخطيط اوضف اداة جديدة HTML وضع بها الكود التالي :

كود PHP:
<div id="myslides">
<
div id="mygallery" class="stepcarousel">
<
div class="belt">

<!-- 
1st Template -->
<
div class="panel">
<
a href="الرابط هنا" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="http://pics.imagup.com/ano1/1278000007.png" height="110" /> </a>
</
div>
<!-- 
end code of 1st -->

<!-- 
2nd Template -->
<
div class="panel">
<
a href="الرابط هنا" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="http://pics.imagup.com/ano1/1278001914.png" height="110" /> </a>
</
div>
<!-- 
end code of 2nd -->

<!-- 
3th Template -->
<
div class="panel">
<
a href="الرابط هنا" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template" src="http://pics.imagup.com/ano1/1278001116.jpg" height="110" /> </a>
</
div>
<!-- 
end code of 3th -->

<!-- 
4th Template -->
<
div class="panel">
<
a href="الرابط هنا" target="blank" title="Money Blogger Template"> <img width="160" alt="Money Blogger Template" src="http://pics.imagup.com/ano1/1278001691.png" height="110" /> </a>
</
div>
<!-- 
end code of 4th -->

<!--
5th Template -->
<
div class="panel">
<
a href="الرابط هنا" target="blank" title="Digital Statement Blogger Template"> <img width="160" alt="Digital Statement Blogger Template" src="http://pics.imagup.com/ano1/1278002070.jpg" height="110" /> </a>
</
div>
<!-- 
end code of 5th -->

<!--
6th Template -->
<
div class="panel">
<
a href="الرابط هنا" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278002754.png" height="110" /> </a>
</
div>
<!-- 
end code of 6th -->

<!--
7th Template -->
<
div class="panel">
<
a href="الرابط هنا" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278003649.png" height="110" /> </a>
</
div>
<!-- 
end code of 7th -->

<!--
8th Template -->
<
div class="panel">
<
a href="الرابط هنا" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278003860.png" height="110" /> </a>
</
div>
<!-- 
end code of 8th -->

<!--
9th Template -->
<
div class="panel">
<
a href="الرابط هنا" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278004864.png" height="110" /> </a>
</
div>
<!-- 
end code of 9th -->

<!--
10th Template -->
<
div class="panel">
<
a href="الرابط هنا" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278094671.png" height="110" /> </a>
</
div>
<!-- 
end code of10th -->

<!--
11th Template -->
<
div class="panel">
<
a href="الرابط هنا" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278094825.png" height="110" /> </a>
</
div>
<!-- 
end code of11th -->

<!--
12th Template -->
<
div class="panel">
<
a href="رابط القسم هنا" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://pics.imagup.com/ano1/1278095024.png" height="110" /> </a>
</
div>
<!-- 
end code of 12th -->

</
div></div></div
مع وضع روابط الاقسام او المواضيع وروابط الصور

تمنياتي بالتوفيق

الدعم العربي

Blog-Add غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)
ادوات بلوجر احترافية, اضافات بلوجر, اضافات بلوجر 2014, اضافة شريط متحرك


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
اضافة نبضان جوجل - اضافات بلوجر Blog-Add إضافات وأدوات بلوجر 0 02-05-2014 03:33 PM
اضافة مواضيع جديدة مع صورة - اضافات بلوجر Blog-Add إضافات وأدوات بلوجر 0 02-05-2014 03:27 PM
اضافة ايقونة تويتر بالمدونة - اضافات بلوجر Blog-Add إضافات وأدوات بلوجر 0 02-05-2014 02:21 PM
اضافة ثلاث اعمدة بالفوتر - اضافات بلوجر Blog-Add إضافات وأدوات بلوجر 0 02-05-2014 02:14 PM
اضافة خاصية أحدث المواضيع متحركة و منزلقة لمدونات بلوجر az621996 إضافات وأدوات بلوجر 8 08-31-2013 09:49 PM





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 05:46 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)