Membuat sitemap responsive style box dinamis

TutorialMixs - sobat blogger, sebelum aku beraktifitas kembali, aku mau sedikit share terkait bagaimana Cara Membuat Stemap Responsive Style Box Dinamis. Sitemap ini sebenarnya mempunyai fungsi yang sama dengan sitemap di luaran sana.. tapi ku rasa penampilan yang di tunjukkan ini jauh lebih dinamis serta responsivetable.. hmm mau liat, berikut image sitemap yang telah jadi

Cara membuat sitemap responsive style box yang mudah

Cara membuat sitemap responsive style box dinamis for blogger

atau jika mau liat demo aslinya silahkan kunjungi Link Demo di bawah

Source sumber Link Demo >> Web Source

nah berikut script yang bisa anda pasangkan pada html sobat..
silahkan masuk saja di halaman statis sobat dan klik New Page(bukan new post lho yahh..)

<script src="https://googledrive.com/host/0BynUyePIYUATTzJMS0dfRGtNQkU" type="text/javascript"></script>
<script src="http://tutorialmixs.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; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .50s ease-in-out; -moz-transition:all .50s ease-in-out; -o-transition:all .50s ease-in-out; transition:all .50s ease-in-out;text-decoration: none; }
.ct-columns-3 p a:hover { background: #fff; color: #555;text-decoration: underline; }
@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>

terakhir silahkan simpan saja dan lihat hasilnya. mudah bukan??
oke, semoga bermanfaat buat sobat dan selamat beraktifitas kembali
salam blogger