||✿تسابيح ورد الأرجوان✿||دروس تعليمية لعمل مدونة على Blogger

[بيسان المسلمة 18]

 

 

 

لتحميل تصميم هذا القالب للتعديل عليه

مع مراعاة مكان الدانتيل وعدم تحريكه لانه سيؤدي

الى عدم تطابقه مع المقطع الاخر

:: من هنا::

 

يمكنكن تصميم اشكال والوان اخرى طبعا

 

اتمنى ان اكون وفيت الشرح حبيباتي

وهذا ما قدرت علييه

واسفة ان قصرت في الشرح او التوضيح

هي بالبداية تشوفوها صعبة

بس بمرور الوقت والتطبيق تصير سهلة جدا جدا :))

واي سؤال انا حاضرة

 

وأنتظروني في الدرس القادم ان شاء الله

 

وأستودعكن الله

 

 

 

 

 

 

 

 

 

وعليكم السلام حبيبتي محبة بارك الله فيك هلا أعدتي تعديل هذا الرابط كي أستطيع تغيير الشرائط ومطابقتها مع تصميمي جزاك الله خيرا

[المحبـــة لله 972]

انا تحت امرك حبيبتي

وسأعلمك كل ما أعرفه ان شاء الله

 

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

بل يمكن تركيبها بأي موديل وهي عبارة عن (( كود سلايد شو ))

وكنت سأدرج درس خاص به ..لكن لضيق وقتي لم انزله لحد الان

ولأجلك حبيبتي سأنزله قريبا ان شاء الله

 

ويعجبني تحمسكِ كثيرا ^_^

[المحبـــة لله 972]

حبيبتي الرابط يعمل فقط انتظري عداد الثواني

[بيسان المسلمة 18]

حبيبتي الرابط يعمل فقط انتظري عداد الثواني

 

جزاك الله خيرا

لكن بعد النزول عن الخانة يطلعلي "acces refusé" أي لا استطيع الولوج والتحميل

[المحبـــة لله 972]

سأرفعه لك على موقع اخر ~ أنتظريني

[المحبـــة لله 972]

تفضلي حبيبتي

http://www.gulfup.com/?PDuKba

[المحبـــة لله 972]

ما أخبارك يا بيسانة @

بيسان المسلمة

[المحبـــة لله 972]

درسنا اليوم جميل جدا

عن أضافة جميلة لقالب مدونتنا

وهو اضافة سلايد شو لمجموعة صور

تعرض بشكل جميل

كما هو في هذه المدونة

http://tswardalurjuwan.blogspot.com/

ولنبدأ العمل ...

1)) نفتح لوحة تحكم مدونتنا ونذهب الى layout

ثم نذهب الى Add a Gadget

ثم HTML

2)) تظهر لنا نافذة

ننسخ الكود التالي:

<div dir="ltr" style="text-align: center;" trbidi="on">
<style type="text/css">
/* alb33dani.blogspot.com */
#sliderFrame {position:center;width:650px;margin: 0 auto 40px;}[/center]
#slider {
width:650px;height:306px;/* Make it the same size as your images */
background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin: 0 auto;/*make the image slider center-aligned */
box-shadow: 0px 0px 0px #191919;
}
#slider img {
position:absolute;
border:none;
display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:center;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left: 0px;
bottom:15px;
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:20px; left:10px; /* Its position is relative to the #slider */
width:400px;
background:none;
padding-center:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(http://3.bp.blogspot.com/-zGuZKeJA8QM/Usgr02sgOgI/AAAAAAAADlI/0HyY0j4CpEE/s1600/bullet2.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider
{
transform: translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
}
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
</div>
<div id="sliderFrame" style="font-size: 17px;">
<div id="slider">
<a href=" #"><img alt="" src=" PICURE LINK 1" /></a>
<a href=" #"><img alt="" src=" PICURE LINK 2" /></a>
<a href=" #"><img alt="" src=" PICURE LINK 3" /></a>

[center]
</div>
</div>

ونضع رابط الصورة بدل الكتابة باللون الاحمر في نهاية الكود

PICURE LINK 1= رابط الصورة الاولى

PICURE LINK 2= رابط الصورة الثانية

PICURE LINK 3= رابط الصورة الثالثة

(( طبعا لم يظهر اللون في الكود بالأعلى ))

لذا حمليه من هنا

code slideshow.doc

28.5كيلو

0 عدد مرات التحميل

وهذا كمثال لرابط الصورة

http://1.bp.blogspot.com/-ZseenrEKOY8/VIM-Fo10lVI/AAAAAAAAFDA/eRjIJKduqhk/s1600/7.png

ولاضافة صورة رابعة وخامسة وسادسة للسلايد شو نعمل نسخ ولصق للكود التالي

<a href=" #"><img alt="" src=" PICURE LINK 1" /></a>

وذلك في الفراغ قبل كود </div>

(( علما أن حجم الصورة في هذا السلايد شو))

هو 650 بيكسل عرض

306 بيكسل طول

يعني صممي صورة بنفس هذه المقاسات

http://1.bp.blogspot...qhk/s1600/7.png

ثم نعمل SAVE للعمل وستنغلق النافذة تلقائيا

3)) ونرجع لصفحة الـ Layout

