@FreeDomain @Review @Facebook
Gratis artikel Bang Del, daftar sekarang!
Posted by Bang Del

Blog yang Bagus Gimana Sih?

Apakah blog yang bagus menurut saya sudah bagus menurut orang lain. Apakah blog yang bagus menurut orang lain sudah bagus menurut saya. Jawaban untuk kedua pertanyaan di atas adalah belum tentu. Terkadang bagus menurut saya ternyata jelek di mata pembaca dan terkadang bagus menurut pembaca ternyata tidak bagus menurut saya. Menurut kamu blog yang bagus gimana sih?

blog yang bagus
Posted by Bang Del

Cara Promosi Blog yang Baik

Ingin blog anda terkenal? Temukan jawabannya di sini "Cara Promosi Blog yang Baik". Hampir semua pemilik blog ingin blognya menjadi terkenal dan ramai dikunjungi dengan trafik yang tinggi pula. Saya pun begitu, sama seperti anda :) Posting tentang cara promosi blog ini adalah berdasarkan pengalaman pribadi. Silahkan dibaca-baca dulu dan ambil poin-poin yang cocok buat blog anda. Semoga bermanfaat.

promosi blog
Posted by Bang Del

Jenis-Jenis Bisnis Online

Sudah sering mendengar tentang Bisnis Online ya. Saya akan memberikan sedikit ulasan tentang bisnis online dan jenis-jenis bisnis online. Barangkali anda tertarik untuk memonetisasi blog. Hitung-hitung bisa dapat dollar dari internet. Artikel ini mengulas beberapa jenis bisnis online yang sedang marak dan digandrungi para blogger.

bisnis online

Menambah Elemen Sidebar Blogspot

Menambah kolom sidebar blogspot sebenarnya agak sulit namun asik. Kalau kita memilih template minima maka akan terdapat dua kolom saja yaitu kolom pada bagian postingan dan kolom pada bagian sidebar. Banyak blogger yang suka hanya dua kolom saja namun ada juga beberapa blogger yang suka blog dengan tiga sidebar atau bahkan empat sidebar. Sebenarnya kalau dicari template blog untuk blogspot yang tiga sidebar dan empat sidebar sangat banyak dan tinggal download saja dan dipakai. Namun bagaimana kalau kita mencoba modifikasi template default minima menjadi beberapa sidebar. Tentunya ada rasa kepuasan tersendiri bukan? Itung-itung buat belajar dan nambah kemampuan trik blogspot yang kita miliki.

Elemen pada template blogger ada tiga, yaitu:

  • Elemen Header
  • Elemen Outer
  • Elemen Footer

Untuk Elemen Outer masih dibagi menjadi dua bagian:

Elemen Main, elemen ini adalah elemen tempat kita menyimpan posting artikel. Jadi bila kita membuat artikel posting, maka postingan akan masuk ke bagian ini.
Elemen Sidebar, elemen ini adalah tempat untuk menambahkan asesoris lainnya untuk mempercatik blog dan menambah widget seta tools lainnya.

Untuk siapa saja yang suka berkreasi dengan kode-kode HTML, inilah salah satu cara terbaik untuk mengasah ilmu HTML. Karena dengan membuat elemen sidebar blogspot tambahan, maka kamu akan dihadapkan dengan kode HTML. Menambahkan kolom sidebar berarti perlu memperhatikan kode-kode pada Outer Wraper berikut.
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#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 */
}
#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 */
}

Dengan menambahkan elemen sidebar baru berarti secara logika maka akan terjadi penambahan nilai lebar keseluruhan pada Outer Wraper. Mengapa? Karena seperti yang saya katakan tadi, bahwa outer wraper terbagi atas dua bagian yaitu main wraper dan sidebar wraper. Sekarang bagaimana cara menambahkan elemen sidebar baru atau kolom baru di blogspot? Pertama sekali harus diperhitungkan berapa lebar dari kolom baru yang akan kita buat. Misalnya kita ambil nilai lebar sidebar baru 220 pixel. Maka secara keseluruhan lebar outer wraper menjadi kira-kira 410 pixel + 220 pixel + 220 pixel + 20 pixel = 870 pixel. Bisa ditambahkan 10 pixel lagi untuk sela pada outer wraper sehingga lebar keseluruhan adalah 880 pixel. Kode penambahan sidebar baru dengan nilai di atas adalah:

#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Setelah ditambahkan maka kodenya akan menjadi seperti ini:
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 880px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yang ini adalah tambahan untuk jarak sela */
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 */
}
#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}

Kode-kode di atas merupakan langkah pertama yang harus ditambahkan. Berikutnya adalah menambahkan kode id untuk elemen sidebar baru tersebut. Untuk kode id sidebar sebelum penambahan kolom adalah seperti ini:

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

Karena kita telah menambahkan elemen baru pada sidebar maka kita juga harus membuat id sidebar baru tersebut pada bagian body. Kodenya adalah ini:

<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

Selanjutnya adalah menyatukan kode sidebar baru tersebut pada kode id side bar yang sebelumnya, sehingga kodenya menjadi seperti ini:

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

Selesai dan kolom baru atau elemen baru pada sidebar blogspot telah ditambahkan. Nilai dari header dan footer sebaiknya disamakan dengan nilai outer wrapper tersebut yaitu sebesar 880 pixel. Sehingga menjadi sama dan lebih klop. Mudahkan? Ok, mari bermain kode HTML dengan blog yang bukan blog utama kita. Buatlah blog baru sebagai blog uji coba kamu sebagai bahan percobaan untuk memodifikasi sidebar template minima blogspot.

Loggin di blogger » Klik Layout » Klik Edit HTML » Jangan memberi tanda centang pada kotak kecil di samping tulisan Expand Widget Template. Tips untuk memudahkan mencari kode berikut, dengan tekan Ctrl F atau F3 pada kebor maka akan muncul tools kotak cari pada layar bawah monitor komputer.

Cari kode di bawah ini:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}


Ganti nilai 660px menjadi 880px, sehingga kodenya jadi seperti ini :
#header-wrapper {
width:880px;
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;
}


Ganti nilai 660px menjadi 880px, sehingga kodenya menjadi seperti ini :
#outer-wrapper {
width: 880px;
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 kode berikut dan paste persis di bawah kode di atas :
#sidebarbaru-wrapper {
width: 220px;
float: right;
padding-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 880 px, sehingga kodenya akan seperti ini :
#footer {
width:880px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


Cari kode di bawah ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>

Copy kode berikut, lalu paste persis di bawah kode yang di atas :
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>

Klik Simpan Template dan selesai.

Untuk melihat hasilnya, tinggal klik Elemen Halaman dan lihat apakah kolom kamu sudah menjadi tiga elemen. Bila sudah, kamu bisa tambahkan widget baru pada sidebar tersebut dan lihat hasilnya. Sebenarnya kode-kode di atas masih bisa dirubah lagi sesuai dengan selera. Tinggal dibutuhkan kesabaran dan kreatifitas saja. Sebagai tips, jangan pernah takut berhadapan dengan kode HTML. Belajar dan belajar adalah cara termudah untuk berkreasi. Sumber bacaan dari banyak artikel di internet mengacu pada tulisan Kang Rohman di Tips Menambah Kolom Pada Template Baru. Untuk template default minima juga bisa menambahkan elemen baru di atas dan di bawah elemen kolom posting. Menambah elemen di bawah header. Menambah elemen di atas footer. Pokoknya berani bereksperimen dan coba-coba.

Related Post:


Top Blogs or My Zimbio or Bookmark and Share

52 comment:

Kautsar said...

wah bagus nee tips nya
thank's ..salam kenal dlu

♥ Neng Aia ♥ said...

another tutorial blog :)

