English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
MENU STATUS YM PKT FB

POSTING BLOG TAMPIL DENGAN BORDER MELENGKUNG

Setelah tutorial menampilkan postingan dalam bentuk kotak , sekarang anda dapat menampilkan border post dalam bentuk kotak yang sudutnya melengkung. Sebagai contoh, coba anda perhatikan border post EPG Studio yang telah diatur sehingga tampilannya berupa kotak melengkung pada keempat sudutnya.
Caranya, anda hanya perlu menambahkan sedikit kode pada bagian post, maka blog andapun akan tampil dengan border melengkung.
Ikuti langkah=langkah dibawah ini :
  1. Masuk ke Blogger.
  2. Pilih Rancangan kemudian pilih Edit HTML.
  3. Cari kode seperti dibawah ini :

    post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em
  4. Copy kode dibawah ini, dan paste tepat dibawahnya

    • Untuk tampilan border melengkung pada seluruh (4) sudut :

      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -khtml-border-radius: 10px;
      border-radius: 10px
    • Untuk tampilan border melengkung pada 2 sudut bagian atas :


      -moz-border-radius-topleft: 10px;
      -moz-border-radius-topright: 10px;
      -webkit-border-radius-topleft: 10px;
      -webkit-border-radius-topright: 10px;
      -khtml-border-radius-topleft: 10px;
      -khtml-border-radius-topright: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    • Untuk tampilan border melengkung pada 1 sudut bagian kiri atas :

      -moz-border-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -webkit-border-radius-topleft: 10px;
      -khtml-border-radius-topleft: 10px;
      border-top-left-radius: 10px
    • Untuk tampilan border melengkung pada 2 sudut bagian bawah :

      -moz-border-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      -moz-border-radius-bottomright: 10px;
      -webkit-border-radius-bottomleft: 10px;
      -webkit-border-radius-bottomright: 10px;
      -khtml-border-radius-bottomleft: 10px;
      -khtml-border-radius-bottomright: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    • Border melengkung pada bagian atas kiri dan kanan bawah

      -moz-border-radius-topleft: 10px;
      -moz-border-radius-bottomright: 10px;
      -webkit-border-radius-topleft: 10px;
      -webkit-border-radius-bottomright: 10px;
      -khtml-border-radius-topleft: 10px;
      -khtml-border-radius-bottomright: 10px;
      border-top-left-radius: 10px;
      border-bottom-right-radius: 10px;
  5. Setelah selesai menambahkan kode border diatas, klik tombol Simpan Template.
  6. Lihat perubahan blog anda sekarang.


Trik diatas dapat juga anda gunakan pada bagian blog yang lain, misalnya sidebar, komentar pengunjung atau bagian apa saja yang penting anda memahami dan mengetahui kode HTML bagian-bagian tersebut.
Selamat mencoba, semoga bermanfaat...!!!
0 komentar

MENGUBAH BACKGROUND JUDUL POSTINGAN

Setelah lebih kurang 3 jam mengotak-atik template, akhirnya dapat juga mengganti background pada judul postingan. Sebenarnya cara itu sangat mudah apabila tahu kode yang harus diubah atau ditambah.
Anda tidak perlu melakukan hal yang sama berjam-jam duduk didepan komputer hanya untuk mencari cara agar bacground judul postingan pada blog anda bisa diganti dengan warna pilihan yang cocok dengan tata warna blog anda, karena EPG Studio telah mendapat cara yang dapat anda ikuti.
Simak caranya...!!!
  1. Masuk ke Blogger dengan ID anda
  2. Pilih Tata Letak
  3. Pilih Edit HTML
  4. Backup dulu template anda kalau takut gagal
  5. Kotak padaExpand Template Widget tidak perlu dikasih tanda contreng
  6. Cari kode ini :

    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    }
  7. Ganti kode tadi dengan kode dibawah ini :

    .post h3 {
    margin:.25em 0 0;
    padding:4px 4px 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    background:#0066CC;
    border:3px solid #C3D9FF;
    }

    Dari kode diatas menunjukan background postingan berwarna biru tua dan border berwarna biru muda. Ganti kode warna dengan warna kesukaan anda dan border pasang di angka 0 jika anda tidak menginginkan adanya border.
  8. Setelah anda selesai melakukan perubahan yang diperlukan, klik tombol simpan template
  9. Lihat Blog anda sekarang.
