Cara Membuat Menubar Dropdown Resonsive Simple di Blog

Cara Membuat Menubar Dropdown Simple Responsive di Blog. menubar atau bisa juga disebut navigasi blog atau menu navigasi blog, widget menubar saya katakan sangat wajib ada pada blog, karena hal ini untuk kemajuan blog anda dan yang paling utama untuk memudahkan pengujung menavigasi blog anda dengan menubar ini, bisa di ber tag label atau menu lainnya, seperti halaman about sitemap dan penambahan tag-tag lainnya, menubar ini juga bisa di terapkan fungsi yang lebih seperti penambahan dropdown menu, agar tag tidak penuh dan terlihat lebih profesional.

Disini saya akan membuat tutorial menubar yang sangat simple dan juga responsive, kode menubar ini saya ambil dari blog arlina blog, menubar yang responsive, hal ini guna untuk agar mudah di navigasi pada halaman dengan ukuran yang sangat kecil, dan bisa menyesuaikan dengan halaman tampilan blog anda.

Cara Membuat Menubar Dropdown Simple Responsive di Blog

1. Buka akun blogger anda.

2. Pilih menu template dan klik edit HTML.

3. Pertama, untuk kode cssnya.

/* Main Navigation */
#navi-arlina{height:45px;text-transform:uppercase;font-size:100%;background:#45a2db;color:#fff;font-family:Oswald;margin:0 15px}
#navi-arlina ul.menus{background:#45a2db;height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#navi-arlina a{display:block;line-height:45px;padding:0 15px;text-decoration:none;color:#fff}
#navi-arlina ul,#navi-arlina li {margin:0 auto;padding:0;list-style:none}
#navi-arlina ul {height:45px;}
#navi-arlina li {float:left;display:inline-block;position:relative}
#navi-arlina input {display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer}
#navi-arlina label {display:none;width:55px;height:48px;line-height:48px;text-align:center}
#navi-arlina label span {font-size:16px;position:absolute;left:55px}
#navi-arlina ul.menus li {display:block;width:100%;text-transform:none;text-shadow:none;}
#navi-arlina ul.menus a {color:#fff;line-height:55px}
#navi-arlina li a:hover {background:#3a91c7}
#navi-arlina li:hover ul.menus,#navi-arlina li:hover > ul {display:block}
#navi-arlina ul.menus a:hover {background:#444;color:#fff}
#navi-arlina li ul{background:#444;margin:0;width:150px;height:auto;position:absolute;top:45px;left:0;z-index:10;display:none}
#navi-arlina li li {display:block;float:none}
#navi-arlina li li:hover {background:#444}
#navi-arlina li li a:hover {background:#444;text-decoration:underline}
#navi-arlina li ul ul {left:100%;top:0}
#navi-arlina li li > a{display:block;padding:0 10px;margin:0;line-height:30px;text-decoration:none;color:#fff}
@media screen and (max-width:800px) {
#navi-arlina{position:relative}
#navi-arlina ul{background:#45a2db;position:absolute;top:100%;left:0;z-index:3;height:auto;display:none}
#navi-arlina ul.menus{width:100%;position:static;padding-left:20px}
#navi-arlina li{display:block;float:none;width:auto}
#navi-arlina input,#navi-arlina label{position:absolute;top:0;right:0;display:block}
#navi-arlina input{z-index:4}
#navi-arlina input:checked + label{color:#fff }
#navi-arlina input:checked ~ ul{display:block;width:100%}
#navi-arlina li:hover > ul{width:100%}}

Selanjutnya untuk kode pemanggilnya

<nav id='navi-arlina' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
  <input type='checkbox'/>
  <label>MENU</label>
  <ul>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Blog</span></a>
    <ul>
      <li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Advertise</span></a></li>
 <li><a href='#' itemprop='url'><span itemprop='name'>Portfolio</span></a></li>
    </ul>
  </li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Technology</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Bussiness</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Healthy</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Gallery</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Lifestyle</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Music</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Dropdown</span></a>
    <ul>
      <li><a href='#' itemprop='url'><span itemprop='name'>Science</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Healthy</span></a></li>
 <li><a href='#' itemprop='url'><span itemprop='name'>Video</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Music</span></a></li>
    </ul>
  </li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Dropdown</span></a>
    <ul>
      <li><a href='#' itemprop='url'><span itemprop='name'>Science</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Healthy</span></a></li>
 <li><a href='#' itemprop='url'><span itemprop='name'>Video</span></a></li>
      <li><a href='#' itemprop='url'><span itemprop='name'>Music</span></a></li>
    </ul>
  </li>
  </ul>
  </nav>

simpan template

Cara Membuat Template Default Blogger Menjadi Responsive

Cara Membuat Template Default Blogger Menjadi Responsive, Sobat blogger, tutorial membuat responsive template default blogger ini sangat cocok bagi anda yang ingin berkreasi untuk membangun sebuah template dari blogger yang responsive, biasnya yang ingin memodif template bawaan blogger ini sering terkendala karena templatenya tidak responsive, namun sekarang anda bisa membuat template tersebut menjadi responsive dengan mudah sekali sobat blogger, tak sesulit yang dipikir..dan untuk tutorial ini saya belajar dari KompiAjaib.

Bagi anda yang ingin membuat template default blogger ini menjadi responsive anda bisa ikuti tutorialnya disini, sekaligus kita belajar juga dan saya sudah prektekan dan hasilnya berhasil. :)

