Cara Membuat Template Blogger

Gimana si Bong cara membuat template blogger / blogspot sendiri? Pertanyaan itu sering mampir. Cara membuat template blog, jujur, binun aku njawabnya kekekekeke soale bikinnya ga sistematis, ya pertama belajar tentunya edit template minima yang udah ada (anggep aja sebagai kerangka, toh itu ga ada designnya, cuman kerangka kode aja) . Tentu aja bikin template dengan sistem coba coba ngabisin waktu dan banyak errornya *ekting mewek* . Lalu lama lama menjadi terseteruktur. Langkah membuat design template blogger sendiri menurut diriku ya kek gini loh

Ngitung Ukuran
Seperti halnya mau merancang baju, kita pan musti tau ukurannya dulu. Tentukan dulu template nya mau dua kolom (main post dan satu sidebar) atau tiga kolom (main post dan dua sidebar). Seperti ini screenshootnya itung itunganku hehehehe

Nggambar Design
Bagian ini menurut diriku yang susah.Yaitu design. Silahkan dipikirkan masing masing pengen design kaya apa. Design meliputi, pemilihan warna (jangan sampe tabrakan tur ga metcing) , layout, gambar, element tambahan (menu, search, feed). Design kemudian di gambar sesuai dengan ukuran yang tadi uda ditentukan. Ini pas diriku nggambar designnya pake inkscape. Kalau buat template yang banyak menggunakan gambar dan tentunya pengen unik ya musti nggambar design dulu, kecuali buat cowok yang lebih banyak main garis ama warna aja. Hehe..

Partisi Design
Maksude apa Bong? Kok kaya harddisk aja dipartisi. Maksudnya memisah misah gambar sesuai ukuran masing masing elemen. Jadi gambar buat background header, dipisah, buat footer dipisah, buat sidebar juga. Kalo pake photoshop ada tools yaitu slice untuk mengiris ngiris gambar sesuai ukuran design. Kalo pake inkscape, ya tinggal di grouping aja di export jadi format png.

Upload Gambar
Setelah jadi gambar untuk backrgoundnya, silahkan diupload ke imagehosting masing masing. Misalnya Photobucker, Imageshack, Tinypic, dan lain lainnya. Yang diperlukan nantinya adalah URL gambar tersebut untuk dipasang di HTML nya.

Edit HTML
Silahkan create new blog dan pilih template minima. Kok ga pake software Bong? kaya dreamweaver gitu? Lah kita kan belajar praktis. Kalok pake Dreamweaver atau software webdesign lain lhak musti belajar tools toolsnya dulu, hehehe kalo ini kan kita udah disuguhi struktur kerangka layout yang siap diolah, tak iye. Hayoook jadi lanjut ga nih? Baiklah Bong. Lanjutkan, Lebih Cepat Lebih Baik Bong. (ngakak dot kom aku je)

Kenali Struktur HTML
Pada dasarnya template cukup dengan 4 elemen yaitu header, sidebar, post, dan footer. Untuk lebih lengkapnya silahkan kunjungi Catalog Kang Jaloee , baca dulu sebelum nanya ya. Curhat colongan, sebel juga kalau ada yang nanya sedangkan dia nya belum baca, padahal semua sudah ditulis lengkap. Pengen tak iris tipis tipis type orang kaya gini.
Sekarang silahkan di edit ukuran lebar masing masing elemen sesuai dengan itungan awal misal header 920px, sidebar 170px, main-wrapper 500px.

Menambah Background
Setelah semua ukuran sudah pas, silahkan di edit color, font, sesuai yang diinginkan. Lalu kita pasang background gambar yang sudah dibuat tadi.

body {
background:url(http://URL-gambar yang sudah diupload) ;
}

header-wrapper {
background:url(http://URL-gambar untuk header yang sudah diupload);
}

begitu seterusnya.

Ini hanya gambaran step step globalnya aja. Hehehe semakin banyak elemen, semakin banyak menu, semakin banyak detail, semakin njlimet lah pekerjaan itu. Selamat berkarya membuat template blog sendiri

Say Thanks to Google Translate

Google translate. Yup, semua tentunya udah pada tau tools nya Google yang satu ini. Dengan 41 pilihan bahasa, dan syukurlah ada pilihan bahasa Indonesia, Google translate jadi senjata ampuh untuk nge blog terutama yang berurusan dengan foreign visitor (heleh bosoku loh nggaya, pengunjung walondo lah intinya). Dan juga manjur pas musti ngerjain paid review.

Di blog template ku, ipietoon , pengunjungnya macem macem, dan kadang meninggalkan komentar tepatnya pertanyaan tapi dengan bahasa mereka. Lah kalau basa enggres ya masih mending diriku gratul gratul sedikit masih mudeng. Lah kalok kaya gini

Lana on May 21, 2009 11:32 PM said…

Приветик =)

Тема очень понравилась и мне подошла по дизайну и настроению, спасибо большое.

Но возникло несколько проблем, может Вы мне подскажите как их исправить.

1.На главной странице в сокращенных сообщениях нет перевода строки.

2.При добавлении картинки, она некорректно отображается в сокращенном сообщении на главной странице.

С наилучшими пожеланиями к Вам =)

