Pembangunan Blog 2020 : Cara Buat Drop Down Menu Di Header Menu Blog

Tutorial kali ini ialah bagi menghasilkan drop down menu di header menu di dalam blog seperti gambar di atas.

1. Dashboard > Theme > Edit HTML

2. Pada kod HTML, cari kod berikut ]]><b:skin>

3. Paste kan kod berikut di atas kod pada langkah 2 tadi

.tabs-inner .widget li ul {
  z-index: 100; position: absolute;
  left: -999em; height: auto; margin: 0; padding: 0;
  border: 1px solid #999999; 
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
  -moz-border-radius: 0px; -webkit-border-radius: 0px;
  -goog-ms-border-radius: 0px; border-radius: 0px;
}

.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
  left: auto;
}

.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
  color: #ffffff; background: rgb(51, 102, 153);
}

.tabs-inner .widget li ul a {
  display: block; padding-left: 1.25em; padding-right: 1.25em;
  margin-left: 0px; margin-right: 0px; border: none;
  color: #000000; background: rgb(243, 244, 246); } .tabs-inner .widget li ul, .tabs-inner .widget li ul a {
  width: 220px;
}

4. Cari kod <a expr:href='data:link.href><data.link.title/></a>

5. Letakkan kod berikut di bawah <b:/loop>

<li><a href='#'>Menu</a>
  <ul> <li><a href='URL'>Sub Menu 1</a></li>
    <li><a href='URL'>Sub Menu 2</a></li>
    <li><a href='URL'>Sub Menu 3</a></li>
  </ul>
</li>

6. Boleh tukar teks Menu dan Sub Menu ikut kesesuaian dan letakkan link di URL. Selamat mencuba :)

Pembangunan Blog 2020 : Menambah Gambar

Content tanpa gambar ibarat nasi tanpa lauk :)...Content yang menarik perlu ditambah dengan gambar yang cantik untuk menarik perhatian pembaca. Kalau boleh setiap satu posting diletakkan sekurang-kurangnya gambar untuk melengkapkan content yang kita letak dalam blog.

Ok. Kita belajar macammana cara untuk menambah gambar di dalam blog.

1. Klik button Insert Image dan skrin berikut akan terpapar. Ada 4 pilihan untuk upload gambar iaitu Upload from computer, Photos, Blogger dan By URL.


2. Upload from computer : Pilih gambar yang ada dalam komputer. Klik Choose files dan pilih gambar yang ingin dimasukkan dalam post

3. Blogger : Pilih gambar yang sedia ada dalam blog tanpa perlu mencari dalam komputer

4.  By URL : Pilih gambar daripada website atau blog lain dengan meletakkan URL gambar tersebut. Pilih gambar yang inginkan dan dan right click pada gambar tersebut dan pilih Copy Image Location.

5. Paste kan URL yang telah di copy dan gambar akan terpapar. Klik Select

6. Pilih Left, Centre dan Right untuk menukar kedudukan gambar. Pilih tanda [+, -] untuk menukar saiz gambar.  Boleh juga membuat caption untuk gambar dengan Klik pada gambar berbentuk pen di sebelah atas tersebut. Klik pada gambar pen di sebelah link tersebut bagi edit link sedia ada.

7. Selamat mencuba