YANG PENTING KU COPAS: 11/10/12

Sabtu, 10 November 2012

sang tercopas pasang toltip link dan gambar blog

Tooltip merupakan tampilan dari sebuah image atau link saat mouse berada diatasnya. Pengertian itu hanya berdasar pada perubahan tampilan image atau link saat mouse berada diatasnya. Untuk pengertian lebih pastinya, silahkan anda coba dulu tips dibawah ini dan setelah berhasil maka anda akan lebih memahami apa itu tooltip.
Tooltip agar bisa berfungsi dibantu dengan 3 file Javascript (js). Jadi sebelum anda memasang tooltip pada blog anda, download dulu ketiga file Javascript kemudian simpan pada tempat penyimpanan file Javascript anda.http://www.blogger.com/img/blank.gif

File Javascript yang dapat anda download :

Mungkin anda bertanya tentang nama-nama dari file js diatas. Huruf wb merupakan singkatan dari situs asal yang menerbitkan tooltip ini yaitu situs Warung Bebas Kemudian diubah sedemikian rupa sehingga tips tentang tooltip seperti ini telah banyak ditulis pada Tutorial Blogger seperti yang sedang anda baca sekarang.
Jika ingin menampilkan tooltip pada blog anda, ikuti langkah-langkah dibawah ini :

Masuk ke dasbor blog anda.
Pilih Rancangan bagian Edit HTML
Cari kode <body> kemudian copy kode dibawah ini dan paste tepat dibawah kode <body>

<script src='https://sites.google.com/site/epgstudiosite/js/wb.js'/><a href='http://www.warungbebas.com/' id='wb_ttauth'/><script type='text/javascript'>//<![CDATA[ wb.tooltip_setting = { func : "Tooltip", top : 5, left : 5, maxw : 300, speed : 20, timer : 40, endalpha : 95, alpha : 0, style_plus : "#tt{border:2px double #FF0000;background:#000000;-moz-border-radius: 10px;border-radius:10px;}#ttcont{background:#000000;color:#ffffff;-moz-border-radius: 5px;border-radius: 5px;}" }; //]]></script><script src='https://sites.google.com/site/epgstudiosite/js/wb_tooltips.js'/><script src='https://sites.google.com/site/epgstudiosite/js/wb_autotooltips.js'/><div id='warungbebasautotooltip'>
1. Yang berwarna hijau merupakan bagian yang dapat anda edit, silahkan anda ubah sesuai dengan keinginan, tetapi jika anda takut salah, biarkan kode-kode diatas tampil apa adanya.
2. Jangan lupa ganti ketiga file JavaScript dengan file simpanan anda sendiri.

Cari kode </body> kemudian copy kode dibawah ini kemudian paste tepat diatas kode </body>

</div><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>

Simpan Template.
Lihat blog

emotion di buku tamu

nda merasa bosan dengan dengan emotions yang dapat ditampilkan di buku tamu..?Jika itu yang terjadi, sebenarnya anda dapat menambah emotions dengan koleksi anda sendiri atau mengcopy emotions dari blog lain.
Caranya cukup mudah, anda hanya perlu masuk ke situs yang melayani buku tamu anda.Yuk...ikuti langkah-langkahnya :

Login ke shoutmix.
Pilih menu Display.
Klik Smilleys, maka akan muncul tampilan seperti ini.

Masukan alamat icon anda kedalam kotak "Smile image URL".
Masukan kode dari icon anda pada kotak Code.
Klik add.
Lakukan cara yang sama sampai semua icon smile yang anda miliki masuk kedalam daftar.
Setelah selesai klik tombol Save Settings.
Lihat shoutmix blog anda.

Buku tamu tersembunyi di bagian kanan blog

Keren....!!Buku Tamu tersembunyi alias tidak terlihat merupakan trik yang sangat bermanfaat bagi peblogger, karena selain dapat menghemat tempat juga dapat menambah keindahan dan........ yang tidak kalah pentingnya dapat mengurangi beban blog dalam proses loading ( Begitu kata sumber tips ini yaitu : LOVE IS BEAUTY )
Sebenarnya tips ini bukan hanya buku tamu yang dapat anda tampilkan, tapi bisa berupa image atau widget lainnya. Silahkan anda pilih mana yang menurut anda paling sesuai untuk ditampilkan.
Langkah-langkah yang dapat anda lakukan cukup mudah yaitu :

Masuk ke Blogger dengan ID anda.
Pilih Tata Letak.
Pilih Elemen Halaman.
Klik Tambah Gadget.
Klik tanda + pada HTML/JavaScript.
Copy kode dibawah ini kemudian paste pada kolom yang tersedia.

<style type="text/css"> #gb{ position:fixed; top:25px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZVGX9-OvUdUgaZsr4ObM1kYm00Uh1ngYodTEPacfx4KtOOo7K9izyHA0VwdfKSNEhZxuLfv-mdcf0fFatnpQw75j5fbIk43KL6U4cexKOaBD-KqNtAFgaAkDWhZDZHU822rHEnGfsGvKI/s128/guestbook.png') no-repeat; } .gbcontent{ float:left; border:2px solid #1300F2; background:#FFFFFF; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> MASUKAN KODE BUKU TAMU/WIDGET DISINI <div style="text-align:right"> <a href="javascript:showHideGB()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

Klik tombol Simpan.
Lihat Pemapilan Blog anda sekarang.

Keterangan :

height:150px; merupakan tinggi dari widget, silahkan anda atur.
width:30px; merupkan lebar dari widget, silahkan anda atur.
border:2px solid #1300F2; merupakan ketebalan dan warna garis/border, silahkan anda ganti.
background:#FFFFFF; merupakan latar belakang widget, silahkan anda ganti.
background:url('http://i629.photobucket.com/albums/uu13/akubsaputra/guestbook.png') dapat anda ganti dengan image hasil kreasi anda sendiri.
MASUKAN KODE BUKU TAMU/WIDGET DISINI merupakan tempat meletakan kode buku tamu maupun kode-kode lainnya yang ingin anda tampilkan.
[close] dapat anda ganti dengan kata tutup atau kata apa saja yang searti.

Tampilan buku tamu di blog

Sebagai contoh, coba anda perhatikan buku tamu dibawah ini.

1. Buku tamu dari ShoutBox

Klik disini untuk menampilkannya pada blog anda.
2. Buku Tamu dari Cbox

Klik disini untuk menampilkannya pada blog anda.
3. Buku Tamu dari Oggix.com

Klik disini untuk menampilkannya pada blog anda.

menampilkan huruf besar pada awal postingan blog

Postingan suatu artikel dapat ditampilkan dengan gaya yang berbeda dan masing-masing gaya tersebut memiliki kelebihannya sendiri.
Salah satu gaya dari penulisan artikel adalah huruf besar tampil pada awal kalimat suatu postingan/seperti gaya penulisan pada koran. Sebagai contoh adalah tulisan yang sedang anda baca ini. Huruf P dibuat sedemikian rupa sehingga terlihat lebih besar dari huruf-huruf lainnya
Ingin membuat postingan seperti contoh diatas ?

Sign in ke Blogger dengan ID anda

Klik Layout

Klik Edit HTML

Jangan lupa Download Full Template, lalu simpan data tersebut data tersebut. Hal ini untuk menjaga kemungkinan anda gagal dalam mengedit template

Cari kode ]]> </b:skin> kemudian copy kode-kode dibawah ini dan paste tepat diatas tadi.


/* kode untuk huruf awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

Klik Tombol Simpan Template

Setelah langkah-langkah tadi anda lakukan dengan dengan baik, sekarang coba membuat postingan artkel dengan menggunakan gaya yang baru anda lakukan.
Jangan lupa, pada saat melakukan postingan harus pada edit HTML bukan pada Tulis.
Ketiklah kode ini <span class="awal">huruf awal</span> . Masukanlah satu huruf menggantikan kata huruf awal. Setelah huruf awal anda ketik, kelanjutannya anda boleh pada edit HTML atau pada Tulis.

Contoh :

<span
 class="awal">P</span> ada akhir semester genap Tahun Pelajaran
 2008/2009,OSIS SMP Negeri 1 Sambas akan mengadakan kegiatan perlombaan 
antar kelas. Jenis-jenis perlombaan tersebut meliputi beberapa macam 
cabang seperti olahraga, kesenian, lomba mata pelajaran, lomba 
kebersihan dan lain-lain.

Tulisan tersebut akan terlihat seperti ini

Pada akhir semester genap Tahun Pelajaran 2008/2009,OSIS SMP Negeri 1 Sambas akan mengadakan kegiatan perlombaan antar kelas. Jenis-jenis perlombaan tersebut meliputi beberapa macam cabang seperti olahraga, kesenian, lomba mata pelajaran, lomba kebersikan dan lain-lain.

Agar warna huruf maupun warna latar belakang sesuai dengan warna postingan pada blog anda, ubahlah kode-kode warna dibawah ini dengan kode warna yang sesuai

color: #000000;
background:#ffffff;

Color : untuk warna huruf
background : untuk warna latar belakang. Latar belakang ini bisa juga dihilangkan agar tidak memiliki latar belakang. Jadi huruf yang tampil, latar belakangnya sama dengan warna latar postingan.

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 :

Masuk ke Blogger dengan ID anda.
Pilih Edit Entri.
Setelah berada di halaman Edit Entri, pilihlah postingan mana yang akan selalu ditampilkan di halaman muka.
Klik Edit pada postingan yang dipilih.
Lihat dibagian bawah kolom postingan, Klik Opsi Entri. Maka akan muncul komentar Pembaca, Link Balik dan Tanggal dan Jam Entri.
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.
Klik Terbitkan Entri .
Lihat Blog anda sekarang.

membuat tulisan terbalik di blog

Tulisan terbalik merupakan tulisan yang secara umum menyulitkan pengunjung karena sulit untuk dibaca.
Tapi jika hanya sekedar untuk variasi, mungkin tidak ada salahnya anda menampilkan pada blog anda. Tentu saja dengan syarat jangan terlalu banyak tulisan terbaliknya sebab bisa-bisa badan pengunjung ikut-ikutan terbalik.
Ada beberapa situs yang dapat anda jadikan tempat mengubah huruf menjadi terbalik.
Silahkan anda kunjungi situs dibawah ini untuk membuat huruf terbalik :

FlipText.
Filp

Silahkan anda coba membuat tulisan terbalik dari situs-situs tersebut, dengan catatan hanya sebagai variasi yang mungkin akan terlihat unik dimata pengunjung.

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 :

Masuk ke Blogger.
Pilih Rancangan kemudian pilih Edit HTML.
Cari kode seperti dibawah ini :

post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em

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;

Setelah selesai menambahkan kode border diatas, klik tombol Simpan Template.
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.

Satu lagi trik untuk pada postingan blog agar tampilannya lebih menarik, yaitu membagi postingan menjadi dua kolom (seperti gaya pada koran). Ada dua cara untuk menampilkannya, tinggal anda pilih mana yang paling sesuai / cocok dengan tampilan blog anda secara keseluruhan.

Demo 1

Ramadhan merupakan bulan di mana Allah ta’aala wajibkan berpuasa, dan pada 17 Ramadhan itu pula Al-Quran sebagai petunjuk umat Islam diturunkan kepada Nabi Muhammad melalui malaikat Jibril.

Menteri Agama M. Maftuh Basyuni mengingatkan, umat Islam agar mempelajari dan menggali Al-Qur'an yang tak terbatas dalam konteks bacaan, akan tapi lebih pada pemahaman terhadap kandungan Al-Qur'an tersebut.

Demo 2

Ramadhan merupakan bulan di mana Allah ta’aala wajibkan berpuasa, dan pada 17 Ramadhan itu pula Al-Quran sebagai petunjuk umat Islam diturunkan kepada Nabi Muhammad melalui malaikat Jibril.
Menteri Agama M. Maftuh Basyuni mengingatkan, umat Islam agar mempelajari dan menggali Al-Qur'an yang tak terbatas dalam konteks bacaan, akan tapi lebih pada pemahaman terhadap kandungan Al-Qur'an tersebut.

Kedua demo diatas menggunakan kode-kode yang berbeda :

Demo 1 : menggunakan kode untuk pembuatan tabel.
Demo 2 : menggunakan kode css.
Hruf besar yang tampil diawal artikel, silahkan pelajari : menampilakan huruf besar pada awal postingan blog

Sekarang silahkan anda simak kode-kode yang digunakan pada kedua demo diatas

Kode-kode yang digunakan pada DEMO 1

<table border="1px" cellpadding="10" cellspacing="10"><tbody><br> <tr> <td align="justify" valign="top" width="250"> artikel di bagian kiri</td><td align="justify" valign="top" width="250">artikel di bagian kanan</td> </tr><br> </tbody></table>

border="1px": merupakan kode ketebalan garis, anda ganti ukurannya, atau bisa juga dihilangkan jika kurang suka.
cellpadding="10" : untuk mengatur jarak antara tepi kolom dengan tulisan
cellspacing="10" : untuk mengatur jarak antara dua kolom
align="justify" (rata dikiri dan dikanan) : untuk mengatur perataan artikel, dapat anda ganti dengan left (rata kiri), right (rata kanan) atau center (tengah).
valign="top" (rata atas) : untuk mengatur perataan vertikal, dapat anda ganti dengan bottom (rata bawah atau middle (rata tengah).

Kode-kode yang digunakan pada DEMO 2

<style type="text/css">#multikolom{-moz-column-count:2;-moz-column-gap: 1em;-moz-column-rule: 1px solid black;-webkit-column-count: 2;-webkit-column-gap: 1em;-webkit-column-rule: 1px ;} </style> <div id="multikolom">Tulisan anda disini</div>

Pada cara yang kedua ini, anda hanya tinggal memasukkan tulisan menggantikan "Tulisan anda disini"

postingan bergeser ke kanan ketika di buka mencopas

Magazine template, memiliki keistimewaan dalam penempatan postingan. Keistimewannya itu, pada beranda atau pada halaman pencarian, semua postingan berada di sebelah kiri dan sidebar di sebelah kanan, tetapi sewaktu kita buka, postingan akan bergeser ke sebelah kanan dan sidebar jadi di sebelah kiri.
Setelah dipelajari kode-kode pada Magazine Template, ternyata ada penambahan kode untuk mengatur tampilan yang dimaksud diatas.
Sekarang EPG Studio sendiri menggunakan trik ini dengan maksud sebagai variasi agar tampian postingan tidak terlalu monoton.
Jika anda berminat untuk menerapkan pada blog kesayangan anda, ikutilah langkah-langkah di bawah ini :

Masuk ke Blogger
Pilih Rancangan pada tab Edit HTML
Copy code dibawah ini kemudian paste tepat dibawah kode ]]></b:skin>

<style type='text/css'> <b:if cond='data:blog.pageType == "item"'> #main-wrapper { width: 590px;/*samakan dengan lebar main-wrapper anda*/ float: right; word-wrap: break-word; overflow: hidden; } #sidebar-wrapper { border: 1px none #FFFFFF; width:470px;/*samakan dengan lebar sidebar anda*/ float:left; word-wrap: break-word; overflow: hidden; padding:5px 5px .25em; margin-bottom:0px; } </b:if> </style>
Kode diatas hanya berlaku pada template yang memiliki satu sidebar.
Jika Sidebar blog anda memilik lebih dari satu, harus ditambahkan pada kode diatas yang diletakkan dibawah sidebar-wrapper.
Sebagai contoh, coba anda perhatikan kode yang digunakan EPG Studio (6 sidebar)

<style type='text/css'> <b:if cond='data:blog.pageType == "item"'> #main-wrapper { width: 590px; float: right; word-wrap: break-word; overflow: hidden; } #sidebaratas-wrapper { border: 1px none #FFFFFF; width:470px; float:left; padding:5px 5px .25em; margin-bottom:0px; } #sidebar-wrapper { width: 230px; float: left; border:0px solid $bordercolor;white; padding:5px 5px .25em; word-wrap: break-word; overflow: hidden; } #sidebarbaru-wrapper { width: 230px; float: left; padding:5px 5px .25em; padding-right:5px; word-wrap: break-word; overflow: hidden; } #sidebartengah-wrapper { border: 0px solid #0066CC; width:470px; float:left; padding:5px; margin-bottom:0px; } #sidebarbawah-wrapper { width: 230px; float: left; border:0px solid $bordercolor;white; padding:2.5px 2.5px 2.5px .5em; word-wrap: break-word; overflow: hidden; } #sidebarbawahbaru-wrapper { width: 230px; float: left; border:0px solid $bordercolor;white; padding:5px 5px .25em; word-wrap: break-word; overflow: hidden; } </b:if> </style>
Klk tombol Simpan Template.
Selesai.

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 : Readmore 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 == "item"'> <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.

Jika postingan hanya berderet kebawah sedangkan disebelah kanan masih ada ruang kosong, itu menunjukkan width-nya terlalu besar, silahkan anda kecilkan ukuran width-nya.
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.
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;
}

membuat readmore otomatis

