Dewa Blogger: Hasil penelusuran untuk recent-post-widget-dengan-navigasi

Halaman

    Social Items

Home / Hasil penelusuran untuk recent-post-widget-dengan-navigasi
Cara Memasang Recent Post Widget di Blog Cara Memasang Recent Post Widget di Blog

Cara Memasang Recent Post Widget di Blog - Kali ini akan membuatkan sebuah widget yang mungkin sudah tidak abnormal lagi buat teman blogger.

Widget ini masih mempunyai fungsi yang sama dengan recent post widget dengan navigasi yang pernah Saya bagikan sebelumnya, ialah untuk memunculkan feed dari postingan terbaru di blog kita. Hanya bedanya widget ini tidak menampilkan thumbnail post dan tampilannya pun cukup sederhana, yang menciptakan widget ini ringan dan proses memuat halaman blog pun lebih cepat.

Baca juga : Recent Post Widget dengan Navigasi


Berikut langkah pemasangan widget ini pada blog :

1. Buka Blogger > Tata Letak > Tambahkan widget gres lalu salin dan simpan semua arahan di bawah ini di dalamnya

<style scoped='' type="text/css"> ul#recent-posts{list-style:none;margin:0;padding:0}li.recent-posts{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;} li.recent-posts:last-child{border-bottom:0;} li.recent-posts a{color:#444;}li.recent-posts a:hover{color:#444;text-decoration:underline} </style> <ul id="recent-posts"></ul> <script> //<![CDATA[ var homePage = "http://www.URL_BLOG_ANDA.com", numPosts = 5; function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="Cara Memasang Recent Post Widget di Blog" target="_blank" rel="nofollow">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp); //]]> </script>

Catatan : Ganti arahan yang ditandai dengan URL blog teman dan jumlah post yang akan ditampilkan.

2. Simpan widget dan lihat hasilnya.



Sekian mengenai Cara Memasang Recent Post Widget di Blog, agar bermanfaat.

Cara Memasang Recent Post Widget Di Blog

Bagi teman yang kesulitan memunculkan recent post pada template Revoltify dan Minima Colo Recent Post Widget dengan Navigasi

Recent Post Widget dengan Navigasi - Bagi teman yang kesulitan memunculkan recent post pada template Revoltify dan Minima Colored, mungkin widget yang satu ini dapat menjadi alternatif lain untuk memunculkan feed dari postingan terbaru blog sobat.

Cara penerapannya pun cukup mudah, teman hanya perlu menambahkan instruksi yang akan Saya bagikan ini ke dalam widget baru.

1. Login ke Blogger > Tata Letak > Klik Tambahkan Gadget > Kemudian salin semua instruksi di bawah ini ke dalam widget gres tadi.

Bagi teman yang kesulitan memunculkan recent post pada template Revoltify dan Minima Colo Recent Post Widget dengan Navigasi

<style scoped='' type='text/css'> /* Recent Post Navigasi */ #recentpostnav{border:1px solid #585858;width:100%;margin:0 auto} #recentpostsae{margin:0} .recentpostel{background:#fff;display:block;border:1px solid #ddd;margin:5px 0;padding:10px;height:79px} .recentpostel img{background:#fff;padding:4px;float:left;height:70px;margin-right:8px;width:70px;border:1px solid #ddd} .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#111} .recentpostel:hover{background-color:#fefefe} .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0} #recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgkQnyAruOcMQ-Yk_wCw5mmrhvSM1Uz4MUb65oLT1qbp3epzh3cYfdykyz4zqZzPuvvrJZNuZvFvfH8BQtWsIXAWClbFsGYT3gjY3ecVjnYRMoDME3E6-NP0-Z5qqAoi-H5FrMbBjlKaAe/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd} #recentpostnavfeed{border:1px solid #ddd;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0} #recentpostnavfeed:hover{background-color:#fefefe} #recentpostnavfeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px} #recentpostnavfeed span{padding:5px 10px} #recentpostnavfeed .next{float:right} #recentpostnavfeed .previous{float:left} #recentpostnavfeed .home{text-align:center} #recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important} </style> <script type='text/javascript'> //<![CDATA[     var numfeed = 5;     var startfeed = 0;     var urlblog = "http://viennatheme.blogspot.com";     var charac = 40;     var urlprevious, urlnext; function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPI3OC_4sleyCAFwKyUyEP58ItJEURV-gE_SiKE5ib0ksaIbf_FAv3BbN1R81-hP8GN6nhcQJ3ntvtfMVdyjUoDhixxkNVRpVYIlXtJAozBV4Ts55iIwjp080qg2JgYaf0AIFvMjqibG1C/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)}; //]]> </script> <div id="recentpostsae"></div> <div id="recentpostnavfeed"></div>

2. Ganti instruksi yang ditandai, klik Simpan.


Keterangan :

  • var numfeed : Jumlah postingan yang ditampilkan.
  • var urlblog   : Isi dengan alamat blog sobat.
  • var charac    : jumlah maksimal summary post yang ditampilkan.

Selamat mencoba dan supaya bermanfaat.

Recent Post Widget Dengan Navigasi

Recent Post dan Recent Comment pada Drop Down Menu Recent Post dan Recent Comment pada Drop Down Menu
Widget Blogger pada Menu Navigasi

Seringkali Saya melihat beberapa orang mencoba menuliskan semua kategori posting pada drop down menu. Mereka melakukannya secara manual. Saya pikir, seandainya Saya dapat memakai JSON untuk ini, maka mereka tidak perlu lagi repot-repot memperbaharui hidangan setiap kali label gres ditambahkan.

Tapi sesudah Saya coba ternyata karenanya proses muat halaman menjadi sangat lambat. Makara Saya mencoba memakai alternatif menarik lainnya, yaitu widget recent post dan recent comment yang Saya letakkan pada menu-menu sekunder. Kita tahu bahwa kebanyakan widget semacam ini dibangun oleh elemen-elemen daftar, oleh alasannya yaitu itulah kita dapat menaruhnya dengan sangat pas ke dalam hidangan (yang juga dibangun oleh elemen-elemen daftar).

Masih sama. Halaman menjadi sedikit lebih lambat. Ya, itu terjadi alasannya yaitu widget-widget ini harus memanggil feed posting untuk menampilkan isi widget tersebut. Terlebih lagi, hidangan navigasi secara umum diletakan di bab atas, sehingga kalau proses pemuatan hidangan navigasi lebih lambat dari biasanya, maka peramban akan terlambat pula ketika membaca elemen-elemen di bawahnya, alasannya yaitu peramban membaca menyerupai manusia, dari kiri atas menuju ke kanan bawah (Kesimpulan: Proses muat halaman menjadi lambat).

Solusi Saya yaitu dengan cara meletakkan hidangan navigasi ini pada bab paling bawah, tepatnya di atas </body> sehingga kita harap widget ini akan memulai proses pemuatan posting ketika elemen-elemen di atasnya sudah cukup siap. Dan untuk mengangkat hidangan navigasi yang berada di bawah menuju ke atas, Saya memakai posisi absolute dengan nilai top sebesar 0:

Lihat Demo

Masuklah ke hidangan Template lalu klik Edit HTML dan klik Lanjutkan:

Recent Post dan Recent Comment pada Drop Down Menu Recent Post dan Recent Comment pada Drop Down Menu
Mengedit HTML

Temukan isyarat ini:

</head>

Salin isyarat ini dan letakkan di atasnya:

<style> #autonav {   position:absolute;   top:0;   right:0;   left:0;   z-index:9999;   margin:0;   padding:0;   font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;   color:white;   border-bottom:2px solid #333;   -webkit-box-shadow:0 1px 7px rgba(0,0,0,.4);   -moz-box-shadow:0 1px 7px rgba(0,0,0,.4);   box-shadow:0 1px 7px rgba(0,0,0,.4); }  #autonav ul {   margin:0;   padding:0;   height:30px;   background-color:#0F5079; }  #autonav ul li {   list-style:none;   display:inline;   float:left;   margin:0;   padding:0;   position:relative; }  #autonav ul li a {   display:block;   line-height:30px;   height:30px;   overflow:hidden;   margin:0;   padding:0 15px;   border-left:1px solid #155F90;   border-right:1px solid #082E46;   text-decoration:none;   text-shadow:0 -1px 0 rgba(0,0,0,.4);   color:white;   font-weight:bold; }  #autonav ul li a:hover, #autonav ul li:hover > a {   background-color:#0F486C;   border-right-color:#082434; }  #autonav ul ul {   position:absolute;   width:220px;   height:auto;   top:100%;   left:0;   z-index:9999;   background-color:#111;   -webkit-box-shadow:0 1px 3px rgba(0,0,0,.7);   -moz-box-shadow:0 1px 3px rgba(0,0,0,.7);   box-shadow:0 1px 3px rgba(0,0,0,.7);   overflow:visible !important;   display:none; }  #autonav ul ul:before {   content:"";   width:0;   height:0;   border:7px solid transparent;   border-bottom-color:#111;   position:absolute;   top:-14px;   left:24px; }  #autonav ul ul li {   display:block;   float:none; }  #autonav ul ul li a {   border:none;   color:#999; }  #autonav ul ul ul {   top:0;   left:100%; }  #autonav li:hover > ul {display:block}  /* Khusus JSON */ #autonav ul.json-dropdown {overflow:hidden}  #autonav ul.json-dropdown li {   cursor:pointer;   display:block;   padding:7px 10px;   margin:0;   overflow:hidden; }  #autonav ul.json-dropdown li a {   line-height:14px;   height:auto !important;   padding:0; }  #autonav ul.json-dropdown li a:hover {   text-decoration:underline;   background:transparent; }  #autonav li ul li a:hover, #autonav li ul.json-dropdown li:hover {background-color:#000}  #autonav ul.json-dropdown img.rp-thumb {   padding:0;   outline:none;   border:2px solid #333;   background-color:#02406C;   display:block;   float:left;   margin:0 10px 0 0;   width:40px;   height:40px; }  #autonav .subposts span, #autonav .subcomments span {   font-family:Verdana,Tahoma,Helmet,Freesans,Sans-Serif;   color:#666;   font-size:9px; }  /* Drop down hidangan untuk ukuran yang cukup lebar */ #autonav .wide {width:400px} </style> <script> //<![CDATA[ var numpost = 7,     numcomment = 7,     cmtext = "Komentar",     cmsumm = 100,     pBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC"; //]]> </script> <script src='http://dte-project.googlecode.com/svn/trunk/json-dropdown.js'></script>

Setelah itu temukan isyarat ini:

</body>

Salin kerangka hidangan ini dan letakkan di atasnya:

<nav id='autonav'>   <ul>     <li><a href='/'>Beranda</a></li>     <li><a href='#'>Profil</a></li>     <li><a href='#'>Terbaru</a>       <ul class='json-dropdown subposts wide'>         <script src='http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;callback=dropdownposts'></script>       </ul>     </li>     <li><a href='#'>Komentar Terakhir</a>       <ul class='json-dropdown subcomments'>         <script src='http://nama_blog.blogspot.com/feeds/comments/summary?alt=json-in-script&amp;callback=dropdowncomments'></script>       </ul>     </li>     <li><a href='#'>Kontak</a>       <ul>         <li><a href='#'>Lorem Ipsum</a></li>         <li><a href='#'>Dolor Sit Amet</a></li>       </ul>     </li>   </ul> </nav>
  • Tentukan jumlah posting hidangan recent post pada variabel numpost
  • Tentukan jumlah posting recent comment pada variabel numcomment
  • Tentukan label komentar pada variabel cmtext (misal: 17 Komentar)
  • pBlank dipakai untuk menampilkan gambar cadangan pada recent post yang tidak mempunyai gambar mini
  • Tentukan jumah ringkasan komentar pada variabel cmsumm
  • Ganti URL yang Saya beri tanda dengan URL blogmu.

Sumber https://www.dte.web.id/

Recent Post Dan Recent Comment Pada Drop Down Menu

Kali ini akan menawarkan widget Recent Post by Label yang dapat teman pasang di halaman statis blog sobat. Widget ini merupakan hasil modifikasi dari widget recent post yang pernah saya publish pada postingan Recent Post Widget dengan Navigasi. Widget ini berfungsi untuk menampilkan daftar artikel terbaru menurut label.

yang dapat teman pasang di halaman statis blog teman Cara Memasang Recent Post by Label di Halaman Statis

Widget ini dapat kita manfaatkan sebagai Sitemap atau daftar isi blog di halaman statis. Bagi yang ingin memasangnya, silakan ikuti langkah-langkah berikut ini.

Cara Memasang Recent Post by Label di Halaman Statis