Мой новый блог: http://all-shop-ping.blogspot.com/

Weladalah ngomong apa ituh?

Trus diriku dengan sok taunya njawab 

cebong ipiet on May 22, 2009 12:08 AM said…

на самом деле я не могу понять ваш русский алфавит

1. Не знаете, что это значит?

2. Открыть Изменить HTML, не забудьте поставить галочку на расширение виджету шаблона

wekekeke padahal asli ndak begitu mudeng dengan pertanyaannya, tapi setidaknya gratul gratul dengan bantuan Google Translate diriku bisa memahaminya. Wooo kapan kapan tak bwales tak tinggali komen dengan hurup honocoroko dotosowolo…

Sampe detik ini, selain Google Search, tools yang paling sering diriku pakai ya Google translate enih. Makasi yah mbah…

Cara Withdraw Paypal ke Rekening Bank Lokal Indonesia

Setelah sekitar 3 bulan nyobain nyari duit yang tercecer di internet, akhirnya bisa juga withdraw paypal ke rekening lokal bank di Indonesia. Sempat ketar ketir karena yang tercantum di paypal adalah nama depan dan belakang saya saja. Nama tengah nya ga nongol. Tapi ternyata, berhasil berhasil hore. Sekedar mengingatkan saja, untuk daftar paypal sebaiknya menggunakan nama sesuai rekening dan KTP untuk menghindari hal hal yang tidak diinginkan.

Bagaimana cara withdraw paypal ke rekening bank lokal di Indonesia?

• Pastikan account paypal sudah verified.
• Setting terlebih dahulu account bank kita melaui My Account > Profile > Edit/Add Bank Account dan akan muncul form seperti berikut ini

• Isi form Nama Bank dan Kode Bank. Kode bank selengkapnya saya rekomendasikan membaca daftar nya di bog nya maseko. Daftar Kode Bank di Indonesia.
• Setelah selesai mengisi form rekening, pilih menu My Account > Withdraw. Kita bisa mengisi jumlah dana yang akan di-withdraw ke rekening kita, dan memilih rekening tujuan (jika anda beternak account dan mengisi lebih dari satu account)

Oyi, untuk transaksi withdraw di atas Rp 1.500.000 bebas fee, di bawah Rp 1.500.000 dikenai fee Rp 16.000 . Disebutkan bahwa transaksi akan selesai sekitar sampai 4 hari kerja, tapi ternyata dalam 2 hari saja dana sudah masuk ke rekening saya. Walaah kecepeten Pak, tak balikin wes katanya 2-4 hari…

Selamat mencuba dan pastikan account paypal anda ada isinya. *halah*

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… Rank: wait… Traffic: wait… Price: wait… C: wait…

Gimana Cara Memasang Emoticon di Kotak Komentar?

Posting ini atas rikwest dari Nona Itik dari Bali

Bagaimana cara memasang emoticon di kotak komentar? Tentunya sudah betebaran di mana mana tutorialnya. Hanya saja jeng itik pengen tau cara dari awal, soalnya biasanya di tutorial langsung di kasih javascriptnya.

Jadi caranya begini ya jeng (dan kawan kawan semuwah muwah)

Siapkan bahan bahan

• Gambar emoticon , bisa googling atau nyomot dari blog saya wehehehe tetep aja promosi di cuteemoticon dan di emocutez
• Harus punya account imagehosting misal, photobucket.com , imageshack.us , dan lain lain
• Notepad ++ untuk edit javascriptnya, bisa di download di sini

Upload Gambar Emoticon

• Upload semua gambar emoticon tadi ke imagehosting (misal photobucket)
• Catatan : Di setiap emoticon yang diupload akan ada URL nya. URL inilah yang akan kita gunakan selanjutnya

