كود أخر للمواضيع الأكثر مشاهدة بمدونة بلوجر يمكنك تجريبه لعله يكون مناسب لمدونتك .

دائما اختر اختر HTML/JavaScript وقم بلصق الكود التالي.

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ol style="text-transform: capitalize;">');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";

document.write(item);

}

document.write('</ol>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1cf38ae68efbe859c4ba1ee239cec099&url=http%3A%2F%2FYOUR_DOMAIN_NAME_HERE_WITHOUT_http://&num=10" type="text/javascript"></script><a href="http://bloggerstop.net/2008/10/blogger-help-how-to-add-popular-posts.html" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a>

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

...تابع القراءة

كود حذف عبارة "الإشتراك في الرسائل ATOM" يمكنك التحلص من هذه العبارة باستدام الكود التالي.
ابحث عن الكود التالي.

<b:includable id='feedLinks'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
    <b:if cond='data:feedLinks'>
      <div class='blog-feeds'>
        <b:include data='feedLinks' name='feedLinksBody'/>
      </div>
    </b:if>

    <b:else/> <!--Post feed links -->
    <div class='post-feeds'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.allowComments'>
          <b:if cond='data:post.feedLinks'>
            <b:include data='post.feedLinks' name='feedLinksBody'/>
          </b:if>
        </b:if>
      </b:loop>
    </div>
  </b:if>
</b:includable>

استبدله بالكود الأتي.

<b:includable id='feedLinksBody' var='links'>
      <div class='feed-links'>
      <data:feedLinksMsg/>
      <b:loop values='data:links' var='f'>
    <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
      </b:loop>
      </div>
    </b:includable>

 7-  مرة ثالثة قم بالبحث عن الكود الأتي وقم بازالته.

<b:include name='feedLinks'/>

 8- قم بحفظ قالب المدونة، حلت المشكلة. 

...تابع القراءة

كود المواضيع الأكثر تعليقا بالبلوجر، اضف كود المواضيع الأكثر تعليقا الى مدونتك على البلوجر.
اختر اضافة أداة ثم اختر HTML/JavaScript. ثم قم بلصق الكود التالي.

<script language='JavaScript'>
aBold = true;
numposts=200;
maxshowresult=5;
home_page = "رابط مدونتك";
</script>
<script src='http://olusegun-fapohunda-calculator.googlecode.com/svn/popular-post-widget-for-blogger.js' type='text/javascript'></script>

اختر مكان مناسب للإضافة .

...تابع القراءة

اضف الى مدونتك اداة المواضيع الأكثر قراءة أو مشاهدة واترك الزوا يطلعون على أكثر المواضيع شعبية على مدونتك من خلال كود بسيط مكنك اضافته.

اختر اضافة أداة ثم اختر HTML/JavaScript.

<script language='JavaScript'>

aBold = true;

numposts=200;

maxshowresult=5;

home_page = "رابط مدونتك هنا";

</script>

<script src='http://www.webaholic.co.in/other/popular-posts-widget-for-blogger.js' type='text/javascript'></script>

 قم بحفظ العمل وعرض المدونة لمشاهدة الأداة وهي تعمل ومبروك عليك .

...تابع القراءة

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

قم باختيار إضافة أداة HTML / JAVASCRIPT واضف الكود التالي.

<style>
* {
    margin: 0;
    padding: 0;
}

body {
    font: 11px Helvetica, Arial, sans-serif;
}

#wrapper {
    width: 800px;
    margin: 60px auto;
}

#intro {
    padding-bottom: 10px;
}

#slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
    border: 10px solid #ccc;
}

.scroll {
    overflow: hidden;
    width: 800px;
    margin: 0 auto;
    position: relative;
}

.scrollContainer {
    position: relative;
}

.scrollContainer div.panel {
    padding: 10px;
    width: 274px;
    height: 318px;
}

#left-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    bottom: 0;
    background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y;
}

#right-shadow {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    bottom: 0;
    background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) repeat-y;
}

