Widget HTML Atas

Hexo Indigo - Hexo Indigo Template for Blogger


Hexo Indigo - Hexo Indigo Template for Blogger

Hexo Indigo - Hexo Indigo Template for Blogger
Hexo Indigo Template for Blogger
Hexo Indigo Template for Blogger

Tentang Template

Template Hexo Indigo ini adalah template yang sangat disukai karena tampilannya, awalnya template ini adalah tema untuk platform hexo, tapi karena desainernya suka dengan tampilannya maka di convertlah ke versi blogger/ Platform Blogspot, dan jadilah template ini.

Template ini tidak telalu banyak fiturnya karena tampilannya yang sederhana, seperti tidak ada sidebar, tapi disini desainernya sudah mengoptimalkan untuk penempatan iklannya yang ada di bagian index maupun post.

Fitur



Fitur Keterangan
Responsive Tampilan mengikuti ukuran layar browser
Valid Schema.org Navigasi, BlogPosting, Search, Breadcrumb
Pengaturan Melalui Tata Letak Avatar, Social Icon, Menu Navigasi
Menu Navigasi Berdasarkan Label, Page
Share Button Tampilan index dan post berbeda
Related Post Berdasarkan Label, Tidak terjadi Duplikat
Komentar Blogger Tampilan Komentar bawaan blogger
Widget Iklan Index Loop Post, Post Bagian Atas, Tengah, Bawah. Penempatan kode iklan bisa langsung di tata letak
Safelink Page Bisa dibuat safelink pada halaman page beserta auto linknya (tanpa fitur enkripsi manual)

Instalasi

Sebelum menggunakan template ini sebaiknya backup template terlebih dahulu
  1. Buka blogger.com
  2. Masuk ke blogger
  3. setelah berada di dashboard lalu menuju menu Tema
  4. Kemudian Klik tombol edit HTML
  5. Setelah itu hapus semua kode yang ada di editor tersebut
  6. Buka template yang sudah didownload dan buka menggunakan notepad
  7. Lalu copy semua kode template yang sebelumnya telah di download
  8. Kemudian Pastekan di editor template tersebut
  9. Setelah itu klik tombol simpan tema
Jika saat menyimpan template mengalami error, silahkan ubah template anda ke template bawaan blogger terlebih dahulu yang terbaru, setelah itu ulangi lagi cara diatas

Pengaturan Tata Letak


Nama Widget Keterangan
Avatar URL Widget untuk mengubah avatar atau gambar profil yang ada di bagian navigasi sidebar
Social Icon widget untuk mengubah social icon yang ada di bagian navigasi sidebar
Navigation Post [Vertical] & Navigation Label [Vertical], Navigation Label [Horizontal] widget untuk pengaturan menu navigasi secara otomatis berdasarkan label maupun page
Free HTML widget kosong siapa tau terpakai
Redirect Link JS ini adalah script auto safelink, anda bisa mengarahkannya ke halaman page
Navigation Pages [Footer] widget untuk pengaturan menu navigasi secara otomatis berdasarkan label maupun page
Adblock Plugin widget untuk blokir plugin adblock
Count View widget untuk melihat jumlah pengujung dan jumlah halaman


Script Contact Form Static Page

  1. Masuk Ke Blogger.com
  2. Pilih Page-New Page
  3. Pastekan Kode Script di bawah Menggunakan Mode Html 
  4. Kemudian Publishkan
