Mengatur dan Merubah Ukuran Template Blog

Dari blogger,memang sudah di tentukan template khusus blogger,namun tak dipermasalahkan jika anda mendownload template baru untuk blogspot.

Di template blogger sendiri,juga tak di permasalahkan alias tak mengurangi etika hak cipta blogger jika kita merubah ukuran baik itu lebar tinggi bahkan memodifikasi secara keseluruhan dari template yang blogger berikan.

Untuk merubah lebar,baik itu main wrapper atau tempat posting,maupun sidebar bahkan header.

Coba pilih Dashboard pada blogspot anda,pilih Tata Letak dan pilih Edit Html.
Selanjutnya,anda akan menemukan baris kode yang serupa dengan kode di bawah ini:

---

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}

#sidebar-wrapper {
width: 220px;
float: right;
}

#newsidebar-wrapper {
width: 200px;
float: left;
}

---

Kode yang bercetak berwarna hijau,merupakan ukuran lebar dari masing-masing komponen blog,yang anda bisa merubahnya sesuai keinginan.

Hanya sebagai contoh saja,untuk yang lain misal float,padding,dll anda juga bisa merubahnya sesuai keinginan.

Untungnya,sekarang di blogger,sebelum kita menyimpan template yang ingin kita rubah,kita bisa melihat previewnya alias hasil contoh perubahannya,yang jika kita kurang cocok masih bisa kita batalkan dengan memilih "Bersihkan Edit"(untuk blog berbahasa indonesia).

Jadi ukuran lebar dari kolom template anda bisa anda utak-atik sampai anda menginginkan template seperti apa yang anda inginkan.

Read more »

Cara membuat template sendiri dengan 9 Generator Template Blog

Membuat diri lebih kreatif memang menyenangkan, terutama mengenai design template dengan menciptakan sendiri. Berikut adalah rekomendasi yang bisa langsung di coba dan di prektekkan secara langsung untuk menjawab pertanyaan? seperti : bagaimana yah membuat template blogger sendiri? cara membuat template sendiri? bisa tidak, merancang design template sendiri tanpa menguasai bahasa pemrograman dan html?

Jika ada salah satu pertanyaan mengenai hal di atas maka ini merupakan postingan yang tepat untuk Anda. Oke berikut adalah rekomendasi tentang 9 Generator Template Blog baik berupa software maupun website generator template secara online.

1. Blogger Template designer

Yang satu ini sudah tidak asing, terintregrasi secara permanen di dasbor blogger (blogspot) anda. Untuk mengetahui panduannya silahkan lihat juga tutorial, tips dan trik seputar perancang template blogger :

• Blogger Template designer bag 1
• Blogger Template designer bag 2
• Blogger Template designer bag 3
• Blogger Template designer bag 4

2. Artisteer

Merupakan software untuk membuat template sendiri, seperti template blogger, wordpress, drupal, joomla dan lain-lain. Pengunaan dan tool-tool yang sangat mudah di operasikan bisa manjadi pilihan. Baca juga sedikit tentang tutorial Artisteer :

• Membuat Tab Menu Artisteer
• Export Template Artisteer ke blogger
• Tutorial membuat template blogger

3. Pimp My Profile

Pimp My Profile adalah website layanan generator untuk merubah tampilan design ataupun layout seperti Myspace, Facebook, Twitter, Youtube, Blogger dan lain-lain. Bisa langsung di manfaatkan, monggo si tester.

4. Profile Brand

website yang ini sama seperti di atas, cuma yang ini di pergunakan hanya untuk merubah tampilan layout atau background dari Facebook, Myspace, Twitter, Yuotube, Blogger dan lain-lain.

5. Yvoschaap

Yang berikut adalah website layanan Theme Generator, namun hanya di khususkan untuk membuat template wordpress. Tool-toolnya sangat mudah di gunakan dan dengan tampilan yang sederhana template dari blog atau website wordpress Anda bisa kelihatan lebih menawan, Silahkan di coba bos.

6. Do Template

Hmmm, makin seru aja nih, next adalah website layanan generator untuk membuat template XMTL template, Blogger template dan Wordpress Theme. Penggunaannya cukup mudah.

• Masuk ke websitenya.
• KLIK Browse all templates...
• Kemudian pilih pada salah satu template yang paling Anda sukai.
• KLIK Costomize and download
• Kemudaian ketika masuk ke panel pengeditan.
• Tinggal di KLIK saja pada bagian yang ingin Anda Edit seperti header, posting layout atau footer.
• Setelah selesai KLIK Download.
• Dan pilih template apa yang ingin Anda gunakan.

7. FirdaMatic

Ini merupakan table layout generator online hanya tinggan menyesuaikan form-form yang telah tersedia. Mempunyai edit form GENERATE A 2-COLUMN LAYOUT dan GENERATE A 3-COLUMN. Tinggal di pilih.. dipilih.. di pilih sesuai kebutuhan.

8. Make Template

Dari namanya saja kita sudah dapat menebak dengan sangat tepat apa fungsinya. Yap Make Tempplate di gunakan untuk membuat layput template untuk website, dengan pengunaan form-form dan table yang telah di sediakan untuk mempermudah dalam membuat template.. asyiiikkk!

9. TemplaTr

Website Pembuat template blogger online ini hanya memerlukan 4 langkah pengeditan layout blogsot, pertama pilih layout, Upload gambar untuk background, Use the Designer berguna untuk merupah header, warna layout terkhir tinggal download dan install dalam format file zip, makyuss!.

Oke khan! dengan software dan editor template generator online di atas, kreatifitas bisa semakin mengalir sampai jauh, ha ha ha mantap.. selamat membuat template sendiri, seorang designer hebat telah hadir.. yah Anda.. betul Anda..


From : piss-blogger.blogspot.com

Read more »

Tutorial Menambah Kolom di Blogspot

Ingin menambah kolom blog anda menjadi 3 kolom? bingung bagaimana caranya. Sebenarnya menambah kolom di Blogger/blogspot caranya sangatlah mudah, anda bapat mengikuti tutorial menambah kolom di blogger/blogspot di bawah ini. untuk percobaan sebaiknya anda membuat blog baru yang khusus buat bahan percobaan(belajar dulu... ) digunakan untuk menambah kolom di blogspot/blogger lebih mudahnya pilih template yang minima saja. atau bisa juga anda backup template blog utama anda dulu( jaga2 kalo gagal gampang benerinnya)
sebagai bahan percobaan :
* Sign in di blogger
* Klik menu Layout * Klik menu Edit HTML

Ingat ! jangan memberi tanda centang pada kotak
kecil di samping tulisan Expand Widget Template, sekali lagi jangan
mencentangnya, karena jika sobat mencentangnya nanti akan keluar kode-kode
widget yang memusingkan kepala.

Cari kode seperti di bawah ini (lebih gampangnya tekan Crtl+F ketik "header-wraper") secara otomatis pencari menunjukkan tempat keberadaan code yang anda cari:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
ganti nilai 660px dengan 840px ,900px juga boleh, sehingga kodenya jadi seperti ini :


#header-wrapper {
width:840px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
§ Cari kode seperti di bawah ini :
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}br>
ganti nilai 660px menjadi 840px, sehingga kodenya menjadi seperti ini :
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;text-align:left;
font: $bodyfont;
}

Cari kode seperti 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 */
}
Copy paste kode berikut persis di bawah kode yang seperti di atas :
#sidebarbaru-wrapper {

width: 180px;
float: right;
psdding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Cari kode seperti di bawah 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 nilai 660px menjadi 840 px, sehingga kodenya akan seperti ini :

#footer {
width:840px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Cari kode seperti di bawah ini :

<div id='sidebar-wrapper'><br /> <b:section class='sidebar' id='sidebar' preferred='yes'><br /><b:widget id='Profile1' locked='false' title='Mengenai 'type='Profile'/><br /><b:widget id='BlogArchive1' locked='false' title='Arsip' type='BlogArchive'/><br /></b:section><br /> </div>

Copy kode berikut, lalu paste persis di bawah kode yang seperti di atas :

<div id='sidebarbaru-wrapper'><br /><b:section class='sidebar' id='sidebarbaru' preferred='yes'/></b:section><br /></div>
* Klik tombol Simpan Template

* Selesai.
Untuk melihat efek hasilnya, silahkan klik Elemen Halaman apakah sudah
berformasi tiga kolom atau belum? jika sudah, silahkan isi sidebar tersebut
dengan apa saja lalu lihatlah hasil nyatanya.

