MENGEDIT MENU CSS

Assalamualaikum....? Posting akan menjelaskan cara mengedit KODE CSS. tips ini dibuat atas permintaan sahabat yang tertarik sama tampilan menu di PKT Studio.
Udah dehh langsung ke PKT ehh salahh TKP....
Pertama Agan haruss punya KODE javascript / KODE CSS >. Agan bisa dapatkan Kode CSS nya di

KLIK LINK DI BAWAH INI
EPG Studio

Jika sudah punya langsung ajah EDIT..
Misalkan kodenya seperti ini..

#navlist a, #navlist a:link, #navlist a:visited {
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}

#navlist a:hover {
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}

Teruss ganti dengan yang di bawah ini supaya mirip dengan yang saya...

#navlist a, #navlist a:link, #navlist a:visited {
background:black url(http://upload.wikimedia.org/wikipedia/commons/7/7e/Animated-Flag-Indonesia.gif) center;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 6px 6px 6px 6px;
position: relative;
right: 2px;
text-decoration: none;
-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;
}

#navlist a:hover {
background:black url(http://www.perthelectriciancontractors.com.au/wp/thunder.gif) center;
bottom: 12px;color: #fff;position: relative;right: 0px;
-webkit-box-shadow:10px 10px 10px 10px #80FF00;-moz-border-radius-topleft: 20px;-moz-box-shadow: 6px 4px 9px #80FF00; box-shadow : 6px 4px 9px #80FF00;
margin: 0 3px 0 0;
padding: 20px 0px 20px 0;
-moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px;
}

Setelah itu tinggal Save..
Gampangkan.......................? SIMPELLL...

KETERANGAN

Ganti kode alamat yang warna MERAH... Dengan alamat yang punya AGAN..

DEMO : " Lihat menu di bawah HEADER PKT "
WSS

ANTI BLOK ARTIKEL

Cara ini sebenarnya sudah banyak di share, tapi sebagai arsip di blog ini, saya posting kembali. Cara kerja script ini adalah menonaktifkan fungsi blok pada posting sehingga copy paste terhadap blog kita dapat diminimalisir. Tapi saya sarankan jika blog sobat bertema "blog tutorial" sebaiknya jangan menggunakan script ini, karena script/kode yang ada pada tutorial sobat tidak akan bisa di blok. Baik agar tidak bertele-tele langsung saya terangkan :

1. Login ke blogger, klik rancangan, Pilih tab Edit HTML, Ingat centang Expand Widget Template
2. Cari kode </head> (gunakan ctrl+f)
3. Copy paste script berikut tepat di bawah kode </head>

<SCRIPT type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</SCRIPT>

Simpan template dan lihatlah hasilnya. Gunakan script ini jika konten blog sobat memang mengandung hak cipta atau bersifat pribadi yang tidak ingin di copy paste

Demo Klick ajah: http://akoid.blogspot.com

Blok kata atau huruf apa saja..

Selesai

KODE WARNA VERSI 2

Sebagian dari peblogger, mungkin mendapat kesulitan ketika ingin mengubah tampilan warna pada blog kesayangannya. Secara kebetulan pada waktu admin EPG Studio melakukan rutinitas jalan-jalan (blogwalking), ketemu dengan sebuah blog yang menampilkan kode-kode warna seperti pada contoh disamping. Tampilannya sangat sederhana, mudah digunakan dan memiliki ribuan kode warna sesuai dengan pilhan. Hanya saja kode warna yang ditampilkan belum lengkap, misalnya kode warna yang terlihat seperti ini : E01F59 (warna merah), Tambahkan kode ini : # sebelum kode tadi. Jadinya seperti ini :#E01F59
Bagi yang berminat menampilkan kode warna tersebut pada blog anda, klik link ini : Hex Color Code Generator , kemudian copy kode embed yang ada dihalaman tersebut dan paste pada bagian dari blog anda (bisa pada postingan maupun pada sidebar). Ganti ukuran width dan height-nya (ada dua pengaturan tersebut, ubah kedua-duanya) sesuai dengan lebar dari tempat dimana anda meletakan tampilan kode warna tersebut.


CONTOH KODE EMBED YANG JUGA BISA ANDA COPY

<div id="TrixCGv1"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="430" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"><param name="movie" value="http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf"><param name="quality" value="high"><param name="bgcolor" value="#cccccc"><embed src="http://e-infotainment.com/applications/color-code-generator/v1/trixcgv1.swf" quality="high" bgcolor="#cccccc" width="400" height="430" name="flash" align="middle" play="true" loop="false" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></div>

Tampilannya seperti ini :

SARAPAN PAGI

Pagi hari pada kegiatan pelatihan di Pontianak, terlihat beberapa peserta keluar dari kamar masing-masing dengan tujuan untuk sarapan pagi yang disediakan oleh panitia.
Saat turun ketingkat dibawahnya, seorang peserta berkata : "Tuh sarapan kita dah siap..yuk kita serbu..."
Serempak kawan-kawannya menjawab; " yuk...!!"
Sesampainya di hadapan hidangan, mereka langsung mengambil piring dan berbaris untuk antrian.
"Ga biasanya yah..sarapan kali ini..menunya macam-macam" kata salah satu peserta.
"Iya.." sahut yang lainnya.
Peserta paling depan, mengambil nasi, beberapa tusuk sate dan makanan lainnya.
Tiba-tiba salah satu pelayan bertanya: "Maaf ya Pak...Bapak-bapak ini ini dari dinas mana...??"
"Kami dari Dinas Pendidikan..." sahut salah satu peserta, sementara yang lainnya sedang sibuk memilih jenis makanan.
" Maaf sekali lagi ya Pak..sarapan ini bukan untuk Dinas pendidikan, tapi untuk karyawan PLN yang juga sama lagi mengadakan pelatihan ..." sambung si pelayan.
Peserta dari Diknas saling memandang..terkejut dan rasa malu hinggap pada pikiran mereka. Tanpa sepatah katapun, semuanya meletakan piring yang telah berisi makanan pilihan masing-masing diatas meja prasmanan, mereka meninggalkan tempat itu denngan perasaan masing-masing.
"Eh....pak, terusin aja..ga apa-apa kok..!!" seru si pelayan. Tapi peserta Diknas telah jauh meninggalkan tempat itu.
" Pantas yah...mewah menunya..rupanya untuk karyawan PLN" celetuk salah satu peserta setelah sampai di tempat sarapan untuk Dinas pendidikan.
Yang lainnya hanya membalas dengan senyuman, tanpa ada satu orangpun yang tahu makna dari senyum itu kecuali mereka yang salah mengambil jatah sarapan pagi....


Cerita ini saya persembahkan untuk rekan rekan Guru yang mengalami kejadian diatas..semoga kedepan penataran Gurupun mendapat perlakuan yang sama seperti pegawai/karyawan dari instansi lainnya. Semoga...!!!

KETEMU KUNTILANAK MANDI

Cerita ini berdasarkan pengalaman Ibu dan Kakak saya almarhumah yang kejadiannya sewaktu saya masih belum sekolah.

Entah jam berapa..Ibu membangunkan anak perempuannya untuk mengajak pergi kepasar membeli keperluan rumah tangga.
"Nak bangun....lihat tuh hari dah terang..kita kepasar...kalau terlalu siang nanti kita tidak kebagian barang yang kita perlukan."
Sianakpun bangun...merekapun bersiap-siap untuk pergi ke pasar yang jaraknya lebih kurang 6 km, tanpa kendaraan dan tanpa penerangan.
Setelah berada di luar rumah, anaknya bertanya " Bu..Ko sepi yah..biasanya orang dah berkumpul...??"
"Mungkin yang lain udah berangkat duluan...ayo kita susul mereka.."sahut si Ibu.
Berangkatlah keduanya melalui jalan tanah yang berbatu-batu.
Sepanjang jalan ibu dan anak itu hanya saling berdiam diri, sementara rombongan yang disusul belum juga kelihatan.
Setelah setengah jam menempuh perjalanan, tibalah di perbatasan desa. Disitu ada sebuah sungai kecil mengalir yang dibagian kiri dan kanannya ditumbuhi pepohonan yang besar dan tinggi. Secara tidak disengaja, Ibu memandang kearah hulu sungai...terlihat ada seseorang telanjang bulat dengan rambut yang terurai sampai ke pinggul. Wajahnya tidak terlihat dengan jelas karena cahaya bulan tertutup oleh rindangnya daun di sekitar itu. Sebentar dia naik ke batang yang agak rendah..lalu melompat ke sungai...naik lagi, melompat lagi...
Melihat kejadian itu, Ibu merasa ketakutan , tapi tidak bisa berbuat apa-apa, karena kalau anaknya dikasih tahu, takut timbul kepanikana pada si anak. Akhirnya Ibu hanya diam sambil meneruskan perjalanan.
Rupanya tanpa sepengetahuan Ibu, anaknyapun melihat kejadian itu persis seperti apa yang dilihat Ibu. Begitu juga perasaanya sama dengan Ibu, mau dikasih tahu, takut Ibu panik.
Setelah melewati perbatasan desa, Ibu dan anak saling memandang dengan wajah yang ketakutan. Tanpa dikomando....keduanya berlari sekuat tenaga sampai masuk ke daerah perumahan tetangga desa.
Mereka berhenti dengan nafas putus-putus
"Kenapa kamu berlari Nak....??"tanya Ibu
"Ibu juga lari....memangnya ada apa..??" Anak malah balik bertanya.
Setelah suasana agak tenang, Ibu menceritakan apa yang dilihatnya tadi yang sesekali di sahuti oleh anaknya karena memang yang mereka lihat itu sama kejadiannya.Setelah sampai di sebuah mesjid mereka berhenti dan duduk diteras mesjid untuk melepaskan lelah dan rasa takut.
"Pantas...coba lihat Nak, baru jam dua pagi.....jadi kita bukan ketinggalan dari orang" Ibu membuka percakapan.
"Orang masih pada tidur bu..!!" sahut anak.
"Ibu lupa, terangnya malam ini karena malam bulan purnama..dikira udah siang..!!" kata ibu dengan nada penyesalan
"Ya udah sambil nunggu yang lain..kita istirahat disini..." hibur Ibu.
Karena kelelahan keduanya tertidur di teras mesjid.
Jam tiga mereka dibangunkan oleh rombongan dari satu desa yang juga ingin pergi kepasar yang jarak tempuhnya masih 4 km.


Cerita ini dipersembahkan untuk Ibunda tercinta di Ciberung, kuningan Jawa barat dan Kakanda Almarhumah yang telah mendahului.

MENGGANTI READMORE DENGAN IMAGE

Read more (baca selengkapnya) atau apapun anda menyebutnya. Dapat ditampilkan dalam bentuk yang lebih menarik yaitu dengan menggunakan image. Image yang digunakan tentu saja harus yang menunjukan sebagai pengganti tulisan read more dengan maksud agar pengunjung tidak mengalami kesulitan saat akan membaca kelajutan dari artikel anda.
Yang diperlukan hanya sebuah image seperti ini : , kemudian uploadlah image tersebut ke situs tempat penyimpanan image seperti photobucket.
Bentuk serta jenis file dari image silahkan anda berkreasi sendiri dengan penampilan yang anda sukai.
Setelah proses upload selesai, copylah URL image tersebut, seperti contoh dibawah ini :


http://1.bp.blogspot.com/_1j80TgNqd_8/S3q9LfmzERI/AAAAAAAAAxI/Ai3PWs3Lyxw/s200/th_ReadMore.png'


Tambahkan kode agar image tersebut dapat ditampilakn seoperti dibawah ini :


<img src="http://1.bp.blogspot.com/_1j80TgNqd_8/S3q9LfmzERI/AAAAAAAAAxI/Ai3PWs3Lyxw/s200/th_ReadMore.png'"/>


Image akan terlihat seperti ini :





Setelah image selesai dipersiapkan, selanjutnya anda melakukan langkah-lagkah berikut :

• Masuk ke Blogger dengan ID anda.
• Pilih Tata Letak.
• Pilih Edit HTML.
• Ksih contreng pada kotak kecil disamping tulisan ini : Expand Template Widget.
• Back up template terlebih dahulu jika takut gagal.
• Cari kode read more pada template. (Pada sebagian template anda mungkin kata read more bebrbeda istilah ada : baca selengkapnya, untuk melanjutkan baca klik disini atau kata-kata lainnya yang semakna). Kode tersebut kira-kira seperti ini :
  
  
  <p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Selengkapnya klik disini...</strong></a>
</b:if>


• Gantilah kalimat Selengkapnya klik disini dengan image yang telah disiapkan diatas, sehingga menjadi seperti ini :


<p><data:post.body/></p>
<a expr:href='data:post.url'><strong><img src="http://1.bp.blogspot.com/_1j80TgNqd_8/S3q9LfmzERI/AAAAAAAAAxI/Ai3PWs3Lyxw/s200/th_ReadMore.png'"/></strong></a>
</b:if>
• Setelah selesai klik Tombol Simpan template.
• Lihat Read more baru pada blog anda.
• Selamat mencoba , semoga bermanfaat...!!

MEMBUAT READMORE OTOMATIS DENGAN THUMBNAIL IMAGE

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='http://lh5.ggpht.com/_1j80TgNqd_8/TUgNLsV-HxI/AAAAAAAABiM/YbNrE45Z4WI/readmorew.png'/></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.

CARA MEMBUAT READ MORE VERSI 1

Read more atau baca selanjutnya atau apapun sebutannya, yang penting postingan yang anda buat hanya tampil sebagian dan selengkapnya baru akan tampil jika anda atau pengunjung mengklik read more.
Membuat read more terdiri dari dua langkah utama yang keduanya berbeda satu sama linnya.
Ikuti langkah-langkahnya.

Sebelum anda melakukan pengeditan pada kode HTML, lakukan backup templat terlebih dahulu, agar jika terjadi kegagalan, anda telah memiliki simpanan Template yang dapat anda kembalikan.


A. Langkah Pertama

1. Login ke Blogger.
2. Pilih Tata Letak.
3. Pilih Pengaturan.
4. Pilih Format.
5. Pada bagian bawah pada menu : Template Posting  terdapat sebuah kotak kosong. Anda isi dengan kode seperti ini.
   
   
   

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

6. Klik Simpan Pengaturan

B. Langkah Kedua

1. Pilih Tata Letak.
2. Pilih Edit HTML
3. Jangan lupa beri tanda contreng pada Expand Template Widget
4. Cari kode </head> kemudian copy seluruh kode dibawah ini dan letakan tepat diatas kode tadi
   
   
   

   <style> <b:if cond='data:blog.pageType == "item"'> span.fullpost {display:inline;} <b:else/> span.fullpost {display:none;} </b:if> </style>

5. Cari kode<data:post.body/> kemudian copy seluruh kode dibawah ini dan letakan tepat dibawah kode tadi.
   

   <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> Read More..</a> </b:if>

   
   
   
   Kata read more dapat anda ganti dengan kata yang anda sukai, misalnya : selengkapnya klik disini, baca kelanjutannya dll.
6. Klik Simpan Template. Selesai.

Cara Posting Artikel


Ketika akan membuat postingan, anda harus membukanya pada Edit HTML (bukan pada Compose), maka pada halaman postingan akan muncul kode seperti di bawah ini :

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

Ketiklah isi dari dari artikel anda yang akan ditampilkan pada halaman muka, diatas kode ini :

<span class="fullpost">

Sedangkan sisa artikelnya anda ketik setelah kode tadi atau tepat diatas kode ini :

</span>

Selesai...Selamat Mencoba
Postingan ini telah berhasil dicoba pada blog percobaan EPG Studio. Jadi jika ada kegagalan dalam usaha nada, coba ulangi dengan lebih teliti

SCROLL TAMPIL PADA POSTINGAN JIKA DIPERLUKAN

Lanjutan dari post Menampilkan Scrool Pada Postingan, cuma post ini berbeda dengan postingan sebelumnya. Perbedaannya, kalau pada Menampilkan Scroll Pada Postingan scrollnya akan muncul secara otomatis pada setiap postingan, sedangkan " Scroll Tampil pada Postingan jika diperlukan" scrollnya hanya tampil jika memang ingin anda tampilkan pada postingan.
Berikut langkah-langkahnya :
Perlu diingat bahwa tips ini hanya berlaku pada template yang belum ditambah fasilitas read More
LANGKAH PERTAMA

