Bloggerisanje | Blog Saveti i Trikovi, Tutorijali, Widgeti Za Blog, SEO, Alati

1. 12. 2016.

9 Fashion sablona za Blogger

Нема коментара

9 prelepih Fashion sablona za Blogger

Ovde mozete preuzeti prelepe Fashion sablone za vas blog

1. Insight Blogger Sablon

Pogledaj sablon

Preuzmi sablon

2. Vogue Blogger Sablon

Pogledaj sablon

Preuzmi sablon

3. Trendmag Blogger Sablon

Pogledaj sablon

Preuzmi sablon

4. Olivia Blogger Sablon

Pogledaj sablon
Preuzmi sablon

5. Life-Fashion Blogger Sablon

Pogledaj sablon

Preuzmi sablon

6. Glam Up Blogger Sablon

Pogledaj sablon

Preuzmi sablon

7. Ecstacy Blogger Sablon

Preuzmi sablon

8. Blogstar Blogger Sablon

Pogledaj sablon

Preuzmi sablon

9. 1800 Minimal Blogger Sablon

Pogledaj sablon

Preuzmi sablon

Ovde mozete pocitati kako da promenite sablon na vasem blogu.

Continue Reading →

28. 4. 2016.

HTML Kontakt Forma

Нема коментара

Obrazac za kontakt na posebnoj stranici

U ovom tutorijalu ću vam pokazati kako možete da dodate zaista sjajnu sa cool izgledom kontakt formu na vašoj stranici. Ovaj kontakt formular izgleda zaista elegantno i veoma dopadljivo.

Dodavanje CSS koda:

Ulogujte se na Blogger Account > Kontrolna tabla vaseg bloga
Sada je potrebno da kliknete na opciju Šablon > Izmeni HTML i da pronađete ]]></b:skin> tag i odmah iznad njega da nalepite sledeći css kod

#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPHJEexX7d4-2hvZBPxi4eUxQjmX_C4TgDF7AizX3gajPdSe3vogYxl99PCPopLmGcVwb4NORrOofy-FtioWNH0waDnKwdQxt7-Eptsrpa60Vx0Hz_pF5qufsa00jeEEuCwHa6rzpQkc/s1600/user.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh_EVGhVNsOZImhsyhS1VKumfcCrPeHn2QYb02P0RoEL6GepKFkeCFIAcyzQpzsIwTBlEUj_3ifyYQ6NTSVoyrFdBzi6zWcttA_0PqhtNN7HEH5He0bdTjeaz9blxhS2C_MWEjHbUTBFk/s1600/pen.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ5Ldje9aFedPZ0GU6mUj9OjSGliy-Qsom-POS6f2HKdY7Y0KGtWMqZuoGkyzdUeSz2Iwr6PCQnnJrh_7iHNB1X26XDJnOJfHdfwGqKkXvYfEb9pDXNrtE0_1_kCi-H80bC3muJ3DrJAk/s1600/msg2.png)no-repeat 10px 10px; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 30px; 
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

Kada ste ga dodali sačuvajte i vratite se na kontrolnu tablu.

Dodavanje HTML na stranici

Prvo moramo da kreiramu novu stranicu na blogu, a to ćete uraditi na sledeći način: Kliknite na opciju Stranice > Nova stranica > Stranicu ostavite praznom. Kada se stranica otvori kliknite na opciju HTML i nalepite sledeći kod:

<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Posle dodavanja koda iznad, objavite stranicu.

To je to! Sada vi i vaši posetioci možete da vidite ovaj elegantan kontakt obrazac na vašem blogu.

Continue Reading →

27. 4. 2016.

Jedinstven šareni padajući meni - Blogger platforma

Нема коментара

Ovo je jedinstven i prelep, šareni padajući meni. Na internetu možete naći razne padajuće menije za blogger platformu, raznih boja, različitog dizajna.. Međutim, na padajući meni sa karticama različitih boja sam retko nalazio. Sada ću vam predstaviti jedan takav meni koji možete da dodate na vaš blog.

