Blogger Widgets Blogger Widgets

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

|
Unknown | 12:14 | Best Blogger Tips

Մի քանի օր առաջ բլոգում տեղադրեցի մի նյութ, որտեղ գրված էր թե ինչպես կարելի է տեղադրել մենյու 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>
Հավանեցի՞ք: Տեղեկացրեք ընկերներին:
Հավանեցիր` դե տեղեկացրու ընկերներիդ
Нравится

1 комментарий:

Դեպի վեր