Cara Menciptakan Widget Recent Post Di Blog Seo Friendly
Recent ialah sebuah kata yang berasal dari bahasa inggris jikalau di artikan kedalam bahasa indonesia ialah terbaru, terkini, terakhir muncul, anyar, dan lain-lain. Makara sudah jelaskan kalau recent post itu berfungsi untuk menampilkan artikel terkini, isu teranyar, dan postingan terbaru Anda, hal ini sangat berkhasiat bagi pengujung dikarenakan pengujung akan tau postingan apa saja yang terbaru dari Blog ataupun situs Anda, sehingga yang tersaji ialah postingan terhangat Anda. Selain untuk menambah fitur blog biar menjadi manis dan menarik, ternyata widget dari recent post ini juga sanggup meningkatkan jumlah pengunjung pada blog anda, alasannya ialah dengan adanya sebuah gadget ini menciptakan pengunjung lebih gampang mengakses artikel lain milik anda, Singkatnya widget recent post ini juga penunjang SEO friendly terhadap blog ataupun situs anda.
Seperti yang kita ketahui, blogspot itu tidak mempunyai widget recent post bawaannya. Jadi, jikalau Anda ingin menampilkan artikel terbaru di blog, Anda perlu menambahkan atau memasang widget recent post secara manual biar recent post sanggup muncul di blogspot Anda. Nah pada artikel kali ini aku akan membagikan Cara Membuat Recent Post yang Seo Friendly dan sangan keren, kemudian bagaimana caranya yuk simak tutorialnya dibawah ini.
1. Pertama silahkan Anda login dulu ke Blogger
2. Lalu masuk Ke "Tata Letak atau Layout" kemudian pilih Add a Gadget/ Tambahkan Gadget.
3. Nanti akan muncul pop-up browser, sehabis itu pilih HTML/Javascript
4. Setelah itu masukan instruksi dibawah ini di kolom HTML/Javascript, lalu Save atau Simpan.
A. Recent Post Dengan Navigasi
<script type="text/javascript"> function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9LFyAOCol6TUavyM2YsaQnKa3zqhIIki0roIlDVInHV2rMwSWY9LDK0MrhWsqUSXVeCoIW6KB5u4xSuUCWp3gPfLCDIgEMB1EpwitdTqseqrL1q2SgAixhK4kpqAPjyx2Yv2N0Vn0Kxgw/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" sasaran ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" sasaran ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" sasaran ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")} </script> <script type="text/javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = true; var posts_date = true; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script> <a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://archivecomputer.blogspot.co.id/a" rel="nofollow">Recent Posts Widget</a> <noscript>Your browser does not support JavaScript!</noscript> <link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' /> <style type="text/css"> img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;} .recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; } ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;} ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #FCD6CB;} ul.recent-posts-container {border: 2px solid #FCD6CB; } .recent-posts-container a { text-decoration:none; } .recent-posts-container a:hover { color: #222;} .post-date {color:#e0c0c6; font-size: 11px; } .recent-post-title a {font-size: 14px;color: #616662;} .recent-post-title {padding: 6px 0px;} .recent-posts-details a{ color: #888;} .recent-posts-details {padding-bottom: 5px;} a.readmorelink {color: #4DACE3;} </style>Perhatian!!!
1. var post no = jumlah postingan yang ingin ditampilkan
2. var charac = jumlah maksimal summary post yang ditampilkan
B. Recent Post sederhana tanpa thumbail
<div class="recentpoststyle"> <script src="https://cdn.rawgit.com/Brando07/share/newbe/recent-post-seocips-1.js"></script> <script> var posts_no =5; var posts_date = true;var post_summary = true;var summary_chars = 80;</script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts"> </script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;"></a> <noscript>Your browser does not support JavaScript!</noscript> <style type="text/css"> .recentpoststyle {counter-reset: countposts;list-style-type: none;} .recentpoststyle a {text-decoration: none; color: #49A8D1;} .recentpoststyle a:hover {color: #000;} .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;} li.recent-post-title { padding: 5px 0px;} .recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;} .recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;} .post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;} .recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;} </style></div> Perhatian!!!1. Var posts_no = jumlah postingan yang ingin ditampilkan
C. Recent Post dengan tampilan thumbail yang menarik
<script style="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/recentpost-seocips-3.js"></script> <script style="text/javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = true; var posts_date = true; var post_summary = true; var summary_chars = 70;</script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script> <a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;"></a> <noscript>Your browser does not support JavaScript!</noscript> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <style type="text/css"> img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;} .recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent-posts-container li {position:relative;padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;} ul.recent-posts-container {counter-reset: countposts;list-style-type: none;} ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;} .recent-posts-container a { text-decoration:none; } .recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;} .recent-posts-details {margin: 5px 0px 0px 92px; } .recent-posts-details a{ color: #777;} </style>Perhatian!!!1. Var posts no = jumlah postingan yang ingin ditampilkan
2. var summary_chars = jumlah maksimal summary post yang ditampilkan
D. Recent Post ringan dan keren tanpa thumbail
<script style="text/javascript" src="https://faiztutorial91.github.io/javasscriptblogger/recentpost1.js"></script> <script style="text/javascript"> var posts_no = 5; var showpoststhumbs = false; var readmorelink = true; var showcommentslink = true; var posts_date = true; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script> <noscript>Your browser does not support JavaScript!</noscript> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <style type="text/css"> img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;} .recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;} ul.recent-posts-container {counter-reset: countposts;list-style-type: none;} ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;} .recent-posts-container a { text-decoration:none; } .recent-posts-container a:hover{color: #4DACE3;} .post-date {color:#e0c0c6; font-size: 11px; } .recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;} .recent-post-title { margin: 5px 0px; } .recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;} .recent-posts-details a{ color: #888;} a.readmorelink {color: #4DACE3;} </style> Perhatian!!!1. Var posts no = jumlah postingan yang ingin ditampilkan
E. Recent Post Berwarna-warni dengan dampak thumbail
<style scoped="scoped"> #ptb-repost { font:normal normal 11px/normal Arial; color:#333; margin:0 auto; padding:0; min-height:100px; background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-kWvctLcf-85rTdCgGGgmOAyLYlNlukn9Mqxll8JuTKKzQplGVlk0aqoFR0SKnmQaZJhir_3xD2ScgOCSG6HzgUB10Fex_X0TU24F5BvYgTm_cmiV3XXw3ehuZVl82dyOomRfpQ_C0Y/s1600/loading.gif') no-repeat 50% 50%; } #ptb-repost li { list-style:none; margin:0; padding:8px; background-color:white; border-bottom:1px solid #ddd; } #ptb-repost li a img:hover { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);opacity: 0.5; } #ptb-repost li a img { float:left; margin:0 10px 0 0; padding:0; border:none; background:none; outline:none; } #ptb-repost li a.title { font:normal normal 12px/normal Oswald; display:block; text-decoration:none; color:#fdfdfd; } #ptb-repost li a.title:hover { text-decoration:none; color:#ffffff; } #ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:1%} #ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:2%} #ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:3%} #ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:4%} #ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:5%} #ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:6%} #ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:7%} #ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:8%} #ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:9%} #ptb-repost li:nth-child(10) {background-color:#815540;margin-right:10%} </style> <ul id="ptb-repost"></ul> <script> //<![CDATA[ var rp_homePage = "https://stylingseo.blogspot.co.id/", rp_numPosts = 5, rp_thumbWidth = 50, rp_numChars = 80, rp_sortByLabel = false, rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln279ENC4AZLX_za_ROFq6Rw67-2DrCtygIA_K4mkvmmjxyyYR1LJlMq9YVwi84E4Mh9gqBqpfb4vd8mqynznzDXv9X7GPM1mlLURIZk0-Xfc6KdhOLNfmn2oja7uQxqpdYfb_WyEfJM/s1600/minismallest-img.png", rp_newTabLink = false, rp_loadTimer = "onload"; //]]> </script> <script src='https://dl.dropboxusercontent.com/s/m6emd2j1kc5517k/ptb-repost.js' type='text/JavaScript'></script> Perhatian!!!1. rp_numposts = jumlah postingan yang ingin ditampilkan
2.rp_thumbwidth= lebar gambar/thumbail
3. rp_numchars = jumlah maksimal summary post yang ditampilkan
F. Recent Post Simple tanpa thumbail
<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 Membuat Widget Recent Post di Blog Seo Friendly" 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> Perhatian!!!Ganti url nya dengan url milik Blog Anda
G. Recent Post Yang Berjalan Sendiri
<style type="text/css"> #rp_plus_img{height:377px;} #rp_plus_img li {height:70px;padding:5px;list-style:none; background-color:#ffffff; border:solid 2px #000000;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:justify; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script> <script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript"> </script> <script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"><script> var numposts = 5; var numchars = 0; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"> </script> </ul> <small><a href="http://namabloganda.blogspot.com" target="_blank">get this widget here</a></small> Perhatian!!!
1. Var numposts = jumlah postingan yang ingin ditampilkan
2. Ganti "namaloganda" dengan url blog Anda
3. var numchars = jumlah maksimal summary post yang ingi ditampilkan
Nah itulah beberapa widget recent post dimulai dari yang sederhana sampai terkeren, jadi semua tergantung Anda ingin menggunakannya yang mana, sekian dari artikel aku jikalau ada yang ingin Anda tanyakan atau mengalami error silahkan komentar dibawah ini terima kasih.
