للإستفسار تفضل بمراسلتى عبر هذا البريد:mdwan_blog77@yahoo.com

تخصيص نموذج إتصل بنا بشكل جديد لبلوجر

بسم الله الرحمن الرحيم 
زوار وأعضاء مدونة مدون الكرام لقد شرحت سابقاً فى تدوينة كيف تخصص نموذج إتصال بشكل إحترافى معتمد من بلوجر ولكن وصلتنى تعليقات عديدة عن أن الإضافة لم تعمل بشكل جيد أو بها أخطاء ما مع العلم انها مجربة 100% وانا شخصياً أستخدمها بمدونة مدون لذلك قررت أن آتى لكم بشكل جديد آخر مع شرح التركيب سهل جداً .
1 - علينا أولاً تركيب الاضافة بصورة الاعتيادية نتوجه الى تخطيط ثم أضافة أداة جديدة وختر أضافة أتصل بنا
2 - إختر صفحات / صفحة جديدة فارغة / ثم ضع الماوس على HTML وضع الكود التالى
<form name="contact-form">
الاسم
<input id="ContactForm1_contact-form-name" name="name" size="30"
type="text" value=""
/>
البريد الإلكتروني <span style="color: red; font-weight: bolder;">*</span>
<input id="ContactForm1_contact-form-email" name="email" size="30"
type="text" value="
" />
الرسالة <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email
-message" name="email-message" rows=
"5"></textarea>
<input id="ContactForm1_contact-form-submit"
type="button" value="إرسال" />

<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style type="text/css">
/* mdwanblog */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>
ملحوظة هامة يجب التأكد من إختيار هذة الأسطر أثناء إنشاء الصفحة مثل الصورة التالية
3 - الآن مع إضافة كود الـ css نبحث عن الكود ]]></b:skin> ونضيف الكود التالى قبلة 
/* mdwanblog */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus,
#ContactForm1_contact-form-email:focus,
#ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: right;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message,
#ContactForm1_contact-form-success-message
{
width: 450px;
margin-top:35px;
}
والآن أصبح النموذج مكتمل 
تنبيه | لا تقوم بحزف الأداة من العمود الجانبى هى ستختفى

قائمة css فى قمة الأناقة لمدونات بلوجر

بسم الله الرحمن الرحيم
أقدم لكم من مدونة مدون فقط قائمة css فى قمة الإحترافية بالوان رائعة جداً ومناسبة لجميع القوالب يمكنك تركيبها فى أداة جديدة جافاسكريبت ويمكنك إستبدالها بالقائمة القديمة فى قالبك .
لوحة التحكم / التخطيط / إختار المكان المناسب / أداة جافاسكريبت وضع بها الكود التالى بها
     <style>  
    /* by.mdwanblog.blogspot.com */
    #cssmenu {
      padding: 0;
      margin: 0;
      border: 0; }
    #cssmenu ul, #cssmenu li {
      list-style: none;
      margin: 0;
      padding: 0; }
    #cssmenu ul {
      position: relative;
      z-index: 597; }
    #cssmenu ul li {
      float: right;
      min-height: 1px;
      vertical-align: middle; }
    #cssmenu ul li.hover,
    #cssmenu ul li:hover {
      position: relative;
      z-index: 599;
      cursor: default; }
    #cssmenu ul ul {
      visibility: hidden;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 598;
      width: 100%; }
    #cssmenu ul ul li {
      float: none; }
    #cssmenu ul ul ul {
      top: 0;
      left: auto;
      right: -99.5%; }
    #cssmenu ul li:hover > ul {
      visibility: visible; }
    #cssmenu ul ul {
      bottom: 0;
      left: 0; }
    #cssmenu ul ul {
      margin-top: 0; }
    #cssmenu ul ul li {
      font-weight: normal; }
    #cssmenu a {
      display: block;
      line-height: 1em;
      text-decoration: none; }
    /* by.mdwanblog.blogspot.com */
    #cssmenu {
      background: #333;
      border-bottom: 4px solid #1b9bff;
      font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
      font-size: 12px; }
      #cssmenu > ul {
        *display: inline-block; }
      #cssmenu:after, #cssmenu ul:after {
        content: '';
        display: block;
        clear: both; }
      #cssmenu ul {
        text-transform: uppercase; }
        #cssmenu ul ul {
          border-top: 4px solid #1b9bff;
          text-transform: none;
          min-width: 190px; }
          #cssmenu ul ul a {
            background: #1b9bff;
            color: #FFF;
            border: 1px solid #0082e7;
            border-top: 0 none;
            line-height: 150%;
            padding: 16px 20px; }
          #cssmenu ul ul ul {
            border-top: 0 none; }
          #cssmenu ul ul li {
            position: relative; }
            #cssmenu ul ul li:first-child > a {
              border-top: 1px solid #0082e7; }
            #cssmenu ul ul li:hover > a {
              background: #35a6ff; }
            #cssmenu ul ul li:last-child > a {
              -moz-border-radius: 0 0 3px 3px;
              -webkit-border-radius: 0 0 3px 3px;
              border-radius: 0 0 3px 3px;
              -moz-background-clip: padding;
              -webkit-background-clip: padding-box;
              background-clip: padding-box;
              -moz-box-shadow: 0 1px 0 #1b9bff;
              -webkit-box-shadow: 0 1px 0 #1b9bff;
              box-shadow: 0 1px 0 #1b9bff; }
            #cssmenu ul ul li:last-child:hover > a {
              -moz-border-radius: 0 0 0 3px;
              -webkit-border-radius: 0 0 0 3px;
              border-radius: 0 0 0 3px;
              -moz-background-clip: padding;
              -webkit-background-clip: padding-box;
              background-clip: padding-box; }
            #cssmenu ul ul li.has-sub > a:after {
              content: '+';
              position: absolute;
              top: 50%;
              right: 15px;
              margin-top: -8px; }
        #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
          background: #1b9bff;
          color: #FFF; }
        #cssmenu ul li.has-sub > a:after {
          content: '+';
          margin-left: 5px; }
        #cssmenu ul li.last ul {
          left: auto;
          right: 0; }
          #cssmenu ul li.last ul ul {
            left: auto;
            right: 99.5%; }
      #cssmenu a {
        background: #333;
        color: #CBCBCB;
        padding: 0 20px; }
      #cssmenu > ul > li > a {
        line-height: 48px; }
</style>
<!--by.mdwanblog.blogspot.com-->
    <div id='cssmenu'>
    <ul>
       <li class='active'><a href='#'><span>الرئيسية</span></a></li>
       <li class='has-sub'><a href='#'><span>منسدلة</span></a>
          <ul>
             <li class='has-sub'><a href='#'><span>رابط</span></a>
                <ul>
                   <li><a href='#'><span>رابط</span></a></li>
                   <li class='last'><a href='#'><span>مدونة مدون</span></a></li>
                </ul>
             </li>
             <li class='has-sub'><a href='#'><span>منسدلة اخرى</span></a>
                <ul>
                   <li><a href='#'><span>جديد</span></a></li>
                   <li class='last'><a href='#'><span>هاكات بلوجر</span></a></li>
                </ul>
             </li>
          </ul>
       </li>
       <li><a href='#'><span>عن مدوّن</span></a></li>
       <li class='last'><a href='#'><span>بلوجر</span></a></li>
    </ul>
    </div>
    <!--by.mdwanblog.blogspot.com-->
فى النهاية أتمنى إنها تنال إعجابكم دمتم بخير

كود الإعلانات البنرية مثل مدونة مدوّن

بسم الله الرحمن الرحيم 
حبيت ان أقدم لكم كود التبادل الإعلانى البنرى لان الكثير طلبوه منى عبر البريد مع العلم إنه "متوفر" على الإنترنت ولكن حبيت ان أضعه لكم كود إحترافى وراح يعجبكم مثل الموجود حالياً فى مدونة مدوّن وهو ليس من تصميمنا .
الكود تركيبة سهل للغاية ستضع الكود التالى فى اداة جافاسكريبت
<style>
#advertise{
  margin: auto;
}
 .adss { list-style:none; margin-top:5px auto; margin: 0 1px 2px 1px; display:inline-block; text-align: center; }
 .adss a { display:block; width:75px; height:75px; padding-right:0px; padding-top: 3px; position:relative; text-decoration:none; }
 .adss a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
 .adss img {-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; max-height: 75px; max-width: 75px; }
 #adsanime:hover { opacity:0.2; }
 #adsanime a strong {
    -webkit-transition-property: opacity;
     -webkit-transition-duration: 500ms;
     -moz-transition-property: opacity;
      -moz-transition-duration: 500ms; }
 #adsanime a strong {
   opacity:0;
    -webkit-transition-property: opacity, top;
     -webkit-transition-duration: 300ms;
      -moz-transition-property: opacity, top;
       -moz-transition-duration: 300ms; }
 #adsanime {
    opacity:0.5;
     -webkit-transition-property: opacity, top;
      -webkit-transition-duration: 300ms;
       -moz-transition-property: opacity, top;
        -moz-transition-duration: 300ms; }
 #adsanime:hover { opacity:1; }
 #adsanime:hover a strong { opacity:1; top:-10px; }