Cara Membuat Template Default atau Bawaan Blogger Menjadi Responsive
1. Pertama, matikan fitur navbar, pilih menu tata letak > klik navbar > Pilih "OFF"
2. Sekarang cari kode di bawah ini :

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

3. Lalu ganti kode tersebut dengan kode dibawah ini.

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

4. Selanjutnya cari kode dibawah ini :

 <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>

5. Lalu ganti kode tersebut dengan kode di bawah ini :

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>   

6. Sekarang letakan kode dibawah ini tepat diatas kode </head>

<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>

 7. Klik save template dan selesai.

Selesai sudah, dan anda sudah  membuat template default blogger menjadi responsive, mudah sekali bukan, silahkan di cek saja, terimakasih buat mas Adhy atas pelajarannya :) sekian tutorial "Cara Membuat Responsive Template Default Blogger"


Referensi : http://www.kompiajaib.com/2015/03/cara-mudah-membuat-responsive-template.html

Apa yang terjadi jika sering mengganti Template pada Blog?

 Apa yang terjadi jika sering mengganti Template pada Blog?  Sering gonta ganti template adalah sudah jadi tradisi seorang blogger yang masih pemula di dunia blogging, dan mungkin hal ini juga adalah suatu hobby yang mengasikan, yah memang benar, tak dipungkiri, ketika saya masih baru menginjak di dunia blogging, saya juga paling hobby sekali mengganti template dan mengeditnya dengan segala macem widget, saya selalu tertarik dengan sebuah template yang tampilannya baru dan tak ayal, yang bikin tertarik adalah dengan iming-iming template SEO friendly

Hal ini memanglah sangat wajar bagi seorang blogger yang masih pemula, ya namanya juga pemula, anggap sajalah suatu kenang-kenangan yang nantinya jadi masa lalu, namun disini saya bukan ingin membahas kalian ini pemula atau bukan, hanya saja ini adalah sebuah pembelajaran, karena pekerjaan seperti ini mempunyai dampak yang bisa membuat anda tidak pernah maju, ko bisa? apa saja sih dampak dari sering gonta ganti template?


Apa yang terjadi jika sering mengganti Template pada Blog?

1. Menurunkan Pageviews atau Visitor pada Blog
Kenapa bisa? jelas hal ini akan membuat pusing bot crawler google, karena setiap kita mengganti sebuah template blog, bot google akan merayapi ulang struktur-struktur template blog anda, karena hal tersebut akan tampak asing, apalagi anda tidak tahu bagaimana cara mengganti template yang baik, seperti kesalahan yang sering dilakukan adalah mengganti keseluruhan kode yang terdapat pada template blog anda, tanpa mengamankan kode-kode penting yang harus di amankan terlebih dahulu.