ونسحب كود HTML الى فوق نافذة الرسال

لتصبح هكذا

ونعمل حفظ للترتيب save arrangement

ونفتح مدونتنا وسنجد سلايد شو جميل

ممكن ان نعرض به جديد المدونة

او ايات قرآنية

أو كلمات ودعوات ...ألخ

ولا أحلل أبدا استخدام السلايد شو فيما لا يرضي الله

اللهم أني بلغت اللهم فأشهد

واي استفسار او عقبات أطرحوه هنا على طول

code slideshow.doc

[المحبـــة لله 972]

@

بيسان المسلمة

تم أدراج درس السلايد شو حبيبتي

[بيسان المسلمة 18]

ما أخبارك يا بيسانة @

بيسان المسلمة

 

 

حبيبتي محبة جزاك الله كل خير فضلك هذا لن انساه ما حييت والله اصابني الاحراج لكثرة اسئلتي خاصة اني اردت ان اغير الفواصل الموجودة في القالب بفواصل كنت قد صممتها حاولت حاولت ولكن لم استطع الله المستعان

[بيسان المسلمة 18]

@

بيسان المسلمة

تم أدراج درس السلايد شو حبيبتي

 

نعم حبيبتي اطلعت عليه جزاك الله خيرا لي عودة ان شاء الله بعد المحاولة

[المحبـــة لله 972]

ما أخبارك يا بيسانة @

بيسان المسلمة

 

 

حبيبتي محبة جزاك الله كل خير فضلك هذا لن انساه ما حييت والله اصابني الاحراج لكثرة اسئلتي خاصة اني اردت ان اغير الفواصل الموجودة في القالب بفواصل كنت قد صممتها حاولت حاولت ولكن لم استطع الله المستعان

 

حبيبتي لا داعي للاحراج فانا هنا لمساعدتكن

وساعلمك كيف تبدلين الفواصل في الرد التالي

[المحبـــة لله 972]

حبيبتي بيسان الغالية

أولا أفتحي محرر الHTML لقالبك وأضغطي CTRL+F من الكيبورد

 

 

وفي خالنة البحث التي ظهرت لك فوق أبحثي عن الرابط التالي :

http://2.bp.blogspot.com/-BWs1ZKYh8Fw/U39JoVbZrDI/AAAAAAAAAHY/pV6GXMUF29o/s1600/sidebar_header_bg.png

 

وهو لتغير الفواصل الصغيرة على جانب المدونة

 

أستبدليه برابط صورتك وأنتبهي لا تحذفي اي شيء اخر وإلا سيظهر خطأ في القالب

 

والآن أبحثي عن الرابط التالي

http://4.bp.blogspot.com/-PLZzH5R7P-4/U35073SGCtI/AAAAAAAAAGg/uO_vyM5bnr0/s1600/post_header_bg1.png

 

وهو الفاصل الخاص بالمشاركات

 

أستبدليه برابط صورتك وأنتبهي لا تحذفي اي شيء اخر وإلا سيظهر خطأ في القالب

 

وانتهى

 

وفقك الله واي سؤال اخر لا تترددي :)

[بيسان المسلمة 18]

أنقظيني يا حبيبــــــــــــــــــــــــــــــــة ....... السلايد شو طلع في الصفحة لكن كان هناك مشكل صغنتوت انه طول السلايد لا يزيد عن 0.5 سم يعني الصورة لا تظهر واضحة في الصفحة

سي البلوق اتعبني لكن وراه وراه والزمن طويل ههههه

تم تعديل 14 ديسمبر, 2014 بواسطة بيسان المسلمة

[المحبـــة لله 972]

ليش طولة نص سم هل وضعتيه في مكانه الصحيح ؟؟

 

 

 

ونعمل حفظ للترتيب save arrangement

 

 

 

وانسخي الكود الذي في المرفق ولا تغيري شيء غير روابط الصور

[بيسان المسلمة 18]

ايه اتبعت الخطوات بحذافيرها ولم اقم بتغيير سوى كلمة picture link برابط الصورة

[المحبـــة لله 972]

حبيبتي خذي صورة للسلايد شو لكي اراه حتى اعرف اين الخلل

:)