</style>

<center>
<div class="adss" id="adsanime">
<a href="http://arabe-eye.blogspot.com">
   <img src="http://i72.servimg.com/u/f72/17/70/27/78/arabe-10.gif" />
   <strong>عين العرب</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://www.alamfour.blogspot.com/">
   <img src="http://im42.gulfup.com/k40nO.gif" />
   <strong>Alamfour</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="http://a7trafy.blogspot.com">
   <img src="http://im31.gulfup.com/M3GmW.gif" />
   <strong>مدونة احترافي</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="/">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>اعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="/">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>اعلن</strong></a>
    </div>   
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>اعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>          
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div> 
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>       
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div> 
<div class="adss" id="adsanime">
<a href="">
   <img src="http://4.bp.blogspot.com/-9tbvxnTsZEA/UbcTrzwlDfI/AAAAAAAACbg/MHc39o6n0MQ/s1600/Untitled-1.jpg" />
   <strong>أعلن هنا</strong></a>
    </div>             
</center>
وغير ما يلزمك حتى يناسبك

تحميل أوبريت "مصر أم الدنيا" mp3

"مصر أم الدنيا.. قد الدنيا" هو الأوبريت الجديد، الذي تم عرضه أثناء الاحتفال بانتصارات أكتوبر المجيدة، حيث يعرض الأوبريت، طمع الغزاة في مصر منذ حملات الصليبيين وما تلاها، وطمعهم في خيراتها، وكيف كان يتم التخطيط لها، وفي المقابل كيف يقف المصريون، بداية من أحمس ومرورًا بقطز، والقادة المصريين على مر العصور في مواجهة العدو، والدفاع عن أرضهم وكرامتهم.

أزرار المشاركة أسفل كل تدوينة بشكل إحترافى

