Trik Membuat Blog 3 Kolom, Kolom Posting di Tengah


Pertama, sedikit Ayas jelasin tentang layout blog secara umum (standart), sekilas bisa dilihat seperti gambar dibawah ini, beserta penjelasannya :


  • Yang berwarna putih adalah 'Body'
  • Berwarna kuning, disebut dengan 'outer-wrapper'
  • Warna biru adalah 'Header'
  • Warna merah adalah 'Main-wrapper', tempat postingan kita berada.
  • Warna hijau adalah 'Sidebar'
  • Terakhir, warna hitam adalah footer

Mari mulai mengedit. Silahkan menuju halaman 'Tata Letak' - 'Edit HTML'.

Yang pertama harus kita lakukan adalah mendownload template Sodara, agar jika terjadi kesalahan masih bisa di kembalikan seperti semula. Cara untuk mendownload/backup template bisa Sodara baca disini.

Sebelum kita membuat blog kita menjadi 3 kolom, kita harus tau dulu berapa lebar keseluruhan Outer-wrapper, karena outer-wrapper adalah tempat dimana main-wrapper (kolom postingan) dan sidebar berada.

Untuk mengetahui berapa lebar outer-wrapper, cari kode berikut (biasanya seperti ini) :

#outer-wrapper

Dibawahnya ada detail tentang outer-wrapper itu, misalkan :

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


Nah, width adalah lebar keseluruhan outer-wrapper. Width outer-wrapper inilah yang akan kita jadikan dasar untuk menentukan ukuran masing 2 sidebar dan kolom postingan.

Jika terlalu kecil, silahkan ubah width nya, misalkan kita ganti dengan 900px.

Jangan lupa juga untuk menyesuaikan lebar header dan footer agar sama, ganti dengan 900px juga.

Selanjutnya, karena kita akan membuat 3 kolom - kolom posting dan 2 kolom sidebar - maka kita bagi 900px untuk 3 kolom tersebut.

Misalkan, kita coba bagi 450px untuk kolom posting, 200px untuk masing-masing 2 kolom sidebar kita. Sisanya, 50px kita sediakan untuk jarak antar kolom.

Langkah selanjutnya adalah mengganti lebar masing2 kolom.

1. Kolom Posting

Cari kode :

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}


Ganti widthnya dengan 450px.

2. Kolom sidebar
Cari kode :

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}


Ganti width dengan 200px

Nah, sekarang waktunya untuk menambah 1 element untuk sidebar baru kita.

Caranya, tinggal copy kode berikut, lalu paste di atas kode #main-wrapper :

#sidebar2-wrapper {
width: 200px;
float: left;
margin-right:10px;
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 */
}


Pemberian angka '2' untuk membedakan dengan sidebar yang sudah ada.

Selanjutnya, copy kode berikut :

<div id='sidebar2-wrapper'>

<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>

</div>


Kemudian paste di ATAS kode :

<div id='main-wrapper'>

Coba save, lalu pindah ke halaman 'Tata Letak' / 'Layout' - 'Element Halaman' / 'Page Element'.

Sekarang Sodara bisa lihat, sudah ada 1 element halaman baru tercipta. Coba isi element halaman baru tersebut dengan text ato logo (klik aja 'Add Gadget' / 'Tambah Gadget'), misalnya. Kemudian save, lalu preview.

Nah, bisa kita lihat hasilnya.

Sudah jadikan blog 3 kolom dengan kolom postingan berada ditengah, diantara 2 sidebar?

Jika trick membuat blog menjadi 3 kolom dengan kolom posting ditengah ini masih belum jelas atau belum berhasil, silahkan tanya di comment aja.. Insya Allah Ayas bantu..

Happy Blogging!!

[...]

|

Menambah Page Element di Bawah Header

Kadang kita mengalami kesulitan saat ingin menambahkan elemen baru yang berada persis di bawah Header pada Blog.

Kesulitan itu kadang salah satunya disebabkan oleh template yang sudah di tentukan oleh Blogger,sedangkan kita menginginkan elemen baru yang dapat berada persis di bawah header.

Untuk itu,cobalah trik di bawah ini, oia menambah 2 kolom sekaligus di bawah header juga ada lho...

Penting :Backup dulu HTML anda kedalam Notepad,maksudnya jika nanti tidak sesuai dengan keinginan anda,Anda bisa mengembalikan lagi seperti semula.
Pilih tab Edit HTML

Lalu cari kode yang hampir sama dengan kode di bawah ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)'
type='Header'/>
</b:section>
</div>

Jika sudah ketemu,anda hanya merubah kode yang berwarna hijau diatas sehingga kode akan menjadi seperti di bawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="2" showaddelement="yes">
<b:widget id='Header1' locked='true' title='test (Header)'
type='Header'/>
</b:section>
</div>


Simpan Template,dan lihat hasilnya.

[...]

|

Cara Membuat Tulisan Klik Disini

Pada kesempatan ini saya akan membuat tutorial yaitu "Cara Membuat Tulisan Klik Disini"
Ini adalah Contohnya di sini . ingin membuat seperti itu ? kamu tinggal copy paste code di bawah ini :



note : ganti http://cayunpnj.blogspot.com dengan URl atau alamat tujuan anda.
anda juga bisa ganti tulisan Klik disini dengan kata-kata yang anda suka.
sekian dulu trik kali ini. semoga berhasil.

[...]

|

Membuat Text Area Yang Cantik

Trik ini dinamakan Membuat Text Area Yang Cantik. Kalau sobat tertarik ikuti silahkan lihat dibawah ini :

Script untuk membuatnya saya letakkan di dalam text area dibawah :























* Gimana >> anda tertarik ??


Thanks to : http://ade-tea.blogspot.com
              Jika ingin yang lebih bagus , sobat bisa utak -atikcode'a..
!.Tolong beri komentar ya. walau 1 patah kata .!



TERIMAKASIH

[...]

|

Make Back To Top Button With Scroll Smooth Jquery

Untuk kali ini saya akan menjelaskan cara membuat tombol back to top dengan dengan jQuery namun dengan adanya Effect Smoot Scroll. Artinya Ketika tombol back to top ini di KLIK, maka ketika Posisi Scroll halaman kembali keatas dengan lembut. Selain itu, proses pemasangan Back To Top ini tidak akan membuat kalian bingung alias saya akan menjelaskan secara simple proses pemasangnya.

Untuk Pembuatan Tombol back To Top ini silahkan kalian baca selengkapnya dibawah ini :

1. Login Ke blogger Kalian
2. Pilih Rancangan --> Elemen Halaman
3. KLIK tambah Gadget --> HTML/Java Script
4. Simpan Kode berikut dalam Konten HTML/Java scriptnya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://myscriptforme.googlecode.com/files/kaluhur.js" type"text/javascript"></script>

Keterangan :
Perhatikan Kode warna Biru diatas, Jika dalam HTML template kalian sudah terdapat kode tersebut, silahkan simpan kode warna merah aja.


5. Simpan Template Kalian

Tambahan :
Gambar atau Ikon Back To Top yang saya pasang pada kode tersebut adalah seperti ini,

Back To Top


Bagi kalian yang ingin merubah/mengganti gambarnya, silahkan ikuti tahap-tahapnya dibawah ini:

1. Copy kode ini dan paste pada address bar browser kalian :

http://myscriptforme.googlecode.com/files/kaluhur.js


2. Simpan kode Js tersebut ke komputer kalian
3. Klik Kanan Kode Js nya, lalu pilih EDIT / Open With Notepad
4. cari Kode berikut :

controlHTML: '<img src="http://lh4.ggpht.com/_MvLBi88bM_I/TKALCyZ0_wI/AAAAAAAABgE/a9P_kEOqO-o/to%20top.png" style="width:60px; height:30px" />'


5. Ganti kode warna merah dengan URL gambar Back To Top Kalian
6. Klik Save
7. Upload File JS nya ke Hosting Penyimpanan File, seperti Googlecode. untuk cara upload nya bisa kalian baca ARTIKEL saya DISINI.
8. Copy URL File JS nya dan simpan dalam kode pada langkah No. 4 proses pemasangan diatas.

JAngAn LupA diSimpaN ya ....

untuk gambar/ikon back to top nya silahkan kalian pilih dibawah ini atau kalian juga bisa menggunakan gambar milik kalian.

Back To TopBack To TopBack To TopBack To TopBack to topBack To Top

Keterangan :
Untuk mengambil gambar diatas, silahkan kalian KLIK KANAN pada gambar, lalu pilih COPY IMAGE LOCATION untuk mengambil URL GAMBAR.


Semoga bermanfaat dan semoga membantu. Terima kasih....

[...]

|

16 Style Vertical Menu For Blogger


Vertical Menu


Kode :


Vertical Menu


Kode :




Vertical Menu


Kode :


Vertical Menu


Kode :




Vertical Menu


Kode :

Vertical Menu


Kode :



Vertical Menu


Kode :

Vertical Menu


Kode :




Vertical Menu


Kode :

Vertical Menu


Kode :



Vertical Menu


Kode :

Vertical Menu


Kode :







Vertical Menu


Kode :

Vertical Menu


Kode :






Vertical Menu


Kode :

Vertical Menu


Kode :

Silahkan KLIK DISINI



[...]

|

Cara Membuat Link Terbuka Tanpa di Klik

