Dewa Blogger: Hasil penelusuran untuk cara-memasang-recent-post-widget-di-blog

Halaman

    Social Items

Home / Hasil penelusuran untuk cara-memasang-recent-post-widget-di-blog
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

Cara Memasang Widget Recent Post Gallery di Blog Cara Memasang Widget Recent Post Gallery

Cara Memasang Widget Recent Post Gallery - Setelah kemarin membuatkan Cara Memasang Recent Post Widget di Blog , pada postingan kali ini Saya akan membuatkan widget yang juga masih memiliki fungsi yang sama adalah menampilkan artikel terbaru di blog namun dengan tampilan yang berbeda.

Kebetulan untuk widget ini tidak disertakan demo, jadi dapat lihat pola tampilan di bawah ini :

Screenshot tampilan Widget Recent Post Gallery

Cara Memasang Widget Recent Post Gallery di Blog Cara Memasang Widget Recent Post Gallery

Ok eksklusif saja berikut cara penerapannya :

1. Buka Blogger > Template > Klik Edit HTML > Salin dan simpan aba-aba di bawah ini sempurna sebelum </head>

<script type='text/javascript'> //<![CDATA[ // Recent Post Gallery function arlinagrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-gallery">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+arlina_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+arlina_thumbs+'" height="'+arlina_thumbs+'"/>',p=arlina_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="Cara Memasang Widget Recent Post Gallery">'+m+p+"</a>";e.push('<div class="gallerytem">',g,"</div>")}e.push("</div>"),document.write(e.join(""))} //]]> </script>

2. Selanjutnya salin aba-aba di bawah ini sempurna sebelum ]]></b:skin> atau </style>

