Membuat Sitemap Responsive with Label Ala Mas Yoga - Hallo sahabat iPLANET POST, Pada Artikel yang anda baca kali ini dengan judul Membuat Sitemap Responsive with Label Ala Mas Yoga, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Sitemap Responsive with Label Ala Mas Yoga
link : Membuat Sitemap Responsive with Label Ala Mas Yoga

Membuat Sitemap Responsive with Label Ala Mas Yoga

Hay sobat blogger,, jumpa lagi di blognya Mas Yoga.
Mas Yoga hari ini akan memberikan tutorial blogger tentang "Membuat sitemap responsive with label ala Mas Yoga". sebelumnya mas yoga sudah memberikan tutorial "cara membuat flat UI color ala Mas Yoga".
yang belum baca klik di sini sobat Cara Membuat Flat UI Color Ala Mas Yoga.
sobat tahu kan fungsinya Label? label merupakan sebuah widget yang dapat membuat post kita menjadi beberapa kategori, sehingga blog kita menjadi lebih rapi. pokoknya label sangat penting deh. bahkan dapat memudahkan untuk para pengunjung blogger.
Tahukah sitemap sobat?? ini merupakan alternatif dari Label.

Jadi tepat dengan Materi hari ini, yang Mas Yoga pelajari dari Idblanter.
Yuk kita lanjut ke tutorialnya,, di simak dengan baik-baik :)

1. Jangan lupa untuk login ke akun blogger sobat
2. Masuk ke dashboard akun blogger sobat
3. Pergi ke menu Laman,, lalu buatlah Laman baru
4. Pada Laman baru,, Ada pilihan mode compose dan mode HTML. di sini kita akan menggunakan mode yang HTML saja,, biar mudah :)

<style type='text/css' scoped='scoped'>#sidebar-wrapper{display:none!important}#main-wrapper{width:100%!important}#show-cat{float:left;margin:20px 5% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:18px;border:1px solid #ccc}#show-cat ul{margin:0;border-top:0 solid #ccc;padding:0}#show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:0 solid #ccc;border-left:0 solid #ccc;padding:0}#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid #ccc}#navi-cat a:hover{color:#fff!important}#show-cat ul li:last-child a{border-bottom:none}#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}#show-post{float:left;width:69%;line-height:1.6em}#show-post ul li{list-style-type:none;margin:10px 0 0 -40px;padding:10px;border:1px solid #ddd}#show-post a:hover{color:#07ACEC}#show-post a{color:#333;font-weight:bold}#navi-cat{padding:20px 0}#navi-cat a{margin-right:10px;border:1px solid #ccc}#navi-cat a,#navi-cat span{padding:10px 15px}#navi-cat span{float:right}#show-cat::-webkit-scrollbar{width:8px;height:8px}#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:2px}#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}#show-cat::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}} </style><div id='show-cat'></div><div id='show-post'><script type='text/javaScript'>var cat_home='http://blog-masyoga.blogspot.com/';cat_numb=11;cat_pre='Prev';cat_nex='Next'; var cat_name;var cat_start;var cat_class; function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+=' <li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+=' <li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>'); </script></div><div style='clear:both'></div>

Ket :
pada <script type='text/javaScript'>
var cat_home='http://blog-masyoga.blogspot.com/';cat_numb=11;cat_pre='Prev';cat_nex='Next';

ganti http://blog-masyoga.blogspot.com/ ganti dengan alamat blog sobat
cat_numb = 11,, jumlah postingan yang sobat inginkan

5. Jangan lupa untuk di simpan ya sobat,, setelah itu di cek. bagaimanakah tampilannya??? jika masih ragu klik demo-nya aja sobat

• Demo

wah bagaimana responsive bukan?? blog sobat jadi rapi dan keren deh.

Jika merasa ada kesalahan, tulis aja di kotak komentar, Mas Yoga mungkin bisa membantunya :)

Terima Kasih semoga bermanfaat

Demikianlah Artikel Membuat Sitemap Responsive with Label Ala Mas Yoga

Sekianlah artikel Membuat Sitemap Responsive with Label Ala Mas Yoga kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Sitemap Responsive with Label Ala Mas Yoga dengan alamat link https://iplanetpost.blogspot.com/2016/03/membuat-sitemap-responsive-with-label.html

Tweet