» » » » Solusi Menciptakan Recent Post By Label On Static Page For Blogger Amp Html
, ,

Solusi Menciptakan Recent Post By Label On Static Page For Blogger Amp Html


Solusi Membuat Recent Post by Label On Static Page Untuk Blog valid AMP HTML. Berawal ketika mencoba mengacak-acak template blog saya yang lain semoga dapat support AMP HTML sampe edit postingan satu persatu yang menciptakan puyeng isi kepala, dan merasa puas alasannya ketika ini blog tersebut sudah valid AMP HTML mulai dari homepage postpage hingga staticpage. Saat saya menciptakan sitemap / daftar isi blog amp versi kompiajaib.com, saya mulai berpikir bagaimana cara menciptakan recent post by label yang biasa disimpan dihalaman static untuk blog valid amp?

Recent post by label yang dipasang dihalaman static ini sebagai pengganti url label yang biasanya ada di hidangan blog. Untuk memasang eksklusif di blog amp tentu tidak dapat alasannya hukum amp html dilarang ada javascript kecuali javascript amp project, alasannya itulah kita dapat mengakalinya memakai github semoga kondusif dari error amp html.

Tutorial ini merupakan campuran dari postingan mas adhy suryadi, adalah perihal cara menciptakan sitemap blog amp dan recent post by label dihalaman static. Jika anda tertarik, silahkan ikuti yang mau lewat ini:

Langkah pertama
Silahkan saluran salah satu halaman static blog anda, kemudian page source / Ctrl+U kemudian copas semua kodenya di notepad.

Langkah kedua
Hapus semua arahan yang bekerjasama dengan blogger, ibarat arahan meta verifikasi search engine dan arahan Google Analytics blog dan lainnya.

Lalu edit arahan ini dengan judul halaman / sitemap blog anda
<title>Judul Halaman</title>

Rubah arahan berikut: 
<h2 class='post-title entry-title' itemprop='headline'> <a href='http://www.bloganda.com/p/blablabla.html' itemprop='url mainEntityOfPage' title='bla...bla...bla...'>bla...bla...bla...</a>
 </h2>

menjadi
<h2 class='post-title entry-title' itemprop='headline'> <a href='URL HOSTING DI GITHUB' itemprop='url mainEntityOfPage' title='Judul-Halaman'>Judul Halaman</a>
 </h2>

Untuk URL HOSTING DI GITHUB silahkan hapus hurus s pada URL cdn-nya menjadi HTTP ibarat ini;

http://cdn.rawgit.com/username/repository/master/sitemap.html

username: nama akun github anda
repository: nama folder hosting

Langkah ketiga
Silahkan simpan CSS di bawah ini di atas arahan </style>

#feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
 #feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
 #feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
 #feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500}
 #feed-container li a:hover{text-decoration:none;color:#E94141}
 #feed-container li .news-text{margin-top:5px;line-height:1.3em!important}
 #feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}
 #result-desc{margin:0;padding:0;}
 #result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}
 #result-desc div{color:inherit}
 #feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}
 #feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
 #feed-nav a,#feed-nav span:hover{color:#1B1B1B}
 #feed-nav a:active,#feed-nav a:hover{color:#555}
 #feed-nav span{cursor:wait}
 @media (max-width:600px){
 #table-outer table{margin:0 auto;width:100%}
 #feed-container,#table-outer{margin:0 auto}
 #feed-container li .inner{margin:5px auto;height:auto}
 #feedContainer li{float:none;display:block;width:auto;height:auto}
 #feed-container li .news-text,#feedContainer:after,#feed-container li img{display:none!important}
 }

Langkah Keempat
Silahkan cari arahan yang ibarat mirip di bawah ini

<div class='post-body entry-content' id='post-body-xxxxx' itemprop='articleBody'>
 ...................................
 ...................................
 ...................................
 <div class='clear'>
 </div>

Kemudian ganti titik-titik dengan arahan berikut; 

