Cara membuat tombol blogger rasa windows 8

Cara membuat tombol blogger rasa windows 8 - Seperti yang kita ketahui bahwa memiliki desain yang lebih profesional dari sebuah blog di perlukan waktu ini karena memberikan beberapa manfaat.terkadang tombol yang seperti itu digunakan untuk model tombol download pada blogger

Cara membuat tombol blogger rasa windows 8

Cara membuat tombol blogger rasa windows 8 yaitu

1. login ke blogger
2. cari kode </head>
3. pastekan kode dibawah ini pas sebelum </head>
   

<!-- Flat UI Buttons By Www.BloggerYard.Com Start -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,
600,700,800" rel="stylesheet" type="text/css"></link>
<style type="text/css">
.button {color:white!important; font-family:open sans; margin:10px 10px
10px 0;text-decoration:none!important; font-weight:700;border-radius:5px;
-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;
-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:
all .4s;-ms-transition:all .4s;-o-transition:all .4s;}
.blue {background: #3498db;border-bottom: 3px solid #226693;}
.blue:hover {background:#2980b9;}
.green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;}
.green:hover {background: #27ae60;}
.red {background: #e74c3c;border-bottom: 3px solid #922C20;}
.red:hover {background:#c0392b;}
.purple {background: #9b59b6; border-bottom: 3px solid #74398E;}
.purple:hover {background:#8e44ad;}
.seagreen {background: #1abc9c;border-bottom: 3px solid #127F69;}
.seagreen:hover {background: #16a085;}
.big {font-size:18px; padding:15px 20px;}
.medium {font-size:15px; padding: 10px 15px;}
.small {font-size:12px; padding:8px 10px;}
</style>
<!-- Flat UI Buttons By Www.BloggerYard.Com End -->

1. klik add widget pada blogger

Big Size Buttons
<a class="button blue big" href="#">Blue Button</a>
<a class="button green big" href="#">Green Button</a>
<a class="button red big" href="#">Red Button</a>
<a class="button purple big" href="#">Purple Button</a>
<a class="button seagreen big" href="#">SeaGreen </a>
Medium Size Buttons
<a class="button blue medium" href="#">Blue Button</a>
<a class="button green medium" href="#">Green Button</a>
<a class="button red medium" href="#">Red Button</a>
<a class="button purple medium" href="#">Purple Button</a>
<a class="button seagreen medium" href="#">SeaGreen</a>
Small Size Buttons
<a class="button blue small" href="#">Blue Button</a>
<a class="button green small" href="#">Green Button</a>
<a class="button red small" href="#">Red Button</a>
<a class="button purple small" href="#">Purple Button</a>
<a class="button seagreen small" href="#">SeaGreen </a>

Klik save dan lihat hasilnya

LIHAT DEMO

Demikianlah posting Cara membuat tombol blogger rasa windows 8 semoga bermanfaat,Apa pendapat Anda tentang indikasi Saya ? atau ada metode blog indikasi yang Anda tahu ? mohon berbagi dengan kami dibagian komentar, Salam Blogger.

Membuat Navigasi Menu Keren Responsive

Cara membuat Navigasi Blogger Keren Responsive. Membuat Navigasi Menu Keren Responsive sangatlah mudah. berikut anda kopikan kode dibawah ini

Membuat Navigasi Menu Keren Responsive

DEMO
CSS
Letakkan kode berikut tepat di atas ]]

 nav {
text-transform:uppercase;
position:relative;
font:bold 12px Arial,Sans-Serif;
background: #e74c3c;
}
nav * {
margin:0 0 0 0;
padding:0 0 0 0;
list-style:none;
}
nav ul {
overflow: hidden;
    background:rgba(231, 76, 60, 0.84);
    float:left;
}
nav li {
float:left;
display:inline;
}
nav li a {
padding:3px 15px;
line-height:40px;
color:#fff !important;
display:block;
text-decoration:none;
}
nav li a:hover {
background:rgba(231, 76, 60, 0.84) !important;
}
nav li ul {
display:block;
width:170px;
position:absolute;
left:auto;
z-index:10;
visibility:hidden;
opacity:0;
height:auto;
transition:all 0.26s ease-out 0.2s;
}
nav li li {
display:block;
float:none;
width:100%;
}
nav li:hover > ul {
visibility:visible;
width:200px;
opacity:1;
}
nav li li ul {
left:200px;
margin-top:
-40px;
}
nav li.sub > a {
position:relative;
padding-right:30px;
}
nav li.sub > a:after {
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:#eee transparent transparent transparent;
position:absolute;
top:20px;right:10px;
}
nav li.sub li.sub > a:after {
content:"";
width:0px;
height:0px;
border-width:4px;
border-style:solid;
border-color:transparent transparent transparent #eee;
position:absolute;
top:16px;
right:10px;
}

Kemudian untuk membuatnya responsive, anda juga perlu menambahkan media query ke template anda. Terdapat 2 media query, yaitu pada ukuran 600px dan 380px. Letakkan media query ini sesuai dengan media query yang ada di template anda. Atau letakkan bisa letakkan kode berikut tepat di atas ]]

 @media screen and (max-width:600px){
#nav2{display:inherit;margin:5px;float:left;padding:8px;}nav ul{display:none;}
}
@media screen and (max-width:380px){
#nav2{padding:3px;}#search-top{padding:5px;}input[type="text"]{padding:5px;width: 90px;}#search-button-top{background-image: url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");
background-repeat: no-repeat;
transition: all 0.7s ease 0s;
height: 26px;
width: 29px;
background-color: #34495e;
background-position: 7px -247px;
border: none;
float: right;
cursor: pointer;}
}
}

HTML
Kemudian letakkan kode berikut suka-suka anda, kalau saya meletakannya di bawah header

• Tutorial


• Template
  
  
  • CSS3
  
  
  • HTML5
  
  
  • Responsive
  
  
  • SEO

HomeTutorialTemplate- CSS3- HTML5- Responsive- SEO

Kemudian simpan template anda. Sebelumnya anda harus membuat backup template lama anda.