Hexo Indigo - 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
| 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
- Buka blogger.com
- Masuk ke blogger
- setelah berada di dashboard lalu menuju menu Tema
- Kemudian Klik tombol edit HTML
- Setelah itu hapus semua kode yang ada di editor tersebut
- Buka template yang sudah didownload dan buka menggunakan notepad
- Lalu copy semua kode template yang sebelumnya telah di download
- Kemudian Pastekan di editor template tersebut
- 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
| 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
- Masuk Ke Blogger.com
- Pilih Page-New Page
- Pastekan Kode Script di bawah Menggunakan Mode Html
- 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='#f5f5f5',EndColorStr='#f1f1f1');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='#f8f8f8',EndColorStr='#f1f1f1');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='#777777',EndColorStr='#555555')}.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='#666666',EndColorStr='#444444')}.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='#4d90fe',EndColorStr='#4787ed')}.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='#4d90fe',EndColorStr='#357ae8')}.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:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";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
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
| yscoder |
Untuk Source Kode yang sangat bagus |
Berikut
Hexo Indigo Template for Blogger semoga suka dengan tampilan nya yang responsive ini
Posting Komentar untuk "Hexo Indigo - Hexo Indigo Template for Blogger | Blogger Theme"