Kode-Kode Warna HTML Untuk Blogger

Hayy teman2 ada yg baru nih..

Dafrtar Kode Warna HTML Untuk Blogger

Kali ini saya sengaja memuat Daftar Kode Warna HTML / HTML Warna Untuk Blogger. Namun postingan ini saya beri judul Kode-Kode Warna HTML Untuk Blogger namun kode html warna yang saya muat di sini tidak hanya bisa di gunakan untuk blogger saja.

Kode HTML Warna ini nantinya bisa di gunakan sesuai keperluan kita masing-masing, misalnya untuk merubah warna latar belakang blog blogger kita, warna header, footer, warna font, dsb.

Berikut Daftar Kode Warna yang bisa anda gunakan: 

#FFFFFF	#FFFFCC	#FFFF99	#FFFF66	#FFFF33	#FFFF00
#FFCCFF	#FFCCCC	#FFCC99	#FFCC66	#FFCC33	#FFCC00
#FF99FF	#FF99CC	#FF9999	#FF9966	#FF9933	#FF9900
#FF66FF	#FF66CC	#FF6699	#FF6666	#FF6633	#FF6600
#FF33FF	#FF33CC	#FF3399	#FF3366	#FF3333	#FF3300
#FF00FF	#FF00CC	#FF0099	#FF0066	#FF0033	#FF0000
#CCFFFF	#CCFFCC	#CCFF99	#CCFF66	#CCFF33	#CCFF00
#CCCCFF	#CCCCCC	#CCCC99	#CCCC66	#CCCC33	#CCCC00
#CC99FF	#CC99CC	#CC9999	#CC9966	#CC9933	#CC9900
#CC66FF	#CC66CC	#CC6699	#CC6666	#CC6633	#CC6600
#CC33FF	#CC33CC	#CC3399	#CC3366	#CC3333	#CC3300
#CC00FF	#CC00CC	#CC0099	#CC0066	#CC0033	#CC0000
#99FFFF	#99FFCC	#99FF99	#99FF66	#99FF33	#99FF00
#99CCFF	#99CCCC	#99CC99	#99CC66	#99CC33	#99CC00
#9999FF	#9999CC	#999999	#999966	#999933	#999900
#9966FF	#9966CC	#996699	#996666	#996633	#996600
#9933FF	#9933CC	#993399	#993366	#993333	#993300
#9900FF	#9900CC	#990099	#990066	#990033	#990000
#66FFFF	#66FFCC	#66FF99	#66FF66	#66FF33	#66FF00
#66CCFF	#66CCCC	#66CC99	#66CC66	#66CC33	#66CC00
#6699FF	#6699CC	#669999	#669966	#669933	#669900
#6666FF	#6666CC	#666699	#666666	#666633	#666600
#6633FF	#6633CC	#663399	#663366	#663333	#663300
#6600FF	#6600CC	#660099	#660066	#660033	#660000
#33FFFF	#33FFCC	#33FF99	#33FF66	#33FF33	#33FF00
#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00
#3399FF	#3399CC	#339999	#339966	#339933	#339900
#3366FF	#3366CC	#336699	#336666	#336633	#336600
#3333FF	#3333CC	#333399	#333366	#333333	#333300
#3300FF	#3300CC	#330099	#330066	#330033	#330000
#00FFFF	#00FFCC	#00FF99	#00FF66	#00FF33	#00FF00
#00CCFF	#00CCCC	#00CC99	#00CC66	#00CC33	#00CC00
#0099FF	#0099CC	#009999	#009966	#009933	#009900
#0066FF	#0066CC	#006699	#006666	#006633	#006600
#0033FF	#0033CC	#003399	#003366	#003333	#003300
#0000FF	#0000CC	#000099	#000066	#000033	#000000
#465584	#EEF2F7	#3A4F6C	#00D	#434951	#555
#777	#DFE6EF	#345487	#F5F9FD	#3860BB	#BCD0ED
#C2CFDF	#F0F5FA	#D1DCEB	#003	#900	#CCE9FD
#E4EAF2	#4C77B6	#DFE6EF	#EEF2F7	#F

Nah itulah beberapa kode html warna yang bisa di gunakan blog.

