Senin, 22 Januari 2018

Cara Membuat Contact Us (Kontak) Keren di Blog

Cara Membuat Contact Us di Blog - Halaman kontak biasa dikenal dengan sebutan Contact Us atau Kontak Kami merupakan halaman wajib yang harus dipasang pada blog atau website. Adanya halaman kontak bertujuan untuk lebih dekat dengan pengunjung atau visitor agar lebih mudah untuk berkomunikasi.

Halaman Contact Us biasanya dipasang pada halaman statis blog, dengan menampilkan form pesan atau hanya menampilkan info kontak saja seperti email, FB, WA, atau dengan kontak yang lainnya. 

Pada tutorial kali ini saya akan berbagi cara membuat halaman contact us dengan form yang sangat keren dan membuatnya cukup mudah walaupun untuk pemula sekalipun. Selain kontak biasanya blog memuat halaman privacy policy dan halaman disclaimer yang merupakan halaman wajib untuk mendaftar adsense.

Cara Membuat Contact Us (Kontak) Keren di Blog
Contact Form Blogger

Cara Membuat Contact Us di Halaman Statis Blogger

  1. Memasang widget formulir di sidebar, caranya login akun Blogger >> pilih  Tata Letak >> Tambahkan Gadget >> Gadget lainnya >> Formulir Kontak seperti gambar berikut:
    cara membuat halaman contact us di blog
  2. Setelah pasang wideget kontak, selanjutnya masuk menu Tema >> Edit HTML. Letakkan kode berikut tepat diatas kode </head>.
    <style type='text/css'>
    #ContactForm1{display:none}
    </style>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <style type='text/css'>
    /* Contact form */
    #ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:50px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;}
    #ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fff;outline:0}
    #ContactForm1_contact-form-email-message{width:95%;height:170px;margin:0;padding:10px;background:#fbfbfb;border:1px solid #ccc;color:#777;border-radius:3px;}
    #ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:10px;margin:0;cursor:pointer;background-color:#6e9ee6;border:1px solid #6e9ee6;border-radius:3px;}
    #ContactForm1_contact-form-submit:hover{background-color:#3c3c3c}
    #ContactForm1_contact-form-submit:active{position:relative;top:2px;}
    #ContactForm1_contact-form-submit:focus{outline:0}
    #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}
    @media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}}
    @media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}.post-body{margin:0 15px}}
    </style>
    </b:if>
  3. Jika sudah memasang kode diatas, selanjutnya buka menu Halaman >> Halaman Baru >> Beri judul halaman statis dengan Contact Us, Kontak atau Kontak Kami.
    cara memasang halaman kontak keren di blogger
    Kemudian Masukkan kode berikut pada mode HTML.
    <div dir="ltr" style="text-align: justify;" >
    Silahkan isi pesan melalui form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, kami akan langsung merespon dengan cepat pesan yang Anda kirimkan. Terima kasih
    <br />
    <form name="contact-form">
    <input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
    <input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
    <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
    <input id="ContactForm1_contact-form-submit" type="button" value="Kirim Pesan" /><br />
    <div class="clear">
    </div>
    <div style="max-width: 222px; text-align: center; width: 100%;">
    <div id="ContactForm1_contact-form-error-message">
    </div>
    <div id="ContactForm1_contact-form-success-message">
    </div>
    </div>
    </form>
    </div>
PERHATIAN:
Jika kontak form tidak berfungsi, maka langkah selanjutnya adalah masuk menu Tema >> Edit HTML kemudian memasang kode berikut ini tepat diatas kode </body>.
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://www.blogger.com/static/v1/widgets/2759014865-widgets.js\"></scr" + "ipt>");
//]]>
</script>
<script type='text/javascript'>
if (typeof(BLOG_attachCsiOnload) != &quot;undefined&quot; &amp;&amp; BLOG_attachCsiOnload != null) { window[&quot;blogger_templates_experiment_id&quot;] = &quot;templatesV1&quot;;window[&quot;blogger_blog_id&quot;] = &quot;<data:blog.blogId/>&quot;;BLOG_attachCsiOnload(&quot;&quot;); }_WidgetManager._Init(&quot;//www.blogger.com/rearrange?blogID\x3d<data:blog.blogId/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:blog.blogId/>&quot;);
_WidgetManager._RegisterWidget(&quot;_ContactFormView&quot;, new _WidgetInfo(&quot;ContactForm1&quot;, &quot;footer1&quot;, null, document.getElementById(&quot;ContactForm1&quot;), {&quot;contactFormMessageSendingMsg&quot;: &quot;Sending...&quot;, &quot;contactFormMessageSentMsg&quot;: &quot;Your message has been sent.&quot;, &quot;contactFormMessageNotSentMsg&quot;: &quot;Message could not be sent. Please try again later.&quot;, &quot;contactFormInvalidEmailMsg&quot;: &quot;A valid email address is required.&quot;, &quot;contactFormEmptyMessageMsg&quot;: &quot;Message field cannot be empty.&quot;, &quot;title&quot;: &quot;Contact Form&quot;, &quot;blogId&quot;: &quot;<data:blog.blogId/>&quot;, &quot;contactFormNameMsg&quot;: &quot;Name&quot;, &quot;contactFormEmailMsg&quot;: &quot;Email&quot;, &quot;contactFormMessageMsg&quot;: &quot;Message&quot;, &quot;contactFormSendMsg&quot;: &quot;Send&quot;, &quot;submitUrl&quot;: &quot;https://www.blogger.com/contact-form.do&quot;}, &quot;displayModeFull&quot;));
</script>
Sumber: Bungfangki.com

Demikian cara membuat halaman kontak pada statis blogger, jika masih kesulitan jangan segan untuk bertanya melalui kontak komentar yang sudah tersedia. Salam Blogger Jepara.

Sabtu, 20 Januari 2018

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.
    <link href="https://cdn.rawgit.com/penaindigo/project/d4a73206/penaindigocom.css" rel="stylesheet"></link>
    <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

Jumat, 19 Januari 2018

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.

Kamis, 18 Januari 2018

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.

Kamis, 11 Januari 2018

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.

Rabu, 10 Januari 2018

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

Selasa, 02 Januari 2018

Kursus Membuat Blog dan Toko Online Gratis di Jepara

Kursus Membuat Blog dan Toko Online Gratis di Jepara - Blog merupakan catatan online yang sangat bermanfaat untuk pemiliknya dan orang lain. Dengan memiliki blog kita bisa berbagi pengalaman dan informasi yang bermanfaat untuk orang lain. Dan untuk pemilik blog bisa mengikuti program periklanan sebagai tambahan penghasilan.

Dengan menggunakan internet yang baik dan benar, maka kita akan mendapatkan manfaat yang sangat bersar juga.  Saya sendiri bangga menjadi blogger karena dapat membuka peluang usaha sendiri (maklum tidak suka jadi karyawan), lebih banyak waktu untuk keluarga dan dapat berbagi informasi yang berguna untuk semua kalangan.

Kursus Membuat Blog dan Toko Online Gratis di Jepara

Kursus bisnis online dengan membuat blog dan toko online ini saya tujukan untuk teman-teman yang berada di Jepara dan sekitarnya yang masih kebingungan belajar membuat blog dan ingin mendapatkan penghasilan dari blog. 

Selain kursus membuat blog, BloggerJepara.Net juga membuka kursus komputer gratis. Untuk info lebih lanjut silahkan buka link berikut Tempat Kursus Komputer Gratis di Jepara

Adapun informasi lengkap tentang kursus ini sebagai berikut:

Alamat Kursus

Jl. Songgo Langit KM. 2 Dk. Putat Rt 09/03 Desa Sumanding, Kec. Kembang, Kab. Jepara.

Fasilitas

  1. Perangkat komputer 1 unit dan laptop 1 unit (semoga bisa nambah lagi).
  2. Wifi
  3. Minuman dan makanan (jika masih tersedia)

Biaya

Program kursus ini tanpa dipungut biaya apapun, jadi tenang saja jika anda tidak memiliki dana untuk kursus maka program ini solusinya.

Materi

  1. Pengenalan internet dasar
  2. Pengenalan bisnis online
  3. Membuat akun email dan media sosial
  4. Membuat blog gratis (blogspot)
  5. Belajar menulis di blog yang sesuai dengan SEO
  6. Belajar membuat toko online
  7. Belajar Google Adsense
  8. Belajar membeli hosting dan domain sendiri.
  9. Dll.
Jika anda tertarik, silahkan menghubungi admin melalui kontak yang sudah tersedia.

Demikian informasi singkat tentang program baru kami dari Komunitas Blogger Jepara, semoga dapat bermanfaat dan menjadikan sumber pengetahuan. 

Tempat Kursus Komputer Gratis di Jepara

Kursus Komputer Gratis - Komputer atau laptop merupakan perangkat elektronik yang sering digunakan di era modern setelah smartphone. Apalagi di dunia pendidikan, komputer sangat penting untuk diketahui karena semua tugas harus dikerjakan melalui pengetikan komputer.

Karena komputer banyak digunakan untuk anak pelajar sebagai penunjang pendidikan, maka dari itu admin BloggerJepara.Net membuka kursus komputer gratis untuk membantu teman-teman di Jepara dan sekitarnya untuk belajar komputer gratis tanpa biaya apapun.

Tempat Kursus Komputer Gratis di Jepara

Kursus komputer gratis ini saya tujukan untuk teman-teman yang ingin kenal komputer, ingin bisa mengetik dan print dokument, instal komputer atau service komputer. Adapun materi, lokasi dan waktu kursus sebagai berikut:

Lokasi Kursus

Lokasi kursus komputer gratis berada dirumah saya sendiri (karena belum memiliki gedung), alamat Jl. Songgo Langit KM.2 Dk. Putat Rt 09/03 Desa Sumanding, Kec. Kembang, Kab. Jepara. Untuk lebih jelasnya bisa menghubungi admin melalui halaman kontak yang sudah tersedia.

Waktu

Saya adalah seorang blogger full time jadi memiliki banyak waktu untuk bersantai, adapaun waktu untuk sementara bebas bisa ditentukan kapan saja misalkan siang atau sore kalau malam bisa disesuaikan, yang terpenting sebelum kursus menghubungi admin terlebih dahulu.

Fasilitas

  1. Komputer : Jika teman-teman tidak memiliki komputer jangan kuwatir, karena sudah disediakan dirumah. Untuk sementara tersedia komputer 1 unit dan notebook 1 unit.
  2. Wifi : Gratis
  3. Minuman dan makanan jika ada.

Materi

  1. Program Office (word, exel, power point dll.)
  2. Pengoperasian komputer
  3. Pengenalan hardware dan software
  4. Instal komputer dan laptop (windows 7, 8 dan 10)
  5. Service komputer dan laptop (kerusakan komputer)
Demikian informasi tentang kursus komputer gratis di daerah Jepara, jika anda tertarik untuk mengikuti program ini, silahkan menghubungi admin melalui kontak yang sudah tersedia. Salam Sukses

Senin, 01 Januari 2018

Cara Membuat Privacy Policy untuk Google Adsense

Cara Membuat Laman Privacy Policy di Blog - Privacy policy adalah salah satu laman wajib untuk blogger, halaman ini bertujuan sebagai dokumen yang berkekuatan hukum seputar pengelolaan blog. 

Jika anda ingin bisnis online seperti Google Adsense, laman privacy policy harus dicantumkan di blog karena privacy policy merupakan syarat mutlak untuk daftar Google Adsense.

Membuat laman privacy policy bukanlah hal yang sulit, karena sudah tersedia tool generator yang bisa membuat privacy policy secara otomatis. Namun jika Anda ingin membuat privacy policy dengan bahasa Indonesia, akan saya sediakan tutorialnya dihalaman ini.

Cara Membuat Privacy Policy untuk Daftar Google Adsense

Untuk membuat privacy policy silahkan ikuti langkah-langkah berikut sampai selesai:
  1. Silahkan terlebih dahulu buka situsnya disini http://www.privacypolicyonline.com/
  2. Kemudian masukkan informasi yang diperlukan, seperti nama blog, URL, URL kontak dan alamat email. Lalu pada bagian Advertisers on your site silahkan centang "Google Adsense", selanjutnya klik tombol "Generator Policy"
    Cara Membuat Privacy Policy untuk Daftar Google Adsense
  3. Maka akan muncul halaman privacy policy yang sudah anda buat tadi, Silahkan scrool kebawah maka ada tombol "Generat HTML for this page" silahkan klik tombol tersebut untuk semua text yang sudah tersedia untuk di copy ke blog.
    membuat laman privacy policy di blog
  4. Untuk memasang di blog, buka menu "Halaman" lalu pilih "Halaman Baru". Beri judul Privacy Policy kemudian pilih mode HTML dan paste privacy policy yang sudah anda buat tadi. Kalau sudah silahkan di publikasikan.
    cara membuat laman privacy policy di blog
  5. Selesai dan lihat hasilnya.

Membuat Privacy Policy Bahasa Indonesia

Jika anda ingin membuat privacy policy bahasa Indonesia juga bisa, silahkan ikuti langkah-langkahnya berikut:

- Silahkan login akun blogger anda
- Buka menu "Halaman" lalu pilih "Halaman Baru".
- Silahkan beri judul Privacy Policy lalu copy dan paste text berikut ini pada halam tersebut.

Privacy Policy

http://www.bloggerjepara.net/ memperlakukan privasi Anda dengan sangat serius. Kebijakan privasi (privacy policy) ini menggambarkan informasi pribadi yang kami kumpulkan dan bagaimana kami menggunakannya. Lihat kebijakan privasi pokok ini untuk mempelajari lebih lanjut tentang kebijakan privasi seperti pada umumnya.

Koleksi Informasi Rutin
Semua server web melacak informasi dasar tentang pengunjung. Informasi ini mencakup, namun tidak terbatas pada, alamat IP, browser, waktu dan merujuk halaman. Tak satu pun dari informasi ini secara pribadi bisa mengidentifikasi pengunjung spesifik ke situs ini. Informasi yang dilacak untuk administrasi rutin dan tujuan perawatan.

Kuki dan Peramban Web
Jika diperlukan, http://www.bloggerjepara.net/ menggunakan kuki untuk menyimpan informasi tentang preferensi pengunjung dan riwayat dalam rangka untuk lebih melayani pengunjung dan / atau menyajikan pengunjung dengan materi yang disesuaikan.

Iklan pihak ketiga dan mitra lainnya juga dapat menggunakan kuki, skrip dan / atau peramban web untuk melacak pengunjung ke situs kami untuk menampilkan iklan dan informasi berguna lainnya. Pelacakan tersebut dilakukan langsung oleh pihak ketiga melalui server mereka sendiri dan tunduk pada kebijakan privasi mereka sendiri.

Mengontrol Privasi Anda
Perhatikan bahwa Anda dapat mengubah pengaturan browser Anda untuk menonaktifkan kuki jika Anda memiliki masalah privasi. Menonaktifkan kuki untuk semua situs tidak dianjurkan karena dapat mengganggu penggunaan beberapa situs. Pilihan terbaik adalah dengan menonaktifkan atau mengaktifkan kuki pada basis per-situs. Konsultasikan dokumentasi browser Anda untuk instruksi bagaimana cara memblokir kuki dan mekanisme pelacakan lainnya.

Catatan Khusus Tentang Periklanan Google
Setiap iklan yang disajikan oleh Google, Inc, dan perusahaan afiliasi dapat dikendalikan menggunakan kuki. Kuki ini memungkinkan Google untuk menampilkan iklan berdasarkan kunjungan Anda ke situs ini dan situs lainnya yang menggunakan layanan iklan Google. Pelajari cara untuk memilih keluar dari penggunaan kuki Google. Sebagaimana disebutkan di atas, setiap pelacakan dilakukan oleh Google melalui kuki dan mekanisme lain yang tunduk pada kebijakan privasi Google sendiri.

Informasi Kontak
Jika Anda memiliki pertanyaan tentang kebijakan privasi http://www.bloggerjepara.net/ maka Anda dapat menghubungi kami melalui Contact.

Keterangan: 
Silahkan ganti http://www.bloggerjepara.net/ dengan URL blog kamu. Lalu jangan lupa ganti link "Contact" blog kamu pada tulisan Contact paling akhir pada tulisan diatas. Jika sudah selesai langkah terakhir publikasikan.

Baca Juga: Cara Membuat Disclaimer Untuk Blog Adsense

Demikian 2 cara membuat privacy policy di blog, semoga daftar Google Adsense lancar dan cepat diterima. Selamat mencoba, jika ada kendala silahkan menghubungi melalui kolom komentar atau melalui halaman kontak yang sudah tersedia.