0 komentar

MENGHILANGKAN BORDER IMAGE PADA POSTINGAN

Image pada suatu post sangat diperlukan untuk lebih memperjelas pesan yang ada didalamnya. Namun terkadang penampilan image menjadi kurang menarik apabila dikelilingi oleh garis / border.
Sebagai contoh :



Coba anda bandingkan image diatas dengan image dibawah ini :


Kalau anda lihat perbedaan tadi mungkin anda berpendapat "lebih bagus penampilan image yang tidak mempunyai border. Atau mungkin juga sebaliknya.

Bagi anda yang tidak suka image yang mempunyai boder pada penampilan image suatu postingan, anda dapat menghilangkannya dengan mengikuti langkah-langkah berikut :

  1. Sign ke Blogger dengan ID anda.
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Template Lengkap, simpan template pada komputer anda untuk backup data agar jika gagal anda dapat mengembalikan kepada keadaan semula
  5. Klik kotak kecil di samping tulisan Expand Template Widget
  6. Tunggu beberapa saat sampai proses selesai
  7. Cari kode HTML seperti dibawah ini :

    .post img {
    padding:4px;
    border:1px solid $bordercolor;
    }
  8. Ubah angka 1 pada boder dengan angka 0, sehingga kodenya menjadi seperti ini :(perhatikan yang berwarna merah)

    .post img {
    padding:4px;
    border:0px solid $bordercolor;
    }
  9. Klik tombol Simpan Template
  10. Selesai/
0 komentar

MENGHAPUS TANGGAL DAN LABEL POST

Munculnya beberapa tulisan pada bagian bawah postingan (post footer) kadang-kadang mengganggu keindahan blog. Untuk itu pihak Blogger memberi pilihan kepada penggunanya untuk memilih mana yang mau ditampilkan dan mana yang mau disembunyikan.
Opsi Laman Entri secara default banyak sekali embel-embel yang ditampilkan seperti : Tanggal Entri, Diposkan oleh, label, komentar dan lain sebagaimya.
Jika anda merasa tampilan itu mengganggu keindahan blog, anda dapat menyembunyikan semua itu tanpa harus mengubah kode-kode tertentu yang memang kadang-kadang menyulitkan.
Cara menyembunyikannya mudah sekali, anda tinggal menghilangkan tanda cek pada kotak Opsi Laman Entri, dengan langkah-langkah sebagai berikut.
  1. Masuk ke Blogger.
  2. Pilih Rancangan bagian Elemen Halaman.
  3. Klik Edit pada bagian Postingan Blog.Perhatikan gambar :

  4. Setelah muncul jendela pop up tentang Opsi laman Entri, silahkan anda kasih tanda cek pada kotak kecil disamping kiri untuk menampilkannya dan hilangkan tanda cek untuk menyembunyikannya. Perhatikan gambar :

  5. Setelah selesai, klik tombol Simpan.
  6. Lihat hasilnya.
  7. Cara ini lebih efektif dibanding dengan mengotak-atik kode HTML pada template, sebab suatu waktu nanti akan mudah mengembalikannya jika diperlukan.

Jika dengan cara ditas belum berhasil (mungkin disebabkan template blog anda sudah terlalu sering dimodifikasi), anda dapat melakukan langkah-langkah dibawah ini :
  • Masuk ke Rancangan bagian Edit HTML.
  • Kasih tanda cek pada kotak Expand Template Widget.
  • Jangan lupa Backup dulu Template anda, jika takut gagal.
  • Kode untuk tampilan label :

    <span class='post-labels'>
    <b:if cond='data:post.labels'><data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:label.isLast != "true"'>,
    </b:if></b:loop></b:if>
    </span>
  • Kode untuk Diposkan oleh :

    <span class='post-author'>
    <b:if cond='data:top.showAuthor'>
    <data:top.authorLabel/> <data:post.author/>
    </b:if>
    </span>
  • Kode untuk tulisan jam :

    <span class='post-timestamp'>
    <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
    <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
    </b:if>
    </b:if>
    </span>
    /li>
  • Hapus (delete) kode-kode diatas
  • Klik tombol Simpan Template.
  • Lihat Blog anda.
  • Selamat mencoba, semoga bermanfaat.
0 komentar

MENGATUR TAMPILAN JUDUL POSTINGAN

Tampilan judul postingan artikel merupakan bagian dari blog yang selalu dilirik oleh para pengunjung ketika mereka mencari artikel yang mereka butuhkan. Tentu saja sebagai pemilik blog selalu ingin menampilkan kesan "wah" pada tampilan blog secara keseluruhan termasuk tampilan judul postingan artikel.
Berikut ini beberapa tips untuk mengatur penampilan judul postingan artikel. Silahkan anda simak.