/* CSS Recent Post Gallery */ .recent-gallery {padding:0;clear:both;} .recent-gallery:after {content:"";display:table;clear:both;} .recent-gallery .gallerytem{display:inline-block;position:relative;margin:6px 0;overflow:hidden;} .recent-gallery .gallerytem a{position:relative;float:left;margin:0 6px;text-decoration:none} .recent-gallery .gallerytem .ptitle{background:rgba(0,0,0,.7);display:block;clear:left;font-size:10px;line-height:1.3em;position:absolute;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;padding:5px;word-wrap:break-word;overflow:hidden;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s} .recent-gallery .gallerytem:hover .ptitle{visibility:visible;opacity:1} .recent-gallery a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s} .recent-gallery a:hover img {border-color:#bbb;}

3. Simpan template.

4. Langkah selanjutnya buka Tata Letak > Tambahkan widget gres lalu salin dan simpan aba-aba di bawah ini di dalamnya :

<script> var arlina_thumbs = 72;  var arlina_title = true;  </script> <script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>

5. Simpan widget dan lihat hasilnya.

Keterangan :

  • var arlina_thumbs = 72 : Ukuran thumbnail, ganti sesuai selera
  • var arlina_title = true : Menampilkan judul post dikala kursor menentukan salah satu post pada thumbnail
  • max-results=9 : Jumlah post yang akan ditampilkan

Tambahan :

Jika ingin menampilkan post menurut label, silakan ganti url feed di atas ibarat ini :

<script src="/feeds/posts/summary/-/BLOGGER?max-results=9&amp;alt=json-in-script&amp;callback=arlinagrid"></script>

BLOGGER merupakan nama label yang akan ditampilkan.

Cukup sekian mengenai Cara Memasang Widget Recent Post Gallery, supaya bermanfaat.

Cara Memasang Widget Recent Post Gallery

Cara Memasang Widget Recent Post by Label Cara Memasang Widget Recent Post by Label

Cara Memasang Widget Recent Post by Label - Kali ini akan menyebarkan widget yang cukup menarik untuk di pasang pada blog. Widget recent post by label ini berfungsi untuk menampilkan postingan terbaru menurut label tertentu.

Widget ini nantinya akan tampil sempurna di bawah postingan pada halaman index atau halaman utama blog,

Bagi yang tertarik silakan ikuti langkah berikut :

1.Login ke Blogger > Buka Template > Klik Edit HTML > Tambahkan instruksi di bawah ini sebelum </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function tagpostthumbs(json){document.write('<ul class="taglabel">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var thumburl;try{thumburl=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d}else thumburl='http://2.bp.blogspot.com/-zif4lgUoNwY/VcmmKoOAbnI/AAAAAAAAK6U/whzhPe-8EDY/s1600/thumbn.png'}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(tagpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="Cara Memasang Widget Recent Post by Label Cara Memasang Widget Recent Post by Label" title="Cara Memasang Widget Recent Post by Label" class="tagpost_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" title="Cara Memasang Widget Recent Post by Label">'+posttitle+'</a><br>');if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(tagpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('')}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('')}}var towrite='';var flag=0;document.write('<br>');if(tagpostdate==true){towrite=towrite+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+cdyear;flag=1}if(tagpostcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(tagpostmore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" title="Cara Memasang Widget Recent Post by Label">More »</a>';flag=1}document.write(towrite);document.write('</li>');if(tagpostseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')} //]]> </script> </b:if> </b:if>

2. Selanjutnya tambahkan instruksi di bawah ini sebelum ]]></b:skin> atau </style>

/* CSS Recent Post by Label */ img.tagpost_thumb{float:left;border:1px solid #ddd;margin-right:8px;height:60px;width:60px;padding:2px;transition:all .6s} img.tagpost_thumb:hover{border-color:#aaa;} .taglabel{float:left;width:100%;padding:0;margin:0} ul.taglabel li{padding:5px 0;min-height:73px} #tagpost-left .widget ul,#tagpost-right .widget ul,#tagpost-bottom .widget ul{margin-top:-5px!important} #tagpost-left .widget,#tagpost-right .widget,#tagpost-bottom .widget{position:relative;display:block;border:1px solid #ccc;float:left;padding:1.5%} #tagpost-left h2,#tagpost-right h2,#tagpost-bottom h2{background:#333;color:#fff;font-family:inherit;font-weight:bold;font-size:15px;letter-spacing:.5px;position:relative;display:block;margin:0 0 10px 0;padding:15px} #tagpost-left .widget{margin-right:5px} #tagpost-bottom .widget{margin-top:10px} #tagpost-left .widget ul,#tagpost-right .widget ul,#tagpost-bottom .widget ul{list-style:none;margin:0;padding:0} #tagpost-left .widget ul li,#tagpost-right .widget ul li,#tagpost-bottom .widget ul li{display:block;font-size:12px;font-family:inherit;border-bottom:1px solid #ddd;margin:10px 0;padding:0;transition:all .6s} #tagpost-left .widget ul li:hover,#tagpost-right .widget ul li:hover,#tagpost-bottom .widget ul li:hover{border-bottom-color:#bbb;} #tagpost-left .widget li:last-child,#tagpost-right .widget li:last-child,#tagpost-bottom .widget li:last-child{border-bottom:none;margin:10px 0 0 0} #tagpost-left .widget ul li a,#tagpost-right .widget ul li a,#tagpost-bottom .widget ul li a{font-size:13px;color:#333;font-weight:bold} #tagpost-left .widget ul li a:hover,#tagpost-right .widget ul li a:hover,#tagpost-bottom .widget ul li a:hover{color:#444;text-decoration:underline;} #tagpost-left .widget,#tagpost-right .widget{width:48%;margin:10px 5px} #tagpost-bottom .widget{width:98.4%}

Catatan : Sebelumnya di template demo sudah memasang css ini

*, *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

3. Tambahkan markup widget di bawah ini sempurna di bawah widget blog1 kalau kesulitan silakan lihat screenshot di bawah ini

Cara Memasang Widget Recent Post by Label Cara Memasang Widget Recent Post by Label

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:section class='tagpost-left' id='tagpost-left' preferred='yes'/> <b:section class='tagpost-right' id='tagpost-right' preferred='yes'/> <b:section class='tagpost-bottom' id='tagpost-bottom' preferred='yes'/> </b:if> </b:if>

4. Simpan template.

5. Selanjutnya buka Tata Letak > Silakan tambahkan widget gres yang berada sempurna di bawah widget Posting Blog > Tambahkan instruksi di bawah ini di dalamnya

<script type='text/javascript'>     var numposts = 5; // Jumlah Post yang akan ditampilkan     var tagpostthumbnails = true; // Ganti "false" untuk tidak menampilkan     var tagpostmore = false;     var tagpostseparator = true;     var tagpostcommentnum = true; // Ganti "true" untuk menampilkan      var tagpostdate = true; // Ganti "true" untuk menampilkan      var tagpostsummary = false; // Ganti "false" untuk tidak menampilkan      var numchars = 50; // Jumlah abjad deskripsi yang di tampilkan </script> <script type="text/javascript" src="/feeds/posts/default/-/Featured?orderby=updated&amp;alt=json-in-script&amp;callback=tagpostthumbs"></script>

Catatan : Ganti instruksi yang ditandai dengan nama label.

Jika ingin memunculkan postingan terbaru, silakan ganti feed di atas dengan instruksi ini

<script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=tagpostthumbs"></script>

6. Simpan Widget dan lihat hasilnya.


Untuk tampilan widget dapat sahabat kreasikan kembali. Sekian mengenai Cara Memasang Widget Recent Post by Label, agar bermanfaat.

Cara Memasang Widget Recent Post By Label

Cara Memasang Widget Random Post di Blog - Widget random post merupakan salah satu fitur penting dalam meningkatkan pageview pada sebuah blog. Widget tersebut, mempunyai kegunaan untuk menampilkan artikel pada blog secara acak. Sehingga, artikel usang yang belum terlihat oleh pengunjung secara maksimal berpotensi sanggup dibuka kembali.

Cara Memasang Widget Random Post di Blog Cara Memasang Widget Random Post di Blog

Namun kebanyakan blogger sering berpikir dua kali untuk memasang suatu widget, sebab dinilai akan menambah beban loading pada blog. Akan tetapi, dari hasil blogwalking di blog +Taufik Nurrohman yang merupakan salah satu blogger pahlawan di Indonesia, di sana ada tips sederhana untuk menciptakan widget random post yang cepat dan ringan.

Tampilan dari widget ini tidak berbeda dengan tampilan widget recent post yang pernah Saya bagikan di blog

Baca juga. : Cara Memasang Recent Post Widget di Blog

Cara penerapannya pun cukup mudah, teman hanya perlu menambahkan instruksi ke dalam widget gres di blog. Berikut cara penerapannya :

1. Buka Blogger > Klik Tata Letak > Tambahkan widget gres > Salin dan simpan instruksi di bawah ini di dalamnya

<style scoped='' type="text/css"> #arlina-random ul{list-style:none;margin:0;padding:0}#arlina-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;} #arlina-random li:last-child{border-bottom:0;} #arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline} </style> <div id='arlina-random'>Memuat...</div> <script> //<![CDATA[ // Random Post Widget var homePage = 'http://www.arlinadzgn.com',     maxResults = 10,     containerId = 'arlina-random'; function getRandomInt(min, max) {     return Math.floor(Math.random() * (max - min + 1)) + min; } function shuffleArray(arr) {     var i = arr.length, j, temp;     if (i === 0) return false;     while (--i) {         j = Math.floor(Math.random() * (i + 1));         temp = arr[i];         arr[i] = arr[j];         arr[j] = temp;     }     return arr; } function ArlinaRandomPosts(json) {     var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));     // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));     document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>'); } function randomPosts(json) {     var link, ct = document.getElementById(containerId),         entry = shuffleArray(json.feed.entry),         skeleton = "<ul>";     for (var i = 0, len = entry.length; i < len; i++) {         for (var j = 0, jen = entry[i].link.length; j < jen; j++) {             link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';         }         skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';     }     ct.innerHTML = skeleton + '</ul>'; } document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=ArlinaRandomPosts"></scr' + 'ipt>'); //]]> </script>

Catatan : Ganti instruksi yang ditandai dengan url blog teman dan jumlah artikel yang akan ditampilkan

2. Simpan widget dan lihat hasilnya.


Bagi teman yang ingin mencoba bagaimana Cara Membuat Daftar Isi Blog yang tampil di Setiap Konten, teman sanggup coba di sini : Cara Membuat Daftar Isi Blog di Setiap Konten

Semoga bermanfaat.

Cara Memasang Widget Random Post Di Blog

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

Kali ini akan membuatkan tutorial perihal Cara Memasang Widget Recent Post dengan Tanggal dan Komentar di Blog. Widget recent post ini yaitu sebuah widget yang berfungsi untuk menampilkan daftar dari postingan terbaru di blog teman dengan thumbnail dan aksesori keterangan tanggal dan jumlah komentar.

Kali ini akan membuatkan tutorial perihal Cara Memasang Widget Recent Post dengan Tanggal dan Komentar

Bagi yang ingin mencobanya, silakan ikuti langkah sederhana berikut ini :

Cara Memasang Widget Recent Post dengan Tanggal dan Komentar


1. Login ke Blogger > Klik Tata Letak > Buat Widget gres lalu tambahkan semua isyarat di bawah ini didalamnya

<style scoped='' type='text/css'> #recent-posts{color:#999;font-size:12px} #recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px} #recent-posts ul{margin:0;padding:0} #recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)} #recent-posts ul li:last-child{border-bottom:0} #recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal} </style> <div id='recent-posts'> <script type='text/javaScript'> var rcp_numposts=5; var rcp_snippet_length=150; var rcp_info='yes'; var rcp_comment='Comments'; var rcp_disable='T?t Nh?n xét'; function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNJLUxouAUXxr19suGZIUv-6oAZd_5lSST4M4Zoc9wz6IHhrMOVI9o796KEYYJP9LatMZMWLg11gM2ukzG7cv0DbI4YOKk8zuKqGA_hUqcr8qBjIwOv4nMLQup6zjR1cQL7PHYqabXOic/"};}};dw+='<li>';dw+='<img alt="Kali ini  akan membuatkan tutorial perihal  Cara Memasang Widget Recent Post dengan Tanggal dan Komentar" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="Cara Memasang Widget Recent Post dengan Tanggal dan Komentar">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>'); </script> </div>

2. Simpan widget dan lihat hasilnya.


rcp_numposts=5; = Ganti angkan 5 dengan jumlah postingan yang akan ditampilkan. var rcp_snippet_length=150; = Jumlah huruf isi artikel yang akan ditampilkan ketika hover link judul postingan. rcp_info='yes'; = Ketik no untuk menyembunyikan keterangan tanggal dan jumlah komentar. rcp_comment='Comments'; = Nama judul goresan pena dari jumlah komentar.

Sesuaikan kembali tampilan widget sesuai dengan tema blog yang teman gunakan.


Demikian tutorial Cara Memasang Widget Recent Post dengan Tanggal dan Komentar. Semoga bermanfaat.

Cara Memasang Widget Recent Post Dengan Tanggal Dan Komentar

Memasang Multi Recent Posts di Halaman Statis Memasang Multi Recent Posts di Halaman Statis

Memasang Multi Recent Posts di Halaman Statis - Kali ini Saya akan membuatkan widget yang cukup menarik adalah widget multi recent post yang akan menampilkan formasi daftar postingan terbaru dari blog yang sanggup teman tentukan menurut label terpilih.

Widget ini Saya sanggup dari blog www.dte.web.id yang telah sedikit dimodifikasi agar tambah keren... Ok pribadi saja ke cara penerapannya :

Sebelum menerapkan widget ini ada baiknya di template yang teman gunakan sudah terdapat link fontawesome, jikalau belum ada silakan terapkan link di bawah ini sebelum tag epilog </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Penerapannya pun sangat mudah, teman hanya perlu menambahkan instruksi di bawah ini pada post halaman statis (Tab HTML)

Memasang Multi Recent Posts di Halaman Statis Memasang Multi Recent Posts di Halaman Statis

<style scoped="scoped" type="text/css"> /* Multi Recent Post */ .post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;} .list-entries{display:table;background:#fdfdfd;margin:1.5% 1%;width:31.3%;float:left;font-size:80%;} .list-entries ul,.list-entries li{margin:0;list-style:none} #feed-list-container ul li{background:#fdfdfd;padding:15px;line-height:normal;border:1px solid #eee;border-top:0;transition:all .3s;} #feed-list-container ul li:hover{background:#fff;} #feed-list-container ul li:last-child{border-bottom:0;} .list-entries .main-title{padding:0;overflow:hidden;} .list-entries .main-title h4{position:relative;display:block;font:inherit;font-weight:700;padding:1em 1.5em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:120%;margin-top:0!important} .list-entries .main-title h4:after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-size:17.4px;font-style:normal;background-color:#4384b3;color:#fff;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400} .list-entries .title a{font-size:13px;text-decoration:none;line-height:.5em;color:#333;font-weight:700;transition:all .3s;} .list-entries .title a:hover{color:#4f93c5} .list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left} .list-entries .summary{overflow:hidden;color:#999} .list-entries .more-link{border-bottom:none;} .list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#444;padding:1em 1.5em;position:relative;font-weight:400;color:#fff;transition:all .3s;} .list-entries .more-link a:hover{background-color:#f97e76;color:#fff;} .list-entries .more-link a:after{display:inline-block;content:"\f054";font-family:fontAwesome;font-size:16.4px;font-style:normal;background-color:#333;color:#ccc;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400;transition:all .3s;} .list-entries .more-link a:hover:after{background-color:#ea726a;color:#fff;} .widget .post-body ul, .widget .post-body ol {position:relative;}  @media (max-width:640px){ .list-entries {width:100%;} .list-entries{margin:2.5% 1%;}} </style> <div id="feed-list-container"> </div> <div style="clear:both;"> </div> <script type="text/javascript"> var multiFeed = {     feedsUri: [         {             name: "JUDUL LABEL",             url: "URL-BLOG",             tag: "NAMA LABEL"         },         {             name: "JUDUL LABEL",             url: "URL-BLOG",             tag: "NAMA LABEL"         },         {             name: "JUDUL LABEL",             url: "URL-BLOG",             tag: "NAMA LABEL"         } ],     numPost: 4,     showThumbnail: true,     showSummary: false,     summaryLength: 0,     titleLength: "auto",     thumbSize: 72,     containerId: "feed-list-container",     readMore: {         text: "Selengkapnya",         endParam: "?max-results=5"     } }; </script> <script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/multi-feed.js" type="text/javascript"></script>

2. Simpan laman dan lihat hasilnya.


Keterangan :
  • numPost : Menentukan jumlah posting yang ingin ditampilkan
  • showThumbnail : Ganti nilai menjadi false untuk menyembunyikan gambar
  • showSummary : Ganti nilai menjadi true untuk menampilkan ringkasan postingan
  • summaryLength : Menentukan jumlah huruf pada ringkasan
  • thumbSize : Menunjukkan ukuran thumbnail yang ditampilkan
  • text : Ganti goresan pena "Selengkapnya"
  • endParam : Menentukan jumlah post yang akan ditampilkan ketika menekan tombol read more.

Untuk keterangan lebih lanjut silakan kunjungi halaman source.

Sekian mengenai cara Memasang Multi Recent Posts di Halaman Statis, semoga bermanfaat.

Source : https://sangdewablogger.blogspot.com//search?q=memasang-multi-recent-posts-di-halaman-statis

Memasang Multi Recent Posts Di Halaman Statis

Baiklah kali ini aku akan menyebarkan perihal cara memasang recent post slider yang sudah res Memasang Responsive Recent Post Slider

Memasang Responsive Recent Post Slider - Baiklah kali ini aku akan menyebarkan perihal cara memasang recent post slider yang sudah responsive.

Langsung saja dengan cara penerapannya.

1. Silahkan login ke blog anda > Template > Edit HTML

 Kemudian salin dan pastekan instruksi di bawah ini sempurna sebelum  ]]></b:skin> atau </style>

