From: Mr.X-Man
Dear: Nur Layla

Masih adakah ruang dihatimu untukku?
Begitu tebalkah dinding beton hatimu untuk kutembus?
Ataukah hanya Adsense yang mampu menguakkan sedikit rongga
Untuk kudiami barang sejenak
Agar kuberteduh dalam naungan cintamu
Dan kurelekan diriku kau Spoiler sesukamu
Dengan kode-kode rumit kesukaanmu
Dan jangan pernah kau bilang
"AKU TELAH PUNYA"
Kuingin kau katakan
"KINI AKU TELAH MEMILIKI"
Inilah kodenya untukmu seorang

<div style="text-align: justify;">
<span style="color: rgb(0, 0, 0);"><center><div id="spoiler"></div><input style="margin: 10px; padding: 0px; width: 100px;" value="Radio Channel" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Link!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Aremanita'; }" type="button"/>
<div id="show" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 100%;">
<center><h2>Radio Channel</h2>
<iframe frameborder="0" height="250" src="http://radio.indowebster.com/embed.php" id="embed" scrolling="no" width="950" allowtransparency="true" name="embed"></iframe></center></div></center></span></div>

SSemula, Lela baca email itu sambil mendongkol dan setengah bersungut-sungut. Sebel, karena namanya sering munchul di ShoutMix dengan alias-alias berbeda-beda, begitu Lela follow, eh ternyata blog-nya dia lagi, dia lagi dan dia lagi!

Hampir saja ga' Lela terusin baca emailnya kalau ga' penasaran pada sederet code di bawah puisinya. Apalagi Lela ngrasa dia cuman sekilas-sekilas saja buka-buka blog Lela. Buktinya, dia mungkin belum baca tulisan Lela tentang "dihatimu" yang mestinya ditulis "di hatimu" (dengan spasi). Dan lebih tersinggung lagi saat nyebut-nyebut soal Adsense. Lela ngrasa dianggap cewe' matre alias mata duitan.

Karena penasaran, Lela copy juga kodenya dan Lela pasang di blog paling rame dengan glamouritas tainment, tapi - kayaknya - sepi pengunjung. Lela pasang itu di Aremanita MulTiVision. Ouh.., ternyata itu yang namanya Spoiler. Setelah modifikasi sedikit, jadilah tombol-button "Radio Channel".

"Ck-ck-ck" (ketularan gaya Mas Eko yang suka berdecak di tulisan-tulisannya), ternyata fungsi Spoiler emang menghemat ruang. Terutama bagi blog pesolek kayak punya Lela, yang 'sembarangkalir' maunya dipasang.

Huh.., tiba-tiba kemarahan Lela jadi lenyap, berganti dengan terima kasih pada si Mr. X. Karena Lela emang baru tahu apa itu Spoiler. Bersamaan dengan meredanya kemarahan itu, munchul pula kesadaran bahwa tak selayaknya Lela sok ge-er. Dan tidak semestinya Lela selalu anggap serius apa kata orang. Boleh jadi, seseorang cuman bercanda. Yach.., makasih Mr. X. Kalau melihat atau membaca tulisan ini, Lela berharap ini dianggap sebagai apresiasi untuk Anda, Mr. X-Man.

Selamat mencoba, tekan tombol di bawah ini. Silakan modivikasi sendiri sesuai keperluan. Emm.., selamat mendengarkan lag-lagu hits dari radio kesayangan Anda, makasih..

Radio Channel

*** * ***

Pengepakan WebBlog

Serupa dengan Spoiler (dalam segi fungsi) adalah apa yang Lela ga' tahu namanya. Jadi, sebut aja: Pengepakan Website atau WebBlog. Terutama bagi yang ingin mempromosikan bukan hanya sekedar nama, judul atau semacamnya. Tapi langsung blognya ditampilkan seperti di bawah ini. Lela juga pasang di Aremanita (di sana, Lela 'kemas' Padhang Bulan di posisi bawah blog). Bedanya, Spoiler bisa buka-tutup, kalo "pengepakan" ini buka terus.

Mungkin lebih tepat disebut: Blog Dalam Blog. Dan, bisa blog/site siapa pun 'dikantongi', ga' perlu repot buka browser. Praktis, langsung dari halaman blog kita sendiri. Ah, betapa nyaman.."

Print this post
Sincerely,
Padhang Bulan

Learn more »

Pernah mikir untuk membuat textarea dengan latar belakang sebuah gambar? Ditambah efek mouse over.. Saat mouse bergerak di atas textarea background akan berubah warna, begitu pula pada teks. Nah, selain buat copy-paste juga bisa sebagai hiasan pada blog, membuatanya cukup mudah. Liat contoh di bawah ini:



Arahkan mouse kamu di bagian text area ini atau klik untuk melihat tulisan? Latar akan berganti gambar dan teks akan berubah warna jika browser anda mendukung script ini. Jangan lupa komentarnya Lela tunggu ya, makasih..