Secara default kode css untuk judul postingan seperti dibawah ini :

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Dari kode post h3 diatas, dapat ditambahkan beberapa kode lainnya, seperti :
  1. Background (latar belakang) yang diikuti dengan dengan kode warna atau jika mau bisa ditambahkan asesoris berupa gambar. Kodenya seperti ini :

    background:#31363F; (background tanpa gambar)

    Jika ingin ditambahkan gambar, kodenya sperti ini :

    background:#31363F url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TXd4bGFwdQI/AAAAAAAAB38/Y4wr7ccecso/s128/thbluestar2.gif)no-repeat center left;
    1. Ganti kode warna #31363F dengan warna pilihan anda.
    2. Ganti alamat gambar https://lh4.googleusercontent.com/_1j80TgNqd_8/TXd4bGFwdQI/AAAAAAAAB38/Y4wr7ccecso/s128/thbluestar2.gif dengan gambar dari koleksi anda (disarankan ukuran gambar disesuaikan dengan ukuran judul postingan/ukuran kecil).
    3. Kode norepeat center left berarti gambar tersebut tampilannya hanya satu/tidak diulang, dengan letak dibagian kiri tengah.
  2. Border/garis disekeliling judul postingan dengan kode seperti ini :

    border:3px solid #2F323D;

    Border diatas memiliki ukuran 3px dengan style solid dan diakhiri kode warna dari border. Silahkan anda gati sesuai keinginan. Kode solid dapat anda ganti dengan : double, grove, dotted, outset dan ridge. Agar paham tentang istilah style border, silahkan anda kunjungi Tentang Border
  3. Agar tampilan border melengkung, dapat anda tambahkan kode seperti dibawah ini :

    border:3px solid #2F323D;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
  4. Huruf pada judul postingan dapat anda atur dengan huruf yang ingin anda tampilkan. Sebagai pedoman, coba anda buka MS Word untuk melihat jenis huruf (harus diingat, tidak seluruh huruf pada MS Word dapat ditampilkan pada blog). Jadi anda harus memilih/mencoba jenis huruf yang bisa ditampilkan. Kodenya seperti ini :

    font-family:castellar

    Ganti kata castellar dengan huruf yang ingin ditampilkan.
  5. Ubah kode padding pada contoh diatas dengan kode ini padding: 4px 4px 4px 4px; untuk mengatur agar judul postingan tidak berbenturan dengan bagian pinggir dari judul postingan. Kode diatas menunjukan bahwa jarak judul postingan dari bagian atas, bawah, kanan dan kiri memilik jarak yang sama 4px. Anda ubah ukurannya sesuai keperluan.
  6. Tambahkan juga ukuran tinggi/height dari judul postingan jika memang diperlukan (terutama untuk postingan dengan kalimat yang tidak mencukupi pada tempat judul postingan). Kodenya seperti ini :

    height:35px;
  7. Kode-kode lainnya yang dapat anda tambahkan diataranya :

    text-align:center; untuk mengatur letak huruf, dapat anda ganti dengan left, right atau justify.

    text-transform:uppercase; kode agar tampilan judul postingan tampil dengan huruf kapital.

    font-size:100%; (ukuran normal) untuk mengatur ukuran huruf, jika ingin lebih besar ganti angkanya dengan angka yang lebih besar atau kebalikannya.

    font-weight:bold; untuk mengatur agar huruf lebih tebal.
  8. Deretan kode-kode ditas jika disatukan akan menjadi seperti ini :

    .post h3 {
    text-align:center;
    margin:.25em 0 0;
    padding:4px 4px 4px 4px;/*atas kanan bawah kiri */
    font-size:100%;
    font-family:castellar;
    text-transform:uppercase;
    font-weight:bold;
    line-height:1.4em;
    height:35px;
    color:$titlecolor;
    background:#31363F url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TXd4bGFwdQI/AAAAAAAAB38/Y4wr7ccecso/s128/thbluestar2.gif)no-repeat center left;
    border:3px solid #2F323D;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    }


Selamat mencoba, semoga bermanfaat.
0 komentar

MENEMPATKAN POSTINGAN SELALU TAMPIL DI HALAMAN MUKA

Dari sekian banyak postingan/artikel pada blog anda, mungkin salah satunya merupakan artikel yang banyak digemari pengunjung atau artikel terlaris pada blog anda.
Maka sangat disayangkan apabila postingan tersebut tergeser tempatnya karena bertambahnya postingan-postingan baru, yang lama kelamaan akan berada dihalaman belakang.
Anda tidak perlu khawatir, sebab ada cara untuk menampilkan agar postingan selalu tampil pada halaman muka.

Ikuti cara membuatnya.
Langkah-langkah umtuk menempatkan postingan selalu berada di halaman muka :
  1. Masuk ke Blogger dengan ID anda.
  2. Pilih Edit Entri.
  3. Setelah berada di halaman Edit Entri, pilihlah postingan mana yang akan selalu ditampilkan di halaman muka.
  4. Klik Edit pada postingan yang dipilih.
  5. Lihat dibagian bawah kolom postingan, Klik Opsi Entri. Maka akan muncul komentar Pembaca, Link Balik dan Tanggal dan Jam Entri.
  6. Ubahlah tahun pada Tanggal dan Jam Entri dengan tahun yang akan datang, misalnya 2010 atau kalau ingin dalam waktu yang lebih lama gantilah angka tahun dengan beberapa tahun kedepan, misalnya 2050.
  7. Klik Terbitkan Entri .
  8. Lihat Blog anda sekarang.
0 komentar

MENAMPILKAN VARIASI HURUF PADA POSTINGAN

Pengaturan huruf yang akan ditampilkan pada postingan dapat dilakukan dengan memilih opsi "Tulis" pada saat membuat postingan, karena jika pada opsi "Edit HTML", jenis huruf yang akan ditampilkan tidak akan muncul.
Hanya pada cara diatas, pilihan hurufnya terbatas (ada delapan huruf) yaitu : Arial, Courier, Georgia, Lucida Grande, Times, Trebuchet, Verdana dan Webdings.
Untuk lebih mengoptimalkan huruf pada postingan, anda juga dapat menggunakan jenis-jenis huruf yang terdapat pada MS word.

CARA MERAPKANNYA

Gunakan kode dibawah ini untuk menampilkan huruf yang anda pilih :

<span style="font-family:Bradley Hand ITC;">Bradley Hand ITC</span>

Kode diatas akan tampil seperti ini :

Bradley Hand ITC

Ganti kode yang berwarna kuning dengan jenis huruf yang ingin anda tampilkan.

Contoh lainnya :
  1. Bradley Hand ITC
  2. Bookman Old Style
  3. Arial Rounded MT Bold
  4. Calisto MT
  5. Bauhaus Md BT
  6. Americana BT
  7. Calligrapher
  8. Monotype Corsiva


Jika anda ingin megubah ukuran dan warna huruf, perhatikan kode dibawah ini :

<span style="color:#F4F00B;font-family:Monotype Corsiva;font-size:180%;" >Monotype Corsiva</span>

Keterangan :
  • color:#F4F00B; = kode warna huruf. Ganti dengan kode warna yang anda inginkan.
  • font-family:Monotype Corsiva; = jenis huruf yang tampil. Ganti dengan jenis huruf yang ingin anda tampilkan.
  • font-size:180% = ukuran huruf. Ganti dengan ukuran yang diingikan.


Jadinya akan seperti ini :
Monotype Corsiva

Selamat mencoba, semoga bermanfaat.
0 komentar

MENAMPILKAN SCROLL PADA POSTINGAN

Sebenarnya tips ini telah dibuat beberapa bulan yang lalu (dalam bentuk draft), atas pertanyaan dari salah satu pengunjung EPG Studio. Tapi karena tips ini jarang yang menampilkan pada blog, maka postingan tersebut tetap dalam bentuk draft. Pada waktu admin EPG Studio melakukan Blogwalking, secara kebetulan ketemu sebuah blog yang pada postingannya menggunakan scroll, lalu teringat akan draft yang belum sempat dipublikasikan. Jadi bagi anda yang ingin postingannya memiliki scroll, silahkan ikuti tips dibawah ini.
  • Masuk ke Blogger
  • Pilih Rancangan kemudian klik Edit Template
  • Cari kode ini :

    /* Posts
    -----------------------------------------------
    */
  • Scroll sedikit kebawah sampai ketemu kode ini :

    .post {
    line-height: 1.4;
    font-size: 110%;
    position: relative;
    }
  • Atau jika tidak ketemu (mungkin templatenya berbeda), cari kode ini :

    .post-body {
    line-height: 1.4;
    font-size: 110%;
    position: relative;
    }
  • Tambahkan kode dibawah ini :
    height:150px;
    overflow:auto;
  • Susunanya jadi seperti ini :

    .post {
    line-height: 1.4;
    font-size: 110%;
    position: relative;
    height:150px;
    overflow:auto;
    }
  • Perhatikan cara penempatannya, yang berwarna merah merupakan kode yang ditambahkan
  • Ubah angka pada height untuk menyesuaikan dengan keperluan.
  • Klik tombol Simpan Template.
  • Selesai
0 komentar

MENAMPILKAN POSTINGAN MULTI KOLOM

Postingan artikel secara default, hanya menampilkan satu kolom berderet kebawah sesuai jumlah postingan yang telah kita atur. Hal itu mengakibatkan jumlah postingan yang ditampilkan pada halaman utama dan halaman-halaman berikutnya tidak bisa terlalu banyak karena akan terlalu panjang kebawah.
Solusinya, anda dapat mengatur halaman postingan menjadi berderet ke bawah juga berderet kesamping, atau dalam istilah lainnya postingan tampil dalam bentuk kolom-kolom.
Cara menapilkannya mudah, hanya untuk membuat tampilan menjadi terlihat rapih, memerlukan waktu yang agak lama, sebab ukuran yang kita buat bisa terlalu lebar atau terlalu kecil sehingga tampilan postingan akan menjadi amburadul.
Jika terlalu lebar, postingan akan tetap berjejer kebawah serta di sebelah kanannya akan ada ruang yang masih kosong, dan apabila terlalu kecil postingan akan berderet kesamping juga kebawah tetapi dibagian kanan juga akan ada ruang kosong. Sebab itu tadi, pengaturannya akan memakan waktu agak lama unyuk menempatkan postingan sesuai dengan lebar kolom yang tersedia.

Demo : Lihat postingan pada EPG Studio. Kekanan muat 2 postingan dan kebawah muat 5 postingan.
Disarankan, gantilah fasilitas Read More blog anda dengan : READ MORE OTOMATIS , agar jumlah karakter pada halaman muka dan halaman berikutnya sama.

Jika anda ingin membuat tampilan seperti pada postingan EPG Studio, silahkan ikuti langkah-langkahnya.
  • Masuk ke Blogger.
  • Pilih Rancangan bagian Edit HTML.
  • Backup dulu template anda, jika takut gagal.
  • Cari kode seperti dibawah ini :(kode dibawah merupakan kode post yang belum diubah/masih asli)

    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }
  • Tambahkan width/lebar sesuai dengan yang ingin anda tampilkan. Secara utuhnya kode post jadi seperti ini :

    .post {
    width:274px;/*setengah lebar main wrapper anda*/
    float:left;
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }
  • Berikutnya cari kode seperti dibawah ini :

    .post-body {
    margin:0 0 0.75em;
    overflow:hidden
    margin:0 0 .75em;
    line-height:1.6em;
    }
  • Ubah kode tersebut menjadi seperti dibawah ini :

    .post-body {
    margin:0 0 0.75em;
    height:255px; /*ganti sesuai dengan keinginan*/
    overflow:hidden
    margin:0 0 .75em;
    line-height:1.6em;
    }
  • Cari kode </head> kemudian copy kode dibawah dan paste tepat diatasnya . Fungsi kode ini agar waktu dibuka lebar postimgan akan sama dengan ukuran main wrapper anda, jadi bukan ukuran yang diatur pada bagian post diatas.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    .post {
    width:580px; /*samakan dengan width main wrapper*/
    margin:.5em 5px 1.5em 3px;
    }
    .post-body {
    height:100%;
    }
    </style>
    </b:if>
  • Klik tombol Simpan Template.