Langkah-langkah di atas merupakan metoda dasar saja, untuk menambahkan variasi
lain, sobat memerlukan pengetahuan serta kretifitas.

Read more »

Merubah Warna/ Gambar Background Blog

Jika anda pingin merubah background body blog anda, silahkan anda panteng di editor html blog anda masing masing dan carilah code CSS yang seperti ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

sekarang saya akan jelaskan dikit: ..

pada bagian background berisikan ( $bgcolor ) yang artinya anda bisa mengedit warna dari editor " font and colors " pada blog anda.. caranya anda cukup login ke blogger kemudian pilih pilihan menu " layout " dan pilih lagi menu " font and colors " ... nah di editor " font and colors " tersebut anda bisa mengubah warna background blog anda sesuai dengan kemauan anda. jika di blog anda tidak ada code ($bgcolor), seperti dalam kurung tersebut, maka anda harus mengubah warna dari background blog anda secara manual yaitu tinggal menambahkan kode warna yang anda ketahui,... misalkan

background: #000000; ( code warna #000000 berati berwarna hitam ),

jika anda ingin mengganti background anda dengan warna putih anda tinggal mengganti dengan

background: #ffffff ( code warna #ffffff berarti warna putih ),

begitupu juga untuk warna warna yang lainnya.. cara nya sama saja... tinggal tambahkan tanda (#)di sebelum angka atau huruf (contoh = #ffffff), tanpa tanda kurung!

selain mengganti background dengan warna warni, juga bisa di ganti dengan gambar... semisal anda ingin blog anda backgroundnya foto anda sendiri.... itu bisa bisa saja...
caranya pada code CSS yang bertuliskan ( background:#......; ) cukup anda ganti dengan

background: url('alamat url foto anda taruh sini');

contoh = background: url('http://photobucket.com/poto-anda.jpg');

sudah... gtu aja....... mudah kan...?

sekarang jika anda ingin mengganti background bagian sidebar blog anda..
yang harus anda cari adalah code CSS sbg berikut

#sidebar-wrapper {
width: 345px;
float: $endSide;
border:2px solid red;
background:#fff;
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 */
}

nah... seumpama backgroundnya seperti di atas, (background:#fff;) artinya background berwarna putih, jika anda ingin mengubah dengan warna lain silahkan ganti code css (#fff) dengan code warna lain... ( maaf saya tdk hafal code2 warna, jadi silahkan cari contoh code warna sendiri yah... hehehe ) ataupun bisa anda ubah dengan background gambar foto anda, caranya sama dengan yang di atas tadi...

Begitupun untuk mengubah background bagian main, caranya sama dengan yang sudah saya jelaskan di atas.. anda tinggal mencari code css seperti di bawah ini

#main-wrapper {
width: 600px;
float: $startSide;
border:2px solid red;
background:#fff;
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 */
}

(caranya sama dengan yg sudah di jelaskan di atas)

Mungkin selanjutnya anda akan tahu sendiri mengikuti keadaan edit html anda... Selamat dan silahkan mencoba yah...

Read more »

Mengatur dan Merubah Ukuran Template Blog

Dari blogger,memang sudah di tentukan template khusus blogger,namun tak dipermasalahkan jika anda mendownload template baru untuk blogspot.

Di template blogger sendiri,juga tak di permasalahkan alias tak mengurangi etika hak cipta blogger jika kita merubah ukuran baik itu lebar tinggi bahkan memodifikasi secara keseluruhan dari template yang blogger berikan.

Untuk merubah lebar,baik itu main wrapper atau tempat posting,maupun sidebar bahkan header.

Coba pilih Dashboard pada blogspot anda,pilih Tata Letak dan pilih Edit Html.

Selanjutnya,anda akan menemukan baris kode yang serupa dengan kode di bawah ini:

---

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}

#sidebar-wrapper {
width: 220px;
float: right;
}

#newsidebar-wrapper {
width: 200px;
float: left;
}

---

Kode yang bercetak berwarna hijau,merupakan ukuran lebar dari masing-masing komponen blog,yang anda bisa merubahnya sesuai keinginan.

Hanya sebagai contoh saja,untuk yang lain misal float,padding,dll anda juga bisa merubahnya sesuai keinginan.

