Membuat Sendiri Related Posts Gamnbar Thumbnail Di Blog - Bagaimanakah Cara Membuat Related Post (Artikel/Posting Terkait) plus Gambar Thumbnail di Bawah Posting Blog.Semua blog saat ini sudah punya widget related posts di bawah tiap postingan. Supaya dalam membuat related post kita aman dari sisipan link, dengan membuat kode posting terkait itu menyertakan link javascript, dengan cara copas linj js-nya ke browser.
Dengan kita bisa membuat sendiri Related Post sendiri bisa melihat previewnya, dan mengambil/memasang kodenya dengan aman di blog kita.sobat bisa ikutin cara caranya dibawah ini
Langkah Langkah Cara Membuat Related Post plus Gambar Thumbnail
1. Buka Template lalu Edit HTML
2. Copas dan pasang kode CSS dan HTML/Javascript di bawah ini:
KODE CSS
Dipasang di atas kode ]]></b:skin> atau </style>
/* ==== Related Post Widget Start ==== */.related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}.related-post h4 {font-size:150%;}margin:0 0 .5em; /* Style 2 */list-style:none;.related-post-style-2,.related-post-style-2 li {margin:0; padding:0; }.related-post-style-2 li:first-child {border-top:none}.related-post-style-2 li {padding:10px;border-top:1px solid #eee;overflow:hidden; }max-height:none;.related-post-style-2 .related-post-item-thumbnail {width:80px; height:80px; max-width:none;font-size:110%;background-color:transparent; border:none;float:left;padding:0;.related-post-style-2 .related-post-item-title {margin:2px 10px 0 0; }/* ==== Related Post Widget End ==== */font-weight:bold; }.related-post-style-2 .related-post-item-summary {display:block; overflow:hidden; }.related-post-style-2 .related-post-item-more {}
KODE XML & JAVASCRIPT
Disimpan di atas kode <div class='post-footer'> Atau di mana saja di dalam kode
<!-- Related Post Widget Start --><b:if cond='data:blog.pageType == "item"'><div id='related-post' class='related-post'/>var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><script type='text/javascript'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];var relatedPostConfig = {homePage: "<data:blog.homepageUrl/>",titleLength: "auto",widgetTitle: "<h4>Related Posts:</h4>",numPosts: 5, summaryLength: 370,containerId: "related-post",thumbnailSize: 80, noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",<!-- Related Post Widget End -->newTabLink: true, moreText: "", widgetStyle: 2, callBack: function() {} }; </script><script type='text/javascript' src='http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js'/></b:if>
Catatan :
Jumlah posting (numPost), panjang ringkasan (summaryLength), dan Ukuran gambar (thumbnailSize) bisa diatur lagi di template.
3. Lalu Save template!
UPDATE!
Atas masukan Anda di komentar, link kode script berikut ini:
sudah mati. Maka, silakan hapus kode tersebut dan ganti dengan kode berikut ini:
<script type='text/javascript'>//<![CDATA[var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="rel-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><a title="'+t+'" href="'+v+'"><img alt="'+t+'" class="rel-thumb" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"/></a><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+"></a></span>"+y+"</li>"}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);//]]></script>
Demikian cara Membuat Sendiri Related Post plus Gambar Thumbnail di Blog,selamat mencoba semoga bermanfaat.
Belum ada tanggapan untuk "MEMBUAT SENDIRI RELATED POST GAMBAR THUMBNAIL DI BLOG"
Post a Comment