Selain menggunakan kode di atas, kita juga bisa mencari kode warna html menggunakan software html editor (ini cara yang selalu saya gunakan) atau software HTML Color Picker (Link Download nya menyusul).

Read More ->>

Cara Membuat/memasang Headline News Berjalan Di Blog

Cara Membuat/memasang Headline News Berjalan Di Blog

Sesuai dengan judul di atas penulis akan mesharing tentang bagaimana cara membuat headline  news berjalan  di blog. Cara kerjanya seperti script Marquee pada html, namun kelebihannya headline news dapat menampilkan RSS feed sehingga anda yang ingin menampilkan judul-judul postingan terbaru blog manapun termasuk blog sendiri dapat menjadi kenyataaan.
Masih belum jelas?  widget ini hampir sama dengan headline news pada siaran metro tv dan detik dot kom dll. lihat contoh gambar dibawah.

Baik nagi anda yang tertarik ingin memasang, silahhkan   ikuti instruksi dibawah ;

• Silahkan ke menu rancangan pada blogger 

• Kemudian di elemen laman pilih tambah gadget. 

• Muncul tab baru pilih saja HTML/Javascript 

• Copas script dibawah kedalamnya dan Save

<script type="text/javascript">
var hn_url_blog = "http://blog-anda.blogspot.com";
var hn_jumlah_post = 5;
var hn_warna_latar = "#531515";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;      
</script>
<script src="http://blogger-nias.googlecode.com/files/headlinenews.js">
</script>

Keterangan warna :

• hn_url_blog adalah URL blog yang ingin ditampilkan
• hn_jumlah_post adalah jumlah judul artikel yang akan tampil pada headline news.
• hn_warna_latar adalah kode warna untuk latar belakang headline news.
• hn_warna_garis adalah kode warna untuk garis bingkai headline news.
• hn_posisi menentukan posisi headline news anda apakah di atas ("top") atau di bawah ("bottom"),
• hn_tampilkan_judul bernilai True kalau sobat ingin menampilkan tulisan "Komunitas Blogger " di bagian kiri dan bernilai False jika tidak ingin menampilkannya,

Selamat mencoba, sampai bertemu diartikel selanjutnya..

Read More ->>

Membuat Efek Tulisan Mengikuti Cursor Mouse

Oleh Rehaby Setiawan

Rehaby Setiawan - Sobat farhan pastinya sudah tahukan apa yang dimaksud dengan Membuat efek tulisan mengikuti cursor mouse seperti gambar di atas ini, ya, memang efek seperti ini banyak sekali dipakai oleh blogger-blogger pada umumnya, guna mempercantik dan menghias tampilan blog semenarik mungkin, tapi sobat farhan widget ini mempunyai satu kekurangan yaitu loadingnya yang agak lama, dikarnakan menggunakan pihak ke-3 sebagai penjalan efek ini, tapi tenang sobat farhan, jika sobat ingin memasang widget ini, sobat bisa kurangi pemakaian widget-widget yang tidak terlalu berfungsi di bagian sidebar dan header seperti jam, tv online, music, radio, dll, karena widget-widget seperti itu, mereka butuhk koneksi terlebih dahulu kepada website yang memberikan mereka jaringan dan perintah. Baik, sobat farhan dibawah ini sudah farhan persiapkan kode script dan langkah-langkah membuat efek tulisan mengikuti cursor mouse, di simak baik-baik ya.

1. Login Ke Blogger.

2. Pilih Tata Letak.

3. Pilih Add Gadget

4. Pilih HTML/JavaScript.

5. Sobat letakkan kode di bawah ini ke dalam box "Konten".

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #FF0000;

/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Tulisan Yang ingin sobat tampilkan";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>

Catatan : Ganti tulisan yang berwarna merah dengan tulisan yang ingin sobat tampilkan.

6. Klik "Save" dan Selesai.

Demikian sobat artikel tentang membuat efek tulisan mengikuti cursor mouse, ternyata cukup mudah bukan sobat farhan langkah-langkah membuatnya, selamat mencoba, bila ada pertanyaan comment di bawah.

Share this artic

Read More ->>