Jika tampilan masih belum sesuai dengan yang anda harapkan, anda harus kembali ke Edit HTML untuk mengubah kedua ukuran yang ditambahkan tadi.
  1. Jika postingan hanya berderet kebawah sedangkan disebelah kanan masih ada ruang kosong, itu menunjukkan width-nya terlalu besar, silahkan anda kecilkan ukuran width-nya.
  2. Jika postingan sudah berderet kesamping juga berderet kebawah, tapi di sebelah kanan masih ada ruang kosong, itu menunjukkan width-nya terlalu kecil, silahkan anda tambah width-nya.
  3. Anda harus melakukan berulang-ulang sehingga mendapatkan tampilan yang maksimal/sesuai dengan yang anda inginkan.
Setelah selesai mengatur lebar dan tinggi kolom postingan, mungkin anda masih kecewa dengan tampilan judul postingan yang tidak cukup pada tempatnya sehingga bagi judul postingan yang panjang akan bergeser kebawah keluar dari tempatnya.
Jika hal itu terjadi, coba anda atur judul postingan (h3) dengan menambahkan height dalam pixel. Caranya :
  • Cari kode :

    .post h3 {
    text-align:center;
    margin:.25em 0 0;
    padding:4px 4px 4px;
    font-size:100%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    background:#31363F;
    border:3px solid #2F323D;
    }
  • Tambahkan height dengan ukuran yang anda inginkan, misalnya height:35px; maka susunannya menjadi seperti dibawah ini : (kode css dibawah ini merupakan kode css judul post yang dipakai EPG Studio).

    .post h3 {
    text-align:center;
    margin:.25em 0 0;
    padding:4px 4px 4px;
    font-size:100%;
    font-weight:normal;
    line-height:1.4em;
    height:35px;
    color:$titlecolor;
    background:#31363F;
    border:3px solid #2F323D;
    }
  • Anda harus berulang-ulang melakukan pengeditan judul post sampai ditemukan yang paling sesuai dengan tampilan blog anda sekarang.
  • Selamat mencoba, semoga bermanfaat....!!!