sidebar saya sudah 3 mau dijadiin 4 kayaknya melar deh ntar.. hihihi

cemacem said...

wah.. siip mantap..
ini dia yang saya cari.. trims bro infonya.. izin bookmark ya.. dan salam kenal dari pendatang baru..

Blog Juragan said...

kerrreeenn banggetsss..hhe :D :D ..met pagii sob..aku tunggu lho artikel selanjutnya..jgn lupa coment balik y..kalo bisa sih..gk bisa gk pp jg :( ..thx y..hhe.. :D

Snap Shoot said...

haloooo..bang del...ada YM ga? pgen tau nih...oh ya tukar link yah...

anpaki said...

Abangdel gimana ya kalo sidebar dan main post bisa sejajar, soal'na yang sy sidebarnya agak menurun.:((

Bang Del said...

@Anpaki
Tentang template yang turun ke bawah (men-sejajarkan main wraper dan sidebar wrapper) coba Anpaki buat 0 (nol) semua nilai padding: 45px 10px 30px 0px; sidebar 1 dan sidebar 2. Dicoba dulu ya..

anpaki said...

Ok dech bang del..neh sy balik lg, ntr malam lembur ah.. udah beli kopi juga ahahahahaha...0 (nol) jd gitu toh. sy coba dech...TQ byk.

referensiregistrasi said...

apa ndak berat jadinya nanti blognya mas??? trims

Bang Del said...

@referensiregistrasi
Penambahan ekemen baru di sidebar memang mengurangi kecepatan loading blog. Namun pengaruhnya sangat kecil. Trims juga..

foto cewek cantik said...

awalnya saya coba pada blog yang udah jadi...hasilnya ga bagus...karena penasaaran saya coba pake blog percobaan pake template yang diajarkan...alhamdulillah berhasil...dan saya menjadi sedikit lebih faham...thnx tutorialnya

blog sederhana said...

Wah makasih.. Saya udah coba barusan

Dion said...

Hm...bingung sih..tapi coba dulu ah tipsnya..hoho

Yahoo Detector said...

bangdel,, aq nambah ke blog aq yg ini kok gk bisa??
gmana ya?

Bang Del said...

Yahoo Detector : Coba diulangi lagi. Jika memang masih kesulitan, coba cara yang Menambah Elemen di Bawah Sidebar postingan terbaru.

kakangsung said...

orang awam numpang blajar..

kakangsung said...

uda jadi bos,thx infonya..
kalo mau ubah formatnya menjadi "sidebar-main-sidebar" bisa ga yah,gmn caranya?

Bang Del said...

Kakangsung : Baca artikel Membuat sidebar di bawah Main Sidebar. Semoga merupakan jawaban dari pertanyaan Kakangsung.

Rendy-Ramon said...

bang tanya nii saya sukses ngikutin nya nii bang..
tp knp sidebar nya gag samping"an iaa...???
coba di tengok bang
http://rendy-ramon.blogspot.com/

KOKO said...

koko mengatakan
thank's atas informasinya
salam untuk semua blogger

kakang sung said...

sori bos,tnya lg neh..

di blog saya, main wrapper(letaknya sbelah kiri) sidebar baru(tengah),sidebar lama(kiri).
sy pngen atur posisi main-wrapper ada d tngah,gmn ya?
sy uda prnh coba ubah 'float'nya,tp malah jd brantakan..
float itu apa seh?
makasi sblmnya bang del..

kakang sung said...

sidebar lama(kanan)

aidanmei said...

bangdel .... makasih tutornya yah .... sukses buat bang del ..piss ah ;)

Darma Saputra said...

Halloo...
Terimakasih Mas atas infonya dan salam buat semua teman-teman Blogger, hahahaha, Jangan lupa, kalau ada waktu jalan-jalan sebentar ke blog Bujang Riau http://www.darma-saputra.co.cc. terimakasih ...

izkiy said...