/* CSS Responsive Slider Recent Post */ #featuredpost {margin:15px auto;} #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:320px} #slides li{width:50%;height:100%;position:absolute;display:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(3){left:75%;width:25%;height:50%} #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%} #slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%; padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3); height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;} #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px; padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);} #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px; background:#ff6553;margin:0;} #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff; padding:5px 21px;text-transform:uppercase;margin:0;} #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;} #slides a{display:block;width:100%;height:100%;overflow:hidden} #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;} #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background:none;background-position:50% 40%;background-repeat:repeat-x;} #slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;; left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal; background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;} #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px; position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;; text-transform:uppercase;} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;} #slides .overlayx,#slides li{transition:all .4s ease-in-out} #slides li:nth-child(1) .overlayx{display:none;} #slides li:hover .overlayx{opacity:0.1} @media only screen and (max-width:800px){ #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}} @media only screen and (max-width:600px){   #slides ul{height:600px}   #slides li:nth-child(1){width:100%;height:50%}   #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}   #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}   #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}   #slides li:nth-child(5){display:none;}} @media only screen and (max-width:480px){ #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Pada CSS di atas aku memakai font Oswald, silahkan ganti dan sesuaikan dengan tema blog anda.

2. Salin dan pastekan instruksi di bawah ini sempurna di atas </body>

