Ardisuciyono

Cara Mengganti Background Blog (blogspot)

2011-06-24T23:55:00.002+07:00

Untuk bisa mengganti gambar background blog (blogspot) syarat pertama anda harus menyimpan gambar background anda di situs yang menyediakan tempat penyimpanan file seperti Photobucket.com, Picasa, flick dll. Tapi ingat sebelum anda menyimpan, anda harus terlebih dahulu mendaftar di sana, gratis kok. Nah kalo sudah daftar, terus sudah upload gambar yang mau dijadikan background, sekarang perhatiannya kita fokuskan ke blog.

1. Login ke Blogger.
2. Pilih menu LAYOUT lalu edit HTML.
3. Jangan kasih tanda checklist pada kolom EXPAND TEMPLATE WIDGET.
4. Cari kode css body, kurang lebih contohnya seperti di bawah ini :

body {
background:#fff;
margin: 0 5px 0;
}

Kalo sudah ketemu, tambahkan kode seperti di bawah ini di antara tanda { dan } :

background:#fff url(URL FILE GAMBAR ANDA);

Tapi kalo misalnya sudah ada kata background, tinggal ditambahkan kode yang berwarna biru saja, dan jangan lupa selalu ditutup dengan tanda “;”. Contoh kode keseluruhan kira-kira jadi seperti ini :

body {background:#fff url(http://i690.photobucket.com/albums/vv270/alwi/alwi70bg.jpg);
}

Catatan :
Tulisan URL FILE GAMBAR ANDA, ganti dengan Url gambar yang anda simpan. Sebagai contoh, silahkan ganti Url-nya dengan Url di bawah ini :