Jedinstven šareni padajući meni - Blogger platforma

DEMO

Idite na Blogger kontrolnu tablu > Šablon

Pronađite </head> tag

Dodajte sledeći kod iznad njega

<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/boilerplate.css" rel="stylesheet" type="text/css">

<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">

<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">

<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>

<script src="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/respond.min.js"></script>

<script src="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBar.js" type="text/javascript"></script>

<style>

.menubar {width: 750px;float: left;-moz-box-shadow: 0px 0px 19px #000000;-webkit-box-shadow: 0px 0px 19px rgb(0, 0, 0);box-shadow: 0px 0px 8px rgb(0, 0, 0);padding: 7px;border-radius: 4px;position: relative;margin-top: 50px;background-color: rgb(255, 255, 255);margin-left: 23%;

</style>Sada pronadjite </body> tag

Sada pronađite </body> tag
Dodajte sledeći kod iznad njega

<script type="text/javascript">

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarDownHover.gif", imgRight:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarRightHover.gif"});

var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarRightHover.gif"});

</script>

Sada sačuvajte šablon i idite na Izgled
Kliknite na Dodaj Gadžet i izaberite 'HTML/Javascript'
Nalepite sledeći kod.

<div class="menubar">
  <ul id="MenuBar1" class="MenuBarHorizontal">
     <li style="text-indent: 10px;width:80px;height:44px;background-color:#1d75bd";><a id="navhd" href="#">Home</a></li>
     <li class="choosedestination"><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggerisanje.blogspot.com/" style="">Free blogger tricks</a>
     <ul id="destination1">
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="destination1" class="" style="margin-left: 175px;margin-top: -2px;">
        <li id="desti_nav"><a href="#" class="">Item 3.1.1</a></li>
        <li id="desti_nav"><a href="#" class="">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="desti_nav"><a href="#">Item 3.2</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
     </ul>
     </li>
     <li class="holidaytp" style=""><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggerisanje.blogspot.com/">CSS Tricks</a>
     <ul id="holidayt" >
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="holidayt" style="margin-left: 175px;margin-top: -2px;">
        <li id="holiday_nav"><a href="#">Item 3.1.1</a></li>
        <li id="holiday_nav"><a href="#">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="holiday_nav"><a href="#">Item 3.2</a></li>
       <li id="holiday_nav" ><a href="#">Item 3.3</a></li>
     </ul>
    </li> 
     <li class="retriveb" style=" width: 145px;"><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggerisanje.blogspot.com/">JQuery Menu bars</a>
     <ul id="retrivemy">
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="retrivemy" style="margin-left: 175px;margin-top: -2px;">
        <li id="Retrivebk"><a href="#">Item 3.1.1</a></li>
        <li id="Retrivebk"><a href="#">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="Retrivebk" ><a href="#">Item 3.2</a></li>
       <li id="Retrivebk" ><a href="#">Item 3.3</a></li>
     </ul>
    </li>
     <li class="makeanen" style="width: 127px;" ><a id="navhd" class="MenuBarItemSubmenu" href="#">Make an Enquiry</a>
     <ul id="makenanEnquery">
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="makenanEnquery" style="margin-left: 175px;margin-top: -2px;">
        <li id="mkeinq"><a href="#">Item 3.1.1</a></li>
        <li id="mkeinq"><a href="#">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="mkeinq"><a href="#">Item 3.2</a></li>
       <li id="mkeinq"><a href="#">Item 3.3</a></li>
     </ul>
    </li>
     <li style="text-indent:10px;width: 109px;background-image: url(http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/images/naw-bar6.png);background-repeat: repeat-x;  margin-left: 1px;"><a id="navhd" href="#">Contact Us</a>
     </ul>    
  </div>

Sačuvajte HTML/Javascript' i to je to.

Continue Reading →

25. 4. 2016.

Kako dodati SlideShow

Нема коментара