Cara bikinnya ga' ribet ko':


Langkah 1.:

Letakin script gaya nie di bawah <head> :

<style>
textarea.imageOne{
background-color:000000;
background-image:url(blue_saturn.jpg);
color:00ff00;
}
textarea.imageTwo{
background-color:000000;
background-image:url(butterflies.jpg);
color:ff0000;
}
</style>

Ubah url image "blue_saturn.jpg" dan "butterflies.jpg" dengan url image Anda sendiri.

Langkah 2.:
Letakin text-area kayak di bawah nie ditempat yang kamu mau:


<textarea
rows="12" cols="74"
class="imageOne"

onMouseOver="this.className='imageTwo'"
onMouseOut="this.className='imageOne'">
.
.
.
Text kamu di sini
.
.
.
</textarea>

Background-color: 000000;. Background-color biasanya harus sama dengan gambar latar belakang warna, biar ga berlawanan warna dengan gambar itu sendiri. Saat dihighlight latar belakang seperti tidak berubah hanya gambar saja yang hilang.

Warna teks : ff0000; dan warna: 00ff00; yaitu teks warna merah dan hijau, itu digunakan untuk merubah warna pada saat mouse over.

Mungkin pada browser lain akan berbeda, misalnya IE, NS6, dll. Coba aja lah, ga' ada ruginya, yang penting komentar..

Menu Efek Mouse

Nie masih ada hubungannya dengan efek mouse. Karena itu, Lela gabungin aja di posting sini. Cuma fungsinya buat "Menu Link" yang keren, lain dari biasanya lah..



Silakan edit sesuka kamu kode di bawah ne semuanya gratis. Tinggal copy-paste aja. Kalau ada yang ngribetin pikiran nanya aja ke Lela. Ga' usah segan-segan, ntar sesat di jalan. Lagian.., masa' sich nanya ma cewe' bisa njatuhin martabat?!


<style type="text/css">
html {
overflow: hidden;
}
body {
background: #222;
}
#menu {
padding: 10px;
background: #000;
height: 300px;
width: 400px;
}
#menu a {
display:block;
text-decoration:none;
font-family: arial, helvetica, verdana, sans-serif;
white-space: nowrap;
}

</style>

<script type="text/javascript"><!--
// ===============================================================
// -------- M6 menu ------
// script written by Gerard Ferrandez - Ge-1-doot - December 2005
// http://www.dhteumeuleu.com
// edited by: http://blogumulus.blogspot.com on June, 30, 2009
// ===============================================================
//
var P,T;
var over = -1;

///////////////
var fontSize = 38;
var lensFX = 1;
var num = true;
var color = "#FFF";
var selected = "#F80";
///////////////

function zoom(s){
if(s!=over){
over = s;
for(var i=0;i<T;i++){
P[i].style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px";
P[i].style.color=(i==s)?selected:color;
}
}
}

onload = function(){
P = document.getElementById("menu").getElementsByTagName("a");
T = P.length;
for (var i=0;i<T;i++){
if(num){
x=i+".";
if(x.length<3)x="0"+x;
P[i].innerHTML = x+P[i].innerHTML;
}
P[i].style.width = "100%";
P[i].onmouseover=new Function("zoom("+i+");");
}
zoom(0);
}
//-->

</script>
</head>

<body>

<div id="menu">
<a href="../scripting">scripting</a>

<a href="../javascript">javascript</a>
<a href="../web">web</a>
<a href="../dhtml">dhtml</a>

<a href="/css">css</a>
<a href="../ajax">ajax</a>
<a href="../programming">programming</a>

<a href="../design">design</a>
<a href="../webdesign">webdesign</a>
<a href="../html">html</a>

<a href="../dom">dom</a>
<a href="../webdev">webdev</a>
<a href="../reference">reference</a>

<a href="../tools">tools</a>
<a href="../tutorial">tutorial</a>
<a href="../xmlhttprequest">xmlhttprequest</a>

<a href="/menu">menu</a>
<a href=".../xml">xml</a>
<a href=".../library">library</a>

<a href="../development">development</a>

</div>

</body>
</html>

Jangan lupa posisi kode masing-masing. Pilah-pilah sendiri sesuai tata letaknya di template. Jika perlu, kunjungi sumber: Paman RagDoll atau pada yang lebih pakar dan dapetin kodenya duluan dari Lela, Mas Eko.

ZOOM TEXT

Buat zom text seperti di bawah ini:

(Balik lagi ke sini ya, coz.. ini masih mau Lela sempurnakan. Siapa tahu ada hal lain yang bisa Lela tambahkan. Pastinya.., kode zoom text ini belum Lela pasang. Kecuali bila kamu mo nanya langsung ke Paman RagDoll, silakan..)
"KALO BELUM BISA JANGAN SAMPE NANGIS, APALAGI PAKE AIR MATA DARAH"





















Learn more »

Siapa yang meragukan kedahsyatan faktor kali? Siapa yang menganggap remeh kehebatan penyebaran produk dengan pemasaran sistem Multi Level Marketing? Nah, saya ingin mencoba mengajak anda semua untuk memanfaatkan kedahsyatan faktor kali dan kecepatan penyebaran ini dalam bentuk backlink.
Caranya sangat mudah. Anda hanya perlu meletakkan link-link berikut ini di blog atau artikel Anda dengan cara copy-paste.

1. Friendster
2. Google
3. Bisnis Online
4. dimas0883 blogspot
5. Freeware-Asik
6. Uang otomatis
7. Seti@wan Dirgant@Ra
8. Arumsekartaji
9. ANTaPhoenixers
10. Padhang Bulan
    

Tapi ingat, sebelum anda meletakkan link diatas, anda harus menghapus peserta nomor 1 dari daftar. Sehingga semua peserta naik 1 level. Yang tadi nomor 2 jadi nomor 1, nomor 3 jadi 2, dst. Kemudian masukkan link anda sendiri di bagian paling bawah (nomor 10).

Jika tiap peserta mampu mengajak 5 orang saja, maka jumlah backlink yang akan didapat adalah:

Ketika posisi anda 10, jumlah backlink = 1
Posisi 9, jml backlink = 5
Posisi 8, jml backlink = 25
Posisi 7, jml backlink = 125
Posisi 6, jml backlink = 625
Posisi 5, jml backlink = 3,125
Posisi 4, jml backlink = 15,625
Posisi 3, jml backlink = 78,125
Posisi 2, jml backlink = 390,625
Posisi 1, jml backlink = 1,953,125

Dan semuanya menggunakan kata kunci yang anda inginkan. Dari sisi SEO anda sudah mendapatkan 1,953,125 backlink dan efek sampingnya jika pengunjung downline lalu mengklik link Anda itu, maka anda juga akan mendapatkan traffict tambahan.

Nah, silahkan copy paste artikel ini, dan hilangkan peserta nomor 1 lalu tambahkan link web anda di posisi 10. Ingat, Anda harus mulai dari posisi 10 agar hasilnya maksimal. Karena jika anda tiba2 di posisi 1, maka link anda akan hilang begitu ada yang masuk ke posisi 10. Nggak ada salahnya khan mencoba? Mari kita lihat bagaimana efeknya. BOOM! (Artikel ne import asli dari upline Lela)
*** * ***

Jangan segan donk jadi downline Lela, Lela ga' bakal nginjek ko'. Emm.., kasih comment juga, itung-itung nyoba keampuhan 'jurus dofollow'. Makasih.."

Print this post
Sincerely,
Padhang Bulan

Learn more »

“Pagi, Lela.. Wah, makin banyak bintang yang bertaburan. Halah, masih ga bisa nih bikin puisi... Maksudnya, asesories blognya...”

Itulah sapa khas Mas Ko. Itu artinya Mas Ko nyuruh Lela aja yang posting kode “go to”. Maklum, Mas Ko banyak kerjaan di kantor. Na.., kalo kerjaan kantor ada yang belom kelar, biasanya badannya suka ajeb-ajeb ga’ karuan gitu. Tapi kalo ‘dah ngadep laptop dan OL, bisa betah sampe semaleman. Sarapan paginya malah sampe dianterin ke kamar yang.. ampyuuun berantakan! Habis sarapan, paling-paling ngloyor ogah-ogahan buat manasin motor, trus balik lagi ngukur panjang-lebar kasur seharian. Huh!

Pernah Lela cek malem-malem, sekali tempo ketiduran berbantal lengan di atas keyboard. Trus Lela perhatiin monitor penuh dengan kode-kode:

Jfjwegl’lr ‘o fkeifk43258==v =09iv m 0664v 89 3552164#$$ $R*)!+ %$# msd jrj 245bn@ 244#$U 2164#$$ $R*)!+ %$# msd jrj 245bn@ 244#$U
=v =09iv m 0 Jfjwegl’lr ‘o fkeifk43258= fkeifk43258==v =09iv m 0664v 89 3552164#$$ $R*)!+ fkeifk43258==v =09iv

Tapi.., sekilas aja Lela dah ngerti itu bukan kode javascript/HTML. Ga’ ada kode buka(<)–tutup(/>)nya. Umumnya kan.., di tata letak Edit HTML kita akrab dengan semisal: <body>. Na.., kode ne: <a name='Atas'/> letakin di bawahnya. Trus.., pasang kode:

<a href='#Atas'> Naik ke punchak</a>

dalam posting (entri blog) di posisi manapun kita mau, maka klik:

“Naik ke punchak”

mengantarkan kita langsung ke puncak blog.