.inside {
    padding: 10px;
    border: 1px solid #999;
}

.inside img {
    display: block;
    border: 1px solid #666;
    margin: 0 0 10px 0;
    width: 250px;
}

.inside h2 {
    font-weight: normal;
    color: #111;
    font-size: 16px;
    margin: 0 0 8px 0;
}

.inside p {
    font-size: 11px;
    color: #ccc;
}

a {
    color: #999;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
}

a:hover {
    border-bottom: 1px solid #999;
}

.scrollButtons {
    position: absolute;
    top: 127px;
    cursor: pointer;
}

.scrollButtons.left {
    left: -45px;
}

.scrollButtons.right {
    right: -45px;
}

.hide {
    display: none;
}

</style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" type="text/javascript" charset="utf-8"></script>

احفظ الأداة وقم بمعاينتها.

...تابع القراءة

كود اضافة أداة المواضيع الأكثر قراءة في مدونتك popular posts وهي أداة مفيدة وجذابة وتساعد الزائر على تمييز أفضل مواضيع مدونتك بطريقة سهلة ومميزة.

1. من لوحة التحكم بمدونتك اختر الأداة تخطيط  .
2. من لوحة التخطيط اختر اضافة أداة .
3. اختر HTML/JavaScript.

<script language="JavaScript">
aBold = true;
numposts=200;
maxshowresult=5;
home_page = "www.jedide.blogspot.com";
</script>
<script src="http://sites.google.com/site/taliblogsite/file/popularpostblogger-min.txt" type="text/javascript"></script>

 قم بحفظ العمل وعرض المدونة لمشاهدة الأداة وهي تعمل ومبروك عليك .

...تابع القراءة

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

 اختر ما يعجبك من الأكواد وقم بتجريب عشرات الأكواد والهاكات الخاصة بترقيم تدوينات بلوجر blogger واختر ما يناسب مدونتك.

• ترقيم مدونات بلوجر 
• كود أخر لترقيم مدونات بلوجر بشكل بسيط
• كود أخر رائع لترقيم رسائل مدونات بلوجر
• كود جميل جدا لترقيم صفحات بلوجر
• اضافة كود أداة ترقيم مدونات بلوجر
• كود مميز لترقيم مدونات بلوجر 
• كود ترقيم صفحات بلوجر بالعربي 
• اضافة كود ترقيم مدونات بلوجر عن طريق html/javascript 

...تابع القراءة

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

 .blog-pager,#blog-pager{
 font-size: 12px;font-family:tahoma;
 padding: 0.2em 0.5em; 
 margin-right: 0.1em; 
 border:1px solid #FFF; 
 background: #FFF; text-decoration: none;
 width:500px;
 } 
.showpageNum a,.showpage a {
 color: #693; 
 text-decoration: underline;
 border: 1px solid #E3E3E3; 
 text-decoration: none; 
 padding: 0.2em 0.5em;
 }  
.showpageNum a:hover,.showpage a:hover {
 border: 1px solid #693;
  }
.showpageOf{
  margin:0 8px 0 0;
  display:none;
  }
.showpagePoint {
 border: 1px solid #693;
 padding: 0.2em 0.5em;
 font-weight: bold; 
 background: #693; color: #FFF;
  } 

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

<script type='text/javascript'>;
var home_page='/';

ocation.href;
var postperpage=7;
var urlactivepage=
l
var numshowpage=4;
var upPageWord ='السابق';

src='http://navigation-blog
var downPageWord ='التالي';
</script>;
<script

 ger-zoom.googlecode.com/files/numbnav4.js' type='text/javascript'></script>}

احفظ القالب وشارك واضغط  أعجبني من فضلك.

...تابع القراءة

كود لحذف عبارة إظهار الرسائل ذات التسميات، تخلص من هذه العبارة التي تعطي مظهر سىء للمدونة.

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

<b:includable id='status-message'> 
<b:if cond='data:navMessage'> 
<div class='status-msg-wrap'> 
<div class='status-msg-body'> 
<data:navMessage/> 
</div> 
<div class='status-msg-border'> 
<div class='status-msg-bg'> 
<div class='status-msg-hidden'><data:navMessage/></div> 
</div> 
</div> 
</div> 
<div style='clear: both;'/> 
</b:if> 
</b:includable>

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

<b:includable id='status-message'> 
<b:if cond='data:navMessage'> 
<div> 
</div> 
<div style='clear: both;'/> 
</b:if> 
</b:includable>

احفظ القالب وانتهت المشكلة.

...تابع القراءة

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

قم بالبحث عن الرمز ]]></b:skin> ثم قم بلصق الكود التالي قبله تماما.

/*-------------------------- Narrow black Orange-------------*/ 
.MBT-readmore{ 
background:#fff; 
text-align:right; 
cursor:pointer; 
color:#EB7F17; 
margin:5px 0; 
border-left:400px dashed #474747; 
border-right:2px solid #474747; 
border-top:2px solid #474747; 
border-bottom:2px solid #474747; 
padding:2px; 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
font:bold 11px sans-serif; 
} 
.MBT-readmore:hover{ 
background:#EB7F17; 
color:#fff; 
border-left:400px dashed #474747; 
border-right:2px solid #EB7F17; 
border-top:2px solid #EB7F17; 
border-bottom:2px solid #EB7F17; 
} 
.MBT-readmore a { 
color:#fff; 
text-decoration:none; 
}
.MBT-readmore a:hover { 
color:#fff; 
text-decoration:none; 
} 

ثم ابحث عن الرمز <data:post.body/> وقبله تماما أضف الكود التالي.

<b:if cond='data:blog.pageType != "item"'> 
<a expr:href='data:post.url'>
<div style="text-align: right;">Read More ->></div></a> 
</b:if>

واذا أردت استخدام عبارة "اقرأ المزيد" أيقونة أو صورة بدلا من كتابة استخدم الكود التالي بدلا من السابق.

<b:if cond='data:blog.pageType != "item"'> 
<a expr:href='data:post.url'>
<div style="text-align: right;">< img src=http://xyz.com border="0"/></div></a> 
</b:if>

استبدل رالرابط الملون بالأحمر رابط الصورة أو الأيقونة واحفظ القالب.

...تابع القراءة

كود ترقيم صفحات بلوجر بالعربي ، فمعظم الأكواد الموجود هي أكواد باللغات الأجنبية وفي الكثير من الأحيان لا تتلائم والمدونات العربية، لذالك فترقيم مدونات بلوجر باللغة العربية يعطي طابع مميز للمدونات العربية ويجعلها تظهر أكثر احترافية.

نقوم بالبحث عن الرمز </body> ونقوم بإضافة الكود التالي قبله . ضع مكان xxx عدد التدوينات بالصفحة الواحدة.

<!--Page Navigation Starts-->

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

  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>

ageNum=3;
    var upPageWord =&#39; السابق &#
var pageCount=xxx7;    var display
P39; ;
    var downPageWord =&#39; التالي &#39; ;

t>
   <script src='http://aymangaber.we
var allpages =&#39; الصفحات &#39; ;
   </scri
pbs.com/HTML/blogger-page-nav.js' type='text/javascript'/>
  </b:if>
</b:if>

}
<!--Page Navigation Ends --
>

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