Edit Javascript

• Install terlebih dahulu Notepad ++ yang sudah di-download tadi
• Gunakan javascript untuk emoticon, bisa di download di sini, download script emoticon
• Buka script emoticon menggunakan Notepad ++
• Di dalam script tersebut terdapat URL emoticon. Edit URL emoticon tersebut ganti dengan URL emoticon yang tadi sudah di upload di photobucket. Ganti kode emoticon sesuai keinginan (bisa dilihat di atas kotak komentar saya, ada kode di samping gambar emo nya)
• Lakukan sampai semua emoticon selesai
• Save hasil editan tersebut

Upload Javascript

• Sebenarnya bisa saja menggunakan script tanpa di upload ke hostingan, tapi tentunya ini akan sangat puwanjang di kode HTML nantinya, dijamin mblekenek ruwet nglihatnya. Jadi lebih baik upload lah ke hosting lain
• Upload script emoticon yang sudah di edit tadi ke file hosting misalnya fileave.com (Silahkan Googling sendiri, asal ga hotlink alias nebeng hosting orang lain, kesian kalau sampe bandwidth exceeded)

Edit Kode HTML Template

Langkah selanjutnya adalah meng-edit kode HTML template kita. Caranya? Silahkan di baca, banyak sekali tutorial bersliweran di search engine. Salah satunya bisa baca ini, Cara Memasang Emoticon di Kotak Komentar Yang perlu diperhatikan, ganti script dengan script upload-an tadi. Untuk url, ganti dengan url image kita. Kode emoticon dengan kode emoticon seperti di javascript.

Selamat berjuang.

Cara Posting Baru di Blogger

Sejak semalam ngintip dashboard blogger, ada dua icon baru, mobile phone dan email. Ternyata ada dua cara baru untuk posting yang disediaiin sama blogger. Sebenernya untuk email saya sudah pernah mencoba, ngirim ke blog nya anang (Nang diriimu kan sudah terkenal ndak usah tak link yah wekekeke) dan yang kedua dengan MMS. Di HP SE W960i ku pun terinstall aplikasi blogger ini jadi lebih gampang sebenernya. Sudah pernah nyoba Bong? Sudah cuman ga ke kirim wkekeke ndak tahu deh apa yang salah. Kalau yang ini lagi nyoba posting lewat email. Siapa tahu kek kemaren di ndesa saya bisa buka email tapi ndak bisa buka blog. Maklum lah fakir bandwidth.

Ini lagi nyoba lagi yang lewat email. Tinggal setting aja email tujuan kita. Bisa upload gambar ndak? Ini saya coba yak

Yuuuk silahkan dicoba ya

—————————————————————————————————-

Nah yang di atas tadi itu posting pake email, sekarang yang sedang diriku ketik ini lewat dashboard blogger biasa. Hehehehe

Jadi caranya begini

• Login blogger.com
• Masuk dashboard
• Di sebelah judul blog ada menu icon gambar handphone dan email
• Klik email untuk setting email di blogger
• Klik handphone untuk setting MMS nyo
• Cara posting lewat email, seperti mengetik email biasa dengan email tujuan yaitu email blogger yang sudah ente setting tadi

Cara Posting Baru di Blogger

Sejak semalam ngintip dashboard blogger, ada dua icon baru, mobile phone dan email. Ternyata ada dua cara baru untuk posting yang disediaiin sama blogger. Sebenernya untuk email saya sudah pernah mencoba, ngirim ke blog nya anang (Nang diriimu kan sudah terkenal ndak usah tak link yah wekekeke) dan yang kedua dengan MMS. Di HP SE W960i ku pun terinstall aplikasi blogger ini jadi lebih gampang sebenernya. Sudah pernah nyoba Bong? Sudah cuman ga ke kirim wkekeke ndak tahu deh apa yang salah. Kalau yang ini lagi nyoba posting lewat email. Siapa tahu kek kemaren di ndesa saya bisa buka email tapi ndak bisa buka blog. Maklum lah fakir bandwidth.

Ini lagi nyoba lagi yang lewat email. Tinggal setting aja email tujuan kita. Bisa upload gambar ndak? Ini saya coba yak

Yuuuk silahkan dicoba ya

—————————————————————————————————-

Nah yang di atas tadi itu posting pake email, sekarang yang sedang diriku ketik ini lewat dashboard blogger biasa. Hehehehe

Jadi caranya begini