“Naik ke punchak” bisa diubah (bukan dirubah, karena rubah nama binatang) dengan url image tertentu jika mau. Misalnya tanda panah. (Emm.., Lela jadi ingat ledekan Mas Ko, 15/6 ybl, “Kini, akan kulepaskan anak panahku tepat di hatimu.. ” Mas Ko bikin Lela jengah aja).

Atau.., pake cara kedua, lebih praktis. Bisa langsung pasang kode di dalam posting tanpa pasang kode apa-apa di layout Edit HTML. Langsung paste di entri blog (tentunya di bagian bawah, karena fungsinya kan mau naik ke puncak secepat kilat). Ne kodenya:

<div class="toplink" align="right"><a href="#">Top of page <img alt="Up" src="http://g.imagehost.org/0497/arrow_2.jpg" width="13" height="12" border="0"></a></div>

Kode “#” itulah yang jadi rujukan dan membawa kita ke puncak blog. Ubah kode “#” menjadi: “post”, maka kita akan dinaekkan hanya sampai di title-judul posting.

Cobalah ubah-ubah dengan kode rujukan lainnya, misalnya “comment” dsb. Kata Mas Ko, dengan banyak eksperimen, makin banyak pengalaman dan pengetahuan. Coba klik tanda panah tuh..

*** * ***
Jadi ingat Mas Ko Lagi ne.. Atau jangan-jangan.., sederetan huruf dan symbol yang tampaknya ga' beraturan di atas tuh bahasa sandi untuk komunikasi dengan "yang lain" agar ga' bisa difahami Lela[?] Ah.., Lela ko' jadi lebih seneng kalo dugaan Lela salah. Dari pada ada yang laen, Lela lebih milih dugaan bahwa sederetan kalimat itu mungkin bahasa komunikasi dengan dunia mistis dengan selubung tebal aura narcis-nya. Moga2 aja..[]
*** * ***
Seti@wan Dirgant@Ra Said,
Jumat, Juni 19, 2009 6:30:00 AM

Saya lebih tertarik dengan kode pertama, kayaknya ada misteri di balik itu karena ada beberapa angka yang berulang.

ɐႨәႨ ɹnu menjawab,
Jumat, Juni 19, 2009 21:30:00 AM

Oh.., Pak Guru Amriawan salah kira, ternyata 'kode-sandi' itu munchul di monitor karena kepencet lengan Mas Ko di atas keyboard ditambah ketindih wajahnya yang telungkup di situ.. Gitu loh ceritanya..

Beyond Mind

memang sakit diputusin
tapi jangan dipikirin
cari aja cowok lain
biar enggak nyiksa batin

sungguh jangan dilamunin
nanti kamu tambah pusing
bisa-bisa kamu gila
gara-gara mikirin dia

jangan gila dong
cowok bukan dia aja

jangan gila dong
masih banyak yang lainnya

jangan gila dong
malu sama kuching garong

jangan gila dong
masih banyak yang berondong

jangan gila donk..
jangan gila donk..

"When I loved myself enough"


Print this post
Sincerely,
Padhang Bulan

Learn more »

Tidak semua blogger kreatif utak-atik html/java script codes. Sebagian dari mereka lebih mengutamakan isi (entri) ketimbang ‘sekedar’ asesoris. Persoalannya ketika sebuah posting terbilang panjang (melebihi standard 700 word), kadang kita butuh cepat kembali ke atas atau ke bawah entri untuk (maaf) mlototin yang kita perlukan.


Untuk yang pengen meluncur-terjun langsung ke bawah, silakan kopi kode berikut ini. Hanya saja, Lela tidak sediakan url image-nya dengan harapan Anda bikin sendiri sesuai selera Anda. Lela tak ingin memasung potensi-kreatif yang sebenarnya dimiliki setiap individu dengan model siap saji . Terlebih lagi, ikon yang tersedia, bila terlalu banyak yang pakai akan munchul agak lambat, buktikan dengan ikon yang privat.

Kode untuk ‘terjun bebas’ ini diletakkan di bawah: </b:section> yang pertama Anda jumpai, paling atas.

<a href='#comments' style='display:scroll;position:fixed;top:275px;right:5px;' title='Komentar, ah..'><img src='http://terjun-bebas.gif'/></a>
<br/>
<br/>
<br/>
<a href='#footer' style='display:scroll;position:fixed;top:5px;right:5px;' title='Go to Bottom'><img src='http://senyam-senyum.png'/></a>

Ganti url blink di atas dengan tanda panah mengarah ke bawah misalnya. Dan ikon itulah yang berfungsi melunchurkan page-halaman langsung ke footer (catatan kaki). Sedang untuk url kedua, di bawahnya hanya penarik perhatian. Namun.., bila dikehendaki, boleh saja dikasih rujukan ke kotak komentar misalnya (choba klik, na.. langsung ke komentar kan?).

