Blogger Siteler İçin Harika Bir Dropdown Menü Eklentisi

Blogunuzda biraz farklılık yaratmak istiyorsanız , tasarım açısından blogum daha güzel diyorsanız bu eklentiyi kullanmanızı tavsiye ederim blogunuzda yan tarafta duran ve bloga ayrı bir güzellik katan bir  dropdown menü eklentisi eklentinin önizlemesini aşağıdaki resimden görebilirsiniz.

Yapacağınız işlemler öncelikle aşağıdaki 1. kodu temanızın Css bölümüne yapıştırın. Daha sonrada 2. kodu blogunuzda gadget ekleme yöntemi ile kodları gadget olarak ekleyin. Daha sonra ise Javascript kodlarını ekleyin.

Önemli Bilgi: İşlemleri yapmadan önce temanızın yedeğini almanızda fayda var, zira yapamazsanız temanız bozulmadan geri eski haline getirebilirsiniz.

1. İşlem


Şablon kodlarınızın içinde Ctrl+F tuşlarını kullanarak   ]]></b:skin>  bu bölümü bulduktan sonra buranın hemen üzerine aşağıdaki Css kodlarını Ekleyin.

Css Kodları

.container {<br /> width: 350px;<br /> margin: 50px auto;<br /> }</p> <p>.container > ul {<br /> list-style: none;<br /> padding: 0;<br /> margin: 0 0 20px 0;<br /> }</p> <p>.dropdown a {<br /> text-decoration: none;<br /> }</p> <p>.dropdown [data-toggle=”dropdown”] {<br /> position: relative;<br /> display: block;<br /> color: white;<br /> background: #2980B9;<br /> -moz-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;<br /> -webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;<br /> box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;<br /> text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);<br /> padding: 10px;<br /> }</p> <p>.dropdown [data-toggle=”dropdown”]:hover {<br /> background: #2c89c6;<br /> }</p> <p>.dropdown .icon-arrow {<br /> position: absolute;<br /> display: block;<br /> font-size: 0.7em;<br /> color: #fff;<br /> top: 14px;<br /> right: 10px;<br /> }</p> <p>.dropdown .icon-arrow.open {<br /> -moz-transform: rotate(-180deg);<br /> -ms-transform: rotate(-180deg);<br /> -webkit-transform: rotate(-180deg);<br /> transform: rotate(-180deg);<br /> -moz-transition: -moz-transform 0.6s;<br /> -o-transition: -o-transform 0.6s;<br /> -webkit-transition: -webkit-transform 0.6s;<br /> transition: transform 0.6s;<br /> }</p> <p>.dropdown .icon-arrow.close {<br /> -moz-transform: rotate(0deg);<br /> -ms-transform: rotate(0deg);<br /> -webkit-transform: rotate(0deg);<br /> transform: rotate(0deg);<br /> -moz-transition: -moz-transform 0.6s;<br /> -o-transition: -o-transform 0.6s;<br /> -webkit-transition: -webkit-transform 0.6s;<br /> transition: transform 0.6s;<br /> }</p> <p>.dropdown .icon-arrow:before {<br /> content: ‘\25BC’;<br /> }</p> <p>.dropdown .dropdown-menu {<br /> max-height: 0;<br /> overflow: hidden;<br /> list-style: none;<br /> padding: 0;<br /> margin: 0;<br /> }</p> <p>.dropdown .dropdown-menu li {<br /> padding: 0;<br /> }</p> <p>.dropdown .dropdown-menu li a {<br /> display: block;<br /> color: #6e6e6e;<br /> background: #EEE;<br /> -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;<br /> -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;<br /> box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;<br /> text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);<br /> padding: 10px 10px;<br /> }</p> <p>.dropdown .dropdown-menu li a:hover {<br /> background: #f6f6f6;<br /> }</p> <p>.dropdown .show, .dropdown .hide {<br /> -moz-transform-origin: 50% 0%;<br /> -ms-transform-origin: 50% 0%;<br /> -webkit-transform-origin: 50% 0%;<br /> transform-origin: 50% 0%;<br /> }</p> <p>.dropdown .show {<br /> display: block;<br /> max-height: 9999px;<br /> -moz-transform: scaleY(1);<br /> -ms-transform: scaleY(1);<br /> -webkit-transform: scaleY(1);<br /> transform: scaleY(1);<br /> animation: showAnimation 0.5s ease-in-out;<br /> -moz-animation: showAnimation 0.5s ease-in-out;<br /> -webkit-animation: showAnimation 0.5s ease-in-out;<br /> -moz-transition: max-height 1s ease-in-out;<br /> -o-transition: max-height 1s ease-in-out;<br /> -webkit-transition: max-height 1s ease-in-out;<br /> transition: max-height 1s ease-in-out;<br /> }</p> <p>.dropdown .hide {<br /> max-height: 0;<br /> -moz-transform: scaleY(0);<br /> -ms-transform: scaleY(0);<br /> -webkit-transform: scaleY(0);<br /> transform: scaleY(0);<br /> animation: hideAnimation 0.4s ease-out;<br /> -moz-animation: hideAnimation 0.4s ease-out;<br /> -webkit-animation: hideAnimation 0.4s ease-out;<br /> -moz-transition: max-height 0.6s ease-out;<br /> -o-transition: max-height 0.6s ease-out;<br /> -webkit-transition: max-height 0.6s ease-out;<br /> transition: max-height 0.6s ease-out;<br /> }</p> <p>@keyframes showAnimation {<br /> 0% {<br /> -moz-transform: scaleY(0.1);<br /> -ms-transform: scaleY(0.1);<br /> -webkit-transform: scaleY(0.1);<br /> transform: scaleY(0.1);<br /> }</p> <p> 40% {<br /> -moz-transform: scaleY(1.04);<br /> -ms-transform: scaleY(1.04);<br /> -webkit-transform: scaleY(1.04);<br /> transform: scaleY(1.04);<br /> }</p> <p> 60% {<br /> -moz-transform: scaleY(0.98);<br /> -ms-transform: scaleY(0.98);<br /> -webkit-transform: scaleY(0.98);<br /> transform: scaleY(0.98);<br /> }</p> <p> 80% {<br /> -moz-transform: scaleY(1.04);<br /> -ms-transform: scaleY(1.04);<br /> -webkit-transform: scaleY(1.04);<br /> transform: scaleY(1.04);<br /> }</p> <p> 100% {<br /> -moz-transform: scaleY(0.98);<br /> -ms-transform: scaleY(0.98);<br /> -webkit-transform: scaleY(0.98);<br /> transform: scaleY(0.98);<br /> }</p> <p> 80% {<br /> -moz-transform: scaleY(1.02);<br /> -ms-transform: scaleY(1.02);<br /> -webkit-transform: scaleY(1.02);<br /> transform: scaleY(1.02);<br /> }</p> <p> 100% {<br /> -moz-transform: scaleY(1);<br /> -ms-transform: scaleY(1);<br /> -webkit-transform: scaleY(1);<br /> transform: scaleY(1);<br /> };<br /> }</p> <p>@-moz-keyframes showAnimation {<br /> 0% {<br /> -moz-transform: scaleY(0.1);<br /> -ms-transform: scaleY(0.1);<br /> -webkit-transform: scaleY(0.1);<br /> transform: scaleY(0.1);<br /> }</p> <p> 40% {<br /> -moz-transform: scaleY(1.04);<br /> -ms-transform: scaleY(1.04);<br /> -webkit-transform: scaleY(1.04);<br /> transform: scaleY(1.04);<br /> }</p> <p> 60% {<br /> -moz-transform: scaleY(0.98);<br /> -ms-transform: scaleY(0.98);<br /> -webkit-transform: scaleY(0.98);<br /> transform: scaleY(0.98);<br /> }</p> <p> 80% {<br /> -moz-transform: scaleY(1.04);<br /> -ms-transform: scaleY(1.04);<br /> -webkit-transform: scaleY(1.04);<br /> transform: scaleY(1.04);<br /> }</p> <p> 100% {<br /> -moz-transform: scaleY(0.98);<br /> -ms-transform: scaleY(0.98);<br /> -webkit-transform: scaleY(0.98);<br /> transform: scaleY(0.98);<br /> }</p> <p> 80% {<br /> -moz-transform: scaleY(1.02);<br /> -ms-transform: scaleY(1.02);<br /> -webkit-transform: scaleY(1.02);<br /> transform: scaleY(1.02);<br /> }</p> <p> 100% {<br /> -moz-transform: scaleY(1);<br /> -ms-transform: scaleY(1);<br /> -webkit-transform: scaleY(1);<br /> transform: scaleY(1);<br /> };<br /> }</p> <p>@-webkit-keyframes showAnimation {<br /> 0% {<br /> -moz-transform: scaleY(0.1);<br /> -ms-transform: scaleY(0.1);<br /> -webkit-transform: scaleY(0.1);<br /> transform: scaleY(0.1);<br /> }</p> <p> 40% {<br /> -moz-transform: scaleY(1.04);<br /> -ms-transform: scaleY(1.04);<br /> -webkit-transform: scaleY(1.04);<br /> transform: scaleY(1.04);<br /> }</p> <p> 60% {<br /> -moz-transform: scaleY(0.98);<br /> -ms-transform: scaleY(0.98);<br /> -webkit-transform: scaleY(0.98);<br /> transform: scaleY(0.98);<br /> }</p> <p> 80% {<br /> -moz-transform: scaleY(1.04);<br /> -ms-transform: scaleY(1.04);<br /> -webkit-transform: scaleY(1.04);<br /> transform: scaleY(1.04);<br /> }</p> <p> 100% {<br /> -moz-transform: scaleY(0.98);<br /> -ms-transform: scaleY(0.98);<br /> -webkit-transform: scaleY(0.98);<br /> transform: scaleY(0.98);<br /> }</p> <p> 80% {<br /> -moz-transform: scaleY(1.02);<br /> -ms-transform: scaleY(1.02);<br /> -webkit-transform: scaleY(1.02);<br /> transform: scaleY(1.02);<br /> }</p> <p> 100% {<br /> -moz-transform: scaleY(1);<br /> -ms-transform: scaleY(1);<br /> -webkit-transform: scaleY(1);<br /> transform: scaleY(1);<br /> };<br /> }</p> <p>@keyframes hideAnimation {<br /> 0% {<br /> -moz-transform: scaleY(1);<br /> -ms-transform: scaleY(1);<br /> -webkit-transform: scaleY(1);<br /> transform: scaleY(1);<br /> }</p> <p> 60% {<br /> -moz-transform: scaleY(0.98);<br /> -ms-transform: scaleY(0.98);<br /> -webkit-transform: scaleY(0.98);<br /> transform: scaleY(0.98);<br /> }</p> <p> 80% {<br /> -moz-transform: scaleY(1.02);<br /> -ms-transform: scaleY(1.02);<br /> -webkit-transform: scaleY(1.02);<br /> transform: scaleY(1.02);<br /> }</p> <p> 100% {<br /> -moz-transform: scaleY(0);<br /> -ms-transform: scaleY(0);<br /> -webkit-transform: scaleY(0);<br /> transform: scaleY(0);<br /> };<br /> }</p> <p>@-moz-keyframes hideAnimation {<br /> 0% {<br /> -moz-transform: scaleY(1);<br /> -ms-transform: scaleY(1);<br /> -webkit-transform: scaleY(1);<br /> transform: scaleY(1);<br /> }</p> <p> 60% {<br /> -moz-transform: scaleY(0.98);<br /> -ms-transform: scaleY(0.98);<br /> -webkit-transform: scaleY(0.98);<br /> transform: scaleY(0.98);<br /> }</p> <p> 80% {<br /> -moz-transform: scaleY(1.02);<br /> -ms-transform: scaleY(1.02);<br /> -webkit-transform: scaleY(1.02);<br /> transform: scaleY(1.02);<br /> }</p> <p> 100% {<br /> -moz-transform: scaleY(0);<br /> -ms-transform: scaleY(0);<br /> -webkit-transform: scaleY(0);<br /> transform: scaleY(0);<br /> };<br /> }</p> <p>@-webkit-keyframes hideAnimation {<br /> 0% {<br /> -moz-transform: scaleY(1);<br /> -ms-transform: scaleY(1);<br /> -webkit-transform: scaleY(1);<br /> transform: scaleY(1);<br /> }</p> <p> 60% {<br /> -moz-transform: scaleY(0.98);<br /> -ms-transform: scaleY(0.98);<br /> -webkit-transform: scaleY(0.98);<br /> transform: scaleY(0.98);<br /> }</p> <p> 80% {<br /> -moz-transform: scaleY(1.02);<br /> -ms-transform: scaleY(1.02);<br /> -webkit-transform: scaleY(1.02);<br /> transform: scaleY(1.02);<br /> }</p> <p> 100% {<br /> -moz-transform: scaleY(0);<br /> -ms-transform: scaleY(0);<br /> -webkit-transform: scaleY(0);<br /> transform: scaleY(0);<br /> };<br /> }

2. İşlem HTML Kodları

</p> <div class="container"> <h1 class="title"><span class="ez-toc-section" id="Dropdown-Menu"></span> Dropdown Menu<span class="ez-toc-section-end"></span></h1> <ul> <li class="dropdown"> <a href="#" data-toggle="dropdown">First Menu <i class="icon-arrow"></i></a></p> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Second Menu <i class="icon-arrow"></i></a></p> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Third Menu <i class="icon-arrow"></i></a></p> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </li> </ul></div><p>

3.İşlem