بسم الله الرحمن الرحيم 
فى البداية أتمنى أن تكونوا بأفضل حال جميعاً اقدم لكم فى هذة التدوينة البسيطة كود إضافة لأزرار المشاركة بشكل إحترافى وجزاب بتقنية الـ css3 وبتقنية الجى كويرى .
والآن مع شرح التركيب وهى سهلة جداً
لتركيب الجزء الخاص بالـ css إبحث عن الكود التالى 
]]></b:skin>
وضع قبلة مباشرة الكود التالى 
div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0 !important;padding:0 !important;float:left !important}div.shr-bookmarks ul.shr-socials{background:transparent none !important;border:0 none !important;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display:inline !important;float:left !important;list-style-type:none !important;padding:0 !important;height:29px !important;width:60px !important;cursor:pointer !important;margin:3px 0 0 !important;background-color:transparent !important;border:0 none !important;outline:0 none !important;clear:none !important}div.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:after,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-socials li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.shr-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !important;height:29px !important;text-indent:-9999px !important;background-color:transparent !important;text-decoration:none !important;border:0 none !important}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li:hover{background-color:transparent !important;border:0 none !important;outline:0 none !important}.shareaholic-show-on-load{display: block !important;}div.shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:auto !important;font-size:10px !important; text-indent:0px !important;text-decoration:none !important;}div.shr-count{font:12px bold,arial !important;position: relative !important;}div.shr-count-outline{position: absolute !important;color: white !important;}div.shr-count-center{position: absolute !important;color: blue !important;}li.shr-2{background-position:-120px bottom !important}li.shr-2:hover{background-position:-120px top !important}li.shr-3{background-position:-180px bottom !important}li.shr-3:hover{background-position:-180px top !important}li.shr-5{background-position:-300px bottom !important}li.shr-5:hover{background-position:-300px top !important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important}li.shr-10{background-position:-600px bottom !important}li.shr-10:hover{background-position:-600px top !important}li.shr-38{background-position:-2280px bottom !important}li.shr-38:hover{background-position:-2280px top !important}li.shr-40{background-position:-2400px bottom !important}li.shr-40:hover{background-position:-2400px top !important}li.shr-43{background-position:-2580px bottom !important}li.shr-43:hover{background-position:-2580px top !important}li.shr-52{background-position:-3120px bottom !important}li.shr-52:hover{background-position:-3120px top !important}li.shr-74{background-position:-4440px bottom !important}li.shr-74:hover{background-position:-4440px top !important}li.shr-88{background-position:-5280px bottom !important}li.shr-88:hover{background-position:-5280px top !important}li.shr-106{background-position:-6360px bottom !important}li.shr-106:hover{background-position:-6360px top !important}li.shr-201{background-position:-12060px bottom !important}li.shr-201:hover{background-position:-12060px top !important}li.shr-219{background-position:-13140px bottom !important}li.shr-219:hover{background-position:-13140px top !important}
ثم إبحث عن هذا الكود 
<div class='post-footer'>
ملحوظة : إن لم يعمل معك الكود الأول جرب الثانى لانها تختلف فى بعض القوالب 
ضع الكود التالى بعدة مباشرة  
        <!--Start Ssocial Bookmarks fromhttp://mdwanblog.blogspot.com -->
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='shr_class shareaholic-show-on-load'>
        </div>
        <script type='text/javascript'>
        var SHRSB_Settings = {&quot;shr_class&quot;
        :{&quot;src&quot;:&quot;http://www.shareaholic.com/media/
        css/styles/sb&quot;,&quot;link&quot;:&quot;&quot;
        ,&88,74,10,106,45,40,210,78,39&quot;,&quot;apikey&quot;:&quot;6ffe2cbf1
        quot;service&quot;:&quot;5,7,2,38,3,219,43,52,201,
        42c45bd4cd03b01ec46b8658&quot;,&quot;localize&quot;
        :true,&quot;shortener&quot;:&quot;google&quot;,&quot;;
        ,&quot;designer_toolTips&quot;
        :true,&quot;twitter_template&quot;:&quot;Some fancy post title
        - http://goo.gl/dbqlx via @mdwan-blogger&quot;}};
        </script>
        <script type='text/javascript'>
        (function() {
        var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
        sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot;
         : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-sb.min.js&quot;;
        var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
        })();
        </script><a href='http://www.spiceupyourblog.com/' target='_blank'>Blogger Social Bookmark Gadget</a></b:if>
        <!-- End Social Bookmarks from http://mdwanblog.blogspot.com -->
 ملاحظات هامة 
الإسم المحدد باللون الأحمر هو إسم الحساب على تويتر غيرة بإسم حسابك إذا كان ليس لديك حساب اتركة فارغاً

إضافة ترقيم الصفحات بشكل أنيق لمدونات بلوجر

بسم الله الرحمن الرحيم ... السلام عليكم ورحمة الله وبركاتة 
هل تبحث عن طريقة سهلة لترقيم صفحات بلوجر ويكون الديزين ذات شكل جزاب مدونة مدون تقدم لك شكل رائع جداً لترقيم صفحات بلوجر وطريقة التركيب سهلة للغاية بالنسبة للمبتدئين تابع الشرح .
من تحرير القالب قم إبحث عن هذا الوسم 
]]></b:skin>
وضع فوقة مباشرة الكود التالى 

.paginator {
margin-top:60px;
font-size:1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#ff6c24;
font-style:normal;
font-weight:normal;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#ccc;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url
(http://3.bp.blogspot.com/
_McxL-_3YYuM/TBG843o8-TI/
AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif)
no-repeat 50% 50%
;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#ff6c24;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}
الخطوة الثانية تفعيل الجافاسكريبت
قم بالبحث عن هذا الكود 
</body>
قم إستبدله بهذا الكود 
<script src='
http://scriptabufarhan.googlecode.com/
svn/trunk/paginator3000.js'
type='text/javascript'></script
>

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/
svn/trunk/paginator3000-
forblogger-v1.0.0.js' type='text/javascript
'/>

</body>