Tutorial Final ini saya dedikasikan khusus untuk kawan-kawan Blogger yang masih kesusahan mengedit template. Kaprikornus untuk para master silahkan skip ke comment atau close saja halaman ini.
Sesuai komitmen saya kemarin, pada post kali ini maka saya akan menandakan terkena Teknik Memasukan CSS yang masih ada di Developer Tools ke dalam template yang tolong-menolong (xml).
Saya harap Anda sudah membaca tutorial sebelumnya, supaya nantinya ketika membaca pejelasan dibawah ini Anda tidak bingung.
' link alternatif untuk membaca artikel sebelumnya '
Untuk mengingatkan saja, template yang akan kita import ke dalam xml nanti risikonya akan menyerupai ini.
Tak perlu berlama-lama kini kita mulai saja penjelasannya.
Tutorial Mengedit Template Blogger Supaya Keren Part 4 ( Final ! )
Sebenarnya cukup praktis untuk memindahkan css yang sudah kita tulis di Developer Tools dan memindahkannya ke dalam xml, yakni cukup dengan mencari '' dan mengcopas kan saja. Agar lebih terang saya sertakan pula gambar. Dan pastikan Anda sudah masuk ke dalam file xml di template Anda, caranya : lihat sidebar kiri, kemudian Template dan pilih Edit HTML.
- Mengedit Warna Background dan Border Body
Untuk mengubah Background Body kita cari doloe class dengan nama .body-fauxcolumns kemudian kita menambahkan background: #f2f2f2; untuk mengganti warna backgroundnya.
Dan lanjut kita cari lagi selector class berjulukan .content-inner dan kita masukan property border: 1px solid gainsboro;
- Mengedit Warna Tanggal dan Border Artikel
Tak jauh beda dengan cara diatas, caranya kita cari (ctrl+f) terlebih lampau selector .main-inner dan selanjutnya kita masukkan property ini.
padding: 0 0;
border: 1px solid gainsboro;
padding-bottom: 10px;
border-radius: 6px;
Sementara untuk mengganti warna tanggal kita cari selector .date-header span dan menambahkan selector dibawah ini.
background-color: #FFFFFF;
color: #747474;
padding: 0.4em;
letter-spacing: 3px;
margin: inherit;
border: 1px solid gainsboro;
border-radius: 6px;
font-weight: bold;
font-size: 14px;
- 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.
Teknik pertama, ketik ctrl + f kemudian ketikkan </b:skin> dan masukkan selektor gres ini, sempurna diatas arahan </b:skin> tadi.
aside {
border: 1px solid gainsboro;
border-radius: 6px;
padding-top: 10px;
padding-bottom: 10px;
}
#sidebar-right-1 h2 {
border-bottom: 1px solid gainsboro;
padding: 10px;
text-align: center;
font-size: 16px;
}
Untuk lebih jelasnya tentanng peletakannya, sanggup Anda lihat screenshot dibawah ini.
- Menambahkan Slot Iklan, Menu Help dan Menu Navigasi
Untuk mempergampang Anda memahaminya maka saya akan membaginya menjadi tiga bagian.
- Menambahkan Slot Iklan
Cari div dengan selector content-outer kemudian pastekan arahan html ini <div class="slotiklan">Advertisement 728x90</div> dibawahnya content-outer.
Selanjutnya kita menambahkan CSSnya.
.slotiklan {
border: 1px solid gainsboro;
height: 90px;
background-color: #FDF5F5;
border-bottom: 0;
font-size: 20px;
padding-left: 60px;
line-height: 90px;
}
- Menambahkan Menu Help
Letakan arahan dibawah ini, sempurna 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 menyerupai ini.
#navbarfirst {
background: white;
padding: 5px;
border: 1px solid gainsboro;
border-bottom: 0;
padding-left: 515px;
height: 40px;
}
#navbarfirst ul li {
float: left;
list-style-type: none;
padding-left: 33px;
font-size: 14px;
}
- Menambahkan Menu Navigasi
Menu navigasi ini akan kita letakkan dibawah header (judul blog), maka kita cari doloe </header> dan masukkan arahan 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 sempurna diatasnya arahan </b:skin>.
#navbarsecond {
border-bottom: 1px solid gainsboro;
height: 30px;
padding-left: 50px;
}
#navbarsecond ul li {
float: left;
list-style-type: none;
padding-right: 40px;
font-size: 14px;
}
- Menambahkan Slot Iklan
Selanjutnya terserah Anda, mau dijual kah templatnyae atau dimembuangkah, tapi masukan saya sih dijual murah aja doloe Rp. 5.000,00 misalnya. Kalau laris 1000 template kan tidak mengecewakan banget sanggup 5 Juta.
Jika tidak mau repot memasang satu persatu arahan diatas, Anda sanggup mendownload Template XML secara lengkapnya melalui link dibawah ini :
Template Blogger SEO Light
Mungkin ini saja yang sanggup saya begikan, mohon maaf jikalau ada yang kurang dalam Tutorial ini. Akhir kata saya ucapkan terimakasih banyak sudah berkunjung dan bersedia membaca tutorial cupu ini.
Tag :
Blogger Tips
0 Komentar untuk "Belajar Cara Edit Template Blogger Semoga Keren Part 4 ( Selesai ! )"