Merayakan Kemenangan

Tak terasa telah 30 hari kita lewatkan dengan amal dan ibadah yang dilipat gandakan oleh Allah SWT, di mana bulan yang penuh berkah ini menjadi bulan pencuci segala khilafan kita di 11 bulan yang lalu, sekarang bulan Ramadhan meninggalkan kita dan mengantarkan kita sampai pada titik kemenangan melawan hawa nafsu manusiawi.

Saya sebagai insan yang penuh khilaf mengucapkan Selamat Idul Fitri 1429 H , Minal Aidin Wal Faidzin , Mohon Maaf Lahir dan Bathin.

Saya ucapkan banyak terimakasih kepada neng cebong yang telah memberikan izin memakai kartu lebaran ini dan juga telah membuatkan header khusus spesial lebaran untuk blog ini. Silahkan sobat mampir ke tempat neng cebong yang penuh dengan koleksi kartu lebarannya silahkan kilik di sini untuk langsung menuju ke TKP nya. Saya kasih lihat hasil beberapa karya neng cebong ini.

Membuat 2 atau 3 kolom di bawah header

Penutup tutorial blog di bulan puasa ini , saya akan memposting bagaimana cara membuat 2 kolom di bawah header , ini buat sobat blogger yang suka menaruh banyak widget untuk mempercantik blognya, dan sempat di tanyakan juga oleh pembaca blog ini yaitu sobat badot, setelah mencari inspirasi akhirnya ketemu juga bagaimana caranya membuat 2 kolom di bawah header, kalau mau lihat screenshotnya di bawah ini :

Screen shootnya
Dan hasil nyatanya sementara ini saya aplikasikan di blog ini
Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Simpan hasil pekerjaan sobat
3. Kemudian cari kode <div id='main-wrapper'>, setelah ketemu masukkan kode di bawah ini di atas kode tersebut.

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Simpan kembali hasil pekerjaan sobat
4. Setelah selesai menyimpan, kemudian sobat ke Layout dan lihat hasilnya.

Kode pada tahap 3 bisa sobat modifikasi apabila ingin menambahkan 3 kolom di bawah header yang perlu di perhatikan adalah widht dengan floatnya!!

Tapi kalau sobat bingung saya sudah sediakan kode untuk menambahkan 3 kolom di bawah header, silahkan ikuti langkah 1 dan 2 kemudian ketika tahap 3 masukkan kode ini :


<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


Semua tergantung kebutuhan sobat dalam menambahkan widget, dan saya sampaikan terimakasih banyak telah menjadi pembaca setia blog ini :p . Happy blogging sobat and be Thinking Out Of The Box!!

Membuat post signature

Everyone knows the signature is also your identity which can tell a little secret about your character - by Mochal
Sekarang lagi bingung mau posting apa ga ada bahan baru ya pakai bahan lama aja deh :p , kebetulan ada yang nanya bagaimana cara membuat post signature ya saya buatkan aja tutorialnya sekalian kalau ada nyasar and yang belum tahu bisa lihat postingan ini wekekeke :p , langsung aja deh bro bagaimana cara membuat post signature seperti screenshoot di bawah ini :
Post signature
Mau tahu cara buatnya?

1. Hal yang pertama sobat lakukan adalah sudah mempunyai url gambar signaturenya banyak cara untuk membuatnya bisa di microsoft paint , atau pengolah gambar lainnnya yang sobat kuasai.

2. Kalau sudah membuat dan menyimpan di file hostingan tinggal memasukkan ke dalam kode di bawah ini :


<p>
<img align="right" alt="post signature" height="34" src="URL IMAGE SIGNATURE" style="" width="96" />
</p>

Ganti URL IMAGE SIGNATURE dengan alamat url image signature sobat

3. Sekarang tinggal menaruhnya di setiap postingan yaitu dengan cara masuk ke Setting > Formating > post template copy kode tersebut dan masukkan di kotak kolom post template kemudian save dan ketika sobat mau memposting kode ini sudah ada di dalam Mode Edit HTML.
Yup simple dan sangat mudah di lakukan bagi siapa saja termasuk anak-anak wekekekekek :p . /lari kabur aaah....

