jQuery դարակներ Blogger-ի համար

Այժմ ձեզ կներկայացնեմ մի հետաքրքիր հավելում Blogger-ի համար, որը ավելացնելուց հետո բլոգում կավելանան նոր՝ այսպես կոչված «դարակներ»: Այս հավելումը տեղադրվում է շատ հեշտ և կարելի է օգտագործել բլոգը ավելի գեղեցկացնելու ու հարմարավետ դարձնելու համար:

Ինչպես միշտ բլոգում փոփոխություն անելուց առաջ պահպանեք կրկնօրինակը: Իսկ թե դա ինչպես է տեղի ունենում կարող եք տեսնել այստեղ:

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

#tabMenu {margin:0;    padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}
/* this is the button images http://amatullah83.blogspot.com*/
li.comments {background:url(http://sites.google.com/site/amatullah83/bg/tabComment.png) no-repeat 0 -32px;}
li.posts {background:url(http://sites.google.com/site/amatullah83/bg/tabstar.png) no-repeat 0 -32px;}
li.category {background:url(http://sites.google.com/site/amatullah83/bg/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://sites.google.com/site/amatullah83/bg/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://sites.google.com/site/amatullah83/bg/tabRandom.png) no-repeat 0 -32px;}
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}
.box {width:227px}
.boxTop {background:url(http://sites.google.com/site/amatullah83/bg/boxTop.png)no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(http://sites.google.com/site/amatullah83/bg/boxBottom.png) no-repeat;
height:11px;}
.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block}
/* styling for the content*/
.boxBody div ul {    margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://sites.google.com/site/amatullah83/bg/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div li span {    font-size:8px;color:#9F9F9F;}
/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}

Քայլ 2- ավելացնում ենք jQuery կոդը: Կոդը ավելացնելու համար փնտրում ենք </head> կոդը և նրա վերևում ավելացնում ենք ներքևում գրված կոդը(եթե այլ հավելումների ժամանակ ևս տեղադրել եք նմանատիպ կոդ, ապա այս քայլը կարող եք բաց թողնել):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

Քայլ 3- Այս քայլում կրկին փորձում ենք գտնել </head> կոդը և նրա ներքևում ավելացնում ենք ներքոնշյալ կոդը: Կոդը ավելացնելուց հետո պահպանեք փոփոխությունները  և անցեք հաջորդ քայլին:

window.location = $(this).children().attr('href');
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});   
});
</script>

Քայլ 4- այս քայլում պետք է ավելացնել համապատասխան գադջիթը: Այն ավելացնելու համար մտնում ենք Design > Add A Gadget > Choose Html/Javascript և ավելացնում ենք ներքևում տեղադրված կոդը:

<div class="box">

<ul id="tabMenu">
<li class="posts selected"></li> <!-- default button-->
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>

<div class="boxTop"></div>

<div class="boxBody">
<!-- default page-->
<div id="posts" class="show">
<ul>
<li>Post 1</li>
<li>Post 2</li>
<li class="last">Post 3</li>
</ul>
</div>
<div id="comments">
<ul>
<li>Comment 1</li>
<li>Comment 2</li>
<li class="last">Comment 3</li>
</ul>
</div>
<div id="category">
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li class="last">Category 3</li>
</ul>
</div>
<div id="famous">
<ul>
<li>Famous post 1</li>
<li>Famous post 2</li>
<li class="last">Famous post 3</li>
</ul>
</div>
<div id="random">
<ul>
<li>Random post 1</li>
<li>Random post 2</li>
<li class="last">Random post 3</li>
</ul>
</div>

</div>

<div class="boxBottom"></div>

</div>

Սեղմում ենք  Պահպանել և ստուգում ենք բլոգը: