Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

65
Tgl. 23 Juli 2012

Cara Membuat Bingkai Dan Mengubah Warna Latar Pada Judul Serta Area Widget

Sobat, seperti kita tahu bahwasanya hampir semua template standar yang disediakan oleh Blogger tidak menyertakan aksesori berupa bingkai u...

ELTELU - Tampilan Bingkai Pada Widget
Sobat, seperti kita tahu bahwasanya hampir semua template standar yang disediakan oleh Blogger tidak menyertakan aksesori berupa bingkai untuk setiap widget yang dipasang di halaman. Dan hal ini sangat berbeda apabila dibandingkan dengan kustom template yang umumnya menyertakan aksesori berupa bingkai untuk bagian tersebut, sehingga tampilan halaman blog yang yang menggunakan template standar Blogger menjadi terkesan tidak lebih menarik apabila dibandingkan dengan blog yang menggunakan kustom template.

Namun demikian bukan berarti kita tidak dapat melakukan kustomisasi pada template standar Blogger agar tampilannya menjadi lebih menarik bila dibandingkan dengan kustom template. Oleh sebab itulah dalam artikel sebelumnya yang berjudul “Inilah Beberapa Daftar Template Blog Terbaik Yang Pernah Ada” saya menyebutkan bahwa sebenarnya template standar yang disediakan oleh Blogger merupakan template blog terbaik yang pernah ada untuk platform Blogger (Blogspot), dengan salah satu alasannya yaitu karena kemudahan bagi kita bila ingin melakukan kustomisasi.

Salah satu dari kemudahan kustomisasi yang dapat kita lakukan adalah ketika kita ingin memodifikasi desain tampilan untuk setiap elemen halaman, termasuk diantaranya yaitu modifikasi widget dengan cara menambahkan bingkai dan warna latar untuk bagian tersebut. Dimana kustomisasi dapat dilakukan dengan menambahkan kode CSS tertentu ke dalam template untuk menggantikan kode CSS standar yang diberikan oleh Blogger.

Nah, dalam hal melakukan kustomisasi untuk bagian widget, dalam hal ini adalah memberi garis dan warna latar untuk bagian tersebut, maka Anda dapat 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 kode berikut ini tepat di atasnya.
.main-inner .sidebar .widget h2 {
  margin-top: 0px;
  margin-bottom: 1px;
  margin-left-value: 0px;
  margin-right-value: 0px;
  padding: 3px 3px;
  color: #274e13 !important;
  text-align: center;
  border: 1px solid #666666;
  border-radius: 4px;
  box-shadow: 1px 1px 6px 1px #3d85c6;
  background: #bbbbbb;
}
 
.main-inner .sidebar .widget-content {
  margin: 0px;
  padding: 2px 2px;
  text-align: justify;
  text-decoration: none;
  border: 1px solid #674ea7;
  border-radius: 4px;
  box-shadow: 1px 1px 6px 1px #3d85c6;
  background: #ffffff;
}
 
.main-inner .widget #ArchiveList {
  margin: 0px;
}
 
.main-inner .widget ul, 
.main-inner .widget li,
.main-inner .widget ul li,
.main-inner .widget #ArchiveList ul.flat li {
  margin: 0px;
  padding: 2px;
  list-style: none;
}

Ketiga, simpan template Anda.


Perlu diketahui bahwa background yang digunakan dalam rangkaian tersebut merupakan warna solid (dalam hal ini adalah #bbbbbb dan #ffffff), sehingga agar tampilannya menjadi seperti gambar di atas maka Anda dapat mengganti kode warna pada background: dengan gambar atau warna gradasi. Sebagai contoh misalnya dengan memakai kode di bawah ini.
Background dengan menggunakan gambar (misalnya untuk judul widget).
background: url("https://lh6.googleusercontent.com/-H-0CmGKOwSg/T_GubudWV2I/AAAAAAAAAPI/SYKtH9zZlXA/s800/Menu.png") repeat-x scroll left bottom rgb(243, 244, 246);

Background dengan menggunakan warna gradasi (misalnya untuk area widget).
background: -moz-linear-gradient(center top , white 20%, rgb(243, 243, 243) 100%) repeat scroll 0% 0% transparent;

Demikian halnya untuk warna garis dan warna bayang-bayang, Anda dapat menyesuaikannya dengan desain tampilan halaman blog yang Anda kelola, yaitu dengan cara mengganti kode warna yang terdapat pada border: dan box-shadow:. Dan perlu diketahui pula bahwa kode tersebut dapat diimplementasikan pada semua kategori template standar Blogger (Mudah, Jendela Gambar, PT Keren Sekali, Tanda Air, Kelembutan, dan Perjalanan). Terkecuali untuk kategori template PT Keren Sekali, kode tersebut hanya dapat diterapkan pada desain template yang belum memiliki bingkai pada bagian widget. Karena apabila diimplementasikan pada template dalam kategori PT Keren Sekali yang telah memiliki bingkai pada widget, maka tampilannya malah akan menjadi tidak proporsional.

Semoga berguna dan bermanfaat.
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 65 komentar pada artikel ini ▶
25/07/12 00.45 O

suwun mas

25/07/12 02.22 O

saya bookmark dulu tutorialnya gan, mo di coba klo ada waktu. salam kenal

25/07/12 11.51 O

@Mencintai Dengan SederhanaSama-sama Sobat. :)

25/07/12 11.52 O

@pranamoelyaSilakan... :)

30/07/12 16.37 O

Saya Masih Bingung Caranya g mna

01/08/12 10.13 O

@Sayidadam KahariantoDipelajari dan kemudian dicoba dulu aja Sob. Asal ada niat dan kemauan, saya yakin Sobat pasti bisa. :)

02/08/12 08.20 O

Ucapan saya pagi hari Ini Trima kasih yang sebanyak2nya karna dengan adanya Artikel yang ada di blog anda bisa membantu saya untuk merapikan blog saya waulaupun belum begitu sempurna. pertanyaan saya bagaimana membagi kolom header menjadi 2? tolong mas, maklum blog pemula jadi musti perlu banyak belajar.
blog saya http://kraeng-francisco-tutorial.blogspot.com/. sudah sy ikuti blog anda semoga tambah rame dan sukses untuk blog anda. skli lagi thx.

03/08/12 21.04 O

klo bikin bingkai buat isi blog sama tepian blog gmn?? kirim ke emailku aja ya.. nih emailku hertzbanoe@yahoo.co.id
thanks :D

Anonim
04/08/12 00.40 O

@Francisco XavierTerimakasih balik Sobat...

Oh ya, mengenai cara membuat header menjadi 2 (dua) kolom, sebenarnya banyak sekali tutorial yang telah menguraikan tentang hal tersebut.

Sebagai contoh misalnya Sobat dapat membuka tautan berikut ini, karena menurut saya uraiannya cukup mudah dipahami.

http://koderator.blogspot.com/2012/04/cara-membuat-header-2-kolom.html

Sekian dan salam. :)

Anonim
04/08/12 00.53 O

@HertzerSobat, untuk membuat atau mengubah bingkai pada area posting, maka silakan buka editor template kemudian cari kode .post-outer { kemudian tambahkan atau ubah border di bawahnya sehingga kurang lebih menjadi seperti contoh berikut ini:

.post-outer {
border: 1px solid #000000;
}


Sedangkan untuk membuat atau mengubah bingkai pada tepian blog, maka cari kode .content-outer { dan kemudian tambahkan atau ubah border yang digunakan dengan cara seperti yang digunakan pada cara yang pertama.

Semoga dapat membantu. :)

05/08/12 22.45 O

Trima Kasih Sobat, Sebelumnya saya sudah Berkunjung Ke alamat ini http://koderator.blogspot.com/2012/04/cara-membuat-header-2-kolom.html, setelah saya terapkan tetap juga tidak bisa dan selalu ada peringatan eror saat pritinjau....mkasih sudah membantu.

31/08/12 18.01 O

Makasih Yaa Mas sAYA Dah Bawa Ke Blog Saya ( Yang Pasti Dengan Sumber ) Ayo Kita Chat Lewat Ym Saya Anugrahharimurti@yahoo.com OK

01/09/12 01.28 O

@gusti anugrah nugrahaTerimakasih balik Sobat. Harapan saya semoga artikel yang saya terbitkan di sini dapat berguna dan bermanfaat bagi Sobat Blogger yang lain.

Oh ya, secepatnya Sobat akan saya Add pada YM agar dapat saling bertukar ilmu, pengetahuan, dan juga wawasan melalui chat secara langsung.

Sekian dan salam.

04/09/12 18.36 O

terima kasih banyak sobat,salam semoga menjadi kabikan bagi sobat.

salam hangat

07/09/12 01.24 O

@Aang WierodjampangTerimakasih balik Sobat. :)

01/10/12 08.11 O

salam kenal mas bro...mau saya coba trik nya

bravo buat mas bro...

01/10/12 09.31 O

@Yudhi Kusmayadi KMTerimakasih dan salam kenal balik Sobat.

01/10/12 21.50 O

Terima kasih Sob atas berbaginya, sangat bermanfaat...Salam sukses selalu:]

02/10/12 13.40 O

@ZNatharSama-sama Sobat. Saya turut gembira bila artikel yang saya terbitkan dapat diambil guna dan manfaatnya.

Tidak lupa saya sampaikan terimakasih balik atas berkenannya mengeposkan komentar dalam artikel ini dan juga salam sukses balik untuk Sobat.

Anonim
07/10/12 20.51 O

Halo Sobat,, Info yang bagus, tapi saya mw tanya bagaimana cara mengatur lebar tingginya???

09/10/12 00.02 O

@Arief MaulanaSobat, mengenai ukuran lebar dan tinggi sebenarnya akan menyesuaikan secara otomatis dengan lebar dan tinggi widget.

Namun apabila Sobat ingin menentukan lebar dan tinggi secara langsung, maka silakan tambahkan kode seperti contoh berikut ini pada bagian .main-inner .sidebar .widget-content

height: 250px;
width: 180px;


Keterangan: Ukuran dapat disesuaikan dengan kebutuhan.

Sekian dan semoga dapat membantu. :)

11/10/12 14.44 O

gan tolong pasangin itu di blog saya donk, soalnya waktu saya coba kagak bisa
http://www.ziddu.com/download/20575393/template-70183797901058426691.rar.html
kalo udah tolong comment di blog saya ya
please :):)
http://blogmashanif.blogspot.com/

12/10/12 05.38 O

@Hanif MalikiSobat, karena kebetulan templatenya adalah kustom template, maka coba langsung saja kerjakan langkah-langkah berikut ini:
------------------------------------

Pertama, sisipkan kode CSS berikut ini tepat di atas ]]>[/b:skin]
.widget-content {
border: 1px solid #ffffff;
background: #000000;
}

Kedua, tambahkan border: 1px solid #ffffff; background: #000000; pada bagian .SRR h2 sehingga menjadi seperti berikut ini:
.SRR h2 { border: 1px solid #ffffff; background: #000000; letter-spacing:1px; padding:15px 15px 15px 20px; margin:10px 0 0 0; font:bold 24px "Chicle", Times, serif; color:#FFFFFF; }

Dan apabila warna garis serta background belum sesuai, maka silakan diganti sesuai dengan yang Sobat inginkan.

Keterangan:
------------
[/b:skin]
[ = <
] = >


Sekian dan semoga dapat membantu. :)

12/10/12 19.56 O

@AYAHE MELAOke makasih sob, bordernya agak beda dan jika dipasang akan gak rapi, oleh karena itu saya padang manual di setiap widget satu2

14/10/12 22.25 O

makasih ilmunya yah mbahhhh, ijin copy duluhhhhhhhh

14/10/12 23.30 O

@smapl mybioSama-sama Sobat. Semoga dapat diambil guna dan manfaatnya. :)

23/10/12 09.13 O

Terima kasih mas tipsnya. sangat bermanfaat :)

23/10/12 09.34 O

@odam hamzanSama-sama Sobat. Semoga dapat diambil guna dan manfaatnya.

Btw, tadi saya langsung berkunjung ke blog yang Sobat kelola. Tapi karena sepertinya form komentar tidak diaktifkan, akhirnya saya pun tidak dapat mengeposkan komentar dalam artikel yang Sobat terbitkan. :)

Anonim
24/10/12 08.11 O

makasih bgt infonya mas, boleh sy bookmark yach buat belajar maklum masih linglung, mudah2n tambah rame blognya..

25/10/12 00.01 O

@Rangga wiryawanSama-sama Sobat.

Terimakasih dan dengan senang hati saya memperbolehkan bila Sobat berkenan melakukan bookmark untuk blog ini.

29/10/12 08.12 O

coba dicoba triknya ya!

Anonim
07/11/12 07.13 O

ok..terima kasi infonya mas ..

07/11/12 13.16 O

@pepisusantiSama-sama Sobat. Terimakasih balik atas berkenannya mengeposkan komentar dalam artikel ini. :)

09/11/12 19.54 O

makasih gan, berhasil,
kunjung balik ya

http://barberita.blogspot.com

http://mauanda.blogspot.com

14/11/12 15.59 O

koq g berubah ya? ap ane yg slah hehe,,,

14/11/12 18.35 O

@Adhon CassavaSepertinya Sobat belum membaca artikel tersebut secara menyeluruh.

Karena dalam artikel ini telah saya uraikan bahwa teknik tersebut dapat diimplementasikan pada semua kategori template standar Blogger. Sehingga dengan demikian dapat diartikan bahwa teknik ini memang tidak dapat diterapkan pada kustom template seperti yang Sobat pakai sekarang ini. :)

