Tips untuk pemula: CARA MEMASANG TEMPLATE BLOG HASIL DOWNLOAD KE BLOGGER

Ini adalah bagian tutorial bagi kita yang ingin mendesain bagian tertentu blog, langkah dasar ini adalah cara membuat menu navigasi berikut kotak pencarian dan meletakannya pada header blogger. Kami sarankan agar kita memilih sebuah tema bawaan blog yang telah di modifikasi menjadi responsive dan mobile friendly untuk itu sengaja kami menyediakan template tersebut tanpa Menu navigasi. 

 Untuk cara pemasangan tema hasil download ke blogger silahkan baca:

Tips untuk pemula: CARA MEMASANG TEMPLATE BLOG HASIL DOWNLOAD KE BLOGGER

Pasang dan pergunakan saja tema tersebut untuk blog percobaan anda.
Jika ingin tutorial cara membuat template blogger default atau bawaan menjadi responsive dan mobile friendly silahkan ikuti link ini:

7 LANGKAH MEMBUAT TEMPLATE SEDERHANA BAWAAN BLOGGER MENJADI RESPONSIVE DAN MOBILE FRIENDLY (LANJUTAN)

Sekarang mari kita masuk ke contoh pembuatannya:

CONTOH CARA PEMASANGAN MENU NAVIGASI DAN KOTAK PENCARIAN:

Langkah 1) tambahkan HTML:

Contoh tambahkan kode dibawah ini ke widget html/javascript melalui:

1. Layout > Add a Gadget 
2. Pilih HTML/JavaScript
3. Judul kosongkan
4. Masukka kode berikut ini:

<div class="topnav">



<a class="active" href="#home">Home</a>

<a href="#about">About</a>

<a href="#contact">Contact</a>

<input type="text" placeholder="Search..">

</div>

Letakan atau geser widget ke atas tajuk (header)

Langkah ke 2) Tambahkan CSS:

Contoh letakan  kode css dibawah ini diatas ]]></b:skin>


/* Gaya editblog1 Add a transparan color to the top navigation bar */
.topnav {
overflow: hidden;
background-color: #transparance;}


/* Gaya editblog2 Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;}

/* robah warna links pada hover */
.topnav a:hover {
background-color: #ddd;
color: black;}

/* Gaya "active" element untuk menyorot halaman terkini */
.topnav a.active {
background-color: #2196F3;
color: white;}

/* gaya kotak pencarian di dalam menu navigasi */
.topnav input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;}

/* Jika ukuran layar kurang dari 600px lebarnya, tumpuk  links dan posisi tombol pencarian menjadi vertikel daripada horisontal */

@media screen and (max-width: 600px) {
.topnav a, .topnav input[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}}

Langkah ke 3 membuat judul blog menjadi di tengah
1. Layout > TEMA atau THEME
2. Pilih SESUAIKAN
3. Pilih LANJUTAN>SCROLL KEBAWAH
4. Pilih TAMBAHKAN CSS

Pada kotak css kosong kopi-pastekan saja kode dibawah ini

#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}

Save.

Karena kotak pencarian pada contoh diatas header blog tidak berfungsi maka kita masih memiliki "trik dan tugas" selanjutnya membuat menu pencarian tersebut berfungsi pada edisi tutorial berikutnya.

Cobalah anda lakukan sendiri dan lihat hasilnya.