Yang berminat ‘terjun-bebas’ silakan copy kode modifikasi Lela di atas. Bila pengen kode yang melunchur ke atas silakan ambil di Tipspack. Lela sekedar melengkapi saja postingan Mas Ko yang Lela rasa ‘tanggung”*. Lela pengen sesuatu itu tuntas, posting sebelum ini misalnya Lela revisi sampai tiga kali dalam rentang (interval) waktu 48 jam sebagaimana Lela janjikan.

Harap tidak ada interpretasi yang bukan-bukan. Walau posting ini melengkapi posting Mas Ko, tapi Lela vs Mas Ko tidak ada MoU (nota kesepahaman/kesepakatan) apapun selain sekedar saling ledek. Master Ko ibarat mentari, Lela bulannya (Master Jakabanda suka nyebut Lela: Rembulan). Kodrat alamnya, bulan sekedar memantulkan energy cahaya matahari. Makasih..

*) "Telanjur basah ya sudah mandi sekali.." [Meggy Z(?)] (Bahasa Indonesia yang benar adalah “telanjur”, bukan “terlanjur” dari kata dasar “lanjur”)

Di kode Lela di atas, Lela kasih 'bonus' buat nambahin 'pengalih perhatian', sesuatu yang ga' diberikan oleh Mas Ko. Lela cuma pengen jadi orang yang kalau dibaikin maka dia ngasih kebaikan lebih. Kayaknya, agama ngajarin gitu..[?]
*** * ***

Tingkatkan Kreatifitas

Sebagian orang suka blog yang simpel, tidak banyak assesories maupun widget. Mereka biasanya kalangan akademisi dengan artikel-artikel yang panjang ulasannya. Mengaplikasikan kode di atas pada halaman tertentu saja bagi mereka lebih disukai. Di WordPress, itu disebut link satu halaman dengan memasang kode "anchor name" yang bisa diaplikasikan tidak hanya buat fungsi "go to" up/bottom, tapi bisa ke manapun baris kalimat yang hendak dituju. Sayangnya, di Blogger ga' bisa. Lihak contoh "Kembali Ke Puncak" di sini. Jangan suka ada di bawah, "Tangan di atas lebih baik dari tangan di bawah".

Untuk yang belum berhasil memodifikasinya, silakan tengok-tengok di Tipspack. Lela tak ingin mendahului Mas Ko "Tipspack". Kecuali jika di Mas Ko ga' ada dan Anda minta ke Lela, tentu dengan senang hati Lela kasih..[]


Print this post
Sincerely,
Padhang Bulan

Learn more »

Here is my latest widget for Blogger/ Blogspot; I am going to call it Statistics Widget for Blogger. I have noticed a few sites displaying blog statistics like, total number of posts, total number of comments, total words in posts, total words in comments and similar data on their sidebar. I thought of coming out with a similar widget for Blogger.

What is Statistics Widget for Blogger?
Statistics Widget for Blogger will display the total number of posts and total number of comments on your blog. As of now, I have included only these two data for display. I do not see any value in displaying the total words in posts and total words in comments. I find them meaningless. If you are interested to display the total number of posts and total number of comments on your blog, please follow the instructions below.

Instructions to install Statistics Widget for Blogger

1. Log in to your Blogger account


2. On your Blogger Dashboard, click on the "Layout" link
   
   


3. This will take you to the "Page Elements" tab. Decide where you want to insert the statistics widget and click on the "Add a Gadget" link accordingly.
   
   


4. Scroll down the list and find "HTML/ Javascript" and click on the "+" button
   
   


5. This will open the "Configure HTML/ Javascript" window. In the title section, please type "Blog Statistics" or "Blog Information" or "Blog Data" or any other title as you may wish


6. In the content section, please copy & paste the following code:
   

   <script style="text/javascript">
   
   function numberOfPosts(json) {
   document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
   }
   
   function numberOfComments(json) {
   document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
   }
   
   </script>
   
   <ul><li><script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>
   
   <li><script src="http://yourblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>
   
   <span style="font-size:75%;"><a href="http://blogumulus.blogspot.com/2009/06/statistics-widget-for-blogger.html" target="_blank">Widgets for Blogger</a></span>



7. Remember to replace the text in bold "yourblog" with your blog address. Take note to replace it in two locations.


8. Your window should look like the image below.
   
   


9. I have a link back to my blog at the bottom. You are free to remove the credit, if you don't like it


10. Click on "Save" button at the bottom right hand corner

That's it. You have created a widget to display the number of posts and number of comments on your blog. Please contact me if you have any doubts or you face any problems with the widget.

Please subscribe to my feed if you like this post

Print this post
Sincerely,
Padhang Bulan

Learn more »

How to create an “Admin Control Panel” in your Blogger template

Hiding the Blogger nav-bar is one of the most popular customizations for Blogger blogs. The advantage of this is that your blog design does not immediately appear to be powered by Blogger, and it is very useful for designs where the appearance of the nav-bar distracts from the overall design of the blog.