Virus PR 10 di mana-mana!!!

Gak nyangka di dunia blogger ada namanya virus juga, ga cuman di dunia nyata virus ini menyebar ke mana-mana setiap saya berkunjung ke blog sobat!!! Waaaah untungnya virus ini tidak berbahaya buat kesehatan manusia apalagi kesehatan blog sobat wekekeke.... pengen tahu juga siapa nigh yang pertama mulai menulari virus ini sampai-sampai blogger mania terinfeksi virus ini termasuk saya wekekekeke :D . Virus ini di sebut PR 10 yang menginfeksi sobat blogger supaya menceritakan 10 Habits and Facts about Yourself. Nah virus ini telah di tularkan ke saya oleh mba diah, mas bayu, neng acy, dan kang yoga. Karena saya sudah tertular virus ini saya terpaksa menceritakan siapa jati diri dan kebiasaan saya :p .
Mau tahu tentang saya?

10 Habits and Facts about Guruh Subagya :
Faktanya :
1. Hanya anak manusia yang di beri nama Guruh Subagya dan di panggil Mochal alias pemalu wekekek :p
2. Kata teman-teman mirip penyanyi muda Afgan ( sebenarnya dia kutukannya gw-red)
3. Anak terakhir dari 3 bersaudara
4. Memilihara kucing cowok namanya Cella
5. Belum menikah alias masih bujang wekekekekekek ( fotocopy formulirnya bisa di pesan kalau berminat-red)
Habbits :
6. Masih suka tidur bareng kucing wekekekekke.. ( tapi ga di apa-apain lho- red)
7. Suka oprek-oprek komputer ampe habis 3 CPU di rumah wekekekekek
8. Mulai suka ngeblog di temenin kopi ama rokok sebungkus ( jangan di tiru sob -red)
9. Suka sama musik-musik jalur keras (underground - punk not death)
10. Kata teman-teman guwe narcis wekekekeke ( tapi gw ga nyadar juga -red)

Gara-gara virus nigh ke buka deh identitas diri gw , nah sekarang saya tular kan kepada :
1. Om Sawasanganam
2. Om Abi Bakar
3. Om Arielz
4. Bunda Rierie
5. Abang

Humph.... akhirnya saya terbebas dari virus PR 10 wekekekekekek.... mohon maaf bagi yang saya tularkan nama-nama di atas.

Mengubah nama author jadi icon atau foto

Trik ini cukup bagus buat yang suka sama foto nya sendiri (bukan ngomongin saya lho wekekekek-red), dan biar nambah variatif dalam mendesain blog sobat yaitu mengganti nama authornya menjadi ikon atau foto caranya sangat simple sekali dalam membuat trik ini. Kalau mau tahu hasil triknya lihat screen shoot di bawah ini :

Nih Screen Shootnya
Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini <data:post.author/> , setelah ketemu silahkan ganti kode tersebut dengan rumus HTML-an ini :

<a href='URL SOBAT'><img alt='TERSERAH ISINYA' border='1' height='16' src='IMAGE URL SOBAT' style='margin: 0px' title='TITTLE SOBAT' width='16'/></a>


Text yang di cetak tebal di sesuaikan dengan fungsinya masing-masing

Kalau sudah selesai tinggal di save dan lihat hasil pekerjaan sobat, kalau bisa cari foto yang paling bagus biar yang datang dan baca postingannya gak takut lihat foto sobat wekekekekekke :p .

Membuat bingkai foto di blogspot

Karena sekarang lagi momen bagi-bagi award di dunia blogger dan banyak juga sobat blogger yang kebagian award terus bingung mau menaruh di mana awardnya, nah saya punya cara bagaimana membuat bingkai foto , pas banget nih buat sobat blogger yang mau menaruh award ini di bingkai, jadi lebih rapi dan elegan :p . Oke kita lihat contoh di bawah ini :

Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Tidak perlu centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

