احدث اضافه للمشاركات الشائعه بشكل جديد ومتحرك لــ مدونات بلوجر

 

بسم الله والحمد لله والصلاه والسلام على اشرف خلق الله سيدنا محمد صلُ الله عليه وسلم.

نتطرق اليوم اخوتى لأحدث اضافه للمشاركات الشائعه كما بمواقع الاخبار والمواقع الكوبرى وهى شريط بأخر الاخبار 

يجعل شكل المدونه اكثر احترافيه وبأسهل طريقه.

لرؤيه مثال اضغط هنا

لتركيب الاضافه تابع معى.

من لوحه التحكم اختار تصميم ثم اضافه اداه اختار HTML/JavaٍScript 

ثم اضف الكود التالى بداخلها..

<style>

#slider ol,#slider ul,#slider li
 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}

.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:150px;
  height:120px;
}

ol, ul {
    list-style: none;
    }

.wrapper {
    width: 720px;
    margin: 0 auto;
    position:relative;
}

.clear {
    clear: both;
    }

.display-none {
    display:none;
    }

#slider {
    position: relative;
    top: -2px;
    z-index: 1;
    }

#slider .prev {
    position: absolute;
    width: 21px;
    height: 21px;
    display: block;
    background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arleft.png) no-repeat center center;
    top: 150px;
    left: -51px;
    }

#slider .next {
    position: absolute;
    width: 21px;
    height: 21px;
    display: block;
    background: url(http://i575.photobucket.com/albums/ss197/akhmadaminullah/arright.png) no-repeat center center;
    top: 150px;
    right: -51px;
    }

#slider #slider-wrapper {
    width: 720px;
    height: 300px;
    padding-top: 40px;
    overflow: hidden;
    z-index: 999;
    position: relative;
    }

#slider #slider-inner {
    width:9780px;
    height:300px;
    position:absolute;
    }

#slider .article {
    width: 150px;
    height: 300px;
    float: left;
    margin-right: 30px;
    }

#slider .article img {
    margin-bottom: 25px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    }

#slider .article h2 {
    margin-bottom: 15px;
    line-height: 18px;
    }

#slider .article h2 a {
    font-size: 18px;
    color: #404040;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff;
    line-height: 23px;
    }

#slider .article .meta-comments a {
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #fff;
    }

#slider .article .item-snippet {
    margin-left: 15px;
    }

#slider .widget-item-control { display: none}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-for-blogger.googlecode.com/svn/trunk/gridslidepopularpost.js"></script>a

واضغط حفظ.ثم اضف اداه المشاركات الشائعه ورتبهم كما بالصوره

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

تم بحمد الله

احدث طريقه لـ ترقيم صفحات بلوجر بـ خمسه الوان - اصدار اخير

 

بسم الله والحمد الله..والصلاه والسلام على اشرف خلق الله سيدنا محمد صلُ الله عليه وسلم.

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

انصح الجميع بتركيبه ولرؤيه مثال شاهد مدونتى فى اخر الصفحات ستجد الترقيم.