The only downside of removing the nav-bar is that the admin links for “New post”, “Customize” and “Log Out” are no longer visible. When the nav-bar is visible, blog administrators can create a new post or customize their layout with just one click; when the nav-bar is hidden, many more clicks are required to access the dashboard panel again.

In this post, I’ll explain how you can easily add a “Admin Control Panel” widget which enables one click access to the main sections of your dashboard if you have hidden the Blogger nav-bar from your layout.

First things first!

There are two things we need to do before adding the control panel to our Blogger template:

1. Make a back-up of the existing template


2. Find our unique Blog ID number

Let’s go through both of these in order.

Make a back-up of your Blogger template

As we are adding code directly to the Blogger template for this customization, it is omportant to make a back-up of the existing (working) template code.

Then if we do make any major errors, we can easily restore the original working template to our blog.

To make a back-up of your Blogger template, go to Layout>Edit HTML in your Blogger dashboard, and look for the “Download full template” link near the top of the page.

Clicking on this link will prompt you to save your existing template as an XML file to your computer hard drive. You can change the name of the file and choose the location to ensure it is easy to find if you need to use this later.

Locate your unique Blog ID number

To create the admin control panel, we need to use your unique Blog ID number, as this will form part of the URL required for admin links.

To find your Blog ID number, log into Blogger and ensure you have accessed the dashboard you intend to work with.

While you are logged in, access any page of your Blogger dashboard and take a look at the address bar in your browser:

Locating your Blog ID number

Within the URL you will notice a string like this:

blogID=XXXXXXXXXX

Where XXXXXXXXXX is the unique identifier for your blog.

You need to make a note of the BlogID number for the blog you wish to work with so we can add this in the links for your admin control panel.

Adding the control panel to your template

The Admin Control Panel will only be visible when the owner/author of the blog is logged into their relevant Blogger account. It is invisible to blog readers, similar to the “edit post” and “edit widget” links which are only visible while you are logged in and viewing your own blog.

To add the control panel to your Blogger template, go to Layout>Edit HTML and do not check the “Expand widget templates” box.

Then search for the following line of code (or similar):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Immediately before this line, paste the following section of code:

<span class='item-control blog-admin'>
<h2>Admin Control Panel</h2>
<a href='http://www.blogger.com/post-create.g?blogID=BlogIdNumber'>New Post</a>
|

<a href='http://draft.blogger.com/blog-options-basic.g?blogID=BlogIdNumber'>Settings</a>
|
<a href='http://www.blogger.com/rearrange?blogID=BlogIdNumber'>Change Layout</a>
|
<a href='http://www.blogger.com/html?blogID=BlogIdNumber'>Edit HTML</a>

|
<a href='http://www.blogger.com/moderate-comment.g?blogID=BlogIdNumber'>Moderate Comments</a>
|
<a href='http://www.blogger.com/logout.g'>Sign Out</a>
</span>

Replace all instances of BlogIdNumber with your unique BlogID.

Once you have done this, preview your template. You should not see any of the code for the Admin Control Panel appear in your template during the preview! If all is well, you can then proceed to save your template.

Now take a look at your blog. While you are logged in to Blogger, you should notice your control panel appear above the widgets in your sidebar.

If you log out of Blogger and look at your blog, you will not see the control panel appear (this is also how your readers will see your blog).

How this works

The code for the control panel is wrapped in span tags with the class of “item-control blog-admin”. These CSS classes are not included in your Blogger template code, but are instead added in when your blog pages are generated by Blogger’s external scripts.

These classes also apply for your post and widget editing icons (the familiar pencil and wrench icons) which are invisible to readers of your blog.

The links will still be visible if a reader views the source code of your blog. However, these links are only accessible by the administrators of the blog. If anyone else attempts to access these pages, they will be asked to log in to their own Blogger account and would be unable to make any changes to your own blog.

How to hide the Blogger nav-bar

If you do not already hide the Blogger nav-bar in your template, you can achieve this in just a few simple steps:

1. Go to Layout>Edit HTML in your Blogger dashboard.


2. Locate the closing &lt;/b:skin&gt; tag


3. Just before this tag, add the following lines of code:
   
   

   #navbar-iframe {
   height:0px;
   visibility:hidden;
   display:none
   }

   
   


4. Then save your template

These few lines of CSS code hide the Blogger nav-bar from the design. The code is still present in the source code, and all functions generated by the nav-bar will still work.

Your opinions?

I hope this tutorial will be useful for those who hide the Blogger nav-bar and still require easy access to the main functions of their Blogger dashboard. Please let me know your opinions or offer suggestions for improvement by leaving your comments below.

Written by Amanda Fazani from Blogger Buster on September 22, 2008 | Filed Under Blogger

Print this post
Sincerely,
Padhang Bulan

Learn more »