• Masuk ke Blogger.
• Pilih Rancangan kemudian masuk ke Edit HTML.
• Backup dulu template anda jika takut gagal.
• Cari kode : ]]></b:skin>
• Copy kode dbawah ini dan paste tepat diatas kode ]]></b:skin>

.scrollpost {
height:200px;
width:450px;
overflow:auto; }
• Ubah heght dan width sesuai dengan lebar tempat postingan artikel blog anda.
• Klik tombol Simpan Template.

LANGKAH KEDUA

Pada waktu anda akan membuat postingan dan ingin menampilkan scroll pada postingan tersebut, cantumkam kode dibawah pada kolom postingan.

<div class="scrollpost"> tulis artikel anda disini </div>

Selamat mencoba semoga bermanfaat.

POSTINGAN TAMPIL SECARA ACAK

Kehadiran blog anda di dunia maya, semakin lama postingan akan semakin bertambah sehingga memungkinkan pengunjung akan terlewatkan pada beberapa postingan yang mungkin sedang dicari pengunjung.
Tips yang berasal dari PURPLEMOGGY, merupakan salah satu alternatif yang dapat anda sajikan untuk para pengunjung untuk membaca postingan pada blog anda.
Tips ini menampilkan sebuah link dan juga bisa diganti dengan sebuah sebuah tombol yang apabila diklik akan menampilkan postingan secara acak (Display Random Post).
Cara menampilka Link atau Tombol Display Random Post :

1. Masuk ke Blogger kemudian buka Edit HTML.
2. Copy kode dibawah ini kemudian paste tepat diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href + "#random";
}
}
}

function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}

//]]>
</script>
3. Klik tombol Simpan Template.
4. Selanjutnya copy kode dibawah ini kemudian paste pada blog anda, bisa diletakan dibawah postingan atau di sidebar
   
   1. Jikan ingin tampilan berupa link, copy paste kode dibawah ini :
      
      
      <a href="javascript:feelingLucky();">View Random Post</a>
      
      View Random Post
   2. Jika ingin tampil dalan bentuk widget, copy paste kode dibawah ini :
      
      
      <input type="button" onclick="feelingLucky();" value="View Random Post"/>
      
      

Cara meletakkan link atau widget dibawah postingan :

1. Masuk ke Edit HTML.
2. Cari kode <p><data:post.body/></p>
3. Copy kode link atau widget diatas kemudian paste tepat dibawahnya.
4. Simpan Template
5. Lihat Blog anda sekarang.

POSTINGAN TAMPIL DALAM BENTUK KOTAK

Bukan hanya sidebar saja yang bisa ditampilkan dalam bentuk kotak-kotak, postinganpun tidak mau ketinggalan, ingin tampil dam bentuk kotak juga. Untuk contoh cobalah anda buka link ini. Jelaskan, terlihat setiap artikel dari postingan ada didalam sebuah kotak.
Anda mau memiliki postingan dalam kotak seperti itu...? Simak langkah-langkahnya :

1. Sign ke Blogger.
2. Pilih Rancangan.
3. Pilih Edit HTML
4. Cari kode ini
   
   .post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
5. Ganti kode diatas dengan kode dibawah ini.
   .post {
padding:10px; /* Jarak antara text post dengan garis pinggir */
Border-top: 3px solid #C3D9FF; /* warna garis pinggir atas */
Border-bottom: 3px solid #C3D9FF; /* warna garis pinggir bawah */
Border-left: 3px solid #C3D9FF; /* warna garis pinggir kiri */
Border-right: 3px solid #C3D9FF; /* warna garis pinggir kanan */
Margin-bottom: 15px; /* jarak antara post yang satu dengan yang lainnya */
}
   
   Kode #C3D9FF merupakan kode dari warna biru muda . Anda bisa mengganti kode warna tersebut dengan kode warna yang anda sukai.
6. Klik tombol Simpan Tempate ...lihat blog anda yang baru.

Jika ingin menamplkan border melengkung pada keempat sudut seperti pada contoh tadi buatlah seperti kode dibawah ini :

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


Postingan ini telah berhasil dicoba pada blog pergobaan EPG Sudio

POSTINGAN BERGESER KEKANAN KETIKA DIBUKA

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 == &quot;item&quot;'>
#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 == &quot;item&quot;'>
#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.