Informasi, Teknologi, Pengetahuan, dan Tips Trik: Related Post

Showing posts with label Related Post. Show all posts

Saturday 7 April 2012

Membuat Related Post Widget Blogger (Update)

Sebenarnya sudah pernah saya posting sebelumnya,bagaimana membuat related post pada blogger di Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait.
Namun widget related post yang satu ini sangatlah unik,menarik sekaligus dapat membantu pengunjung melihat posting yang berkaitan.

Jika related post widget untuk blogger yang satu ini masih valid,contohnya bisa sobat lihat di SINI.
Tapi sebelumnya memang sobat diharuskan membuat label terlebih dahulu,caranya sobat bisa baca di SINI.

Setelah label telah diciptakan,dan pastikan rss sobat valid(available rss),seperti rss pelajaran blog,bisa sobat klik icon rss disebelah kanan browser,tampilannya rss nanti seperti klik disini.

Ada 2 pilihan widget related post keren abis yang bisa sobat gunakan,dan dua-duanya pantas untuk sobat coba.

1.Related Post Widget for Blogger dengan Javascript

Contoh gambarnya sobat bisa lihat dibawah ini:

Related Post Widget Untuk Blogger (Keren Abis!)

Lihat Gambar Besar

Dan hasilnya kurang lebih akan seperti di sini

Nah,untuk caranya bisa sobat ikuti langkah berikut ini:

Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

Gb.1
Selanjutnya pilih tab Edit Html (Gb.2).

Gb.2
Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

Gb.3

Nah,setelah itu cari kode </head> (Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0uFlcSG9Bp-NI_HPalHF_oACH9G1AKm0jSBRWRdT6efuG8QVOYOVwS0CoiThg-q5fJ0BsoIUmyFy98sIdK9KDs1qHRtein_UYKZJKcTDEmYHYfXDJ24loFKpKTqI9DImV-CkmiQT_Vio/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/pujiantoroinc/Home/related_post_pelajaran_blog.js' type='text/javascript'/>

Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Setelah itu simpan,selesai.

2.Related Post Widget for Blogger dengan Jasa Blogger Widget (LinkWithin)

Tampilan related post blogger dengan jasa www.linkwithin.com akan seperti ini:

Ingin memilih cara yang no 2 ini? tinggal sobat kunjungi saja situsnya di sini

Bagaimana? siap menghias blog dengan tampilan widget related post terbaru?

Monday 20 June 2011

Cara Membuat Recent / Related Post jQuery ( Berkedip Bergantian dan Slider)

UPdate! Trik Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait,Sudah Direvisi! Dijamin Berhasil 100%

Setelah beberapa hari kemarin kami saling sharing seputar belajar seo blogspot,kini saatnya kembali utak atik blog seputar tutorial jquery kembali.

Ketinggalan terlalu banyak materi jquery dalam blog ini?,jangan kuatir sob,tutorial blog ini baru memposting beberapa posts kok :D

Sebelum posting tentang bagaimana membuat recent post jQuery ini,biar kami share kembali beberapa tutorial jQuery dalam blog ini beberapa waktu lalu,diantaranya:

Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery
Membuat Widget Gambar Slide Show / Slideshow Javascript dan Css di Blogger
Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget
Membuat Menu Navigasi dengan jQuery (Kwicks jQuery Sliding Navigation Menu for Blogger)

Nah,belum terlalu banyak khan sob,sedot buruan ya :D

Langkah Cara Membuat Related Post / Recent Post jQuery untuk Blogger

Bagi yang masih bingung seperti apa sih related post yang dimaksudkan,sobat bisa lihat contoh gambarnya dibawah ini:

Contoh yang sudah diterapkan sobat bisa lihat di sini.
Gimana sob,pingin ga punya widget kaya gitu?yuk intip gimana sih cara bikin recent post jquery blogger ini..

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard,lalu Tata Letak / Rancangan kemudian klik tulisan Add New Widget atau Tambah Gadget dan pilih HTML/Javascript,lihat Gambar:

Cara Membuat jquery related post blogger blogspot.

Kemudian letakkan kode berikut sob:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><center><strong>Artikel Acak</strong></center>
<center>
   <style type="text/css" media="screen">
   <!--

   #spylist {
   overflow:hidden;
   margin-top:1px;
   padding:0px 0px;
   height:300px;
   }
   #spylist ul{
   width:100%;
   overflow:hidden;
   list-style-type: none;
   padding: 0px 0px;
   margin:0px 0px;
   }
   #spylist li {
   width:100%;
   padding: 0px 0px;
   margin:0px 0px 5px 0px;
   list-style-type:none;
   float:none;
   height:70px;
   overflow: hidden;
   background:#fff url() repeat-x;
   border:1px solid #ddd;
   }

   #spylist li a {
   text-decoration:none;
   color:#4B545B;
width:100%;
   font-size:10px;
   height:12px;
   overflow:hidden;
   margin:0px 0px;
   padding:0px 0px 2px 0px;
   }
   #spylist li img {
   float:left;
   margin-right:5px;
   background:#EFEFEF;
   border:0;
   }
   .spydate{
   overflow:hidden;
   font-size:8px;
   color:#0284C2;
   padding:2px 0px;
   margin:1px 0px 0px 0px;
   height:12px;
   font-family:Tahoma,Arial,verdana, sans-serif;
   }

   .spycomment{
   overflow:hidden;
   font-family:Tahoma,Arial,verdana, sans-serif;
   font-size:8px;
   color:#262B2F;
   padding:0px 0px;
   margin:0px 0px;
   }

   -->
   </style>
       <script language='javascript'>
   imgr = new Array();
   imgr[0] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[1] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[2] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[3] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[4] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";
   showRandomImg = true;
   boxwidth = 200;
   cellspacing = 6;
   borderColor = "#232c35";
   bgTD = "#000000";
   thumbwidth = 50;
   thumbheight = 50;
   fntsize = 9;
   acolor = "#666";
   aBold = true;
   icon = " ";
   text = "comments";
   showPostDate = true;
   summaryPost = 40;
   summaryFontsize = 10;
   summaryColor = "#666";
   icon2 = " ";
   numposts = 100;
   home_page = "http://pelajaran-blog.blogspot.com/";
   limitspy=4
   intervalspy=4000
   </script>

   <div id="spylist">
       <script src='https://sites.google.com/site/pujiantoroinc/Home/recent_post_berkedip.js' type='text/javascript'></script>
   </div></center>

Lalu Simpan dan sobat dah bisa lihat hasilnya :D

Friday 24 September 2010

UPdate! Trik Membuat Related Post Widget Untuk Blogger (Keren Abis!),Sudah Direvisi! Dijamin Berhasil 100%

Widget Related Post / Artikel Terkait / Posting Yang Berhubungan