OzzY SuNaR: Hover Efektli Açılır Blogger Menüleri

Blogger sitenizde kullanabileceğiniz bir çok farklı özellikte menü çeşitlerini Bilgi Cafem 61 Menü başlığı altında sizinle paylaştık,ve bu başlık altına yeni bir menü çeşitlerini ekleyeceğiz.Bu menüler Blog sitenizin ana sayfa görüntüsünü düzgün gösterecek ayrıca etiketlerinize göre bu menülerden birini kullanabilirsiniz.Menülerin özelliği ana başlığa tıkladığınızda aşağı doğru açılır kapanır içerik menü başlıkları görüntülenir,ikinci başlığa tıkladığınızda diğer menü kapanır ve tıklamış olduğunuz menü aktif olarak açılır.Böylece kullandığınız temaya fazla menü eklemek yerine bu menülerden yararlanabilirsiniz.

Hover Efektli Açılır Menü Kurulumu

* Blogger hesabınıza giriş yapın.

* Kumanda paneli >> Şablon >> HTML Düzenle yolunu izleyin.

* Her ihtimale karşı şablon yeteğinizi alın.

* CTRL+F tuşları ]]></b:skin> kodunu bulun ve üst kısmına kod1 kısmındaki kodları ekleyin.

* Tekrar CTRL+F tuşları ile ]]></b:skin> veya </head> kodunu bularak üst kısmına kod2 kısmındaki kodları ekleyin.Bu adımda hata alırsanız kodları alt kısıma ekleyerek deneyin.Şablonu kaydedip çıkın.

* Son olarak kod3 kısmındaki kodları Gadget ekle diyerek ekleyin.

NOT: Aşağıda ki menülere ait kodları kod1 kod2 kod3 diye ayırdım.Üsteki anladı mı buna göre uygulayın.

1.Menü

Kod1

]]></b:skin> kodunun bir üst kısmına ekleyin.

.arrowlistmenu{ width: 180px; /*width of accordion menu*/ }  .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/ font: bold 14px Arial; color: white; background: black url(titlebar.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ cursor: hand; cursor: pointer; }  .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/ background-image: url(titlebar-active.png); }  .arrowlistmenu ul{ /*CSS for UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ }  .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ }  .arrowlistmenu ul li a{ color: #A70303; background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; }  .arrowlistmenu ul li a:visited{ color: #A70303; }  .arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #A70303; background-color: #F3F3F3; }

Kod2
]]></b:skin> veya </head> kodunun üst veya alt kısmına ekleyin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="ddaccordion.js"> </script>  <script type="text/javascript">  ddaccordion.init({ headerclass: "expandable", //Shared CSS class name of headers group that are expandable contentclass: "categoryitems", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs) animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script>

Kod3
Gadget Ekle

<div class="arrowlistmenu"> <h3 class="menuheader expandable">CSS Library</h3><ul class="categoryitems"><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Horizontal CSS Menus</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Vertical CSS Menus</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Image CSS</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Form CSS</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Links & Buttons</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Other</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Browse All</a></li></ul><h3 class="menuheader expandable">CSS Drive</h3><ul class="categoryitems"><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Gallery</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Menu Gallery</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Web Design News</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Examples</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Compressor</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Forums</a></li></ul><h3 class="menuheader expandable">JavaScript Kit</h3><ul class="categoryitems"><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ" >Free JavaScripts</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">JavaScript tutorials</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">JavaScript Reference</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">DOM Reference</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">DHTML & CSS</a></li></ul><h3 class="menuheader" style="cursor: default">FeedBack</h3><div>Regular contents here. Header does not expand or contact. </div></div>

2. Menü

Kod1
]]></b:skin> kodunun bir üst kısmına ekleyin.

.glossymenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; border-bottom-width: 0; }  .glossymenu a.menuitem{ background: black url(glossyback.gif) repeat-x bottom left; font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: white; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none; }   .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; }  .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/ position: absolute; top: 5px; right: 5px; border: none; }  .glossymenu a.menuitem:hover{ background-image: url(glossyback2.gif); }  .glossymenu div.submenu{ /*DIV that contains each sub menu*/ background: white; }  .glossymenu div.submenu ul{ /*UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; }  .glossymenu div.submenu ul li{ border-bottom: 1px solid blue; }  .glossymenu div.submenu ul li a{ display: block; font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: black; text-decoration: none; padding: 2px 0; padding-left: 10px; }  .glossymenu div.submenu ul li a:hover{ background: #DFDCCB; colorz: white;

Kod2
]]></b:skin> veya </head> kodunun üst veya alt kısmına ekleyin

Kod3
Gadget ekle

<div class="glossymenu"><a class="menuitem" href="http://BLOGUM.blogspot.com">DersPHP.BlogSpoT.CoM</a><a class="menuitem submenuheader" href="#" >CSS Examples</a><div class="submenu"><ul><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Horizontal CSS Menus</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Vertical CSS Menus</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Image CSS</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Form CSS</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">DIVs and containers</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Links & Buttons</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Other</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Browse All</a></li></ul></div><a class="menuitem" href="http://BLOGUM.blogspot.com">JavaScript Reference</a><a class="menuitem" href="http://BLOGUM.blogspot.com">DOM Reference</a><a class="menuitem submenuheader" href="http://BLOGUM.blogspot.com">CSS Drive</a><div class="submenu"><ul><li><a href="http://BLOGUM.blogspot.com">CSS Gallery</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Menu Gallery</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Web Design News</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Examples</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Compressor</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Forums</a></li></ul><img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" /></div><a class="menuitem" href="http://BLOGUM.blogspot.com" style="border-bottom-width: 0">Coding Forums</a></div>DersPHP

3. Menü

Kod1

]]></b:skin> kodunun bir üst kısmına ekleyin.

.urbangreymenu{ width: 190px; /*width of menu*/ }  .urbangreymenu .headerbar{ font: bold 13px Verdana; color: white; background: #606060 url(arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/ margin-bottom: 0; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 7px 0 7px 31px; /*31px is left indentation of header text*/ }  .urbangreymenu .headerbar a{ text-decoration: none; color: white; display: block; }  .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; /*bottom spacing between each UL and rest of content*/ }  .urbangreymenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ }  .urbangreymenu ul li a{ font: normal 12px Arial; color: black; background: #E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; /*link text is indented 8px*/ text-decoration: none; }  .urbangreymenu ul li a:visited{ color: black; }  .urbangreymenu ul li a:hover{ /*hover state CSS*/ color: white; background: black; }

Kod2
]]></b:skin> veya </head> kodunun üst veya alt kısmına ekleyin

Kod3
Gadget ekle

<div class="urbangreymenu"> <h3 class="headerbar"><a href="#">CSS Library</a></h3><ul class="submenu"><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Horizontal CSS Menus</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Vertical CSS Menus</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Image CSS</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Form CSS</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">DIVs and containers</a></li><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li><li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li></ul><h3 class="headerbar"><a href="#">JavaScript Kit</a></h3><ul class="submenu"><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ" >Free JavaScripts</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">JavaScript tutorials</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">JavaScript Reference</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">DHTML & CSS</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Web Design</a></li><li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Free Java Applets</a></li></ul></div>

OzzY SuNaR

12 Eylül 2014 Cuma

Hover Efektli Açılır Blogger Menüleri

Hiç yorum yok:

Yorum Gönder