LIKE ME !
Info

SELAMAT DATANG

SELAMAT DATANG DI BLOG MY LIFE MY BLOG, MY LIFE MY BLOG adalah blog yang menceritakan semua yang saya suka,tentang kehidupan saya, keinginan saya, dan hal-hal yang saya sukai. selamat bergabung di blog saya, semoga bisa jadi motivasi dan inspirasi bagi anda yang membaca nya

Sekilas Tentang Admin

Nama Saya Rana lahir di keluarga sederhana, tidak kaya juga tidak miskin. Saya di lahirkan di Karawang, dan di besarkan di desa terpencil yaitu jayakerta, sekolah di SDN IV JAYAKERTA, di lanjutkan ke SMPN 1 JAYAKERTA, di smp saya mendapat banyak masukan, motivasi, dan inspirasi,di smp saya belajar banyak dari PRAMUKA, ilmu yang gak di dapat dari Mata pelajaran biasa di sekolah, setelah keluar dari smp saya lanjut ke SMKN 1 KARAWANG saya masuk ke smk karena termotivasi oleh technology maka saya ambil jurusan TKJ Teknik Komputer dan Jaringan, dunia IT adalah Impian saya, saya juga cita-cita Menjadi Orang Sukses yang Bermanfaat bagi semua, orang sukses yang bisa membahagiakan Orang-orang disekitanya, orang sukses yang mencerahkan dan dicerahkan

  • Home
  • Chatbox
  • Download Template
WELCOME TO SPACE BLOG

Selasa, 20 Desember 2011

Cara Membuat Link Bergeser

K ali ini saya kan share tentang bagaimana Membuat Link Bergeser Jika disentuh. yang pastinya berbau ala jquery.

Untuk demo nya sobat bisa lihat di judul posting blog ini.
ok berikut caranya :

1. Masuk ke Design >> Edit HTML >> Letakkan kode dibawah ini diatas</head>
gunakan ctrl+F untuk mempermudah pencarian



KODE:



ohh iya kalo sobat udah punya link kayak diatas gak usah ditambahkan lagi.


2. Taruh kode ini dibawahnya kode yang tadi

KODE:


NB : Untuk yang berwarna merah bisa diganti dengan kode lain sesuai dengan yang sobat inginkan, contoh jika diganti #Label1 maka link pada daftar label blog sobat yang akan bergeser.
3. Simpan Template
dan lihat hasil nya
Ok Semoga Bermanfaat... ^_^

Minggu, 20 November 2011

Ciri - Ciri Blog Yang Disukai Google



Taukah anda mengapa saya beri nama judul Ciri Ciri Blog Yang Di Sukai Oleh Google,Karna semakin pesat perkembangan teknologi,semakin banyak pula blogger-blogger yang bermunculan,maka dari itu kita sebagai blogger harus lebih memahami Blog yang di sukai oleh google.

Tujuan utama seorang blogger membuat blog,sebenarnya dan seharusnya tentu agar disukai dan diminati para pengunjung. Akan tetapi seiring dengan kemajuan dunia pemblogger-an di Indonesia semakin banyak orang-orang dari yang master maupun hingga kaum awam memulai karirnya menjadi seorang blogger. Dan efeknya semakin banyaknya blog-blog yang bermunculan. Blog-blog tersebut hampir 80 % kualitas nya tidak kalah satu sama lainnya. Sedangkan 20 % nya lagi adalah blog-blog dummy yang tugasnya sebagai blog pendukung blog utama seorang blogger. Tidak heran, om nya para blogger/webmaster jadi pusing. Ya,om google , sadar atau tidak mulai kehilangan kualitasnya sebagai pusat pencarian terlengkap. Contohnya ketika kita mencari kata kunci “jurus SEO” ,bukannya mendapat sebuah website yang memberikan sebuah informasi yang kita butuhkan tetapi malah memunculkan blog-blog para peserta kontes SEO Indonesia yang akhir-akhir ini marak diselenggarakan.


Oleh karena itu, saya pikir perlu juga kalo kita seharusnya mengetahui ciri-ciri blog yang disukai oleh google, agar tujuan utama kita sebagai blogger dan google sebagai mesin pencari untuk memberikan sebuah informasi yang benar-benar berguna untuk pengunjung atau visitor yang ribuan.

Berikut point-point yang harus diperhatikan agar blog-blog sobat bisa lebih akrab ama si Mbah google.

1. Blog dengan susunan dan link teks yang jelas. Setiap halaman haruslah dapat dicapai paling sedikit dengan
satu link teks yang statis.

2. Blog yang menawarkan site map kepada pengunjung dengan link yang langsung menuju kebagian penting
dari blog sobat. Apabila dalam sitemap terdapat lebih dari 100 link, sebaiknya sobat pisahkan site map ke
halaman yang berbeda.

3. Blog yang berisi informasi yang berguna, padat dan jelas serta secara akurat bisa menggambarkan konten
website.

4. Carilah kata kunci yang memang banyak dicari orang lain.

5. Harus menggunakan teks, bukan gambar,jika ingin menampilkan nama,menjelaskan konten atau link.
Google tidak akan mengenali teks yang ada dalam gambar.

6. Pastikan judul tag dan atribut yang sobat gunakan benar-benar akurat dan menggambarkan isi blog.

7. Rajin memerikasa apakah ada link yang mati atau kode HTML yang salah.

8. Apabila sobat menggunakan halaman dinamis (seperti URL yang mengandung tanda”?”),berhati-hatilah
karena tidak setiap search engine dapat mengindeks halaman dinamis. Usahakan untuk membuat
parameter sesingkat mungkin dan sedikit saja.

9.Pastikan jumlah link di blog/ atau website sobat dalam jumlah yang rasional.


Itulah ke 9 Ciri-Ciri Blog yang di sukai oleh Google,semoga sobat bisa menerap kan nya di blog sobat.
Semoga bermanfaat.

Senin, 07 November 2011

WHO I AM ?






About The Author
Nama saya Edo Cosma, Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...

Cara Membuat Menu Warna Warni

Nah Saya Akan Memberitahu Agan Agan Cara Membuat MENU WARNA WARNI

Lang Sung Dicoba Aja OK !





  • Login Ke akun Blogger sobat








  • Pada Dasbor pilih RANCANGAN + EDIT HTML dan jagan lupa untuk mencentang kolom expand template    widget








  • Masuka KOde Berikut  Dibawah kode <div id='outer-wrapper'>







  • <style type='text/css'>#menubar {position: fixed;top:0px;z-index: 1000;background:-moz-linear-gradient(top,#1F2326,#000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;width:988px;margin: 0;padding: 0;height:30px;}#menu {width:988px;height:30px;position:relative}#menu ul {padding:0;margin:0;list-style:none;position:absolute;left:0;top:0;width:988px;height:30px;z-index:10}#menu ul li {float:left;padding-bottom:4px}#menu ul li#li1 {padding:0}#menu li a {display:block;text-transform:capitalize;height:20px;float:left;color:#fff;text-decoration:none;line-height:20px;padding:0 10px;font-family:kristen itc;font-size:13px;border-right:1px solid #FF0000;margin:3px 0 0;}#menu li a:hover {color:#ff0000;white-space:nowrap;}#menu li a.current {color:#ffffff;}#menu li a:hover.current {color:#ffffff;}#menu li a:hover b {display:block;width:988px;height:30px;position:absolute;left:0; top:0;z-index:-1;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;}#menu li#li1 a:hover b {background: #D11717 -moz-linear-gradient(top,#000,#D11717);background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#D11717));}#menu li#li2 a:hover b {background-image: -moz-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);background: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);background: -webkit-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 50px, rgb(255,0,0) 100px);}#menu li#li3 a:hover b {background: -moz-linear-gradient(top,#AF0000,#6B0000);background: -webkit-gradient(linear, left top, left bottom, from(#AF0000), to(#6B0000));}#menu li#li4 a:hover b {background: #D11717 -moz-linear-gradient(top,#D11717,#000);background: -webkit-gradient(linear, left top, left bottom, from(#D11717), to(#000));}#menu li#li5 a:hover b {background:-moz-linear-gradient(top,#001C5A,#000);background: -webkit-gradient(linear, left top, left bottom, from(#001C5A), to(#000));}#menu li#li6 a:hover b {background: #244007 -moz-linear-gradient(top,#244007,#000);background: -webkit-gradient(linear, left top, left bottom, from(#244007), to(#000));}#menu li#li7 a:hover b {background: #51A104 -moz-linear-gradient(top,#51A104,#000);background: -webkit-gradient(linear, left top, left bottom, from(#51A104), to(#000));}#menu li#li9 a:hover b {background:-moz-linear-gradient(top,#029BC5,#000);background: -webkit-gradient(linear, left top, left bottom, from(#029BC5), to(#000));}#menu li#li8 a:hover b {background: #40071F -moz-linear-gradient(top,#40071F,#000);background: -webkit-gradient(linear, left top, left bottom, from(#40071F), to(#000));}</style>

    <div id='menubar'>
    <div id='menu'>
    <ul>
    <li id='li1'><a href='#'><b/>Home</a></li>
    <li id='li2'><a href='#'><b/>About Me</a></li>
    <li id='li3'><a href='#' ><b/>Daftar Isi</a></li>
    <li id='li4'><a href='#'><b/>Masuk</a></li>
    <li id='li8'><a href='#'><b/>Daftar</a></li>
    <li id='li5'><a href='#'><b/>My Facebook</a></li>
    <li id='li9'><a href='#'><b/>My Twitter</a></li>
    <li id='li7'><a href='#'><b/>Kode Warna</a></li>
    </ul>
    </div>
    </div>


    Kamis, 03 Maret 2011

    Cara Memuat Spoiler Untuk Blog

    Buat sobat blogger yang suka dengan artikel saya, silahkan anda share di mana saja anda suka (blog, facebook, twitter dll). Namun, bila berkenan mohon cantumkan link sumber dari artikel yang sobat blogger share (copy/paste). Mari bangun Indonesia lebih baik lagi, dengan berbagi informasi yang bermanfaat. Terima kasih,, ----------------------------------------------------------------------------------------------------------------

    Nah Nih Cara Membuat Spoiler Contohnya Nih :
    Tulis aja sekenanya
    isi tulisan spoiler...


    Mau Tau Cara Buat Nya Nih Codenya
    <div><div style="margin: 5px;">
    <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">
    Tulis aja sekenanya </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
    </div>
    <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
    <div style="display: none;">
    isi tulisan spoiler...

    </div></div></div></div>
     

    Sabtu, 26 Februari 2011

    Headline News KATA SENDIRI

    Buat sobat blogger yang suka dengan artikel saya, silahkan anda share di mana saja anda suka (blog, facebook, twitter dll). Namun, bila berkenan mohon cantumkan link sumber dari artikel yang sobat blogger share (copy/paste). Mari bangun Indonesia lebih baik lagi, dengan berbagi informasi yang bermanfaat. Terima kasih,, ------------------------------------------------------------------------------------------------------

     Assalamu Alaikum Wr.Wb. Sahabat bloger senangnya bisa posting lagi dan berjumpa dengan sobat-sobat meskipun itu hanya lewat dunia maya..tapi ngak apa2 sich yang penting bisa happy...sekian lama aku menjelajahi dunia maya untuk mengetahui cara membuat HeadLine Newsdi blog...ada sich referensi saya dapatkan tapi setelah di coba ngak ada perubahan sama sekali.. kata teman saya sich mungkin ada kesalahan pada scripnya... tapi untuk postingan kali ini dijamin dech sudah ngak ada kesalahan pada scripnya soalnya sudah saya coba..dan Alhamdulillah ternyata berhasil....

    Dari pada Anda bosan membaca celotehan aku...mendingan langsung aja ke TKP...
      

    1. Login ke Akun Blogger sobat.
    2. Masuk ke Tata Letak/ Rancangan lalu pilih tab Edit HTML.
    3. Klik Download Full Template, untuk mem-backup template sobat, jika terjadi kesalahan.
    4. Beri tanda centang pada Expand Template Widget.
    5. Copy kode di bawah ini persis di atas kode ]]></b:skin> 


    #anima_sudut {
    position:fixed;_position:relative;bottom:15px; right:0px;
    clip:inherit;
    _bottom:expression(document.documentElement.scrollbottom+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
    #anima_sudut a:link {
    color:#000000;}
    #anima_sudut a:visited {
    color: #FFFFFF;
    text-decoration:none;}
    #anima_sudut a:hover {
    color: #000000;}



    Catatan : 
    • Untuk menentukan posisinya, sobat bisa merubah bottom:15px; right:0px; dengan catatan top = atas, bottom = bawah, right = kanan, dan left = kiri.
    • Untuk kode yang berwarna kuning untuk mendeskripsikan Link yang berwarna.
    • Untuk kode yang berwarna merah untuk mendeskripsikan warna Link ketika di sorot.


          6. Kemudian Copy Paste kode di bawah ini persis di atas kode </body>






      <div id='anima_sudut'>
      &lt;font COLOR=&quot;#000000&quot;&gt;
      &lt;B&gt;&lt;MARQUEE onmouseover=&quot;this.stop()&quot; onmouseout=&quot;this.start()&quot; direction=&quot;left&quot; BGCOLOR=&quot;#80ff00&quot; width= 100%px scrollamount=&quot;3&quot;&gt;
      Tempat Menulis HeadLine News Anda
      &lt;/MARQUEE&gt;&lt;/b&gt;&lt;/font&gt;
      </div>



      • Untuk kode yang berwarna kuning, untuk mendeskripsikan warna latar belakang dari Head Line tersebut.
      • Ganti tulisan yang berwarna merah sesuai kata-kata headline news anda. 

      Cara Memasang Widget Page Rank dengan mudah dan cepat

       Ass, Sahabat bloger, kali ini saya ingin berbagi tentang Gimana sich cara memasang widget Page Rank di blog..... mungkin sich masalah ini sudah banyak yang tahu..... tapi kebanyakan kita harus login terlebih dahulu untuk melakukan proses registrasi.... kan butuh waktu yang lama..... nach ngapain harus pusing..... mendingan kawan-kawan sekalian ikuti langkah-langkah berikut di jamin bakalan puas dengan hasilnya dan pastinya gak makan waktu banyak.......

      1. Silahkan buka blog Anda
      2. Buka Rancangan --> tambah widget --> HTML/java script
      3. Copy Paste Script di bawah ini ........  


       <a href="http://www.mypagerank.net"><img src="http://www.mypagerank.net/services/seostats/seostats.php?s=de510918aee1709d0894f39a43211c4c53490533b664fa0e6b5d329ccd&amp;bg=FFFFFF&amp;textcolor=000000&amp;bordercolor=999999&amp;indicatorcolor=5EAA5E&amp;ugo=1&amp;uho=1&amp;umo=1&amp;amo=1&amp;upr=1&amp;tuv=1&amp;tpv=1&amp;yuv=1&amp;ypv=1&amp;ttuv=1&amp;ttpv=1&amp;uonline=1&amp;f=437905" alt="SEO Stats powered by MyPagerank.Net" border="0" /></a>

      Catatan :
      1. Merubah Background silahkan ganti pada "bg=FFFFFF"dengan kode warna sesuai keinginan
      2. Untuk textcolor,bordercolor, indicatorcolor, dapat juga diubah sesuai keinginan.

      Cara Pasang Related Post With thumbnails

      Cara Pasang Related Post With thumbnails
      Sudah Mencarinya ??
      Disini Ada

      Contohnya Bisa Andalihat Gambar Disamping !



      1.Kunjugi LinkWthin.Com Atau Klik Disini
      2.ANDA TIDAK PERLU MENDAFTAR LAGI

      PERHATIKAN GAMBAR DIATAS !!!



      3.KETERANGAN :
      -PADA NO 1 ISI DENGAN EMAIL ANDA
      -PADA NO 2 ISI DENGAN ALAMA BLOG ANDA
      -PADA NO 4 ISI BERAPA TUNIMBAIL YANG ADANDA INGINKAN ,KALO SAYA 4 STORIES-PADA NO 5 CENTANG/CONTRENG
      -PADA NO 5 KLIK KALO SUDAH TER ISI SEMUA

      KALO BELUM MNGERTI BISA ANDA LIHAT DISINI CONTOH SAYA




      4.SELANJUT NYA ANDA AKAN TERBAWA GAMBAR DIBAWAH INI !

      5.SELANJUTNYA KLIK "INSTAL WIDGET" (PERHATIKAN GAMBAR PADA DIATAS)

      6.KEMUDIAN ANDA TERBAWA PADA WEB GAMBAR INI

      SELEC BLOG > PILIH BLOG ANDA

      TITLE>SETERAH ANDA ISI SEPERTI MANA CONTOH : RELATED POST , RELATED POSTING

      ADD WIDGET > KLIK





      7.NANTI AKAN TERINSTAL SENDIRI

      NAH KAN WIDGET TADI TERTARUH DI SIDEBAR KIRI/KANAN PINDAHKAN KE BAWAH DEKAT POSTING BLOG

      BISA ANDA LIHAT GAMBAR NY DISINI

      8.KEMUDIAN SAVE



      SEMOGA SUKSES !!!!!!!!!!!!!


      DILARANG COPAS TANPA SEIJIN AUTHOR/PEMBUAT POSTING INI !!!!! KARENA POSTING INI BANYAK !!

      Pasang Navigasi Breadcrumb di Blogger Diatas Posting

      Sudah lama saya tidak membahas tentang blogger disini, karena sudah terlalu banyak yang membahas tentang blogger, dan akhirnya banyak yang copy paste artikel dari orang lain tanpa mencantumkan sumber pertama kali. Teman-teman sudah tahu kan apa itu Navigasi Breadcrumb? Navigasi Breadcrumb adalah kumpulan dari link, yang ada di atas judul posting sehingga teman-teman bisa melihat asal, kategori atau tag postingan berasal.


      Preview

      Langsung saja, untuk memasangnya buka Rancangan >> Edit HTML, CentangExpand Template Widget, langkah ini pasti teman-teman blogger sudah pada mengetahuinya. Selanjutnya cari :

      <b:if cond='data:post.title'>

      Lalu, tambahkan kode ini dibawanhya :

      <b:if cond='data:blog.pageType == "item"'>
      <a href='http://www.space-blogg.blogspot.com/'>Home</a> &#187;
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
      <b:if cond='data:label.isLast != "true"'>,</b:if>
      </b:loop>
      &#187;
      </b:if>
      <data:post.title/>
      </b:if>



      Ganti 'http://www.space-blogg.blogspot.com/  dengan nama blog teman-teman, selanjutnya simpan template, dan selesai. sekarang Navigasi Breadcrumb sudah terpasang di blog teman-teman.

      Selamat Mencoba...!!

      Sabtu, 19 Februari 2011

      Efek For Blog

      Membuat efek buat blog. Suatu cara untuk mempercantik blog adalah dengan menambah efek tertentu di dalam blognya entah itu efek salju berjatuhan, efek bintang, efek hati berterbangan dll. Nah disini kang salman akan shere sedikit tips untuk Anda.
      Namun sebelumnya kang salman beri tau tidak semua orang menyukai efek-efek seperti ini, karena apda umumnya mengganggu, apalagi saat sedang membaca, tetapi jika penempatannya tepat seperti bercerita tentang puisi, cinta dan sebagainya, menambah efek tambahan di dalam blog menjadi penunjang penting.

      Oke langsung aja yuk kita bahas apa saja sih efek-efek yang ada....

      Efek salju berjatuhan di blog

      <script src='http://www.geocities.com/ridwanox/saljubesar.js' type='text/javascript'></script>

      Script bintang bertaburan

      <script src='http://www.geocities.com/ridwanox/bintangjatuh.js' type='text/javascript'></script>

      Membuat efek kembang api di Blog

      <script src='http://www.geocities.com/ridwanox/kembangapi.js' type='text/javascript'></script>

      Membuat efek hati bertaburan di kursor blog

      <script src='http://www.geocities.com/ridwanox/efekhati.js' type='text/javascript'></script>

      Untuk cara pemasangannya adalah sebagai berikut:

      1. Silahkah masuk blog anda
      2. Pilih Rancangan
      3. Kemudian Edit HTML
      Tips: Download lengkap template.(ini penting buat backup template blog anda,jika terjadi kesalahan)
      4. centang expand widget template
      5. kemudian cari kode </body>

      Bila sudah ketemu pastekan kode di atas, tepat di atas kode </body> 

      Kode Tulisan kedip atau Berganti Warna Saat Di Sorot Mouse
      1. Silahkan login ke blog anda.
      2. Klik Rancangan
      3. Klik tab Edit HTML
      Tips:
       Jangan lupa centang expand widget template
      4. Cari kode  </head>
      5. Lalu copy paste kode di bawah ini, tepat di bawah kode
      </head>

      <script src="http://ajurna.googlecode.com/files/rainbow.js"></script>

      6. Klik Simpan template

      Semoga mencoba
      Semoga Berhsil Gan

      Kamis, 17 Februari 2011

      Cara Membuat Backround Pada Judul Postingan

      Cara Membuat Link Beraneka Rgam


      Bingung mau ngasih judul apa, maksud anaa jika Ingin link tersentuh pointer menjadi huruf besar, bekedip kedip warna pelangi dan backgroundnya seperti kembang api atau bintang bertaburan (contohnya seperti di blog ini).
      Berikut cara buatnya:
      • Loggin ke blogger
      • Klick layout atau tata letak
      • Edit HTML
      • Cari code berikut:
      hover
      • Untuk memudahkan tekan ctrl+F, hasilnya akan banyak.
      • Setelah ketemu tambahkan code berikut sejajar pada setiap code tadi.
      { color: #00FFFF; text-transform: uppercase; font-weight: bolder; font-size: 20px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); }
      • Silahkan edit codenya sesuai selera anda, font size, image backgroud dan warna font, untuk code warna bisa lihat disini
      • Jangan lupa save, simpan template!
      Kalau ingin linknya berkedip warna pelangi lihat disini

      Cara Membuat Kode warna Versi 2

      Untuk mengedit atau mendesain blog kita pasti butuh referensi kode warna. Untuk itu terkadang kita harus bolak balik situs yang memiliki postingan tabel kode warna, capek nggak? Mungkin kalau capek tidak ya, tapi pernah kah terlintas dibenak sobat bagaimana cara menampilkan tabel code warna tersebut dalam postingan atau pada elemen blog kita (Sebagai gadget githu)?
      Contohnya bisa lihat disini
      Nah berikut rahasianya eh tutorial cara memasang tabel kode warna pada blog.
      • Seperti biasa sobat harus dalam keadaan login keblogger
      • Masuk menu Tata Letak=> klik Edit HTML (Sebelumnya baiknya sobat backup dulu templatenya dengan mengklik tulisan download template lengkap dengan begitu jika ada kesalahan sobat bisa mengembalikkan kembali template seperti semula!)
      • Copy code JS berikut dan paste tepat diatas kode </head> 
      <script language='javascript'>
      function Barva(koda)
      {
      document.getElementById("vzorec").bgColor=koda;
      document.hcc.barva.value=koda.toUpperCase();
      document.hcc.barva.select();
      }
      function BarvaDruga(koda)
      {
      document.getElementById("vzorec2").bgColor=koda;
      document.hcc.Barva2.value=koda.toUpperCase();
      document.hcc.Barva2.select();
      }
      </script>
      <script type='text/javascript'>
      var hue;
      var picker;
      //var gLogger;
      var dd1, dd2;
      var r, g, b;
      function init() {
      if (typeof(ygLogger) != "undefined")
      ygLogger.init(document.getElementById("logDiv"));
      pickerInit();
      //ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
      //ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
      }
      // Picker ---------------------------------------------------------
      function pickerInit() {
      hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
      hue.onChange = function(newVal) { hueUpdate(newVal); };
      picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
      picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
      hueUpdate();
      dd1 = new YAHOO.util.DD("pickerPanel");
      dd1.setHandleElId("pickerHandle");
      dd1.endDrag = function(e) {
      // picker.thumb.resetConstraints();
      // hue.thumb.resetConstraints();
      };
      }
      executeonload(init);
      function pickerUpdate(newX, newY) {
      pickerSwatchUpdate();
      }
      function hueUpdate(newVal) {
      var h = (180 - hue.getValue()) / 180;
      if (h == 1) { h = 0; }
      var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
      document.getElementById("pickerDiv").style.backgroundColor =
      "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
      pickerSwatchUpdate();
      }
      function pickerSwatchUpdate() {
      var h = (180 - hue.getValue());
      if (h == 180) { h = 0; }
      document.getElementById("pickerhval").value = (h*2);
      h = h / 180;
      var s = picker.getXValue() / 180;
      document.getElementById("pickersval").value = Math.round(s * 100);
      var v = (180 - picker.getYValue()) / 180;
      document.getElementById("pickervval").value = Math.round(v * 100);
      var a = YAHOO.util.Color.hsv2rgb( h, s, v );
      document.getElementById("pickerSwatch").style.backgroundColor =
      "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
      document.getElementById("pickerrval").value = a[0];
      document.getElementById("pickergval").value = a[1];
      document.getElementById("pickerbval").value = a[2];
      var hexvalue = document.getElementById("pickerhexval").value ='#'+
      YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
      ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
      if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
      }
      </script><!--[if gte IE 5.5000]>
      <script type="text/javascript">
      function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
      {
      for(var i=0; i<document.images.length; i++)
      {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
      var imgID = (img.id) ? "id='" + img.id + "' " : ""
      var imgClass = (img.className) ? "class='" + img.className + "' " : ""
      var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
      var imgStyle = "display:inline-block;" + img.style.cssText
      if (img.align == "left") imgStyle = "float:left;" + imgStyle
      if (img.align == "right") imgStyle = "float:right;" + imgStyle
      if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
      var strNewHTML = "<span " + imgID + imgClass + imgTitle
      + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
      + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
      + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
      img.outerHTML = strNewHTML
      i = i-1
      }
      }
      }
      YAHOO.util.Event.addListener(window, "load", correctPNG);
      </script>
      <![endif]-->
      • Sebelum save/ simpan template bisa klik tab pratinjau dulu, kalau blognya tampilannya seperti semula berarti langkah-langkahnya udah benar.
      Nah untuk menampilkan kode warna pada postingan lengkap dengan label, copy kode warna berikut dan paste di tab Edit HTML, sedang untuk menambahkannya pada elemen halaman blog
      • masuk pada menu Tata Letak
      • Klik Elemen halaman klik tambah gadget pada tempat/sidebar yang sobat inginkan ditampilkan kode warna tersebut.
      • Tambah HTML/JavaScript
      • Copy kode warna dan paste pada kolom entry
      Berikut kode warnanya :
      <center><form name="hcc" id="hcc">
      <table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
      </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
      </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
      </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
      </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
      </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
      </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
      </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
      </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
      </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
      </td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
      </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
      </td></tr><tr height="10"><td>
      </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
      </td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
      </td></tr></tbody></table></td></tr></tbody></table>
      <table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24">
      </td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
      </form></center>
      Semoga bermanfaat! Terimakasih atas waktu dan perhatiaan yang telah sobat sisihkan untuk membaca postingan ini!
      Budayakan komentar setelah membaca dan tunggu komentar balik anaa diblog sobat.
      Salam...