<style type="text/css">
#breadcrumbs{display:none}
p{margin:0px;}.alert {border-radius:1px;}
span.nametag{text-align: left; display: block;}
.contact-form-error-message-with-border{margin-top:20px;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem;background-color:#fcf8e3;border-color:#faf2cc;color:#8a6d3b}
.contact-form-success-message-with-border{margin-top:20px;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem;background-color:#dff0d8;border-color:#d0e9c6;color:#3c763d}
.contact-form-error-message-with-border img,.contact-form-success-message-with-border img {float:right;margin-top:7px;}
.contact-form-error-message-with-border,.contact-form-success-message-with-border{margin-top:20px;}
.contact-form-name, .contact-form-email {width: 100%;max-width: 800px!important;margin-bottom: 20px;border: 1px solid #ddd;padding: 10px;}
.contact-form-email-message{width: 100%;max-width: 800px!important;margin-bottom: 20px;border: 1px solid #ddd;padding: 10px;}
.contact-form-button{-webkit-border-radius:2px;-moz-border-radius:2px;-webkit-transition:all .218s;-moz-transition:all .218s;-o-transition:all .218s;-webkit-user-select:none;-moz-user-select:none;background-color:#f5f5f5;background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-moz-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-ms-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-o-linear-gradient(top,#f5f5f5,#f1f1f1);background-image:linear-gradient(top,#f5f5f5,#f1f1f1);border:1px solid #dcdcdc;border:1px solid rgba(0,0,0,.1);border-radius:2px;color:#444;cursor:default;display:inline-block;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#f5f5f5&#39;,EndColorStr=&#39;#f1f1f1&#39;);font-size:11px;font-weight:bold;height:24px;line-height:24px;margin-left:0;min-width:54px;*min-width:70px;padding:0 8px;text-align:center;transition:all .218s}.contact-form-button:hover,.contact-form-button.hover{-moz-box-shadow:0 1px 1px rgba(0,0,0,.1);-moz-transition:all 0;-o-transition:all 0;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);-webkit-transition:all 0;background-color:#f8f8f8;background-image:-webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));background-image:-webkit-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-moz-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-ms-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:-o-linear-gradient(top,#f8f8f8,#f1f1f1);background-image:linear-gradient(top,#f8f8f8,#f1f1f1);border:1px solid #c6c6c6;box-shadow:0 1px 1px rgba(0,0,0,.1);color:#222;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#f8f8f8&#39;,EndColorStr=&#39;#f1f1f1&#39;);transition:all 0}.contact-form-button.focus,.contact-form-button.right.focus,.contact-form-button.mid.focus,.contact-form-button.left.focus{border:1px solid #4d90fe;outline:none;z-index:4 !important}.contact-form-button-submit:focus,.contact-form-button-submit.focus{-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.contact-form-button-submit:focus,.contact-form-button-submit.focus{border-color:#404040}.contact-form-button-submit:focus:hover,.contact-form-button-submit.focus:hover{-moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1)}.contact-form-button-submit{background-color:#666;background-image:-webkit-gradient(linear,left top,left bottom,from(#777),to(#555));background-image:-webkit-linear-gradient(top,#777,#555);background-image:-moz-linear-gradient(top,#777,#555);background-image:-ms-linear-gradient(top,#777,#555);background-image:-o-linear-gradient(top,#777,#555);background-image:linear-gradient(top,#777,#555);border:1px solid #505050;color:#fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#777777&#39;,EndColorStr=&#39;#555555&#39;)}.contact-form-button-submit:hover{background-color:#555;background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#444));background-image:-webkit-linear-gradient(top,#666,#444);background-image:-moz-linear-gradient(top,#666,#444);background-image:-ms-linear-gradient(top,#666,#444);background-image:-o-linear-gradient(top,#666,#444);background-image:linear-gradient(top,#666,#444);border:1px solid #404040;color:#fff;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#666666&#39;,EndColorStr=&#39;#444444&#39;)}.contact-form-button-submit:active,.contact-form-button-submit:focus:active,.contact-form-button-submit.focus:active{-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}.contact-form-button-submit{background-color:#4d90fe;background-image:-webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));background-image:-webkit-linear-gradient(top,#4d90fe,#4787ed);background-image:-moz-linear-gradient(top,#4d90fe,#4787ed);background-image:-ms-linear-gradient(top,#4d90fe,#4787ed);background-image:-o-linear-gradient(top,#4d90fe,#4787ed);background-image:linear-gradient(top,#4d90fe,#4787ed);border-color:#3079ed;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#4d90fe&#39;,EndColorStr=&#39;#4787ed&#39;)}.contact-form-button-submit:hover{background-color:#357ae8;background-image:-webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));background-image:-webkit-linear-gradient(top,#4d90fe,#357ae8);background-image:-moz-linear-gradient(top,#4d90fe,#357ae8);background-image:-ms-linear-gradient(top,#4d90fe,#357ae8);background-image:-o-linear-gradient(top,#4d90fe,#357ae8);background-image:linear-gradient(top,#4d90fe,#357ae8);border-color:#2f5bb7;filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#4d90fe&#39;,EndColorStr=&#39;#357ae8&#39;)}.contact-form-button.disabled,.contact-form-button.disabled:hover,.contact-form-button.disabled:active{background:none;border:1px solid #f3f3f3;border:1px solid rgba(0,0,0,.05);color:#b8b8b8;cursor:default;pointer-events:none}.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=50)&quot;;background-color:#666;border:1px solid #505050;color:#fff;filter:alpha(opacity=50);opacity:.5}.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{background-color:#4d90fe;border-color:#3079ed}</style>

Hasil nya lihat gambar di bawah ini Script Contact Form Static Page
Hexo Indigo - Hexo Indigo Template for Blogger

Change Log


Versi Tanggal Update Keterangan
v1.0 - Rilis Kode
v1.1 21 Juli 2019 Perbaikan Related Post
Penambahan Widget LinkList di Navigasi
Perbaikan Tampilan Halaman
Pengoptimalan Kode
Thanks For Sharing To

Alias Keterangan
yscoder Untuk Source Kode yang sangat bagus


Berikut  Hexo Indigo Template for Blogger semoga suka dengan tampilan nya yang responsive ini

No comments for "Hexo Indigo - Hexo Indigo Template for Blogger"