Blogger iman: Oktober 2012

Rabu, 31 Oktober 2012

Cara Membuat/Memasang Favicon & Animated Favicon di Blog

Favicon adalah logo yang ditampilkan di sebelah kiri domain url maupun di tab browser. Pengguna blogspot tentu saja memiliki favicon default bawaan dari blogger. Hal ini tidak sama dengan wordpress dimana favicon secara otomatis dapat digenerasikandi ubahsuaikan. Favicon menjadi identitas dari suatu blog karena merupakan ciri khas dan bisa dibilang sebagai brand.

Gambar yang digunakan sebagai favicon berformat .ico seperti halnya format icon-icon yang biasa kita temui sebagai icon file ataupun folder di dalam PC. Format ini unik karena dimanapun dia ditampilkan, gambar aslinya akan langsung terlihat tanpa membuka filenya (dan ini bukan preview seperti yang kita lihat di format lain misalnya jpg, tif, dan lain-lain ketika ditampilkan di dalam folder). Untuk animated favicon anda dapat menggunakan file gambar berformat gif.

Berikut langkah-langkah pembuatannya:

1. Siapkan gambar yang hendak anda jadikan favicon, atau anda dapat mencarinya di situs-situs yang menyediakan gambar icon gratis. Anda dapat pula mencari gambar favicon maupun animated favicon gratis. Gunakan keyword "free favicon/animated favicon image" di Google.

2. Untuk membuat file ico, anda dapat menggunakan photoshop atau gunakan jasa situs generator ico gratis seperti: www.favicon.cc, www.favicongenerator.com, atau www.favicon.co.uk. Untuk animated favicon anda (gif) anda dapat membuat animasinya di situs www.animatedfavicon.com. Upload file anda ke situs-situs tersebut, ikuti beberapa langkahnya, dan download file hasilnya.

3. Upload file favicon anda ke situs hosting gambar yang mensupport gambar ico karena Blogger tidak mensupport upload gambar berformat ico. Lihat list situs terbaik untuk hosting gambar ico dan gif ini untuk mengupload favicon anda.

4. Copy terlebih dahulu direct link dari gambar yang telah diupload.

5. Kemudian masukkan url-nya ke script tag berikut ke bagian antara <head> dan </head> di template HTML anda. Saya sarankan untuk dimasukkan setelah meta tag agar cepat termuat oleh browser namun tidak mengganggu meta.

Untuk favicon file ico:

<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Untuk animated favicon file gif:

<link href='url gambar gif anda' rel='icon' type='image/gif'/>

Untuk menggunakan kedua-duanya dan berjaga apabila file gif gagal dimuat oleh koneksi yang sangat lambat, gunakan kedua file ico dan gif anda. Masukkan kedua tag dengan urutan sebagai berikut:

<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='url gambar gif anda' rel='icon' type='image/gif'/>

6. Preview dan save.

7. Done!

Update:
Blogger kini telah memiliki fitur Blogger Custom Favicon yg dapat menambahkan Favicon secara otomatis dengan cara yg lebih mudah. Silahkan coba.

9 Situs Upload dan Hosting Gambar ICO (Favicon) Gratis Terbaik

Seperti kita ketahui Blogger/blogspot tidak mengijinkan penggunanya untuk mengupload dan menghosting gambar favicon berformat ico. Jadi bagi anda yang ingin memasang favicon harus agak ribet diperlukan hosting eksternal untuk memuat file ico tersebut. Bagi anda yang ingin mengetahui langkah-langkah memasang favicon silakan kunjungi "cara membuat/memasang favicon dan animated favicon" terlebih dahulu

Namun, sayangnya tidak semua situs hosting gambar juga mensupport format gambar .ico. Memang gampang-gampang susah sih mencarinya. But don't worry, akhirnya saya dapat mengumpulkan dan mendapatkan beberapa situs yang dapat mensupport ico maupun gif (untuk animated favicon). Semuanya telah dites dan memiliki kualitas yang baik alias servernya tidak lemot dan file cepat terdownload oleh browser.

Berikut listnya:

1. Picturestack.Support: jpg, jpeg, tiff, png, gif, bmp, tiff, ico. Max: 4092 Kb.

2. HostAnyImage. Support: jpg, jpeg, gif, ico, bmp, png. Max: 10420 Kb.

3. HostAnyPic. Support: jpg, jpeg, bmp, gif, tiff, tif, png, ico, psd, swf. Max: 10420 Kb.

4. Qfqy. Support: jpg, jpeg, gif, png, ico. Max: 2048 Kb.

5. MyImageHost. Support: jpeg, jpg, gif, bmp, ico, png. Max: 25600 Kb.

6. ImageHosting.gr. Support: jpeg, jpg, bmp, png, gif, ico, tif, tiff, psd, swf. Max: 2355 Kb.

7. MyUpload.org. Support: jpg, jpeg, gif, png, ico. Max: 10240 Kb.

8. Image.Computersteroids. Support: jpeg, jpg, bmp, png, gif, ico, tif, tiff, psd, swf, psp, art. Max: 10240 Kb.

9. FreeImageHosting.in. Support: jpeg, jpg, gif, png, ico. Max: 2048.

Give it a try then, mates.

Update:
Blogger kini telah memiliki fitur Blogger Custom Favicon yg dapat menambahkan Favicon secara otomatis dengan cara yg lebih mudah. Silahkan coba

Fitur Baru: Blogger Custom Favicon dan Cara Membuat-nya

Blogger baru saja memperkenalkan fitur baru "Blogger Custom Favicon" yang akhirnya memberi kemudahan baru bagi anda pengguna Blogger/Blogspot untuk membuat favicon pribadi blog. Kita tidak perlu repot-repot lagi mengupload file .ico ke hosting lain dan memasang script-nya melalui edit HTML. Cukup siapkan file ico sebagai favicon yang telah dibuat dan dipersiapkan untuk favicon blog blogger anda, dan upload melalui fitur "edit favicon".

Cara mengakses dan membuat "Blogger Custom Favicon":

Note:

Jika belum memiliki gambar favicon berformat .ico, convert terlebih dahulu file gambar (jpg/png) secara online dengan menggunakan ICO converter. Download file ico yang telah terbuat di komputer.

1. (update: fitur ini sekarang sudah dapat diakses langsung melalui dashboard Blogger)

2. Klik Design/Rancangan.

3. Di halaman page elements, di bagian atas editor akan ditemui fitur Edit favicon seperti gambar berikut, dengan default favicon bergambar logo Blogger di sebelah kiri:

4. Klik "edit" di sebelah kanan tulisan "Favicon".

5. Kemudian akan muncul pop-up window:

6. Klik Browse dan cari folder dimana anda menyimpan file .ico yang telah dipersiapkan, klik open. Tunggu sampai favicon terupload dengan hasil gambar seperti di bawah ini:

7. Setelah favicon terupload, klik save.

8. Di bagian design/page elements, favicon akan muncul menggantikan favicon berlogo Blogger:

9. Custom Favicon telah tampil di Blog anda.

10. Done!

Note:

Paling tidak butuh waktu 1 hari untuk Blogger melakukan generating favicon. Jadi, sobat akan melihat hasil tampilan favicon baru di browser setelah proses itu.

Cara Membuat & Memasang Twitter Follow Button (Official)

witter Follow Button yg dirilis secara official oleh twitter kini semakin memiliki fitur yg canggih. Meskipun hanya ditampilkan dalam bentuk button dan link sederhana, sebenarnya ada beberapa hal yg dapat dilakukan hanya dengan sekali klik, tidak seperti twitter follow widget yg sebelumnya. "Dengan klik button, pengunjung dapat langsung melakukan follow tanpa harus masuk ke twitter." Link yg berada di sebelah button juga berfungsi untuk mengetahui profil serta update terbaru (tweet) nya. Jadi, memasang twitter follow button di blog kini dapat memberikan efek jauh besar bagi perkembangan dan popularitas blog serta pemilik blog.

Cara Membuat Twitter Follow Button

1. Masuk ke halaman follow button

2. Perhatikan gambar berikut:

A. Kolom untuk mengisi nama account twitter. Isikan akun twitter blog atau akun twitter pribadi yg ingin dibuatkan button follow-nya.

B. Background. Sesuaikan dengan background blog dimana button akan dipasang. Jika terang, pilih "Light. Sebaliknya, jika gelap pilih "Dark".

C. Fitur untuk menampilkan / tidak menampilkan jumlah twitter followers. Pilih "No" jika tidak ingin menampilkan.

D. Bahasa. Klik menu dropdown pilih bahasa yg diinginkan, tersedia fitur Bahasa Indonesia.

E. Preview tampilan button.

F. Script/Kode twitter follow button. Setelah selesai melakukan setting, copy kode/scriptnya.

Cara Memasang Twitter Follow Button di Blog/Web

Button dapat dipasang di bagian manapun dari blog/web di dalam tag <body> seperti ketika anda memasang menampilkan link.

Untuk blog berplatform blogger:

a. Button dapat dipasang di dalam gadget (sebagai widget).

1. Buka dashboard > design/layout > klik "add a gadget/tambahkan gadget > Pilih HTML/Javascript > Masukkan kode ke dalam kolom > save.

2. Drag/geser gadget di halaman design/layout ke posisi yg diinginkan. Save lagi.

b. Opsi lain untuk memasang widget follow button adalah di bagian posting, yaitu di bawah judul posting atau di bawah posting/artikel:

1. Perhatikan script berikut:

<div style='float:right;margin-right:5px;'>Kode Twtter Button</div>

Copy script di atas. Ganti Kode Twtter Button dengan kode button yg telah dicopy tadi.

1. Masuk ke Edit HTML/Edit Template, centang "Expand Widget templates".

2. Untuk memasang di atas posting, cari <div class="post-header-line-1">. Jika tidak ketemu cari <data:post.body/>. Letakkan kode tepat di bawah <div class="post-header-line-1"> atau di atas <data:post.body/>.

3. Bagi yg ingin memasang button di bawah posting/artikel, cari <data:post.body/>, letakkan kode tepat di bawahnya.

4. Save & done.

Hasilnya akan seperti ini [sekalian follow ya :-) ]

Cara Buat/Pasang Share Buttons di Posting Blogger (Like, Tweet, +1)

Share buttons adalah tombol-tombol yg dapat digunakan pengunjung untuk menilai & membagikan link atau konten tertentu yg mereka sukai ke social media, baik Facebook, Twitter, Google+, dll. Banyak sobat Buka Rahasia Blogspot yg menanyakan tentang share buttons yg saya gunakan di bawah judul posting. Saya menggunakan 3 buttons milik 3 social media yg disusun sedemikian rupa menjadi satu bagian widget. Dulu saya pernah share cara pemasangan Facebook Like Button & Google +1 Button, namun Tweet Button belum. Tetapi karena banyak sobat yg meminta 3 button (tombol) share itu sekaligus menjadi satu widget, oke deh Tweet Button saya lompati dan akan langsung share cara membuat & memasang ketiganya.

Masih seperti dua cara sebelumnya, widget ini hanya akan ditampilkan di bagian posting ketika halaman posting dibuka secara utuh serta tidak tampil pada jenis halaman lain (homepage, label, search, archive). Agar susunan, jarak serta tampilan tidak kacau, saya membuat ukuran-ukuran tersendiri pada masing-masing button lalu menyusunnya dengan tabel. So, jangan mengubah nilai apapun di dalam masing-masing button.

Sebelum memasang share buttons, perhatikan beberapa hal berikut:

a. Jika sudah memasang widget Facebook like atau Google +1, khususnya yg saya share di blog ini, hapus atau ambil terlebih dahulu kodenya. Lihat 2 posting terdahulu untuk mengetahui mana yg harus dihapus.

b. Jika sudah pernah memasang Google+ 1 Button, tidak perlu lagi memasang script plugin API Google +1 seperti berikut:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

c. Jika belum, pasang script plugin API Google +1 tersebut di atas </head> pada edit HTML/Edit Template.

Cara Memasang Share Buttons (Facebook Like, Tweet, & Google +1)

Setelah memastikan beberapa hal di atas, pasang widget share buttons dengan langkah-langkah berikut:

1. Copy script/kode berikut:

<b:if cond='data:blog.pageType == "item"'>
<table border='0'><tbody><tr>
<td><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="bukarahasiablog">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></td>
<td><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
</b:if>

Ganti bukarahasiablog dengan nama akun twittermu.

2. Buka halaman edit HTML/Edit Template:

Design/Layout > klik Edit HTML/Edit Template > Centang (check) "Expand Widget Templates"

2. Jika ingin memasang di bawah judul posting:

Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat di BAWAHnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/> lalu letakkan script/kode tepat di ATASnya.

3. Jika ingin memasang di bawah posting/artikel:

Cari (Ctrl + F) <data:post.body/> lalu letakkan script/kode tepat di BAWAHnya.

4. Save template 'n lihat hasilnya.

5. Done.

Good luck n enjoy your blog's share buttons (Facebook Like, Tweet Button, & Google +1 Button).

Cara Memasang Fitur Blogger Star Rating di Posting Blog

Blogger star rating adalah salah satu fitur baru Blogger yg resmi diluncurkan pada pertengahan 2011 lalu. Dulu, uji coba serta akses pengaktifan & penggunaannya harus melalui draft.blogger.com. Tapi kini tidak lagi, aktivasi fitur star rating for blogger dapat dilakukan melalui dashboard blogger.com. Star rating memberikan kesempatan pada pengunjung blog untuk menilai konten/isi posting yg dibacanya. Bagi pemilik blog, star rating dapat memberikan gambaran guna mengevaluasi penyajian isi blog.

Cara Memasang Star Ratings Widget Pada Official Blogger Templates

Template Blogger resmi (non custom templates) telah memiliki bagian yg berisi kode-kode widget star rating. Apabila ingin mengaktifkannya, cukup dengan melakukan beberapa langkah berikut:

1. Masuk ke dashboard Blogger.

2. Buka halaman layout (page elements).

3. Klik "edit" pada bagian badan posting (blog posts).

4. Klik/centang "Show Star Ratings"

5. Setelah itu save.

Cek posting blog, widget star ratings blogger ditampilkan pada bagian bawah posting.

Note: Pada beberapa kasus tertentu, opsi "Show Star Ratings" tidak ada. Jika sobat menemui kasus demikian, akses Blogger melalui draft.blogger.com.

Baca selengkapnya »

Tambahkan Widget AddThis Sharing Buttons Terbaru di Blogmu!

Sobat mungkin sudah tahu dan menggunakan AddThis Sharing Buttons yang cukup terkenal ini. Google Pagerank-nya saja 10, dan Alexa Ranknya sekitar 158 (apa hubungannya ya?). AddThis Social Sharing buttons (begitu nama lengkapnya :)) adalah widget penting bagi para blogger dan webmaster. Alat ini tidak saja menyediakan berbagai macam sharing buttons milik berbagai macam social media, tapi juga dilengkapi dengan fitur analytics untuk memonitor aktivitas sharing. Tentu ini sangat berguna bagi blogger/publisher untuk mengetahui tingkat popularitas kontennya di social media, untuk menganalisis dan mengukur trend berkaitan dengan konten dan topik yang digeluti, dan, tentu saja, untuk mengukur seberapa kuat social media membantu upaya peningkatan traffic.

Nah, dalam prosesnya. AddThis telah berkembang dengan sangat pesat, dalam satu tahun belakangan ini saja jumlah usernya mencapai dua kali lipat. Dan yang lebih hebat lagi, baru-baru ini AddThis sharing tools telah berevolusi dalam bentuk yang lebih kuat, diantaranya adalah perubahan script yang digunakan, kemudahan dalam menggunakan, layout lebih elegan, dan memiliki lebih banyak fitur. Mari kita lihat!

Baca selengkapnya »

Cara Buat Menu Drop Down Floatting Di Blogger

iMan_kYen | Hai sobat blogger, tutorial kali ini saya memposting tentang menu floatting drop down di blogger. Menu ini berwarna ungu kemerahan dan sangat cocok untuk gaya blog Anda yang lebih banyak menggunakan warna merah ataupun ungu.

Langkah :

Buka akun Blogger Anda
Masuk ke menu edit HTML, jangan lupa centang Expand Template Widget
Cari kode dibawah ini :

</head>

4. Pastekan kode dibawah ini, diatas pada kode diatas :