.showpageArea {font-family:verdana; color: #000; font-size:11px; margin:10px;}
.showpageArea a {color: #000; text-shadow:0 1px 2px #fff; font-weight: 700;}

showpageNum a:hover {border:1px solid #888; }
.showpageOf{margin:0 8px 0 0;
.showpageNum a {padding: 3px 8px; margin:0 4px; text-decoration: none;}    

.}  

pagePoint {color:#fff; text-shadow:0 1px 2px #333; padding: 3px 8px; margin: 2px;   font-weight: 700; text-decoration: none; }}
.sho
w

احفظ القالب.

...تابع القراءة

كود مميز لترقيم لترقيم مدونات بلوجر pagination blogger widget بدون ادخال أي تعديل على القالب الرئيسي، كود يتم اضافته مباشرة عن طريق أداة  HTML/Javascript.

<style>

.showpageArea a {

text-decoration:underline;
}
.showpageNum a {

e;
border: 1px solid 
text-decoration:no
n#EF00BF; /* لون إطار الأرقام */

wpageNum a:ho
margin:0 3px;
padding:3px;
}
.sh
over {

 1px solid #EFB700; /*لون إطار الأرقام عند لمسه بالماوس */
backgr
border
:ound-color:#00EFEF; /* لون مساحة الإطارعند لمسه بالماوس*/
}

/
text-decoratio
.showpagePoint {
color::#EF2000; /* لون رقم الصفحة المفتوحة 
*n:none;
border: 1px solid #FA2100; /* لون إطار رقم الصفحة المفتوحة */

x;
padding:3px;
}
.showpageOf {
text-decoration:none;
paddi
background:#E9FA00; /*لون مساحة إطار رقم الصفحة المفتوحة */
margin:0 3
png:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #A256C3; /* لون إطار "التالي, السابق" */

:#0AEA82; /*
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
colo
rلون الأرقام */
}

</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;

LablePage = thisUrl.indexO
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var i
sf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;

14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf(
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")
+"?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


ageWord = 'Last';
var upPageWord ='Prevous';
var downPageWord =
var pageCount=5; /* عدد المواضيع المراد عرضها في صفحة الواحدة*/
var displayPageNum=3; /* عدد الصفحات التي يتم إدراجها */
var firstPageWord = 'First';
var end
P'Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {

category[c]; c++) {
if(encodeURIComponent(post_
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post
.category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;

{

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timesta
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category
)mp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){

><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml =
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage
" '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{

downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+
 -displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.g
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+
'etElementById("blog-pager");

if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

}
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.monte-escalier-prix.org">www.monte-escalier-prix.org</a></div
>

طريقة اضافة الكود سهلة وهي اضافة أداة ثم اختر HTML/Javascript احفظ الأداة وضعها اسفل جسم الرسائل.

...تابع القراءة

كود جميل لقائمة مسندلة لمدونات بلوجر

ابحث على الرمز ></b:skin> أضف قبله مباشرة الكود التالي

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}

ثم ابحث عن الرمز التالي </head> اضف الكود التالي قبله مباشرة 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>

احفظ القالب

من لوحة التحكم اختر التخطيط ثم اختر اضافة أداة ثم اختر عبارة HTML / JavaScript وقم بلصق الشفرة أو الكود التالي :

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">AllBlogTools</a></li>
  </li></ul>

...تابع القراءة

كود جميل جدا لترقيم مدونات بلوجر، يمكنك اضافة الكود مباشرة الى جسم المدونة عن طريق أداة HTML/JavaScript ثم قم بحفظ الأداة.

    <!-- Stylish colored Navigation Widget For Blogger By UinEgy @ http://www.uniegy.blogspot.com --> <style type="text/css"> #blog-pager{padding:5px 0 !important;} .showpageArea {font-weight: bold;margin:5px;}/* www.uniegy.blogspot.com */ .showpageArea a {text-decoration:underline;color: #fff;}/* www.uniegy.blogspot.com */ .showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;margin:0 3px;padding:3px 5px; background: #9dd53a; background: -moz-linear-gradient(top, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); }/* www.uniegy.blogspot.com */ .showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc; background: #6db3f2; background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); } /* www.uniegy.blogspot.com */ .showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.uniegy.blogspot.com */ .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.uniegy.blogspot.com */ .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.uniegy.blogspot.com */ </style> <script type='text/javascript'> var home_page="/"; var urlactivepage=location.href; var postperpage=5; var numshowpage=9; var upPageWord ='السابق'; var downPageWord ='التالي'; </script> <script src='http://uinegy.googlecode.com/svn/wiki/uniegy_bloggerpagenavi.js' type='text/javascript'></script> <!-- Stylish colored Numbered Page Navigation Widget For Blogger By UinEgy @ http://www.uniegy.blogspot.com -->

...تابع القراءة

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

قم بالبحث عن الرمز </body> وضع قبله مباشرة الكود التالي. 

<!-- PAGE NAVIGATION STAR-->

<script type='text/javascript'>
var home_page=&quot;/&quot;;

ef;
var postperpage=7;
var numsh
var urlactivepage=location.h
rowpage=4;
var upPageWord =&#39;&#9668;&#39;;

}
var downPageWord =&#39;&#9658;&#39;
;

ثم نقوم بالبحث عن الرمز التالي ]]></b:skin> ونضيف قبله مباشرة الكود التالي.

/* -- NUMBER PAGE NAVIGATION -- */.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;

x solid #999;
  -webkit-
text-decoration: none;
  border:1
pborder-radius:3px;-moz-border-radius:3px;

showpageOf {
margin:0 
background: #3B5998;
  color:#fff;
  }


.8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;

xt-shadow:0 1px 2px
background: #ccc;
  }

.showpagePoint {
  color:#fff;
  t
e #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;

x solid #999;
  background: #F1BA24;
  text-decorat
-webkit-border-radius:3px;-moz-border-radius:3px;
  border:1
pion: none;

}
}

