Thursday, January 21, 2010

Membuat Widget Related Post

Biasanya kita melihat Related Artikel bersamaan dengan postingan yang terletak dibawahnya. Nah kali ini saya akan memberikan triks bagaimana membuat widget Related Artikel yang berada disidebar, langsung aja menuju TKP :
  • Silakan anda menuju code.google.com untuk mendapatkan KEY nya.
  • Setelah mendapatkan KEY nya, cari kode </head> lalu letakkan kode dibawah ini diatasnya.
  • <script src='http://www.google.com/jsapi/?key=YOUR-KEY' type='text/javascript'/> <script src='http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js' type='text/javascript'/>
  • Setelah itu cari kode <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/> (tergantung template anda) dan letakkan script dibawah ini tepat siatasnya.
  • <b:widget id='Blog3' locked='false' title='Blog Posts' type='Blog'> <b:includable id='nextprev'> </b:includable> <b:includable id='backlinks' var='post'> </b:includable> <b:includable id='post' var='post'> </b:includable> <b:includable id='commentDeleteIcon' var='comment'> </b:includable> <b:includable id='status-message'> </b:includable> <b:includable id='feedLinks'> </b:includable> <b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <h4 id='comment-post-message'><data:postCommentMsg/></h4> <p><data:blogCommentMessage/></p> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' style='display: none'/> <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/> <data:post.iframeColorizer/> </div> </b:includable> <b:includable id='backlinkDeleteIcon' var='backlink'> </b:includable> <b:includable id='feedLinksBody' var='links'> </b:includable> <b:includable id='postQuickEdit' var='post'> </b:includable> <b:includable id='comments' var='post'> </b:includable> <b:includable id='main'> <!-- *****************http://hoctro.blogspot.com*****Oct,2008********** --> <!-- ***Related Articles by Labels Written by Hoctro- Take Four******* --> <!--<b:if cond='data:blog.pageType == "item"'>--> <div class='widget-content'> <h5>Related Articles</h5> <div id='data2007' style='padding:15px;'/><br/><br/> <h6>Related Article Widget by <u><a href='http://hoctro.blogspot.com/2008/10/new-and-improved-related-articles.html'>Hoctro</a></u></h6> <script type='text/javascript'> // Incorporating modified by Jackbook to the next line, thank you very much. var homeUrl = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 8; var maxNumberOfLabels = 10; var urlArray = new Array(); <b:if cond='data:blog.pageType == "item"'> maxNumberOfPostsPerLabel = 15; </b:if> <b:if cond='data:blog.pageType == "item"'> maxNumberOfLabels = 4; </b:if> var titleArray = new Array(); var titleTest = 0; function relInitialize() { var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; // Do not add identical labels from posts for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { var url = homeUrl + 'feeds/posts/default/-/' + encodeURIComponent(textLabel); var feed = new google.feeds.Feed(url); feed.setNumEntries(maxNumberOfPostsPerLabel); feed.load(function(result) { if (!result.error) { var container = document.getElementById("data2007"); for (var i = 0; i &lt; result.feed.entries.length; i++) { var entry = result.feed.entries[i]; titleTest = 0; for (var i = 0; i &lt; titleArray.length; i++) if ( titleArray[i] == entry["title"] ) titleTest = 1; if (titleTest == 0 ) { titleArray.push(entry["title"]); var div = document.createElement('div'); var a = document.createElement('a'); a.href = entry["link"]; // Adding an if statement to exclude current post. // Addition from Jackbook.com. Thank you if( a.href!=location.href ) { var txt = document.createTextNode(entry["title"]); a.appendChild(txt); div.appendChild(a); container.appendChild(div); } // if not home page }// if titleTest } // for }// if result is not error }); // feed.load numLabel++; } } </b:loop> </b:loop> } google.load("feeds", "1"); google.setOnLoadCallback(relInitialize); </script> </div> <!--</b:if>--> </b:includable> </b:widget>
  • Untuk var maxNumberOfPostsPerLabel = 8; var maxNumberOfLabels = 10; untuk yang angka 4 merupakan jumlah label yang nanti akan muncul sedangkan untuk angka 10 yaitu jumlah judul postingan anda yang ditampilkan
nah semoga bermanfaat ya.. selamat mencoba..

0 komentar:

Post a Comment

saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.