Tambahan :
Jika anda ingin tampilan kolom postingan sama dengan EPG Studio (border melengkung) tambahkan sedikit kode pada bagian post. Kodenya seperti ini :

.post {
width:274px;
float:left;
padding:5px; /* Jarak antara text post dengan garis pinggir */
Border-top: 3px solid #2F323D; /* warna garis pinggir atas */
Border-bottom: 3px solid #2F323D; /* warna garis pinggir bawah */
Border-left: 3px solid #2F323D; /* warna garis pinggir kiri */
Border-right: 3px solid #2F323D; /* warna garis pinggir kanan */
Margin-bottom: 10px; /* jarak antara post yang satu dengan yang lainnya */
Margin-left: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
0 komentar

MENAMPILKAN JUDUL POSTINGAN DALAM SATU LABEL (RELATED POST)

Susah betul cari judul yang mudah dipahami. Maksud dari judul diatas itu begini, jika anda membuka suatu poastingan dari label Tips Untuk Blogger Pemula, maka dibagian bawah akan muncul judul-judul lain yang sama labelnya dengan postingan yang sedang anda buka. Dengan kemunculan postingan yang sma labelnya, anda tidak perlu bersusah payah mencari judul postingan lainnya. Anda hanya perlu melihat judul-judul tersebut dan jika sudah dapat yang anda pilih, tinggal klik kemudian muncul postingan dari judul tadi.
Bagaimana ...berminatkah anda...? Jika ya..simak langkah-langkahnya.
  • Sign ke Blogger.
  • Pilih Tata Letak, Edit HTML.
  • Back Up dulu template anda untuk menjaga jika terjadi kegagalan.
  • Kasih tanda centang pada kotak Expand Widgets Template.
  • Cari kode <data:post.body/> kemudian copy seluruh kode dibawah ini dan paste dibawah kode tadi.
    Bagi blog yang sudah diasang read more kode <data:post.body/> ada 2 buah pilih yang pertama, kemudian paste dibawahnya.



    <b:if cond='data:blog.pageType == "item"'>
    <div class='similiar'>

    <div class='widget-content'>
    <h3>    Related Posts by Categories</h3>
    <div id='data2007'/><br/><br/>
    <script type='text/javascript'>

    var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;

    maxNumberOfPostsPerLabel = 100;
    maxNumberOfLabels = 3;


    function listEntries10(json) {
    var ul = document.createElement(&#39;ul&#39;);
    var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
    json.feed.entry.length : maxNumberOfPostsPerLabel;
    for (var i = 0; i &lt; maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    for (var k = 0; k &lt; entry.link.length; k++) {
    if (entry.link[k].rel == &#39;alternate&#39;) {
    alturl = entry.link[k].href;
    break;
    }
    }
    var li = document.createElement(&#39;li&#39;);
    var a = document.createElement(&#39;a&#39;);
    a.href = alturl;

    if(a.href!=location.href) {
    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
    }
    }
    for (var l = 0; l &lt; json.feed.link.length; l++) {
    if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;b&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;data2007&#39;).appendChild(div1);
    }
    }
    }
    function search10(query, label) {

    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
    + label +
    &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
    script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
    document.documentElement.firstChild.appendChild(script);
    }

    var labelArray = new Array();
    var numLabel = 0;

    <b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
    textLabel = &quot;<data:label.name/>&quot;;

    var test = 0;
    for (var i = 0; i &lt; labelArray.length; i++)
    if (labelArray[i] == textLabel) test = 1;
    if (test == 0) {
    labelArray.push(textLabel);
    var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
    labelArray.length : maxNumberOfLabels;
    if (numLabel &lt; maxLabels) {
    search10(homeUrl3, textLabel);
    numLabel++;
    }
    }
    </b:loop>
    </b:loop>
    </script>
    </div>

    </div>
    </b:if>
  • Ubahlah kata Related Posts by Categories dengan kalimat yang anda inginkan, misalnya : Postingan Terkait lainnya, Artikel Terkait atau apa saja sesuai dengan keinginan anda.
  • Ubahlah angka-angka pada yang dicetak putih lainnya untuk pengaturan jumlah judul postingan yang ingin ditampilkan.
  • Klik Tombol Simpan Template
  • Selesai...Lihat Hasilnya.


Postingan ini telah berhasil dicoba pada blog percobaan EPG Studio.
0 komentar

MENAMBAH WIDGET DIBAWAH POSTINGAN

Jika kita memahami cara menambah sebuah widget pada blog, akan mudah sekali menambahkannya dimanapun/pada tempat yang anda sukai.
Satu lagi cara yang dapat anda praktekan untuk menambah widget yaitu "Menambah widget dibawah Postingan".
Widget yang dimaksud pada tips ini akan muncul setelah postingan tampil secara menyeluruh (setelah fasilitas readmorenya difungsikan). Jadi kehadirannya tidak menggangu penampilan pada halaman muka blog. Cuma...tips ini hanya berlaku pada blog yang telah dilengkapi fasilitas readmore.

Ikuti langkah-langkahnya :
  • Masuk ke Blogger.
  • Pilih Tata Letak.
  • Pilih Elemen Halaman.
  • Pilih Edit HTML.
  • Kasih tanda contreng pada kotak Expand Template Widget
  • Cari kode ini pada template anda :

    <div class='post-body'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
  • Letakan kode widget yang akan ditampilkan dibawah postingan tepat dibawah kode tadi.
  • Simpan Template.
  • Lihat Hasilnya.
  • Tips ini telah berhasil dicoba pada EPG Studio.
0 komentar

MENAMBAH WIDGET DIBAWAH ISI POSTINGAN

Tips Untuk Blogger Pemula ini merupakan kelanjutan dari post sebelumnya yaitu : Menambah Widget Dibawah Judul Postingan. Sengaja dibuat terpisah agar dalam mempraktekannya, anda terfokus pada satu post, dengan harapan tidak membuat bingung terutama yang masih belum memahami kode-kode HTML.
Cara menambah widget dibawah postingan pada dasarnya sama, hanya kode untuk penempatan kode widgetnya yang berbeda tempat. Silahkan anda ikuti langkah-langkahnya

  1. Siapkan sebuah widget yang akan ada tampilkan di bawah judul postingan
  2. Atur ukuran widget (width dan heightnya), sesuaikan dengan ukuran main wrapper.
  3. Ubah sript dari widget tersebut pada pharse yang dapat diterima oleh temlate.
  4. Untuk mempharsenya silahkan anda kunjungi situs ini : http://centricle.com
  5. Copy dulu script widgetnya dan paste pada kolom yang tersedia pada http://centricle.com
  6. Klik tombol encode untuk mengubah pharsenya.
  7. Setelah selesai prosesnya, copy kode yang diubah tadi dan simpan dulu pada notepad
  8. Masuk ke Blogger dengan ID anda
  9. Pilih Tata Letak
  10. Pilih Edit HTML
  11. Back up terlebih dahulu templatenya, jika anda takut gagal
  12. beri tanda contreng pada kotak disamping tulisan Expand Template Widget
  13. Cari kode ini <div class='post-footer-line post-footer-line-1'> kemudian copy kode yang telah dipharse tadi da paste tepat dibawah kode <div class='post-footer-line post-footer-line-1'>
  14. Klik tombol Simpan Temolate dan lihat hasilnya...!!
0 komentar

KOMENTAR TERBARU

TINGGALKAN KOMENTAR ANDA

Follow Me