td {text-align:center;} .fotoatas { border:5px outset gold; background-color:#FFFFFF;} .fotobawah {border: 2px outset gold; background-color:#FFF4EA;}
Jangan lupa save hasil pekerjaan sobat
3. Sekarang tinggal aplikasinya ke dalam blog sobat
Saya sarankan taruh kode ini di dalam postingan sobat sebenarnya bisa saja taruh di sidebar kalau sobat sudah tahu cara mengubah widht dan height nya.

<tr><td><table width="100" align= "center">
<tr><td colspan="2" class="fotoatas"><img src="URL IMAGE" width="278" height="183"></td> </tr>
<tr><td class="fotobawah"><img src="URL IMAGE" width="84" height="87"></td> <td class="fotobawah"><img src="URL IMAGE" width="83" height="91"></td></tr>
<tr><td class="fotobawah"><img src="URL IMAGE" width="104" height="87"></td><td class= "fotobawah"><img src="URL IMAGE" width="98" height="70"></td></tr>
</table>


Ubah URL IMAGE dengan url gambar anda

Ok, selamat menaruh award di bingkai foto sobat yang baru buat, semoga sukses and kalau gagal kasihan deeeh looo wekekekekeke :p .

My Award

Musim ini kayanya lagi musim Award sampai-sampai lemari blog penuh dengan award wekekekekkek, sampai -sampai saya buatkan bingkai foto buat koleksi awardnya, nah sebelumnya saya ucapkan terimakasih buat sobat UnieQ buat award kreatifnya, sama bunda rierieway buat butterfly awardnya, terus buat herro buat semangat awardnya, and Kang Jalooe buat cute awardnya ( saya ambil awardnya aja kang males ngerjain tag :p ) and om Abi Bakar.Mau lihat koleksi awardnya?

Nah sekarang tinggal di distribusikan nih ke sobat-sobat blogger :p
Award Kreatif Award goes to.... :
1. Anas - ide-ide kreatifnya utak-atik template
2. Herro - thanks buat kreatif template yahoo nya
3. Kang jaloee - kreatif dalam utak-atik template
4. Ade Sanusi - kreatif dengan trik blogspotnya
5. Blogger Addicter - kreatif dengan SEOnya

Butterfly award goes to...
1. Jovie
2. Unieq
3. gadis rantau
4. Adhelina
5. Anita Mui

Semangat Award goes to....
1. Om Riasmaja
2. Qori
3. Googleholic
4. Firdaus
5. Pandalane

Cute Award goes to...
1. Om Gus
2. Mr. Koechel
3. Bayu adiya
4. Hary the potter
5. Kang Oeoes
Terus nama-nama yang di sebutkan di atas harap mendistribusikannya okeks....

Another numbering comments

Tentunya sobat blogger pernah mencoba hack numbering comments ala fernadoo , dan yang sudah di alih bahasakan oleh kang firdaus. Nah kali ini saya kan membahas bagaimana memberi nomor urut dengan metode lain atau istilahnya another numbering comments. Sebelum melangkah lebih jauh saya kasih lihat screen shootnya di bawah ini :

Nih Scren Shootnya!!!

Atau bisa di lihat live demonya silahkan klik di sini !!
Tapi trik ini mungkin agak sulit buat sobat blogger karena perlu pemahaman struktur dari template sobat terutama bagian komentarnya, saya sudah menguji cobakan dengan template minima yang menurut saya basic dari template-template yang lain dan berhasil!!!. Kalau memang tertarik silahkan lanjut membacanya.

Berbeda dengan teknik numbering comments ala fernadoo yang hasilnya nomor tersebut mempunyai permalink (atau url menuju ke arah komentar tersebut dan memakai internal javascript, tetapi dengan teknik yang baru ini tidak ada permalinknya, murni pengurutan penomoran komentar dengan teknik css dan kode HTML-an. Saya sarankan sobat blogger untuk mepertimbangkannya, karena ada keuntungan dan kekurangan memakai teknik ini.

Keuntungannya :
1. Tidak perlu kode javascript yang tentunya membebankan loading page blog sobat
2. Sangat simple pembuatannya karena sedikit memakai css - untuk membuat listnya( menurut saya - red)
Kekurangannya :
1. Monoton < karena penomoran ini memakai font body komentar)

Langkah-langkah pembuatan another numbering comments :
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

.commentlist {
margin: 0px 10px;
padding-left: 20px;
line-height: 130%;
font-weight: bold;
font-style: italic;
font-size: 150%;
}
.commentlist li{
margin-bottom: 10px;
padding: 5px 10px;
background: #BDBDBD;
}
.commentlist cite, .commentlist cite a, .commentlist cite a:visited {
font-weight: bold;
font-style: normal;
font-size: 85%;
color: #CC6600;
}

Simpan hasil pekerjaan sobat

3. Langkah ini sedikit memerlukan kejelian sobat saya akan memberikan penjelasannya
, cari kode ini <b:loop values='data:post.comments' var='comment'> kemudian ganti dengan kode di bawah ini :


<ol class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
<li>
<cite>

Kemudian perhatikan struktur kode HTML-an ini:

<dl id='comments-block'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>

</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


Kode di atas merupakan pemenggalan dari bagian komentar template minima, kalau struktur template sobat sama dengan struktur di atas silahakan ganti dengan kode di bawah ini :


<dl id='comments-block'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
</cite>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>

</dd>
</li>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</ol>
</dl>


Perhatikan kode yang di cetak tebal merah!! Merupakan tag penutup kode <ol>, <cite> dan <li> yang kalau sobat blogger jeli bisa di aplikasikan ke template yang beda struktur dengan template minima!!! Perhatikan strukutur area komentar template lainnya dan silahkan sobat trial and error!!. Silahkan bereksperimen dan thinking out the box. Kalau masih bingung silahkan YM-an dengan saya atau kasih komentar mengenai another numbering comments ini.

Membuat image CSS popup di blogspot

Kali ini saya akan memposting bagaimana cara membuat image atau gambar muncul (popup) di blogspot, yang apabila kita mengarahkan kursor mouse ke gambar tersebut maka akan muncul gambarnya menjadi besar, trick ini sangat bagus buat yang suka menaruh koleksi foto-foto pribadinya di blognya, teknik ini ga perlu javascript hanya sedikit permainan di bagian CSSnya. Kalau mau lihat contohnya bisa lihat di bawah ini :

I'm so Cute

Hi, my name is Cella and you?

Arahkan kursor mouse sobat ke gambar di atas dan lihat efek popupnya

Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

Kalau mau ambil code di atas klik view plain nanti akan muncul popup code silahkan copy dari situ

Kemudian save hasil pekerjaan sobat.
3. Sekarang untuk mengaplikasikannya dengan memakai kode di bawah ini :

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />YOUR TEXT</span></a>

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />YOUR TEXT</span></a>


Ganti Image URL dengan alamat gambar sobat blogger
Ganti YOUR TEXT dengan kalimat yang sobat blogger kehendaki

Teknik image css popup ini bisa di aplikasikan di dalam postingan ataupun di sidebar dengan cara add page elements > HTML/Javascript terus copy paste kode di atas tersebut. Thinking Out The Box sesuaikan dengan imajinasi sobat blogger. Ok sampai di sini aja and happy blogging. Kalau kurang jelas bisa YM saya yang sudah tersedia di sidebar

Mengenal atom.xml?redirect=false&start-index=1&max-results=100

Sumpah ini sebenarnya di luar kehendak saya wekekekekek dan kemungkinan saya salah paste , mungkin ini di sebut korban blogspot , saking asyiknya ngeblog jadi ke pencet kali yak mepublikasikan posting soalnya saya sudah mengantuk berat. Saya baru tahu jam 3.00 sore tadi ketika inbok di gmail yang isinya ini postingan apa? Ok deh dari pada sayang ini postingan saya hapus dan sobat blogger sudah mengeluarkan komentarnya saya akan menjelaskan atom.xml?redirect=false&start-index=1&max-results=100.
Kode di atas adalah untuk memasukkan sitemap ke webmaster google di mana membantu mbah google untuk mengindeks situs/blog kita ibaratnya sebuah peta isi rumah kita. Sobat blogger login dulu ke webmaster google tentunya dengan account gmail sobat. Setelah itu masukkan blog sobat kalau belum di masukkan ke add site , bagi yang sudah klik add site map kemudian pilih add general web sitemap kemudian masukkan kode atom.xml?redirect=false&start-index=1&max-results=100 buat yang isi postingannya di bawah 100. kalau di atas 100 post masukkan atom.xml?redirect=false&start-index=101&max-results=100 dan kalau di atas 200 masukan kode ini atom.xml?redirect=false&start-index=201&max-results=100 setelah selesai save sitemap ini. Thanks buat Jovie, Bayu, Rafi dan Frendli yang memberikan komentar pamungkasnya di postingan yang tidak terencana ini wekekekekeke :p.

Mengenal border lengkung

Kali ini saya akan membahas bagaimana membuat border lengkung tapi efek ini hanya bisa di lihat di browser firefox dan google chrome, border lengkung ini bisa di aplikasikan di blog sobat biar ga monoton dengan border-border lainnya biar nambah variatif dalam mendesain blog sobat, nih saya kasih contohnya.

contoh dengan border biasa :

Memakai border biasa

contoh dengan border lengkung :

Memakai border lengkung

Tertarik mau membuatnya?

Kalau sobat sudah mengenal properties CSS untuk mengaplikasikan tag properties border lengkung ini sangat mudah, cukup menambahkan :

-moz-border-radius: npx
Nilai n merupakan nilai kelengkungan bordernya
Turunan properties border lengkung ini ada 4 :

* -moz-border-radius-topleft
* -moz-border-radius-topright
* -moz-border-radius-bottomleft
* -moz-border-radius-bottomright

Saya contohkan mengaplikasikannya menggunakan tag <div>

<div style="-moz-border-radius-topleft:12px;-moz-border-radius-bottomright:12px;border:1px solid black;background-color:#c0c0c0;padding:6px;">Hanya contoh pemakaian border lengkung kiri atas dan border lengkung kanan bawah </div>

Maka akan hasilnya akan seperti :

Hanya contoh pemakaian border lengkung kiri atas dan border lengkung kanan bawah

Di atas hanya sebagian contoh penggunaan dari -moz-border-radius kalau sobat sudah pandai dalam CSS maka bisa di terapkan juga di properties border pada bagian style sheet CSS blog sobat, ok saya contohkan mengaplikaskannya ke dalam properties border blockquote, saya akan mengunakan tag blockquote pada contoh ini :

.post blockquote {
margin : 15px 15px 15px 0px;
padding :30px 10px 10px 10px;
clear : both;
list-style-type : none;
background : transparent url(http://lh4.ggpht.com/jaloee/SJnxszef6II/AAAAAAAACX4/etpucC5BrdM/paku.png) no-repeat 50% 5px;
border-top : 1px solid #cccccc;
border-right : 2px solid #000000;
border-bottom : 3px solid #000000;
border-left : 1px solid #eeeeee;
-moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;
}
.post blockquote p{ margin:.75em 0}

Kalau mau ambil code diatas klik view plain nanti akan keluar popup window copy kodenya dari sana

Maka ketika sobat blogger memakai tag blockquote maka hasilnya akan seperti ini :

Lorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreLorem ipsum dolor sit amet, consectetuer jquery rules! elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam et dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut jquery rules! ex ea commodo consequat

Sekarang tergantung sobat blogger mau di aplikasikan kemana, "Think Out The BOX", daya kreatif sobat di perlukan untuk bisa memakai properties -moz-border-radius- ini. Kalau pengen mengenal border lengkung ini lebih jauh silahkan ke sini

Efek border lengkung in hanya bia dilihat di firefox dan google chrome

Download video YouTube

YouTube merupakan situs yang berisi kumpulan video dari member yang menguploadnya ke situs tersebut, tetapi ada satu kekurangan dari YouTube ini yaitu kita tidak bisa mendownload videonya. Bagi sobat blogger yang suka dengan video YouTube tapi tidak bisa mendownloadnya langsung dari situsnya kali ini saya akan memberitahukan bagaimana cara mendownload video dari YouTube, sangat simple dan tidak perlu utak-atik template :p . Mau tahu caranya?

1. Masuk ke situs YouTube ( bukan blogspot lho :p )

Screen Shoot You Tube
2. Setelah masuk pilih video yang di suka sobat blogger.
3. Kemudian copy URl videonya (ambil dari adress barnya)

Screen Shoot
4. Sekarang masuk ke KeepVid dan masukkan URL yang telah di copy tadi ke dalam box download.

Screen Shoot
5. Langkah terakhir adalah pilih jenis kualitas hasil downloadan yang di inginkan sobat blogger.

Screen Shoot
Dan tunggu sampai selesai mendownloadnya, and then silahkan menikmati hasil downloadan video dari YouTube :p . Semoga postingan ini bermanfaat.

Mempercantik area numbering comments

Postingan ini di buat atas permintaan sobat blog saya yaitu kang Riasmaja yang bunyi seperti ini,

Mmmm... kang... tuh tempelen nomer urut komentator diposting juga dunk caranya... pengennn... bagus banget soalnya...

Nah kali ini postingannnya bagaimana kita mempercantik bagian area "numbering comments" yang tentunya juga sudah tidak asing bagi sobat blogger tentang hack numbering comments, kalau mau lihat screnshootnya di bawah ini :

Mau tahu caranya?

Blogger hack ini saya integrasikan dengan blogger hacknya kang Jaloee yaitu "Menambah Numbering-Comments dan Photo-Author pada layout komentar 2 kolom" kalau belum baca silahkan meluncur ke TKP. Kalau sudah baca silahkan aplikasikan ke blog sobat, nah baru kita mulai hack area "numbering comments" nya.
Langkah-langkahnya mempercantik area numbering comments :

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML ( saya asumsikan sobat sudah aplikasikan hack dari kang Jaloee-red)

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

.bubble1{
background:url(http://subagya.googlepages.com/comment-sobat.png) left top no-repeat;
 width:70px;
 height:45px;
 text-align:center;
 padding-top:40px;
padding-right:value;
 font-size:9px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 color:#575553;
 float:right;
 margin-right:10px;
}
.bubble2{
background:url(http://subagya.googlepages.com/comment-guwe.png) left top no-repeat;
 width:70px;
 height:45px;
 text-align:center;
 padding-top:40px;
padding-right:value;
 font-size:9px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 color:#575553;
 float:right;
 margin-right:10px;
}

Kalau mau ambil code di atas klik view plain nanti akan muncul popup code silahkan copy dari situ

3. Kemudian cari kode ini :

<div class='commentphoto' style='margin-top:.5em;'/>
<span class='numberingcomments'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Hapus kode yang berwarna tebal, setelah itu simpan hasil pekerjaan sobat
4. Sekarang masuk ke inti hacknya, sobat blogger cari kode ini <dd class='comment-footer'> dan masukkan kode ini dibawah ini tepat di bawah kode tersebut :

<div class='bubble1'><span class='numberingcomments'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
</div>


Langkah 4 merupakan hack untuk mengubah tampilan "numbering comments" nya komentar pengunjung blog sobat

5. Sekarang bagian yang punya blog (owner) kita ubah, cari kode di ini <dd class='comment-footer-author'> , kemudian masukkan kode di bawah ini tepat setelah kode tersebut :

<div class='bubble2'>
<span class='numberingcomments'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
</div>


Langkah terakhir simpan hasil pekerjaan sobat dan lihat hasilnya, kalau sukses berarti sobat hwebat, kalau gagal kasihan deeh loooh... kekekekekkeke :p . Btw anyway buzway blogger hack ini sudah saya aplikasikan ke template minima dan hasilnya berhasil, and then satu lagi template dari free downloadan hasilnya juga bagus. Ok, kalau masih bingung silahkan hubungi saya lewat YM, email atau berkomentar di postingan ini. Happy blogging and selamat menunaikan ibadah puasa.

Menampilkan kode HTML/Javascript yang unik di postingan (3)

Sehabis sahur buat posting baru nih sob biar masih refresh ingatan saya, sesuai dengan judulnya "Menampilkan kode HTML/Javascript yang unik di postingan versi 3" (biar lengkap bikin trilogynya-red). Seperti yang sudah saya posting sebelumnya di blog ini,ada banyak cara menampilkan kode HTML/Javascript di dalam postingan, kalau yang belum baca silahkan klik di sini untuk versi 1 dan klik di sini untuk versi 2. Sekarang kita lihat perbedaan masing-masing versinya. Mau tahukan perbedaannya?

Versi 1 :

#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}

Versi 2 :

#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}


Versi 3 :

#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}

Sangat jelas sekali perbedaannyakan, nah sekarang tinggal bagaimana cara membuatnya dan kelebihan dari versi 3 ini.
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Masukkan kode ini di bawah <!-- end outer-wrapper -->

3. Kemudian simpan hasil pekerjaan sobat, nah sekarang tinggal bagaimana mengaplikasikannya.
Gunakan tag kode ini setiap ingin memposting kode HTML-an atau CSS,dan javascript atau kalau mau lebih jelas mampir ke sini

<pre name="code" class="css">HTML/CSS/javascript </pre>

Kelebihan dengan memakai metode ini kita tidak perlu lagi memparse/encode kode HTML-annya langsung taruh saja sesuai kode mentahnya, dan kalau mau ambil kodenya klik view plain, terus kalau mau ngeprint klik print.

Ok bro, cukup kayaknya postingan kali ini soalnya saya sudah mengantuk berat nih, and btw anyway buzway happy blogging dan selamat menunaikan ibadah puasa.

Saya dapat ilmu ini dari sini.

Refresh otomatis pada blog

Kebetulan kakak saya adalah seorang programmer, disalah satu operator seluler di Indonesia, nah kebetulan juga saya pas ngacak-ngacak kamarnya nemu kumpulan kliping HTML-an ketika kakak saya masih kuliah, salah satunya adalah membuat halaman web refresh otomatis. Kegunaan refresh otomatis ini apabila ada pengunjung yang nongkrong di blog sobat akan selalu update dengan isi blog sobat, jadi bisa tahu kalau blog yang di tongkronginnya akan keluar post terbaru atau update dari sobat. Mau tahu caranya?

Langkah-langkah membuat refresh otomatis pada blog :
1. Seperti biasa, login ke Blogspot, kalau sudah login masuk ke Tata Letak > Edit HTML

Perhatian! Jangan lupa untuk membackup template sobat, klik DownLoad Full Template!

2. Masukkan kode HTML ini di bawah <head> :

<meta CONTENT='120' HTTP-EQUIV='refresh'/>

And then, jangan lupa simpan hasil pekerjaan sobat.

angka yang berwarna merah adalah kurun waktu yang diinginkan untuk merefresh halaman dalam satuan detik, bisa di ubah sesuai kehendak.

Saran saya jangan telalu cepat merefresh halaman sobat karena apabila loadingnya belum selesai akan loading lagi sesuai dengan nilai waktu yang diberikan sobat.

Ok, sampai di sini pembelajaran HTML-annya , kalau memang ada ilmu HTML-an lainnya akan saya sampaikan ke sobat blogger. Happy blogging and tetap menjalankan ibadah puasa jangan sampai kaga soalnya wajib!!! (wew, ko malah dakwah-red).