<header id="result-desc"></header>
 <ul id="feed-container"></ul>
 <div id="feed-nav"></div>
 <script type="text/javaScript">
 var label="LabelBlogAnda";
 </script> 
 <script type='text/javascript'> 
 //<![CDATA[
 document.write;var loadToc,loadCategories,_toc={init:function(){var e={homePage:"URL-BlogAnda",maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",loading:"<span>Memuat...</span>"},t=(window,document),n=function(e){return t.getElementById(e)},a={e:n("result-desc"),f:n("feed-container"),g:n("feed-nav"),h:t.getElementsByTagName("head")[0],i:0,j:null,k:"published",l:0,m:""},l={a:function(){old=n("temporer-script"),old.parentNode.removeChild(old)},b:function(e){var i=t.createElement("script");i.type="text/javascript",i.id="temporer-script",i.src=e,n("temporer-script")&&l.a(),a.h.appendChild(i)},c:function(t,n,i){a.i++,a.e.innerHTML=e.counting,a.g.innerHTML=e[1==t?"searching":"loading"],0===t?l.b(null!==n?e.homePage+"/feeds/posts/summary/-/"+n+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc":e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc"):1==t&&l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&q="+n+"&orderby="+i+"&callback=loadToc"),a.j=null!==n?n:null,a.l=t,a.a.disabled=!0,a.b.children[0].disabled=!0},d:function(n){var i;if(a.g.innerHTML="",a.e.innerHTML="<div>Total: "+n.feed.openSearch$totalResults.$t+" Posts</div>","entry"in n.feed){for(var r,s,o,d,c=n.feed.entry,u="0 Komentar",m=0;m<e.maxResults&&m!=c.length;m++){r=c[m].title.$t,o="summary"in c[m]?c[m].summary.$t.replace(/<br ?\/?>/gi," ").replace(/<(.*?)>/g,"").replace(/<iframe/gi,"").substring(0,e.numChars):"",d="media$thumbnail"in c[m]?c[m].media$thumbnail.url.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth):e.noImage.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth);for(var h=0,b=c[m].link.length;b>h;h++)s="alternate"==c[m].link[h].rel?c[m].link[h].href:"#";for(var p=0,g=c[m].link.length;g>p;p++)if("replies"==c[m].link[p].rel&&"text/html"==c[m].link[p].type){u=c[m].link[p].title;break}i=t.createElement("li"),i.innerHTML='<div class="inner"><img style="width:'+e.thumbWidth+"px;height:"+e.thumbHeight+'px;" src="'+d+'" alt="'+r+'"><a class="toc-title" href="'+s+'" target="_blank" title="'+r+'">'+r+'</a><div class="news-text">'+o+'&hellip;<br style="clear:both;"></div></div>',a.f.appendChild(i)}i=t.createElement("a"),i.href="#load-more",i.innerHTML=e.navText,i.onclick=function(){return l.c(a.l,a.j,a.k),!1}}else i=t.createElement("a"),i.href="#reset-content",i.innerHTML=e.resetToc,i.onclick=function(){return a.i=-1,a.e.innerHTML=e.counting,a.f.innerHTML="",l.c(0,null,"published"),a.a.innerHTML=a.a.innerHTML,a.b.children[0].innerHTML=a.b.children[0].innerHTML,!1};a.g.appendChild(i),a.a.disabled=!1,a.b.children[0].disabled=!1}};loadToc=l.d,loadCategories=l.e,l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i+1)+"&max-results="+e.maxResults+"&orderby=published&callback=loadToc"),l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories"),a.a.onchange=function(){a.i=-1,a.f.innerHTML="",a.g.innerHTML=e.counting,a.b.children[0].innerHTML=a.b.children[0].innerHTML,l.c(0,null,this.value),a.k=this.value},a.c.onsubmit=function(){return a.i=-1,a.f.innerHTML="",a.m=a.d.value,l.c(1,a.d.value,a.k),!1}}};_toc.init();
 //]]> 
 </script>

Ganti yang ditandai sesuka hati

Langkah Kelima
Silahkan simpan file yang sudah dirubah tadi dengan extensi *.html ibarat teladan label.html kemudian silahkan hosting di Github kemudian copy URL Rawgit dan hapus hurup s dari HTTPS://cdn.rawgit.com/.... menjadi HTTP://cdn.rawgit.com/....

Selesai untuk menciptakan halaman recent post blog AMP untuk tampilan desktop.

Silahkan simpan URL ibarat di atas pada hidangan untuk tampilan desktop.

Nah tampilan blog anda tidak sama antara dektop dan mobile, maka harus menciptakan halaman untuk tampilan mobile juga dengan cara yang sama dengan langkah pertama diatas, adalah mengakses halaman static blog anda dengan menambahkan ?m=1 pada tamat URL nya, kemudian Ctrl+U / page scource. Dan untuk langkah selanjutnya sama dengan diatas. Lalu simpan URL nya pada hidangan untuk tampilan mobile. Biasanya hidangan untuk tampilan mobile akan ditampilkan dengan amp-sidebar.

Selesai semua untuk menciptakan recent post by label blog AMP untuk tampilan mobile dan dekstop, sebagai teladan recent post untuk mobile dan dekstop ibarat berikut;

Dekstop: http://cdn.rawgit.com/NomIfrod/html/master/labelanak.html
Mobile: http://cdn.rawgit.com/NomIfrod/html/master/labelanak-hp.html

Cukup gampang bukan? sekian dari saya perihal tips solusi menciptakan recent post by label untuk halaman static blo AMP HTML. Selamat mencoba...

https://mataseluruhdunia1010.blogspot.com//search?q=membuat-sitemap-blog-untuk-blogger-amp
https://mataseluruhdunia1010.blogspot.com//search?q=membuat-sitemap-blog-untuk-blogger-amp
Buat lebih berguna, kongsi: