Kode Css Menampilkan Gambar Element Footer Dan Coment

by Ikhsaan 121 on 07:04 PM, 01-Apr-13

Category: Tutorial Mwb

Kode Css menampilkan gambar Elemen Footer Dan Coment

Met malam shob...masih ingin menyambung mengenai kode script css tema default. Pada postingan sebelumnya menampilkan icon gambar pada element post, ,post single, post-meta, post-meta 2 dll. Kali ini saya akan share cara menampilkan gambar element footer dan coment pada tema css default. Karena ada shobat Mwb yang bertanya lewat guestbook, ya udah saya share aja di postingan kali ini.

Namun sebelum membahas mengenai kode script menampilkan gambar element footer dan coment, saya akan beritahukan kenapa saya selalu membuat postingan kategori yg sama dalam satu halaman home page. Karena ini salah satu di antara sekian banyak trik SEO agar postingan kita bisa tampil di halaman pertama mesin pencari google. Dan tentunya masih banyak trik SEO yang di pakai oleh para master blogger, agar postingannya cepat terindex dan bisa tampil di halaman pertama google. Dan trik itupun bisa berbeda-beda mengikuti template yang di gunakan. Ya udah segitu aja shob curhatan mengenai SEO, biar bisa di serap intinya.

Oke kembali menyambung tema judul di atas mengenai kode css menampilkan gambar element footer dan coment. Ya pada bagian element footer atau bisa di artikan kaki atau element bagian paling bawah pada template. Yang bisa di lihat pada tulisan paling bawah di tema blognya ''Visitor Counter : 0019567 © 2013 Blog Ikhsaan121. Powered by MyWapBlog.com'' ← ya ini yang di maksud bagian element footer. Dan untuk element coment pastinya udah tau.

Untuk menampilkan icon gambar pada footer bisa dengan dua cara:

  1. Bisa dengan Menambahkan kode script pada element footer.
  2. Bisa juga Tanpa menambahkan kode script atau tetap menggunakan kode yang lama.

Dan untuk element coment, ini untuk icon gambar di samping kiri nama komentar, dan icon gambar pada kolom ingin memberi komentar. Untuk masing2 kodenya silakan di copy kodenya di kolom textarea di bawah ini:

Kode css icon gambar tambahan pada element footer

kode css icon gambar menggunakan element footer yang sudah ada tanpa menambah kode css element footer

Kode css tambahan menampilkan icon gambar di samping kiri nama comentar

Kode css tambahan menampilkan icon gambar di kolom mengetik comentar

Penjelasan:

  • Untuk elemen footer yang sudah ada tinggal atur jarak batas antara element atas, samping kanan, bawah, dan samping kiri. Maksudnya atur ukuran untuk margin dan paddingnya. contohnya: margin: 1px 2px 1px 2px; padding: 4px.
    - Dan untuk posisi teks, teksnya bisa di ubah ke samping kanan, samping kiri atau ke tengah. Untuk merubah posisi teks, tinggal di ubah dengan kode berikut: text-align: center; (posisi teks berada di tengah), text-align: right; (posisi teks berada di samping kanan), text-align: left; (posisi teks berada di samping kiri)
    - Untuk posisi icon gambar bisa di atur juga posisi gambarnya di pojok kanan atas dan bawah, pojok kiri atas dan bawah, di tengah samping kanan dan samping kiri, bisa di tengah atas dan bawah atau di tengah atas dan bawah. Intinya menyesuaikan tampilan posisi gambar dan teksnya atau berkreasi sesuai keinginan seleranya untuk mempercantik tampilan tema blognya. Jadi panjang shob tutornya, di persingkat aja. kodenya sebagai berikut: top right no-repeat; (icon gambar di pojok atas kanan), top left no-repeat; (icon gambar di pojok kiri atas), center top no-repeat;(icon gambar di tengah atas), center bottom no-repeat; (icon gambar di tengah bawah), bottom right no-repeat; (icon gambar di pojok kanan bawah), bottom left no-repeat; (icon gambar di pojok kiri bawah)
  • Untuk kode css tambahan utk element footer, kodenya tinggal di tempel aja di tema cssnya. Posisi teks, jarak antara element, icon gambar, warna teks, dan background mengikuti kode element footer yang sudah ada. Jadi element footer yg sudah ada jgn lagi di tambahkan kode icon gambarnya. Dan buat yg menggunakan css import, ingin menampilkan icon gambar di element footernya, tinggal di tempel aja kodenya di bawah kode css importnya.
  • Untuk ukuran icon gambarnya tinggal di sesuaikan aja ukurannya sesuai dengan element yang akan di tampilkan icon gambarnya. Untuk icon gambar di samping kiri nama comentar, tentunya ukuran gambarnya kecil atau bisa menggunakan ukuran gambar 30x30, 40x40, 50x50 atau tinggal di sesuaikan aja. Dan untuk warna teks dan warna element background di sesuaikan aja dengan kreasi selaranya. Jadi kode css yang ada di kolom textarea di atas bisa di utak-atik menurut selera tampilan tema blognya