Solusi agar tidak kehilangan pengunjung saat mengganti template blog adalah anda harus backup meta tag terlebih dahulu dan menyiapkannya ke template yang akan anda pasang.

2. Menghabiskan waktu dan tidak menguntungkan
Anggap saja anda sudah sebulan ngeblog, dan pekerjaan anda hanyalah memperhatikan tampilan blog dan sering gonta ganti template, ketika ada rilis template baru, maka langsung ganti, sebenarnya ini tidak masalah jika anda membuat blog hanya untuk tempat curhat saja, tapi jika anda membuat blog untuk masa depan, maka hal ini akan membuang buang waktu tanpa menghasilkan apapun, coba anda tanya pada diri sendiri, apa yang sudah di dapat dari sering gonta ganti template?

3. Artikel tidak bertambah karena keasikan mengganti Template
Karena saking asiknya memperhatikan tampilan blog dan sering gonta ganti template, maka jelas anda akan lupa untuk membuat posting blog itu sendiri, padahal yang paling penting dalam blog adalah isinya, (Content Is King) Jika anda ada niat untuk membuat posting, maka sudah pusing duluan karena terlalu lama di depan pc, tapi hanya memperhatikan template saja, maka pemikiran pun akan buyar dan gak konsen.

4. Kalah Saing dan Tertinggal oleh Blogger Lain, dan mulai timbul rasa jenuh
Bagaimana tidak kalah saing? inti dari blogging adalah isinya, yaitu konten blog, orang lain sudah membuat seribu artikel, anda hanya memperhatikan template saja, orang lain sudah mempunyai pengunjung anda hanya melongo saja, lalu dalam hati berkata? kenapa blogku sepi?

5. Bosan, Frustasi, dan mengakibatkan Berhenti Menulis artikel / ngeblog
Jika anda sudah bosan karena blognya tidak ada pengunjung, maka akan ada titik jenuh yang akhirnya anda akan berhenti ngeblog, dan mungkin suatu saat kembali lagi dan mungkin aka melakukan hal yang sama.

KESIMPULAN.
Menurut saya ini adalah hal yang wajar, tapi jika anda sudah menyadari hal ini, yang harus anda lakukan adalah harus menjadi blogger sejati, yeah blogger yang tidak pernah menyerah dan konsisten dalam dunia blog, jika anda ingin maju, maka perbaiki kesalahan yang pernah dibuat, belajar lagi dan belajar lagi untuk menjadi blogger yang besar,  pada intinya seorang blogger yang sudah sukses adalah awalnya juga seorang pemula, maka jika mereka bisa sukses, kita pun bisa seperti mereka. :)

1 lagi yang terpenting bagi seorang penulis / blogger adalah KONSISTEN

Cara Membuat Template Blogger Lengkap

Cara Membuat Template Blogger Lengkap - bosen dengan template buatan orang lain dan ingin membuat template sendiri yang elegant...??? Mulailah membangun template blogger kamu sendiri dengan mengikuti tutorial membuat template blogspot/blogger dibawah ini:

1. Mengenal Struktur Dasar Template Blogger
2. Bagian 1 dasar element / Pola
3. Bagian 2 Body dan Outer Wrapper
4. Bagian 3 Header
5. Bagian 4 Block Sidebar
6. Bagian 5 Main Wrapper, Post dan Kotak komentar
7. Selesai Bagian 6 Footer 
8. Mengganti header dengan gambar
9. Selamat Berkreasi . . .

Diatas merupakan list tutorial sederhana bagaimana membuat template blogger sendiri, menciptakan template blogspot, cara membuat blogger template.

Mengganti Header Dengan Gambar

