اضافة صورة ثابتة اعلى مدونة بلوجر

بسم الله والصلاة على رسول الله محمد واله وصحبه وسلم
مرحبا بكل اعضاء وزوار مدونة كيف تربح المال من النت اتمنى ان تكونو فى تمام الصحة والعافية

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

طريقة تركيب الاضافة 

بالدخول على لوحة تحكم المدونة 

ثم القالب ثم توسيع قوالب عناصر واجهة المستخدم 

ثم ابحث عن الكود التالي 

]]>

ثم اضف الكود التالي فوق الكود السابق

#float_corner {position:fixed;_position:absolute;top:0px;Right:0px;clip:inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

ثم ابحث عن  الكود التالي 

ثم اضف الكود التالي قبل الكود السابق 

رابط المراد نقل الزائر اليه">رابط الصورة " border="0" />

الان عليك تعديل مالون:-

top وهو المكان الذي ترغب بوضع الصورة بالمدونة والقصد به اعلى المدونة اذا اردت تغييرها الى اسفل المدونة غيرها الى bottom

right مكان الصورة على يمين المدونة اذا ترغب بوضعها يسار المدونة غيرها الى left

رابط المراد نقل الزائر اليه غيرها الى رابط الذي تريد الزائر الانتقال اليه عند الضغط على الصورة

رابط الصورة غيرها الى رابط الصورة التي تريد عرضها 

ممكن نجعل الاضافة اكثر حيوية واثارة

باضافة صورة متحركة فى اعلى 

صفحة المدونة 

تابع الشرح

حيث تمثل هذه الصور مجموع المواضيع الذي تحتوي عليها المدونة ،حيث أنها تعطي جمالية أكثر للمدونة ولها دور مهم في عرض محتويات المدونة وتسهل البحث على الزوار ،بدون إطالة عليكم ،لنذهب إلى التطبيق :

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F ).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

]]>

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

#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAtm0TfCJ027Kixwz368Gh_R0CAQO3Z91XFZCNrQiCuGeJi7GETeHZGQb6Fj1rhdF-jWs6nYeUVQ8kb46mnWy_HW6Qoe4knt5UU_H1uV6_8x4oDgnFwwkbiVzos1fMTKYSXanAs9icTQ/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;
}

لتغير الخلفية،قم بتغير الرابط باللون الاحمر حسب رغبتك
والآن قم بالبحث عن الكود التالي:

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

الروابط ذات اللون الاحمر تمثل صورة السهم الى اليسار و اليمين
Speed:1500 : سرعة تحرك الصور
moveby:1 : عدد الصور التي يتخطاها عند تحرك الصور
هذه القيم يمكنك تغييرها حسب رغبتك
قم بحفظ القالب ثم انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

http://elmalnews.blogspot.com/search/label/%D9%86%D8%B5%D8%A7%D8%A6%D8%AD%20%D9%84%D9%84%D9%85%D8%B3%D8%AA%D9%87%D9%84%D9%83?&max-results=5" target="blank" title="Two Column Denim Template"> http://pics.imagup.com/ano1/1278000007.png" height="110" />

http://elmalnews.blogspot.com/search/label/%D9%83%D9%8A%D9%81%20%D8%AA%D8%B5%D9%86%D8%B9?&max-results=5" target="blank" title="Simple Blog Writing Template"> http://pics.imagup.com/ano1/1278001914.png" height="110" />

http://elmalnews.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5" target="blank" title="Lenomag Blogger Template"> http://pics.imagup.com/ano1/1278001116.jpg" height="110" />

http://elmalnews.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%20%D8%B9%D8%AC%D8%A7%D8%A6%D8%A8?&max-results=5" target="blank" title="Money Blogger Template"> http://pics.imagup.com/ano1/1278001691.png" height="110" />

http://elmalnews.blogspot.com/search/label/%D8%BA%D8%B1%D8%A7%D8%A6%D8%A8%20%D9%88%20%D8%B9%D8%AC%D8%A7%D8%A6%D8%A8?&max-results=5" target="blank" title="Digital Statement Blogger Template"> http://pics.imagup.com/ano1/1278002070.jpg" height="110" />

http://elmalnews.blogspot.com/search/label/%D8%A7%D9%84%D8%B1%D8%A8%D8%AD%20%D9%85%D9%86%20%D8%A7%D9%84%D8%A5%D9%86%D8%AA%D8%B1%D9%86%D8%AA?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> http://pics.imagup.com/ano1/1278002754.png" height="110" />

http://elmalnews.blogspot.com/search/label/%D8%A5%D8%B6%D8%A7%D9%81%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> http://pics.imagup.com/ano1/1278003649.png" height="110" />

http://elmalnews.blogspot.com/search/label/%D8%A7%D9%84%D8%AA%D8%BA%D8%B0%D9%8A%D8%A9%20%D9%88%D8%A7%D9%84%D8%B5%D8%AD%D8%A9?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> http://pics.imagup.com/ano1/1278003860.png" height="110" />

http://elmalnews.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> http://pics.imagup.com/ano1/1278004864.png" height="110" />

http://elmalnews.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> http://pics.imagup.com/ano1/1278094671.png" height="110" />

http://abu-iyad.blogspot.com" target="blank" title="Orkut Theme Blogger Template"> http://pics.imagup.com/ano1/1278094825.png" height="110" />

http://elmalnews.blogspot.com/search/label/%D8%A7%D9%84%D8%A3%D8%AB%D8%A7%D8%AB%20%D9%88%D8%A7%D9%84%D8%AF%D9%8A%D9%83%D9%88%D8%B1?&max-results=5" target="blank" title="Orkut Theme Blogger Template"> http://pics.imagup.com/ano1/1278095024.png" height="110" />

وأخيرا قم بتبديل الروابط ذات اللون الاحمر بروابط مدونتك والروابط ذات اللون الازرق بروابط الصور اتمنى ان تنال اعجابكم

 فى نهاية موضوعنا لمعرفة الموضوع القادم ولكى يصل اليكم كل 

جديد من موضوعات المدونة لاتنسو التسجيل والانضمام للقائمة 

البريدية للمدونة

مع تحيات مدونة كيف تربح المال من النت