لتركيب الاضافه تابع معى...

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

  

  1.  ابحث عن </body> ثم ضع قبله مباشره الكود الموجود بالأسفل

     <!-- PAGE NAVIGATION STAR blogger-plan.blogspot.com -->
     <script type='text/javascript'>
     var home_page=&quot;/&quot;;
     var urlactivepage=location.href;
     var postperpage=7;
     var numshowpage=4;
     var upPageWord =&#39;&#9668;&#39;;
     var downPageWord =&#39;&#9658;&#39;;
     
     </script>
     <script type='text/javascript'>
     //<![CDATA[
     eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 G;5 i;5 b;5 n;1f();x 1g(15){5 6=\'\';H=I(K/2);3(H==K-H){K=H*2+1}J=b-H;3(J<1)J=1;o=I(15/j)+1;3(o-1==15/j)o=o-1;L=J+K-1;3(L>o)L=o;6+="<4 e=\'1y\'>1z "+b+\' 1A \'+o+"</4>";5 16=I(b)-1;3(b>1){3(b==2){3(i=="w"){6+=\'<4 e="1B"><a f="\'+y+\'">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">\'+M+\'</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+16+\');A B">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+16+\');A B">\'+M+\'</a></4>\'}}}1h(5 g=J;g<=L;g++){3(b==g){6+=\'<4 e="1C">\'+g+\'</4>\'}c 3(g==1){3(i=="w"){6+=\'<4 e="k"><a f="\'+y+\'">1</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">1</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+g+\');A B">\'+g+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+g+\');A B">\'+g+\'</a></4>\'}}}5 17=I(b)+1;3(b<o){3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+17+\');A B">\'+1i+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+17+\');A B">\'+1i+\'</a></4>\'}}5 C=u.1D("C");5 18=u.1E("1F-1G");1h(5 p=0;p<C.P;p++){C[p].1j=6}3(C&&C.P>0){6=\'\'}3(18){18.1j=6}}x 1a(Q){5 R=Q.R;5 1k=I(R.1H$1I.$t,10);1g(1k)}x 1f(){5 d=m;3(d.9("/r/s/")!=-1){3(d.9("?S-7")!=-1){n=d.D(d.9("/r/s/")+14,d.9("?S-7"))}c{n=d.D(d.9("/r/s/")+14,d.9("?&7"))}}3(d.9("?q=")==-1&&d.9(".6")==-1){3(d.9("/r/s/")==-1){i="w";3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l("<h T=\\""+y+"U/V/W?7-l=1&X=Y-Z-h&11=1a\\"><\\/h>")}c{i="s";3(d.9("&7-l=")==-1){j=1J}3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l(\'<h T="\'+y+\'U/V/W/-/\'+n+\'?X=Y-Z-h&11=1a&7-l=1" ><\\/h>\')}}}x N(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x O(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W/-/"+n+"?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x 1b(Q){1c=Q.R.1K[0];5 1w=1c.1x.$t.D(0,19)+1c.1x.$t.D(1L,1M);5 1d=1N(1w);3(i=="w"){5 1e="/r?S-7="+1d+"&7-l="+j+"#E="+G}c{5 1e="/r/s/"+n+"?S-7="+1d+"&7-l="+j+"#E="+G}1O.f=1e}',62,113,'|||if|span|var|html|max||indexOf||nomerhal|else|thisUrl|class|href|jj|script|jenis|postperpage|showpageNum|results|urlactivepage|lblname1|maksimal|||search|label||document|newInclude|page|function|home_page|onclick|return|false|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|mulai|numshowpage|akhir|upPageWord|redirectpage|redirectlabel|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))
     //]]>
     </script>
     <!-- PAGE NAVIGATION STOP blogger-plan.blogspot.com -->

     لتخصيص الكود بما يتناسب مع مدونتك  ابحث فيه عن
     var postperpage=7;   غير الرقم 7 بعدد التدوينات التي حددت ظهورها في الصفحه الرئيسيه للمدونه من خلال تحرير اداة رسائل المدونه.
     var numshowpage=4; غير الرقم 4 باي رقم تريده فهو المسؤول عن عدد الترقيمات التي تظهر بداخل الاداه في صفحة مدونتك الرئيسيه .
     الى هنا نكون قد انتهينا من الجزء المهم في الموضوع وننتقل الي الالوان الخمسه لاضافة ترقيم الصفحات  وساقوم بوضع عنوان توضيحي لكل لون واسفله الكود الخاص به وما عليك سوى اختيار اللون الذي يتناسبك ومن ثم نسخ الكود الموجود اسفل عنوانه .

     1- هاك ترقيم صفحات مدونة بلوجر باللون الارجواني :

      /* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
       padding: 3px 8px;
       margin:0 4px;
       text-decoration: none;
       border:1px solid #999;
       -webkit-border-radius:3px;-moz-border-radius:3px;
       background: #8B2F73;
       color:#fff;
       }
     
     .showpageOf {
     margin:0 8px 0 0;
     }
     .showpageNum a:hover {
       border:1px solid #888;
       background: #ccc;
       }
     
     .showpagePoint {
       color:#fff;
       text-shadow:0 1px 2px #333;
       padding: 3px 8px;
       margin: 2px;
       font-weight: 700;
       -webkit-border-radius:3px;-moz-border-radius:3px;
       border:1px solid #999;
       background: #F1BA24;
       text-decoration: none;
       }

     2 - هاك ترقيم صفحات مدونة بلوجر باللون الاخضر :

     /* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
       padding: 3px 8px;
       margin:0 4px;
       text-decoration: none;
       border:1px solid #999;
       -webkit-border-radius:3px;-moz-border-radius:3px;
       background: #3F8657;
       color:#fff;
       }
     
     .showpageOf {
     margin:0 8px 0 0;
     }
     .showpageNum a:hover {
       border:1px solid #888;
       background: #ccc;
       }
     
     .showpagePoint {
       color:#fff;
       text-shadow:0 1px 2px #333;
       padding: 3px 8px;
       margin: 2px;
       font-weight: 700;
       -webkit-border-radius:3px;-moz-border-radius:3px;
       border:1px solid #999;
       background: #F1BA24;
       text-decoration: none;
       }

     3 - هاك ترقيم صفحات مدونة بلوجر باللون البرتقالي :

     /* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
       padding: 3px 8px;
       margin:0 4px;
       text-decoration: none;
       border:1px solid #999;
       -webkit-border-radius:3px;-moz-border-radius:3px;
       background: #7B3A11;
       color:#fff;
       }
     
     .showpageOf {
     margin:0 8px 0 0;
     }
     .showpageNum a:hover {
       border:1px solid #888;
       background: #ccc;
       }
     
     .showpagePoint {
       color:#fff;
       text-shadow:0 1px 2px #333;
       padding: 3px 8px;
       margin: 2px;
       font-weight: 700;
       -webkit-border-radius:3px;-moz-border-radius:3px;
       border:1px solid #999;
       background: #F1BA24;
       text-decoration: none;
       }

     
     

     4 - هاك ترقيم صفحات مدونة بلوجر باللون الرصاصي :

     /* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
       padding: 3px 8px;
       margin:0 4px;
       text-decoration: none;
       border:1px solid #999;
       -webkit-border-radius:3px;-moz-border-radius:3px;
       background: #52575C;
       color:#fff;
       }
     
     .showpageOf {
     margin:0 8px 0 0;
     }
     .showpageNum a:hover {
       border:1px solid #888;
       background: #ccc;
       }
     
     .showpagePoint {
       color:#fff;
       text-shadow:0 1px 2px #333;
       padding: 3px 8px;
       margin: 2px;
       font-weight: 700;
       -webkit-border-radius:3px;-moz-border-radius:3px;
       border:1px solid #999;
       background: #F1BA24;
       text-decoration: none;
       }
     

     5 - هاك ترقيم صفحات مدونة بلوجر باللون الازرق :

     /* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
       padding: 3px 8px;
       margin:0 4px;
       text-decoration: none;
       border:1px solid #999;
       -webkit-border-radius:3px;-moz-border-radius:3px;
       background: #3B5998;
       color:#fff;
       }
     
     .showpageOf {
     margin:0 8px 0 0;
     }
     .showpageNum a:hover {
       border:1px solid #888;
       background: #ccc;
       }
     
     .showpagePoint {
       color:#fff;
       text-shadow:0 1px 2px #333;
       padding: 3px 8px;
       margin: 2px;
       font-weight: 700;
       -webkit-border-radius:3px;-moz-border-radius:3px;
       border:1px solid #999;
       background: #F1BA24;
       text-decoration: none;
       }

     
     

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

اسهل طريقه لأضافه صفحه معجبيك على تويتر لــ مدونات بلوجر

بسم الله والحمد لله والصلام والسلام على اشرف خلق الله سيدنا محمد صلُ الله عليه وسلم.

احبائى زوار ومتابعى مدونه الخطه بلوجر معانا النهارده اضافه جميله تسهل على الزوار والمتابعين لمدونتك التعرف على صفحتك على التويتر والاعجاب بها ومواصله اخر تدوينات على التويتر 

لتركيب الاضافه تابع معى....

• من لوحه التحكم اختار تصميم ثم اضافه اداه اختار HTML/JavaٍScript 

  ثم اضف الكود التالى بداخلها..

  <!-- Twitter Follower Box blogger-plan.blogspot.com-->
  <script type='text/javascript'>
  function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 295px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
  </script>
  <div id="twitterfanbox"></div><script
  type="text/javascript">fanbox_init("Blogger-Plan");</script
  type="text>
  <!-- End Twitter Follower Box blogger-plan.blogspot.com-->

  يجب تغير ما لون بألاحمر Blogger-Plan بأسم صفحتك على التويتر

  تم بحمد الله....

تحديث صندوق تعليقات لــ مدونات بلوجر

بسم الله والحمد لله والصلام والسلام على اشرف خلق الله سيدنا محمد صلُ الله عليه وسلم.

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

الازرار الجديده المضافه فى صندوق تعليقات بلوجر زر حذف التعليق وزر الرد على التعليق وبكدا تقدر تتابع مع زوار ومتابعى 

مدونتك بدقه اكثر والصوره التاليه مثال على الاضافه..

لتحديث صندوق التعليات تابع معى

• من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع قوالب عناصرواجهة المستخدم-

  ابحث عن : 

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<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>

ثم قم بحفظ القالب...ومبروك على الاضافه...تم بحمد الله