Cara cek kode warna

Cek Kode Warna | Tool Kode Warna - Sekedar melengkapi postingan blog apa adanya ini saya publishkan beberapa Tool Kode Warna semoga bisa membantu sahabat semua untuk Cek Kode Warna. Silahkan digunakan beberapa tool yang saya sediakan dalam blog ini.


Tool Kode Warna 1:

 

Tool Kode Warna 2:

   

Tool Kode Warna 3:

  Thank you for visiting  

Jika Cek Kode Warna | Tool Kode Warna diatas kurang memuaskan, ingin mengetahui secara online dan mungkin bisa lebih baik silahkan kunjungi beberapa situs yang pernah saya gunakan sebelum menemukan tool diatas:

1. www.color-hex.com

2. www.colorhexa.com

3. www.weekendphp.com

4. Google (Silahkan Cari sendiri, hehehe)

More√

Jadilah Blogger Yang Beretika, dengan mencantumkan Link Sumber yaa.. ^^ Original Posted by : http://www.ictclubsmpn10.blogspot.com

Tutorial membuat Blog dari awal

Berikut ini adalah langkah-langkah dalam membuat blog dari tahap awal. Sebelum membuat blog,kita wajib sudah memiliki Email Gmail yang sudah aktif.

1. Pertama, yaitu buka alamat www.blogger.com
    Kemudian kita akan diarahkan ke alamat seperti gambar di bawah ini:

2. Silahkan untuk memasukkan alamat Email dan password yang kalian miliki di Gmail

3. Langkah berikutnya adalah klik tombol New Blog

 4. Setelah itu kita diwajibkan untuk mengisi Judul Blog, Alamat Blog, dan Tema yang akan kita gunakan seperti di bawah ini :

5. Setelah kita mengklik tombol Create Blog, maka tahap pembuatan alamat blog telah kita selesaikan. Selanjutkan jika kita ingin memulai untuk menulis atau dalam istilah para Blogger disebut memposting,maka ikuti langkah di bawah ini :

 Demikianlah langkah-langkah awal dalam pembuatan blog. Semoga bermanfaat

More√

Jadilah Blogger Yang Beretika, dengan mencantumkan Link Sumber yaa.. ^^ Original Posted by : http://www.ictclubsmpn10.blogspot.com

Gambar di Pojokan

Mencoba ngebahas gimana cara membuat gambar yang selalu berlari tanpa henti dan berada di pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-mana. "Scroll bar" itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan. Trus maksudnya "gambar" itu apa? "gambar " itu maksudnya bisa gambar atau photo kamu, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain.

1. Login ke blogger trus klik "Layout -->> Edit HTML
2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.

#trik_pojok {
 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); }

3. Text yang dicetak tebal  adalah posisinya, kalo ingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika ingin di posisi atas bisa diganti dengan "top".
4. Langkah selanjutnya yaitu letakkan script berikut ini sebelum kode </body>

<div id="trik_pojok">
<a href="http://www.ictclubsmpn10.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw60N0zfeb7lht7sHgwbyejZoZrHqGhtBRaPwhw5Ky3g3ADF4CajrSjGlFDzUAmf4_3RV6UFJ5EWljhYPF9P7MGqqrxshgsNSl9jeaIuYwXcPr9ts2O9lZ6M0maAn4pRGj7iybMf5YtSE/s800/NarudinSmall.gif" border="0" /></a>
</div>

"http://www.ictclubsmpn10.blogspot.com" adalah link. ganti dengan link kamu.
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw60N0zfeb7lht7sHgwbyejZoZrHqGhtBRaPwhw5Ky3g3ADF4CajrSjGlFDzUAmf4_3RV6UFJ5EWljhYPF9P7MGqqrxshgsNSl9jeaIuYwXcPr9ts2O9lZ6M0maAn4pRGj7iybMf5YtSE/s800/NarudinSmall.gif" adalah lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Simpan hasil kerja kamu dan lihat hasilnya.