• Login blogger.com
• Masuk dashboard
• Di sebelah judul blog ada menu icon gambar handphone dan email
• Klik email untuk setting email di blogger
• Klik handphone untuk setting MMS nyo
• Cara posting lewat email, seperti mengetik email biasa dengan email tujuan yaitu email blogger yang sudah ente setting tadi

Cara Mengganti Template Blogger

Bagaimana cara mengganti template blogger/blogspot? Dulu saya sempat merasa kerepotan ketika menganti template blogger karena ketika sudah mengupload xml template baru, selalu ada peringatan untuk menghapus widget. Jika hanya satu dua widget yang ada di sidebar tentunya tidak jadi masalah, namun jika anda tipe blogger yang suka menembel banyak atribut di sidebar tentunya lebih ribet lagi. Lalu bagaimana solusinya?

Cara pertama adalah dengan mem-backup (copy paste) semua kode HTML di sidebar ke notepad termasuk link di blogroll kemudian memasangnya lagi satu persatu. Tetap saja cara ini menyusahkan, bayangkan berapa banyak link berapa banyak kode banner yang harus di-copast lalu dipasang lagi?

Mungkin ada yang bertanya, kenapa sih widget selalu terhapus kalau kita upload template baru? Sekedar informasi, kenapa widget tersebut bisa terhapus? Karena widget yang ada di xml template lama kita belum ada di xml template baru yang kita upload. Sudah menemui titik terang saudara?

Berdasarkan hal tersebut maka cara mengganti template blogger yang aman dengan tidak menghilangkan widget adalah sebelum template baru di upload, maka harus meng-copy widget dari xml template lama dan memasangnya di xml template baru yang akan diupload.

Berikut langkah-langkah praktisnya :

• Terlebih dahulu download template lama, klik pada Download Full Template
• Download notepad ++ untuk meng-edit, download di sini (tenang aja bukan ziddu kok )
• Buka template lama dengan notepad ++
• Copy semua kode widget yang ada, misal untuk widget di sidebar copy kode antara
  

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>

(COPY SEMUA KODE DI AREA INI)

</b:section>
</div>

Lanjutkan untuk kode widget di elemen lain.

• Buka xml template baru yang akan di-upload
• Paste semua kode yang sudah di-copy dari template lama ke template baru. Copy saja di antara elemen sidebar nantinya bisa di edit lagi melalui page element
• Save template baru yang sudah di edit
• Upload template baru yang sudah di edit ke blog, kemudian save dan berdoa semoga widget nya tidak hilang

Sudah nyoba Bong? Ya iyalah sudah, diriku ga bakal nyaranin kalo blom nyoba. Saya ganti template dari yang ijo lama kemaren ke yang baru ini, cukup 5 menit untuk menata widget tanpa ada widget yang terhapus. Selamat mencoba.

Are You Human?

Iseng iseng saya daftar apa yang dinamakan entrecard, padal saya ndak tau gunanya haha. Tapi kalo ndak nyoba kapan taunya bukan? Kaaaaan…. Saya baca baca tentang entrecard. Mudeng ndak Bong? Wohohoho saya gituh, ya jelas ndak mudeng. Dibaca baca lagi agak sedikit mudeng ya entrecard itu semacam tiket buat nampang di blog orang lain gitu deh. Daptarnya di entrecard.com . Cuman yang membikin saya penasaran kenapa namanya entrecard ya?

Kenapa ndak entercard gitu. Enter artinya masuk , card artinya kartu, jadi kartu masuk. Kalo masuk angin Bong? Ya enter wind basa inggrisnya. Kembali lagi tentang nama entrecard kenapa ndak entercard. Apa mungkin karena dulu pas bikin nama web nya salah ketik kepleset jarinya gitu yah *Teori Pengawuran No. 24*

Ya begitulah seperti biasa kalao daftar entrecard dan account account yang lain biasanya diminta untuk verifikasi kata, huruf, atau angka. Hennah truuuus…. Munculnya gini.

Silahkan dilihat itu. Are You Human? wadoooh saya jadi bingung, Cebong termasuk kategori Human ndak ya? Waah jangan jangan yang salah masukin kodenya dipecat dari keanggotaan Human.

Ayook man teman kita belajar mempromosikan blog kita. Banyak cara kok, tanpa harus maen tembak tembakan salah sasaran dor dor thus.

Cara Membuat Kotak Banner Iklan di Blogspot