Dari template yang telah dibuat kemarin header template berwarna hitam tanpa gambar, sekarang bagaimana jika merubah tampilan header dengan gambar,,,,,bagaimana caranya?

Jika dilihat dari kode CSSnya header yang terdapat pada (langkah 3 disini) memiliki kode seperti dibawah ini :

/* HEADER WRAPPER
==================================================== */
#header-wrapper {
width:960px;
height:150px;
background:#191919;
}

#header-inner {
background-position: left;
height:150px;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
text-align: left;
color:#FFF;
}

#header h1 {
padding:40px 20px 0 10px;
line-height:1.2em;
text-shadow:2px 2px 2px #fff;
text-transform:uppercase;
letter-spacing:.2em;
}

#header a {
color:#FFF;
text-decoration:none;
}

#header a:hover {
color:#FFF;
}

#header .description {
margin:0 5px 5px 0 ;
padding:0 20px 0 10px;
max-width:700px;
letter-spacing:.2em;
color:#FFF;
}

#header img {
margin-left: auto;
margin-top: auto;
}

Dari kode header diatas terlihat bahwa header memiliki tampilan sebagai berikut:
width:960px; (lebar header)
height:150px; (tinggi header)
background:#191919;  warna latar header hitam dengan kode warna #191919

Sekarang bagaimana cara mengganti dengan gambar?
Pertama : Siapkan terlebih dahulu gambar yang akan digunakan, gambar harus berukuran sama dengan besar header yaitu 960px (pixel) X 150px (pixel) agar hasilnya rapi dan sesuai, kamu bisa membuat dengan photoshop, photoscape atau editor gambar lainnya.

Kedua  : uploadlah gambar tersebut di blogger atau di image hosting lainnya / baca (cara upload gambar) dan ambilah URL gambar tersebut.

Ketiga : Perhatikan kode dibawah ini, kode yang harus kamu rubah :

#header-wrapper {
width:960px;
height:150px;
background:#191919; /* <--- ini kode yang dirubah */
}

Dan rubah kode warna biru background:#191919; 

Menjadi :

background:#191919 url(URL-GAMBAR-DISINI) top center no-repeat;
}

Maka contoh lengkapnya jadi seperti ini :

#header-wrapper {
width:960px;
height:150px;
background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg) top center no-repeat;
}

Rubah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg dengan URL gambar yang telah dibuat

Simpan template dan lihat perubahannya.
Jika tidak mau repot membuat gambar gunakan gambar dibawah ini yang sudah saya persiapkan untuk template tersebut.

URL Gambar 1 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyrOk9bN6fojrBBf6w9OyrxOxpT4YrhicGBOortFnXKiMNbsnUXfpexwZXHDboyFRtqby_UPS3ih98wUUY2fcDUN7XWodkVuRo193A8R9-xivoPjhQTmJSD37CvPh8Y9pCAoiZzN_OcY2P/s1600/header1.jpg


URL Gambar 2 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYggNH410JKxdhJI75YldBRb78XYW1f9aneX8IkNX4zgSK_nzm_ZAk11vaoHbKNSHAROHxafs7aZQeiKm0YQ-9otOOJYMntecASH7IwyqVhZx1fhbZicuxD8V0itJ-sMoRAL8PoJN7Lhqp/s1600/header2.jpg


URL Gambar 3 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPjaBlPsJilZSrIf6tLqs2cc1SGJVHwDQOyglrNREIcPxtbDbHn966xkrzw86N4zF2tCNK3x8WaC_d6wSqAW7M4AOe9JHG_T00H5G0L8LQo-nn3KSFfp0OVqjzICXuTWHJOeXFjaMfTwc/s1600/header3.jpg


URL Gambar 4 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcVCjVysXxoKvBSAR6ZdVLkbCMZvd4u-Jyf4dVcmrXcDhmgJl168zqdWvyVEqaKJBLKNoWmmg3Mh1x_NMAz1KJHBHSr9z5lk-pVMMXkoKG-tqKiT5kUwe9DjtVCuGg7Y5cy2UtEbVSHFFG/s1600/header4.jpg