Untungnya,sekarang di blogger,sebelum kita menyimpan template yang ingin kita rubah,kita bisa melihat previewnya alias hasil contoh perubahannya,yang jika kita kurang cocok masih bisa kita batalkan dengan memilih "Bersihkan Edit"(untuk blog berbahasa indonesia).

Jadi ukuran lebar dari kolom template anda bisa anda utak-atik sampai anda menginginkan template seperti apa yang anda inginkan.

Read more »

Tumblr, Blog Sederhana dan Mudah

Sudah pernah mendengar kata Tumblr? Tumblr adalah salah satu layanan blog di dunia internet yang menawarkan kemudahan. Dibandingkan dengan layanan blog lainnya, Tumblr memiliki tampilan dan fungsi yang simpel, sederhana dan mudah digunakan. Disini, Anda akan sangat mudah mem-posting sesuatu berdasarkan jenisnya seperti teks, gambar,video dan sebagainya.

Tertarik untuk membuat blog di Tumblr?

Langkah 1

Bukalah http://www.tumblr.com dari halaman browser Anda.

Di halaman muka, Anda akan langsung menemukan formulir pendaftaran. Isilah alamat email Anda, password serta alamat Tumblr yang Anda inginkan. Selanjutnya klik Sign up and start posting!

Langkah 2

Tumblr akan membawa Anda tur singkat untuk mengenal fitur-fitur Tumblr.

a. Create Post

Anda akan diberitahu tentang bagaimana cara membuat posting berdasarkan jenisnya. Klik salah satu ikon, jika Anda ingin memulai posting. Tutup kotak Create your first post! dengan mengklik tanda silang di pojok kanan untuk melanjutkan tur.

b. Costumize Blog

Selanjutnya, Tumblr akan menunjukkan bagaimana caranya Anda dapat mengkostumisasi blog Anda. Disini Anda bisa langsung menuliskan judul blog dan upload foto profil. Lebih lanjut soal kostumisasi akan dibahas di artikel berikutnya. Sekarang, tutup layar Now costumize your blog! dengan mengklik tanda silang di pojok kanan.

c. Follow People

Seperti fitur di Twitter, Tumblr juga menggunakan sistem follow dalam layanannya. Artinya Anda dapat mengikuti blog Tumblr orang lain dan kemudian setiap update dari blog tersebut akan muncul di halaman Dashboard Anda. Untuk mencari akun Tumblr teman Anda, masukkan email dan password Anda. Untuk melewati langkah ini tutup layar Follow some cool people! dengan mengklik tanda silang di pojok kanan.

Langkah 3

Selanjutnya Tumblr akan membawa Anda ke menu Goodies. Disini Anda dapat memilih aplikasi Tumblr yang bisa mempermudah akses Anda ke Tumblr.

Untuk kembali ke halaman utama, klik Dashboard.

Langkah 4

Dari menu Dashboard, Anda bisa mulai melakukan posting.

Untuk membuat posting berupa tulisan, klik ikon Text dan Anda dapat langsung mengetik isi posting pada kotak berikut:

Sebelum menerbitkan posting, Anda bisa menambahkan opsi penerbitan, tanggal dan tag pada menu Advanced options yang ada di sisi kanan. Selanjutnya klik Create Post.

Langkah 5

Kini Anda kembali ke halaman Dashboard, disini Anda akan menemukan posting terbaru Anda di urutan paling atas. Di halaman ini, Tumblr akan menampilkan posting Anda dan posting orang-orang yang Anda ikuti berdasarkan urutan waktu, dimana yang paling baru akan muncul di urutan paling atas (mirip dengan susunan posting di Twitter).

Dengan Tumblr Anda juga bisa memposting ulang blog teman Anda dengan mengklik tulisan reblog yang ada di pojok kanan setiap posting. Fitur reblog ini membuat identitas penulis blog aslinya tidak hilang seperti yang terjadi jika Anda copy paste blog dengan cara biasa.

Langkah 6

Jika ingin tahu bagaimana tampilan blog Tumblr Anda, klik saja foto profil Anda. Maka Anda akan melihat tampilan yang akan dilihat orang lain saat membuka alamat Tumblr Anda seperti berikut:

Nah, membuat blog dengan menggunakan Tumblr lebih sederhana dan mudah kan? :)

Read more »