Pular para o conteúdo principal

Cara Membuat Kolom di Bawah Home Page, Atas atau di Bawah Post Body

cara membuat blog user friendly
Sobat. Salah satu tampilan "unik" dan kere dari SL Wuss series adalah adanya "dua kolom" di bawah home page (posting artikel). Keberadaan du akolom tersebut selain menambah "keren" dari segi desain, juga menjadikan blog kita semakin "user friendly.

Kenapa demikian?

Keberadaan dari sebuah kolom tersebut sebenarnya tidak hanya asal saja. Namun tujuan utamanya adalah membangun sebuah link eksternal atau internal (yang setahu saya) hal itu juga menjadi faktor pembaca dari mesin pencari. 

So, langsung saja berikut penampakan dan life demonya.


Sebelum melangkah pada uraian utama pada topik ini, bahasan saya awali dari pemahaman dasar berikut ini.

1# Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body
Caranya sebagai berikut:
1. Masuk akun blogger
2. Pilih Template > Edit HTML
3. Cari kode (Ctrl + F) kode ]]></b:skin>
4. Copy + Paste kode di bawah ini di atas kode  ]]></b:skin>:
#Spicy Column h2{font-size:13px;font-weight:bold;color:#B8002E;border-bottom:2px solid #000000;padding-left:5px;}#Spicy Column{width:600px; /*Change width */}#Spiceleft{width:295px; /*width of the left column*/float:left;margin:4px;}#Spiceright{width:295px; /*width of the right column*/float:right;margin:4px;}
Save Template! 

a# Menambah 2 Kolom di Atas Post Body:
1. Cari (Ctrl + F) kode <div id='main-wrapper'> 
2. Copy + Paste kode berikut ini di atas kode <div id='main-wrapper'>
<div id='Spicy Column'><b:section class='Spiceleft' id='Spiceleft'/><b:section class='Spiceright' id='Spiceright'/></div>
3. Save!
4. Klik "Layout" dan Tekan F5 (Refresh) untuk melihat ada dua kolom baru di atas Blog Posts.

b# Menambah 2 kolom di Bawah Post Body:
1. Cari (Ctrl + F) kode di bawah ini:
<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section></div>
2. Tambahkan kode berikut ini sebelum kode setelah kode </b:section> atau sebelum </div>
<div id='Spicy Column'><b:section class='Spiceleft' id='Spiceleft'/><b:section class='Spiceright' id='Spiceright'/></div>
Hasilnya akan seperti ini:
<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section><div id='Spicy Column'><b:section class='Spiceleft' id='Spiceleft'/><b:section class='Spiceright' id='Spiceright'/></div></div>
3. Save Template!
Untuk mengetahui perubahannya, silakan klik Tata letak (lauout). Selanjutnya sobat bisa langsung menambahkan widget seperlunya saja.

So, selanjutnya, kita bahas topik utama artikel ini.

3# Menambah Dua Kolom di Bawah Home Page (Halaman Utama) Blog
Langkahnya juga tidak jauh berbeda dengan cara sebelumnya, yakni:
1. Masuk akun blogger
2. Pilih template > Edit HTML
3. Cari kode Cari kode (Ctrl + F) kode ]]></b:skin>
4. Copy + Paste kode di bawah ini di atas kode  ]]></b:skin>:
#post-kiri{padding-left: 5px;width: 290px;float: left;word-wrap: break-word;overflow: hidden;margin:0 8px 15px 8px;}.post-kiri a, post-kanan a {color:#555;font-size:13px}.post-kiri ul {list-style: none;color: #EAE9E8;margin: 0;padding: 0;}.post-kiri li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmKGqJrKfUcVtBwtxaC5nVeAFNcphntyKZMsRoRCamXYMoiRECx65CxmJDTigTc-I05iS2oeGSKLYwID0o8r2tFj7gnaCUdQE74HgR062H6ycVsmvuQVoirvQfGnkirOZNgDvGQR1HsKc/s1600/bullet-list.gif) no-repeat 0 10px;text-indent: 0;line-height: 1.2em;border-bottom: 1px dotted #ddd;margin: 0;padding: 3px 0 3px 12px;}.post-kiri h2 {font-size: 15px;font-family: Oswald;}
#post-kanan{padding-left: 5px;width: 290px;float: left;word-wrap: break-word;overflow: hidden;margin:0 8px 15px 8px;}.post-kanan a, post-kanan a {color:#555;font-size:13px}.post-kanan ul {list-style: none;color: #EAE9E8;margin: 0;padding: 0;}.post-kanan li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmKGqJrKfUcVtBwtxaC5nVeAFNcphntyKZMsRoRCamXYMoiRECx65CxmJDTigTc-I05iS2oeGSKLYwID0o8r2tFj7gnaCUdQE74HgR062H6ycVsmvuQVoirvQfGnkirOZNgDvGQR1HsKc/s1600/bullet-list.gif) no-repeat 0 10px;text-indent: 0;line-height: 1.2em;border-bottom: 1px dotted #ddd;margin: 0;padding: 3px 0 3px 12px;}.post-kanan h2 {font-size: 15px;font-family: Oswald;}
***. Note:
- Warna biru menunjukkan lebar kolom widget, maka sesuaikan dengan lebar halaman konten
- Jika ingin membuat tiga kolom, silakan tambahkan kode yang sama persis di atas  ]]></b:skin>
dan mengikuti langkah ke-5 dan 6 sampai selesai (menambahkan kode sama persis pada langkah 5 dan 6).

5. Cari (Ctrl+F) kode <div id='main-wrapper'> dan Anda akan menemukan kode seperti di bawah ini:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
6. Copas kode berikut ini di bawah kode </b:section> atau sebelum kode </div>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
                        <b:section class='post-kiri' id='post-kiri' preferred='yes'/>
                        <b:section class='post-kanan' id='post-kanan' preferred='yes'/>
                        </b:if> 
Di dalam kode templatenya kurang lebih seperti ini:
Menambah Dua Kolom di Bawah Home Page (Halaman Utama) Blog
7. Save template
8. Silakan cek di tata letak (layout) untuk mengetahui hasilnya.

Mudah bukan?

Jika masih ada hal yang perlu didiskusikan, jangan malu-malu untuk meninggalkan pesan di kolom komentar njeh.

Salam blogger.
Sumber:
(http://forumblogindo.blogspot.com)
http://contohblognih.blogspot.com/2015/02/menambah-dua-kolom-widget-di-bawah-blog-posts.html

Comentários

Postagens mais visitadas deste blog

9 Blog Berpenghasilan Tertinggi di Indonesia dari Google Adsense

techzend.com Sobat blogger. Kemarin telah kita ketahui bahwa pendapatan para blogger di Indonesia tahun 2015 ini memang tidak bisa dianggap remeh. Karenanya mereka menjadikan blog sebagai rutinitas pekerjaan sehari-hari.  Bisa dibayangkan, hanya cukup duduk manis, ambil poisi paling enak, serta berhadapan dengan sebuah laptop/ PC disandingkan dengan segelas kopi hangat, kita bisa mendapatkan penghasilan yang insyallloh halal thoyyiban.  Kali ini akan kita lanjutkan bahasan tentang info 9 blog berpenghasilan tertinggi di Indonesia dari Google Adsen s e . Kenapa saya ulas hanya pada fokus yang berpenghasilan dari Google Adsence? Ya karena memang rata-rata para blogger menggunakan GA sebagai pemasukankan utama mereka. Seperti halnya kita tahu, ada juga yang mendapatkan penghasilan blog dari pemasangan iklan dan affiliasi . Blog Berpenghasilan Terbesar di Indonesia Data yang saya sampaikan kali ini, hanya berdasarkan hasil survei serta ulasan dari beberapa sumber lain. Setelah mel...

28 Senjata Ngeblog Wajib para Blogger

Sobat. Pada kesempatan ini akan Ane berikan "senjata pamungkas" ketika bergelut dalam dunia blog, baik blogspot maupun wordpress . Senjata ngeblog ini berupa "tools" maupun "software" yang pasti bermanfaat dan bisa membantu Sobat dalam mengembangkan dan membangun sebuah blog yang berkualitas .  Tidak hanya berkualitas dari sisi desain, namun juga berkualitas dari sisi isi konten. 28 senjata ngeblog terbaik ini sangat muda digunakan. Tidak terlalu bertele-tele dan membingungkan, namun di dalamnye termuat cara yang simpel dan sangat memerikan manfa'at yang luar biasa. Tools ini tidak sekedar saya saja yang menggunakan, namun juga para blogger terkenal lokal maupun manca negara. Senjata Ngeblog Terbaik dan Terpopuler para Blogger Sesuai dengan judul topik bahasan kali ini, maka manfaat dari penggunakan tools di bawah ini untuk membuat sebuah situs, website atau blog yang memang berkualitas. Tidak sekedar blog "asal-asalan". Masih teringat buk...

Bahaya Copy Paste Artikel pada Blog serta Solusinya

Etika Komunikasi Publik Sobat. Pagi ini iseng-iseng Saya mencoba melakukan risearch salah satu artikel bulan kemaren diterbitkan. Judul artikel tersebut yakni 9 blog berpenghasilan tertinggi di Indonesia dari Google Adsense.  Ketika muncul di halaman pertama Google, saya coba untuk menelusuri salah satu artikel dari salah satu situs.  Keingintahuan saya itu muncul manakala judul dari artikel yang dipublish di situs tersebut "sama persis" dengan artikel yang saya terbitkan. Saking penasarannya, kemudian saya buka hyperlink dari url situs tersebut. Anehnya, ketika terbuka secara utuh, saya heran, kaget dan tersenyum sipu. Alasanya kenapa? Karena artikel  9 blog berpenghasilan tertinggi di Indonesia dari Google Adsense  ini telah di copas alias copy paste di situs yang saya buka tersebut. Postingan tersebut tidak tergolong dalam istilah rewrite atau tulis ulang, melainkan copy paste secara utuh terhadap seuruh isi artikel yang saya tulis. Tidak nyaris 90 %, namun 100% c...