Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

19
Tgl. 15 Agustus 2012

Cara Membuat Bingkai Untuk Widget Yang Terdapat Di Area Footer Halaman Blog

Sobat, apabila sebelumnya saya telah menerbitkan artikel mengenai kustomisasi widget (dalam hal ini adalah kustomisasi untuk membuat bingk...

Tampilan Widget Pada Footer
Sobat, apabila sebelumnya saya telah menerbitkan artikel mengenai kustomisasi widget (dalam hal ini adalah kustomisasi untuk membuat bingkai dan mengubah warna latar pada judul serta area widget), maka perlu diketahui bahwasanya teknik tersebut hanya berlaku pada widget yang terdapat dalam bagian sidebar blog saja. Ini berarti bingkai dan warna latar yang terbentuk oleh kode CSS yang dibuat hanya diterapkan pada widget yang terpasang pada sidebar, sedangkan widget yang terdapat pada footer halaman tidak akan akan terpengaruh atau tidak berubah sama sekali.

Nah, sekaligus menanggapi pertanyaan sahabat Blogger yang diajukan dalam artikel tanya jawab tentang bagaimana cara membuat bingkai pada widget yang terdapat atau terletak di area footer, maka berikut ini adalah uraian langkah-langkah yang dapat dikerjakan untuk keperluan tersebut.

Seperti biasa, apabila ingin mengimplementasikan teknik ini pada blog yang Anda kelola, maka silakan mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan rangkaian kode CSS seperti dalam contoh berikut ini tepat di atasnya.
.footer-outer .widget h2 {
  color: #ffffff;
  text-align: center;
  background: #000000;
  border: 1px solid #ffffff;
  border-radius: 5px;
  padding: 5px;
  margin: 0px;
}

.foot.section .widget-content {
  color: #000000;
  text-align: center;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 5px;
  margin: 0px;
  height: 150px;
  overflow: auto;
}

.foot.section .widget.Attribution .widget-content {
  padding: 0px;
  margin: 0px;
  height: auto;
  border: none;
  background: inherit;
}

Keterangan:
Perlu diingat bahwa rangkaian kode CSS di atas hanyalah sekedar contoh. Sehingga apabila tampilan yang dihasilkan belum sesuai dengan desain halaman blog Anda, maka silakan dilakukan perubahan seperlunya terhadap kode yang ada di dalamnya.
Sebagai catatan bahwasanya rangkaian kode di atas dimaksudkan untuk mengatur 3 (tiga) bagian, yaitu: 1) .footer-outer .widget h2 { digunakan untuk mengatur judul widget, 2) .foot.section .widget-content { digunakan untuk mengatur area konten yang terdapat pada widget, dan 3) .foot.section .widget.Attribution .widget-content { digunakan untuk mengatur area widget atribusi.

Ketiga, simpan template.

Sehingga apabila template telah disimpan dan kode yang digunakan adalah rangkaian kode di atas, maka hasilnya adalah seperti yang tampak pada gambar di bawah ini.
ELTELU - Contoh Hasil Kustomisasi Untuk Widget Yang Terdapat Pada Footer


Semoga berguna serta bermanfaat. Dan selamat bereksperimen.
Salam.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 19 komentar pada artikel ini ▶
15/08/12 14.03 O

Sobat, saya sudah coba dan berhasil, untuk sementara masih sesuaikan tampilannya.

15/08/12 14.05 O

Sobat, saya sudah coba dan berhasil, untuk sementara masih sesuaikan tampilannya. Trima kasih, salam sukses.

15/08/12 22.58 O

@Kraeng FranciscoOke, Terimakasih dan salam sukses balik Sobat...

22/08/12 20.30 O

dicoba gan

Anonim
24/08/12 21.12 O

wah ini toh jurusnya bang. keren. mantap bang, ane malah terpesona dengan tampilan webnya. ane mau belajar kaya abang ah. tenkyu nie bang. :D

24/08/12 21.12 O

wah ini toh jurusnya bang. keren. mantap bang, ane malah terpesona dengan tampilan HP si abang, keren. ane mau belajar ah :D

25/08/12 01.56 O

@muhamad nurarifSilakan Sob...

25/08/12 01.59 O

@DrieantTerimakasih Sobat. Silakan apabila Sobat bermaksud untuk mempelajarinya. Saya pun senang apabila artikel blog ini dapat berguna dan bermanfaat bagi Sobat blogger yang lain.

01/09/12 14.07 O

Mantap ne,sob. Artikelnya bagus..

02/09/12 02.52 O

@goez iniTerimakasih Sobat...

25/12/12 19.18 O

permisi mas.. mas, kok setiap kali sayi mau membuat editaan di atas kode ]]> selalu gagal ya mas ?? tidak terjadi apa apa.. saya telah mencoba trik yang membuat tanggal didalam kotak dgn footer ini mas..
nggak berhasil semua..
tolong bantuannya mas...

27/12/12 01.52 O

@Muhsin AzizSobat, sebelumnya mohon maaf bila saya tidak dapat memberikan solusi atas kendala yang Sobat hadapi.

Hal ini disebabkan karena saya tidak menemukan informasi apapun tentang alamat blog yang Sobat kelola dalam profil Google Plus, sehingga saya tidak dapat melakukan pengecekan secara langsung untuk mengetahui penyebabnya.

27/12/12 19.03 O

@AYAHE MELA

maap mas saya lupa menyerta link blog saya.

blog saya : http://bocoransoalsoal.blogspot.com/

mohon bantuannya mas..
terimaksih sebelumnya, maap ngerepotin

28/12/12 23.18 O

@Muhsin AzizSetelah saya cek alamat blog yang Sobat berikan, ternyata templatenya merupakan kustom template (dari pihak ketiga). Sehingga dapat disimpulkan bahwa inilah yang menjadi penyebabnya karena sebagian besar artikel yang saya terbitkan di blog ini memang ditujukan untuk keperluan kustomisasi template standar Blogger.

Semoga dapat membantu. :)

06/01/13 12.23 O

saya belum berhasil nihh sob,tolong di bantu
www.adhitezt12.blogspot.com

10/01/13 02.30 O

@afrilla adhityaTeknik ini memang ditujukan untuk template standar Blogger, Sob. Sementara itu template yang Sobat gunakan merupakan kustom template.

17/12/13 11.42 O

Wah makasih gan.. udah ane coba dan hasilnya maknyuuusss.. Widgetnya udah keren. hehe

Thanks

17/12/13 23.38 O

@Putut RismawanSama-sama Sob. Terimakasih juga atas pos komentarnya dalam artikel ini. :)

23/02/16 00.30 O

tutorial Cara Membuat Bingkai Footer Blog berhasil saya masukkan ke weblog, kemudian ada yg diutak-atik dan ada yg dibuang.
senang jk mau berkunjung melihat kerja praktek saya.
terimakasih, salam sejahtera selalu

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog