Semeton Sidakarya: Tip Blogger

Home » Posts filed under Tip Blogger

Tampilkan postingan dengan label Tip Blogger. Tampilkan semua postingan

Cara membuat 3 kolom gadget dibawah header

Pada postingan kali ini kita akan membahas cara menambah 3 kolom Gadget dibawah header, caranya sangat mudah sekali, ikuti langkah - langkah berikut ini :

Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>\

Setelah itu cari kode dibawah ini :

<div id='main-wrapper'> atau kode
<div id="main-outer"> atau kode
<div class='main-outer'> sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)

Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas

</div>

Kli Pritinjau, siapa tahu ada kesalahan
Klik Simpan

Selamat mencoba

Cara membagi header menjadi 2 kolom

Untuk membuat 2 kolom header biasanya dipergunakan untuk menyimpan iklan, menu share social media, dan lainnya sehingga tampilan blog menjadi lebih gagah, jika ingin membuat dan menambahkan 2 kolom header silahkan ikuti cara dibawah ini dan semoga tutorial saya kali ini bisa membantu keinginannya kawan :

Sign in di blogger
Klik Opsi lainnya
Klik Templete
klik Edit HTML
Centang tulisan Expand Widget Templates
Cari Kode CSS .header-outer (gunakan tombol CTRL + F untuk mempermudahkan pencarian kode)

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}

Setelah menemukan kode seperti di atas, block kode tersebut kemudian hapus dan ganti dengan kode dibawah ini

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 160px;

}
#header {
width: 45%;
margin-right: 10px;float: left;

}
#tsa-headerbaru {
float: right;
width: 47%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#tsa-headerbaru {margin: 3px;

}

Keterangan

min-height: 160px; = Tinggi tampil di header anda adalah sebesar 160px, ganti sesuai selera
width: 47% = Lebar Header kanan atau yang baru ditambahkan dan ada 8% ruang antar header.
width: 45%;. = Lebar Header kiri

Setelah mengatur kode CSS tersebut diatas selanjutnya cari kode dibawah ini:

Setelah anda temukan kode <div class="region-inner header-inner"> tempatkan kode dibawah ini diatas kode tersebut diatas

<b:section class="tsa-headerbaru" id="tsa-headerbaru" maxwidgets="1" showaddelement="yes"></b:section>

Setelah selesai, simpan dan tutup template

Selamat mencoba

Cara membuat tabel diblog

Dalam membuat table/kolom dipostingan blog diperlukan untuk memasukan data agar tertata rapi dan data tersebut berurutan sesuai dengan kelompok data yang diinginkan. Pada pembuatan tabel harus berada dalam mode HTML (berdampingan dengan Compose) disaat melakukan postingan, untuk membuatnya ada beberapa hal yang harus kita ketahui tentang perintah tabel tersebut diantaranya :

Keterangan:

<table> = perintah untuk membuat table
<border> = perintah untuk mengatur tebal garis pinggir
<tr> = perintah untuk membuat baris pada table
<td> = perintah untuk membuat kolom pada table

Cara membuat tabel :

Sign in di Blog
Klik Pos
Klik HTML
Copy kode dibawah ini dan paste ditempat postingan yang diinginkan
Klik Pratinjau
Klik Simpan

Contoh 1 tabel,

<tr>

<td>Masukan data</td>

</tr>

</table>

Masukan data

Keterangan :

Border = ketebalan garis
Masukan data = Ganti dengan data nya kawan

Contoh 2 tabel.

<td>Masukan data</td><td>Masukan data</td>

</tr>
</table>

Masukan data

Keterangan :

Border = ketebalan garis
Width = lebar kolom
Masukan data = Ganti dengan data nya kawan

Contoh penambahan tabel kesamping dan kebawah

<table border="1">
<tbody>
<tr>
<td align="center">No</td> <td align="center" width="300">Uraian</td> <td align="center">Debet</td> <td align="center">Kredit</td>
</tr>
<tr>
<td align="center">1</td> <td>Masukan data </td><td>Masukan data</td><td>Masukan data</td>
</tr>
<tr>
<td align="center">2</td> <td>Masukan data </td><td>Masukan data</td><td>Masukan data</td>
</tr>

No	Uraian	Debet	Kredit
1	Masukan data	Masukan data	Masukan data
2	Masukan data	Masukan data	Masukan data

Keterangan :

Border = ketebalan garis
Width = lebar kolom
Masukan data = Ganti dengan data nya kawan
<td align="center"> = bentuk tulisan ditengah ganti sesuai selera

Contoh memisahkan tabel yang satu dengan yg lainnya :

<table border="1">
<tr>
<td align="center" colspan="3">Masukan data</td>
</tr>
<tr>
<td>Masukan data</td> <td>Masukan data</td> <td>Masukan data</td>

</tr>

</table>

Masukan data
Masukan data	Masukan data	Masukan data

Keterangan :

Border = ketebalan garis
Masukan data = Ganti dengan data nya kawan
<td align="center" colspan="3"> = bentuk tulisan ditengah ganti sesuai selera dan pemisah

Membuat Susunan Pengurus :

<table border="0">
<tr>
<td>Ketua</td> <td>:</td> <td>Angga Saputra</td>

</tr>
<tr>
<td>Anggota</td> <td>:</td> <td>Novi Marta</td><tr>

<tr><td> </td> <td>:</td> <td>Desi Ratnawati</td></tr>

<tr><td> </td> <td>:</td> <td>Oktarini</td></tr>

<tr><td> </td> <td>:</td> <td>Mei Artalita</td></tr>

</tr>

</table>

Keterangan :

Border "0" = tidak garis
Masukan data = Ganti dengan data nya kawan

Cara membuat menu horizontal dibawah header blog

Dalam membuat Menu Horizontal diblog ada yang ditempatkan dibawah atau diatas header blog, dalam pembuatannya ada yang jenis dropdown dan tanpa dropdown tergantung kebutuhan. Cara Membuat Menu Dropdown Horizontal dibawah header blog dapat dilakukan dengan langkah-langkah sebagai berikut:

Sign in diblog
Klik Edit HTML
Centang Expand Template Widget
Cari kode ]]> </ b: skin> (gunakan ctrl + F untuk memudahkan pencarian)
Copy dan pastekan Kode CSS dibawah ini dan tempatkan diatas kode ]]> </ b: skin>
Klik Pratinjau untuk melihat kesalahan
Klik Simpan

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:red;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:red;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: red;

text-decoration:none;

}

.menu li ul{

background:red;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:1;

}

.menu li:hover ul{

display:block;

}

.menu li li {

background:red;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;

}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:red;

border:0px;

color:red;

text-decoration:none;

}

Keterangan

Kode warna red = Ganti warna sesuai dengan selera

Memasang kode html drop down menu di tata letak blog dibawah Header

Klik Tata letak dibawah header
Klik HTML/Java Script
Copy dan pastekan Kode CSS dibawah ini di kolom konten HTML/Java Script
Klik Simpan dan lihat hasilnya

<li><a href="URL alamat blog">PROPIL</a></li>

<li><a href="URL alamat blog">FACEBOOK</a></li>

<li><a href=""> JUDUL 1</a>

<ul>

<li><a href=" URL alamat blog "> JUDUL 1</a></li>

</ul>

</li>

<li><a href=""> JUDUL 2</a>

<ul>

<li><a href=" URL alamat blog "> JUDUL 2</a></li>

</ul>

</li>

<li><a href=" URL alamat blog”>JUDUL </a>

<li><a href=" URL alamat blog "> JUDUL </a>

<li>

</li>

</ul>

</div>

Keterangan

Kode warna MERAH = Ganti dengan alamat dan judul postingan nya kawan

Silahkan berkarya

Cara membuat menu scroll otomatis diblogger

Contoh gambar

Untuk lebih jelasnya silahkan ikuti langkah berikut ini:

login dulu ke Blogger
klik Opsi lainnya/Rancangan
Klik Tata Letak
Klik Tambah gadget
Klik opsi HTML/Java Script,terus copy kode HTML dibawah ini dan paste kan pada kolom HTML/Java Script
Klik Simpan

</script>

</script>

var accToc=true;

</script>

</div>

</justipy>

Keterangan

Kode Justipy : bentuk tulisan penuh , (silahkan diganti sesuai selera center = tengah)
Border”4” : Ketebalan garis pinggir (silahkan diganti sesuai selera)
Background White : Warna background Judul Isi daftar (silahkan diganti sesuai selera)
Height : Tinggi Scroll (silahkan diganti sesuai selera)
Weight : Lebar Scroll (silahkan diganti sesuai selera)
http://ketutjoel88.blogspot.com / : Ganti dengan alamat URL blognya kawan

Selamat mencoba

Cara membuat menu scroll diblogger

Menu scroll memang diperlukan untuk menampung daftar isi ataupun judul artikel yang panjang dan lebar di suatu blog panjang dan lebar dapat diatur dengan sedemikian rupa sehingga dapat disesuaikan pada tempat yang terbatas. Fungsi scroll yang berbentuk kotak kecil ini sangatlah efektif untuk dipasang di blog agar terjadi penghematan ruang tempat, bagi pemula yang ingin memasang di blog dengan tipe yang sederhana dan tidak memerlukan kode script yang sulit sekali.

Untuk lebih jelasnya silahkan ikuti langkah berikut ini:

login dulu ke Blogger
klik Opsi Lainnya/Rancangan
Klik Tata Letak
Klik Tambah gadget
Klik opsi HTML/Java Script,terus copy kode HTML dibawah ini dan paste kan pada kolom HTML/Java Script
Klik Simpan

<i></i>

<tr> <th colspan="100%" scope="col">DAFTAR ISI</th> </tr>

<ul>

<li><a href="http://namablog.blogspot.com /"> JUDUL BLOG ANDA 1</a></li>

<li><a href="http://namablog.blogspot.com /"> JUDUL BLOG ANDA 2</a></li>

<li><a href="http://namablog.blogspot.com /"> JUDUL BLOG ANDA 3 </a></li>

<li><a href="http://namablog.blogspot.com /"> JUDUL BLOG ANDA 4</a></li>

</ul></div></div></td></tr></tbody></table></div>

Keterangan

Kode Justipy : bentuk tulisan penuh, (silahkan diganti sesuai selera centre = tengah)
Border : Ketebalan garis pinggir (silahkan diganti sesuai selera)
Daftar Isi : Judul Daftar Isi (silahkan diganti sesuai selera)
Background Green : Warna background Judul (silahkan diganti sesuai selera)
Background White : Warna background Judul Isi daftar (silahkan diganti sesuai selera)
Height : Tinggi Scroll (silahkan diganti sesuai selera)
Weignt : Lebar Scroll (silahkan diganti sesuai selera)
http://namablog.blogspot.com / : Ganti dengan alamat URL blognya kawan
JUDUL BLOG ANDA 1 : Ganti dengan Judul postingan sesuai alamat URL blognya kawan

Selamat mencoba

Cara membuat postingan diblogger

Dalam membuat postingan blog di Blogger sebaiknya persiapkan dulu artikel yang dimasukkkan di post postingan di Word Microsoft office atau tempat lainnya dan jangan lupa kode HTMLnya sehingga kita biasa copy paste artikel kita ke pos blog setelah itu lanjut kelangkah berikutnya seperti langkah cara membuat postingan blog di blogger di bawah ini.

Berikut langkah-langkahnya :

Login dulu di blogger
Sesudah anda Masuk dan melihat halaman utama Blogger lalu klik "Pos" tanda "Pensil Orange" atau klik tanda panah kebawah hitam yang berada disamping kanan seperti gambar di bawah dan arahkan krusor klik "Pos"

Selanjutnya klik "Entri Baru"

Kemudian akan muncul "Media" untuk menulis artikel, seperti gambar dibawah ini.

Keterangan

Entri (1) : Isi dengan kalimat judul postingan
Kolom pos (2): Media untuk menulis artikel
Kolom editing (3) : Untuk mengedit artikel sesuai keinginan

Setelan Entri (4)

Label: Berfungsi untuk mengkategorikan postingan Misalnya membuat judul Entri "Cerita Ketimun Emas" jadi kategorinya “cerita anak"
Jadwal: Disini ada dua pilihan apakah otomatis atau Setel tanggal dan waktu tentukan sendiri
Tautan permanen: Akan ada dua pilihan yaitu Tautan Permannen otomatis : Dipergunakan untuk membuat URL Link yang menjadi URL postingan dan Tautan permanen khusus dipergunakan untuk membuat Link Khusus (sebaiknya gunakan tautan Permanen otomatis untuk URL
Lokasi: Sebagai petunjuk dimana lokasi saat menulis artikel tersebut.
Pilihan: Untuk pengaturan tingkat lanjut dan lebih baik menggunakan pengaturan aslinya saja

Opsi Lainnya (5)

Publikasikan: Untuk mempublikasikan artikel ke blog
Simpan: Untuk menyimpan artikel dalam bentuk draft atau rancangan
Pratinjau: Untuk melihat tampilan pada blog sebelum dipublikasikan
Tutup: Untuk menutup jendela apabila tidak jadi di publikasikan sehingga tulisan akan tersimpan menjadi draf