(http://s690.photobucket.com/albums/vv270/alwi/alwi07bg.png)

(http://i690.photobucket.com/albums/vv270/alwi/bggaris-1.gif)

(http://i690.photobucket.com/albums/vv270/alwi/bggaris.gif)

Kalo sudah, klik PREVIEW dan coba anda lihat hasilnya terus simpan Ok…selamat mencoba

http://m-alwi.com/cara-mengganti-background-blog.html

Tips Mengganti Background Blog

2011-06-24T23:50:00.000+07:00

Tips Mengganti Background Blog
Beberapa hari yang lalu, sobat Uel menanyakan perihal bagaimana caranya untuk mengganti background blog, dan tentunya saya akan coba membahasnya. Menurut saya, ada dua kemungkinan mengganti background yaitu yang pertama adalah mengganti hanya warna background (latar belakang) saja, yang kedua adalah mengganti background blog dengan menggunakan gambar atau image.

Ada satu hal yang saya anggap penting apabila sobat berniat mengganti background (latar belakang) yaitu gantilah background dengan warna atau image yang sekiranya tidak membuat tulisan-tulisan kita menjadi susah untuk di baca. Jika tulisan yang tersedia berwarna gelap, maka pilihlah warna atau image yang terang, akan tetapi sebaliknya apabila tulisan yang ada berwarna terang, maka sebaiknya warna atau image background berwarna gelap. Tulisan yang susah untuk di baca oleh pengunjung, tentunya akan membuat pengunjung tersebut malas untuk membaca artikel-artikel yang kita tulis, dan tentunya percuma saja kita memposting artikel jika tidak ada yang mau untuk membacanya.OK, biar tidak menyita halaman langsung saja pada topik utama. Karena kode template sangat bervariasi, yang akan saya jadikan contoh adalah template asli blogger yaitu template minima.

Mengganti Warna Background

Untuk template minima klasik :

Sign in

Klik menu Template

Klik menu Edit HTML

Copy seluruh kede Template, paste pada notepad lalu save untuk backup data

Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :

body {
background:#E7E3E3;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Klik tombol Pratinjau untuk melihat perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.

Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan program photoshop, kapan-kapan akan saya posting khusus tentang bagaimana cara mengetahui kode warna.

Untuk template minima baru :

sign in

Klik menu Layout

Klik menu Fon dan Warna

Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)

Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah

Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN

Selesai.

Mudah bukan?

Mengganti Background Dengan Image

Hal yang pertama tentu saja sobat harus mempunyai file image. Image ini bisa berbentuk imaage biasa, photo, bahkan animasi pun bisa. hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar, saya anggap sobat sudah bisa melakukannya karena sudah saya bahas pada postingan terdahulu, atau masih bingung? kalau iya, coba baca kembali di sini !

Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat besar, karena walaupun ukuran asli dari image (gambar) adalah kecil, nanti akan di tampilkan dalam jumlah yang sangat banyak hingga memenuhi layar monitor, contoh saya sudah menguload sebuah gambar dengan ukuran yang kecil saja, gambarnya seperti ini (ukuran gambar dalam ukuran aslinya) :

alamat gambarnya adalah

http://amen24.googlepages.com/pattern_096.gif

gambarnya seperti ini :

gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan dalam jumlah yang sangat banyak.

Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

Untuk template minima klasik :

Sign in

Klik menu Template

Klik menu Edit HTML

Copy seluruh kede Template, paste pada notepad lalu save untuk backup data

Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :

body {
background:#fff url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Klik tombol Pratinjau untuk melihat perubahan

Jika sudah OK, klik tombol Simpan Perubahan Template

Selesai.

Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar apabila background image yang kita pakai gagal di loading oleh komputer pengunjung blog, maka yang bekerja duluan warna background.

Untuk template minima baru :

Sign in

Klik menu Layout

Klik menu Edit HTML

Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data

Klik kotak kecil di samping tulisan Expand Template Widget

Tunggu beberapa saat sampai proses selesai

Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :

body {
background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Klik tombol Pratinjau untuk melihat perubahan

Bila sudah OK, klik tombol SIMPAN TEMPLATE

Selesai.

Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di tambahkan, Untuk melihat contoh blog yang sudah saya pasang background dengan gambar yang saya contohkan di atas, silahkan sobat klik di sini !

Eh lupa, bagi sobat yang malas membuat gambar, sobat bisa mendownload berbagai gambar pattren di sini.

Selamat mencoba !

http://kolom-tutorial.blogspot.com/2007/07/tips-mengganti-background-blog.html

Membuat 1, 2, 3, 4 atau lebih Kolom Tambah Gadget (Add Page Element) di Bawah Header pada Template Minima Blogspot (bagian 1)

2011-05-29T03:38:00.000+07:00

How to create 1, 2, 3, 4 or more Add Page Element column under blogspot's minima template header (part 1)
Setelah melihat-lihat Blog Kang Rohman, ternyata untuk menambah / membuat kolom tambah gadget (add page element) di bawah header itu tidak sesulit yang aku bayangkan ya. Malah setelah aku coba untuk utak-atik kodenya, ternyata untuk membuat lebih dari 1 kolom Tambah Gadget di bawah header pun jadi terasa mudah aja ya. Mau tahu caranya? Coba lihat aja di bawah ini ya.
MEMBUAT 1 KOLOM TAMBAH GADGET (ADD PAGE ELEMENT) DI BAWAH HEADER

temp8

Caranya cukup mudah, yaitu sebagai berikut:

1. Login ke Blogspot--> Tata LeTak --> Edit HTML

editHTML

2. Untuk berjaga-jaga bila nanti pada hasil editnya ada hal yang tidak sesuai dengan keinginan, maka download terlebih dahulu template awal, sehingga kita bisa mengembalikan kondisi template seperti semula dengan cara meng-upload (unggah) template awal yang telah didownload sebelumnya.

temp0

3. Setelah itu cari kode ]]> dan tambahkan kode berikut diatasnya:

#under_header{ }

sehingga susunan baris kodenya akan terlihat seperti pada gambar dibawah ini:

temp1

4. Setelah itu cari baris kode berikut (atau yang mirip, tergantung model template yang dipakai ya):

dan tambahkan kode dibawah ini dibawah kode tersebut diatas:

sehingga susunan kodenya akan menjadi seperti terlihat pada gambar dibawah ini:

temp0

5. Setelah itu klik tombol SIMPAN TEMPLATE, dan periksa pada Elemen Halaman apakah kolom Tambah Gadget yang baru dibuat sudah muncul dibawah header seperti terlihat pada gambar pertama diatas.

6. Jika ingin merubah ukuran panjang kolom Tambah Gadget yang telah dibuat, misalnya ingin dibuat sepanjang header seperti terlihat pada gambar:

temp6

maka baris kode pada poin 3 menjadi :

#under_header{
width:660px; }

temp3

Catatan: panjang header template bisa dicari pada baris kode seperti terlihat pada gambar:temp5

7. Jika ingin kolom yang dibuat tadi berada sejajar dan selebar dengan kolom posting seperti terlihat pada gambar dibawah ini:

temp3

maka baris kode seperti tersebut pada poin 3 ditambahkan lagi kodenya menjadi seperti berikut:

#under_header{
width:410px; }

sehingga susunan baris kodenya akan seperti terlihat pada gambar berikut:

temp4

Catatan: lebar kolom posting template bisa dicari pada baris kode seperti terlihat pada gambar:temp1b

8. Jika ingin kolom yang dibuat tadi berada sejajar dan selebar dengan kolom page elemen (sidebar) di sebelah kanan seperti terlihat pada gambar dibawah ini:

temp8

maka baris kode seperti tersebut pada poin 3 ditambahkan lagi kodenya menjadi seperti:

#under_header{
margin:0 10px;
float:right;
width:200px; }

