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

شرح التركيب

اذهب الى لوحة التحكم>>قالب>>تحرير HTML

قم بالبحث عن هذا الكود :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:include data='post' name='comments'/>

</b:if>

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

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

الان ابحث عن

]]></b:skin>

ثم اضف قبله الكود:

.comments{clear:both;margin-top:10px;margin-bottom:0;line-height:18px;font-size:13px}.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:right}.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}.comments .comments-content .inline-thread{padding:0}.comments .comments-content .comment-thread{margin:8px 0}.comments .comments-content .comment-thread:empty{display:none}.comment-replies{margin-top:1em;margin-right:40px;background:#fff}.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}.comments .comments-content .comment:first-child{padding-top:16px}.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}.comments .comments-content .comment-body{position:relative}.comments .comments-content .user{font-style:normal;font-weight:normal}.comments .comments-content .user a{color:#fefefe;font-weight:normal;text-decoration:none}.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}.comments .comments-content .datetime a{color:#fefefe;font-size:12px;float:left;text-decoration:none}.comment-content{margin:0 0 8px;padding:0 5px}.comment-header{font-size:18px;background-color:rgb(248, 211, 61);border-bottom:1px solid #fec648;padding:3px}.comments .comments-content .owner-actions{position:absolute;left:0;top:0}.comments .comments-replybox{border:none;height:230px;width:100%}.comments .comment-replybox-thread{margin-top:0}.comments .comment-replybox-single{margin-top:5px;margin-right:48px}.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}.comments .thread-toggle{cursor:pointer;display:inline-block}.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}.comments .thread-chrome.thread-collapsed{display:none}.comments .thread-toggle{display:inline-block}.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-left:4px}.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTqI3_9pFX5bFM9-Z2E5rpsmTUxTRft6UtJ_NIjYNdw9XhU1cR-KM8tM5LhRVS881sX59FEGv5w0uEVSyuAMoGxtFq5wwHbvoM8WnyTd6g9Ox2scw8fxcRpEt-8VqVbycn5p0pm1kmrU/s51/arrow.png) top left no-repeat;float:right;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}.comments .comment-block{margin-right:65px;position:relative;border:2px solid rgb(184, 184, 182);}@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-right:0}}

اقرأ المزيد dookaladookala

يعتبر موضوع اليوم مُهِمًّا جدا وذلك لأنه جاء بأحسن طريقة للتخلص من بطئ تحميل صفحات المدونات و المواقع، و الذي يعاني منه أغلب المدونين خصوصا الذين يستعملون الصور.

هذه الحل هو عبارة عن إضافة مكونة من كود jQuery يطيق عليها اسم "jQuery Lazy Load"، وتقوم هذه الإضافة على تحميل ما يظهر في المتصفح أولاً من عناصر وصور، ثم بعد ذلك يتم تحميل باقي المحتويات بمجرد النزول إلى أسفل الصفحة بكيفية متسلسة.

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

لتركيب إضافة jQuery Lazy Load اتبع الخطوات التالية :

1- اتجه إلى لوحة تحكم البلوجر الخاصة بك و اضغط على "تصميم" من القائمة الجانبية ثم على "تحرير HTML".
* ولا تنسى أن تقوم بحفظ نسخة احتياطية لقالبك *

2- أنقر على "Ctrl + F" و ابحث عن </head> ثم انسخ فوقه الكود التالي :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdKJ5SeaL0Hdb0-fi2sXhfvS27iaA9UAoerzOXIblbtElVrsDfOAPYMoaY4heZAsgE-UBAIqbJ9K6bD28xTZ72F4p4LatvRhnpaB6Erzsyf7UhnVVeIMgx16CsLukVySKh7w75DVvc2Uk/&quot;
});
});
</script>

3- نقوم بالتعديل على الكود حسب الرغبة بالشكل الآتي :

* إن كنت تستعمل مكتبة jQuery فيما سبق على مدونتك، فإنك لست مجبراً على نسخ السطرالملوَّن بالأحمر.

* كما هو موضح في السطر الملون بالأزرق فالإضافة تم تطبيقها على img (أي الصور فقط).
و لتطبيقها عنصر الموضوع أو التدوينة أو أي عنصر آخر، فقط يكفي أن تضيف class أو id العنصر المراد التطبيق عليه، وذلك حسب المثال الآتي :
 
