CARA MELIHAT KODE WARNA HTML UNTUK BLOG MELALUI PHOTOSHOP...

Ini Postingan Ringan... hehe :D ... lumayan menambah postingan lagi.. sekalian juga sebagai jawaban dari sobat blogger yang menanyakan "Sob.. cara mengetahui kode warna bagaimana sih... ?" ... akan tetapi saya yakin pasti sudah banyak sobat-sobat blogger yang mengetahui cara ini.. karena memang mudah sih.. kamu hanya perlu program editing gambar seperti Photoshop saja.. :-) ..walaupun ada juga yang masih menggunakan daftar kode warna (.doc)... tapi akan lebih bagus bila menggunakan Photoshop karena kamu bisa mencoba-coba kode warnanya dan langsung melihat hasilnya..

Di Photoshop kamu bisa melihat Kode Warna :
- RGB ( R , G , b )
- CMYK (C, M, Y, K)
- HSB (H, S, B)
- Lab

Dengan Photoshop akan mempermudah kita yang suka mengutak-atik warna background/border/dsb.. dan masih ragu akan kebenaran warnanya atau mau mencari warna yang lebih tajam/halus.. biasanya kode warna yang sering digunakan di blogger adalah kode warna seperti ini #F9EFF7 dan R.G.B ..

...Oke langsung saja ya.. sbb :
1. Run program Photoshop di PC/laptop kamu...
2. Pada Window Tools.. seperti gambar dibawah ini..

3. Pada Tools Color picker.. Kliklah 2x..

4. Akan muncul Window Color Picker seperti ini...

5. Gantilah/Copy kode warnanya dengan kode warna yang kamu ketahui lalu paste kode warna di dalam kotak yang saya tandai merah seperti gambar diatas.. nanti warna yang ada di Window Color Picker-nya akan berubah otomatis sesuai dengan kode warna yang kamu ketikan/paste-kan.. like this..

6. dan kode warna ini bisa kamu copy-paste kembali ke dalam kode scripts widget kamu.. atau ke dalam kode scripts template blogmu... Selesai..

... Mudah Bukan ...

CARA MEMBUAT WIDGET MELAYANG DI BLOG..

Waa.. semangat sekali saya posting artikel hari ini.. sudah 3 artikel saya postingkan...
1. Cara Membuat Daftar isi Blog Manual...
2. Cara Setting Waktu di Widget SHOUTMIX agar sesuai dengan waktu negara kita....
..dan postingan ini yang ke-3...
..Mantab Semangat Bloggingku sob.. ..tapi pusing juga sih.... :-D ..hehehe..

Postingan yang ini karena sahabat Delta-Prayoga yang bertanya "eh buat menu di samping begitu gmn yah...? " ..Maksudnya Menu Widget Mp3 DownLoadku yang Melayang di Blogku itu sob itu.. :-) ...

Contoh widget melayang yang ada di blog ini

..Okay.. Langsung kita bahas ya.. simak langkah-langkahnya berikut ini :
1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FAFD02;
background:#FAFD03;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="190" frameborder="0" src="http://www6.shoutmix.com/?ecaknyo" height="700" title="ecaknyo">
<a href="http://www6.shoutmix.com/?ecaknyo">View shoutbox</a>
<!-- End ShoutMix --></iframe>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></center></div></center></div></div></div>

Pada Contoh di atas adalah Widget Melayang Shoutmix...

Lihat Contoh Jadi kLik urL ini => ecak2nyo

Keterangan :
Merah = Gantilah dengan kode Scripts Widget yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..
Biru = Gantilah dengan URL Gambar Tab kamu (atau pakai saja url gambar tab diatas tdi) .. Gambarnya bisa kamu buat dengan Program seperti Photoshop.. lalu kamu Upload/simpan gambar tsb di Photobucket ..baru kamu bisa mendapat kode url Direct Link gambar tdi..
Pink = Aturlah Tinggi & lebarnya sesuai ukuran Gambar Tab kamu..

.gbtab{ = Ini kode scripts untuk pengaturan tampilan gambar tab

Orange
gbcontent = Ini kode scripts untuk mengatur tampilan kontennya
float:left; = Ini utk mengatur posisi widgetnya melayang di kiri / kanan / atas / bawah
border:2px solid #FAFD02; = Memberi warna pada border konten...aturlah/ubahlah warnanya jika mau.. misalnya FAFFFF (sebaiknya gunakan pencari kode warna Photoshop)
background:#FAFD03; = Memberi warna pada isi konten.. disini saya menggunakan warna kuning

4. Simpanlah Widget Melayang ini... Selesai.. namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.. Untuk melihat hasilnya silahkan Refresh blog kamu.. Mudahkan.. ;-)

.... Selamat Mencoba ...

CARA MENGATUR WAKTU DI SHOUTMIX....

..Ini postingan artikel khusus permintaan dari Sahabat Taris... yang katanya begini "Mo nanya nih.. setting jam di shout mix agar sesuai dengan jam WIB bagaimana ya.. bikin postingannya dong :-) ..? " tadinya mau saya ajak chat-chet tapi ternyata dia ofl.. ya sudahlah saya buat saja postingan sesuai permintaannya.. hitung-hitung menambah jumlah postingan artikel saya sendiri..wkwkwwkwkwk :-D ...Biasanya saya buat postingan baru setiap 1 kali seminggu... tapi untuk minggu ini merupakan pengecualian karena ada Sahabat yang meminta.. :-)

Dan bagi sahabat lain yang masih binggung....Cara setting waktu di widget Shoutmix-nya silahkan di simak artikel ini...

...Langsung saja sobat.. ikuti langkah-langkah berikut ini :
1. Loginlah terlebih dahulu ke SHOUTMIX ... dengan username & passwordmu..

Login

2. Pada halaman Menu utama Shoutmix ini.. Bagian Menu Display > Pilih Date & Time..

Menu Utama

3. Maka akan tampil seperti dibawah ini.. halaman Date & Time.. Aturlah seperti yang tampak pada gambar ini..

Setting Date & Tanggal

4. Jika sudah lalu tekan Save Setting.. Selesai.. Lihatlah hasilnya dengan meng-Refresh Shoutmix di Blog kamu... SimpLe kan..

... SimpLe Kaan ..

CARA MEMBUAT DAFTAR ISI SECARA MANUAL...

Kalian pasti sudah melihat Daftar isi yang terpampang jelas di blog saya ini... yang ada icon bintang kerlap-kerlip itu... baiklah akan saya bahas di postingan kali ini... karena juga ada yang tanya lagi "Gimana Bang cara bikin daftar isi kayak di blognya ini..? " .. oke bagi blogger pemula silahkan simak artikel ini.. bagi blogger senior ya silahkan ditambahkan jika masih kurang jelas..

...Bagi Blogger pemula saya sangat sarankan belajar Tutorial Blogging di Blognya Kang Rohman .. di situ juga banyak Blogger-blogger Senior yang OnLine di Shoutmix-nya.. kamu bisa bertanya langsung disana (komunikasi 2 arah yang aktif menurut saya)..

Baiklah kembali ke topik semula... Sebenarnya daftar isi ini mudah membuatnya.. hanya tergantung dari kreatifitas kita saja memanfaatkan widget-widget yang sudah ada di blog kita..

..Asal mula Widget Daftar Isi Manual yaitu dari Widget BlogRoll Manual.. kenapa dikatakan Manual ? karena kita sendiri yang harus mengisi daftar isinya.. Paham ya .. Daftar isi yang saya buat ini terinspirasi dari Daftar isi yang ada di blognya Kang Rohman..

Daftar isi manual

..Tapi ada juga Widget Daftar isi Otomatis yang disertai dengan gambar & komentar yang ada pada postingan itu.. lalu kenapa dikatakan Otomatis ? karena widget itu sendiri yang akan scanning postingan artikel di blog kita dan akan ditampilkan menjadi daftar isi yang keren... tapi Daftar isi otomatis ini menggunakan java scripts (.js) jadi akan sedikit memperlambat loading blog kita.. Paham ya.. ini Contoh Daftar isi Otomatis -> www.bloggertricks.com .. ini pernah saya lihat di tempat sahabat Mas Doyok..

Daftar isi otomatis

..Jadi terserah kalian mau menggunakan Daftar isi yang mana..

Kali ini saya hanya akan membahas Daftar Isi Manual saja... oke kita langsung saja yaa.. ikuti langkah-langkahnya sebagai berikut :

1. Loginlah dulu di Blogger > > Tata letak > Elemen Halaman.. Klik tambah Gadget > HTML/Java Scripts.. Buatlah Namanya Gadget-nya misalnya Daftar isi Blog..

2. Copy-paste kode dibawah ini ke dalam gadget tadi..

<div style="border: 0px solid rgb(153, 153, 153);
overflow: auto;
width: 500px;
height: 150px;
text-align: left; ">

<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/linkwithin-widget-mini-yang-praktis.html"> LinkWithin...WidGet Mini yang Praktis MenampiLkan Cuplikan Postingan!!!</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/ganti-emo-box-shoutmix-di-blog-simple.html"> GanTi eMO box Shoutmix di BLoG.. SimPLe Bgt</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/10/cara-membuat-blogroll-scrolling_04.html"> Cara MemBuaT BLogRoLL ScroLLing Otomatis dan yang ManuaL...</a>
<br/>
<img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/10/bagi-sobat2-blogger-yang-blognya-ber.html"> Cara PaSanG JaM & KaLenDeR iSLaMi aL-HaBib di BLoG</a>
<br/>
</div>

3. Dari kode itu.. gantilah kode scripts berikut ini ;

- <img src="http://i466.photobucket.com/albums/rr22/wong284/star_Blink.gif"/><a href="http://ecaknyo.blogspot.com/2009/09/linkwithin-widget-mini-yang-praktis.html"> LinkWithin...WidGet Mini yang Praktis MenampiLkan Cuplikan Postingan!!!</a>

Merah = Gantilah dengan URL HTML Code Gambar Icon kamu..
Biru = Gantilah dengan Direct URL ke postingan Artikel kamu..
Hijau = Gantilah dengan Judul Artikel kamu..

Ulangilah langkah diatas ini sampai semua postingan artikelmu terdaftar semua..

Lainnya :
- <br/> = Seperti spasi yang memberikan jarak antar text....
- style="border: 0px = Gantilah angka border-nya dengan 1px atau 2px atau biarkan saja 0px..
- width: 500px; = Sesuaikan dengan lebar kolom di blog kamu.. atau aturlah sesukamu
- height: 150px; = Sesuaikan dengan tinggi kolom di blog kamu.. bisa 100px atau 200 / 250 px..
- text-align: left; "&gt; = Mengatur posisi text widget ini / daftar isi ..ganti dengan Center jika mau di tengah-tengah..

4. Jika selesai semua kamu membuat daftarnya dan mengeditnya.. silahkan di simpan widget daftar isi-nya dan tempatkan di tempat yang strategis..

... Selamat MengOprek2 yaa ...

CARA MEMBUAT ANIMASI FAVICON DENGAN GIF MOVIE GEAR v4.01...

Di postingan yang lalu saya telah membahas program untuk membuat Icon BLoG.. jika kamu sudah membuat icon blog-mu dengan program Ico FX ataupun dengan program seperti Photoshop.. dengan catatan gambar icon-nya tetap sama gambarnya tapi hanya satu atau beberapa dari bagian gambarnya saja yang kamu ubah-ubah agar nanti gambar iconnya akan terlihat seperti bergerak hasilnya.. setiap kamu mengubah gambar icon sebaiknya kamu saving juga dengan nama lain seperti : Icon_default trus icon_1 trus icon_2 dst...

...jika telah siap kumpulan gambar Icon-nya maka program GIF Movie Gear v4.01 inilah yang akan membuat gambar icon blog-mu itu menjadi bergerak/Animasi (. gif)..

...di DownLoad yaa.. !!!

=> Download GIF Movie Gear v4.01 Now (Size 1.11 MB)

Tampilan antar mukanya

Setting waktu kecepatan gerak animasinya

Contoh kumpulan gambar untuk membuat Animasi Teks


akan seperti ini jadinya >>

atau ini contoh lainnya >>

.. WaaAAh.. Gambaarnya kok bisa Hiduuup.. !!!

...Selamat Mencoba...

ICOFX.. SOFTWARE PORTABLE UNTUK MEMBUAT / MENGEDIT FAVICON...

...Bagi yang ingin membuat atau mengedit Icon Bloggernya atau Icon jati dirinya di dunia maya.. Silahkan di coba Freeware Software Ico FX PortabLe ini... karena size software-nya yang kecil.. Portable lagi.. kamu tinggal Run instaLernya lalu Browse ke dalam folder (atau Make New Folder) di FLashDisk kamu... dan Eng Ing Eng Editor Ico FX yang keren ini bisa kamu bawa kemana-mana.. Nanti akan ada panduannya disaat kamu mulai menginstal .. ;-)

.. DownLoad yaa..
=> DOWNLOAD Ico FX PortabLe NOW ( size 1,56 Mb )
=> DOWNLOAD GIMP PortabLe NOW ( size 17,8 Mb ) >> Pengedit Foto mirip PhotoShop
=> DOWNLOAD NotepadPlus PortabLe NOW ( size 2,70 Mb ) >> Notepad Plus
=> DOWNLOAD Firefox PortabLe NOW ( size 6,06 Mb ) >> Browser Mozilla FireFox
=> DOWNLOAD WinGeT PortabLe NOW ( size 1,66 Mb ) >> Seperti Download Manager

SpLash Screen Ico FX

Tampilan antar muka

Adding Gambar Baru

Setting Advance


...SeLamaT MencoBa...

CARA LAIN MEMPERCEPAT LOADING BLOG..

Ada-ada saja pertanyaannya yang seperti ini yaa " ..Bagaimana caranya mempercepat Loading BLog kita tapi tanpa menghilangkan Widget yang ada di Blog kita ??! ".. Naaah LooH... Bingung kagak sob.. Wwkwkwkwk ;-)

...Memang ada beberapa widget atau Elemen blog yang sangat mempengaruhi kecepatan Loading Blog saat pembaca atau blogger lain membuka blog kita.. ini membuat mereka menjadi kesal jengkel karena terlalu lama menunggu blog kita terbuka sempurna...

Cara Lain yang saya ketahui dilakukan oleh beberapa sobat blogger untuk mempercepat Loading Blognya adalah sbb ;

- Ada yang pakai cara KOmpreS CSS template blognya
- Ada yang dengan berat hati meng-uninstal widget/elemen blognya
- Ada yang dengan cara hanya menampilkan 1 postingan pada Halaman Depan Blognya
- Ada juga yang seirit mungkin menampilkan Gambar pada setiap Postingan Artikelnya
- Ada lagi yang dengan cara Template blognya dibuat sesimple mungkin
- Ada2 Aja.. dst-lah kekekek :-D

.. Dan sebenarnya yang punya Blog itu sudah mengetahui kalo blognya memang berat sewaktu di browsing.. pasti ada sobat blogger yang mengeluh soal blognya yang loadingnya berat... ( termasuk blog saya ini juga berat kalo sedang Loading.. jiakakakak ) ..

Tapi... !!! ..Beberapa Blogger ada yang tidak mau menghilangkan widget atau elemen blog yang memberatkan itu.. dengan alasan widget atau elemen blog tersebut memang sangat berguna untuk blognya.. seperti widget Live Traffic Feed feedjit atau widget Tautan Postingan LinkWithin..

... Jadi kita ambil jalan tengahnya saja yaa.... Mungkin inilah salah satu cara yang bisa kita lakukan untuk mempercepat sedikit loading blog kita pada Halaman Utama :

Kita pindahkan/Hilangkan saja beberapa (1 atau 2 atau lebih ) Widget/Elemen blog yang tidak begitu penting di tampilkan pada halaman depan Blog.. Kita tampilkan saja widget/Elemen itu pada Halaman sebelumnya (Halaman Postingan Artikel Lawas).. Paham ya !!!

Trik ini sudah saya praktekin sendiri di blog ecaknyo ini.. coba kamu kLik Postingan Artikel saya yg Lawas/Lama pasti berbeda tampilannya dengan Halaman Depan/Utama blog ini..

Langsung saja Sob.. simak caranya sbb ;

1. Loginlah ke Blogger.. lalu pada halaman Dasbor..

2. Pada bagian Tata Letak pilihlah Edit HTML (centang Expand template widget jika diperlukan) dengan New Tab / New Window.. tapi sebelumnya Backup-lah terlebih dahulu kode scripts template blog kamu di Notepad.. nanti tinggal kamu Copas saja untuk mengembalikan seperti kondisi awal apa yang sudah kamu ubah..

Pada bagian Edit HTML inilah kita akan sedikit mengoprek.. karena disinilah kita akan mengetahui widget id (elemen) yang kita instal di blog yang akan tampil widget id dengan nama seperti misalnya HTML1 atau HTML22.. "Tapi bagaimana kita tahu itu widget id yang tepat yang akan kita oprek karena hanya berupa nama HTML1 atau 22 bukannya bernama judul widget seperti widget Statistik atau widget FeedBurner.. ??? ".. Tenanglah dulu sobat.. ikuti saja dan pahami langkah-langkah yang saya terapkan ini..

3. Pilihlah Lihat Blog dengan New Tab / New Window...

4. Untuk mengetahui Nama HTML widget yang akan kita hilangkan Sorotlah (mouse over) simbol edit berupa tang & obeng seperti pada gambar di atas.. Sebagai contoh saya sorot widget Networked Blogs FaceBook..

maka akan muncul di taksbar browser kiri bawah alamat url widget Networked Blogs FaceBook tersebut beserta Nama Widget id-nya.. yaitu seperti ini widgetid=HTML10

5. Kembalilah ke Halaman Edit HTML karena kita sudah mengetahui Widget id dengan nama HTML-nya... dan Carilah nama widgetid=HTML10..

Lalu Copas kedua kode ini :
<b:if cond='data:blog.pageType == "item"'>
dan
</b:if>

Lakukan Persis Seperti contoh di bawah ini..

<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Jika sudah lalu kLik Simpan TempLate.. Lihatlah pada Halaman Depan dan Halaman Sebelumnya (Atau kLik Postingan Artikel Lawas/sebelumnya pada Blog kamu ) dan Bandingkan.. Hasilnya widget tersebut hanya akan tampil pada halaman sebelumnya bukan pada halaman depan blog kamu.. dan ini membuat loading browsing halaman depan blog kamu sedikit lebih cepat.. ULANGI langkah-langkah diatas untuk widget/elemen lainnya..

ATAU sebaliknya..

Jika kamu ingin menampilkan widget/elemen tersebut hanya pada Halaman Depan Blog saja.. jadi pada saat kamu melihat Halaman Lawas/Postingan Sebelumnya widget/elemen tersebut tidak akan tampil... Paham yaa.. !!!

Caranya sama seperti langkah-langkah di atas tapi pada langkah Edit HTML Widget id-nya...

Copas kedua kode ini :
<b:if cond='data:blog.homepageUrl == data:blog.url'>
dan
</b:if>

Lakukan Persis Seperti contoh di bawah ini..

<b:widget id='HTML10' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

Jika sudah lalu kLik Simpan TempLate.. Lihatlah pada Halaman Depan dan Halaman Sebelumnya (Atau kLik Postingan Artikel Lawas/sebelumnya pada Blog kamu ) dan Bandingkan.. Hasilnya widget tersebut hanya akan tampil pada halaman Depan saja bukan pada halaman sebelumnya/postingan lawas blog kamu.. ULANGI langkah ini untuk widget/elemen lainnya..

Note : Bisa kamu OPREK2 sesukamu.. mana yang menurutmu yang lebih baik bagi blog kamu.. okay sob..

...Selamat MengOprek...