Welcome To PeterJepiMars Blog

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Jumat, 04 Mei 2012

Cara Sembunyikan Widget Sidebar "Solusi Percepat Loading Halaman Posting "

cara menyembunyikan widget sidebar / footer pada halaman post atau post page. Tips mempercepat loading halaman blog sudah banyak di tulis oleh kalangan blogger Dan salah satu faktor yang penting dalam nge-blog adalah loading pada halaman blog,



Loading pada halaman blog ada dua kategori yaitu :

  1. Loading pada Home Page atau Halaman Utama.
  2. Loading pada Post Page atau Halaman Posting [halaman dimana kita membaca artikel secara lengkap].

Pada umumnya halaman home page berisi beberapa posting dan widget sidebar / footer dan halaman post page hanya berisi satu posting [read full] yang juga menampilkan semua widget seperti pada halaman home page.

Sidebar / footer yang tidak terlalu penting, kita sembunyikan atau tidak di tampilkan pada halaman post page, namun widget tersebut tetap akan tampil pada halaman home page adalah merupakan solusi untuk mempercepat loading pada halaman tertentu.

Berikut adalah langkah-langkahnya untuk menampilkan widget sidebar atau footer hanya pada halaman home page.
  • Login ke blogger.com
  • Pilih Design
  • Pilih Edit HTML
  • Download Full Template, untuk jaga-jaga bila terjadi kesalahan
  • Beri tanda pada kotak Expand Widget Template
Kemudian cari id atau judul widget yang ingin di tampilkan hanya pada home page.
Cari code seperti di bawah ini :












  • Save dan lihat perubahannya ketika Anda membuka halaman Post Page atau Home Page.
  • Selesai.

Selasa, 24 April 2012

Domain Gratis Dot Com

Buat temen-temen yang ingin menggunakan domain dot com tapi terbentur dana yang minim,, kaya saya ini, hehehe
saya punya info bagus ni, ada sebuah web yang menyediakan domain secara geratis tapi minim persyaratan, menurut saya sih, hehehe
soalnya syarat nya cuma,
mencari referal sebanyak 9 orang dan kita akan diberikan domain nya,
berikut rincian gambar nya,

Pendaftaran nya juga gak ribet kok, bagi yang berniat bisa mendaftar Disini

Rabu, 18 April 2012

Make A Graffiti Beautiful



Kamis, 12 April 2012

jQuery Author Threaded Comments Highlight

Apa itu Resource Hacker ??? dari judul nya saja mungkin anda sudah bisa menebak, bahwa ini merupakan Software FreeWare :D yang tugas nya.

1. Membuka source kode dari (*.exe, *.dll, *.cpl, *.ocx)
2. Merubah dan mengedit source secara langsung.
3. Memodifikasi secara langsung.

Nah 3 itu merupakan pokok penting dari Resource Hacker.
Kita ketahui dan kita pikir ? jika kita bisa membuka source dari software, berarti kita bisa membuat software itu juga :D hehehe.
Berbanggala anda pada diri anda sendiri.
Ini saya kasih SnapShot nya

Gambar di atas, saya lagi mau membuka source dari PhotoScape.
Setelah saya buka, dan saya buka table dialog, maka saya dapat kode sama tampilan nya seperti apa ? lihat gambar di bawah ini.

Okay mantap bukan ?? :-bd
Wuzup dah hehe, bagi kalian yang mau atau berminat ?
Silakan di download di sini

Download dan buka langsung aja.
Pelajari sendiri bagaimana cara pakai nya, biar anda bisa menjadi seorang master :D hehe.

Centering Elemen Vertikal Horisontal with jQuery

Artikel kali ini akan membahas tentang cara memposisikan suatu elemen agar berada tepat di tengah halaman secara seimbang baik secara vertikal maupun horisontal menggunakan jQuery. Selain itu kita akan membandingkan antara centering elemen menggunakan CSS murni dengan centering elemen menggunakan jQuery. Setelah dipahami silahkan memilih mana cara yang terbaik untuk memposisikan suatu elemen pada bagian tengah halaman. Cara ini biasanya digunakan untuk menampilkan popout baik yang berisi gambar, peringatan atau pun iklan.


CSS Centering Horisontal

Kode CSS dibawah ini merupakan cara yang paling banyak digunakan untuk memposisikan suatu elemen agar berada di tengah halaman secara horisontal namun tidak jika dilihat dari sisi vertikal.
1
2
3
4
5
.elemen{
    width: 250px;
    height: 100px;
    margin: 0 auto;
}
Kunci untuk memposisikan elemen ini ada pada kode margin: 0 auto, yang jika kita jabarkan maka; elemen memiliki jarak margin atas bawah sebesar 0, dan memiliki jarak margin kiri kanan dengan pengesetan auto. auto digunakan untuk menyesuaikan elemen secara otomatis sesuai dengan lebar halaman.

CSS Centering Horisontal dan Vertikal

Dibawah ini kode CSS yang sering digunakan untuk memposisikan elemen agar berada ditengah-tengah halaman secara horizontal dan vertikal. Namun terkadang menghasilkan posisi yang tidak simetris (jika salah perhitungan) apabila jarak diukur antara sisi kiri dengan sisi kanan, sisi atas dengan sisi bawah.
1
2
3
4
5
6
7
8
.elemen{
    width: 250px;
    height: 100px;
    position: absolute;
    margin: -50px 0 0 -125px;
    left: 50%;
    top: 50%;
}
Kunci untuk memposisikan elemen ini ada pada kode:
  1. position: absolute = ini digunakan untuk memposisikan elemen agar elemen memiliki posisi yang absolut (mutlak) terhadap halaman. Maksudnya, agar elemen tidak mengikuti pada aturan-aturan lain yang diterapkan pada elemen lain diluar dirinya.
  2. margin: -50px 0 0 -125px = ini merupakan kunci untuk memposisikan elemen. Nilai-nilai ini diperoleh dari hasil pembagian lebar dan tinggi elemen. Margin atas di beri nilai -50px, ini diperoleh dari pembagian height. Height atau tinggi di set dengan nilai 100px, maka apabila di bagi 2 (100:2) akan di peroleh nilai 50px. Nilai 50px ini yang kemudian digunakan untuk menentukan margin atas. Sedangkan margin kiri di beri nilai -125px, ini juga di perolah dari pembagian width. Width atau lebar di set dengan nilai 250px, maka apabila di bagi 2 (250:2) akan diperoleh nilai 125px. Kemudian nilai 125px ini digunakan untuk menentukan margin kiri. Namun kenapa margin kiri dan margin atas diberi nilai negatif?
  3. left:50% dan top:50% = nilai 50% digunakan untuk memposisikan elemen agar berada tepat di tengah-tengah halaman, sehingga jarak elemen dari atas halaman dan dari kiri halaman ditentukan setengahnya atau 50%. Namun harus diingat, nilai 50% ini akan membuat elemen berada tepat ditengah-tengah halaman seandainya elemen tersebut memiliki luas 1px. Sedangkan elemen yang di buat memiliki lebar 250px dan tinggi 100px.
  4. Perhatikan gambar di bawah ini! Elemen yang berwarna kuning adalah posisi elemen semula ketika semua margin (atas bawah kiri kanan) diberi nilai 0. Itulah mengapa hasil pembagian lebar (125px) dan hasil pembagian tinggi (50px) kemudian di ubah menjadi minus, tujuannya agar posisi titik tengah dari elemen benar-benar berada di tengah-tengah halaman.

jQuery Centering Horisontal dan Vertikal

Penggunaan script jQuery ini sebenarnya untuk menyederhanakan penggunaan kode CSS, sehingga ketika kita ingin memposisikan sebuah elemen tepat di tengah-tengah layar, maka tidak diperlukan perhitungan seperti halnya cara diatas (CSS Centering Horisontal dan Vertikal). jQuery akan melakukan perhitungan sendiri secara otomatis, sehingga tidak perlu lagi menuliskan nilai-nilai (margin, left, top) secara manual. Cukup dengan mendeklarasikan elemen, kemudian integrasikan elemen tersebut dengan jQuery, seperti dibawah ini:

Kode CSS
Dibawah ini adalah properti CSS untuk elemen:
1
2
3
4
.elemen{
    width:250px;
    height:100px;
}
Kode diatas hanya menentukan lebar dan tinggi dari elemen tanpa menentukan posisi elemen terhadap halaman.

Kode jQuery
Dibawah ini adalah kode jQuery untuk membuat posisi elemen otomatis di tengah halaman:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function () {
    $(window).resize(function () {
        $('.elemen').css({
            position: 'absolute',
            left: ($(window).width() - $('.elemen').outerWidth()) / 2,
            top: ($(window).height() - $('.elemen').outerHeight()) / 2
        });
    });
    $(window).resize();
});

Kerja Kode jQuery
$(window).resize
Ini terdiri dari 2 kode, kode awal berfungsi untuk merekam lebar dan tinggi halaman yang sedang dibuka secara kontinyu, dan kode yang terakhir untuk menjalankan fungsi secara kontinyu.
$('.elemen').css({
Ini digunakan untuk menambahkan poperti css pada elemen
position: 'absolute'
Ini menambahkan properti position pada elemen
left: ($(window).width() - $('.elemen').outerWidth()) / 2
Jika anda memahami CSS Centering Horisontal dan Vertikal maka kode jQuery inilah yang berfungsi untuk mengambil alih proses perhitungan manual menjadi otomatis. Silahkan perhatikan dengan seksama.
  1. left untuk menambahkan properti css pada elemen.
  2. ($(window).width() untuk mengambil lebar halaman secara kontinyu kemudian di kurangi...
  3. $('.elemen').outerWidth()) / 2 untuk mengambil keseluruhan lebar elemen termasuk margin secara kontinyu kemudian di bagi 2
Demikian selanjutnya dengan top: ($(window).height()-$('.elemen').outerHeight())/2

Simple Background SlideShow with jQuery

Selasa, 20 Maret 2012

FaceBlog Experimental Blogger Template (ver.44)

Template Preview

Download XML Template ver.44

Download widget nye : ver.44

Apa aja yang mesti diRubah?





Blogs yang udah pernah masang Template ini:

Headline News

Jumlah Pengunjung

Diberdayakan oleh Blogger.

Radio Prambors

Followers

Idhin

JS CONNECT

Fans Page

Profile



My.Google My.Facebook My.Twitter

Page Rank

Link My Friend