Walau terlambat membuatnya. akhirnya jadi juga postingan " Membuat Read More otomatis dengan Thumbnail Image ". Pemahaman dari postingan ini adalah : Read More akan muncul secara otomatis tanpa harus menambah kode tetentu pada waktu membuat postingan. Selain itu pada awal postingan akan muncul sebuah image sebagai asesoris yang diambil dari image pertama dari sejumlah image yang ada pada pada postingan.
Sebagai acuan, coba anda perhatikan halaman awal EPG Studio yang juga menggunakan trik ini untuk menampilkan fasilitas read more.
Berikut langkah-langkahnya :

TAHAP PERTAMA

Tahap Pertama ini ditujukan bagi anda yang sudah menggunakan fasilitas read more dari versi lama. Silahkan kembalikan template anda terlebih dahulu seperti sebelum ditambahkan fasilitas read more
Sebagai comtoh :

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Hapus kode warna putih kemudian simpan template anda. Setelah selesai silahkan anda ikuti tutorial dibawah ini.

TAHAP KEDUA.

Tahap ini dapat diterapkan oleh anda yang blognya belum ditambah fasilitas Read More, termasuk anda yang telah selesai pada TAHAP PERTAMA tadi.

Masuk ke Blogger.
Pilih Rancangan bagian Edit HTML.
Kasih tanda cek pada Expand Template Widget.
Backup dulu template blog anda, jika takut gagal.
Copy kode dibawah ini kemudian paste tepat diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 250; summary_img = 250; img_thumb_height = 120; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>

Keterangan :
- var thumbnail_mode = "float"; = kode untuk menampilkan image secara otomatis. Ganti kata float dengan no-float untuk tidak menampilkan gambar.
- summary_noimg = 250; = untuk menentukan jumlah karakter/kata yang tampil pada postingan tanpa image thumbnail
- summary_img = 250; = untuk menetukan jumlah karakter/kata yang tampil pada postingan dengan image thumbnail
- img_thumb_height = 120; dan
- img_thumb_width = 120; = merupakan tinggi dan lebar dari image thumbnail yang ditampilkan.
Berikutnya cari kode <data:post.body/>
Ganti kode tersebut dengan kode dibawah ini.

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimOFnFmnMVYc551xF6QvgLoqp4fh9h9fyGh9mLo4WlDOoTscUrtXHlxY-2yIVK9Qm1XqcBBshGUiDrrGbwL7kfM_Tl0nc643MGX2xy7a614vt2bSzINOS8HrCewXpH6OJZt6m0pthlkjg/'/></a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Perhatikan kode warna kuning merupakan pengganti kata readmore yang menggunakan gambar, Silahkan anda ganti dengan URL image milik anda.
Setelah selesai, klik tombol Simpan Template.
Lihat Blog anda sekarang...

Penting..!!!

Bagi anda yang sudah memasang fasilitas read more versi lama, walaupun telah berhasil menerapkan trik ini, postingan jika dibuka hanya tampil separoh. Oleh karena itu anda harus mengedit ulang seluruh postingan untuk membuang kode untuk menampilkan read more yang ditambahkan pada postingan .
Sebagai contoh kode yang dtambahkan pada postingan :

<div class="fullpost">


</div>

Hapus kode diatas dari seluruh postingan blog anda.
Bagi blog yang memiliki laman cara ini kurang tepat karena laman akan ikut terpasang read more dan yang lebih parahnya tidak bisa dibuka...atau diklik read more-nya

cara membuat variasi huruf di 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 MEneraPKANNYA

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 :

Bradley Hand ITC
Bookman Old Style
Arial Rounded MT Bold
Calisto MT
Bauhaus Md BT
Americana BT
Calligrapher
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

pengatur judul postingan blog yang tercopas

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 :

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.

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

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;
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.

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.

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;
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.
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; }

YANG PENTING KU COPAS

Featured 1

Featured 2

Featured 3

Featured 4

Featured 5

Sabtu, 10 November 2012

sang tercopas pasang toltip link dan gambar blog

emotion di buku tamu

Buku tamu tersembunyi di bagian kanan blog

Tampilan buku tamu di blog

menampilkan huruf besar pada awal postingan blog

menempatkan postingan selalu di halaman muka

membuat tulisan terbalik di blog

tampilan postingan border melengkung

postingan menjadi dua kolom

postingan bergeser ke kanan ketika di buka mencopas

Postingan multi kolom

membuat readmore otomatis

cara membuat variasi huruf di postingan

pengatur judul postingan blog yang tercopas

TRANSLATE

Popular Posts

Archive

statistic

POPULAR POST