Kode yang akan saya bagikan ini memakai ikon dari Fontawesome, jikalau belum ditambahkan. Tambahkan instruksi di bawah ini sebelum </head> pada Template editor.

<script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>

Setelah menambahkan instruksi Fontawesome selanjutnya ikuti langkah di bawah ini

Buka halaman Blogger > Klik hidangan Halaman > Kemudian klik tombol Halaman baru untuk menciptakan postingan gres di halaman statis

yang dapat teman pasang di halaman statis blog teman Cara Memasang Recent Post by Label di Halaman Statis

Tambahkan instruksi di bawah ini di dalam tab HTML postingan

yang dapat teman pasang di halaman statis blog teman Cara Memasang Recent Post by Label di Halaman Statis

<div id="recentpostsae"> </div> <div id="recentpostnavfeed"> </div> <style scoped="" type="text/css"> *{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box} a,a:link,a:visited{text-decoration:none;transition:all .3s} button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff} #recentpostnav{border:1px solid #585858;width:100%;margin:0 auto} #recentpostsae{margin:0} #recentpostsae .recentpostel{width:48.9%;background:#fff;display:inline-block;margin:0 20px 10px 0;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0} #recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px} #recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000} #recentpostsae .recentpostel:hover{background-color:#fefefe} #recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0} #recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeepmvKyXPUGzjWuIxc4CEiML-tmoA-uwpq7WmQM63yEsRtPQBtrtnLTss8SBNisQ4fkGPt57AaSRJpN3chGmN4fOvZ34flfgfRKy-hEYdivESIorECIG6gQx9bS3dNUZaA0nqSjmbV5dA/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px} #recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto} #recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px} #recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s} #recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #recentpostnavfeed .next{float:right;margin:0 0 0 10px} #recentpostnavfeed .previous{float:left;margin:0 10px 0 0} #recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)} #recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc} #recentpostnavfeed i{font-family:fontawesome;font-style:normal} #recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)} @media screen and (max-width:993px){#recentpostsae .recentpostel{width:100%;margin:0 0 10px 0}} </style> <script type='text/javascript'> //<![CDATA[ var numfeed = 18; var startfeed = 0; var urlblog = "https://www.teknomatch.com"; var charac = 0; var urlprevious, urlnext; function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPI3OC_4sleyCAFwKyUyEP58ItJEURV-gE_SiKE5ib0ksaIbf_FAv3BbN1R81-hP8GN6nhcQJ3ntvtfMVdyjUoDhixxkNVRpVYIlXtJAozBV4Ts55iIwjp080qg2JgYaf0AIFvMjqibG1C/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default/-/Smartphone"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)}; //]]> </script>

Edit terlebih dahulu pada instruksi yang ditandai

NilaiKeterangan
var numfeed18 (Jumlah postingan yang ditampilkan di tiap halaman)
var urlbloghttps://www.teknomatch.com (Isi dengan alamat blog sobat)
var characIsi dengan jumlah summary post yang ingin ditampilkan

Edit pada bab feed url ini, ganti Smartphone dengan nama label blog.

/feeds/posts/default/-/Smartphone

Jika ingin menampilkan feed halaman index saja tanpa label edit format feed jadi menyerupai ini

/feeds/posts/default

Setelah selesai, klik tombol Publikasikan dan lihat kesannya pada blog sobat.


Widget ini hanya dapat dipasang satu kali, jadi lakukan pengeditan sebelum postingan dipublish

Nah, itulah Cara Praktis Memasang Recent Post by Label di Halaman Statis. Semoga bermanfaat dan wassalam.

Cara Memasang Recent Post By Label Di Halaman Statis

Membuat Headline Breaking News di Blog – bahu-membahu ini sama ibarat widget recent post atau latest post namun hanya saja pada widget headline breaking news ini berbentuk horisontal ibarat navigasi yang biasanya di pasang diatas header atau di bawah navigasi sajian atau sanggup juga di atas footer blog.

bahu-membahu ini sama ibarat widget recent post atau latest post namun hanya saja pada wid Membuat Headline Breaking News di Blog

