طريقة عمل "slider" لمدونات بلوجر وبشكل رائع

طريقة عمل "slider" لمدونات بلوجر وبشكل رائع..وبخاصية jQuery 

وهذة الخاصية تعرض اهم الموضوعات الجديدة بالمدونة مما يميز موقعك او مدونتك

وامكانية التعديل علي حجم ال  "slider" بحيث يتناسب مع عرض مدونتك

معاينـــــــــــــة

1_اذهب الي التخطيط

2_اضافة ادة

3_اختــر>Html/javascript

4_الصق الكود التالـــي

<style type="text/css"> /* JavaScript Image Slider By http://www.helperblogger.com/ */ #mcis { display: none;} #sliderFrame { position: relative; width: 500px; margin: 0 auto; border:5px solid #000;} #ribbon { width: 111px; height: 111px; position: absolute; top: -4px; left: -4px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4TM1NhaeVVhQu-60IlGx0D1z9yoxSg9LKKcft8qu8wC9NN9iTfbvkxFNyJixQfbX53OCyew2kGtQzc953e6S7-c-jLG0n3GpSI2ksv-Gk4IGpiRc76P6b7IqGOfM-uoR24UMc_V05xQQ/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7;} #slider { width: 500px; height: 218px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOY8OIQx1eNzWGycWBnCJgyWqprTHwphllN8tS7zqYM4o8FoOMSAATFanDJkHkzNYwmLzvSNw-V10gZ_j1IzAJ1jP0Fr9XxGLJv4BYucWuBEc1Cvz7MhguC-Wb-BkbYmgq1bN_WJs4gnM/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999;} #slider img { position: absolute; border: none; display: none;} #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%;} div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; 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;} div.navBulletsWrapper { top: 250px; left: 190px; width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer;} div.navBulletsWrapper div { width: 11px; height: 11px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIf5s9rKcAXhaFnBPF7ziCooN2v-wcWAl7JhufGLL0o0oX6GfhC_IJWnqhxUnxK4lBr4ck9z88PqTQWT6CIr3vVrIryhMHlNRwndZDz2lyue0i7-6Mgp0VbOhSYFPAa1uDrX_l5FCHuxk/s1600/helperblogger.com-bullet.png) no-repeat 0 0; float: left; overflow: hidden; vertical-align: middle; cursor: pointer; margin-right: 11px; _position: relative;} div.navBulletsWrapper div.active { background-position: 0 -11px;} #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);} </style> <script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script> <div id="sliderFrame"> <div id="ribbon"></div> <div id="slider"> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By blooger-widgets..com"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt=""/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a> <a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a> </div></div>

      هذا اللون للتعديل علي عرض ال slider ليتناسب مع مدونتك

       الكود المظلل بهذا اللون للتعديل علي طول ال slider ليتناسب مع مدونتك

      الكود المظلل بهذا اللون لتغير صورة الموضوع بال slider

      الكود المظلل بهذ اللون لكتابة اسم الموضوع علي الصورة

      والكود المظلل بهذا اللون هو لوضع لينك الموضوع بدلاا من هذا الحرف #

واتمني ان تنال اعجابكم الاضافة

اضافة ملف"sitemap" لفهرسة مواضيع مدونات بلوجر

اضافة ملف sitemap لفهرسة مواضيع مدونات بلوجر ونشرها علي محرك البحث مما يزيد من انتشار مدونتك وشهرتة 

وكذلك نشرة علي محركات البحث المختلفة..ادخل علي ادوات مشرفي المواقع واتبع الشرح

اولاً تدخل على webmaster tools

ثم

ثم,ادخل علي التحسين واضغط علي"ملفاتsitemap"

بعد ذلك اضغط علي

ثم ضيف الملف التالي في المربع الذي سيظهر لك

‪/atom.xml?redirect=false&start-index=1&max-results=100

ثم اختار تقديم ملفsitemap

اضافة ترجمة المدونة بخاصية رائعة

بسم الله الرحمن الرحيم

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

اضغط علي الصورة التالية لتضيف الخاصية الي موقعك

تم بحمد الله

جعل الصور متحركة لمدونات بلوجر

بسم الله الرحمن الرحيم

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

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

]]></b:skin>

ثم ضع الكود التالي,قبلة مباشرة

 .post img {-webkit-transition: -webkit-transform .15s linear;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);padding: 5px 5px 5px 5px;-webkit-transform: rotate(+2deg);-moz-transform: rotate(+2deg);}
.post img:hover {-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);-webkit-transform: rotate(-1deg);-moz-transform: rotate(-1deg);}

احفظ القالب وهذا كل شيء 

اضافة مواضيع ذات صلة بخاصية jqueery

بســـم الله الرحمن الرحيــــم

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

اتبع التالي:

ادخل علي "قالب",ثم تحريرhtml,ثم توسيع القالب والبحث عن الكود التالي

</head>

