Ինչպես տեղադրել հորիզոնական բացվող մենյու Blogger-ում

Հարգելի Blogger.com-ի սիրահարներ, շտապեմ տեղեկացնել, որ այսուհետ բլոգում կտեղադրվեն  Blogspot-ին վերաբերվող նյութեր: Այս կերպ կարելի կլինի խուսափել էլ-փոստին ուղարկվող հարցերից և այդ հարցերը կքննարկվեն հենց բլոգում: Սա ավելի հարմարավետ տարբերակ է: Ուղարկված հարցերից շատերում հարցը հետևյալն է՝ «Ինչպես տեղադրենք բացվող մենյու» և դա է պատճռը, որ առաջին նյութում հենց կխոսեմ հորիզոնական մենյու տեղադրելու մասին: Blogger.com-ի մասին տեղադրված նյութերը կարող եք գտնել Մենյուի-կայքեր բաժնում:

Եվ այսպես սկսեենք քայլ առ քայլ տեղադրել :

Նախքան մենյուն տեղադրելը պահպանեք ձեր բլոգի օրինակը, որպեսզի ինչ որ խնդիր լինելու դեպքում արագ վերականգնեք բլոգը: 

• 1.Քայլ-Նախ տեղադրելու համար բացում ենք Blogger.com-ի մեր էջը, ապա կատարում քայլերը հերթականությամբ՝  Шаблон >> Изменить Html >> Расширить шаблоны виджета>>: Բացված պատուհանում փնտրում ենք 

]]></b:skin>-հեշտ գտնելու համար կարող եք օգտվել Ctrl+F համադրումից

Այս կոդը գտնելուց հետո , հենց նրա վերևը ավելացնում ենք հետևյալ CSS կոդը՝

#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;
}

• Քայլ 2-առաջին քայլը ավարտելուց հետո անցնում ենք երկրորդ քայլին: Այս անգամ  նույն բացված պատուհանում փնտրում ենք հետևյալը՝

</head>-կրկին հեշտ գտնելու համար օգտվեք Ctrl-F համադրումից

Այս կոդը գտնելուց հետո, նրանից անմիջապես հետո տեղադրեք հետևյալ CSS կոդը՝

<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>

Կոդը տեղադրելուց հետո կարող եք ուղակի ստուգելու համար տեսնել ձեր բլոգի փորձնական տարբերակը, որպեսզի սխալի դեպքում, խուսափեք հետագա բարդություններից: Եթե ամեն ինչ ճիշտ եք արել և փորձնական տարբերակը բացվում ինչպես որ հարկնե, ապա սեղմեք Պահպանել:

• Քայլ 3-երրորդ քայլը հորիզոնական մնյու տեղադրելու վերջին և ամենահեշտ քայլն է:

Blogger-ի կարգավորումներ էջից, կատարում ենք այս քայլերը հերթականությամբ- Дизайн>>Добавить гаджет>>HTML / JavaScript>>: Բացված պատուհանում տեղադրում ենք հետևյալ Html կոդը՝

<ul id="jsddm">
  <li><a href="#">Գլխավոր</a>
  <li><a href="#">Մենյու 1</a>
  <ul>
  <li><a href="#">Բաժին 1-1</a></li>
  <li><a href="#">Բաժին 1-2</a></li>
  <li><a href="#">Բաժին 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Մենյու 2</a>
  <ul>
  <li><a href="#">Բաժին 2-1</a></li>
  <li><a href="#">Բաժին 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Մենյու 3</a>
  <ul>
  <li><a href="#">Բաժին 3-1</a></li>
  <li><a href="#">Բաժին  3-2</a></li>
  <li><a href="#">Բաժին 3-3</a></li>
  <li><a href="#">Բաժին 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Մենյու 4</a></li>
  <li><a href="#">Մենյու 5</a></li>
  <li><a href="http://www.armreal.ru">ArmReal.Ru</a></li>
  </li></ul>

Կոդը ավելացնելուց հետո սեղմեք Сахранить:
Ահա և վերջ մենյուն ավելացված է, մնում է միայն ավելացնել պիտակների հղումները և վերջ: Հղումները ավելացնելու համար, հղումը տեղադրեք #-ի փոխարեն:

<li><a href="http://www.armreal.ru">ArmReal.Ru</a></li>-ձեր հղումները պետք է ունենան այս տեսքը:

Մենյուի նախնական տարբերակը կարող եք տեսնել այստեղ:
Վերջում այս կատարված քայլերը նկարների տեսքով:
ArmReal.Ru

Դիտվել է

Posted in: Blogger.com