Menambah Elemen Sidebar Blogspot

Menambah Elemen Sidebar Blogspot

Menambah kolom sidebar blogspot sebenarnya agak sulit namun asik. Kalau kita memilih template minima maka akan terdapat dua kolom saja yaitu kolom pada bagian postingan dan kolom pada bagian sidebar. Banyak blogger yang suka hanya dua kolom saja namun ada juga beberapa blogger yang suka blog dengan tiga sidebar atau bahkan empat sidebar.

Sebenarnya kalau dicari template blog untuk blogspot yang tiga sidebar dan empat sidebar sangat banyak dan tinggal download saja dan dipakai.Namun bagaimana kalau kita mencoba modifikasi template default minima menjadi beberapa sidebar. Tentunya ada rasa kepuasan tersendiri bukan? Itung-itung buat belajar dan nambah kemampuan trik blogspot yang kita miliki.

Elemen pada template blogger ada tiga, yaitu:

    * Elemen Header

    * Elemen Outer

    * Elemen Footer

Untuk Elemen Outer masih dibagi menjadi dua bagian:

Elemen Main, elemen ini adalah elemen tempat kita menyimpan posting artikel. Jadi bila kita membuat artikel posting, maka postingan akan masuk ke bagian ini.Elemen Sidebar, elemen ini adalah tempat untuk menambahkan asesoris lainnya untuk mempercatik blog danmenambah widget seta tools lainnya.

Untuk siapa saja yang suka berkreasi dengan kode-kode HTML, inilah salah satu cara terbaik untuk mengasah ilmu HTML. Karena dengan membuat elemen sidebar blogspot tambahan, maka kamu akan dihadapkan dengan kode HTML.

Menambahkan kolom sidebar berarti perlu memperhatikan kode-kode pada Outer Wraper berikut.

    /* Outer-Wrapper

    ------------------------------------------ */

    #outer-wrapper {

    width: 660px;

    margin:0 auto;

    padding:10px;

    text-align:left;

    font: $bodyfont;

    }

    #main-wrapper {

    width: 410px;

    float: left;

    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 */

    }

    #sidebar-wrapper {

    width: 220px;

    float: right;

    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 */

    }

Dengan menambahkan elemen sidebar baru berarti secara logika maka akan terjadi penambahan nilai lebar keseluruhan pada Outer Wraper. Mengapa? Karena seperti yang saya katakan tadi, bahwa outer wraper terbagi atas dua bagian yaitu main wraper dan sidebar wraper.

Sekarang bagaimana cara menambahkan elemen sidebar baru atau kolom baru di blogspot?

Pertama sekali harus diperhitungkan berapa lebar dari kolom baru yang akan kita buat. Misalnya kita ambil nilai lebar sidebar baru 220 pixel. Maka secara keseluruhan lebar outer wraper menjadi kira-kira 410 pixel + 220 pixel + 220 pixel + 20 pixel = 870 pixel. Bisa ditambahkan 10 pixel lagi untuk sela pada outer wraper sehingga lebar keseluruhan adalah 880 pixel.

Kode penambahan sidebar baru dengan nilai di atas adalah:

    #sidebarbaru-wrapper {

    width: 220px;

    float: right;

    padding-left:10px;

    word-wrap: break-word;

    overflow: hidden;

    }

Setelah ditambahkan maka kodenya akan menjadi seperti ini:

    /* Outer-Wrapper

    ------------------------------------------ */

    #outer-wrapper {

    width: 880px;

    margin:0 auto;

    padding:10px;

    text-align:left;

    font: $bodyfont;

    }

    #main-wrapper {

    width: 410px;

    float: left;

    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 */

    }

    #sidebar-wrapper {

    width: 220px;

    float: right;

    padding-left:10px; /* yang ini adalah tambahan untuk jarak sela */

    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 */

    }

    #sidebarbaru-wrapper {

    width: 220px;

    float: right;

    padding-left:10px;

    word-wrap: break-word;

    overflow: hidden;

    }

Kode-kode di atas merupakan langkah pertama yang harus ditambahkan. Berikutnya adalah menambahkan kode id untuk elemen sidebar baru tersebut. Untuk kode id sidebar sebelum penambahan kolom adalah seperti ini:

   

   

   

   

   

   

Karena kita telah menambahkan elemen baru pada sidebar maka kita juga harus membuat id sidebar baru tersebut pada bagian body. Kodenya adalah ini:

   

   

   

Selanjutnya adalah menyatukan kode sidebar baru tersebut pada kode id side bar yang sebelumnya, sehingga kodenya menjadi seperti ini:

   

   

   

   

   

   

   

   

   

Selesai dan kolom baru atau elemen baru pada sidebar blogspot telah ditambahkan. Nilai dari header dan footer sebaiknya disamakan dengan nilai outer wrapper tersebut yaitu sebesar 880 pixel. Sehingga menjadi sama dan lebih klop. Mudahkan? Ok, mari bermain kode HTML dengan blog yang bukan blog utama kita. Buatlah blog baru sebagai blog uji coba kamu sebagai bahan percobaan untuk memodifikasi sidebar template minima blogspot.

Loggin di blogger » Klik Layout » Klik Edit HTML »

Jangan memberi tanda centang pada kotak kecil di samping tulisan Expand Widget Template. Tips untuk memudahkan mencari kode berikut, dengan tekan Ctrl F atau F3 pada kebor maka akan muncul tools kotak cari pada layar bawah monitor komputer.

Cari kode di bawah ini:

    #header-wrapper {

    width:660px;

    margin:0 auto 10px;

    border:1px solid $bordercolor;

    }

Ganti nilai 660px menjadi 880px, sehingga kodenya jadi seperti ini :

    #header-wrapper {

    width:880px;

    margin:0 auto 10px;

    border:1px solid $bordercolor;

    }

Cari kode seperti di bawah ini :

    #outer-wrapper {

    width: 660px;

    margin:0 auto;

    padding:10px;

    text-align:left;

    font: $bodyfont;

    }

Ganti nilai 660px menjadi 880px, sehingga kodenya menjadi seperti ini :

    #outer-wrapper {

    width: 880px;

    margin:0 auto;

    padding:10px;

    text-align:left;

    font: $bodyfont;

    }

Cari kode seperti di bawah ini :

    #sidebar-wrapper {

    width: 220px;

    float: right;

    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 */

    }

 

 

Copy kode berikut dan paste persis di bawah kode di atas :

    #sidebarbaru-wrapper {

    width: 220px;

    float: right;

    padding-left:10px;

    word-wrap: break-word;

    overflow: hidden;

    }

Cari kode seperti di bawah ini :

    #footer {

    width:660px;

    clear:both;

    margin:0 auto;

    padding-top:15px;

    line-height: 1.6em;

    text-transform:uppercase;

    letter-spacing:.1em;

    text-align: center;

    }

Ganti nilai 660px menjadi 880 px, sehingga kodenya akan seperti ini :

    #footer {

    width:880px;

    clear:both;

    margin:0 auto;

    padding-top:15px;

    line-height: 1.6em;

    text-transform:uppercase;

    letter-spacing:.1em;

    text-align: center;

    }

Cari kode di bawah ini :

   

   

   

   

   

   

Copy kode berikut, lalu paste persis di bawah kode yang di atas :

   

   

   

Klik Simpan Template dan selesai.

Untuk melihat hasilnya, tinggal klik Elemen Halaman dan lihat apakah kolom kamu sudah menjadi tiga elemen. Bila sudah, kamu bisa tambahkan widget baru pada sidebar tersebut dan lihat hasilnya. Sebenarnya kode-kode di atas masih bisa dirubah lagi sesuai dengan selera. Tinggal dibutuhkan kesabaran dan kreatifitas saja. Sebagai tips, jangan pernah takut berhadapan dengan kode HTML.

Belajar dan belajar adalah cara termudah untuk berkreasi. Sumber bacaan dari banyak artikel di internet mengacu pada tulisan Kang Rohman di Tips Menambah Kolom Pada Template Baru. Untuk template default minima juga bisa menambahkan elemen baru di atas dan di bawah elemen kolom posting. Menambah elemen di bawah header. Menambah elemen di atas footer.

Pokoknya berani bereksperimen dan coba-coba.

Pengen tahu lebih jelas cara-cara kunjungin aja Disini

Pasang Yahoo! Messenger Pingbox di Blogger:

Pasang Yahoo! Messenger Pingbox di Blogger:

1. Masuk ke http://messenger.yahoo.com/pingbox. Di sana anda dapat mengatur YM anda dengan pilihan latar belakang, tema atau warna dan gaya teks.
2. Klik 'Create a Pingbox'.
3. Tambahkan nama anda yang akan ditampilkan pada Pingbox. Sebaiknya gunakan nama yang "berbeda" dengan account Yahoo! ID.
4. Tuliskan pesan ketika anda sedang online dan anda juga bisa menulis pesan ketika sedang offline.
5. Simpan Pingbox dan berikan sebuah nama. Anda akan melihat nama ini terdaftar sebagai kelompok dalam Daftar Kontak Anda jika anda menggunakan versi terbaru dari Yahoo! Messenger. Sebaiknya berikan nama Pingbox dengan nama situs yang anda hubungkan misalnya : Dimenk, karena anda dapat mempunyai lebih dari satu buah Pingbox yang dapat anda hubungkan ke beberapa situs web lainnya.
6. Centang checkbox 'Require visitors to enter Nickname to send IM' agar pengunjung yang chat dengan anda harus menulis nickname-nya.
7. Klik Save.
8. Sign in menggunakan Yahoo! ID anda.
9. Copy kode HTML yang diberikan dan paste ke situs yang anda inginkan, misalnya blog anda. Namun sebelumnya anda masih bisa mengedit ukuran / size dari YM Pingbox tersebut.
10. Sekarang anda dapat memilih jaringan sosial, blog atau halaman web pribadi lainnya di mana anda ingin meletakkan Pingbox ini. Untuk memasangnya ke blogger, anda pilih Tata Letak - Elemen Halaman - Tambah Gadget - Pilih HTML/Javascript dan paste kode tadi di sana dan klik Simpan. Lihat hasilnya.