thanks mas attas tutorialnya,saya jadi nggerti sekarang nih hehe...kunjungi blog saya yah..
http://www.izkiy.com/

enjoy said...

wah..mayan rumit ya...coba dlo ah..tq mas..:)

Kumpulan Penulis said...

Luar biasa blognya, salam sukses......http://catatan-kisah.blogspot.com

Blog Iklan said...

Boleh juga nih tipsnya, ....buat blog iklan......

ProdukCasio said...

ta coba ya

ProdukCasio said...

ta coba ya

alvian said...

bingung jg sie!!!! tp berusaha dulu, klo g bisa bantu lg y.. he.he...!

zenislev_iam said...

mas kok posisi sidebar yang baru malah nyelip diantara sidebar kanan ama kolom posting..
kok bisa begitu yak??
ada solusi??
udh mentok niy mas gg bisa"..
~x(

Anonymous said...

Iya, ternyata pusing juga ya..melihhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gifat kode-kode html itu...

ulun nuha said...

mantaps banget tutorialnya....bangdel

DHR.TENGOR,SH. said...

Bang Del kenapa ya Templates Blog aq http://bmi-btg.blogspot.com sidebar / wignet kiri pindah kebawah posting dan wignet bawah pindah keatas. mohon bantuan ya.

B@NG D@WOOD said...

muanteb
tapi kog nggak berhasil nih ???
side bar saya tetap 2 kolom

nurgipsi said...

Biar dua widget bisa satu baris gimana ya?

Ramot Mangatur Simanjuntak said...

lebih jelas buka situs say aja
http://rayprogmb.blogspot.com

Praptomowow said...

ini yang ane butuhin...tengkyu gann

ijin ctrl+D dulu yak...kapan2 mampir lagi....

Duve said...

wah bagus. Rinci, walaupun aku kagak2 tau. hehehe
ijin ngopy

Teras Info said...

Terimakasih banyka atas pembelajarannya...
saya sangat terbantu sekali...

bandung garut bicycle commonity said...

bang Del, tolong dong liat blog sy (www.bgbc-makassar.blogspot.com). apa yg perlu di setting agar lebih bagus. maklum pemula. thanks sebelumx

diexXx said...

thank's gan ataz informasinya..
salam kenal..
:D

Marwan said...

Bro... makasih info nya..aku mau coba nih mudah-mudahan berhasil.

Rudy Hartono said...

thanks sob, salam kenal

jalz said...

its work gan..thanks

Herul ajja said...

mantap tu,,

Bang Kamplenk said...

Yayaya...
Mampir atuh...

alaska pulsa said...

ok bnget

Hendri Prastio said...

makasih atas tutorialnya mas...sangat membantu

Kang Sofi said...

Makasih mas tutornya

Hafid Joe said...

Mantap... Main2 di amatir blog saya kawan http://asaberita.blogspot.com/

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Post a Comment

Terima kasih, komentar anda sangat berarti bagi Bang Del. Isi pendapat anda tentang blog ini di Testimoni. Tinggalkan pesan di Blogroll untuk tukaran link.

Link Exchange | Blog Directory

Link Exchange Directory of Top Sites Dmegs.com
SEO friendly web directory of top sites & blogs organized by topic into categories and presented according to relevance ofwebsite. Submit your website free.

Tukar Link dan Promosi Website
Webkios Direktori Indonesia, katalog website untuk tukar link dan promosi gratis. Tambahkan website anda sekarang juga di direktori kami.

Increase your PageRank
The Search Engine Optimization Experiment - Increase your PageRank.

Blogarama - The Blog Directory
Get Listed At One Of The Largest FREE Blog Directories Online. Let People Find And Rate Your Blog In The Blog Directory!

2RSS.com :: RSS directory
2RSS.com :: RSS feeds, RSS directory, RSS software, RSS scripts, RSS articles, RSS syndication, XML, RDF, news.
 

Followers

Recent Comments