Cara Membuat Sitemap Blogspot Keren dan Responsive

Cara Membuat Sitemap Blogspot - Sitemap atau daftar isi blog adalah halaman yang berisi seluruh postingan blog yang biasanya dikemas dengan perlabel. Dengan memiliki sitemap blog maka pengunjung bisa dengan mudah mencari artikel yang diinginkan.

Sitemap yang akan saya bagikan kali ini memiliki fitur yang sangat komplit dan merupakan update terbaru support fitur HTTPS Blogger custom domain (Baca: Cara Memasang HTTPS (SSL) di Blogger Custom Domain ). Fitur sitemap blogspot ini sebagai berikut:
  1. Responsive : Sitemap ini sudah didesain responsive sehingga tetap bisa diakses melalui perangkat mobile dengan tampilan yang keren.
  2. Sederhana dan Keren: Memiliki tampilan yang sedap dipandang mata dengan warna yang segar namun tetap elegan.
  3. Fast loading : server script js terbaik sehingga loading ringan.
  4. Otomatis : Sitemap ini akan update otomatis jika ada artikel atau postingan baru yang dipublikasikan dengan tanda New!!! artinya artikel baru.
Screenshot:
Tampilan Desktop (Komputer atau Laptop)
cara membuat sitemap blogspot blogger

Tampilan Mobile (Responsive) 
Cara Membuat Sitemap Blogspot Responsive

Bagaimana lengkap dan keren bukan? dengan sitemap ini tentu blog akan terlihat sangat keren, untuk demo dan tampilan nanti saya jelaskan dibawah. Saya selaku admin mengucapkan banyak terima kasih kepada Mas Taufik Nurrohman admin dte.web.id yang sudah membuat sitemap keren ini.

Sitemap ini menampilkan sebuah susunan label blog, jika nanti di klik pada label maka akan muncul semua artikel yang ada pada label tersebut. Berikut langkah-langkah untuk memasang sitemap di blogspot.

Cara Membuat Sitemap SEO Otomatis di Blogspot

  1. Buka akun Blogger > Pilih Blog yang ingin dipasang sitemap> Masuk Menu Halaman > Halaman Baru
    memasang sitemap otomatis blogspot
  2. Buat Judul dengan "Sitemap" atau "Daftar Isi" lalu masukkan kode berikut pada mode HTML, Jangan lupa ganti URL https://www.bloggerjepara.net/ dengan URL blog kamu.
    <style type="text/css">
    .tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
    position:relative;color:#333;border: 1px solid #9C9C9C;}
    .tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
    color:white;}
    .tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
    .tabbed-toc .toc-tabs {width:20%;float:left;}
    .tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;
    height:41px;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
    padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
    .tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
    .tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
    z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
    .tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
    .tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
    .tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
    .tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;height: 40px;padding: 10px 12px;
    text-decoration:none;outline:none;overflow:hidden;}
    .tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
    .tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
    border-bottom:4px solid #275827;overflow:hidden;}
    .tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
    width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
    .tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
    .tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
    background-color:#333;color:white;outline:none;}
    .tabbed-toc .panel li.bold a:hover,
    .tabbed-toc .panel li.bold a:hover time {background-color:#222}
    @media (max-width:700px) {
    .tabbed-toc {border:2px solid #333}
    .tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
    .tabbed-toc .toc-tabs li {display:inline;float:left;}
    .tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
    .tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
    .tabbed-toc .toc-content {border:none}
    .tabbed-toc .toc-line,
    .tabbed-toc .panel li time {display:none}
    .tabbed-toc .panel li a{height: auto;}}
    </style>
    <div class="tabbed-toc" id="tabbed-toc">
    <span class="loading">Memuat…</span></div>
    <script>
    var tabbedTOC = {
    blogUrl: "https://www.bloggerjepara.net/", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
    "Januari",
    "Februari",
    "Maret",
    "April",
    "Mei",
    "Juni",
    "Juli",
    "Agustus",
    "September",
    "Oktober",
    "November",
    "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
    };
    </script>
    <script src="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>
  3. Kurang lebihnya seperti gambar berikut:
    memasang sitemap keren di blogspot
  4. Publikasikan dan lihat hasilnya.
Sampai disini kamu sudah berhasil memasang sitemap blogspot keren, responsive dan otomatis. Jika ada kendala silahkan tanyakan melalui kotak komentar atau langsung menghubungi admin melalui kontak yang sudah tersedia.


Semoga bermanfaat dan selamat mencoba. Salam Blogger Jepara

Cara Setting Robots.txt di Blogger agar Postingan Cepat Terindex

Cara Agar Postingan Cepat Terindex - Banyak cara yang dapat dilakukan untuk optimasi SEO onpage agar postingan lebih ramah dengan mesin pencari salah satunya adalah dengan setting robot.txt dengan benar.

Dengan menerapkan trik ini maka blog akan lebih SEO friendly, postingan akan mudah terindex oleh serp Google. Melakukan setting robot.txt yang benar maka akan terhindar bahaya tidak terindek untuk perkembangan blog kedepannya.

Baca Juga: Cara Meningkatkan Pengunjung Blog dengan Deskripsi Penelusuran

Cara Setting Robots.txt di Blogger

Berikut langkah-langkah yang dapat dilakukan untuk memasang robot.txt di blogspot blogger. Silahkan buka menu Setelan > Preferensi penelusuran > Perayap dan Pengindekan lalu masukkan kode berikut: 


User-agent: Mediapartners-Google
Disallow:

User-agent: *
Allow: /

Sitemap: https://www.bloggerjepara.net/feeds/posts/default?orderby=UPDATED

Keterangan:
Ganti URL yang berwarna merah dengan URL blog Kamu.
Kurang lebihnya seperti gambar dibawah ini:
Cara Setting Robots.txt di Blogger

Cara Setting Tag Tajuk Robot di Blogspot

Caranya sama seperti yang diatas yaitu melalui menu Setelan > Preferensi penelusuran > Perayap dan Pengindekan tepat dibawah robot.txt. Silahkan melakukan setting seperti gambar berikut:
Cara Setting Tag Tajuk Robot di Blogspot


Dengan melakukan setiing robot diatas, maka postingan blog akan semakin mudah terindek. Dan jangan lupa selalu membuat konten yang berkualitas dan bermanfaat untuk para pembaca setia.

Baca Juga: Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly

Semoga bermanfaat dan selamat mencoba. Salam blogger Jepara.

Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly

Cara Membuat Gambar di Blog Lebih SEO Friendly - Gambar merupakan salah satu komponen penting sebagai pelengkap artikel postingan agar lebih SEO. Terlebih sebuah blog atau website tutorial, gambar akan menjadi pilihan terbaik untuk menjelaskan tutorial tersebut agar mudah untuk dipahami.

Dalam pencarian Google, gambar juga harus di optimasi agar mampu bersaing dengan kata kunci yang dibidik. Dengan optimasi gambar postingan maka akan banyak mendatangkan visitor dari Google image.

Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly

Selain gambar yang dioptimasi, kamu juga harus melakukan optimasi pencarian dengan membuat deskripsi penelusuran pada blog dan postingan agar lebih mudah dikenal search engine. Tutorialnya sudah saya buat, silahkan baca: Cara Meningkatkan Pengunjung Blog dengan Deskripsi Penelusuran

Cara Membuat Gambar Artikel Menjadi SEO

  1. Masuk postingan dan silahkan tambahkan gambar.
  2. Kemudian klik pada gambar lalu pilih "Properties"
    Cara Membuat Gambar Postingan di Blog Menjadi SEO Friendly
  3. Setelah itu masukkan title text dan alt text (title: sesuaikan dengan keyword artikel, alt text: isi dengan deskripsi gambar) Kalau saya pribadi antara title dan alt saya samakan.
    optimasi gambar postingan agar lebih seo friendly
  4. Selesai.
Sekian tutorial optimasi gambar postingan agar lebih seo friendly, gunakan cara diatas untuk semua gambar yang dimasukkan pada postingan. 

Selamat mencoba dan semoga pengunjung blog semakin banyak. Salam Blogger Jepara

Cara Meningkatkan Pengunjung Blog dengan Deskripsi Penelusuran

Cara Meningkatkan Pengunjung Blog - Halo sahabat Blogger Jepara, trik seo kali ini seputar optimasi onpage agar blog lebih seo friendly. Salah satu rahasia untuk menaikkan trafik atau pengunjung blog adalah menggunakan deskripsi penelusuran pencarian search engine Google. Dengan memasang deskripsi maka Google akan lebih mudah mengenal blog atau postingan sehingga dapat meningkatkan serp Google untuk dapat bertengger dihalaman utama pencarian.

Singkat cerita, dulu waktu saya baru terjun didunia blogger sungguh sangat membosankan karena blog yang saya bangun tidak kunjung mendapatkan traffic, dan ternyata salah satu penyebabnya adalah blog atau postingan tidak memiliki deskripsi penelusuran. Setelah memasangnya ternyata ada perbedaan jauh, blog semakin mudah dikenal oleh mesin pencari Google.


Untuk dapat menjadikan postingan muncul dihalaman pertama Google maka diperlukan SEO onpage yang cukup, diantaranya dengan memasang keyword pada judul posting, deskripsi dan isi postingan. Dengan melakukan ritual tersebut maka postingan akan lebih mudah untuk kompetisi dengan blog atau website lainnya.

Cara Memasang Deskripsi Penelusuran untuk Menaikkan Trafik Blog

Seperti yang saya katakan diatas, pemasangan deskripsi ada dua macam yaitu deskripsi untuk blog dan deskripsi untuk postingan. Pada tutorial kali ini saya akan jelaskan semuanya. Ikuti langkah-langkah dibawah ini sampai selesai.  

Cara Memasang Deskripsi Blog

  1. Silahkan masuk akun blogger Anda
  2. Buka menu "Setelan" pilih "Preferensi penelusuran" lalu pada tag meta deskripsi silahkan klik "edit
    Cara Memasang Deskripsi Penelusuran untuk Menaikkan Trafik Blog
  3. Jika sudah terbuka, pada Aktifkan deskripsi penelusuran? silahkan pilih YA dan masukkan deskripsi blog pada kolom yang tersedia. Jika sudah jangan lupa klik tombol "Simpan perubahan"
    cara memasang deskripsi penelusuran di blog
  4. Selesai, sekarang blog Anda suda memiliki deskripsi penelusuran. Sebagai contoh untuk blog BloggerJepara.Net seperti gambar dibawah ini:
    cara mengaktifkan deskripsi penelusuran blog

Cara Memasang Deskripsi Penelusuran Postingan

  1. Silahkan buat postingan lengkap dengan judul dan isi konten yang berkualitas.
  2. Tambahkan deskripsi penelusuran pada kolom yang tersedia disebelah kanan halaman posting, jika sudah masukkan deskripsi penelusuran jangan lupa klik tombol selesai.
    Cara Memasang Deskripsi Penelusuran Postingan blog
  3. Sekarang postingan anda sudah memiliki deskripsi penelusuran (jangan lupa masukkan keyword didalamnya)
  4. Ingan!!! lakukan cara ini setiap membuat postingan.
Demikian 2 tutorial cara memasang deskripsi penelusuran pada blog untuk meningkatkan pengunjung dan lebih SEO friendly. Dengan memiliki blog yang SEO friendly tentu akan membuat blog semakin populer dan tentunya akan banyak mendapatkan penghasilan dari blog.

Jika ada pertanyaan silahkan kirim melalui halaman komentar atau kontak yang sudah tersedia. Selamat mencoba dan salam dari Blogger Jepara.

Cara Memasang HTTPS (SSL) di Blogger Custom Domain

Cara Memasang HTTPS (SSL) di Blogger Custom Domain - Platform Blogger (blogspot) kini kembali lagi berinovasi di awal tahun 2018 dengan memunculkan fitur HTTPS untuk blogger custom domain. Seperti yang diketahui sebelumnya, custom domain di blogger tidak bisa dipasang dan aktifkan fitur SSL tapi sekarang sudah bisa dilakukan.

Apa itu Blogger Custom Domain?

Blogger custom domain adalah blog dari platform blogger yang sudah dipasang domain TLD (seperti domain .com, .net, .org dll) lebih jelasnya seperti dibawah:

https://www.bloggerjepara.net/ (domain TLD menggunakan .net)
https://bloggerjepara.blogspot.co.id/ (default domain blogger yaitu blogspot.co.id)

Saya sediri lebih suka dengan SSL (Secure Socket Layer) karena sesuai yang direkomendasikan google untuk membuat sambungan aman dengan browser web pengguna. Dengan memasang SSL (HTTPS) kita bisa mendapatkan banyak manfaat diantaranya yang paling penting adalah sangat disukai oleh mesin pencari google (diprioritaskan dalam pencarian).

Untuk website saya yang sudah hosting sendiri di wordpress self hosting, semuanya sudah saya pasang SSL dan memiliki kemajuan yang sangat pesat dan untuk iklan adsense juga memiliki perkembangan yang baik. Jadi intinya memasang HTTPS di blog sangat diperlukan untuk perkembangan blog atau website.
cara memasang https di blogger

Cara Memasang HTTPS (SSL) di Blogger Custom Domain dengan Mudah

Berikut langkah-langkah yang harus dilakukan untuk mendapatkan SSL gratis dari blogger dan memasangnya di blogspot custom domain.
  1. Silahkan masuk terlebih dahulu di link berikut draft.blogger.com
  2. Setelah itu silahkan pilih menu "Setelan" lalu pilih "General" silahkan pilih "YA" pada pilihan ketersedian HTTPS (silahkan tunggu proses pengalihan ke https dengan waktu kurang lebih 1 menit, untuk cek reload aja browsernya, kalau sudah tidak ada peringatan berarti sudah berhasil)
    Cara Memasang HTTPS (SSL) di Blogger Custom Domain
  3. Selanjutnya jangan lupa untuk melakukan pengalihan HTTPS (redirect) dengan redirect ini akan mengarahkan otomatis dari http ke https. Caranya seperti diatas pada pengalihan HTTPS pilih "YA"
    redirect http ke https di blogger
  4. Selesai dan lihat hasilnya, contohnya seperti blog Komunitas Blogger Jepara ini.
    cara memasang https di blogger

Demikian cara cepat dan mudah untuk memasang SSL gratis dari blogger agar muncul HTTPS di blogger custom domain. 

Semoga dapat bermanfaat dan memberikan perkembangan positif dalam pencarian Google dan perkembangan iklan Google Adsense yang lebih baik. Selam Blogger Jepara.

Cara Mengubah Warna Link di Blog dengan Mudah

Cara Mengubah Warna Link di Blog dengan Mudah - Sebuah blog atau website tidak akan pernah meninggalkan link (link internal maupun eksternal). Hal ini bertujuan untuk memberikan informasi yang lebih lengkap. 

Warna link pada blogspot atau blogger bisa diganti dengan warna yang diinginkan, karena terkadang warna link pada template yang kita gunakan tidak sesuai yang kita inginkan. 

Yang perlu diperhatikan adalah warna link yang ingin kita ganti jangan sampai tidak sesuai dengan warna dasar template sehingga dapat mengganggu tampilan blog. untuk mengetahui kode warna HTML silahkan baca: Kode Warna HTML Lengkap untuk Blog dan Website

Cara Mengubah Warna Link di Blog

Berikut cara mengubah warna link pada blog yang harus diikuti langkah-langkahnya sampai selesai.
  1. Masuk akun blogger terlebih dahulu
  2. Kemudian pilih menu "Tema" lalu pilih "Edit HTML"
    Cara Mengubah Warna Link di Blog dengan Mudah
  3. Cari kode a:link untuk lebih cepatnya silahkan menggunakan tombol kombinasi Ctrl+F lalu masukkan code a:link kemudian tekan enter.
    Cara Mengubah Warna Link di Blog
  4.  Maka akan muncul kode HTML warna link seperti berikut, silahkan ganti warna sesuai yang diinginkan: 
a:link{color:#859ce6;text-decoration:none}
a:visited{color:#859ce6;text-decoration:none}
a:hover{color:#333;text-decoration:none}


Keterangan:
a:link : Warna link pada blog
a:visited : Warna link yang sudah diklik atau dikunjungi
a:hover : Warna link ketika kursor diarahkan pada link.

Jika sudah diganti warna linknya, jangan lupa simpan template dan lihat hasilnya.

Sekian tutorial cara mengganti warna link pada blog, semoga tampilan blog atau websitenya semakin menarik dan sedap dipandang mata. Jika Sahabat Blogger Jepara masih kesulitan, silahkan tinggalkan pesan melalui kolom komentar atau melalui halaman kontak yang sudah tersedia. Salam Sukses dari Komunitas Blogger Jepara.

Cara Mudah Mendapatkan Kode Warna HTML

Cara Mudah Mendapatkan Kode Warna HTML - Kode Warna HTML adalah kode yang dapat digunakan untuk menampilkan warna, kode html sangat diperlukan untuk Anda yang ingin mempercantik tampilan blog dengan warna-warna pilihan.

Untuk mendapatkan kode warna bukanlah hal yang sulit karena sudah tersedia tool untuk mendapatkan kode warna, kali ini Blogger Jepara akan share tool warna yaitu "Color Code Generator" cara paling mudah dan cepat untuk mendapatkan kode warna HTML untuk keperluan desain tampilan atau template blog.

Cara Mudah Mendapatkan Kode Warna HTML
Kode Warna

Cara Mendapatkan Kode Warna HTML 

Berikut adalah color code generator untuk mendapatkan kode warna sesuai yang diinginkan. Caranya cukup mudah, silahkan klik pada warna yang dipilih lalu copy kode warna:
  • Kode Warna #5C97BF
  • Kode Warna #4B77BE
  • Kode Warna #1F3A93
  • Kode Warna #2574A9
  • Kode Warna #67809F
  • Kode Warna #34495E
  • Kode Warna #3A539B
  • Kode Warna #1E8BC3
  • Kode Warna #6BB9F0
  • Kode Warna #22313F
  • Kode Warna #336E7B
  • Kode Warna #19B5FE
  • Kode Warna #89C4F4
  • Kode Warna #2C3E50
  • Kode Warna #3498DB
  • Kode Warna #22A7F0
  • Kode Warna #94E0EE
  • Kode Warna #52B3D9
  • Kode Warna #59ABE3
  • Kode Warna #26A65B
  • Kode Warna #1E824C
  • Kode Warna #00B16A
  • Kode Warna #2ABB9B
  • Kode Warna #4DAF7C
  • Kode Warna #03A678
  • Kode Warna #26C281
  • Kode Warna #019875
  • Kode Warna #3FC380
  • Kode Warna #16A085
  • Kode Warna #2ECC71
  • Kode Warna #C5EFF7
  • Kode Warna #C8F7C5
  • Kode Warna #049372
  • Kode Warna #36D7B7
  • Kode Warna #66CC99
  • Kode Warna #1BA39C
  • Kode Warna #1BBC9B
  • Kode Warna #65C6BB
  • Kode Warna #BFBFBF
  • Kode Warna #ABB7B7
  • Kode Warna #DADFE1
  • Kode Warna #95A5A6
  • Kode Warna #C5DCE2
  • Kode Warna #BDC3C7
  • Kode Warna #EEEEEE
  • Kode Warna #D2D7D3
  • Kode Warna #F0E2C5
  • Kode Warna #EB9532
  • Kode Warna #E67E22
  • Kode Warna #F27935
  • Kode Warna #F9BF3B
  • Kode Warna #F7CA18
  • Kode Warna #F9690E
  • Kode Warna #F39C12
  • Kode Warna #D35400
  • Kode Warna #F4D03F
  • Kode Warna #F5AB35
  • Kode Warna #EB974E
  • Kode Warna #F2784B
  • Kode Warna #F4B350
  • Kode Warna #E87E04
  • Kode Warna #E74C3C
  • Kode Warna #CF000F
  • Kode Warna #C0392B
  • Kode Warna #D64541
  • Kode Warna #EF4836
  • Kode Warna #96281B
  • Kode Warna #D91E18
  • Kode Warna #E26A6A
  • Kode Warna #FF0000
  • Kode Warna #F22613
  • Kode Warna #E08283
  • Kode Warna #9B59B6
  • Kode Warna #8E44AD
  • Kode Warna #BE90D4
  • Kode Warna #BF55EC
  • Kode Warna #9A12B3
  • Kode Warna #913D88
  • Kode Warna #722D6A
  • Kode Warna #740A4E

Atau jika ingin menggunakan kode warna lengkap beserta gambarnya silahkan simak tutorial yang sudah pernah saya buat disini : Kode Warna HTML Lengkap

Demikian informasi singkat untuk mendapatkan kode warna HTML dengan cepat dan mudah. Semoga dapat bermanfaat.

Kode Warna HTML Lengkap untuk Blog dan Website

Kode Warna HTML - Kode warna merupakan elemen penting dalam pembuatan template blog atau website untuk memberikan warna yang menarik untuk setiap tampilan template.

Dengan warna yang singkron tentu akan menghasilkan paduan warna yang elegan dan sedap dipandang mata, seperti warna background, warna link, warna text, warna pada widget seperti popular post, recent post atau membuat sitemap yang keren dengan warna-warni.

Berikut kode warna lengkap untuk HTML, Anda tinggal memilih warna yang disukai lalu copy codenya untuk dipasang di susunan HTML.

Kode Warna HTML Lengkap untuk Blog dan Website
Contoh Kode Warna

Kode Warna HTML Lengkap untuk Template


Kode warna dasar:
  1. Putih: #FFFFFF
  2. Hitam: #000000
  3. Merah: #FF0000
  4. Kuning: #FFFF00
  5. Biru: #0000FF
  6. Coklat : #D2691E
  7. Hijau: #008000
Kode Warna Lengkap dengan Gambar:
Kode Warna: #FFFAFA Nama Warna: Snow
Kode Warna: #00FF7F Nama Warna: Springgreen
Kode Warna: #4682B4 Nama Warna: Steelblue
Kode Warna: #D2B48C Nama Warna: Tan
Kode Warna: #008080 Nama Warna: Teal
Kode Warna: #D8BFD8 Nama Warna: Thistle
Kode Warna: #FF6347 Nama Warna: Tomato
Kode Warna: #F0F8FF Nama Warna: Aliceblue
Kode Warna: #FAEBD7 Nama Warna: Antiquewhite
Kode Warna: #00FFFF Nama Warna: Aqua
Kode Warna: #7FFFD4 Nama Warna: Aquamarine
Kode Warna: #F0FFFF Nama Warna: Azure
Kode Warna: #F5F5DC Nama Warna: Beige
Kode Warna: #FFE4C4 Nama Warna: Bisque
Kode Warna: #000000 Nama Warna: Black
Kode Warna: #FFEBCD Nama Warna: Blanchedalmond
Kode Warna: #0000FF Nama Warna: Blue
Kode Warna: #8A2BE2 Nama Warna: Blueviolet
Kode Warna: #A52A2A Nama Warna: Brown
Kode Warna: #DEB887 Nama Warna: Burlywood
Kode Warna: #5F9EAD Nama Warna: Cadetblue
Kode Warna: #7FFF00 Nama Warna: Chartreuse
Kode Warna: #D2691E Nama Warna: Chocolate
Kode Warna: #FF7F50 Nama Warna: Coral
Kode Warna: #64950 Nama Warna: Cornflowerblue
Kode Warna: #FFF8DC Nama Warna: Cornsilk
Kode Warna: #DC143C Nama Warna: Crimson
Kode Warna: #00FFFF Nama Warna: Cyan
Kode Warna: #00008B Nama Warna: Darkblue
Kode Warna: #008B8B Nama Warna: Darkcyan
Kode Warna: #B8860B Nama Warna: Darkgoldenrod
Kode Warna: #A9A9A9 Nama Warna: Darkgray
Kode Warna: #006400 Nama Warna: Darkgreen
Kode Warna: #8B008B Nama Warna: Darkmagenta
Kode Warna: #BDB76B Nama Warna: Darkkhaki
Kode Warna: #556B2F Nama Warna: Darkolivegreen
Kode Warna: #FF8C00 Nama Warna: Darkorange
Kode Warna: #9932CC Nama Warna: Darkorchid
Kode Warna: #8B0000 Nama Warna: Darkred
Kode Warna: #E9967A Nama Warna: Darksalmon
Kode Warna: #8FBC8B Nama Warna: Darkseagreen
Kode Warna: #483D8B Nama Warna: Darkslateblue
Kode Warna: #2F4F4F Nama Warna: Darkslategray
Kode Warna: #00CED1 Nama Warna: Darkturquoise
Kode Warna: #9400D3 Nama Warna: Darkviolet
Kode Warna: #FF1493 Nama Warna: Deeppink
Kode Warna: #00BFFF Nama Warna: Deepskyblue
Kode Warna: #696969 Nama Warna: Dimgray
Kode Warna: #1E90FF Nama Warna: Dodgerblue
Kode Warna: #B22222 Nama Warna: Firebrick
Kode Warna: #FFFAF0 Nama Warna: Floralwhite
Kode Warna: #228B22 Nama Warna: Forestgreen
Kode Warna: #FF00FF Nama Warna: Fuchsia
Kode Warna: #DCDCDC Nama Warna: Gainsboro
Kode Warna: #F8F8FF Nama Warna: Ghostwhite
ode Warna: #FFD700 Nama Warna: Gold
Kode Warna: #DAA520 Nama Warna: Goldenrod
Kode Warna: #808080 Nama Warna: Gray
Kode Warna: #008000 Nama Warna: Green
Kode Warna: #ADFF2F Nama Warna: Greenyellow
Kode Warna: #F0FFF0 Nama Warna: Honeydew
Kode Warna: #FF69B4 Nama Warna: Hotpink
Kode Warna: #CD5C5C Nama Warna: Indianred
Kode Warna: #4B0082 Nama Warna: Indigo
Kode Warna: #FFFFF0 Nama Warna: Ivory
Kode Warna: #F0E68C Nama Warna: Khaki
Kode Warna: #E6E6FA Nama Warna: Lavender
Kode Warna: #FFF0F5 Nama Warna: Lavenderblush
Kode Warna: #7CFC00 Nama Warna: Lawngreen
Kode Warna: #FFFACD Nama Warna: Lemonchiffon
Kode Warna: #ADE8E6 Nama Warna: Lightblue
Kode Warna: #F08080 Nama Warna: Lightcoral
Kode Warna: #E0FFFF Nama Warna: Lightcyan
Kode Warna: #FAFAD2 Nama Warna: Lightgoldenrodyellow
Kode Warna: #90EE90 Nama Warna: Lightgreen
Kode Warna: #D3D3D3 Nama Warna: Lightgray
Kode Warna: #FFB6C1 Nama Warna: Lightpink
Kode Warna: #FFA072 Nama Warna: Lightsalmon
Kode Warna: #20B2AA Nama Warna: Lightseagreen
Kode Warna: #87CEFA Nama Warna: Lightskyblue
Kode Warna: #778899 Nama Warna: Lightslategray
Kode Warna: #B0C4DE Nama Warna: Lightsteelblue
Kode Warna: #FFFFE0 Nama Warna: Lightyellow
Kode Warna: #00FF00 Nama Warna:  Lime
Kode Warna: #32CD32 Nama Warna: Limegreen
Kode Warna: #FAF0E6 Nama Warna: Linen
Kode Warna: #FF00FF Nama Warna: Magenta
Kode Warna: #800000 Nama Warna: Maroon
Kode Warna: #66CDAA Nama Warna: Mediumaquamarine
Kode Warna: #0000CD Nama Warna: Mediumblue
Kode Warna: #BA55D3 Nama Warna: Mediumorchid
Kode Warna: #9370DB Nama Warna: Mediumpurple
Kode Warna: #3CB371 Nama Warna: Mediumseagreen
Kode Warna: #7B68EE Nama Warna: Mediumslateblue
Kode Warna: #00FA9A Nama Warna: Mediumspringgreen
Kode Warna: #48D1CC Nama Warna: Mediumturquoise
Kode Warna: #C71585 Nama Warna: Mediumvioletred
Kode Warna: #191970 Nama Warna: Midnightblue
Kode Warna: #F5FFFA Nama Warna: Mintcream
Kode Warna: #FFE4E1 Nama Warna: Mistyrose
Kode Warna: #FFE4E1 Nama Warna: Moccasin
Kode Warna: #FFDEAD Nama Warna: Navajowhite
Kode Warna: #000080 Nama Warna: Navy
Kode Warna: #FDF5E6 Nama Warna: Oldlace
Kode Warna: #808000 Nama Warna: Olive
Kode Warna: #6B8E23 Nama Warna: Olivedrab
Kode Warna: #FFA500 Nama Warna: Orange
Kode Warna: #FF1000 Nama Warna: Orangered
Kode Warna: #DA70D6 Nama Warna: Orchid
Kode Warna: #EEE8AA Nama Warna: Palegoldenrod
Kode Warna: #98FB98 Nama Warna: Palgreen
Kode Warna: #AFEEEE Nama Warna: Paleturquoise
Kode Warna: #DB7093 Nama Warna: Palevioletred
Kode Warna: #FFEFD5 Nama Warna: Papayawhip
Kode Warna: #FFDAB9 Nama Warna: Peachpuff
Kode Warna: #CD853F Nama Warna: Peru
Kode Warna: #FFC0CB Nama Warna: Pink
Kode Warna: #DDA0DD Nama Warna: Plum
Kode Warna: #B0E0E6 Nama Warna: Powderblue
Kode Warna: #800080 Nama Warna: Purple
Kode Warna: #FF0000 Nama Warna: Red
Kode Warna: #BC8F8F Nama Warna: Rosybrown
Kode Warna: #4169E1 Nama Warna: Royalblue
Kode Warna: #8B4513 Nama Warna: Saddlebrown
Kode Warna: #FA8072 Nama Warna: Salmon
Kode Warna: #F4A460 Nama Warna: Sandybrown
Kode Warna: #2E8B57 Nama Warna: Seagreen
Kode Warna: #FFF5EE Nama Warna: Seashell
Kode Warna: #A0522D Nama Warna: Sienna
Kode Warna: #C0C0C0 Nama Warna: Silver
Kode Warna: #87CEEB Nama Warna: Skyblue
Kode Warna: #708090 Nama Warna: Slategray
Kode Warna: #40E0D0 Nama Warna: Turquoise
Kode Warna: #EE82EE Nama Warna: Violet
Kode Warna: #F5DEB3 Nama Warna: Wheat
Kode Warna: #FFFFFF Nama Warna: White
Kode Warna: #F5F5F5 Nama Warna: Whitesmoke
Kode Warna: #FFFF00 Nama Warna: Yellow
Kode Warna: #9ACD32 Nama Warna: Yellowgreen

Demikian share sederhana tentang kode warna HTML lengkap untuk template blog atau website. Semoga bermanfaat. Salam Blogger Jepara