W
ould you like to display a list of the top commenters in your blog? This widget will enable you to do exactly that! If you install this widget, a list of the top ten people who have commented most in your blog will be displayed with along with the count of comments they have made.

This is a great way of thanking readers who comment regularly and is very easy to add to your blog layout using the one click widget installer.


To install this widget in your own blog, simply change the title to suit your preferences and alter the URL to match that of your blog.

If your blog has a Blog*Spot URL, you should enter your URL like this:

yourblog.blogspot.com

If you use a custom domain for your blog, simply enter the URL of your blog's domain.

In either case, do not add the "http://" part! This is already rendered by the script used to display the commenter feed.

If you would like to remove your own name from the list, enter your name in the "Filter Your Name" box.

Use the form below to add this widget to your own Blogger powered blog:

This widget is based on the Top Commentators Widget for Blogger which was created by Assess My Blog. It uses Yahoo Pipes to process the last 500 comments made on your blog, and displays a list of the ten people who have commented the most in this range.

Each name is linked to the most recent comment on your blog made by this person (since it would be very difficult to create a generic script which would work for all blogs and comment settings!).

Update: I have now added an extra element which allows you to remove your own name from the list of Top Commenters (thanks to Carrotmadman6 for the tip!).

I have tested this extensively in IE6/7 and Firefox and in these browsers the script and display work just fine. If anyone notices a glitch or problem in other browsers, please let me know so I can work on solving the issue.

If you find this widget useful, please tell your friends or bookmark this post using your favorite service. I have worked long and hard to create this installer and really appreciate your help in spreading the word about this new tool :)

SARAN TERBAIK

Render code dari widget di atas akan secara otomatis menempatkan widget Top Komentator biasanya di jajaran widget paling atas, kadang dekat header. Dari pada begitu, lebih baik kita letakkan secara manual saja di tempat yang kita mau dengan langsung pasang kodenya, toh hasilnya sama saja. Inilah kode hasil rendering yang tinggal mereplace url-nya saja. Angka 10 juga bisa diganti sesuai kehendak kita mau tampilkan berapa komentar.

<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ol>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ol>");
}
</script>
<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=c92ac21897d8b56e61cfa85930dd89a1&url=http%3A%2F%2FBLOGNAME.blogspot.com&num=10" type="text/javascript"></script>

Untuk recent comments bisa pakai di bawah ini, juga tinggal mengubah (bukan merubah, ntar jadi binatang rubah) url-nya saja:

<script style="text/javascript" src="http://h1.ripway.com/padhangbulan/RecentComments.js"></script><script style="text/javascript">var a_rc=3;var m_rc=true;var n_rc=true;var o_rc=100;</script><script src="http://blogumulus.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Imported from: Amanda

Print this post
Sincerely,
Padhang Bulan

Learn more »

This hack was originally developed by Ramani of Hackosphere, though for this tutorial I have further simplified the process so there are only two steps required:

1. First you should make a back-up of your existing template by going to Template>Edit HTML in your Blogger dashboard and clicking the "download full template" link which is near the top of the page. It is always good practise to back-up your template before making any modifications at all, just in case you make a mistake and later need to use your old template again.


2. Next you will need to find the following line of code in your blog's template:
   

   <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

   
   
   To find this line, you do not need to tick the expand widget templates box. This is the un-expanded tag used to display the label widget in your blog template. Highlight all of this line, and replace this with the following section of code:
   
   
   Then save your template and take a look at your new drop-down menu!

Once installed, you can then move the label widget to other areas of your blog in the layouts section of your dashboard, just like any other widget.

I hope this tutorial has been useful to you. Please feel free to leave your comments and suggestions below.

Imported from: Blogger Buster
For example: My blog label on Bird a View

Print this post
Sincerely,
Padhang Bulan

Learn more »

Ada dua cara untuk membuat post summary (menampilkan sebagian saja dari permulaan entry posting, atau sebut saja: "read more" di blogger / blogspot baru (tanda Blogger Baru adalah di admin memakai layout / tata letak dan page element / elemen halaman).

Cara Pertama:

1. Buka template -> Edit HTML -> kasih tanda tik pada menu "expand widget tempate" (lihat gambar 1)

2. Letakkan kode berikut persis di atas kode </head> (lihat gambar 2)

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

3. Letakkan kode berikut di bawah kode

<p><data:post.body/></p>

(lihat gambar 3)

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

4. Klik Simpan. Selesai.

5. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:

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

Jangan lupa klik SIMPAN PENGATURAN.

Gambar 1:



Gambar 2:



Gambar 3:



Cara memposting

Ketika memposting, klik EDIT HTML (bukan COMPOSE). Maka, secara otomatis akan tampak kode

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

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry/artikel), letakkan di antara kode:

<span class="fullpost">

dan

</span>

Masalah yang sering dihadapi

1. Saat mengklik "Simpan Perubahan" kita sering mendapat pesan demikian:

XML error message: The element type “style” must be terminated by the matching end-tag “”.

Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ' dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip ['] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.

2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Dan tulisan ‘read more’ nongol di bagian bawah artikel? Tenang. Ikuti solusi berikut: klik “Pengaturan” -> klik “Format” -> buang/delete semua tanda kutip buka/tutup (quote/unquote) di “fullpost” dan ganti dengan tanda kutip yang baru. Jangan lupa klik “Simpan”.

Selesai. Selamat ngeblog di blogger / blogspot dengan READMORE.

Apabila Anda berhasil melakukan cara bikin READ MORE di atas tak perlu lagi mencoba cara di bawah. Cara di bawah cuma sebagai alternatif dan agak lebih rumit di banding cara yang di atas.

Cara Kedua:

1. Buka template –> edit HTML
2. Kasih tanda tik/cek menu “expand widget template”
3. Cari kode berikut di TEMPLATE blog Anda:

<div class='post-header-line-1'/>
<div class='post-body'>

4. Kalau sudah ketemu, letakkan kode berikut DI BAWAH kode html di atas:

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

5. Di bawah kode di atas ada kode html sbb:

<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

6. Nah, di antara kode:

<p><data:post.body/></p>

dan kode:

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

pasang kode html ini:

<a expr:href='data:post.url'>Read More .. </a>
</b:if>

7. Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna biru adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):

<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'>Read More......</a>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Klik Simpan Template. Selesai.

8. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:

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

Jangan lupa klik SIMPAN PENGATURAN.

Cara memposting

Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode:

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

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry), letakkan di antara kode:

<span class="fullpost">

dan

</span>

Catatan Penting:

Entry yg diposting sebelum pemasangan kode READ MORE di atas akan tetap tampil penuh di halaman muka, Anda bisa mengeditnya dg cara sbb:

1. Klik menu EDIT POSTS
2. Klik EDIT di artikel yg akan diedit.
3. Pasang kode:

<span class="fullpost">

di bawah paragraf yg akan ditampilkan. Dan pasang kode:

</span>

di akhir artikel.


Masalah yang Sering Dihadapi

1. Saat mengklik “Simpan Perubahan” kita sering mendapat pesan demikian:

XML error message: The element type “style” must be terminated by the matching end-tag “”.

Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ‘ dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip ['] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.

2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Solusi: klik “Pengaturan” -> klik “Format” -> buang semua tanda kutip buka/tutup di “fullpost” dan ganti dengan tanda kutip yang baru. Jangan lupa klik “Simpan”.[]

Diimport dari: Pak Guru Fatih

Lebih lanjut..

Catatan Lela, bahwa "Read More" itu bisa diganti-ganti menjadi: "baca lagi", "selanjutnya" dsb, bahkan bisa diganti dengan gambar kesukaan Anda. Seperti "READ MORE" di blog ini. Tinggal ganti kalimat "Readmore" itu dengan url image tertentu. Misal: <img src="http://1234.photobucket.com/readmore.png">.

Readmore Otomatis

Penting :
Sebelum beranjak lebih jauh, pastikan residu-residu readmore yang telah tertanam sebelumnya sudah dibersihkan. Atau diistilahkan dengan mengembalikan kode template seperti semula. Caranya dengan mereview ulang posting readmore yang pernah kamu pasang dalam blog kamu.

Berikut trik blogger membuat readmore otomatis:

• Login ke account blogger kamu.
• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips:
Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode </head> dan Copy-Paste (copas) kode berikut di atasnya.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :

1. Kode var thumbnail_mode = "float" ; diartikan bahwa readmore kamu akan diatur di sebelah kiri, kalau kamu ingin tanpa pengaturan float silakan ganti dengan "no-float".
2. Kode summary_noimg = 450; berguna untuk mengatur jumlah karakter yang ditampilkan tanpa image (gambar).
3. Kode summary_img = 450; berguna untuk mengatur jumlah karakter yang ditampilkan dengan image (gambar).
4. Kode img_thumb_height = 120; berguna untuk mengatur tinggi image (gambar) yang akan ditampilkan.
5. Kode img_thumb_width = 120; berguna untuk mengatur lebar image (gambar) yang akan ditampilkan.

• Cari kembali kode seperti di bawah ini.

<data:post.body/>

atau

<p><data:post.body/></p>

• Kalau sudah ketemu, ganti kode tersebut dengan kode berikut.

<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:left'><a expr:href='data:post.url'>Readmore »» <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Catatan :

1. Ganti kode yang berwarna merah dengan letak readmore yang kamu inginkan left (kiri) atau right (kanan).
2. Kalau perlu ganti Readmore dengan kata favorit kamu.
3. Hapus kode <data:post.title/>, jika kamu tidak menginginkan readmore diikuti dengan judul posting.

• Jangan lupa disimpan.

Selamat membuat readmore otomatis..

Print this post
Sincerely,
Padhang Bulan

Learn more »