مثال على البلوجر نستبدل السطر الأزرق بما يلي :

jQuery('.post img').lazyload

مثال على المنتديات نستبدل السطر الأزرق بما يلي :

jQuery('.tborder img').lazyload

4- وفي الأخير لا تنسى حفظ القالب.


*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...

اقرأ المزيد dookaladookala

كود رمضان كريم لمدونات بلوجر

كود رمضان كريم لمدونات بلوجر

تحميل الكود

اذهب الى التخطيط -اضافة اداة -اداة HTML

ثم ضيف الكود

<!-- Start Code Ramadan by Ahmed --> <div align="center"> <table border="0" width="900" cellspacing="0" cellpadding="0"> <tr> <td width="" height=""><div style="float:top right; position:absolute; overflow:visible; left:210px; top:43px; height:192px; width:144px z-index: 9999;"> <img src="//img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 144px; width: 192px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="obj2" data-original-id="obj2" /> </div> </td></tr> </table> </div> <!-- End Code Ramadan by Ahmed -->

post

اقرأ المزيد dookaladookala

السلام عليكم اعزائي الكرام زوار مدونة بنكو ، اليوم اقدم لكم اضافة ترفيهية من اضافات البلوجر ، وهي عبارة عن رجل آلي يتجول في المدونة ، لن اطيل عليكم اتمنى ان تروق اعجابكم هذه الاضافة

• للمزيد من الاضافات : 

اضغط هنا

طريقة التركيب:

1. إذهب إلى خيار تخطيط

2. قم بإضافة أدات جديدة كما مبين في الصورة :

3. قم بنسخ الكود الموجود أسفل التدوينة و ضعه في المكان المناسب كما مبين في الصورة :

الكود:

<div style="position: fixed; bottom: 5px; width: 100%;"> <marquee direction='left' id='suster-ngesot-gue-galau-luar' scrollamount='7'> <img id='gbr-suster-ngesot-gue-galau' src='http://im27.gulfup.com/2012-09-14/1347653484401.gif'/></marquee> </div>

اقرأ المزيد dookaladookala

حصريا إضافة إتصل بنا بتقنية Css3 بشكل جذاب لبلوجر ووردبريس

حصريا إضافة إتصل بنا بتقنية Css3 بشكل جذاب لبلوجر 

ووردبريس 

نظرا للنقص الذي يعرفه بلوجر في مجال الإضافات العربية أو المعربة إرتأيت أن أقدم لزوار المدونة الأعزاء

إضافة إتصل بنا لمدونات بلوجر وحتى ووردبريس بتقنية Css3 بشكل رائع وأنيق
الإضافة عبارة عن برقية رسائل بمجرد وضع مِشر الفأرة عليها تظهر بيانات الإتضال بصاحب الموقع أو المدونة

معاينة إضافة تواصل معنا العربية لبلوجر وووردبريس :

كيفية التركيب على بلوجر

قم بتحميل الملف الذي يحتوي على كود الإضافة من هنا

قم بتعديل الإيميل وإسم المدونة بما يناسبك في الملف الذي حملته

أدخل على لوحة تحكم بلوجر 

أضف أداة Html/javascript

إنسخ الكود وقم بلصقه

تنبيه هام : يمنع حذف الحقوق أي :(Get This Widget)

                                                                    بالتوفيق للجميع

 

اقرأ المزيد dookaladookala

حصريا إضافة زر عودة إلى الأعلى back to top إلى مدونة بلوجر+19شكل رائع

حصريا إضافة زر عودة إلى الأعلى back to top إلى مدونة 

بلوجر+19شكل رائع

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

اليوم سوف نتعلم خدعة سهلة ومهمة جدا ، خصوصا إذا كان لديك الكثير من المحتوى على صفحات Blogger
 وإذا كنت تريد مدونتك الخاصة بك أن تكون سهلة الاستخدام للزائرين
 ومن ناحية أخرى هذه الإضافة تساهم في سرعة تصفح الصفحة
أي إذا كان الزائر في أسفل الصفحة فيكفي أن يضغط على زر إلى الأعلى بسهولة وانسيابية
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
أولا نأخذ نسخة من قالبنا
نذهب إلى تصميم
تحرير HTML
توسيع القالب
نضغط
CTRL+F
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
المرحلة الأولى:
نبحث عن الكود التالي:

]]></b:skin>

قبله مباشرة نضع الكود التالي:

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

المرحلة الثانية:

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

</body>

قبله مباشرة نضع الكود التالي:

<a href="#" id="backtotop"><img src="رابط الصورة" alt="back to top" /></a>  

ولكن قبل إضافة هذا الكود إلى القالب الرجاء اختيار زر الأيقونة التي تعجبك وتغير ما لون بالأحمر برابطها

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkw1KnxwOJIrIX8-zs48XG_0WyeqUM2MoBnmHcxy_N_KopTvbCqE-vB0igRqWa0LM5JKczLr5K0M9sD7BCY6rmGKf-XFuBZ1oziQq_6hsMwubP2Tk886jwE6sN8pbsaH7Rdd4FhooFEkKc/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzl_iN-xDfZjgoiQNIoW_S0adWybdwAbDmB74YMnuYX5ZCovfyCMT4saxr-jw6ONRD47IBCcuVPWquULS0lAxJw-2NOrPOe20PDHq1CD-22LHRy8MIgqgMdMJTJH_5evfRXW7CTwWH7RVI/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRexDPF7Rl5P34WMg-sczK6rD1vB71nXWK9NmkHnHNhk3y9MyNbj5yGkh9PXAzfbwyyk0tWf8Zrc8CwQ5w_Npf4t0-EokJou-4Td26edR8_sfjOgGl2wKIscD2mdqlyt6SBI24bNwcAUbP/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiGt8opIfPeQ6YI-L68GJZc3NWMJ164TLdiCZRHzXlgQ_3ZJvpXn4BucNEBxmnzR10SlEbQZhIUO_N6DQABnS8UkMevKIMiRpbeZmOD5-brKrrwQeuSvUjFvAdKi1ID9sIM-R6fS1eSls/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxDS2cqnEkY-xi8Tk4Ig5y-DDiZ9v1VSclTM9BKKN8YnROCpAsUfclw6DDxlYrMb9nbRGXyaoJG5EKiD0guAxNWuDCHAVNnBd3covQiH8fd9RUTSGN3Sr61g-8wapgo658l-fu2mg4I9l-/s1600/bttp-2.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF6jRReh0D3UPIw_qqU_6DFlr75AcHd8XsKKA8LAk6s3JrzwuzEvewIFdXZPOneznzzc91_gFxNgVXaCippw6Y8WknCAfEZHALPemkKLJDaAm-t0TnTvdGQwEH_Mn4lhSo2D07kHjXaCd7/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDj4wDbQdvTZtjvvn0Rao7AtCxwe4VanBpwSs7HJqAQL0m1cWKJOVIARIIkALwO-cVdu80vzN1KQ4E-4rLVW8D-9yxAckVpLDlKtv_ObsQrx7UZk3x7tEAuD_EJl10Wfc58TUJ_cYZbRmk/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL1DYzoekWjxsYNrr2RwYbSWJMB1gvuwsDuGDXMr67v6FMwjzpm7d6M3L418xGW8Pstom38ab5HPpAGfzXEHyXTEbBnrjdxfOiU7xBQRzxin0yr8wwhI4yQi_B7rGNFTkOQMyFZjCBb70p/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigLgXaZIV2bkYLHbJaGP_9qM_CV95Es8DYK9Qw7nuHYCHhMEJOn1cwHYvXyNvpx5EdcDzC8sgeCg2mt8Gz0z7vqJGMiCloEgwNkLsaNmT3_SRNuDF1r2BuwdNHDvNltyQgWXKwe1d9pg6N/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZNDXQ4xsovp2jH2UuUp65L-cBrTfrqipkCTKbayh21Rkw16TcZmVzG_DO8YawXcUfZ_biU2zFBnWyaz6M5Ybp-bpPp_cU7yGwiDOQ0KW3vtaTJBTkmMXv5M3mrx9mXObMk1f9Gd5mT1wH/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz9SlzSzZGIGnp8yxjRb8Ozu_9GGfhkvnDKfvJp6C-dVx3cj4iJ7lHquJtxC5BD4d6mheuSKKYDiPOjjNQ5NYZIm4IrfdlnenUqP4l4zLuhdUjAlEx7k9JDJHYGrNauFHxxg7uNu6H3Rv8/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCwjIo6nrvKhNB6ZeWtkR1Cnn8zzzwOrixGXT0ri70EMhJ-uinkfoXJlzi-z3bTHZJIzC-n0_SYHNNjNKrrtx_EzAN7WZHNqNhukY-MkezPT551B0G7Z6MBf77J2jv-6nBGy8Yi1Ur0NbY/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKcknQSUOLnf8mAcHznBCu5bBb4vserVGyAfCESYcBSoho7pYW1yo138jcR3NuFa1I_PO2IAyVoWYY5xKqiTDdABJjCKGDwzJdrPiggNTT4VJr41CO7kakmPbpyObS1B7HyKefuyDxxlBS/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-pQcANwGeGcBa0COFBnHj_FpE9PjyLCzRBJLpU3BOPjD89dWiDndezMumL0Vxz_TnhcwU2QSb-RCQAtHSULcCEnoVgX2sQkczo_R2nhXH5eJoy-zVx1OaklXqoRWnlFX2KoMozoa2tDxC/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd2YgPnFD6d2vCJ1DBIzebvHFOY0r26mBNClnmVflxACX4HQ_bB_h167AncLoKzdZH5wWK4F9hrhOnu65b3bJ9pStxjlBBGapiIyUXy4McaDD0m-wcqwtozGlUfkd_y8k47mXovVyNLPfI/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYQ2OZyLF5DdDG4GjvhoRHOpGM3xu7JHbZhJ8WRdCcIFTMJ216lxoimdXG5L3Vlk9devL5RTp-fo5HP-QU7Kf34EEmzCzm48naP_c2v1bbMB3FsF-VxENO8ptsylrOufMWkCWv1fzmL06x/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTOeNhYLFZ57oQUoW4HU6MpnAVdvD80rrfDfDhE3q6dtcHvOi2x5fXn3IoMXVd4oDa7_Bo8hKiMLP3lZDIjBgrsrN_uqZGK7ocuMTdVPOIHH8Z81sQM6gis2KGE_AWAZ53OoOiPcqUpJng/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnIHRiEfjpaFOR_OdsUmvYjw4R6XLT4NURtEf-arobOGoLqrqYc0NFPVXSAXmV6_h3ZmzH4ABuCmOESb5feh7r4VuTu_t4teCKQgQQUNCBYJhI5KU4SCmeQwFyXWcavVn0yj3-Hf_12k14/s400/20.png

إلى هنا أكود قد أنهيت موضوعي لليوم


وأي استفسار لا تترددوا بطرحه

اقرأ المزيد dookaladookala

 ترقيم الصفحات بطريقة فعالة وحل جميع المشاكل

المشاكل

ترقيم الصفحات Page Navigation widget إضافة هامه لمدونات بلوجر وخصوصا عندما تصبح المدونة بها عدد كبير من المواضيع ويصعب التنقل بها فتأتي إضافة الترقيم لتحل تلك المشكلة لكن كثيير من الإضافات الموجوده بها عدة مشاكل منها تخصيص شكلها أغلب المصممين يجعل الإضافة بلون يتناسب مع مدونته لكن قد لا يتناسب مع الجميع أما إضافتنا يمكنك تخصيص شكلها كما تشاء
أيضا مشكلة أخرى في بعض الإضافات وهي عند بلوغ المواضيع حد معين مثلا مئة موضوع تصبح لا تعمل جيداً وتكرر الموضوعات لكن إضافتنا اليوم لا توجد بها تلك المشكلة أيضا مشكلة تظهر مع التسميات أو الأقسام وتجعل المواضيع غير مرتبه لكن بإذن الله سنضع حل هذه المشكلة أيضا لنكون وصلنا لأكبر قدر من حلول المشاكل التي تواجه إضافة ترقيم الصفحات

أولا طريقة إضافة ترقيم الصفحات

 الخطوة الأولى 