[بيسان المسلمة 18]

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

حبيبتي هذا كود السلايد

 

---------------------------------

<div dir="ltr" style="text-align: center;" trbidi="on">

<style type="text/css">

/* alb33dani.blogspot.com */

#sliderFrame {position:center;width:650px;margin: 0 auto 40px;}

[/center]

#slider {

width:650px;height:306px;/* Make it the same size as your images */

background:#fff url(

http://4.bp.blogspot...600/loading.gif) no-repeat 50% 50%;

position:relative;

margin: 0 auto;/*make the image slider center-aligned */

box-shadow: 0px 0px 0px #191919;

}

#slider img {

position:absolute;

border:none;

display:none;

}

/* the link style (if an image is wrapped in a link) */

#slider a.imgLink {

z-index:2;

display:none;position:center;

top:0px;left:0px;border:0;padding:0;margin:0;

width:100%;height:100%;

}

/* Caption styles */

div.mc-caption-bg, div.mc-caption-bg2 {

position:absolute;

width:100%;

height:auto;

padding:0;

left: 0px;

bottom:15px;

z-index:3;

overflow:hidden;

font-size: 0;

}

div.mc-caption-bg {

background-color:black;

}

div.mc-caption {

font: bold 14px/20px Arial;

color:#EEE;

z-index:4;

padding:10px 0;

text-align:center;

}

div.mc-caption a {

color:#FB0;

}

div.mc-caption a:hover {

color:#DA0;

}

/* ------ built-in navigation bullets wrapper ------*/

div.navBulletsWrapper {

top:20px; left:10px; /* Its position is relative to the #slider */

width:400px;

background:none;

padding-center:20px;

position:relative;

z-index:5;

cursor:pointer;

}

/* each bullet */

div.navBulletsWrapper div

{

width:11px; height:11px;

background:transparent url(

http://3.bp.blogspot...600/bullet2.png) no-repeat 0 0;

float:left;overflow:hidden;vertical-align:middle;cursor:pointer;

margin-right:11px;/* distance between each bullet*/

_position:relative;/*IE6 hack*/

}

div.navBulletsWrapper div.active {background-position:0 -11px;}

/* --------- Others ------- */

#slider

{

transform: translate3d(0,0,0);

-ms-transform:translate3d(0,0,0);

-moz-transform:translate3d(0,0,0);

-o-transform:translate3d(0,0,0);

}

</style>

<script src="

http://dimpost.googl...mage-slider.js" type="text/javascript"></script>

</div>

<div id="sliderFrame" style="font-size: 17px;">

<div id="slider">

<a href=" #"><img alt="" src="

http://im76.gulfup.c...com/RU7e8B.jpg" /></a>

<a href=" #"><img alt="" src="

http://im76.gulfup.c...com/cP7XpE.png" /></a>

<a href=" #"><img alt="" src="

http://im76.gulfup.c...com/nfvIOu.jpg" /></a>

 

 

</div>

</div>

--------------------------------------------

وهذه صورة لما يظهر في الصفحة

[المحبـــة لله 972]

ساراجع الكود وأجيبك يا غالية

فكل مشكلة ولها حل

[المحبـــة لله 972]

 

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

أو السلايد شو بدون ظل وهو الانسب في حالة التصاميم بنفس لون القالب كمدونتي

 

في المرفقات للتحميل

 

 

 

 

وكما ان صورك ليست بحجم الصور الخاصة بالسلايد شو

 

 

 

فأرجعي للدرس لأخذ المقاسات الصحيحة حبيبتي

 

 

سلايد شو بظل.txt

سلايد شو بدون ظل.txt

سلايد شو بظل.txt

سلايد شو بدون ظل.txt

[بيسان المسلمة 18]

جزاك الله خيرا ساقوم بالتجربة وارجعلك ان شاء الله

[بيسان المسلمة 18]

السلام عليكم حبيبتي محبة الحمد لله السلايد شو نجح معي هالمرة

 

جزاك الله خيرا

[المحبـــة لله 972]

الحمد لله الذي بنعمته تتم الصالحات

[بيسان المسلمة 18]

شكرا لك أخية و جزاك الله الفردوس الأعلى

طيب هل استطيع أن أقول بأنني تعلمت كل شيء عن المدونة أم أنه لازال هناك دروس أخرى ستضيفينها لنا :D

[المحبـــة لله 972]

وجزاك الفردوس الاعلى حبيبتي

بقت دروس بسيطة ان شاء الله وهي أكسسوارات فقط للمدونة :))

سأضيف الدرس متى ما تمكنت ان شاء الله

 

ولما تكملي مدونتك خلينا نشوفهه ^_^

ام هي مجرد لتتعلمي ؟؟