Share
Home » » Cara Membuat Archive/Sitemap Blog yang Responsive

Cara Membuat Archive/Sitemap Blog yang Responsive

Written By Yuga irgi on Kamis, 01 Agustus 2013 | 07.22

 

Cara Membuat Responsive Archive/Sitemap for Blogger di halaman statis

  1. Login Blogger.com > Laman/Pages
  2. Laman Baru/New Page > Blank Page/Laman Kosong
  3. Masukkan judul yang sesuai, contoh: Daftar Artikel, Daftar Posting, Archive Blog, dll.
  4. Tulis kata pengantar yang sesuai (boleh tidak diberikan).
  5. Masuk ke dalam tab “HTML” yang beradap di samping kiri icon “Undo”
  6. Masukkan kode di bawah ini:
<script src="https://googledrive.com/host/0BwGpfL5YSUPlckNBdDFQYjZlXzg" type="text/javascript"></script>
<script src="http://capoenk-blog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #4d90fe; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } } 
</style>
    • Ganti kode yang berwarna merah dengan url blog anda.
    • Ganti kode yang berwarna biru dengan kode warna html agar tampilan sesuai dengan warna template sobat.
    7. Pada bagian “Options” pilih “Don't allow, hide existing”
    8. Klik “Publish” dan selesai. Cek halaman tersebut untuk melihat hasilnya.

0 komentar:

Posting Komentar