728x90 AdSpace

add slider for featured content in Blogger

اضافة معرض المواضيع الى بلوجر ؛ بشكل جميل  ومتناسق
add slider for featured content in Blogger
 معرض المواضيع المتحرك الى بلوجر
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(
http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/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: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //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: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]

})

</script>
يفضل اعادة تحميل الملفين وأفضل   " جوجل سيت  "
 http://www.yourjavascript.com/30111191622/slider.js 
 http://www.yourjavascript.com/57180121136/jquery-1.3.2.js

وتغير الصور التى باللون الأزرق الى ما يناسب مدونتك

(4
Go to Layout > Page Elements > Add A Gadget > Html /Javascript and insert the below code in the Gadget
"أذهب الى تصميم > عناصر الصفحة  > اضافة اداة > Html /Javascript واضف هذا الكود بالأسفل واحفظ الاداة فى المكان الذى تفضل ان يكون فيه العرض

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st -->
<div class='panel'>
<a href="رابط الموضوع" target="blank">
<img alt="اسم الصوره" height="135" src="صوره الموضوع" title="عنوان الموضوع " width="185" /></a>
</div>

<!--end code of 1st -->
<!-- 2nd -->
<div class='panel'>
<a href="رابط الموضوع" target="blank">
<img alt="اسم الصوره" height="135" src="صوره الموضوع" title="عنوان الموضوع " width="185" /></a>
</div>

<!--end code of 2nd -->

<!-- 3rd -->

<div class='panel'>
<a href="رابط الموضوع" target="blank">
<img alt="اسم الصوره" height="135" src="صوره الموضوع" title="عنوان الموضوع " width="185" /></a>
</div>

<!--end code of 3rd -->
<!-- 4th -->

<div class='panel'>
<a href="رابط الموضوع" target="blank">
<img alt="اسم الصوره" height="135" src="صوره الموضوع" title="عنوان الموضوع " width="185" /></a>
</div>

<!--end code of 4th -->
<!-- 5th Template -->

<div class='panel'>
<a href="رابط الموضوع" target="blank">
<img alt="اسم الصوره" height="135" src="صوره الموضوع" title="عنوان الموضوع " width="185" /></a>
</div>

<!--end code of 5th -->
<!-- 6th -->

<div class='panel'>
<a href="رابط الموضوع" target="blank">
<img alt="اسم الصوره" height="135" src="صوره الموضوع" title="عنوان الموضوع " width="185" /></a>
</div>

<!--end code of 6th  -->

</div></div></div>
- وقم بأستبدال الصور والروابط .... وينصح أستخدام برنامج تحرير مثل الفرونت بيج للتنسيق "عن النقل  يجب كتابة المصدر"
جهاد حسين

شاب مصرى بدأت فى عالم الكمبيوتر بالتعديل على نسخ الويندوز ؛ ومن ثم اتجهت الى تصميم برامج للويندوز #اعمالى ؛ وكان لابد من أيجاد موقع لعرض برامجى وتقديم ما أعرفه لمساعده المستخدمين وللأستفاده من تجاربهم ولذلك قمت بأنشاء المدونة ولكى امتلك موقع مختلف أنجرفت مع تيار تصميم المواقع . عملت فى مجال صيانة أجهزه أبل (أيفون - أيباد - أجهزه الماك ) . والأن عدت الى عالم التدوين .

  • تعليقات بلوجر
  • تعليقات فيسبوك

11 التعليقات:

  1. جزاك الله خيرا اخى جهاد ان شاء الله اجربها

    دمت بهذا العطاء

    ردحذف
  2. تشرفت بمرورك أخت " همسات " ..
    بالتوفيق أن شاء الله

    ردحذف
  3. شكرا اخى الفاضل وجزاك الله خيرا

    ردحذف
  4. الشكر لله أخى...أسعدنى مرورك العطر

    ردحذف
  5. عزيزي جهاد ممكن تفهمني ايش يعني معرض المواضيع المتحرك _ انا لسى مبتدىء_ وأشكرك على مجهودك وعلى فكره مدونتك بتجنن
    akram86@blogspot.com

    ردحذف
  6. تشرفت بمرورك " مطبخ صحتين وهنا "
    ....................

    أسعدنى مرورك "أنا عنك ما كلمتهم لكنهم ,, وجدوك في حبري وفي أوراقي"
    معرض المواضيع هو ان تضع مواضيعك فى اعلى المدونة بشكل متحركة مثل ما بهذه الصوره وكمثال هذه المدونة ... تجد فى الاعلى صور لمواضيع بشكل متحرك

    " http://2.bp.blogspot.com/_pL4cgkXrgTo/TDeoTaj6xtI/AAAAAAAAAew/mfXh4HVRO7k/s320/CAIRO1.png "

    ردحذف
  7. إضافة رائعة تم التركيب :
    www.dolars-dolars.blogspot.com

    ردحذف
  8. شكرا لمرورك أخى الكريم ؛ وبالتوفيق فى مدونتك

    ردحذف
  9. يسلمو اديك ولكن القالب كبير ياتا فى طريقه نت شان ابحث فى هاد القالب ضخم نزلتو من فوق الى تحت ومن تحت الى فوق وفى بعض الائ لم اجده فى طريقه ؟

    ردحذف
  10. إضافة رائعة شكرا على الموضوع

    ردحذف