sehingga susunan baris kodenya akan seperti terlihat pada gambar berikut:

temp9
_________________________
Catatan:
Margin adalah jarak antar elemen pada template. Rubah nilainya sesuai keinginan.
float menunjukan letak kolom Page Element (Tambah Gadget) yang dibuat nantinya akan berada di sebelah kiri atau kanan.
width adalah lebar kolom Page Element (Tambah Gadget) yang dibuat. Rubah nilainya sesuai keinginan.
* Untuk memudahkan pencarian baris kode, tekan Ctrl + F untuk menampilkan kolom pencarian yang letaknya ada dibawah kolom Edit HTML seperti terlihat pada gambar dibawah ini, lalu ketikan atau kopi paste baris kode yang ingin dicari pada kotak pencarian. Baris kode yang sesuai akan ditunjukan dengan diberi warna hijau.

temp10

MEMBUAT 2 KOLOM TAMBAH GADGET (ADD PAGE ELEMENT) DI BAWAH HEADER -->

Posting Lebih Baru Posting Lama Beranda
Posting Dengan Kategori Sama
Edit Header

Membuat Kolom Disebelah Kanan Header
Menghilangkan Garis Pinggir pada Header Minima
Membuat Link Tambah Gadget Dibawah Header
Membuat Judul Blog Dalam Huruf Besar Atau Kecil Semua, Atau Normal
Membuat Kolom Tambah Gadget di dalam Header Template Minima Blogspot
Memasang Gambar dan Memberi Warna Header Template Minima Blogspot
Membuat 1, 2, 3, 4 atau lebih Kolom Tambah Gadget (Add Page Element) di Bawah Header Pada Template Minima Blogspot (bagian 4)
Merubah Ukuran Lebar/Panjang Header dan Ukuran Garis Pinggir Header Pada Template Minima Blogspot
Membuat 1, 2, 3, 4 atau Lebih Kolom Tambah Gadget (Add Page Element) di Bawah Header pada Template Minima Blogspot (Bagian 3)
Membuat 1, 2, 3, 4 atau Lebih Kolom Tambah Gadget (Add Page Element) di Bawah Header pada Template Minima Blogspot (Bagian 2)
Bikin 2 Kolom Page Elemen di Bawah Header (di Atas Kolom Posting) Pada Template Blogspot/Blogger

