Belajar Cara Edit Template Blogger Supaya Keren Part 4 ( Final ! )

Cara Edit Template Blogger Final

Tutorial Final ini saya dedikasikan khusus untuk teman-teman Blogger yang masih kesulitan mengedit template. Jadi untuk para grasp silahkan pass ke remark atau close saja halaman ini.

Sesuai janji saya kemarin, pada post kali ini maka saya akan menjelaskan mengenai Cara Memasukan CSS yang masih ada di Developer Tools ke dalam template yang sesungguhnya (xml).

Saya harap Anda sudah membaca academic sebelumnya, agar nantinya saat membaca pejelasan dibawah ini Anda tidak bingung.

' hyperlink alternatif untuk membaca artikel sebelumnya '

<ul>

  • Belajar Cara Edit Template Blogger Supaya Keren Part 1</ul><ul>
  • Belajar Cara Edit Template Blogger Supaya Keren Part 2</ul><ul>
  • Belajar Cara Edit Template Blogger Supaya Keren Part three</ul>

    Untuk mengingatkan saja, template yang akan kita import ke dalam xml nanti hasilnya akan seperti ini.

    Hasil Akhir Belajar Cara Edit Template Blogger Keren

    Tak perlu berlama-lama sekarang kita mulai saja penjelasannya.

    Tutorial Mengedit Template Blogger Supaya Keren Part four ( Final ! )

    Sebenarnya cukup mudah untuk memindahkan css yang sudah kita tulis di Developer Tools dan memindahkannya ke dalam xml, yaitu cukup dengan mencari '' dan mengcopas kan saja. Agar lebih jelas saya sertakan pula gambar. Dan pastikan Anda sudah masuk ke dalam document xml di template Anda, caranya : lihat sidebar kiri, lalu Template dan pilih Edit HTML.

    1. Mengedit Warna Background dan Border Body

    Untuk mengubah Background Body kita cari dulu class dengan nama .body-fauxcolumns lalu kita tambahkan background: #f2f2f2; untuk mengganti warna backgroundnya.

    Dan lanjut kita cari lagi selector class bernama .content-inner dan kita masukan property border: 1px solid gainsboro;

    Belajar Cara Edit Template Blogger Keren Gambar 1

  • Mengedit Warna Tanggal dan Border Artikel
  • Tak jauh beda dengan cara diatas, caranya kita cari (ctrl+f) terlebih dahulu selector .main-inner dan selanjutnya kita masukkan property ini.

    Padding: zero zero;

    border: 1px solid gainsboro;

    padding-backside: 10px;

    border-radius: 6px;

    Sementara untuk mengganti warna tanggal kita cari selector .date-header span dan tambahkan selector dibawah ini.

    Background-color: #FFFFFF;

    shade: #747474;

    padding: zero.4em;

    letter-spacing: 3px;

    margin: inherit;

    border: 1px solid gainsboro;

    border-radius: 6px;

    font-weight: bold;

    font-length: 14px;

    Belajar Cara Edit Template Blogger Keren Gambar 2

  • Mengedit Warna Background, Border dan Judul Sidebar
  • Langkahnya sama persis dengan cara diatas namun bedanya disini kita tidak mencari selektor, melainkan kita akan menambahkan atau membuat selektor sendiri.

    Cara pertama, ketik ctrl + f lalu ketikkan </b:skin> dan masukkan selektor baru ini, tepat diatas kode </b:skin> tadi.

    Apart

    border: 1px solid gainsboro;

    border-radius: 6px;

    padding-pinnacle: 10px;

    padding-backside: 10px;

    #sidebar-proper-1 h2

    border-backside: 1px strong gainsboro;

    padding: 10px;

    text-align: middle;

    font-size: 16px;

    Untuk lebih jelasnya tentanng peletakannya, bisa Anda lihat screenshot dibawah ini.

    Belajar Cara Edit Template Blogger Keren Gambar 3

  • Menambahkan Slot Iklan, Menu Help dan Menu Navigasi
  • Untuk mempermudah Anda memahaminya maka saya akan membaginya menjadi tiga bagian.

    <ul>

  • Menambahkan Slot Iklan</ul>

    Cari div dengan selector content-outer lalu pastekan kode html ini<div class="slotiklan">Advertisement 728x90</div> dibawahnyacontent-outer.

    Selanjutnya kita tambahkan CSSnya.

    .Slotiklan

    border: 1px solid gainsboro;

    peak: 90px;

    history-coloration: #FDF5F5;

    border-bottom: 0;

    font-length: 20px;

    padding-left: 60px;

    line-peak: 90px;

  • Menambahkan Menu Help
  • Letakan kode dibawah ini, tepat dibawahnya div slot iklan tadi.

    <div id="navbarfirst">

    <ul>

    <li><a href="">About Us</a></li>

    <li><a href="">Sitemap</a></li>

    <li><a href="">Contact Us</a></li>

    </ul>

    <div>

    Lalu kita permak dengan CSS seperti ini.

    #navbarfirst

    background: white;

    padding: 5px;

    border: 1px solid gainsboro;

    border-bottom: 0;

    padding-left: 515px;

    height: 40px;

    #navbarfirst ul li

    go with the flow: left;

    listing-fashion-type: none;

    padding-left: 33px;

    font-length: 14px;

  • Menambahkan Menu Navigasi
  • Menu navigasi ini akan kita letakkan dibawah header (judul blog), maka kita cari dulu </header> dan masukkan kode html unyuk membuat navigasi dibawah ini.

    <div id="navbarsecond">

    <ul>

    <li><a href="">SEO Lokal</a></li>

    <li><a href="">SEO Manca</a></li>

    <li><a href="">SEO Tips</a></li>

    <li><a href="">SEO Kawe</a></li>

    <li><a href="">SEO Sawang</a></li>

    <li><a href="">SEO Sumber</a></li>

    <li><a href="">SEO Google</a></li>

    </ul>

    </div>

    Selanjutnya kita cari lagi </b:skin>, dan letakkan css dibawah ini tepat diatasnya kode </b:skin>.

    #navbarsecond

    border-backside: 1px strong gainsboro;

    height: 30px;

    padding-left: 50px;

    #navbarsecond ul li

    go with the flow: left;

    listing-fashion-type: none;

    padding-right: 40px;

    font-length: 14px;

    Dan wala, selesai sudah template simple yang gak ada namanya ini, hha. Dengan begini selesai sudah rangkain Tutorial berseri ini.

    Selanjutnya terserah Anda, mau dijual kah templatnyae atau dibuangkah, tapi saran saya sih dijual murah aja dulu Rp. 5.000,00 misalnya. Kalau laku a thousand template kan lumayan banget dapat five Juta.

    Jika tidak mau repot memasang satu persatu kode diatas, Anda bisa mendownload Template XML secara lengkapnya melalui hyperlink dibawah ini :

    Template Blogger SEO Light

    Cara Edit Template Blogger

    Download

    Demo

    Mungkin ini saja yang bisa saya begikan, mohon maaf jika ada yang kurang dalam Tutorial ini. Akhir kata saya ucapkan terimakasih banyak telah berkunjung dan bersedia membaca educational cupu ini.

    [ Index ] Belajar Cara Edit Template Blogger Supaya Keren : Part 1 - Part 2 - Part 3 - Part 4

    0 Response to "Belajar Cara Edit Template Blogger Supaya Keren Part 4 ( Final ! )"

    Post a Comment

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel