Cara menghasilkan Kode Warna HTML dengan Ms Paint

Melanjut postingan sebelumnya yaitu cara menghasilkan kode warna HTML dengan photoshop. Kali ini saya akan membahas tentang mendapatkan kode warna HTML dengan Ms Paint. Mengingat tidak semua orang mempunyai program Photoshop. Karena untuk memilikinya, kita harus membeli program tersebut.

Beda dengan Ms Paint, program ini merupakan bawaan dari Windows. Jadi kita tidak perlu merogeh kocek untuk mendapatkannya.

Meskipun program ini bisa menghasilkan kode warna HTML. Namun caranya sedikit berbeda dengan photoshop. Berikut adalah cara-caranya:

1. Buka Ms Paint. Klik Colors -> Edit Colors lalu klik Define Custom Colors


2. Pilih warna yang Anda inginkan kemudian catat kode warna pada kolom yang saya beri kotak merah. Contohnya: rgb(15,19,49).


3. Setelah itu, cari kode warna yang mau diganti dalam template Anda misalnya #ff5a00. Ganti #ff5a00 dengan rgb(15,19,49).

4. Setelah itu klik Save Template. Selesai

5. Sekarang coba klik View Blog untuk melihat hasilnya.

Selamat mencoba..!!

Read More

Cara Menghasilkan Kode Warna HTML dengan Photoshop

Tahukah Anda bahwa warna-warna yang muncul pada halaman blog itu dihasilkan dari kode-kode warna HEXA dan RGB.

Ada banyak cara untuk mendapatkan kode warna HTML tersebut seperti menggunakan aplikasi warna yang sudah banyak tersedia di internet atau menggunakan program pengolah gambar yang biasanya digunakan untuk edit gambar. Pada postingan ini saya akan menjelaskan cara menghasilkan kode warna dengan salah satu program pengolah gambar paling populer yaitu Photoshop.

Bagi para blogger yang tidak memiliki program photoshop bisa menggunakan program Ms Paint dari Windows. Untuk mengetahui cara mendapatkan kode warna dengan Ms Paint. Silahkan baca postingan saya tentang cara menghasilkan kode warna HTML dengan MS Paint

Berikut adalah cara menghasilkan kode warna HTML dengan Photoshop:

Cara pertama:

1. Buka program Photoshop. klik pada Foreground color


2. Pilih warna yang Anda inginkan. Lalu copy kodenya dalam kotak yang diberi tanda


3. Gunakan kode tersebut untuk mengganti warna pada template. Bagi anda yang belum tahu cara mengganti warna pada template. Coba baca dulu postingan saya tentang tips mengganti warna background blockquote

Catatan:
Jika Anda ingin mengambil warna dari template. Silahkan menggunakan cara kedua

Cara kedua:

1. Screenshot atau ambil gambar template dengan cara tekan tombol Print Screen pada keyboard

2. Buka program Paint. Lalu tekan Ctrl+V untuk mempaste gambar

3. Klik File -> Save As. Simpan gambar dalam format .bmp

4. Kemudian buka program Photoshop. Lalu klik File -> Open. Cari gambar yang disimpan tadi lalu klik Open

5. Aktifkan Eyedropper Tool kemudian klik pada sampel warna yang mau diambil

6. Sampel warna yang Anda ambil akan muncul pada foreground color

7. Gunakan cara pertama diatas untuk menghasilkan kode warnanya

Selamat mencoba. Semoga bermanfaat...

Read More

Tips Mengganti Warna Background Blockquote

Untuk template tertentu, pada bagian blockquote akan diberi warna agar tampilan template terlihat lebih unik dan menarik namun jika anda tidak suka dengan warna yang diberikan. Anda bisa mengganti warna background blockquote dengan warna lain yang anda inginkan hanya sedikit modifikasi pada kode css template anda.


Nah bagi anda yang belum tahu apa itu Blockquote. Blockquote adalah tag HTML yang digunakan untuk menampilkan quote/kutipan pada artikel. Contoh tampilannya seperti ini:


Untuk mengganti warna kotak blockquote. Ikuti langkah-langkah berikut:


1. Pertama login ke Blogger. Klik Design -> Edit HTML


2. Cari kode berikut:

post-body blockquote {
padding:3px 15px;
background:#53de61;
margin:5px 0px;
color:#930;
border:solid 1px #32c45f
}

atau

    blockquote {
    padding:3px 15px;
    background:#53de61;
    margin:5px 0px;
    color:#930;
    border:solid 1px #32c45f
    }

Catatan:
Yang perlu anda perhatikan adalah kode berwarna merah sedangkan kode berwarna biru pada setiap template berbeda-beda.


3. Kalau sudah ketemu, ganti kode yang dicetak tebal biru pada property background dengan kode warna yang anda inginkan. Contohnya saya mengganti dengan #ffffff yang merupakan kode warna putih maka hasilnya menjadi seperti ini:



Selamat mencoba dan semoga bermanfaat.




Tambahan:Bagi anda yang tidak mengetahui kode warna. Silahkan baca disini


Untuk menghilangkan border atau garis tepi blockquote, ganti 1px pada property border menjadi 0px.




Happy Blogging...!

Read More

Cara Menghapus Gambar di Picasa Web Album

Picasa web album adalah salah satu layanan dari google yang memungkinkan kita untuk mengupload gambar kedalamnya. Selain itu Picasa web album juga merupakan ruang penyimpanan untuk blogger.

Jadi setiap kali kita mengupload gambar dengan blogger post, gambarnya akan otomatis tersimpan di picasa web album. Masalahnya adalah gambar yang telah kita upload ke blogger tidak akan terhapus meskipun gambarnya tidak kita gunakan lagi.

Hal tersebut akan mengakibatkan bertumpuknya gambar di picasa web album dan akhirnya kehabisan ruang penyimpanan.

Sebagai contoh, kita mengupload gambar dengan menekan add image pada post editor. Setelah diupload, ternyata gambarnya salah atau tidak cocok kemudian Anda menghapus gambar tersebut dan mengupload gambar lain. Gambar yang Anda hapus sebelumnya di kotak posting masih tetap tersimpan di picasa web album.

Meskipun kapasitas yang diberikan picasa web album cukup besar yaitu 1024 MB namun lama kelamaan gambar tersebut akan memenuhi ruang penyimpanan Anda juga.

Untuk mengatasi hal tersebut. Silahkan menggunakan cara berikut:

1. Buka http://picasaweb.google.com lalu login dengan google id Anda.

2. Sebelum memulai, coba cek terlebih dahulu berapa kapasitas yang telah Anda pakai. Tampilannya seperti ini.


3. Kalau sudah, klik pada album dimana gambarnya disimpan

Jika Anda ingin menghapus beberapa gambar sekaligus

1. Klik Edit lalu pilih Organise and reorder
2. Tahan CTRL lalu pilih gambar yang mau dihapus
3. Klik tombol Delete lalu klik OK untuk menghapusnya
4. Selesai. Klik Done untuk kembali ke menu

Jika Anda ingin menghapus gambar satu per satu

1. Klik pada gambar yang mau dihapus
2. Klik Edit lalu pilih Delete this photo
3. Klik OK untuk menghapusnya.
   
4. jika Anda ingin menghapus gambar lain. Gunakan tombol panah kiri dan kanan untuk mencarinya

Kalau sudah selesai. Cek kembali sisa kapasitasnya untuk melihat hasilnya

Semoga bermanfaat

Read More

Cara Membuat Search Box atau Kotak Pencari di Blog

Saya yakin para netter pasti sudah tidak asing lagi dengan yang namanya search box. Karena kita rata-rata mencari alamat website atau informasi dengan tool ini.


Secara singkat, search box adalah sebuah tool yang digunakan untuk mencari data-data atau alamat website dengan memasukkan kata kunci yang ingin kita cari.


Namun search box atau kotak pencari yang biasa kita gunakan hanya memungkinkan kita untuk mencari data di mesin pencari seperti Google, Yahoo, dan MSN. Lalu bagaimana kalau kita ingin mencari data hanya pada blog kita saja?


Mungkin sekarang sudah banyak template yang sudah disediakan kotak pencari atau search box. Tapi bagi template yang tidak dilengkapi dengan fasilitas ini. Anda juga bisa memasangnya sendiri dengan cara sebagai berikut:


1. Login ke Blogger. Klik menu Design -> Page Elements. Lalu klik pada Add a Gadget.

2. Klik Add a Gadget -> HTML/Java script

3. Masukkan kode dibawah ini kedalam kotak dan klik Save

<p align="left">
<form id="searchthis" action="ALAMAT URL BLOG/search" style="display:inline;" method="get">
<strong>NAMA KOTAK<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Ganti ALAMAT URL BLOG dengan alamat URL blog Anda. Misalnya, http://www.hermanblog.com dan ganti NAMA KOTAK dengan nama yang ingin Anda tampilkan pada kotak. Misalnya, Cari artikel disini, Cari disini, dan lain-lain.


4. Jika sudah selesai, klik Save lalu klik View Blog untuk melihat tampilannya di blog.


Jika Anda merasa kotaknya terlalu panjang atau pendek. Anda bisa mengubah ukurannya dengan mengganti nilai pada size. Anda juga bisa mengganti nama tombol Search dengan nama lain misalnya, Cari atau lanjut.


Sebagai contoh, saya mengganti "size=30" dan "value=cari" maka hasilnya akan seperti yang dibawah ini.



Selamat berkreasi..

Read More

Cara Memasang Related Posts atau Artikel Yang Berkaitan

Related post atau artikel yang berkaitan merupakan sebuah cara untuk menampilkan link-link artikel yang berkaitan dengan artikel utama dan biasanya terletak dibawah artikel utama.

Pemasangan related post ini biasanya dikelompokkan berdasarkan label atau kategori. Jadi jika ada salah satu artikel dari label tertentu ditampilkan maka artikel-artikel lain yang mempunyai label sama juga akan ikut muncul dibawah artikel tersebut.

Tujuan pemasangan related post ini agar pengunjung lebih mudah untuk mencari artikel yang berkaitan dengan artikel utama. Sehingga pengunjung tidak perlu report untuk mencari satu persatu artikel dalam menu label atau kategori.

Bagi yang masih bingung, silahkan lihat contohnya dibawah ini.


Gmn uda jelaskan? Nah bagi yang tertarik memasang related posts di blog anda, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Blogger. Pilih menu Design -> Edit HTML
2. Back-up terlebih dahulu template Anda dengan cara klik Download Full Template.
3. Setelah itu, beri tanda centang pada kotak "Expand Widgets Template".
4. Cari kode <data:post.body/>
5. Jika sudah ketemu, letakkan kode dibawah ini dibawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel yang berkaitan</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Catatan:
Jika blog anda menggunakan kode read more maka biasanya ada 2 kode <data:post.body/> Letakkan kode diatas pada kode yang pertama.

6. Kalau sudah, klik Save Template lalu klik View Blog untuk melihat hasilnya.

Anda bisa mengganti teks "Artikel yang berkaitan" pada kode diatas dengan teks lain sesuai dengan keinginan anda.


Selamat mencoba..

Read More

Menambahkan Favicon Pada Blogger

Favicon atau Favorite Icon adalah sebuah icon mungil yang muncul pada address bar. Tampilannya seperti ini.


Untuk memasang favicon. Terlebih dahulu Anda harus mempunyai sebuah gambar atau icon yang disimpan dalam format .GIF atau .PNG dengan ukuran 32x32 pixels.

Setelah Anda mempunyai icon. Upload iconnya ke image hosting. Banyak website yang menyediakan image hosting gratis. Seperti Shareapic, Photobucket, Imageshack dan lain-lain. Kalau saya sendiri mengupload iconnya di Photobucket.

Setelah iconnya diupload. Copy alamat URL dimana icon Anda disimpan. Login ke blog Anda. Klik Design -> Edit HTML. Cari kode yang dibawah ini:

<title><data:blog.pageTitle/></title>

Letakkan kode dibawah ini dibawah kode diatas

Jika iconnya disimpan dalam format .GIF, gunakan kode ini

<link href='alamat URL icon Anda' rel='shortcut icon' type='image/gif'/>

Jika iconnya disimpan dalam format .PNG, gunakan kode ini

<link href='alamat URL icon Anda' rel='shortcut icon' type='image/png'/>

Catatan:
Ingat ganti alamat URL icon Anda dengan alamat URL dimana icon Anda disimpan. Misalnya, http://i25.photobucket.com/albums/e80/user/favicon32x32.gif

Kalau sudah, klik Save Template. Jika berhasil akan muncul "Your changes have been saved". Klik View blog untuk melihat hasilnya.

Selamat Mencoba

Read More