Satu hal menarik adalah modifikasi soal link. Memang modifikasi soal link tak pernah habis. Kali ini saya akan memberitahu cara bagaimana membuat sebuah link terbuka tanpa klik. Biasanya tujuan link terbuka begitu ada aksi klik, tetapi dengan script ini hanya dengan menyorotnya saja link sudah terbuka.

Cara untuk membuatnya sangatlah simpel, coba perhatikan dua link di bawah ini


Uhibbukum Fillah™ I Cinta Kepada Allah I Indahnya Cinta Karena Allah

Kodenya:

<a href="http://www.uhibbukumfillah.co.cc/">Uhibbukum Fillah� I Cinta Kepada Allah I Indahnya Cinta Karena Allah</a>

Ket: link di atas coba Anda sorot saja, maka tidak akan membuka tujuan, harus di klik karena menggunakan kode link biasa

Sementara link berikut

Uhibbukum Fillah™ I Cinta Kepada Allah I Indahnya Cinta Karena Allah

Kodenya:
<a href="http://www.uhibbukumfillah.co.cc/" onMouseover="window.location=this.href">Uhibbukum Fillah� I Cinta Kepada Allah I Indahnya Cinta Karena Allah</a>

Ket: Cukup Anda sorot saja sudah membuka tujuan link

Semoga simpel tetapi bermanfaat.

[...]

|

Cara Memasang Tombol Back To Top (Kembali Ke Atas)

Halaman blog yang panjang mungkin salah satu hal yang tidak disukai oleh pembaca. Solusinya pada halaman home jangan terlalu banyak menyimpan jumlah artikel. sebaiknaya dalam halaman home mempunyai maksimal 5 atau 3 artikel dan ditambah dengan pemanfaatan fungsi read more (baca selengkapnya).

Tapi kalau memang elemen blog atau artikel yang panjang bagaimana? pembaca akan lebih malas mengscroll kembali ke atas halaman page untuk mengakses menu lain. Kalau begitu silakan saja pasang "Icon Back To Top" (tombol Icon kembali ke atas) yang memungkinkan pembaca lebih mudah kembali ke atas halaman. Tombol Icon tersebut selalu terletak pada tempat atau posisi yang tetap walaupun adanya scrolling page.

Berikut kode "Icon Back To Top" (tombol Icon kembali ke atas) dan design yang dapat Anda pilih ( designed by syilpid )
Masuk ke dasbor > tata letak > edit html > Letakan kode di atas </body>

<!-- Bact to top designed by syilpid - www.tips-fb.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopbiru.png'/></a>

<!-- Bact to top designed by syilpid - www.tips-fb.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophitam.png'/></a>

<!-- Bact to top designed by syilpid - www.tips-fb.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotophijau.png'/></a>

<!-- Bact to top designed by syilpid - www.tips-fb.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopkuning.png'/></a>
<!-- Bact to top designed by syilpid - www.tips-fb.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopmerah.png'/></a>
<!-- Bact to top designed by syilpid - www.tips-fb.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotoporange.png'/></a>
<!-- Bact to top designed by syilpid - www.tips-fb.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotoppink.png'/></a>
<!-- Bact to top designed by syilpid - www.tips-fb.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopungu.png'/></a>
selamat mencoba

[...]

|

Cara Cepat Meletakkan Script Read More

Sebelumnya saya pernah mempostingkan cara praktis membuat Read More [ di sini ]. Tapi setiap kali saya harus memotong sebuah postingan, saya harus direpotkan lagi untuk mencari-cari dua buah script yang berfungsi untuk memotong postingan tersebut.

Dua buah script yang saya maksud tersebut tidak lain adalah script <span class="fullpost"> yang berfungsi untuk memotong postingan, dan satu lagi adalah script </span> yang akan diletakkan di akhir postingan.
Dan mulai detik ini saya tidak mau lagi direpotkan lagi untuk mencari-cari dua script tersebut, karena saya sudah menemukan cara untuk menemukan secara otomatis dua script tersebut di dalam halaman postingan ketika saya akan memulai menulis sebuah postingan. Dan hari ini saya akan berbagi dengan blogger-blogger sekalian tentang kabar baik ini.

Untuk itu silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog anda
2. Klik tab Pengaturan
3. Klik tab Format
4. Scroll ke halaman bawah dan temukan kolom Template Posting
5. Pastekan dua script berikut ini ke dalam kolom kosong tersebut

<span class="fullpost">
</span>

6. Klik Simpan Setelan
7. Selesai

Nah, sekarang setiap kali anda akan membuat sebuah postingan, dua buah script tersebut secara otomatis sudah lebih duluan nyampe di sana dari anda.

Selamat mencoba, semoga bermanfaat

[...]

|

Langganan: Postingan (Atom)
Sweet Heart © 2008 Template by:
faris vio