Semoga Bermanfaat Dan Semoga Sukses :-D

More√

Jadilah Blogger Yang Beretika, dengan mencantumkan Link Sumber yaa.. ^^ Original Posted by : http://www.ictclubsmpn10.blogspot.com

Membuat Readmore Keren

Sahabat ICT Club sudah pernah tahu belum cara membuat readmore atau baca selanjutnya pada postingan blog?

Baiklah langsung saja Jika kalian tertarik ingin mencobanya, silahkan ikuti langkah berikut :
1. Login Ke Akun Blog
2. Pilih Template> edit HTML  kemudian cheklist Expand Template Widget
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode CSS Berikut tepat diatasnya.

/* Readmore Animasi akaUTta */
.UTreadmore a {
font-family:monospace, sans-serif !important;
color:#CFDBEC !important;text-shadow:1px -1px 1px #000;
font-size:14px;
text-decoration:none;
}
.UTreadmore a:hover {
font-size:19px;color:#fff;text-shadow:0px 0px 2px rgb(0,86,224);}
.circlewrapper {
width:98px;
height:98px;
float:right;
text-align:center;
}
.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgb(0,86,224);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px rgb(0,86,224);
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgb(0,86,224);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px rgb(0,86,224);
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}
.circle2 {
background-color: transparent;
border: 5px solid rgb(0,86,224);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px rgb(0,86,224);
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}
@-moz-keyframes spin1Pulse {
 0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(0,86,224);}
 50% { -moz-transform:rotate(145deg); opacity:1; }
 100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spin1Pulse {
 0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(0,86,224); }
 50% { -webkit-transform:rotate(145deg); opacity:1;}
 100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spin2Pulse {
 0% { -moz-transform:rotate(0deg); }
 100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spin2Pulse {
 0% { -webkit-transform:rotate(0deg); }
 100% { -webkit-transform:rotate(360deg); }
}

4. Selanjutnya cari kode </head> , Tekan Ctrl+F (mozzilla) untuk mempermudah pencarian. Kemudian letakkan kode berikut diatasnya.

<script type='text/javascript'>
var summary_noimg    = 300,
    summary_img      = 300,
    img_thumb_height = 80,
    img_thumb_width  = 90;
</script>
<script type='text/javascript'>
//<![CDATA[
/**
 * ========================================================================
 * Auto-readmore link script, version 2.0 (for blogspot) (C)2012 by akaUTta
 * visit http://ut2a-4down.blogspot.com to get more cool hacks
 * ========================================================================
 */
function removeHtmlTag(strx, chop) {
    if (strx.indexOf("<") != -1) {
        var s = strx.split("<");
        for (var i = 0; i < s.length; i++) {
            if (s[i].indexOf(">") != -1) {
                s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
            }
        }
        strx = s.join(" ");
    }
    chop = (chop < strx.length - 1) ? chop : strx.length - 2;
    while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
    strx = strx.substring(0, chop - 1);
    return strx + '...';
}

function createSummaryAndThumb(pID) {
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if (img.length >= 1) {
        imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
        summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>

5. Selanjutnya cari kode <data:post.body/> , jika sudah ketemu. silahkan ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div class='circlewrapper'>
<div class='circle'/>
<div class='circle1'/>
<div class='circle2'>
<span class='UTreadmore'><a expr:href='data:post.url'>More√</a></span>
</div></div>
</b:if>
</b:if>

6. Langkah Terakhir Simpan Template, dan lihat hasilnya. ;)

NB::>>>
- Teks yang saya beri warna biru, silahkan kalian rubah sesuka hati,

MAKA HASIL >>>>>

More√

More√

Jadilah Blogger Yang Beretika, dengan mencantumkan Link Sumber yaa.. ^^ Original Posted by : http://www.ictclubsmpn10.blogspot.com

Cara Membuat Burung Twitter Terbang di Blog

Bagi sobat yang tertarik untuk memasang burung twitter terbang atau melayang - layang ini, silahkan ikut tutorial berikut .

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> Pilih HTML/Javascript

Masukkan Script berikut ke dalam kotak yang telah di sediakan.

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://tateluproject.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzxFa_52lHLtg0rZA76Hw1LeM0Uzynpd8SOjMdCpTQNWRNtkC-H5Vez0NmwtF0FZUfN-kgvHDvnC49zxATg1wjxk8299uJmqiG9_KtygT9aWIbUgyfSuV0UzSudlitI5n73AbJ8plZxdI/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/deactivatednumi";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

3. Klik save / simpan.

Tambahan:
Ganti tulisan yang berwarna merah dengan warna icon twitter kesukaan sobat.

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwW_Hi6UAZfOttMJ__ePyc3rG0E5PC0yNCTPCYgf6JIatjootqD2QiMWYf1HA89MMeiGAXKv2IxAs5HozYgKPz-D4lreDcUu9nulPrSJAHRHraXCbphLSwQbaM1fSrqan6qgAOCiioFFs/s1600/yellow+bird.png

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgooMWKgocm3QZTU7MoXXCKIatg06m4SacUp2nusj53HJQFUg2G8HtGv1h3kBZdMUhXv5ECS3zbG1KVV5YZuvcrU_UyLwrR8l0LN7_zJ_Zf24mtuywSlmEYs10yzyQkHzj4BWAYLrlbTc8/s1600/black+bird.png

Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQtEv5dMg43JCGor3QMUAsOrkLC127OjZDtJrQGo46bUsaT4xS1W3U4TKNiD3WFCvlAswWVhMCP9WWpKPzuimuso0hjrAIzZAk1kj9VHTvnX-nABxcixvZ_i_yFSzn7rSMznHiPkLkMoA/s1600/Blue+bird.png

Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbzAxei1e0Iu2iGs82_x5lQN9n09BwMIOzKlHAvLFTrg9Q0gnEBKG3ZxYYpY2ZB8orzrfioxATGr-YdH_visx6PEuguK-J0Ph7svzJjthMeQBZuasacZbmNuyBCp-mObQSPXWdwjMGsxE/s1600/brown+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipIMQ6pbbsXDQ1ILcitOUnbr246gFA1d99YWMGS55xMpmmprroUJZ-t01XGuc9jXEkqLar8tc913xBuwN39HsN8TzBg7ceYGdHKq0b36zRoKznTSqY_QmbNhyC-5ZeXHCm3Vp9YsaRHKQ/s1600/Green+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghtUoEQU9D6W1Aa-JtAqgYyggra0V1zzSpYRPhv9pGC044yxS-rpI1ifqQBdSxYygZzAzCPNh5x9_nSFs_eOFwB8L0tENoj3PGayknpQ-rtUYipq4CWv50xoa6jDlT7GCYXtJU8GS9bgo/s1600/purple+bird.png

Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh288N-gt6_6UrPHFnVl1EiEsP8nFgu2RVmnfKsa5gQcm1mKNyJm4ci4EPtP3yKtZgZstwWdjm2uHTY8g7rhJL1v3OKbOQfSeKLMZLg9M6HxS9XS05OXsJMjFwIZf_iqHws9kAea19ip1M/s1600/white+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLUq_6IrQcXOEvMEeup6R9tn7qpsIgfN7rQ-kKUxXYR1ql58qIJpI8u-u5xXDX8pd-TRGZURcXWxpGHoBnEc_NcOHJsAqBlmsOUgbXJhan3x-dvuT8bPyrVfWe3oiycuqIiMVv1P6FaiA/s1600/red+bird.png

Ganti Tulisan yang berwarna biru dengan username twitter sobat.

More√

Jadilah Blogger Yang Beretika, dengan mencantumkan Link Sumber yaa.. ^^ Original Posted by : http://www.ictclubsmpn10.blogspot.com

Memasang Playlist Lagu di Blog

Jika ingin membuat playlist music online anda bisa memanfaatkan PodSnack. Penggunaanya yang sederhana dan membuatnyapun cukup dengan tiga langkah ; memilih jenis pemain atau artis, tambahkan lagu dan menyesuaikan dengan selera. Setelah membuat playlist flash mp3, playlist dapat dibagi (share) kepada teman sebagai promosi album, di pasang pada akun PodSnack atau di download sebagai SWF untuk website HTML Bisa juga PodSnake dikatakan sebagai tuan rumah file audio, dan memungkinkan Anda untuk menambahkan file musik ke situs Anda sendiri atau halaman jejaring sosial seperti Wordpress, blogger, Tumblr, Facebook, MySpace dan lain lain. Untuk tutorialnya ikuti petunjuk yang saya sampaikan ini.

Tampilan awal PodSnack

Daftar untuk membuat akun, dan untuk mempercepat pilih sign in with pilih gambar facebook, Google, twitter atau yahoo (ini hanya memudahkan saja akun terhubung tanpa harus mengetik panjang lebar untuk register) . Klik disini untuk register

Setelah terdaftar buat playlist music sesuai selera Anda.

Cari lagu favorit dengan youtube, Anda bisa mengunggah atau merekam

Seret atau edit untuk menentukan urutan lagu dan sesuaikan posisi playlist yg akan diputar

Pilih playlist sesuai selera, lihat hasilnya di preview

Copy dan paste embed pada blog Anda dan lihat hasilnya 

More√

Jadilah Blogger Yang Beretika, dengan mencantumkan Link Sumber yaa.. ^^ Original Posted by : http://www.ictclubsmpn10.blogspot.com

Animated Flash Twitter

Tips-tricks blogger kali ini mau share Widget-widget Follow Me on Twitter Blogspot, yang ternyata tidak cuma dalam bentuk gambar diam aja loh. Curi perhatian pengunjung blogmu dengan "Flash Animated Follow Me Twitter Bird' yang bisa gerak-gerak mengundang perhatian pengunjung.

Ada tiga jenis widget animated twitter bird yang bisa dipake, pilih salah satu, salah tiga juga boleh lah. Nih contohnya:

Scriptnya:

<object data="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" height="80" type="application/x-shockwave-flash" width="180"><param name="movie"
value="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" />
<param name="allowscriptaccess" value="always"/><param name="menu" value="false"/><param name="wmode" value="transparent"/>
<param name="flashvars" value="username=azmisurvivor"/><a href="http://www.gamblinginsider.ca" title="gambling">gambling</a><embed src="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="80" menu="false" wmode="transparent" flashvars="username=azmisurvivor"></embed></object>

Scriptnya:

<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf" width="100" height="100"><param name="movie" value="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=azmisurvivor"></param><a href="http://www.gamblinginsider.ca" title="online gambling insider.ca">online gambling insider.ca</a><embed src="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="100" height="100" menu="false" wmode="transparent" flashvars="username= azmisurvivor"></embed></object>

Scriptnya:

<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" width="200" height="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=azmisurvivor"></param><a href="http://www.dreambingo.co.uk/" title="http://www.dreambingo.co.uk/">http://www.dreambingo.co.uk/</a><embed src="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=azmisurvivor"></embed></object>

Cara memasang Widget Flash Animated Follow Me Twitter Bird:

1. Masuk ke dashboard > Design/Rancangan > Add/tambah gadget > Pilih HTML/Javascript.

2. Copy salah satu script di atas. Ganti azmisurvivor dengan nama account twitter-mu.

3. Paste ke dalam kotak HTML/Javascript dan save. Posisikan (drag and drop) gadget ke posisi yang diinginkan lalu save lagi.

4. Done!

More√

Jadilah Blogger Yang Beretika, dengan mencantumkan Link Sumber yaa.. ^^ Original Posted by : http://www.ictclubsmpn10.blogspot.com