Anonim
07/12/12 11.21 O

Suwun mas..selain ikut experiment, ma'ap sy copy pasti artikel sampean. tp ttp saya cancumkan sumbernya dr blog sampean. tx banyak tutorialnya. sangat bermanfa'at.

07/12/12 11.24 O

Suwun Mas..bermanfaat sekali. ud sy exsperiment..sukuses

07/12/12 22.12 O

@gusdartoSama-sama Sobat.

Terimakasih balik atas kunjungan dan berkenannya mengeposkan komentar dalam artikel ini. Dan semoga uraian yang saya sampaikan dalam artikel ini benar-benar dapat diambil guna sertamanfaatnya. :)

07/12/12 22.20 O

@sudartoSyukurlah bila Sobat telah berhasil menerapkan teknik yang diuraikan dalam artikel ini. :)

Anonim
08/12/12 07.37 O

Nice tutorial,nice post
terima kasih udah sharing gan
btw, saya juga follow blog agan klo ga keberatan follow back ya gan:)
http://problogiz.blogspot.com

terimakasih sob,,,bermanfaat skali bagi saa yg new bie...
mampir yah dan berikan saran ke blog ku maksih

http://catatanakhirsenja.blogspot.com

11/12/12 16.14 O

@ardiansyah abdiSama-sama dan terimakasih balik, Sob.

11/12/12 17.37 O

Wah..nambah ilmu nih dsini :D

Lngkp bgt tutorialnya

13/12/12 11.44 O

wah, ini baru pas dengan blog saya
makasih ya

14/12/12 16.47 O

@Jushniar DeasySemoga dapat diambil guna dan manfaatnya Sobat. :)

15/12/12 14.22 O

@jona rendraTerimakasih balik Sobat.

29/12/12 10.06 O

manjur nih, makasih banyak, mampir juga ke blog saya: koreanstu.blogspot.com

buat yg tertarik belajar Korea

29/12/12 15.55 O

@damar wibowoOke, terimakasih Sobat. :)

30/12/12 01.18 O

izin coba dulu mas tutornya..

makasih ya..

30/12/12 06.41 O

@Rama Sahrul RobiSilakan Sob. :)

31/12/12 16.43 O

bagaimana cara mengubah ukurannya sobat????

01/01/13 15.48 O

@muhammad albertUntuk mengubah ukuran, Sobat dapat menambahkan height dan width pada bagian .main-inner .sidebar .widget-content {

sebagai contoh misalnya height: 300px; width: 298px;

Namun karena antara widget yang satu dengan widget yang lain biasanya memiliki konten yang tidak sama, maka saya lebih menyarankan agar Sobat menentukan ukuran widget secara inline style (langsung pada widget yang diinginkan).

Semoga dapat membantu.

mas.. punya ku yang tutorial ini baru saya coba.. maunya ada. jarak yang tidak terlalu jauh dengan background asli dr blogger.. gimana ya mas untuk mengatur nya.. untuk blog archive tulisannya mau dibuat agak ketengah.. agar lebih rapi.. mohon sarannya ya mas.

17/01/13 13.31 O

@Asih Budi AriyantiUntuk keperluan tersebut, maka Sobat dapat menentukan margin dan atau padding yang sesuai dengan keinginan.

mas.. uda dicoba... tapi tulisan di blog archive keluar2 ya.. gimana ya mas..

18/01/13 22.41 O

@Asih Budi AriyantiUntuk mengatasinya, coba Sobat tambahkan CSS berikut ini:

#ArchiveList{padding:0px 14px}

maaf gan kalau biar warna latar isi gadget agak tranfaran sehingga baground sedikit kelihatan, gmn ya caranya ? model shadow gtu. .
sebelumnya terima kasih . . .

29/04/13 01.13 O

@Gunk Ryoku Just KiddinkUntuk keperluan tersebut, sebenarnya sobat tinggal mengatur opacity-nya (tingkat transparansi-nya). Dan saya rasa ini malah tidak ada kaitannya sama sekali dengan shadow, karena menurut sepengetahuan saya shadow digunakan untuk memberikan efek bayangan pada bagian tertentu.

Anonim
31/07/13 04.22 O

terimaksih tutornya mas,,
sangat membantu sekali buat saya yang nubi ini...

01/08/13 04.22 O

@cara-aanSama-sama dan terimakasih balik atas berkenannya mengeposkan komentar untuk artikel ini, Sob. :)

09/10/13 08.05 O

Layak untuk dicoba, sangat membantu mas, terimakasih

09/10/13 21.12 O

@Aulia Eka PutraSilakan bila Sobat bermaksud untuk mencobanya. :)

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