U ovom postu ću vam objasniti kako da dodate SlideShow na vašem blogu. Koristićemo CSS3 i HTML. Ovaj SlideShow učiniće vaš blog atraktivnijim, privlačnijim i lepšim, što automatski znači i više poseta.

DEMO

Pratite sledeća uputstva:

Ulogujte se na vaš Blogger Account
Kliknite na opciju Šablon > Izmeni HTML
Pronađite (ctrl+f) ]]></b:skin>
Dodajte sledeći kod iznad ]]></b:skin>

/* fade slider www.bloggerisanje.blogspot.com*/
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:600px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
@-moz-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
.slides ul li {
    opacity:0;
    position:absolute;
    top:0;
    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {left:100%;
        opacity:0;}
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* css3 animation www.bloggerisanje.blogspot.com*/
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

Kada ste dodali kod, sačuvajte, vratite se na kontrolnu tablu bloga i kliknite na opciju Izgled.
Kliknite na Dodaj Gadget i izaberite HTML/JavaScript
Dodajte sledeći kod

<div class="slides">
            <ul> <!-- slides -->
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgML2pRUktzoP0P9NDHdBpwVA9TGvN7ZdPJ1pgcq6qjZP1ANsZRiNsS5ep-C3AP-gYaFr9P2YUTB49Ojmzt7bWYYCWhQ97USfptxTZ2A1jimM-T4P-pwXdx77lO4SavDOHL-L1JH3JraTI/s1600/bloggertrix-pic1.jpg" alt="image01" />
                    <div>Title 1</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_Hbqw28DwUSkx7inTT3tJUjnTmRgi6zQd2u92QDfYGDCVqdOAGYk5YMKnhYpfw5_7egw_EMZp9vA87sfkUZHrzJ6dya2bYjWEErW98-4YftQ67sVM0Tc-H-uva2PXxsDbYoO0bTz1IE/s1600/bloggertrix-pic2.jpg" alt="image02" />
                    <div>Title 2</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlISQVf0XF-iWDGbbdMF3AEBVn34c9AQn4lSuFNZW9LHT83jo7uONjOFZ1Qnlox4xtbzfvNlNb40QKQdYlK1Cv1zATo4wa9E0qXj9zgpMavFd5if1Cneu2lSYUplKruLvrIsuvFRVeqU4/s1600/bloggertrix-pic3.jpg" alt="image03" />
                    <div>Title 3</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzoMO8OYvEQsGOxM9Q-27eV2fElrxtHACuBVCOkxTvSdpR-MITAL4cxEsPQ0uBA-NfXGWuvdw_aThBhZOgMbVYnoRXR6En6tmVEQhWh2izLKFVFy1k-vIuEjieP0XB6ANMqwgMjNJNOok/s1600/bloggertrix-pic4.jpg" alt="image04" />
                    <div>Title 4</div>
                </li>
            </ul>
        </div>

Zamenite naslov (title) i link slike sa vašim.
Sačuvajte i to bi bilo to.

Continue Reading →

23. 4. 2016.

CSS meni sa 3D efektom

Нема коментара

Danas ću vam pokazati kako da dodate još jedan vrhunski widget, css meni koji ima 3D efekte. Vrlo lako ga možete postaviti na vaš blog.

POGLEDAJTE DEMO

Idite na Blogger kontrolnu tablu > Šablon
Pronađite ]]></b:skin> kod (ctrl+f)
Sledeći kod dodajte ispod njega

<style>

@import url(http://fonts.googleapis.com/css?family=Raleway);

#cssmenu,

#cssmenu ul,

#cssmenu ul li,

#cssmenu ul li a,

#cssmenu #menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

#cssmenu:after,

#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}

#cssmenu #menu-button {display: none;}

#cssmenu {width: auto;font-family: Raleway, sans-serif;line-height: 1;}

#cssmenu > ul {background: #3db2e1;}

#cssmenu > ul > li {float: left;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;}

#cssmenu.align-center > ul {font-size: 0;text-align: center;}

#cssmenu.align-center > ul > li {display: inline-block;float: none;}

#cssmenu.align-right > ul > li {float: right;}

#cssmenu > ul > li > a {padding: 16px 20px;font-size: 14px;color: #ffffff;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;background: #3db2e1;-webkit-transition: all .3s;-moz-transition: all .3s;

  -o-transition: all .3s;transition: all .3s;-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;

}

#cssmenu > ul > li.active > a {color: #dff2fa;

}

#cssmenu > ul > li:hover > a,

#cssmenu > ul > li > a:hover {color: #dff2fa;-webkit-transform: rotateX(90deg) translateY(-23px);-moz-transform: rotateX(90deg) translateY(-23px);transform: rotateX(90deg) translateY(-23px);

  -ms-transform: none;

}

#cssmenu > ul > li > a::before {position: absolute;top: 100%;left: 0;z-index: -1;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;padding: 16px 20px;color: #dff2fa;background: #19799f;content: attr(data-title);

  -webkit-transition: background 0.3s;-moz-transition: background 0.3s;transition: background 0.3s;-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);

  -webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-ms-transform: translateY(- -18px);

}

#cssmenu > ul > li:hover > a::before,

#cssmenu > ul > li > a:hover::before { background: #3db2e1;}

#cssmenu.small-screen {width: 100%;}

#cssmenu.small-screen > ul,

#cssmenu.small-screen.align-center > ul {

  width: 100%;

  text-align: left;

}

#cssmenu.small-screen > ul > li,

#cssmenu.small-screen.align-center {

  float: none;

  display: block;

  border-top: 1px solid rgba(100, 100, 100, 0.1);

}

#cssmenu.small-screen > ul > li:hover > a,

#cssmenu.small-screen > ul > li > a:hover {

  color: #dff2fa;

  -webkit-transform: none;

  -moz-transform: none;

  transform: none;

  -ms-transform: none;

}

#cssmenu.small-screen > ul > li > a::before {

  display: none;

}

#cssmenu.small-screen #menu-button {

  display: block;padding: 16px 20px;cursor: pointer;font-size: 14px;text-decoration: none;color: #ffffff;text-transform: uppercase;letter-spacing: 1px;background: #3db2e1;}

#cssmenu.small-screen #menu-button:after {

  content: "";position: absolute;right: 20px;top: 17px;display: block;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border-top: 2px solid #ffffff;border-bottom: 2px solid #ffffff;width: 22px;height: 3px;

}

#cssmenu.small-screen #menu-button.menu-opened:after {

  border-top: 2px solid #dff2fa;

  border-bottom: 2px solid #dff2fa;

}

#cssmenu.small-screen #menu-button:before {

  content: "";position: absolute;right: 20px;top: 27px;display: block;width: 22px;

  height: 2px;

  background: #ffffff;

}

#cssmenu.small-screen #menu-button.menu-opened:before {

  background: #dff2fa;

}





  </style>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script charset='utf-8' src='http://preview.bloggertrix.com/3d_cssmenu/script.js' type='text/javascript'/>

Sada idite Izgled
Kliknite na Dodaj Gadget i izaberite HTML/JavaScript
Dodajte sledeći kod

<div id='cssmenu'>

<ul>

   <li class='active'><a href='#'>Home</a></li>

   <li><a href='#'>Products</a></li>

   <li><a href='#'>Company</a></li>

   <li><a href='#'>Contact</a></li>

</ul>

</div>

Sačuvajte i to bi bilo to.

Continue Reading →

1. 12. 2016.

9 Fashion sablona za Blogger

9 prelepih Fashion sablona za Blogger

28. 4. 2016.

HTML Kontakt Forma

27. 4. 2016.

Jedinstven šareni padajući meni - Blogger platforma

25. 4. 2016.

Kako dodati SlideShow

23. 4. 2016.

CSS meni sa 3D efektom

Connect With Us

Reklamiraj 24/7!

Popularno

Arhiva

Kontakt

Pratite Blog

Translate