Learning by doing: Desember 2009

Kamis, 31 Desember 2009

Membuat Web Hosting di Google Sites

Web hosting berguna untuk menghosting atau menyimpan file kita, baik itu berupa gambar maupun teks. Untuk membuat web hsting di Google sites kita tidak membutuhkan biaya sepersen pun alias gratis. Beberapa keistimewaan membuat web hosting di Google sites yaitu ngaksesesnya gampang terutama bagi teman2 blogger, karena dengan terdaftarnya teman2 ke akun blogger maka secara otomatis teman2 sudah memilki akun di Google, oleh karena itu apabila ingin mengakses Google sites, teman2 tinggal pergi ke situsnya. lalu keistimewaan yang lain...fitur yang disediakan mantap, dan kita bisa membuat halaman/kategori file hostingan sesuka kita.

Selanjutnya saran saya bagi teman2 blogger untuk memiliki web hosting di google sites, masalahnya selain layanan dan fiturnya memadai juga hitung2 ngehemat waktu login ke suatu akun. Begitu teman2 login ke blogger, maka google site miliknya teman2 juga langsung aktif, dengan syarat sebelumnya sudah daftar ke google sites.

Bagi teman2 yang ingin memiliki web hosting di google sites, maka bisa membuatnya melalui langkah2 berikut

1. Surfing ke situs Sites.google.com

2. Kalau teman2 dalam keadaan offline dari akun google maka bisa langsung login melalui form login yg telah disediakan (bagi teman2 blogger silahkan langsung menggunakan email dan password login blogger)

3. Akan tetapi bagi teman2 yang sedang dalam keadaan online di akun google (termasuk blogger), maka teman2 akan langsung diantar ke halaman berikut ini, dan langsung saja untuk mengklik tombol "Buat Situs"

4. Selanjutnya teman2 akan langsung diantar ke halaman pembuatan situs, maka teman2 di sana nanti akan disuruh untuk memilih template, memberi nama situs, memberi nama alamat URL situs, serta mengisi captcha/kode verifikasi pembuatan situs. Berhubung kita hanya ingin membuat web untuk hostingan file saja, maka gak usah ribet2. Silahkan untuk opsi template pilih opsi "template kosong"

Silahkan untuk memberi nama situs tman2 serta nama alamat URL situs. Contoh untuk nama situs "Web Hostingannya Iqbal", lalu untuk nama alamat URL situs "webhostingannyaiqbal" (biarkan penamaan alamat URL yang muncul secara otomatis ini, agar proses pendaftaran kita lancar)

Langkah selanjutnya langsung loncat ke opsi pengisian captcha/kode, lalu klik tombol "Buat Situs"

5. Selamat, sekarang teman2 sudah memiliki web hostingan sendiri.

6. Langkah selanjutnya, teman2 harus membuat laman baru (pojok kanan atas) untuk menyimpan file apa saja yang teman2 inginkan (saran: laman juga bisa dijadikan sebagai kategori file kita)

7. Sesampai di halaman pembuatan laman baru, silahkan pilih opsi "Lemari Berkas"

Dan silahkan beri nama laman, contoh: gambar2ku. Dan jangan lupa pilih opsi "letakkan laman di tingkat atas", dan diikuti dengan mengklik tombol "Buat Laman"

8. Sekarang "Laman Baru" telah dibuat, selanjutnya kita bisa mengupload file gambar kita (baik dari komputer maupun dari/berupa alamat URL ==> Bedanya kalau dari komputer maka file gambar yg telah kita upload tersebut sudah benar2 menjadi milik kita, sedangkan untuk opsi web/url hanya berupa catatan url saja, jadi saran saya mendingan menggunakan opsi komputer). Untuk memulai proses penguploadan/pengunggahan, silahkan klik tombol "+Tambahkan Berkas" >> Pilih berkas >> Pilih berkas dari komputer anda >> lalu klik tombol "unggah"/ upload

Selanjutnya file gambar telah berhasil di-upload, teman2 bisa mengambil link gambar yg telah diupload tersebut, mungkin untuk kepentingan yg berhubungan dgn pemostingan, dll. Cara pengambilan link gambar

-. Klik kanan pada tulisan "unduh"/download, lalu pilih opsi "Copy Link Location"

-. Link URL gambar yg telah didapatkan dapat di-paste ke notepad, contohnya seperti berikut ini:

http://sites.google.com/site/webhostingannyaiqbal/gambar2ku/banner_t4belajarblogger.JPG?attredirects=0&d=1

dan ketika teman2 ingin menggunakannya, maka tulisan: ?attredirects=0&d=1 harus dihapus, sehingga menjadi seperti berikut

http://sites.google.com/site/webhostingannyaiqbal/gambar2ku/banner_t4belajarblogger.JPG

Untuk memosting gambar, teman2 bisa menggunakan kode script gambar seperti biasanya, contoh

<img src='http://sites.google.com/site/webhostingannyaiqbal/gambar2ku/banner_t4belajarblogger.JPG' alt='t4belajarblogger' />

maka hasilnya seperti berikut ini

Selesai....

Lalu bagaimana cara mengupload file Java Script/JS? Caranya sama saja. Agar file milik teman2 terkelompok dengan baik (sehingga mudah diambil linknya ketika dibutuhkan) maka ada baiknya jika teman2 sekarang membuat laman baru, tentu namanya mewakili file2 yg berada di dalamnya, contoh untuk laman baru kita beri nama "javascriptku". Untuk pembuatan laman baru teman2 bisa memperaktekkannya melalui langkah2 seperti tadi, yaitu klik tombol "+Buat Laman" >> pilih opsi "Lemari Berkas" >> memberi nama laman >> pilih opsi "Letakkan laman di tingkat atas" >> Klik tombol "Buat Laman". Sekarang laman "javascriptku" telah berhasil dibuat, dan kita bisa mengupload file JS kita. Jika teman2 tidak memiliki file JS, maka bisa di-download dulu file JS saya di SINI sebagai contohnya.

Setelah teman2 mendownload contoh file JS tersebut, maka teman2 bisa menguploadnya ke web hostingan masing2.

Setelah menguploadnya teman2 bisa mengambil URL file JS tersebut. Cara pengambilannya seperti biasa, Klik kanan pada tulisan "unduh" >> pilih opsi "Copy Link Location" >> lalu pastekan ke notepad atau ke program teks lainnya, maka URL File JS tersebut seperti berikut

http://sites.google.com/site/webhostingannyaiqbal/javascriptku/emoticonplus-v2.js?attredirects=0&d=1

Nah, untuk menggunakannya...teman2 harus menghapus tulisan ?attredirects=0&d=1, sehingga menjadi

http://sites.google.com/site/webhostingannyaiqbal/javascriptku/emoticonplus-v2.js

Selanjutnya URL file JS tersebut siap digunakan untuk membuat widget (NB: file JS di atas berfungsi untuk membuat widget emoticon di kotak komentar, untuk penjelasannya lihat di postingan: INI), contoh pembuatan:

<script src='http://sites.google.com/site/webhostingannyaiqbal/javascriptku/emoticonplus-v2.js' type='text/javascript'/>

Sekarang script widget siap digunakan, selamat mencoba...cara membuat web hosting di Google Sites SELESAI!

Semoga Bermanfaat []

Tags: Apa itu Google sites, bagaimana menggunakan google sites, cara daftar ke Google sites, memiliki web hosting di Google Sites

Rabu, 30 Desember 2009

Memasang Emoticon pada Kotak Komentar Blogger Versi Dua

Kalau kemarin-kemarin kita sudah membahas cara memasang emoticon pada kotak komentar postingan blogger (dah lama sekali sih), dan kali ini bisa dikatakan sebagai lanjutannya atau versi dua atau apa lah terserah teman2 mau menamakannya apa. Sebenarnya dari tata cara pemasangannya sama2 aja, hanya saja bedanya nih...jumlah emoticon pada pembahasan kita kali ini lebih banyak dari pada emoticon yang kemarin2 itu. Wohoooo...jadi lebih mantep kan, tatkala para pengunjung blog kita ingin mengekspresikan emosinya...wuohohoho mantep

Sebelumnya, walau emoticon ini hasil oprak-aprik saya sendiri...namun masih menggunakan gaya/style emoticon bikinannya mas Uda. Maslahnya bingung mau bikin gaya seperti apa, sebelumnya sih kepikiran ingin bikin dengan gaya sendiri, yaitu emoticon dengan gaya spoiler lalu untuk menambah emoticon pada kotak komen, para pengunjung tinggal mengkliknya (gak ada kopi-pastean), sampai2 gara2 terlalu semanggat saya juga dah download sampai 130-an lebih emoticon + cartoon lucu lainnya, wal akhir itu semua gagal dilaksanaken...maslahnya waktu buat bikin model yg satu ini memang butuh kesabaran n waktu yg super luang. Yah, sebagai penggantinya saya bikin yg satu ini aja lah, hanya membutuhkan waktu yg relatif sedikit (dibanding yg tadi). Dan sekali lagi thanks yo mas Uda, dah memberi inpirasi yg benar2 bermanfaat.

Yohooo...kembali ke tutorial. Jumlah emoticon kali ini sampai 54 buah emoticon (yg kemarin 36 buah), teman2 bisa melihatnya pada screen shot berikut

Bagaimana...mantapkan? Bagi teman2 yang tertarik buat masang emoticon tersebut ke blognya, silahkan diperaktekkan langkah2 berikut ini...

Login dulu ke blogger, lalu klik Tata Letak/Layout >> Klik Edit HTML (dan jangan lupa untuk mencentang kotak expand widget templet)

Lalu letakkan kode script berikut tepat di atas kode tag </body>

Selanjutnya langkah terakhir...yaitu letakkan kode berikut di atas kode: <b:if cond='data:post.embedCommentForm'>

Dah itu jangan lupa klik simpan template...

Gampang tooo...coba sekarang lihat tuh hasilnya di blognya tman2, sekalian nyoba bikin komen sendiri buat testing awal.

Kalau ada maslah atau pertanyaan, langsung saja diposting pertanyaan teman2 di kolom komentar, atau bisa juga kontak admin (bagi tman2 yg gak mau pertanyaan dilihat yg lain ==> tapi saya balasnya agak lama lho)...dah dulu ya

Semoga Bermanfaat []

Tags: Cara memasang emoticon untuk blogspot, cara memasang emoticon untuk blogger, memasang emoticon di komentar, cara pasang emoticon dengan kode, HTML emoticon ,kode script emoticon, emoticon versi dua

Senin, 28 Desember 2009

Memasang Navigasi Halaman Posting Ala Google

Kalau kemarin2 kita sudah membahas cara memasang fitur navigasi halaman biasa (bertombol), nah sekarang waktunya kita membahas cara memasang navigasi halaman ala Google. Seperti yang telah teman2 ketahui, bagaimana bentuk dan wajah navigasi halaman google, pasti sederhana dan menarik, yang kemudian memilki corak warna-warni yang semisal dengan logonya (Google). Bagi teman-teman yang tertarik untuk menampilkan navigasi halaman ala Google ke dalam blognya, monggo bisa diperaktekkan melalui langkah2 yang akan kita bahas dalam postingan kali ini.

Sebagai gambaran, berikut ini adalah navigasi halaman asli milik Google

Lalu yang di bawah ini adalah (gambaran) navigasi halaman yang terpasang di blog kita

Ok, cuap2nya kita sudahi. Langkah pembuatannya seperti biasa, sekarang silahkan login dulu ke akun blogger, lalu klik Tata Letak >> Edit HTML (Expand widget templet-nya gak usah dicentang)

Selanjutnya letakkan kode berikut di atas kode tag ]]></b:skin>

#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(http://sites.google.com/site/t4belajarblogger/gambar/nav_logo_ala_google.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}

Lalu letakkan kode berikut tepat di atas kode tag </body>

Klik Simpan Template.

Silahkan lihat hasil kerjaan anda. Kalau navigasi halamannya kok gak bisa muncul...berarti ada satu kemungkinan besar penyebabnya, yaitu postingan anda masih terlalu sedikit untuk menggunakan fitur navigasi. Oleh karena itu bagi teman2 blogger yang ingin menggunakan trik ini, disarankan untuk memilki jumlah postingan dgn jumlah minimal 15-21 ke atas...

Wah...itu kok kode yang harus di taruh di atas kode tag </body> kok panjang sekali...? Iya sob, memang panjang. Tapi kan gampang to, tinggal kopi lalu paste di atas kode tag </body> miliknya anda (gitu aja kok repot, hohoho^). Jangan khawatir maslah trik ini dapat bekerja atau tidak. Karena kalau gak dapat bekerja, pasti gak saya posting (lihat bikinan saya di ~~T4bb-demo.blogspot.com~~ Maaf, blog demo telah saya hapus. InsyaAllah fungsi akan terus bekerja, thanks).

Kalau ada maslah atau pertanyaan mengenai navigasi halaman ala google, silahkan post pertanyaannya teman2 di halaman komentar, ntar saya jawab. Atau bisa juga nanya lewat form kontak admin, dah dulu ya...

Semoga Bermanfaat []

Tags: Cara membuat navigasi seperti Google, memasang halaman dengan nomor seperti google, navigasi halaman HTML, script navigasi halaman Google

Sumber Trik: Abu Farhan
Tutorial Style: Iqbal

Minggu, 27 Desember 2009

Cara Memasang Navigasi Halaman Posting

Sebelumnya, teman2 ada yang belum tahu apa itu navigasi halaman? Navigasi halaman yaitu fitur yang berfungsi sebagai rel untuk menuju ke halaman selanjutnya maupun ke halaman sebelumnya. Mungkin teman2 akan lebih jelas lagi kalau teman2 langsung pergi ke halaman google.com sekarang juga dan coba perhatikan angka2 halaman yg berada pada bagian paling bawah halaman google search tersebut. Nah, nomor2 halamn tersebutlah yang dinamakan navigasi halaman. Sebenarnya pihak blogger telah menyediakan fitur ini di blog kita sejak awal, akan tetapi bentuk navigasinya sederhana sekali yaitu berbentuk tulisan "Posting lama", "posting lebih baru", dll maka dari itu bagi teman2 yg ingin menampilkan blognya lebih ekspresif lagi maka bisa juga diterapkan trik yg satu ini.

Contoh tampilan

Cara membuatnya silahkan login dulu ke akun blogger, lalu klik tata letak >> Edit HTML ("expand widget templet" gak usah dicentang)

Selanjutnya letakkan kode berikut di atas tag ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Lalu letakkan kode berikut di atas kode tag </body>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/blogger_navpage.js' type='text/javascript'/>
</b:if>

Klik simpan template. Sekarang silahkan untuk melihat hasilnya di blog anda...

Bagian2 yang bisa teman2 atur antara lain

var pageCount=5; = Fungsinya untuk mengatur jumlah halaman postingan yang berada di dalam satu tampilan ketika teman2 mengklik next atau pun nomor halaman.

var displayPageNum=5; = Junmlah angka/nomor halaman yang tampil pada fitur navigasi halaman.

var upPageWord ='Previous'; = Untuk tulisan "Previous" bisa teman2 ganti dengan kata2 lain seperti "sebelumnya" atau apa saja yg semisal.

var downPageWord ='Next'; = Sama halnya dengan kata Previous, kata "next" juga bisa teman2 ganti dengan kata2 lain seperti "selanjutnya" atau apa saja yg semisal.

--------------------------------------------------
NB:

Untuk menerapkan trik ini, usahakan jumlah postingan teman2 di atas 10 buah postingan atau lebih.
--------------------------------------------------

Semoga Bermanfaat []

Tags: membuat navigasi halaman, cara membuat navigasi untuk blogspot, agar blog blogger punya navigasi, cara mudah membuat navigasi, membuat navigasi dengan HTML, script navigasi Blogger

Menampilkan Avatar Para Komentator Postingan

Bagi teman2 blogger yang blognya tidak bisa menampilkan avatar/foto para komentatornya, maka bisa menggunakan trik ini. Seperti yang telah teman2 ketahui, bahwa tidak semua blog dapat menampilkan foto/avatar para komentatornya, kemungkinan besar hal itu terjadi dikarenakan kode templatenya tidak memilki kode berinisialkan "avatarIndentClass" (berikut teman2 akan mengetahuinya). Sebagai contohnya saja blog saya ini, sebelumnya avatar para komentatornya tidak muncul. Akan tetapi sekarang sudah saya edit beberapa kode yg berhubungan dengan data comment, akhirnya bisa muncul tuh avatar2nya(khusus yg komen dgn Akun google/blogger).

Berikut tampilan sebelum pengeditan template

Setelah pengeditan jadinya seperti berikut ini

Bagi teman2 yang ingin memperaktekkannya, monggo diikuti langkah2 berikut

1. Login ke akun blogger >> Tata Letak >> Lalu Edit HTML (download template -untuk mencegah adanya kesalahan-) >> dan jangan lupa untuk mencentang kotak "expand widget templet"

2. Cek apakah kode berikut ada di dalam kode templatenya teman2?

Kalau memang ada dibiarkan saja, tapi kalau nggak ada silahkan untuk mencari kode berikut:

<dl id='comments-block'>

Ganti kode di atas dengan kode berikut (kode yg kita cek tadi, namun gak ada)

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

3. Langkah selanjutnya yaitu cari kode <a expr:name='data:comment.anchorName'/>

kalau sudah ketemu, ganti dengan kode berikut

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

Simpan hasil kerjaan anda.

NB:

Kalau ternyata kode <a expr:name='data:comment.anchorName'/> tidak ditemukan, maka teman bisa menyimpan kode

tepat di atas kode <b:if cond='data:comment.authorUrl'>

dan jangan lupa simpan hasil kerjaan anda.

Gampangkan? Kalau memang ada masalah tanya saja gak usah malu2, toh kita lagi sama2 belajar

Perhatian: Jika trik ini tidak berhasil teman2 lakukan, segera cek di halaman pengaturan >> Komentar >> Dan pastikan untuk memilih YA pada opsi "Tampilkan gambar profil dalam komentar?".

Semoga Bermanfaat []

Tags: cara menampilkan avatar komentator, menampilkan avatar di komentar, avatar komentar blogspot bisa muncul, agar avatar bisa tampil, bagaimana memunculkan foto komentator

Memasang Fasilitas Parsing Code ke Dalam Blog Anda

Sekedar info bagi para blogger. Bagi teman2 yang kerjaannya suka memparse alias mengkonver kode HTML, sekarang nggak perlu susah2 lagi pergi ke websitenya orang lain, ya itu masalahnya karena kita sekarang bisa menampilkan fasilitas pemarse/pengkonver kode HTML ke dalam blog kita masing2, bagaimana teman2 tertarikkah? Sebenarnya untuk menampilkan fasilitas ini ke dalam blog kita cukuplah mudah, karena pihak google sendiri sudah menyediakan fasilitas ini untuk para blogger.

Contoh tampilan form parsing code

Nah, seperti di atas itulah nanti tampilannya. Bagi teman2 yang ingin mencoba cara kerjanya, maka bisa diperaktekkan dengan menggunakan kode berikut ini (kopi-paste kode berikut ke dalam kolom parse ==> lalu klik convert)

<a href="http://t4belajarblogger.blogspot.com/">T4 Belajar Blogger</a>

Pasti nanti hasilnya jadi seperti berikut ini

<a href="http://t4belajarblogger.blogspot.com/">T4 Belajar Blogger</a>

Bagi teman2 yang tertarik untuk memasang fasilitas parsing kode di atas, teman2 bisa menggunakan kode berikut

Jika teman2 menggunakan kode di atas, maka nanti tampilannya akan seperti milik saya. bagi teman2 yang tidak begitu suka dengan warna tampilan bingkainya, maka bisa diatur sendiri, silahkan surfing langsung ke sumbernya di sini.

Semoga Bermanfaat []

Tags: Memasang code converter ke dalam blog, bagaimana pasang code parser ke blogspot, memiliki tool code parser sendiri

Sabtu, 26 Desember 2009

Install an Icon on Our Corner Blog

Hi bro, i want to talk about "how to install an icon on our corner blog side". You can see about the icon on my blog tooo, look at right bottom of this blog, yes you r right, you will see a cute icon with word GoOd LucK. to make it in our blog is very2 easy, we just need for simple steps

Login to your blogger account, n than choose layout option, Click edit HTML

Find tag ]]></b:skin> n than replace it with following code

#corner {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
]]></b:skin>

The last step, place following code before tag </body>

So, dont forgt to save your work. Preview your blog now...how easy?

You can to set or customize it, look at the code before tag ]]></b:skin>, right...you can replace "bottom" with "top", or "left" with "right"

So with the code before tag </body>, you can replace it with any/other widget you want, look at following code:

<div id="corner">
<a href="http://t4belajarblogger.blogspot.com">
<img src="http://lh4.ggpht.com/_RVpTV2JOOxA/S7y7wg351AI/AAAAAAAACrg/kQew7fyZLoo/pilhan_banner_t4belajarblogger02.JPG" border="0" /></a>
</div>

You just need for replace red code, ok friend GoOd LuCK! Any question...dont shame to contact/ask me..

hopefully helpful_

Tags: install an icon, corner blog trick, trick to appear an icon on corner, install corner icon with CSS

Membuat Tulisan yang Mengikuti Cursor

Mungkin teman2 pernah berkunjung ke suatu blog lalu tiba2 cursornya teman2 diikuti oleh suatu teks. Nah, untuk membuat yang seperti itu sebenarnya gampang sekali, karena kita hanya membutuhkan kode HTML khusus membuat efek tulisan yang mengikuti cursor. Kode HTML yang saya maksud adalah kode berikut ini:

Nah, kopi-paste kode di atas ke gadget HTML-nya teman2 lalu jangan lupa disimpan. Beberapa bagian yang bisa teman2 ganti yaitu yang berwarna biru (bisa diganti dengan tulisan apa pun), hijau (ukuran font), dan orange (yaitu warna tulisan/font, untuk kode warna bisa dilihat2 di: sini)

Semoga Bermanfaat []

Thanks mas Uda, yang sudah membagi2 ilmunya.

Tags: Agar tulisan mengikuti cursor, trik cursor diikuti oleh tulisan, kode HTML membuat tulisan ikut cursor, script membuat teks ikut cursor

Memasang Snap Shots ke Dalam Blog

Bagi teman2 yang ingin menampilkan blognya lebih ekspresif dengan tampilan/thumbnails setiap link yang berada di dalam blognya, maka tak ada salahnya untuk mencoba service yang satu ini, snap shots. Untuk membuat snap shot sangat lah gampang, karena kita tinggal menggunakan layanan gratis yang telah disediakan oleh Snap Shots.

Berikut contoh tampilannya:

Nah, bagaimana teman2 tertarikkah? Seperti yang telah kita ketahui bahwa ketika seseorang (kita atau para pengunjung) menyorot suatu link yang berada di dalam blog kita, maka secara otomatis akan muncul thumbnails/screen shot dari halaman tujuan link tersebut. Untuk mempersingkat waktu, bagi teman2 yang benar2 tertarik untuk mencoba fitur gratis yang satu ini, maka bisa lngsung untuk mengunjungi situs asli Snap shots di sini. Nanti teman2 tinggal mengisi beberapa data seperti URL blog, email, banner, lalu nanti teman2 bisa langsung memasang gadget-nya langsung melalui sistem install/pasang yang telah disediakan oleh snap shots (kalau teman2 ingin memasang secara manual juga bisa). Youpz selamat mencoba...

Semoga Bermanfaat []

Tags: memasang snap shots untuk blogger, cara mudah pasang snap shots, bagaimana memasang snap shots blogger, agar blog blogger memiliki snap shots

CSSكيفية كتابة العربية ب

قد يكون صاحب المدونة, يريد كتابة العربية في مدونته. و لكن فيها المشكلة أي المشكلة في مظهر كتابته. طيب, إذا كنت صاحب المدونة المقصود حي نزيل هذه مشكلاتنا جماعة و ستكون سهولة في كتابتنا إن شاء الله

CSSو كيفية كتابة العربية ب

أي كما يلى

Blogger.comإذهب إلى

:LAYOUTثم اختر التخطيط أو

:HTMLثم اختر تحرير

]]></b:skin>ضع الرمز يلى قبل أو فوق رمز

.arabic {font-family: Traditional Arabic;font-size: 18px;direction:rtl;line-height: 200% ;font-weight: bold;}

!ثم حفظ قالبك

:إذا تريد أن تكتب رسالة جديدة, واجب لك أن تستعمل الرمز يلى

"div"ب

:الرمز

<div class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</div>

:النتيجة

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

"p"ب

:الرمز

<p class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</p>

:النتيجة

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

"span"ب

:الرمز

<span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span>

:النتيجة

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

و الكتابة الاتينية "span"ب

:الرمز

<p>Latin Text<span class="arabic">بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span></p>

:النتيجة

Latin Textبِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

كما رأيت في الأمثلة السابقة قد وجدنا الرموز النوعية, و لكن فيها النتائج بوجه واحد. ولذالك اختر اي رمز تريد.

مع النجاح

أبو فرحان :مصدر

How to Create Bubble Tooltips with CSS?

Avoid cross-browser javascript when you can use css to make tooltips with less code. Honestly you were going to use css to style your tooltips anyway right? Your probably already have most of this code in your css already too. Besides that if you have an advanced site in the first place you probably have enought javascript already.

Also with the IE hack for the :hover state, you can do this with elements besides anchors.

If you dont like how it allows you to hover over the tooltip also then you can adjust the padding and top to separate the tool tip from the link.

View Demo here!!!

To create it we just need for the simple steps

Login to your blogger account >> n than choose layout option >> click Edit HTML n don't forget to download template complete (don't be lazy, OK)

So, replace tag ]]></b:skin> with following code

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
}
]]></b:skin>

N than save your template

The last step, when you want to post a new entri you must use the folowing code

<a href="URL Link here!!!" class="tt">Link Text<span class="tooltip"><span class="top"></span><span class="middle">ToolTips Message</span><span class="bottom"></span></span></a>

Make it easy, n goOd LuCk for you....if you hv any question you can contact me

Trick Source: Trentrichardson.com

Tutorial Style inspired by: Kang Rohman style

Tags: how to create bubble tooltips, making bubble tooltips, bubble tooltips with CSS, simple step to create bubble tooltips

Trik Menyembunyikan Link yang Berada di Balik Banner

Trik ini berguna bagi teman2 yang ingin link di balik banner iklannya tidak muncul ketika para pengunjung menyorotnya, mungkin untuk menghindari pikiran para pengunjung seperti "wah situs ini lagi...bosan ah", oleh karena itu...trik ini dianjurkan bagi teman2 yang bergelut dalam dunia bisnis online (terutama ketika menggunakan banner afiliasi). Tapi sebelum teman2 memperaktekkan trik ini, berjanjilah untuk tidak menyelipkan link yang gak seronoh OK...

Sebagai gambaran singkat, teman2 bisa membandingkan kedua banner berikut ini (disorot yaaa...)

Banner 1

Banner 2

Seperti perbedaan yang telah teman2 dapatkan, pada banner 1 ketika disorot maka link tujuan banner tersebut akan kelihatan (lihat: di bagian kiri bawah browser ==>

). Akan tetapi lain halnya dengan banner 2, walau teman2 sorot tuh banner gak bakalan kelihatan link tujuannya. Oleh karena itu, inilah yang membuat para pengunjung menjadi penasaran...untuk menjawab rasa penasaran yang ia alami, mau gak mau dia (kemungkinan besar) akan mengkliknya...hehehe kena' deh... kenadeh