Umumnya kotak banner iklan ini sudah bawaan asli dari template. Tapi gimana yang udah terlanjur make template yang hanya ada dua sidebar? Jika sidebar anda hanya dua maka perlu ditambah satu sidebar lagi untuk meletakkan kotak iklan ini.

Langkah-Langkah Membuat Kotak Banner Iklan

Masuk halaman Edit HTML, tidak perlu mencentang Expand Widget.
Copy kode css berikut

/*———-Banner 125×125———–*/

.banner{
margin: 0 0 10px 0;
padding: 10px auto 10px;
width:348px;
float:center;
border:1px solid #d6edf8;
background:#fff;
}

.banner ul {
margin: 0px 0px;
padding: 10px 25px;
overflow: auto;
}

.banner li{
height:125px;
width:125px;
margin: 6px 6px ;
padding:5px 5px;
list-style:none;
display : block;
display:inline;
float:right;

}

.banner li a:link, .banner li a:visited {
text-decoration: none;
}

Letakkan sebelum kode ]]></b:skin>

Kemudian, copy kode berikut

<div class=”‘banner’”>
<ul>
<li>
<a href=”‘http://YOUR-LINK-HERE’” target=”‘_blank’”><img alt=”‘ads’” border=”’0′” src=”‘http://4.bp.blogspot.com/_nxOMLf2KJwU/Sai5_XgYzxI/AAAAAAAABG4/Da1niOQL0Uw/s1600/advertise%2B125x125.png’/” /></a>
</li>
<li>
<a href=”‘http://YOUR-LINK-HERE’” target=”‘_blank’”><img alt=”‘ads’” border=”’0′” src=”‘http://4.bp.blogspot.com/_nxOMLf2KJwU/Sai5_XgYzxI/AAAAAAAABG4/Da1niOQL0Uw/s1600/advertise%2B125x125.png’/” /></a>
</li>

<li>
<a href=”‘http://YOUR-LINK-HERE’” target=”‘_blank’”><img alt=”‘ads’” border=”’0′” src=”‘http://4.bp.blogspot.com/_nxOMLf2KJwU/Sai5_XgYzxI/AAAAAAAABG4/Da1niOQL0Uw/s1600/advertise%2B125x125.png’/” /></a>
</li>
<li>
<a href=”‘http://YOUR-LINK-HERE’” target=”‘_blank’”><img alt=”‘ads’” border=”’0′” src=”‘http://4.bp.blogspot.com/_nxOMLf2KJwU/Sai5_XgYzxI/AAAAAAAABG4/Da1niOQL0Uw/s1600/advertise%2B125x125.png’/” /></a>
</li>
</ul>
</div>

Letakkan di bawah <div id=’sidebar-wrapper’> kemudian save.

Perlu dilakukan penyesuaian sesuai ukuran sidebar anda.

Gimana Bong?

Gimana Bong dengan CommentLuv-nya?

Semalam sudah bisa Recent Post, sudah bisa next page, yang mo upload avatar sendiri juga bisa, tapi time masih kacau. Asli keren. Ngedit sambil becandaan ama oyoy ama qittun, Ehehehehehe…Saling menertawakan error masing-masing. Ada yang nanya, kok comment count nya g berubah tetep 0 comment terus? Seperti yang saya bilang kemaren, saya gagal dalam import dan sinkronisasi comment jadinya gitu deh, g sinkron alias g update kalo ada komen baru. Kenapa? Mungkin karena terlalu berat harus sinkronisasi 2000 komentar. Hikz.

Sebenernya setting-nya tidak ribet kok, gampang, hanya mungkin karena masalah import comments aja tadi. Tapi saya sudah mencoba blog dengan komentar lebih sedikit dan “it’s work”. Gapapa lah. Saya mendapat pelajaran dari sini. Tapi bukan kecebong iprit namanya kalo nyerah di tengah empang. Saya berhasil meng-install [di sini ]
Jadi bedanya dengan kotak komen biasa adalah bisa memunculkan recent post dari komentator, bisa upload avatar sendiri, reply comment, next page dengan men-setting jumlah komentar yang muncul di satu halaman.

Tutorial bisa di baca disini Tutorial Blogger Comment Luv. Ga ada error ya ga belajar. Ssssst…tapi jangan lupa back up template awal hehehehe. Jaga jaga kalo error nya mentok. Kalo mo uninstall gimana Bong? Gampang, cukup upload template lama dan hilangin kode HTML invisible di sidebar.

NB : demi kenyamanan pengunjung, saya uninstall dulu