Oke sekian dulu shob untuk kode css menampilkan gambar element footer dan coment semoga tutornya bisa di pahami. Wassalam...

Silakan bisa baca juga untuk postingan sebelumnya:

  1. Tutorial Mywapblog Menambah Kode Script Css Di Blog Mwb
  2. Tutorial Mywapblog Cara Menambah Icon Gambar Pada Tema Default
  3. Cara Buat Navigasi Bertingkat Dengan Gambar Pada Css Default

Share on Facebook Share on Twitter

Comments

25 responses to "Kode Css Menampilkan Gambar Element Footer Dan Coment"

Fajrul Haq [07:09 PM, 01-Apr-13]

mantap smile

Kunbalnya sob

jhons60v2 [07:49 PM, 01-Apr-13]

Assalamualaikum wrwb
mantap sob, kapan -kapan ane coba

jhon.bumi.tk/dampak-buruk-merubah-dan-mempercantik-my.xhtml

Saeful [07:55 PM, 01-Apr-13]

mantap banget postnya. Ditunggu kunbal ma komentnya digubug ane

M Ikhsan [08:10 PM, 01-Apr-13]

@Fajrul Haq,

M Ikhsan [08:12 PM, 01-Apr-13]

@jhons60v2,
Wa'alaikum salam wr wb
Iya shob mksh kunjungannya

M Ikhsan [08:12 PM, 01-Apr-13]

@Saeful,
Iya shob...mksh ya..

mikss [08:24 PM, 01-Apr-13]

Keren shob..berguna banget sob..thanks dah jawab pertanyaanku

Hisam [08:49 PM, 01-Apr-13]

met malam sob, itu pasti untuk css mobile ya sob, eh mampir ya sob ada menu baru sob, mengenai tentang rahasia domain kamu sob smile

http://aljafari.mywapblog.com/rahasia-subdomain-mwb-pada-rengking-alex.xhtml

M Ikhsan [08:50 PM, 01-Apr-13]

@mikss,
Iya shob sama2

M Ikhsan [08:53 PM, 01-Apr-13]

@Hisam,
Yups bener shob hehe.. biggrin
Iya shob..

Rahma manies [09:04 PM, 01-Apr-13]

Kunjungan pertama kali kang..liat2 ajah lum ngrti soal gituan di tnggu visbek yah

mikss [09:42 PM, 01-Apr-13]

dah jadi sob thank triknya mantap

Reno Edwardo [11:59 PM, 01-Apr-13]

Hadir sob smile maaf telat soalnya jaringan lagi bermasalah hehe

kunbal + commentnya di tunggu (lagi) biggrin

Totok Koponk [04:40 AM, 02-Apr-13]

mampir dulu ke rumah masbro Iksan..
semoga sukses selalu

Rachma cemilk manis [06:22 AM, 02-Apr-13]

Hadir kang ! Jalan2 lg yah

andika [06:28 AM, 02-Apr-13]

Absen pagi s0b. . .hadir trus

Hisam [09:06 AM, 02-Apr-13]

makasih telah mampir ya sob, met pagi sob smile

http://aljafari.mywapblog.com/rahasia-subdomain-mwb-pada-rengking-alex.xhtml

Koplak Kampung [10:09 AM, 02-Apr-13]

Trmksh kawan atas informasinya...sangat bermanfaat sekali bagi Koplak...pamit kawan mau Simpan Page ini di Bookmark Online Koplak...Oke kawan..Salam MWB.

Official ALMUSLIMUN [11:35 AM, 02-Apr-13]

Assalamu Alaikum Wr Wb.
Silaturrahmi siang.

Erina dzt [01:43 PM, 02-Apr-13]

Mantap nih infonya.di save dulu, txs... smile

Rachma cemilk manis [02:33 PM, 02-Apr-13]

Kang minta informasinya donk,g.mana sich verifikasi meta tag blog k.google. . .
Aku tnggu jwbanx di tempatku,atau law boleh d.postingin ajah kang mas. .trims

widiarko [07:48 PM, 02-Apr-13]

Asalamualaikum
selamat malem sob
widiarko hadir tuk absen malem..

Aku ijin nyimak post Yang MANTAP ini ya Sob..

JANGAN LUPA kunbal ya sob..

Wassalamualaikum

komputer vs software [09:35 PM, 02-Apr-13]

izin ronda pak . takut ada yang maling nantinya smile

http://aozora15.yu.tl/category/kumpulan-software/1.xhtml

Application download site [02:16 AM, 03-Apr-13]

Lumayann nambah ilmu blogging biggrin



http://apphandphone.co.vu
http://amir-mugi.mywapblog.com

iqbal mampi [01:14 AM, 27-May-13]

thank gan,,

di tunggu mampir baliknya.

Subscribe to comment feed: [RSS] [Atom]

New Comment

New comments disabled for this post.