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

Մի քանի օր առաջ բլոգում տեղադրեցի մի նյութ, որտեղ գրված էր թե ինչպես կարելի է տեղադրել մենյու Blogger-ում: Սակայն պարզ դարձավ, որ այդ մենուն ոչ բոլոր թեմաների հետ է համատեղելի և որոշ օգտվողներ չկարողացան այդպես էլ այն տեղադրել: Այսօր որոշեցի ևս մեկ անգամ անդրադառնալ այդ թեմային և փորձել ներկայացնել մեկ այլ մենյու: Հուսով եմ, որ այս նյութը ավելի օգտակար կլինի: 

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

• Պահպանելուց հետո մտնում ենք բլոգի կառավարման էջ և կատարում ենք հետևյալ քայլերը՝ Design > Edit Html կամ (Шаблон › Изменить HTML>Расширить шаблоны виджета):Այս քայլերը կատարելուց հետո փորձում ենք գտնել սև </head> կոդը, որց անմիջապես հետո տեղադրում ենք ներքևում գրված կոդը:

</head>

<!--start drop menu-->

<style type='text/css'>

/* menu styles */

#jsddm

{ margin: 0;

padding: 0;}

#jsddm li

{ float: left;

list-style: none;

font: 12px Tahoma, Arial}

#jsddm li a

{ display: block;

background: #0033CC; /*Այլ գույներ*/

-moz-border-radius: 6px;-webkit-border-radius: 6px;

padding: 5px 12px;

text-decoration: none;

border-right: 1px solid white;

width: 70px;

color: #EAFFED; /*Հղումների գույներ*/

white-space: nowrap}

#jsddm li a:hover

{ background: #24313C /*Այլ գույներ*/; -moz-border-radius: 6px;-webkit-border-radius: 6px;}

#jsddm li ul

{ margin: 0;

padding: 0;

position: absolute;

z-index:100;

visibility: hidden;

border-top: 1px solid white}

#jsddm li ul li

{ float: none;

display: inline}

#jsddm li ul li a

{ width: auto;

background: #BFCFFE; /*Փոխեք մենյուի գույնը այստեղից*/

color: #24313C /*բաժինների գույները փոխեք այստեղից*/

}

#jsddm li ul li a:hover

{ background: #809FFE /*Այլ գույներ*/}

</style>

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

<script type='text/javascript'>

var timeout = 500;

var closetimer = 0;

var ddmenuitem = 0;

function jsddm_open()

{ jsddm_canceltimer();

jsddm_close();

ddmenuitem = $(this).find(&#39;ul&#39;).eq(0).css(&#39;visibility&#39;, &#39;visible&#39;);}

function jsddm_close()

{ if(ddmenuitem) ddmenuitem.css(&#39;visibility&#39;, &#39;hidden&#39;);}

function jsddm_timer()

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

function jsddm_canceltimer()

{ if(closetimer)

{ window.clearTimeout(closetimer);

closetimer = null;}}

$(document).ready(function()

{ $(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseover&#39;, jsddm_open);

$(&#39;#jsddm &gt; li&#39;).bind(&#39;mouseout&#39;, jsddm_timer);});

document.onclick = jsddm_close;

</script>

<!--end menu code-->

Տեղադրելուց հետո սեղմում ենք պահպանել-Save

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

<ul id="jsddm">

<li><a href="/">Գլխավոր</a>

<li><a href="#">Պիտակ</a>

<ul>

<li><a href="#">Պիտակ</a></li>

<li><a href="#">Պիտակ</a></li>

<li><a href="#">Պիտակ</a></li>

</ul>

</li>

<li><a href="#">ArmReal</a>

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

</ul>

</li>

<li><a href="#">MrBlogger</a></li>

<li><a href="#">Պիտակ</a></li>

<li><a href="#">Պիտակ</a></li>

</li></ul>

Վերջում միայն  ասեմ, որ առաջին կոդի մեջ նշված են որոշ գույների կոդեր, որոնք կարող եք փոխել: