.: Գեղեցիկ մենյուն Blogger-ի համար

Գեղեցիկ մենյուն Blogger-ի համար

Մի քանի օր է արդեն, ինչ ցանկանում եմ բլոգում տեղադրել արդեն շատ վաղուց խոստացված նյութը՝ «Թերթվող նյութերի»-ի մասին: Եվ ահա այսօր որոշեցի անդրադառնալ դրան: Գրեցի բոլոր կոդերը, պատրաստեցի նկարներ և մնացած անհրաժեշտ բաները և հանկարծ տեղի ունեցավ անսպասելին. լույսերը անջատվեցին :(

Քանի որ կոդը բավականին բարդ և երկար ժամանակ է պահանջում, այդ պատճառով որոշեցի խնայել ժամանակ և տեղադրել նյութ «Բացվող հորիզոնական» մենյուի մասին:

Բլոգում արդեն 2 անգամ(Գեղեցիկ DropDown մենյու Blogger-ի համար, Ինչպես տեղադրել հորիզոնական բացվող մենյու Blogger-ում) տեղադրել եմ այսպիսի նյութ, բայց այս անգամ այն այլ է և ավելի բարդ կառուցվածք ունի:

Եվ այսպես անցնենք գործի.

Ինչպես միշտ , այս անգամ ևս նախքան փոփոխություններ կատարելը պահպանում ենք բլոգի կրկնօրինակը:

Որից հետո կատարում ենք հետևյալ քայլերը հերթականությամբ.

Design > Edit Html կամ(Шаблон › Изменить HTML>Расширить шаблоны виджета):Այս քայլերը կատարելուց հետո փորձում ենք գտնել <body> կոդը, որց անմիջապես հետո տեղադրում ենք ներքևում գրված կոդը: Եթե այս կոդը չի գտնվում կարող եք ներքևի կոդը տեղադրել <div id='outer-wrapper'> այս կոդից առաջ՝

`<link href='http://dl.dropbox.com/u/11103024/menu.css' media='screen' rel='stylesheet' type='text/css'/> <b:section id='menu' maxwidgets='1' showaddelement='no'> <b:widget id='HTML91' locked='false' title='Menu' type='HTML'/> </b:section>`

Այս կոդը տեղադրելուց հետո պահպանեք փոփոխությունները սեղմելով՝Պահպանել:

Հաջորդ քայլում պետք է կատարեք հետևյալը՝ Дизайн>Добавить гаджет>HTML/JavaScript և տեղադրում ենք ներքևում գրված կոդը՝

<ul class="menu"> <li class="no_drop"><a href="#">Գլխավոր</a></li> <li><a href="#" class="drop">Խումբ 1</a> <div class="dropdown_1column"> <div class="col_1"> <ul> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> </ul> </div></div></li> <li><a href="#" class="drop">Խումբ 2</a> <div class="dropdown_2columns"> <div class="col_1"> <h3>Գլխավոր 1</h3> <ul> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> </ul> </div> <div class="col_1"> <h3>Գլխավոր 2</h3> <ul> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> </ul> </div> <div class="col_1"> <h3>Գլխավոր 3</h3> <ul> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> </ul> </div> <div class="col_1"> <h3>Գլխավոր 4</h3> <ul> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> <li><a href="#">Պիտակ</a></li> </ul> </div></div></li></ul>

Պահպանում ենք գադջիթը և տեղադրում հորիզոնական դիրքով:

*Հարգելի օգտվողներ, եթե կցանկանաք փոփոխոխություններ անել մենյում, ապա սեղմեք այս հղման վրա՝ Menu.CSS: Բացելուց հետո պատճենք հայտնված կոդերը կատարեք ցանկալի փոփոխությունները և կոդը տեղադրեք </b:skin> կոդի վերևում:

Զգուշացում:Եթե կատարում եք վերջին քայլը, ապա նախօրոք ջնջեք առաջին քայլում կանաչ գույնով նշված կոդը:

0 коммент.:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)