Membuat Background dan Border pada Halaman Posting

Membuat Background dan Border pada Halaman Posting
Pada halaman ini Kang Roni akan berbagi cara mempercantik blog dengan memberi border dan background pada bagian posting blog.

Ada banyak cara untuk membuat template blog anda kelihatan cantik dan menarik, salah satunya yaitu menambahkan background atau bahkan border pada halaman posting karena halaman posting merupakan bagian inti dari sebuah blog dan merupakan bagian yang paling banyak mendapatkan perhatian dari pengunjung maka dari itu seorang pemilik blog harus bisa memberikan sentuhan cantik untuk template blognya.

Kembali kepembahasan awal,
Membuat Background dan Border pada Halaman Posting

Membuat Border


Cari kode #main-wrapper { pada template anda dan taruh kode border: 3px solid #000000; tepat dibawahnya.Kodenya nanti akan terlihat seperti ini.

#main-wrapper {
border: 3px solid #000000;

Ket:
3px ( Ukuran lebar border )
Solid ( jenis border )
#000000 ( kode warna )

Untuk ukuran, jenis border, dan warna anda bisa mengganti sesuai keinginan yang pantas untuk blog anda. Sebagai contoh anda lihat border dibawah ini.

border: 3px solid #000;
border: 5px solid #f00;
Dotted
border: 3px dotted #000;
Dashed
border: 5px dashed green;
Double
border-style: double; border-color: blue;
Outset
border-style: outset; border-color: #404040;


Membuat Background


Cari kode #main-wrapper  pada template anda dan taruh kode background: #333333; tepat dibawahnya.Kodenya nanti akan terlihat seperti ini.

#main-wrapper {
background: #4DB64A;
Ket:
#4DB64A; ( kode warna yang bisa anda ganti sesuai keinginan ).Sebagai contoh anda lihat warna background dibawah ini.

background: #4DB64A;

Menggabungkan Border dan Background


Cari kode #main-wrapper selanjutnya taruh kode border: 5px solid #666666;
background: #4DB64A;.Kodenya nanti akan terlihat seperti ini.

#main-wrapper {
border: 3px solid #666666;
background: #4DB64A;

Untuk keterangan kode sama dengan yang di atas.Sebagai contoh anda lihat warna Border dan background dibawah ini.

Menggabungkan Border dan Background
border: 5px solid #666666;
background: #4DB64A;

Mengganti Warna Background dengan Gambar/Photo

