Memberi Harapan: Related Post

Tampilkan postingan dengan label Related Post. Tampilkan semua postingan

Minggu, 17 Juni 2012

Thumbnail Related Post

Cara Membuat Related Post dalam bentuk Kotak Kotak Gambar di Bawah Posting

Saya rasa artikel ini sudah dipublikasikan teman-teman blogger beberapa tahun lalu,namun kenapa Pelajaran Blog memplubikasikan cara membuat artikel berkaitan / artikel terkait dengan gambar (bergambar / thumbnail) kembali?

Yup! disamping sebagai referensi bagi sobat blogger yang belum mengetahui,kami ingin memperkenalkan sebuah situs www.bloggerplugins.org yang banyak memberikan manfaat terkhusus buat saya pribadi (pembaca:jelas la,situ khan tukang copas pent-).

Dari website tersebut banyak menyediakan script-script yang mengagumkan (pembaca:situ kan emang cuman bisa ngagumin doang pent-) salah satunya adalah widget thumbnail related post yang sedang kita bahas ini (pembaca:situ khan..Pelajaran Blog:sudah cukup..saya menyadari hal itu..pent-)

Nah,untuk bentuk fisiknya,sobat bisa lihat salah satu blog yang telah menggunakan widget ini,silakan sobat lihat di SINI.

Langkah dan Cara Membuat / Memasang Related Post Bergambar (Thumbnail Related Post)

1. Pertama, masuk ke akun Blogger sobat, buka tab Edit HTML dan contreng tulisan "Expand Widget Templates"

membuat related post blogger kotak gambar.

cara memasang related post dibawah posting gambar.

cara membuat related post bergambar blogspot.

2. Selanjutnya cari kode :

</head> (gunakan CTRL+F untuk mempermudah pencarian)

3. Jika sudah ketemu,tepat diATASnya letakkan kode berikut ini:

<b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9J9-SgPLNdug7D3pCgTcV4kVwmZslXh4DQUwplvkCjIhKOqpq4p3b81LG-wX7PpZGqMfR99qSPwmA6fOQqkkeQ4PH0Qv6oIIL8anm4gqk_H1WloghoVCsDoyw-5fNq3cz23JrVxl6usI/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/> </b:if>

4. Kemudian sobat cari kode berikut ini..

<div class='post-footer-line post-footer-line-1'>

5. Bila belum juga dapat diketemukan maka cari kode ini.

<p class='post-footer-line post-footer-line-1'>

6. Jika sudah ketemu dari salah satu kode tersebut,letakkan diBAWAHnya kode berikut ini:

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a> </b:if></b:if>

7. Simpan tempate sobat.

8. Untuk mengatur jumlah kotak yang ditampilkan kita ubah value dari kode berikut.
var maxresults=5;
9. Untuk mengubah jumlah post yang ditampilkan tiap label kita harus mengubah kode berikut.
max-results=6
10. Untuk mengubah title "Related Post" maka editlah kode berikut.
var relatedpoststitle="Related Posts"
11. Untuk mengubah warna pembatas ubahlah kode berikut.
var splittercolor="#d4eaf2"
12. Untuk mengganti tampilan gambar kosong bisa mengubah URL dari kode berikut.
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9J9-SgPLNdug7D3pCgTcV4kVwmZslXh4DQUwplvkCjIhKOqpq4p3b81LG-wX7PpZGqMfR99qSPwmA6fOQqkkeQ4PH0Qv6oIIL8anm4gqk_H1WloghoVCsDoyw-5fNq3cz23JrVxl6usI/s400/noimage.png"
Selesai, selamat mencoba sob!

sumber:
http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html

Sabtu, 07 April 2012

Membuat Related Post Widget Blogger (Update)

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

Widget Related Post / Artikel Terkait / Posting Yang Berhubungan

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/AVvXsEis7lmJCxFbcW6A8kcAFu9B7GVNeO8C6JOJKOuacp4LvElehRQ7U60fnCbZ4vUUbrbXQ0T2VLZmiATQHcGraCK70S-dUKzfsxjhYoFivx7MQLolbqmnDm66nzHnmxOk_BeQcx2XLwluWEM/") 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?

Senin, 20 Juni 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

Jumat, 24 September 2010