أدخل الى خانة التخطيط في إدارة مدونتك
قم بتحرير رسائل المدونة الإلكترونية
وفي خانة عدد الرسائل على الصفحة الرئيسية ضع رقم يناسبك وإعلم أنه سيستخدم في ترقيم الصفحات ايضا

الخطوة الثانية

 أدخل الى تحرير قالبك وطبعا لا تنسى أخذ نسخة إحتياطية

إبحث عن الوسم </body> وأضف فوقه الكود التالي

&lt;script type=&#39;text/javascript&#39;&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=8;
var upPageWord =&#39;السابق&#39;;
var downPageWord =&#39;التالي&#39;;
&lt;/script&gt;
&lt;script src=&#39;https://cnmu.googlecode.com/svn/trunk/pagenav.js&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt;

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

الخطوة الثالثة
قم بتوسيع عناصر الستايل بالضغط على سهم التوسيع

 إبحث عن الوسم </b:skin> وأضف فوقه الكود التالي

/* -- number page navigation -- */
.showpageArea {
color:#787D7E;
margin: 10px 5px 3px 5px;
padding: 0px;
float: left;
display: inline;
font-size:13px;
}
.showpageArea a {
background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 );
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
color:#787D7E;
display: inline;
float: left;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpageNum a {
font-size:13px;
font-weight: bold;
background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 );
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
color:#787D7E;
display: inline;
float: left;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpageNum a:hover {
background: #D1E0E5;
background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5);
background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);
text-decoration: none;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpagePoint {
font-size:13px;
font-weight: bold;
background: #4A4A4A;
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
color: #FFFFFF;
display: inline;
float: left;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpageOf {
font-weight: bold;
background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 );
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
color:#787D7E;
display: inline;
float: left;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpage a {
background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 );
padding: 4px 7px;
margin: 0px 5px 0px 0px;
text-decoration: none;
color:#787D7E;
display: inline;
float: left;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}
.showpage a:hover {
background: #D1E0E5;
background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5);
background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);
text-decoration: none;
border:1px solid #BEBEBE;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}

 هذا الكود #787D7E يخص لون الخط في الإضافة ستجد الاكواد متكرره يجب تعديلها كلها
هذا الكود
 background: #DAD8D9;
background: -moz-linear-gradient(top,  #F0F0F0 , #DAD8D9 );
background: -webkit-linear-gradient(top,  #F0F0F0 ,#DAD8D9 ); 
هو لون خلفية الزر وهو تدرج يتكون من لونين الاول العلوي والثاني السفلي
هذا الكود border:1px solid #BEBEBE; هو خاص بحجم ولون الإطار حول الأرقام
background: #D1E0E5;
background: -moz-linear-gradient(top,#EEF3F6,#D1E0E5);
background: -webkit-linear-gradient(top,#EEF3F6,#D1E0E5);
هذا الكود هو تدرج آخر ولكنه الذي يظهر عند مرور الماوس
و border:1px solid #ccc; هو لون الإطار عند مرور الماوس

اما هذا اللون background: #4A4A4A; هو خلفية الصفحة التي تكون موجود بها
وهذا هو لون الخط color: #FFFFFF;
أما الرقم radius:2px والمتكرر في كل الأكواد تقريبا هذا إن قمت بزيادته سيصبح الزر اكثر إستدارة
لقد شرحت تقريبا أهم الأكواد التي يمكن التعديل عليها أو يمكنك إضافة الكود كما هو إن لم تستطيع تغيير الألوان
ومن هنــا يمكنك تحصيل اكواد الألوان 

حل مشكلة الترقيم والتسميات

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

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

  ونستبدله بهذا الكود

<script type='text/javascript'>
  var lblname = &quot;<data:label.name/>&quot;;
  lblname2 = encodeURIComponent(lblname);
  var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=5&#39;;
  document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;);
</script>

رقم 5 هو عدد المواضيع إختر نفس الرقم في المرحلة الأولى 

ملحوظة قد يكون الكود متكرر أكثر من مرة يجب تغييرها جميعا
وهذا سيكون مختص بآداة التسميات وإن لم تكن موجوده لديك لن تجد الكود 
أما بالنسبة للتسميات التي تكون داخل الموضوع
فإبحث عن الكود التالي وإستبدله بنفس الكود كالسابق

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

تحياتي للجميع

اقرأ المزيد dookaladookala