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

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

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

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

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

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

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

]]></b:skin>

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

#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);}

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

</body>

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

<div id="float_corner"><a href="رابط المراد نقل الزائر اليه"><img src="رابط الصورة " border="0" /></a></div>

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

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

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

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

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

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

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

صفحة المدونة 

تابع الشرح

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

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

]]></b:skin>

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

#myslides{

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

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

</head>

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

<!-- 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&#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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lwhgZU-ojVd697O9rqGcCaBboQKyXTdJRlb3vq8N28SFuCEPx0Znbmp4_xnAqlvHefIjAHgV_3fCKyXCw3vI73mnF1ezNkmd_fWJgc3BEOKd4gYl70MqQV-16CWOqC79SoRrkosuyUQ/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8Xfa9kR5XGyJiclXVOKQq-ThLqVOb0M1XL0IAI5zWE79CIRTYp_Mjm5eylY3DxNCk9Q-PRxb2zicjSlvEnOMF8rqDyRNO3xcbe6Y2DCOx3Tj8vlTPB_9Fq9f4cF0_j3pDK9xJtSEOdk/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>

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

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

<!-- 1st Template -->
<div class="panel">
<a href="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"> <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="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"> <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="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"> <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="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"> <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="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"> <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="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"> <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="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"> <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="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"> <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="http://elmalnews.blogspot.com" 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="http://elmalnews.blogspot.com" 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="http://abu-iyad.blogspot.com" 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="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"> <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>

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

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

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

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

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

Posted in: قسم الوصول الى مدونة احترافية