ثم,ضع الكود التالي فوقة مباشرةً

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float: center;
text-transform: none;
height: 100%;
min-height: 100%;
padding-top: 5px;
padding-left: 5px;
font-size
}

#related-posts h2 {
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;
Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}

#related-posts a {
color: black;
}

#related-posts a:hover {
color: black;
}

#related-posts a:hover {
background-color: #6E6E6E;
color: #ffffff;
}
</style>
<script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sSqzQQQEbfgrVwYXXZc_J2IZzxJXuXxkae_943t0qwY-1JrAz0KMglxQbOIWl4NshuJUmlwmtb35DA2lRot3fLZnHyUSRc_QqFW1tKmZErhf1PpDd0cz-Ba7264YvkRKK7dY4-5LwUU/s400/noimage.png&quot;; var maxresults=5; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;&quot;; </script>
<script src='http://code.helperblogger.com/hb-related-posts.js' type='text/javascript'/>> 
<!-- remove -->
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

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

<div class='post-footer-line post-footer-line-1'/>

ثم,ضع الكود التالي فوقة مباشرة

 <!-- Related Posts with Thumbnails Code Start--><!-- remove --><b:if cond='data:blog.pageType == "item"'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'></b:if><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script></div><div style='clear:both'/><!-- remove --></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a></b:if></b:if><!-- Related Posts with Thumbnails Code End-->

واحفظ القالب وشاهد الاضافة 

خاصية "أخر المواضيع"بصور متحركة رائعة

بسم الله الرحمن الرحيــم

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

عليك بأتباع التعليمات التالية:
1_اضغط علي"قالب",تم تحريرHtml
2_قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).
تذكير:لا تنسى أخي المدون أن تأخد نسخة إحتياطية لمدونتك تجنبا لأي أخطاء.

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

</head>

ثم ضع الكود التالي فوقة مباشرةً

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

الان احفظ القالب,ثم ادخل علي التخطيط ,ثم اضافة أداة جديد ,ثم Html/javascript

وضع الكود التالي..

<style type="text/css" media="screen"> <!-- /* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */ #helperblogger-widget { overflow: hidden; margin-top: 5px; padding: 0px 0px; height: 385px; } #helperblogger-widget ul { width: 295px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px; } #helperblogger-widget li { width: 282px; padding: 5px 5px; margin: 0px 0px 5px 0px; list-style-type: none; float: none; height: 80px; overflow: hidden; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFnHRJZav_gT3dI4PanqlI8LYgYSVnMJrwwvSNFh_ugfFq0ezGjc_HHKtkvgds1VLB9OiLL98Pt1XOdenc_wnLlYog_20FPKkn-UL00_PXkPff8LCUiNJ9ezwdN4a1UUjcbSaTiEGi_s/s1600/helperblogger.com-post.jpg) repeat-x; border: 1px solid #ddd; } #helperblogger-widget li a { text-decoration: none; color: #4B545B; font-size: 15px; height: 18px; overflow: hidden; margin: 0px 0px; padding: 0px 0px 2px 0px; } #helperblogger-widget img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; } #helperblogger-widget img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7); } #helperblogger-widget img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); } .spydate { overflow: hidden; font-size: 10px; color: #0284C2; padding: 2px 0px; margin: 1px 0px 0px 0px; height: 15px; font-family: Tahoma,Arial,verdana, sans-serif; } .spycomment { overflow: hidden; font-family: Tahoma,Arial,verdana, sans-serif; font-size: 10px; color: #262B2F; padding: 0px 0px; margin: 0px 0px; } /* ========== Scrolling Recent Posts Widget By helperblogger.com ======== */ --> </style> <script language='JavaScript'> imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_7pKjbhZcLeBkb9ZR7tKrXiyMVbxLHVYUVtPcNXtHYXzgoF8RVGSUBSOxCkWDCQ27CiKYnjSSuhlOAh5OumYXIJpXYzhbNMMWuGvZUJJ3m_2ayESk341r8xgAjw-7Ad_Ug5cvLcrXfcM/s1600/no-thumbnail.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_7pKjbhZcLeBkb9ZR7tKrXiyMVbxLHVYUVtPcNXtHYXzgoF8RVGSUBSOxCkWDCQ27CiKYnjSSuhlOAh5OumYXIJpXYzhbNMMWuGvZUJJ3m_2ayESk341r8xgAjw-7Ad_Ug5cvLcrXfcM/s1600/no-thumbnail.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_7pKjbhZcLeBkb9ZR7tKrXiyMVbxLHVYUVtPcNXtHYXzgoF8RVGSUBSOxCkWDCQ27CiKYnjSSuhlOAh5OumYXIJpXYzhbNMMWuGvZUJJ3m_2ayESk341r8xgAjw-7Ad_Ug5cvLcrXfcM/s1600/no-thumbnail.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_7pKjbhZcLeBkb9ZR7tKrXiyMVbxLHVYUVtPcNXtHYXzgoF8RVGSUBSOxCkWDCQ27CiKYnjSSuhlOAh5OumYXIJpXYzhbNMMWuGvZUJJ3m_2ayESk341r8xgAjw-7Ad_Ug5cvLcrXfcM/s1600/no-thumbnail.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_7pKjbhZcLeBkb9ZR7tKrXiyMVbxLHVYUVtPcNXtHYXzgoF8RVGSUBSOxCkWDCQ27CiKYnjSSuhlOAh5OumYXIJpXYzhbNMMWuGvZUJJ3m_2ayESk341r8xgAjw-7Ad_Ug5cvLcrXfcM/s1600/no-thumbnail.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 50; thumbheight = 50; fntsize = 15; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://www.helperblogger.com/"; limitspy=4; intervalspy=4000; </script> <div id="helperblogger-widget"> <script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script> </div>

وبعد زلك استبدل هذا الرابط برابط مدونتك 
http://www.helperblogger.com

ثم اضغط حفظ

اضافة خاصية اخر المواضيع بشكل متحرك ورائع

بسم الله الرحمن الرحيم

اليوم سأشرح خاصية اضافة خاصية "اخر المواضيع"بشكل متحرك ورائع وهذة الخاصية تتيح لمستخدين المدونة التعرف علي اخر المواضيع التي قمت بوضعها علي المدونة 

معاينة الخاصية

لاضافة هذة الخاصية ادخل علي "التخطيط",ثم اضافة اداة ثم ,تحريرhtml ,ثم انسخ الكود التالي:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--


#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqAaKVN8citAJD6ZuipcG1vCGEVujlA7AXSVO5O-qCDYW_0grrkUD0wD5_xsOOnFeBNiNfylGLLk0VD_fJb3UwX3rz7IeSaVYPcWVdvSpB4apO0nttbSuemWMlRTnGFuhS2ADZEBp0Lggy/s1600/bdlab-blogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}


#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}


.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}


-->
</style>


<script language='JavaScript'>


imgr = new Array();


imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sSqzQQQEbfgrVwYXXZc_J2IZzxJXuXxkae_943t0qwY-1JrAz0KMglxQbOIWl4NshuJUmlwmtb35DA2lRot3fLZnHyUSRc_QqFW1tKmZErhf1PpDd0cz-Ba7264YvkRKK7dY4-5LwUU/s400/noimage.png";


imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sSqzQQQEbfgrVwYXXZc_J2IZzxJXuXxkae_943t0qwY-1JrAz0KMglxQbOIWl4NshuJUmlwmtb35DA2lRot3fLZnHyUSRc_QqFW1tKmZErhf1PpDd0cz-Ba7264YvkRKK7dY4-5LwUU/s400/noimage.png";


imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sSqzQQQEbfgrVwYXXZc_J2IZzxJXuXxkae_943t0qwY-1JrAz0KMglxQbOIWl4NshuJUmlwmtb35DA2lRot3fLZnHyUSRc_QqFW1tKmZErhf1PpDd0cz-Ba7264YvkRKK7dY4-5LwUU/s400/noimage.png";


imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sSqzQQQEbfgrVwYXXZc_J2IZzxJXuXxkae_943t0qwY-1JrAz0KMglxQbOIWl4NshuJUmlwmtb35DA2lRot3fLZnHyUSRc_QqFW1tKmZErhf1PpDd0cz-Ba7264YvkRKK7dY4-5LwUU/s400/noimage.png";


imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_sSqzQQQEbfgrVwYXXZc_J2IZzxJXuXxkae_943t0qwY-1JrAz0KMglxQbOIWl4NshuJUmlwmtb35DA2lRot3fLZnHyUSRc_QqFW1tKmZErhf1PpDd0cz-Ba7264YvkRKK7dY4-5LwUU/s400/noimage.png";
showRandomImg = true;


boxwidth = 255;


cellspacing = 6;


borderColor = "#232c35";


bgTD = "#000000";


thumbwidth = 70;


thumbheight = 70;


fntsize = 12;


acolor = "#666";


aBold = true;


icon = " ";


text = "comments";


showPostDate = true;


summaryPost = 40;


summaryFontsize = 10;


summaryColor = "#666";


icon2 = " ";


numposts = 10;


home_page = "http://bloggerstyl4u.blogspot.com/";


limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://safir85.ucoz.com/bdlab-blogspot/24work/recent-posts/animated_recent_posts.js' type='text/javascript'></script>
</div>

ملحوظة: هناك بعض التعديلات يجب ان تفعلها في الكود قبل حفظة:
1_تغير هذا العنوان الي عنوان مدونتكhome_page = "http://bloggerstyl4u.blogspot.com/";
2_ لتغير عدد المواضيع الذي تريدة ان يظهر في هذة الاداة numposts = 10;

3_للتحكم في حجم الصورةthumbwidth = 70;

thumbheight = 70;

ثم اضغط "حفظ" ومبروك عليك الاضافة