You might also like:
Membuat 1, 2, 3, 4 atau Lebih Kolom Tambah Gadget (Add Page ...
Membuat 1, 2, 3, 4 atau Lebih Kolom Tambah Gadget (Add Page ...
Membuat Kolom Tambah Gadget di dalam Header Template Minima ...
Membuat 1, 2, 3, 4 atau lebih Kolom Tambah Gadget (Add Page ...
LinkWithin
Diposkan oleh dodi di 22:52

Beranda

2011-05-29T03:17:00.003+07:00

Cara Membuat Horisontal Menu Bar Pada Template Blogspot
Ads Powered by:KumpulBlogger.com
[Pasang Iklan Mini Banner disini - Rp. 600 per 1 kali unik klik, 156679 Blogger terdaftar ]
Pasang iklan
Mini Banner di sini
, Komisi 3% untuk Blogger
How to create Horizontal Menu Bar on Blogspot's Template
Hal pertama yang harus dilakukan sebelum memasang horisontal menu bar pada template blogspot adalah melihat apakah template yang dipakai itu sudah memiliki kolom Tambah gadget dibawah kolom Header. Jika belum berarti harus dilakukan sedikit modifikasi pada HTML template untuk bisa menampilkan kolom Tambah gadget dibawah header. Jika sudah ada kolom Tambah gadget tersendiri di bawah header, silahkan langsung ke no.2.

temp0

Cara membuat Horisontal menu bar pada Template Blogspot adalah sebagai berikut:
1. Modifikasi HTML template agar mempunyai kolom Tambah Gadget dibawah header.

Untuk mengetahui cara membuat kolom Tambah Gadget dibawah header template bisa klik disini.

2. Buatlah posting baru untuk halaman yang ingin di link ke horisontal menu bar. Menunya misalnya Home, About, Contact. Link yang nanti akan digunakan di horisontal menu bar adalah URL setiap posting itu. Cara ini (no. 2 dan 3) aku dapat dari Real Life.

Catatan:
Untuk menu Home, link yang gunakan adalah URL alamat blog.
Untuk About, link yang digunakan URL Aboutbox atau halaman lain jika dibuat halaman tersendiri.
Untuk Contact, link yang digunakan misalnya mailto:abcd@gmail.com
Bila link-nya akan menuju ke halaman tersendiri, untuk mendapatkan linknya bisa klik kanan pada judul dan klik "copy link location".
Bila link-nya menuju pada halaman yang mempunyai label yang sama, untuk dapatkan link-nya bisa klik kanan pada label yang ada dibawah posting dan klik "copy link location".

3. Login ke Blogspot--> Tata letak-->Elemen Halaman
Klik link Tambah Gadget dibawah header, lalu pilih HTML/JavaScript gadget.

elemen halaman

tambah gadget

Masukan kode berikut ke dalam kolom HTML/JavaSricpt:

HOME | ABOUT | CONTACT | TIPS

konfigur HTML

Klik tombol simpan. Sekarang blog sudah memiliki horisontal menu bar dibawah header.

Catatan:
* Ganti kata yang berwarna hijau dengan nama menu yang dinginkan.
* Ganti kata yang berwarna merah dengan alamat URL sesungguhnya.

*****
Selamat mencoba.

Posting Lebih Baru Posting Lama Beranda
Posting Dengan Kategori Sama
Edit Template

Membuat Warna Latar Belakang dan Halaman Blog Berbeda
Membuat Garis Pinggir Blog
Merubah Ukuran Lebar Template Blog
Kode HTML Untuk Cara Menampilkan Posting Terkait / Artikel Berhubungan / Related Posts
Cara Sembunyikan Navbar Pada blogspot; Cara Membuat Autohide Navbar Pada Blogspot
Cara Membuat Sistem Read More Pada Blogspot
Atasi error bX-hq2u5m saat upload template baru di blogger/blogspot
Pasang Menu Bar di blogger/blogspot
Kode HTML untuk membuat Read More pada blogger/blogspot

You might also like:
Pasang Menu Bar di blogger/blogspot
Cara Membuat Sistem Read More Pada Blogspot
Membuat Kolom Tambah Gadget di dalam Header Template Minima ...
Membuat 1, 2, 3, 4 atau lebih Kolom Tambah Gadget (Add Page ...
LinkWithin

2011-05-29T02:43:00.001+07:00

Cara memperlebar kolom pada templates blog
Categories: Templates, tips mempercantik blog | (8) Responses
Setelah beberapa hari tidak up date blog, gatal juga pengen kasih sesuatu heee, tapi yan gini Cuma trik sederhana cara meperlebar kolom pada templates blog kita, tetapi untuk templates bawaan dari blogger, bukan dari templates yang sudah dimodifikasi
Sebelum kita masuk ke masalah ada baiknya kita mengenal dulu bagian- bagian dari templates blogger, maka sebuah template akan mempunyai tiga elemen penting, yaitu :
• Elemen Header
• Elemen Outer
• Elemen Footer
Untuk elemen Outer di bagi kembali menjadi :
• Elemen main, elemen main ini adalah elemen tempat kita menyimpan posting, jadi apabila kita memposting sebuah artikel maka akan masuk dan di tampilkan pada elemen ini

• Elemen Sidebar, elemen sidebar ini adalah merupakan elemen untuk menyimpan berbagai blog tools ataupun aksesori yang kita inginkan untuk mempercantik blog.

Outer-Wrapper merupakan wadah untuk menyimpan main-wrapper serta sidebar-wrapper. Jadi jika kita ingin menambah kolom baru atau dengan kata lain sidebar baru, maka hal yang pertama wajib di lakukan adalah menambah nilai lebar dari Outer-wrapper itu sendiri

Nah sekarang bagaimana cara melebarkan kolom yang ada pada templates kita, tetapi sekali lagi ingat ini hanya untuk tempalates yang masih asli bawaan dari blogger atau templates minima,

Ikuti langkah2 berikut ini tapi dengan catatan jangan mencentang Expand Widget Template, karena akan muncul kode-kode yang tidak saya mengerti

Nah Langkah pertama cari kode seperti dibawah ini

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ganti 660px menjadi 760px sehingga menjadi seperti bawah ini

#header-wrapper {
width:760px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
cari kode seperti dibawah ini

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Ganti 660px menjadi 760px dan scriptnya menjadi seperti dibawah ini

#footer {
width:760px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
nah untuk wadah nya istilahnya kita sudah memperlebar dari 660px menjadi 760px maka kolom sidebarnya bisa kita tambahin lebar 100px dan untuk menambahkan lebar sidebarnya kita tinggal mencari kode di bawah ini

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

ganti 220px menjadi 320px ( atau selebar jumalah yang kita tambah tadi )jika kita ingin menambah lebar lagi tergantung berapa px yang kita tambah saat di #header-wrapper { dan footernya tadi,

jika yang ingin diperlebar main atau kolom utamanya yang biasanya berisi tentang postingan kita, maka kita tingagl cari kode di bawah ini

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Tapi ingat jika kita menambahkan lebar keduanya kita juga harus menambah jumlah px yang kita tambahkan di #header-wrapper, dan footer-wrapernya tadi
ok selamat mencoba , tapi ingat jangan mencoba pada blog utama kita terlebih dahulu, coba pada blog percobaan dulu
semoga berhasil.. pren

href="http://cara-ngeblog.blogspot.com/2009/01/cara-memperlebar-kolom-pada-templates.html/">Sumberku

ardisuciyono: ketakutan dan harapan

2011-04-29T23:40:00.000+07:00

ardisuciyono: ketakutan dan harapan

Letak titik beningku

2011-03-19T05:03:00.001+07:00

Ku petik sekuntum embun pada fajar yang mulai pudar
Ku basuh pada wajah layuku
Meresapi beningnya
Menikmati sejuknya
Namun kaku wajah layuku tak berubah rupa
Tetap keruh berpeluh
Serupa luka melepuh pendam nanah perih seribu tahun
Padahal telah kutunggu waktu
Menunggu embun merekah di pagiku,
Namun sayang mengering sudah beningnya
tetap ku dapati layu menggugus ukiri rupaku
Kuc0ba terjang 0mbak mencari titik bening di hamparan samudera
pecah 0mbak pun menerjang
Sayang perihku kian mengerang kejang kejang dibalik rintihku
Laraku kembali
Ternyata garamnya serupa racun di raga remukku
Ringkih sudah raga ini
G0ntai melaju mengarung mencari titik bening di setiap musim
Letihku kini bawa aku pada langit
Menunggu gemuruhnya tumpahkan cinta,
Namun kaku lukaku tetap beku di wajah layuku
Begitu lama ku merenung
Mencari dan kini ku temukan titik beningku,
Ternyata titik beningku ada padaMU sang penguasa
Pencarianku kini usai sudah
berakhir pada sujud bhaktiku pada sang pencipta

###
akhir bias jingga

ketakutan dan harapan

2011-03-19T04:36:00.000+07:00

Ketakutan yangg sering menyergapku
akhir" ini

Adalah ketakutan akan kehilangan dirimu . . .

Telah kucoba tepiskan dengan suaramu yang jelas terekam dalam pita hatiku

Dengan senyum manismu

Pun dalam setiap pejam do'a dan sujudku

Kucoba cari titik bening untuk keruh ini

Tapi rasa ini mencengkramku di hari" saat tak dapat ku rengkuh engkau

Begitu merajam rasa ini

Rasa takut kehilanganmu

Sayang . . . jika ku boleh meminta

Tetaplah seperti malam itu

Menggairahkan aku

Bangkitkan senyumku

Sejukkan aku dan lindungiku . .

Tetaplah seperti hari hari yang kita lalui

rajut bahagia dalam tali kasih

Aku ingin tetap menjadi penulis hatimu

Memahami dirimu

Menemanimu

Menjagamu

Memulihkanmu

Menguatkanmu

Menjadi pendengarmu

Aku ingin menjadi sandaranmu

Hingga nanti rambut berubah warna

Hingga nanti kerut pengecup

Hingga usia merangkak senja

Pun hingga usia renggut raga . .

Ku ingin kaulah yang menemani

Dan melihat jasadku untuk terakhir kali sebelum kembali ke perut bumi ke
pangkuan pertiwi . . .