<style>
#menu { background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba);
height:35px;; text-align:center; position:fixed; z-index:20; right: 0%; left: 0%;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#menu ul {display:inline-block;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {clear:both;float:none;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
#menu ul.level1 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu ul.level2 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu ul.level3 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu ul.level4 {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
height:35px; width:250px;}
#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
#menu a {display:block; font:normal 14px Arial; color:#fff; line-height:35px; text-decoration:none;padding:0px 15px 0 15px;outline:none;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover > ul {visibility:visible; left:0; top:35px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-35px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
#menu a:hover ul {left:0; top:30px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:30px;}
#menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}
#menu li a.fly {font-variant: small-caps;}
#menu li.left ul a.fly {font-variant: small-caps;}
#menu li a:hover,
#menu li a.fly:hover {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu li:hover > a,
#menu ul li:hover > a.fly {
background-color: #ba1eaa;
background-image: -moz-linear-gradient(#04acec, #ba1eaa);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#ba1eaa));
background-image: -webkit-linear-gradient(#04acec, #ba1eaa);
background-image: -o-linear-gradient(#04acec, #ba1eaa);
background-image: -ms-linear-gradient(#04acec, #ba1eaa);
background-image: linear-gradient(#04acec, #0186ba)
}
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu ul, .tabs-outer {overflow:visible;}
#menu li a {border: none;}
.main-outer {z-index:10;}/*for IE*/
.tabs-outer {z-index:11;}/*for IE*/
</style>

Baca selengkapnya »

Cara Buat Menu Dropdown di Bawah Header Cara Buat Menu Dropdown di Bawah Header

iMan_kYEn | Membuat menu dropdown memang menjadi suatu hal yang menarik bagi sebuah web maupun blog dan Anda maupun saya akan belajar bagaimana cara melakukan menu dropdown dibawah header. Menu dropdown ini sangat keren dan stailis yang dibuat oleh iman.

Fitur :

Didisain dengan background dan warna menu yang sangat stailis
Didisain juga dengan gambar dan link
dan juga didisain dengan kotak berlangganan artikel lewat email
Didisain dengan 2 dropdown, kiri dan kanan seperti pada gambar diatas

Kekurangan :

Menu dropdown ini ada kekurangan pada beberapa template, kekurangan menu ini pada bagian pada saat heading disorot mouse maka ada background yang tidak seharusnya ada.

DEMO

Baca selengkapnya »

Minggu, 28 Oktober 2012

Cara memasang gambar animasi lucu di pojok blog (widget animasi blog gratis)

Cara menampilkan gambar animasi di pojok blog. Terkadang untuk menghias blog agar tampak lebih menarik maka bisa memasang gambar animasi di blog.Bisa ditempatkan di pojok atas (kiri dan kanan), pojok bawah kiri dan kanan, atau semua pojok diisi gambar lucu-lucu.

Untuk menampilkan gambar lucu, cukup copy salah satu script html di bawah ini kemudian masukkan ke dalam gadget html. Script ini saya buat menggunakankode html ditambah gambar dari situs sweetim.

Contoh dan scriptnya bisa dilihat di bawah ini :
1.Gajah loncat

Script:

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

2. Boring

Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

3.Tuyul ketawa

Script:

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

4.Boneka joget

Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

5. Panda main bola

Script :

<div style="position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi-Blog</a></center></small></div>

6. Tuyul baring

Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Free-Widget-Animasi</a></center></small></div>

Baca selengkapnya »

Jumat, 26 Oktober 2012

Cara Membuat Logo I Love Indonesia Di Pojok

Cara Membuat Logo I Love Indonesia Di Pojok. Para blogger Indonesia harus punya yang satu ini nch, nggak wajib juga sih. Tapi lebih baik juga biar indonesia dikenal di mana-mana :D. Yang tertarik untuk memasang silahkan ke TKP sekrang.

Masuklah ke blogspot Anda
Klik Rancangan
Klik Tambah Gadget (bisa di mana saja, tidak ada bedanya)
Pilih HTML/Javascript
Copy kode dibawah ini :

Banner berada di Pojok Kanan-Atas:
<a href=http://thekimz.blogspot.com/2011/09/cara-membuat-logo-i-love-indonesia-di.html style="display:scroll;position:fixed;top:5px;right:5px;"><img src="http://4.bp.blogspot.com/-CkS5ssq5DKs/ToFrrsfc_pI/AAAAAAAABdw/8bdAJT5vGS8/s1600/iluvindonesia-kanan+atas.png"/></a>
Banner berada di Pojok Kanan-Bawah:
<a href=http://thekimz.blogspot.com/2011/09/cara-membuat-logo-i-love-indonesia-di.html style="display:scroll;position:fixed;bottom:5px;right:5px;"><img src="http://1.bp.blogspot.com/-XQymrUu-B8w/ToFrshMae3I/AAAAAAAABd0/SbntIjU8T7U/s1600/iluvindonesia-kanan+bawah.png"/></a>
Banner berada di Pojok Kiri-Atas:
<a href=http://thekimz.blogspot.com/2011/09/cara-membuat-logo-i-love-indonesia-di.html style="display:scroll;position:fixed;top:5px;left:5px;"><img src="http://1.bp.blogspot.com/-hhIs6hGp9bE/ToFrtvYpbgI/AAAAAAAABd4/ccpdyxRHUho/s1600/iluvindonesia-kiri+atas.png"/></a>
Banner berada di Pojok Kiri-Bawah:
<a href=http://thekimz.blogspot.com/2011/09/cara-membuat-logo-i-love-indonesia-di.html style="display:scroll;position:fixed;bottom:5px;left:5px;"><img src="http://2.bp.blogspot.com/-5am4MTN5s2s/ToFruv1NcKI/AAAAAAAABd8/_SPDnvcbWD8/s1600/iluvindonesia-kiri+bawah.png"/></a>

6. Klik Simpan Dan Lihat hasilnya

Semoga bermanfaat

Ubah Lebar Kolom Template

Lagi-lagi soal template nih. Mungkin ada beberapa dari sobat sekalian ada yang merasa sangat menyukai suatu template, akan tetapi ada ganjalan yakni lebar kolom yang ada tidak sesuai keinginan kita, baik itu lebar kolom sidebar atau pun mainbar (kolom tempat posting). Ada kalanya lebar kolom dari suatu template di rasa terlalu lebar ataupun terlalu sempit, nah jika sobat mengalami hal yang demikian, lumayan nih ada tips buat mengakalinya supaya lebar kolom menjadi sesuai dengan keinginan kita sendiri.

Untuk mengetahui lebar kolom suatu template, kita bisa mengenalinya melalui style sheet CSS nya. Akan tetapi tentu saja ada perbedaan antara satu template dengan template yang lainnya, ini tentunya terserah kepada si designer template nya sendiri. Sebagai contoh untuk bagian header, jika menurut standar template blogger di dalam style sheet CSS nya di namakan header, akan tetapi untuk template-template hasil buatan designer lain di luar blogger ada yang menamakan Banner ataupun nama-nama yang lainnya. Sebuah nama tentu tidak akan berpengaruh terhadap hasil yg di dapat, nama ini di pakai hanyalah agar mudah untuk di ingat atau di kenali oleh sang pemakai template apabila ingin melakukan editting template.

Agar tidak terlalu membingungkan, saya ambil contoh template minima 3 kolom yang bisa di download di sini !.Setelah melihat perkembangannya ternyata template ini banyak yang menyukainya. Jika sobat tidak puas dengan lebar kolom pada template tersebut, silahkan deh ikuti tips berikut biar lebar kolomnya sesuai dengan keinginan sobat. Dimanakah letak kode-kode untuk mengatur lebar kolom ? saya berikan contoh :

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;

}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}

Seperti yang terlihat pada kode-kode diatas, yang mempengaruhi lebar kolom adalah yang saya cetak merah. Width tentu saja dalam bahasa indonesia adalah lebar, jadi gampangkan untuk mengenalinya. 900px adalah nilai lebar yaitu sebesar 900 pixel.

Agar lebih faham, kode-kode diatas saya uraikan :

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ini artinya header-wrapper mempunyai lebar sebesar 900px dan mempunyai border (saya artikan border adalah bingkai atau garis tepi) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik) dengan warna border yang bisa di ubah-ubah (pada bagian font dan warna).

header-wrapper adalah hanya penamaan saja, tidak mutlak. Jika di ganti dengan nama kepala juga tidak apa-apa. width:900px; berarti lebarnya sebesar 900 pixel. nah nilai 900 pixel inilah yang bisa di ubah sesuai keinginan sobat, mau ditambah nilainya biar lebih lebar, atau di kurangi biar lebih kecil. Akan tetapi saran saya, nilai dari header ini harus sama dengan nilai dari lebar body agar terlihat bagus. border:1px solid $bordercolor; adalah agar bagian header mempunyai garis tepi sebesar 1 pixel, jika ingin lebih tebal sobat tinggal tambahin nilainya, atau jika sobat menginginkan garis tepi ini tidak ada maka sobat hapus saja kode ini.

Baca selengkapnya »

Rabu, 24 Oktober 2012

Kumpulan Animasi Bergerak Yang Lucu dan Keren Untuk Blog ( Lengkap )

Cara Memasang Animasi Bergerak Yang Lucu dan Keren Untuk Blog -

Ternyata banyak sekali blogger – blogger yang sangat menyukai animasi bergerak pada blognya. Bisa terlihat ketika saya berkunjung ke beberapa blog teman. Dari animasi yang simple dengan ukuran mini sampai yang ribet dengan ukuran jumbo banyak terpasang di blog mereka. Ya itu juga karena selera masing2 orang berbeda. Memang animasi pada blog sangat membantu blog agar terlihat menarik. Jadi blog akan terlihat hidup dan tidak membosankan. Sebelumnya saya pernah juga memposting tentang animasi bergerak, tapi saya rasa pada postingan sebelumnya pilihan animasi terlalu sedikit. Sehingga saya memposting kembali mengenai animasi bergerak lagi, namun dengan pilihan yang beragam dan banyak tipe agar bagi anda yang ingin memasang animasi jadi lebih banyak referensi dan pilihan. Berikut daftar dan cara memasangnya

Cara Memasang Widget Animasi Bergerak Di Blog

Login ke dasbor blog anda
Pilih rancangan
Pilih Tambah Gadget
Pilih Html/Java Script
Lalu copy kode Html animasi yang anda ingin pasang di blog. Kodenya ada di bawah, anda bisa memilih sesuai keinginan anda.
Pastekan kode tadi di Html/java script tadi.
Simpan, dan selesai

Daftar Kode Html Animasi Bergerak

1.Spongebob

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>

2.Naruto

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://permathic.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/692/th/69207.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://permathic.blogspot.com/2012/05/kumpulan-animasi-bergerak-yang-lucu-dan.html" target="_blank">My Widget</a></center></small></div>

Baca selengkapnya »

Cara Merampingkan / Mengecilkan Alexa Rank

Ingin Iklan Anda Terpasang Di Permathic Blog ? Segera Pasangkan Iklan Anda Di Sini !!!

Cara Merampingkan / Mengecilkan Alexa Rank –

Siapa yang tidak menginginkan alexa ranknya terus meramping ? pasti semua blogger menginginkannya bukan ? ya ! sebab alexa rank yang ramping atau dengan digit yang kecil menandakan bahwa blog tersebut memiliki rangking yang bagus secara global maupun negara. Hal ini dikarenakan alexa memberikan sebuah layanan yang mana membuat suatu rangking sebuah blog secara global (dunia) maupun negara. Jadi jelas bagi blog yang beralexa ramping menandakan rangkingnya sangat bagus. Akan tetapi untuk membuat rangking alexa menjadi ramping tidak mudah loh,,, ada yang perlu dilakukan dan di usahakan. Berikut cara untuk Menurunkan Alexa Rank

Cara Menurunkan / Mengecilkan Digit Alexa Rank

1. Pasang widget alexa di blog anda untuk memantau keadaan blog anda.
Cara paling mudah dan murah meriah adalah dengan Blogwalking dan meninggalkan komentar di Blog-blog dengan Alexa Rank yang lebih tinggi dari Blog anda .

2. Daftar Blog ke Search Engine Terutama Google, Yahoo dan MSN
Ini dilakukan agar blog kita cepat terindek di mesin pencari terutama yang sudah terkenel dan besar seperti Google, Yahoo, MSN dll, baru setelah itu ke search engine lainnya.

3. Daftar Blog ke Technorati
Technorati merupakan salah satu direktori blog yang sudah terkenal, bia juga berfungsi sebagai blogsearch, tags aggregator, online bookmarks, juga bisa mengetahui blog mana saja yg memasang link blog kita..

4. Cari Backlink
Cari backlink sebanyak-banyaknya dan berkualitas sebaiknya sih sesuai kategori blog, karena google menilai berdasarkan kuantitas dan kualitas link, tapi akhirnya mana saja yang mau bertukar link.. saya terima.

5. Bookmark Blog Sebagai Homepage Browser
Bookmark blog sebagai homepage di komputer yang sering digunakan untuk browsing ini juga baru kemarin saya lakukan di komputer rumah sebenarnya sih ini bisa juga dikantor, diwarnet atau dimana saja, makin banyak tentu semakin baik.

6. Update blog 2 hari sekali , 1 minggu 2 kali atau 1 bulan sekali . bila perlu setiap hari justru lebih bagus lagi.

7. Tulis artikel Tentang Alexa
Tulis artikel tentang Alexa misalnya seperti yang sedang sobat baca tentang Cara Meningkatkan Alexa Rank ini dan ajak para pembaca untuk men-download Alexa Toolbar. Jangan lupa saat membuat artikel tentang Alexa, selalu gunakan label atau kategori dengan keyword : Alexa, Alexa rank, Alexa traffic rank, Rangking Alexa, dsb. Intinya ada kata ' Alexa '.

8. Melakukan Ping
Lakukan ping secara berkala , saya baru lakukan ini dua kali , ping ini untuk merefresh blog kita di data base mesin pencari.

9. Minta teman untuk mereview dan merating profil blog Anda di Alexa. Memang belum ada bukti, namun mungkin saja cara ini berguna.

Download/ Instal Alexa toobar Disini

Semoga bermanfaat.

Cara Memasang Widget Revolver Maps Di Blog

Cara membuat revolvermaps di blog -
Belakangan ini ketika saya sedang berkunjung ke beberapa blog , saya menemukan sesuatu yang unik. Saya melihat ada sebuah widget yang sangat menarik, namanya Revolver Maps. Widget yang menampilkan visitor blog dengan efek 3D dengan tampilan globe yang berputar sepertihalnya bumi. Dan saya pun tertarik untuk memasangnya. Karena efek 3D nya tersebut bisa membuat blog terlihat lebih hidup. Dan akhirnya timbul keinginan saya untuk berbagi info ini, tentang bagaimana cara memasang widget revolver maps kepada para blogger sekalian.

Nah ,. Caranya mudah kok ..

Langkah Pertama

Masuklah ke situsnya Revolver Maps, klik saja disini Revolver Maps
Kemudian Klik Get Standard Version
Atur Widgetnya sesuai keinginan anda.
Copy kodenya

Atau bagi anda yang tidak mau repot , bisa copy kode di bawah ini

Langkah ke-2

Login ke dasbor blog anda
Pilih Rancangan
Pilih elemen laman
Pilih tambah gadget
Pilih edit Html / java script
Kemudin Paste kan kode tadi
Atur di mana anda mau meletakannya
Simpan
Selesai

Mudah bukan ? Selamat mencoba. Dan buatlah blog anda menjadi lebih hidup dan menarik..

Cara Install Ulang Windows 7 (Seven)

Cara Install Windows 7 (Seven) - Windows adalah salah satu sistem operasi yang paling banyak di minati dan digunakan di Indonesia, selain memiliki fitur-fitur yang kumplit Windows juga memberikan kemudahan dalam mengakses setiap fitur yang terdapat di dalamnya. Kebanyakan penjual gadget (PC atau laptop) sudah menyertakan sistem operasi Windows yang telah terinstall pada produk mereka di pasaran, sehingga kita tidak perlu pusing lagi memikirkan cara menginstall sistem operasi pada gadget kita. Tetapi, bagaimana jika PC atau laptop yang kita beli belum terpasang sistem operasi? Ingin mencoba menginstallnya sendiri? Berikut akan saya bahas tahap demi tahap cara install sistem operasi windows (dalam tutorial ini saya menggunakan WIndows 7 Ultimate SP1), hal pertama yang harus dipersiapkan adalah DVD Windows 7, mari kita mulai.

Download Windows 7 SP1 di Sini

Langkah 1

Atur bios pada PC/laptop agar booting pertama menjadi ke DVD. Untuk melakukan pengaturan pada bios biasanya ketika PC menyala terdapat keterangan key/tombol mana yang harus ditekan untuk bisa masuk ke menu bios, misal tombol F2 atau tombol Del. Ketikan berada di dalam menu bios, cari pengaturan booting dan ubah booting pertamanya ke perangkat DVD. Kemudian masukan DVD Windows 7 dan restart. Ketika PC kembali menyala akan tampil perintah "Press any key to boot from CD or DVD... " segera klik pada sembarang tombol keyboard dan PC pun mulai mempersiapkan file yang dibutuhkan untuk melakukan installasi seperti gambar di bawah.

Langkah 2

Setelah semua file siap, akan tampil "Starting Windows" dilanjutkan pengaturan bahasa, format waktu dan input keyboard. Atur seperti gambar di bawah kemudian klik tombol next.

Langkah 3

Kemudian tampilan akan terlihat seperti gambar di bawah ini, klik pada pilihan "Install now" maka pengaturan pun dimulai. Jangan lupa mencentang pilihan "I accept the license terms" ketika jendela lisensi ditampilkan, klik tombol next.

Baca selengkapnya »

Cara Instal Ulang Windows XP

Cara Instal Ulang Windows XP - Mungkin bagi anda yang sedang membuka blog ini atau mencari artikel tentang cara menginstal ulang windows xp, pasti anda sedang mengalami masalah dengan komputer anda ? entah masalah yang dikarena virus atau masalah masalah lain. dan anda ingin mencari tau bagaimana cara untuk menginstal ulang windows tersebut. Nah untuk itu Permathic blog akan memberikan tips kepada anda tentang bagaimana cara untuk menginstal ulang windows XP anda. Sebab dengan anda menginstal ulangnya sendiri, tentu akan dapat lebih menghemat biaya tentunya (hehehe). Dan Berikut langkahnya :

1. Nyalakan pc anda lalu masukan driver/cd Windows anda, kemudian restart pc anda.

2. Kemudian setelah pc hidup tekan tombol Delete pada keybord agar anda dapat masuk di BIOS (Basic Input Output System) komputer. Pada beberapa jenis Mainboard harus menekan tombol F2 pada keyboard. anda dapat melihatnya pada perintah Press DEL to run Setup.

3. Setelah anda masuk ke dalam bios, pilih Boot pada menu dan pilih item Boot device priority

4. Setelah itu anda rubah [CDROM] pada posisi 1st Boot Device untuk boot melalui CDROM dengan menggunakan tombol +- di keyboard.Lalu tekan F10 untuk menyimpan konfigurasi anda.

5. Restart komputer anda lalu pada layar berikutnya tekan sembarang tombol dengan cepat, dan anda akan di bawa pada tampilan seperti di bawah ini:

6. Setelah pada tampilan di atas tekan Enter untuk lanjut pada proses instal atau R untuk melakukan reparasi Windows di Recovery Consule atau F3 untuk mengakhiri proses instal.

7. Pada aksi selanjutnya anda akan di bawa pada layar seperti pada gambar di bawah ini:

Pada gambar di atas posisi partisi belum terisi oleh sistem windows. Tekan C untuk membuat partisi baru pada harddisk dan Enter untuk menginstal. setelah itu and akan di perintahkan untuk menentukan berapa kapasitas partisi yang akan di buat ( anda bebas menentukan berapa dan seberapa besar kapasitas pada masing masing partisi ).

Baca selengkapnya »

Pages

Featured Box

Mod Rewriter

Byte Scrambler

Image Processor

Registry Class

Data Validation

Ajax Tables

Ads 468x60px

Rabu, 31 Oktober 2012

Cara Membuat Twitter Follow Button

Cara Memasang Twitter Follow Button di Blog/Web

Cara Memasang Star Ratings Widget Pada Official Blogger Templates

Minggu, 28 Oktober 2012

Jumat, 26 Oktober 2012

Cara Membuat Logo I Love Indonesia Di Pojok. Para blogger Indonesia harus punya yang satu ini nch, nggak wajib juga sih. Tapi lebih baik juga biar indonesia dikenal di mana-mana :D. Yang tertarik untuk memasang silahkan ke TKP sekrang.

Rabu, 24 Oktober 2012

Langkah 1

Langkah 2

Langkah 3

Social Icons

Clock

My musik

vIsiToR

My pOsTiNG

Popular Posts

Blog Archive

About Me

Followers