<script type="text/javascript" src="https://cdn.rawgit.com/Arlina-Design/frame/18274fc5/slider-posts.js"></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"URL-BLOG-ANDA", MaxPost:8, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:true, tagName:false }); }); //]]> </script>

Ganti goresan pena URL-BLOG-ANDA dengan url blog anda.

3. Salin dan pastekan instruksi di bawah ini dimana saja bebas. Bisa sebelum content-wrapper atau di bawah menu-wrapper

<div id="featuredpost"></div>

4. Terakhir simpan template dan lihat hasilnya.

Jika anda ingin memunculkan recent post slider ini hanya di halaman utama saja, silahkan bungkus instruksi HTML-nya dengan tag kondisional khusus halaman utama. Contoh :

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id="featuredpost"></div> </b:if>

Selengkapnya perihal penerapan tag kondisional Bisa anda lihat disini

Beberapa Fungsi Tag Kondisional Pada Widget

Dan kalau ada yang merasa kesulitan dengan penerapannya, disini aku sudah menyediakan versi praktisnya. Anda cukup menyalin semua instruksi di bawah ini ke Tata Letak > Tambahkan Gadget > HTML/JavaScript dan pastekan semua kodenya disitu > Simpan

<style> /* CSS Slider Recent Post */ #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative} #slides ul{height:320px} #slides li{width:50%;height:100%;position:absolute;display:none} #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block} #slides li:nth-child(1){left:0;top:0} #slides li:nth-child(2){left:50%;width:25%;height:50%} #slides li:nth-child(3){left:75%;width:25%;height:50%} #slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%} #slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%} #slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%; padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3); height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;} #slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px; padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);} #slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px; background:#ff6553;margin:0;} #slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff; padding:5px 21px;text-transform:uppercase;margin:0;} #slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;} #slides a{display:block;width:100%;height:100%;overflow:hidden} #slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;} #slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;} #slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-position:50% 40%;background-repeat:repeat-x;} #slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald'; left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal; background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;} #slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px; position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald'; text-transform:uppercase;} #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;} #slides .overlayx,#slides li{transition:all .4s ease-in-out} #slides li:nth-child(1) .overlayx{display:none;} #slides li:hover .overlayx{opacity:0.1} @media only screen and (max-width:800px){ #slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}} @media only screen and (max-width:600px){   #slides ul{height:600px}   #slides li:nth-child(1){width:100%;height:50%}   #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}   #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}   #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}   #slides li:nth-child(5){display:none;}} @media only screen and (max-width:480px){ #slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}} </style> <div id="featuredpost"></div> <script type="text/javascript" src="https://cdn.rawgit.com/Arlina-Design/redvision/cab7a72d/sliderekomendasi.js"></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function () { FeaturedPost({ blogURL:"URL-BLOG-ANDA", MaxPost:8, idcontaint:"#featuredpost", ImageSize:500, interval:10000, autoplay:true, tagName:false }); }); //]]> </script>

Untuk penerapannya, simpan sempurna diatas widget Posting Blog di Tata Letak.

Jika anda ingin memunculkan recent post slider ini hanya di halaman utama saja, silahkan bungkus widgetnya dengan tag kondisional khusus halaman utama. Contoh :

Klik Template > Buka edit HTML > Misal instruksi widget slider anda ialah #HTML4

<b:widget id='HTML4' locked='false' title='' type='HTML'>       <b:includable id='main'>   <!-- only display title if it's non-empty -->   <b:if cond='data:title != &quot;&quot;'>     <h2 class='title'><data:title/></h2>   </b:if>   <div class='widget-content'>     <data:content/>   </div> </b:includable>     </b:widget>

Tambahkan tag kondisional pada widget tersebut menjadi ibarat ini : 

<b:widget id='HTML4' locked='false' title='' type='HTML'>       <b:includable id='main'> <b:if cond='data:blog.url == data:blog.homepageUrl'>   <!-- only display title if it's non-empty -->   <b:if cond='data:title != &quot;&quot;'>     <h2 class='title'><data:title/></h2>   </b:if>   <div class='widget-content'>     <data:content/>   </div> </b:if> </b:includable>     </b:widget>


Keterangan :
  • MaxPost : Jumlah semua postingan yang akan tampil dalam list
  • ImageSize : Ukuran maksimal dari gambar (Semakin besar ukurannya maka akan semakin terang kerapatan pixel gambar yang akan tampil, namun akan semakin banyak waktu yang diharapkan dalam proses memuat halaman)
  • Interval : Waktu yang diharapkan dikala post berpindah (Contoh : 10000 yang berarti 10 detik)
  • Autoplay : (True) Post akan berpindah secara otomatis, (False) Post tidak akan berpindah secara otomatis.

Cukup sekian dan selamat mencoba.

Source :

Memasang Responsive Recent Post Slider

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

Postingan kali ini aku akan menawarkan tutorial yang tidak kalah keren dengan artikel tutorial sebelumnya, yaitu perihal bagaimana cara Memasang Widget Recent Post Slider di Sidebar. Widget Recent Post Slider ini cukup menarik alasannya yakni akan memunculkan daftar dari artikel terbaru dengan thumbnail dan pengaruh slider yang akan terus berjalan secara otomatis. Tidak hanya itu, widget ini juga dapat diatur untuk memunculkan artikel terbaru menurut label.

Postingan kali ini aku akan menawarkan tutorial yang tidak kalah keren dengan artikel tut Memasang Widget Recent Post Slider di Sidebar

Widget ini cocok ditambahkan di halaman sidebar blog, alasannya yakni ukurannya yang sudah pas untuk dipasang di sidebar. Oke, selebihnya ikuti tutorial berikut ini

Memasang Widget Recent Post Slider di Sidebar


1. Buka Blogger > Tata Letak > Buat widget gres HTML/Javascript > Kemudian salin isyarat di bawah ini didalamnya

<style scoped="" type="text/css"> ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none }ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block }ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 }ul.rcentside li:nth-child(2){left:0;top:50% }ul.rcentside li:nth-child(3){left:50.5%;top:50% }ul.rcentside li:nth-child(4){width:100%;left:0;top:75% }ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKSvYaumUUSqFAH-GCBkthsDZbM1iv6ovaqXFxHtZYWwgyU1Hr8XFDerC8i5bV3YGbMzNKtCqG6sxfd8hwF5rC-j__gsEfI55QvMFvi3Tv8-LEf-I0sx9WnhT3wv_ChIWsLhoL0i7fOSg/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% }.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px } </style> <div id="featuredpostside"></div> <script type='text/javascript'> function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)}; //<![CDATA[ FeaturedPostSide({   blogURL: "http://invisiontheme.blogspot.com",   MaxPost: 8,   idcontaint: "#featuredpostside",   ImageSize: 300,   interval: 5000,   autoplay: true,   tagName: false }); //]]> </script>

2. Simpan widget dan lihat hasilnya.


Pengaturan widget


blogURL: "http://invisiontheme.blogspot.com" : Ganti http://invisiontheme.blogspot.com dengan url blog sobat
MaxPost: 8 : Jumlah postingan yang akan ditampilkan
ImageSize : Ukuran atau dimensi dari gambar dalam satuan pixels
Interval : Waktu yang diharapkan ketika post slider berpindah
autoplay: true : Untuk mematikan auto slider, ganti autoplay: true dengan autoplay: false
tagName: false : Untuk menambahkan artikel terbaru menurut label, ganti false dengan nama label tertentu. Misal Blogger : tagName: "Blogger"

Demikian tutorial Memasang Widget Recent Post Slider di Sidebar, biar bermanfaat.

Memasang Widget Recent Post Slider Di Sidebar

Langganan: Postingan (Atom)