URL Gambar 5 : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrdC4Ef9BpP06Z6pQw7thn0d5ZPvhYx6zjUG3FUi30PpDnN1ZxMI2DCAvAdnR4Qqi5j5OWmtSC2ic563J4ZjV7O6_YZShwx55dLgISe4e-QmyDupBOzCAlQxC7Wj0MshSOaYPks94GJqgs/s1600/header5.jpg

Membuat Template Blogspot Tahap 6

Tutorial dibawah ini merupakan kelanjutan dari Tutorial Membuat Template Blogspot Tahap 5 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Tahap 5.

Footer Wrapper
Element footer / kaki-kaki ini terletak dibagian paling bawah mungkin sudah pada tau didengar dari namanya saja Footer pasti dibawah. Element ini biasanya menyimpan sebuah catatan atau informasi yang berupa tautan penting seperti tentang Hak Cipta / Copyright  dan informasi sejenisnya, akan tetapi tidak mutlak harus seperti itu kita bisa menempatkan link atau info apa saja di bagian footer ini.
Pada pembuatan template ini memiliki lebar Outer Wrapper 960px berarti kita juga harus memberi lebar Footer sebesar 960px jangan kurang ataupun lebih, karena jika lebih akan nampak tak rapi dan jelek pastinya dan jika kurang pasti tampilannya juga akan lebih jelek lagi karena tidak ada keserasian.

Oke kita lanjutkan menerapkan kode untuk footer wrappernya :
1. Buka Edit HTML template yang telah dibuat

2. Cari dan hapus kode CSS dibawah ini :

/* Awal kode css untuk footer wrapper
======================================================== */
#footer {

}

3. Kemudian ganti dengan kode CSS berikut :

/* AWAL KODE UNTUK FOOTER
======================================================== */
#footer {
margin-top:15px;
margin-bottom:5px;
width:960px;
height:50px;
background:#CCC;
padding-top:25px;
}
.hakcipta{
text-align:center;
font-size:11px;
}

4. Tuju bagian bawah dan cari hapus kode HTML dibawah ini :

<div id='footer'>
<!-- Ini untuk Wadah isi dari footer -->
</div>

5. Kemudian ganti dengan kode berikut :

<div id='footer'>
<!-- Ini untuk Wadah isi dari footer -->
<div class='hakcipta'>
(c) Hak Cipta 2017 <data:blog.title/><br/>
Original Template oleh : <a href='http://namablogkamu.blogspot.com/'>Nama Blog</a> | Desiain ulang oleh : <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Didukung Oleh : <a href='http://blogger.com/'>Blogger</a>
</div>
</div>

6. Sekarang Simpan template
7. Silahkan Lihat hasilnya

Keterangan :
- Width:960px : Lebar footer
- Height:50px : tinggi footer 50px kamu bisa mencoba merubah dengan menambah atau mengurangi angka 50px
- background:#CCC; : memiliki warna latar silver / abu-abu, bisa dirubah menjadi warna hitam dengan kode #000 atau yang lainnya juga bisa.
- text-align:center; Posisi Teks cenderung ketengah
- font-size:11px; ukuran huruf sebesar 11px bisa dirubah angkanya untuk memperbesar / memperkecil tulisan.
- <data:blog.title/> : kode ini akan memanggil dan menampilkan judul blog
- expr:href='data:blog.homepageUrl' kode ini akan memanggil URL halaman utama blog.

Sampai disitu langkah membuat template blogger sederhana sudah selesai dan sekarang tinggal memodifikasinya sedemikian rupa agar sesuai dengan selera, mungkin template tersebut masih perlu dioptimalkan agar template bisa bekerja dengan bagus dan maksimal.
Saya juga masih akan meneruskan artikel ini sampai tahap Optimasi dan juga Modifikasi bagi yang tertearik mengikuti tutorial ini silahkan bisa berlangganan melalui email kamu dengan mendaftar dibagian samping.