Pada widget headline breaking news ini nantinya akan memunculkan setiap artikel terbaru pada sebelah kiri dan disebelah kanannya terdapat widget jejaring social media. Untuk memasang widget headline breaking news ke dalam blog caranya cukup mudah, Anda hanya perlu menambah widget dan sanggup mengaturnya untuk sanggup ditaruh dimana daerah yang Anda sukai dengan menggeser bab elemen tata letak layout blog. Untuk melihat ibarat apa memasangnya ke dalam blog.

Cara Membuat Headline Breaking News di Blog


1. Login pada akun blogger.

2. Masuk ke Tata Letak blog dan tambahkan widget.

3. Copy isyarat berikut ini kemudian masukan kedalam widget HTML/Javascript.

<style type='text/css' scoped="scoped"> #news{background:#5cb3f5;border-bottom:5px solid #333;border-top:5px solid #333;display:block;float:left;height:20px;line-height:20px;overflow:hidden;padding:5px 30px;width:835px}.titlenews{background:#333;color:#fff;display:block;float:left;font:bold 12px/22px Tahoma;padding:9px;margin-top:-10px;position:absolute}#ltsposts{float:left;margin-left:120px}#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0}#ltsposts li a{background:none !important;color:#fff !important;font:bold 12px/22px Tahoma;text-decoration:none}ul.shsocial{background:#333;float:right;margin:-8px 0}ul.shsocial li{float:left;list-style:none outside none;border:none}ul.shsocial li a{background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdpTI01nKivlwVrE0E5eoxDLKdFjk-YtACzehvah1vuyV0dIZnz-cMUTPGGaFx9a9LCQI7-2wQODZq2a1WzeCdMT8154erBgA37MCZowWrG3ylWY4m81x4jwN6Ex8i4PMpd8tMg2I-jPcv/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:#fff;direction:ltr;display:block;height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all .2s ease 0s;width:32px }ul.shsocial li.fb a{background-position:0 0 }ul.shsocial li.gp a{background-position:-96px 0 }ul.shsocial li.rs a{background-position:-192px 0 }ul.shsocial li.tw a{background-position:-256px 0 }ul.shsocial li.fb a:hover{background-position:0 -32px }ul.shsocial li.gp a:hover{background-position:-96px -32px }ul.shsocial li.rs a:hover{background-position:-192px -32px }ul.shsocial li.tw a:hover{background-position:-256px -32px } </style> <div id='news'><span class='titlenews'>Latest Post</span> <div id='ltsposts'>Loading...</div> <ul class='shsocial'> <li class='fb'> <a href='#' rel='nofollow' target='_blank' title='facebook'> </a></li> <li class='gp'> <a href='https://plus.google.com/+ArlinadesignBlogspot' rel='nofollow' target='_blank' title='googleplus'> </a></li> <li class='tw'> <a href='#' rel='nofollow' target='_blank' title='twitter'> </a></li> <li class='rs'> <a href='http://feeds.feedburner.com/FEED-BLOG-ANDA' rel='nofollow' target='_blank' title='rss'> </a></li> </ul> </div> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { var url_blog = 'http://www.arlinadzgn.com', // Replace With your Blog Url numpostx     = 20; // Maximum Post $.ajax({     url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',     type: 'get',     dataType: "jsonp",     success: function(data) {         var posturl, posttitle, skeleton = '',             entry = data.feed.entry;         if (entry !== undefined) {             skeleton = "<ul>";         for (var i = 0; i < entry.length; i++) {                 for (var j=0; j < entry[i].link.length; j++)                 {                      if (entry[i].link[j].rel == "alternate")                         {                             posturl = entry[i].link[j].href;                             break;                          }                 }                             posttitle = entry[i].title.$t;             skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';         }             skeleton += '</ul>';             $('#ltsposts').html(skeleton);             function tick(){             $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });             }         setInterval(function(){ tick () }, 5000);         } else {             $('#ltsposts').html('<span>No result!</span>');         }     },     error: function() {             $('#ltsposts').html('<strong>Error Loading Feed!</strong>');        } }); }); //]]> </script>

Keterangan:

Ganti http://www.arlinadzgn.com dengan URL alamat blog Anda.

Ganti Tulisan # ganti dengan ID masing-masing.

4. Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.


Untuk memilih dimana letak widget breaking news tersebut sanggup sesuaikan dengan blog Anda dengan menggeser elemen tata letak.

Membuat Headline Breaking News Di Blog

Langganan: Postingan (Atom)