Cara Mudah Membuat 2 Kolom Widget Di Postingan Dan Sidebar

Cara Mudah Membuat 2 Kolom Widget Di Postingan Dan Sidebar

Cara Membuat 2 Buah Elemen Colomn Gadget/Widget Baru :




1. Login Blogger, Pilih Template lalu Edit HTML.
2. Ceklis / Centang Expand Widget Template ( hal ini dimaksudkan agar semua kode HTML pada tampilan widget di Tata Letak / Layout Anda dapat terlihat semua ) .
3. Cari kode ]]></b:skin> dengan menekan tombol CTRL+F
4. Copy Paste script CSS berikut ini diatas ]]></b:skin> :

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

 Anda dapat mengubah padding ( jarak posisi gadget ) 0px 10px 10px 10px maksudnya adalah Jarak ( Atas, Kanan, Bawah, Kiri ) . Anda juga dapat merubah border ( garis tepi widget ) dengan warna. Caranya hapus $bordercolor dan ganti dengan kode warna yang Anda inginkan. Contoh : Kode warna hitam = #000000

5. Kemudian carilah bro kode

•   <div id=main-wrapper>
•   <div id=content-wrapper>
•   <div id=header>
•   <div id=sidebar-wrapper>
•   <div id=bottom>

     jika sudah ketemu dan didapat atau hampir sama dengan kode diatas, letakkan kode HTML di bawah ini di Atas  atau di bawah salah satu kode tadi. Itu sesuai dengan penempatan Anda mau diatas atau dibawah. Contoh diatas <div id=main-wrapper>

<div id=box-main-container>
<div id=box1 style=width: 50%; float: left; margin:0; text-align: left;>
<b:section class=box-column id=Mediablogger1 preferred=yes style=float:left;/>
</div>
<div id=box2 style=width: 50%; float: right; margin:0; text-align: left;>
<b:section class=box-column id=Mediablogger2 preferred=yes style=float:right;/>
</div>
<div style=clear:both;/>
</div>

Penjelasan :

<div id=main-wrapper> adalah posisi halaman utama anda biasanya berukuran lebar 950px. Biasanya dipakai untuk penempatan menu horizontall atau daftar isi sebuah blog.

 

<div id=content-wrapper> adalah posisi postingan.

 

<div id=header> adalah posisi kepala. Biasanya ditempatkan judul blog dan deskripsi blog. Bisa juga diberi space iklan.

 

<div id=sidebar-wrapper> adalah posisi sidebar blog.

 

<div id=bottom> adalah posisi paling bawah. Atau Footer Blog Anda.

Pilih salah satu, mau menempatkannya dimana. Apabila mau menempatkan 2 kolom widget tersebut dibanyak tempat tinggal copy saja kode yang kedua diatas yg ada 50% nya itu, tetapi tidak perlu copy kode yang pertama karena kan sudah ada kode CSS sebelumnya

download now

Read More

Cara membuat tabel di postingan Blog

Cara membuat tabel di postingan Blog

Cara Membuat Tabel Di Postingan Blogger/Blogspot - atau Cara Membuat tabel dalam postingan blog kadang diperlukan dengan maksud untuk memperjelas materi tulisan/artikel atau untuk mempersingkat penjelasan. Pada panel posting blogger tidak tersedia fasilitas untuk membuat tabelsehingga kita perlu membuat tabel secara manual dengan menggunakan tag HTML tertentu. Dasar yang harus kita pahami dulu disini adalah bagaimana cara atau kode penulisan sebuah tabel didalam postingan. Pada tips blogging kali ini saya akan share bagaimana cara membuat tabel serta tag HTML kode penulisannya.

Perintah dasar tag HTML untuk membuat tabel :

Kode HTML	Keterangan
<table>...</table>	Perintah untuk membuat tabel
<tr>...</tr>	Perintah untuk membuat baris
<td>...</td>	Perintah untuk membuat kolom
border, width, align, bgcolor	Kode tambahan untuk pengaturan tebal garis  border, lebar tabel, perataan teks dan warna background

Nah sekarang kita coba membuat tabel 1x3 ( 1 baris 3 kolom ), maka penulisannya seperti ini :

<table border="1">

<tr>

<td>Konten 1</td>

<td>Konten 2</td>

<td>Konten 3</td>

</tr>

</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1

Konten 2

Konten 3

Selanjutnya kita coba merubah kode dasar diatas tadi untuk mempercantik tampilan dengan perataan teks dan ukuran lebar tabel kita tentukan misalnya 450px, maka penulisannya menjadi seperti ini :

<table border="1" width="450">

<tr bgcolor="#F2F2F2">

<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>

</tr>

</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1

Konten 2

Konten 3

Kemudian kita coba lagi membuat tabel yang lebih banyak misalnya 2x3 (2 baris 3 kolom ) dengan format penulisan seperti ini :

<table border="1" width="450">

<tr bgcolor="#F2F2F2">

<td align="center"><b>Konten 1</b></td><td align="center"><i>Konten 2</i></td><td align="center">Konten 3</td>

</tr>

<tr>

<td align="left">Tuliskan teks disini</td>

<td align="left">Masukkan script gambar dengan format seperti ini &lt;img alt="emo" border=&#039;0&#039; src=&#039; http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif&#039;/&gt;</td>

<td align="center"> Maka hasilnya akan seperti ini

<img alt=emo border=0 src=http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif title=emo/></td>

</tr>

</table>

Maka hasil tampilannya menjadi seperti ini :

Konten 1	Konten 2	Konten 3
Tuliskan teks disini	Masukkan script gambar dengan format seperti ini <img border=0 src=http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif/>	Maka hasilnya akan seperti ini

Nah dari 2 contoh sederhana tadi silahkan sobat terapkan untuk membuat tabel dalam postingan anda dengan menggunakan perintah-perintah dasar pembuatan tabel serta kode tambahan yang diperlukan sehingga hasil akhir tabel yang dibuat jadi lebih bagus dan menarik. Materi posting ini tidak cukup jika dihafalkan saja namun akan lebih baik kalau kita langsung mencoba praktek membuatnya. Tentukan dulu jenis atau bentuk tabel yang ingin sobat buat, kemudian coba tuliskan scriptnya di notepad, buka panel posting blogger sobat kemudian paste kode script tabel yang dibuat tadi disana serta lihatlah previewnya. Saya yakin dengan cara seperti ini akan mempercepat pemahaman kita mengenai cara pembuatan tabel ini. Semoga tips ini bisa bermanfaat, happy nice blogging

Sumber Referensi Artikel : http://rayhanzhampiet.blogspot.com/2011/11/cara-membuat-tabel-di-postingan.html

Sumber : http://m-wali.blogspot.com/2012/01/cara-membuat-tabel-di-postingan.html#ixzz1liKaqXcD

download now

Read More

Cara Mudah menampilkan Recent Post Postingan Terbaru

Cara Mudah menampilkan Recent Post Postingan Terbaru

Dengan memasang widget recent post atau postingan terbaru maka pengunjung blog kita akan tertarik dan tahu postingan kita yang baru, dengan demikian mereka akan tertarik untuk membacanya. Kalo Sobat ingin Menampilkan postingan terbaru (Recent Post) kamu di side bar?
Kalo pingin, beginilah caranya :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy kode berikut ini dan taruh dalam kotak "content".

<script>
function rp(json) {
document.write(<ul>);

for (var i = 0; i < numposts; i++) {
document.write(<li>);
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == alternate) {
posturl = entry.link[k].href;
break;
}
}

posttitle = posttitle.link(posturl);
var readmorelink = "(lagi)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";

if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<S[^>]*>/g;
postcontent = postcontent.replace(re, "");

if (showpostdate == true) document.write( + cdday + + monthnames[parseInt(cdmonth,10)] + >> );
document.write(posttitle + );

if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(-> + postcontent + ... + readmorelink);
}
}
document.write(</li>);

}
document.write(</ul>);

}
</script><script>var numposts = 10; var showpostdate = true; var showpostsummary = false; var numchars = 100; </script><script src="http://nayakaza.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script>

4. Ganti http://nayakaza.blogspot.com dengan nama blog kamu.
5. Angka "10" menunjukkan jumlah "Recent Post" yang ditampilkan, kamu bisa menggantinya
6. Terus Simpan deh.

download now

Read More