احفظ القالب وشارك الموضوع اذا أردت ذالك.

...تابع القراءة

كود أخر رائع لترقيم رسائل مدونات بلوجر pagination blogger post اتبع الخطوات الأتية فقط.

ابحث عن الرمز ></b:skin>  ثم ألصق الكود التالي قبله مباشرة.

.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;}

.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}

.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

ثم ابحث عن الرمز التالي</body> اضف الكود التالي قبله مباشرة .

<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>

قم بحفظ القالب وأدخل التعديلات الآزمة.

...تابع القراءة

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

انتقل الى تحرير HTML وابحث عن الرمز </head> واضف قبله مباشرة الكود التالي.

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول الملخص للمواضيع بدون صورة */
summary_img = 250; /* طول الملخص للمواضيع ذات صورة*/
img_thumb_height = 128; /* عرض الصورة في الملخص*/
img_thumb_width = 128; /*طول الصورة في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='text/javascript'/><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

ثم ابحث عن الرمز <data:post.body/> استبدله مباشرة بالكود التالي.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>إقرأ المزيد...</a></span>
<a href='http://abu-iyad.blogspot.com/2010/07/read-more-for-blogger.html' style='display:none;'>Résumé</a><a href='http://abu-iyad.blogspot.com' style='display:none;'>abuiyad</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

احفظ القالب وغير ما يمكنك تغييره.

...تابع القراءة

كود جميل جدا لترقيم صفحات بلوجر blogger، كود بسيط وغير معقد اضافته سهلة فقط اتبع الخطوات البسيطة التالية.
قم بالبحث عن الرمز التالي. ]]></b:skin> قبله مباشرة أضف الكود التالي.

 .showpageArea { color: #666666; margin: 10px 5px 3px 5px; padding:  0px; float: left; display: inline; font-size:12px; } .showpageArea a {  background: #ffffff; padding: 4px 7px; margin: 0px 5px 0px 0px;  text-decoration: none; border: 1px solid #64CDE5; color: #666666;  -moz-border-radius: 5px; -webkit-border-radius: 5px; display: inline;  float: left; } .showpageNum a { background: #ffffff; padding: 4px 7px;  margin: 0px 5px 0px 0px; text-decoration: none; border: 1px solid  #64CDE5; color: #666666; -moz-border-radius: 5px; -webkit-border-radius:  5px; display: inline; float: left; } .showpageNum a:hover { background:  #C6E4EC!important; text-decoration: none; border: 1px solid  #6BCDE5!important; } .showpagePoint { font-weight: bold; background:  #C6E4EC; padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration:  none; border: 1px solid #46BDDB; color: #666666; -moz-border-radius:  5px; -webkit-border-radius: 5px; display: inline; float: left; }  .showpageOf { background: #ffffff; padding: 4px 7px; margin: 0px 5px 0px  0px; text-decoration: none; border: 1px solid #64CDE5; color: #666666;  -moz-border-radius: 5px; -webkit-border-radius: 5px; display: inline;  float: left; } .showpage a { background: #ffffff; padding: 4px 7px;  margin: 0px 5px 0px 0px; text-decoration: none; border: 1px solid  #B9A2A2; color: #674D4D; -moz-border-radius: 5px; -webkit-border-radius:  5px; display: inline; float: left; } .showpage a:hover { background:  #C6E4EC!important; text-decoration: none; border: 1px solid  #64CDE5!important; } .showpageNum a:link,.showpage a:link { background:  #ffffff; padding: 4px 7px; margin: 0px 5px 0px 0px; text-decoration:  none; border: 1px solid #64CDE5; color: #666666; -moz-border-radius:  5px; -webkit-border-radius: 5px; display: inline; float: left; }

ثم ابحث عن الرمز التالي  </body> ونضيف قبله مباشرة الكود التالي.

<script type='text/javascript'> var home_page=&quot;/&quot;; var urlactivepage=location.href; var postperpage=6; var numshowpage=10; var upPageWord ='السابقة '; var downPageWord ='التالية '; </script> <script src='http://bplugins.googlecode.com/files/pagenumbers.js' type='text/javascript'/>

ثم احفظ القالب.

...تابع القراءة

اضافة كود ترقيم مدونات بلوجر عن طريق html/javascript، بحيث لن تكون بحاجة الى تعديل القالب الخاص بمدونتك وتجنب حدوث أخطاء بالقالب.

انتقل الى لوحة التحكم واختر التخطيط ثم اختر  html/javascript وقم باضافة الكود التالي.

<style type=
'text/css'
>#blog-pager{
padding
:
10px
0
;
clear
:
both
;}
.showpageNum a {
color
:
#333333
;
text-decoration
:
none
;
border
: 
1px
solid
#CCCCCC
;
margin
:
0
3px
;
padding
:
3px
7px
;
background-color
:
#FFFFFF
;}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {
color
:
#333333
;
border
: 
1px
solid
#CCCCCC
;
padding
:
3px
7px
;
background-color
:
#CCCCCC
;
margin
:
0
3px
;}
.showpageOf {
color
:
#333
;
text-decoration
:
none
;
padding
:
3px
7px
;
margin
: 
0
3px
0
0
;}
</style>
<script style=
'text/javascript'
>
var numshowpage=
10
;
var postperpage =
5
;
var upPageWord=
"Previous"
;
var downPageWord=
"Next"
;
var urlactivepage=location.href;
var home_page=
"/"
;
</script>
<script style=
'text/javascript'
src=
'http://bloggerblogwidgets.googlecode.com/files/way2blogging_bloggerpagenavi.js'
></script>

احفظ القالب .

...تابع القراءة

يمكنك الأن ترقيم مدونات بلوجر بطريقة بسيطة Simple Pagination For Blogger ولن تتطلب منك الكثير من الوقت.

قم بتحرير قالب مدونتك وابحث عن الرمز </b:skin> قبله مباشرة أضف الكود التالي.

.pagnavi {
    text-align: center;
    margin: 20px
}
. pagnavi a, . pagnavi  span {
    background: #fff;
    display: inline-block;
    margin-right: 3px;
    padding: 4px 12px;
    text-decoration: none;
    line-height: 1.5em;     -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
. pagnavi a:hover {
    background-color: #BEBEBE;
    color: #fff;
}
. pagnavi a:active {
 background: rgba(190, 190, 190, 0.75);
}

احفظ القالب.

...تابع القراءة