Membuat Template Blogspot Bagian 6 Footer Wrapper

Tutorial dibawah ini merupakan kelanjutan dari Tutorial Membuat Template Blogspot Bagian 5 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Bagian 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 2012 <data:blog.title/><br/>

Original Template oleh : <a href=http://blogspot.com/>U-sup 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.

Read More

menghapus paparan attribution pada template

Attribution adalah widget yang berada dibahagian bawah template kita.Ia memaparkan nama template dan perekanya.Ia tidak membawa kesan apa apa cuma mungkin ada yang ingin paparan ini ditiadakan.Jika ingin menghapuskan paparan ini,Caranya adalah seperti berikut:

Masuk ke Dashboard-Template--edit HTML

dan cari kod ini:

<b:section class=foot id=footer-3 showaddelement=no>
<b:widget id=Attribution1 locked=true title= type=Attribution/>
</b:section>

jika sudah jumpa hapuskan kod tersebut

pada sesetengah template tiada kod tadi,tapi mempunyai kod seperti ini:

<b:widget id=Attribution1 locked=true title= type=Attribution>
<b:includable id=main>
<b:if cond=data:feedbackSurveyLink>
<div class=mobile-survey-link style=text-align: center;>
<data:feedbackSurveyLink/>
</div>
</b:if>

<div class=widget-content style=text-align: center;>
<b:if cond=data:attribution != &quot;&quot;>
<data:attribution/>
</b:if>
</div>

<b:include name=quickedit/>
</b:includable>
</b:widget>

Delete semua kod diatas
kemudian klik save tempale
paparan berikut akan muncul

Pilih delete widgets
Kemudian lihat hasilnya.
update 13/5/2013

Read More

Cara Mengedit Blog Menggunakan Perancang Template

Cara edit template blog menggunakan perancang template blogger merupakan cara termudah untuk membuat blog, mendesign blog dengan teratur dan menarik. Ada beberapa hal yang bisa anda lakukan dengan fitur Perancang Template Blogger ini.

Tapi perlu saudara catat bahwa fitur default blogger ini hanya bekerja pada template blog default dari blogger.com. Jadi tidak jaminan trik ini akan bekerja pada template dari sumber-sumber lain yang pada umumnya memiliki susunan letak elemen yang berbeda-beda serta layout berbeda.

Jadi jika anda menggunakan template dari sumber lain, maka template itu kemungkinan harus dilepas dulu jika anda mau bermain-main dengan Perancang Template Blogger ini. Sebenarnya perancang template ini bisa membuat tampilan blog yang menarik, rapih, dan teratur layaknya seperti Website Personal. Hanya saja hal tersebut dapat dilakukan jika kamu sudah terampil dan ahli menggunakannya.

Jadi langsung saja kita bahas bagaimana mengedit tampilan Blog anda. Ingat, apapun template default yang telah anda pilih, semuanya bisa diedit di Perancang Template, termasuk template Dinamis… Jadi perhatikan langkah dan tahapannya :

Cara Mengedit Blog (Cara 1) :

• Di Dashbord, klik judul blog anda.
• Anda akan dibawa ke halaman Ikhtisar yang berisi data umum blog…
• Lihat di bagian kiri layar browser anda. Di situ terdapat beberapa menu secara vertical. Silahkan klik menu Template. Ini adalah menu yang akan sering digunakan jika anda sedang belajar cara membuat blog di blogger.
• Pada layar tampilan menu Template anda akan melihat tombol orange yang bertuliskan Sesuaikan. Klik tombol tersebut.

Cara Mengedit Blog Cara 2 :
1. Masuk ke Blogger, Pilih Layout / Tata Letak / Rancangan.
2. Klik Tmplate Designer maka anda secara otomatis akan masuk ke tempat pengeditan template.

Anda akan langsung diantar ke Perancang TEMPLATE BLOGGER, dan di situ ada 5 menu dasar, yaitu Template, Latar Belakang, Sesuaikan Lebar, Tata Letak, dan Tingkat Lanjut.

Pada menu template ada 7 template dasar yang bisa saudara pilih. Setiap Template dasar mempunyai beberapa pilihan modifikasi template. Jadi silahkan diklik yang sesuai keinginan anda. Lalu klik tombol Terapkan / Apply Ke Blog di kanan atas layar anda seperti pada gambar pertama.

Pada menu Latar Belakang, anda akan melihat sebuah kotak hitam dengan tulisan “Gambar Latar” di atasnya. Silahkan klik pahah kecil pada kotak hitam tersebut untuk melihat pilihan gambar latar lainnya…. Buka semua kategori yang ada sampai anda menemukan gambar tampilan latar belakang yang anda suka. Jika sudah ketemu silahkan klik tombol Selesai, di bagian bawah.

Lewati terlebih dahulu menu Sesuaikan Lebar, sebaiknya anda lanjut dulu memilih di menu Tata Letak. Di menu ini anda bisa memilih bagaimana pengaturan area untuk artikel, sidebar, dan footer dari template blog yang sedang anda edit. Silahkan pilih Tata Letak Isi, dan Tata Letak Kaki yang disukai, setelah itu klik Terapkan Ke Blog.

Sekarang kembali ke menu Sesuaikan Lebar. Di sini ada pengaturan Lebar Seluruh Blog dan Lebar Sidebar yang terpasang di dalamnya. Silahkan lihat tampilan preview di bagian bawah jendela perancang Template untuk melihat perubahan lebar. Jika sudah selesai, silahkan klik Terapkan Ke Blog.
Menu terakhir adalah Tingkat Lanjut. Walaupun namanya tingkat lanjut tapi tidak ada yang perlu ditakutkan,…ini benar-benar sangat biasa saja. Pada menu ini ada banyak sekali pilihan pengaturan warna.  Baik itu Latar, Judul, Link, Teks dalam Halaman, dan lain sebagainya. Silahkan atur dan edit sesuka keinginan anda, tidak akan ada masalah. Kalau anda sudah menemukan komposisi warna yang anda sukai silahkan klik Terapkan Ke Blog.

Anda bisa mengklik Lihat Blog di bagian atas untuk melihat hasil edit tampilan yang anda lakukan sebelumnya di Perancang Template Blogger. Mudah-mudahan anda suka dengan hasil yang tadi diterapkan. Jadi sekian dulu artikel cara mengedit tampilan blog di Perancang Template Blogger ini, semoga membantu dan bermanfaat.

Read More