Kode ( background: #4DB64A; ) di ganti dengan
Kode ( background: url(http://3.bp.blogspot.com/_UmeAjhdB7uY/TTJW9myO_QI/AAAAAAAAABo/zjBgBxoO5Dc/s1600/abstrak%203.jpg);   )

background: url(http://3.bp.blogspot.com/_UmeAjhdB7uY/TTJW9myO_QI/AAAAAAAAABo/zjBgBxoO5Dc/s1600/abstrak%203.jpg);

Sebelum anda memulai untuk mempercantik blog dengan mengubah warna pada halaman posting baik itu menambahkan border atau background atau bahkan menggabungkan antara borden dengan background alangkah baiknya anda download template lengkap dahulu untuk mengantisipasi apabila terjadi kesalahan edit pada template.


Related Post:

68 comments:

fajar harfianto said...

manep tenan mas , thanks yoo

roni said...

thanks kembali sob

Yaqind said...

jika backgroundnya mau diganti gambar gimana bro..

roni said...

Sangat mudah sob, tapi perlu diketahui bahwa sebuah halaman blog terdapat beberapa background dari mulai background page blog itu sendiri,atau background sidebar, dll.
Bila sobat ingin mengubah background warna menjadi gambar alangkah baiknya sobat mengetahui kode warna spt contoh kode warna hitam adalah 000000 jadi sobat tinggal cari kode
background:#000000 setelah ketemu ganti dengan kode
background: url(http://3.bp.blogspot.com/_UmeAjhdB7uY/TTJW9myO_QI/AAAAAAAAABo/zjBgBxoO5Dc/s1600/abstrak%203.jpg);

DIBAWAH INI ADALAH CONTOH LINK GAMBAR YANG BOLEH ANDA GANTI DENGAN LINK GAMBAR YANG DI INGINKAN
http://3.bp.blogspot.com/_UmeAjhdB7uY/TTJW9myO_QI/AAAAAAAAABo/zjBgBxoO5Dc/s1600/abstrak%203.jpg

roni said...

Bila sobat menemukan kode spt dibawah ini

background:#000000

dengan jumlah yg lebih dari satu , itu berarti sobat harus mengganti satu persatu agar tahu perubahan yg di inginkan.

jangan lupa Download Template Lengkap dahulu untuk keamanan bila terjadi kesalahan edit

roni said...

Atau kunjungi link ini http://roningasinanblog.blogspot.com/2012/04/cara-mengganti-background-tipe.html

Novrizal Azis said...

wahh... sipp kang..
Bordernya sudah tak coba buat postingan yamh ada script nya...
ditunggu kunjungan baliknya ya..

ansari siregar said...

mendownload template lengkap maksudnya gimana mas....
aku gak ngerti...mohon infonya mas.....

roni said...

perlu diketahui sob, setiap blog itu pasti mempunyai kode template/thema blog yang bisa di otak-atik untuk merubah,menambah,mengurangi hiasan untuk tampilan blog. Untuk mengetahui kode template sebuah blog sobat harus login dulu di Blogger.com, setelah masuk anda akan dibawa pada halaman dhasbor,kemudian sobat klik RANCANGAN , lalu klik Edit HTML.
Setelah anda masuk pada halaman edit HTML anda akan melihat kode template dalam kolom. Yang perlu anda perhatikan adalah tulisan Download Template Lengkap warna biru yang ada di atas kolom edit HTML, yang apabila anda klik pada tulisan tadi maka secara otomatis browser akan mendownload kode template blog anda yang nantinya bisa kita upload lagi untuk kembali ketampilan blog sebelum di edit.

Bahasa Inggris Anak Indonesia said...

Makasih ilmunya

komputer said...

Terima kasih ilmunya kang

Yesualda Simalango said...

kalau mau mengganti backgrund laman bagaimana?
saya menggunakan blogspot.
thx

roni said...

Kalau hanya membuat background pada kolom posting laman sobat bisa masukkan kode dibawah ini pada laman anda dan pastikan taruh kode pada mode HTML , INGAT jangan di mode Compose.

<div style="background: #4DB64A;; border: 0px solid rgb(153, 153, 153); height: 940px; overflow: auto; text-align: left; width: 970px;">TEMPAT MENULIS POSTINGAN</div>

------------------------

Sedangkan bila mau mengganti background laman mandiri sobat taruh aja kode dibawah ini dibawah posting laman sobat.Tentunya di mode edit HTML.


<style type='text/css'>
body{
background: url(http://2.bp.blogspot.com/-PjmxgxPaUUM/TeoDWU4vXKI/AAAAAAAAAMA/f_x61XtSUHU/s1600/green+%25284%2529.jpg);
margin:0;
text-align:center;
line-height:1.5em;
font:x-small Trebuchet MS,Verdana,Arial,Sans-serif;
color:$mainTextColor;
font-size:small;
}
</style>

Khulelah Ssy' Lela EL - Khalil said...

gk ngerti...

Nakusan Computer said...

kl ngsih jarak tulisan dr border gmn caranya kawan?

roni said...

Sangat mudah sob tinggal masukkan kode sperti dibawah ini (sebelum isi post dan sesudahnya)perhatikan contoh dibawah untuk peletakan kode.

<blockquote> isi postingan anda </blockquote>

----------------------------------

Kalau sobat ingin jarak antara garis border dan tulisan semakin jauh, sobat tinggal menggandakan kodenya saja seperti contoh dibawah.

<blockquote><blockquote> isi postingan anda </blockquote></blockquote>

Muh. Akram said...

bagus artikelnya sob

kelontong warna said...

mantap mas rony. berkunjung ya ke blog saya.
terimakasih

Gudang Share said...

terima kasih Gan share artikelnya

Artikel Blogger said...

Thx Info nya gan

Rizky Rusfadilah said...

Menarik, perlu dicoba nih.
Terima kasih bro

♥VPie◥♀◤MahaDhifa♥ said...

.. keren nich. ijin nyoba ya?!? ..

Bloger Caruy said...

keren nih makasih yah infonya

Aneka Jaya said...

trims ya bro.. boleh juga untuk d coba. butuh investasi emas ??? mampir ke blog aku yaaa www.anekajayagresik.blogspot.com

Anonymous said...

What's up to every one, as I am truly keen of reading this blog's post to be updated daily.
It consists of nice material.

Feel free to visit my blog post: green coffee bean extract

Anonymous said...

Hey there! I'm at work browsing your blog from my new iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the superb work!

Also visit my page :: http://greencoffeediet.tripod.co.uk

Anonymous said...

Heya i'm for the first time here. I came across this board and I find It truly helpful & it helped me out a lot. I hope to give one thing again and aid others like you helped me.

my website :: raspberry ketone

Anonymous said...

First of all I want to say awesome blog! I had a quick
question that I'd like to ask if you don't mind.
I was curious to know how you center yourself and clear your mind prior to writing.

I have had difficulty clearing my mind in getting my ideas out.
I truly do enjoy writing however it just seems like the first 10 to 15 minutes tend
to be lost just trying to figure out how to begin.
Any suggestions or hints? Thanks!

Also visit my page ... tanda pearl ionic teeth whitening system

Kangroniblog said...

Previously I apologize because my english is very bad, to make one post I will not be forced to once but little by little I wrote and passed the next day and then on upload.
ok thanks

Anonymous said...

Currently it seems like Drupal is the preferred blogging platform available right now.
(from what I've read) Is that what you're using on your blog?


Here is my homepage light teeth whitening

Anonymous said...

Why visitors still use to read news papers when in this technological
world all is existing on net?

Also visit my web site: whitening method

Anonymous said...

I love it whenever people get together and share ideas. Great website, continue the good work!


Here is my homepage - green coffee bean extract

Anonymous said...

Thanks for a marvelous posting! I certainly enjoyed reading it, you are a great author.

I will make sure to bookmark your blog and definitely
will come back from now on. I want to encourage you continue your
great writing, have a nice holiday weekend!



Stop by my homepage :: hca extract

Anonymous said...

Hey I know this is off topic but I was wondering if you knew
of any widgets I could add to my blog that automatically tweet my newest twitter updates.
I've been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

Here is my site: igf1 danger

Anonymous said...

Hey there just wanted to give you a brief heads up and let you know a few of the images aren't loading properly. I'm not sure why but I think
its a linking issue. I've tried it in two different browsers and both show the same outcome.

Feel free to surf to my blog post garcinia gold reviews

Anonymous said...

I simply could not go away your web site before suggesting that I really enjoyed
the standard information an individual provide to your guests?
Is gonna be again continuously in order to check up
on new posts

Feel free to surf to my blog post; http://pureraspberryketone.tripod.co.uk/

Anonymous said...

I all the time emailed this blog post page to all my friends, for the reason that if like to
read it then my contacts will too.

Here is my page ... garcinia plus

Anonymous said...

Hello! Do you use Twitter? I'd like to follow you if that would be ok. I'm definitely enjoying your blog and
look forward to new updates.

my weblog garcinia cambogia extract trader joe's

Anonymous said...

My brother suggested I might like this web site. He was once totally right.
This post actually made my day. You cann't imagine just how so much time I had spent for this information! Thank you!

My site: garcinia cambogia extract

Kangroniblog said...

Thank you very much for your visit I will definitely visit your site at one

Anonymous said...

Wow that was strange. I just wrote an extremely long comment
but after I clicked submit my comment didn't show up. Grrrr... well I'm not
writing all that over again. Regardless, just wanted to say superb blog!


Also visit my site garcinia livingstonei imbe

Kangroniblog said...

sorry, but your comments in the spam column but already I publish. you make me become more motivated might some day forward I will update again ...

Anonymous said...

Howdy! I'm at work browsing your blog from my new apple iphone! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the fantastic work!

my weblog - garcinia quaesita extract

Anonymous said...

Hello There. I found your blog uѕing msn. Τhiѕ
іѕ a really well ωrittеn аrtiсle.
I'll make sure to bookmark it and come back to read more of your useful information. Thanks for the post. I'll certaіnlу
сomebаck.

my page: http://www.newsgrad.com/

Anonymous said...

We absolutelу love yοur blog аnd find manу of youг ρost's to be just what I'm
looking for. Dοes one offеr guest wrіtегs to wrіte content
fοr you personally? I woulԁn't mind producing a post or elaborating on most of the subjects you write concerning here. Again, awesome web log!

My web site :: green coffee

Anonymous said...

ӏ was suggested this website by mу
cousin. I'm not sure whether this post is written by him as no one else know such detailed about my difficulty. You're amazіng!

Thаnks!

Μу webpage :: raspberry ketones results

Kangroniblog said...

Thаnks

Anonymous said...

Тhanκs for every other great poѕt.
Where else may anуbody gеt that type
of infο in suсh an іdeal manner οf
writing? Ӏ have a presentаtion subsequent wееk, and
I'm on the look for such info.

My webpage: adidas light up tron hoodie

Anonymous said...

Afteг looking oveг a few of the агticles on уour websіtе, І reаlly likе
yοuг technique of writing a blog. I saved it to mу bookmark
sіte list anԁ will be сheсking back
іn the nеar futuге. Рlеase сheсk out my
websitе аs well and let me know ωhat you think.



Here is my ωebpage; green coffee bean extract supplement

Anonymous said...

I am аctuallу gгаteful to the holԁeг of thiѕ
web sіte ωhο hаs shaгеd this impressivе раrаgraph at here.



my pаge :: pure raspberry ketone

Anonymous said...

We absolutely lovе уour blog and find almost all
of your post's to be exactly what I'm lоoκing foг.

Does one offeг guest wгiters to write сontent for you persоnally?
ӏ wouldn't mind writing a post or elaborating on some of the subjects you write related to here. Again, awesome web site!

Also visit my web page www.artsforallages.org

Kangroniblog said...

This is the content that I wrote myself According to what I know. Thank you for visiting and I hope you come back again.

Anonymous said...

I ωas suggested this blοg by my cousіn.
I'm not sure whether this post is written by him as no one else know such detailed about my difficulty. You are wonderful! Thanks!

Here is my site: green coffee bean dr oz

Anonymous said...

Υour waу of ԁescribіng all in this paragraph is really
good, every one be able to eaѕily be aware of it, Тhanks a lot.


Ηere іѕ my homepage: raspberry ketone diet

Anonymous said...

I love your blog.. veгу nice colors & theme.
Diԁ you make this ωebsite yourself or did yοu hire
somеone to do іt for you? Plz respond as I'm looking to create my own blog and would like to find out where u got this from. many thanks

Feel free to visit my web site: raspberry ketone diet

Kangroniblog said...

From http://www.deluxetemplates.net/?s=k2 but I modified

Zena Villa Nazila said...

makasih infonya :))
tolong kunjungin blog saya jugaa yaa http://zenavillanazila.blogspot.com/

Ansory Esce said...

Waduh kok gak fungsi gan

Uda Awak said...

Terima kasih tutorialnya, Gan...

Sri Paryati said...

mantap sob infonya...thx y

pulsaekstra said...

ikutan nyimak ni mas Broo...sukses selalu

ace maxs said...

mantap dah artikelnya kawan saya suka

arni Wafida said...

Terima Kasih Banyak Infonya mas bro :)
http://wafidaa.blogspot.com/

Karlin Anisa said...

Terimakasih

Karlin Anisa said...

Terimakasih

Copa Cobanna said...

sip gan...

Copa Cobanna said...

sip gan...

Dewa Poker Online said...

Penyajian Arktikel di blog ini sangat bagus, saya suka..
Semoga Artikel lainnya memberikan informasi yang lebih bermanfaat lagi.

Post a Comment