Nah, bagi teman2 yang tertarik untuk membuat banner semacam itu, maka bisa diterapkan melalui kode berikut

Sudah itu letakkan di mana saja yg teman2 inginkan (saran:sidebar). Cara meletakkan kode tersebut seperti biasa: Login ke blogger, tata letak, lalu pilih tambah gadget HTML.

Silahkan disesuaikan dengan link tujuan serta link banner-nya teman2 -perhatikan pada bagian yang telah ditandai dengan warna biru (link tujuan) dan hijau (link gambar/banner)-

Semoga Bermanfaat []

Tags: cara menyembunyikan link, link di balik gambar tidak muncul, agar link tidak ketahuan, trik meningkatkan iklan afiliasi, kode HTML menyembunyikan link, menyembunyikan link dengan script

Kamis, 24 Desember 2009

Menampilkan Top Komentator ke dalam Blog

Jika teman-teman ingin mengetahui secara langsung siapa yang paling banyak berkomentar ke blognya teman2 maka teman2 bisa menggunakan cara yang ingin kita bahas kali ini, yaitu cara "menampilkan top komentator". Fitur top komentator ini bisa kita tampilkan di bagian mana saja yang kita inginkan ke dalam blog kita, namun biasanya para blogger menampilkannya pada bagian sidebar blog.

Preview

Untuk membuatnya sangat mudah, teman2 hanya membutuhkan kode HTML berikut yang kemuadian harus di taruh ke dalam gadget HTMLnya teman2

Yang perlu teman2 ganti yaitu link blog saya yang berwarna biru, lalu nama yang tidak akan tampil dalam fitur top komentator dan biasanya yaitu si admin blog (ex: Iqbal ==> warna merah), dan jumlah top komentator yang ingin ditampilkan (ijo).

Semoga Bermanfaat []

Tags: bagaimana menampilkan top komentator, kode HTML menampilkan top komentar, script komentator teratas, cara mudah menampilkan top komentator, agar top komentator muncul

Rabu, 23 Desember 2009

Download Template Read More untuk Blogger

Kali ini kita selingi pembahasan kita tentang tutorial blogger dengan maslah template (biar gak jenuh OK). Ketika surfing di internet mengenai template unik dan gratis tidak sengaja saya temukan template yang memang menurut saya benar2 unik dan layak kita gunakan, selain memang statusnya sebagai template gratis. Judul postingan di atas hanyalah bahasa bikinan saya, nama asli template yang ingin kita bahas bukan template Read More ataupun "Read More Template" akan tetapi Chucky template. Template ini asli bikinan topwpthemes yang kemudian dikonver oleh anshuldudeja dan ritesh menjadi template blogger.

Begitu saya mendapatkan template chucky ini, saya langsung menggunakannya pada blog saya yang beralamatkan di ~~Software2iqbal.blogspot.com~~ (Update: blog demo telah dihapus, fungsi insyaAllah akan terus berjalan). Beberapa pertimbangan saya menggunakan template chucky, karena tampilan postingan kita otomatis berbentuk read more (ini alasan kenapa saya memberi judul postingan ini seperti di atas), dengan kata lain kita tidak perlu lagi menerapkan trik read more ke dalam postingan kita. Lalu alasan lainnya lagi karena warna template tersebut (biru) benar2 cocok untuk tema blog saya (software gratis dan tutorial), selain itu juga warna header blog saya tersebut berwarna biru (walau digerogoti oleh semut hehehe...), yaaaah...singkat kata template chucky ini so nice dah...

Bagi teman2 yang tertarik untuk menggunakan template tersebut silahkan di-download melalui link berikut (silahkan pilih):

1. Link 1 (Google site)

2. Link 2 (anshuldeja)

Semoga Bermanfaat []

Tags: template read more blogger, template read more otomatis, template unik read more, download template read more