Համարակալում ենք Blogger-ի էջերը

Քիչ առաջ թերթում էի բլոգի մեջ տեղադրված՝ Blogger-ի մասին նյութերը և նկատեցի, որ չեմ խոսել ամենակարևոր հավելումներից մեկի՝ էջերի համարակալման մասին: Եվ այս ուշ ժամին որոշեցի ուղղել բացթողումս: Քանի որ արդեն գիշեր է և դժվար է երկար-բարակ խոսել, այդ իսկ պատճառով միանգամից անցնում եմ տեղադրման գործընթացին:

Ինչպես միշտ, այս անգամ ևս հիշեցնում եմ.....Նախքան որևէ փոփոխություն անելը կրկնօրինակում ենք բլոգը: Եթե չգիտեք, թե ինչպես դա անել, ապա կարող եք օգտվել այս նյութից:

Քայլ 1-Ավելացնում ենք Css կոդը: Մուտք են գործում Blogger-ի կառավարման էջ և կատարում ենք այս քայլերը՝ Design > Edit Html կամ (Шаблон › Изменить HTML>Расширить шаблоны виджета):

]]></b:skin>

Վեևի քայլերը կատարելուց հետո գտնում ենք ]]></b:skin> կոդը և նրա վերևում տեղադրում ենք նշված CSS կոդը

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}

Զգուշացում -Եթե բլոգում ցանկանում եք տեղադրել ներքևում նշված տարբերակներից որևէ մեկը, ապա այս կոդի փոխարեն ]]></b:skin> վերևում տեղադրում եք դուր եկած տարբերակի կոդը:

Քայլ 2-վերևում նշվածը անելուց հետո, փորձում ենք գտնել հաջորդ կոդը, որը նշված է ներքևում

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Եթե գտել եք կոդը, ապա նրա անմիջապես ներքևում տեղադրեք այս կոդը

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "Ետ",
lastText: "Առաջ",
nextText: "»",
prevText: "«" }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Քայլ 3- կատարում ենք վերջին քայլը, գտնում ենք ներքևում նշված առաջին կոդը և այն ամբողջությամբ փոխարինում ենք նրան հաջորդող կոդով՝


<b:include name='nextprev'/>

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Վերջում ներկայացնեմ մի էջերի համարակալման մի քանի տարբերակ՝

Տարբերակ 1

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

Տարբերակ 2

.pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}

Տարբերակ 3

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}
.pagenavi .pages{display:none}

Տարբերակ 4

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}

Տարբերակ 5

.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}
.pagenavi .pages{color:#fff}

Տարբերակ 6

.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}
.pagenavi .pages{color:#666}

Տարբերակ 7

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none}
.pagenavi .pages{display:none}

Տարբերակ 8

.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}
.pagenavi .pages{background:none;border:none}

Վերջում տրված տարբերակները պետք է տեղադրեք ]]></b:skin> կոդի վերևում:
Ահա և այսքանը այս ուշ ժամի համար:

Բարի գիշեր Հայաստան, բարի գիշեր բլոգասեր հայեր:

MRBlogger