Perhatian : Yahoo Mesengger Pingbox hanya bisa digunakan untuk versi YM 9.0 ato YM 10
--Selamat mencoba--

LIVE BORDERLESS :: List Ide, Kategori Non Blogger

LIVE BORDERLESS :: List Ide, Kategori Non Blogger

Presentasi Fiqh 4

Check out this SlideShare Presentation:

Presentasi Fiqh 4

View more presentations from lukmanul.

Presentasi Fiqh 3

Check out this SlideShare Presentation:

Presentasi Fiqh 3

View more presentations from lukmanul.

Presentasi Fiqh 2

Check out this SlideShare Presentation:

Presentasi Fiqh 2

View more presentations from lukmanul.

Presentasi Fiqh 1

Check out this SlideShare Presentation:

Presentasi Fiqh 1

View more presentations from lukmanul.

Ringkasan Jenazah

Check out this SlideShare Presentation:

Ringkasan Jenazah

View more presentations from purnama irawansyah.

Tata Cara Shalat Rasul Utk Lelaki Perempuan

Check out this SlideShare Presentation:

Tata Cara Shalat Rasul Utk Lelaki Perempuan

View more presentations from yayak.

Membuat Walpapper Pelangi

Mencoba bikin walpapper pelangi yang menyerupai pelangi.
Trik ini tidaklah memerlukan langkah-langkah yang panjang dan ruwet untuk membuatnya, cukup hanya dengan tool MS Paint yang telah tersedia di Windows XP klo di Window lain gak tau ya... (maklum-newbie)
Mari kita mulai dan ikuti langkah-langkah berikut:
1. Mulai dari menu start, klik Run.
2. Dari jendela Run, ketik MSPAINT, klik Ok atau tekan Enter.
3. Saat jendela aplikasi Paint terbuka, klik Image, klik Attributes.
4. Ganti nilai Width dengan nilai 14, dan ubah nilai Height menjadi 1, klik Ok.
5. Klik icon magnifier yang bergambar kaca pembesar pada bagian kiri jendela kerja, 
    klik 8x untuk memperbesar gambar.
6. Sekarang, klik icon pencil yang bergambar pensil, dilanjutkan dengan meng-klik pilihan warna
    secara acak yang tersedia di bagian bawah jendela kerja. Segera isi pixel per pixel pada gambar
    dengan warna yang berbeda yang sesuai dengan selera kita.
7. Jika seluruh area pada gambar telah terisi dengan warna, klik menu File, Save.
8. Beri nama gambar yang telah kita kerjakan. 
    Pada contoh ini nama gambar adalah "pelangi.bmp", klik Save.
9. Klik menu File, klik Set As Background (Centered).
10. Tutup jendela aplikasi Paint dan lihatlah sekarang pada wallpaper di komputer, 
   corak pelangi yang indah telah menghiasi layar kite

Poly Anak

Yuk Jah lungo nang dokter anak ambek nggendhong bayek.
Gak sui Yuk Jah diceluk mlebu, tibake doktere guanteng.

Mari merikso bayeke, doktere takok nang Yuk Jah, "Ning, arek iki ngombe ASI opo susu botol ?"

"ASI pak dokter . . ." jare Yuk Jah.

"Wah lek ngono tulung aku prelu merikso susu sampeyan, " jare doktere.

Yuk Jah nurut, klambine dibukak.
Mari ngono ambek doktere diperikso alon-alon.
Yuk Jah seneng ae, soale enak ambek doktere kan ganteng pisan.

Wis mari merikso, doktere ngomong ngene, "Waduh Ning, yo pantes bayek sampeyan kuru, wong sampeyan iku gak ndhuwe susu."

Jare Yuk Jah, "Dhudhuk aku sing nyusoni pak dokter ".

"Lha sopo maneh lho ? ." doktere bingung.

"Aku iki babysitter e dok . ."

Tahap belajar

Lagi belajar nge-BLOG

Aku ingin bisa ajarin dong..