KrishnaVandanu

Membuat Widget Related Posts dengan Thumbnail pada Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> Cara menambahkan Widget Related Posts dengan Thumbnail pada Blogger Sekarang di sini adalah cara yang mudah untuk menampilkan posting terkait di bawah setiap posting blog Anda, bersama dengan thumbnail. Artikel-artikel terkait dipilih dari pesan lainnya dalam kategori yang sama / label / tag. Dengan cara ini banyak pembaca Anda akan tetap di blog Anda untuk waktu yang cukup lama ketika mereka melihat posting terkait kepentingan. <a name='more'></a> <div style="text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"> <img alt="related post, related posts blogger, blogger widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgnBzmFx_MgyGdtA6NEjkDF53Yo0WKTRKjA663kE4HIIYRHo8d0UVjwEWZlmoPV3R27RGCkyPuqFJFTWo7M66MY-U04NAYYvg-ujZbqdSBLgxUSeaZ2cdUZTHkAHFUnZ18dPmYmaQyzp_O/s1600/related-posts-blogger.png" title="Related Posts Widget For Blogger" /></div> <div style="text-align: -webkit-auto;"> </div> </div> Langkah menambahkan Widget Related Posts ke Blogger / Blogspot Langkah 1. Buka <a href="http://www.blogger.com/home" style="color: #0b5394;">Blogger Dashboard</a> >> Template >>Edit HTML; Langkah 2. Centang pada "Expand widgets template" box; Langkah 3. Cari (CTRL + F) kode <head> dibawah ini: <blockquote class="tr_bq"> </head></blockquote> Langkah 4. Copy dan paste kode di bawah ini sebelum / di atas </head> <blockquote class="tr_bq">  <b:if cond='data:blog.pageType == &quot;item&quot;'> <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: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Q4EGKs2KMqqTOf8ebDfs1ttdoalqEsqa7jmMxMMcUjnm_vsgYvZ9gDmDBzSjuclRFuvW_tmAHGuRHPHBl0jxcD2PlWor6ME2Zv0ceJC5GP5RfgWY-fh-8FOqWfCpOKht54qHaIIhWna2/s1600/no_image.jpg&quot;; var maxresults=5; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/> </b:if> </blockquote> Note: - to change the default picture, replace the URL in blue with your own - for displaying more than 5 posts, replace 5 value from "var maxresults=5;" - remove the code in violet if you want the related posts to be displayed in homepage too Catatan: - Untuk mengubah gambar default, ganti URL yang berwarna biru dengan link gambar yang Anda miliki - Untuk menampilkan lebih dari 5 posting, ganti 5 nilai dari  "var maxresults=5;" - Hapus kode yang berwarna violet/ungu jika Anda ingin menampilkan widget ini dalam homepage juga Langkah 5. Sekarang cari kode berikut: <blockquote class="tr_bq">     <div class='post-footer'></blockquote> Langkah 6. Dan tepat di atasnya, copy dan paste kode di bawah ini: <blockquote class="tr_bq">  <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </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://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJaNgGXiE2fRakkiuqHIpbMDX_WUFqQeUpfb7GZKjrTakroInsGCb4Ys8-6h08gSMQP0JoC-KU7EDNdhZIiWb8ndC3hFd-T1pPWxWCxm-RbXy0d8AEKVwj0PUkFHyJ7Tr-NqhSAS3OpWS/s1600/best+blogger+tips.png'/></a> </b:if></b:if> </blockquote> Note: - change the 6 value from max-results=6 with the number of posts you want to be displayed. - If you want the related posts to be displayed on homepage too, remove the code in violet. Catatan: - Ubah nilai 6 dari  max-results=6 dengan jumlah posting yang ingin ditampilkan. - Jika Anda ingin related post  ini ditampilkan pada homepage juga, hapus kode warna  violet/ungu. Langkah 7. Simpan Template Enjoy :) Credit goes to: <a href="http://bloggerpluggins.org/" rel="nofollow" target="_blank">bloggerpluggins.org</a> . Modified by kivandanu <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=b9b83919-29a1-4dbf-940d-05cbeff21651" style="border: none; float: right;" /></div> </div>

Membuat Widget Related Posts dengan Thumbnail pada Blogger

Cara menambahkan Widget Related Posts dengan Thumbnail pada Blogger Sekarang di sini adalah cara yang mudah untuk menampilkan postin...

Automatic Recent Posts Slider With jQuery For Blogger

Now save your template.

Step 3 -Adding The Gadget

Now go to Page Layout

Add a Gadget > HTML/JavaScript

Paste below piece of code and save it.

<div id="slider"><br /><script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script><br /><script style="text/javascript"><br /> var numposts_gal = 6;<br /> var numchars_gal = 150;<br /> var random_posts = false; // random posts<br /></script><br /><!-- replace with your web address (marked with red color) --><br /><script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script><br /></div><br />

Now replace yourblog.blogspot.com with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things.

To change number of post find this var numposts_gal = 6; line in above code. (Code Line - 4)

If you want to change number of characters to show in description find this piece of code var numchars_gal = 150; (Code Line - 5)

Now save your all the changes and you are done.Visit your blog to see this beautiful slide.

Follow this tutorial to show this gadget only on specific page or only in homepage.

Your questions,queries and feedback are always welcome.Also if you need any help about customizing this gadget then feel free to ask me.I'll glad to help you.

Good day....

By: http://www.helperblogger.com/

Automatic Recent Posts Slider With jQuery For Blogger

Now save your template. Step 3 -Adding The Gadget Now go to Page Layout Add a Gadget > HTML/JavaScript Paste below piece of code and save...

Automatic Recent Posts Slider With jQuery For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="post hentry"><div class="separator" style="clear: both; text-align: center;"><a href="http://draft.blogger.com/blogger.g?blogID=2377571801251927013" name="8410303999780068786"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5y5g4ecZ8QF_K0DI25Nbz1PEpGOBp66j9K1fGhEl7gba_RInD5ln1sZOu3y26usyX9oNSZJWsMxyEVeEioQ0XdLYKeAv_9-I47DYbsUh0zHhdQprHEygzR4wo6sl1ixqvX3HJt77z9DM/s1600/recent-content-image-slider-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5y5g4ecZ8QF_K0DI25Nbz1PEpGOBp66j9K1fGhEl7gba_RInD5ln1sZOu3y26usyX9oNSZJWsMxyEVeEioQ0XdLYKeAv_9-I47DYbsUh0zHhdQprHEygzR4wo6sl1ixqvX3HJt77z9DM/s320/recent-content-image-slider-for-blogger.png" width="320" /></a></div><div class="post-body entry-content"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"> Recent posts slider is a best way to show of you blog's recent posts as a slide show.You may see the slider such slider in many wordpress blogs but when coming to blogger it is certainly not much seen.This widget is shared by Abu-Farhan and using my own tricks further I customized this plugin to works perfect with your blog.If you are thinking that customization's will be hard then you are wrong,this gadget is very easy to customize and very easy to add.You don't need to add images,text or any links like other sliders all is Automatic :D.  Here I am giving a tutorial about adding recent post slider to blogger.First take a preview on slider. <div style="text-align: center;">Live Demo ▼ </div> <div id="slider"><script src="http://code.helperblogger.com/easySlider.min.js"></script> <script> var numposts_gal = 6; var numchars_gal = 150; var random_posts = false; // random posts </script>  <script src="http://ajabingung.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div></div> <h3>How To Add This Slider To Blogger?</h3> <h4>Step 1 - Applying Styles</h4> <ol style="text-align: left;"><li>Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface It Is - Dashboard > Template)</li><li>As always download a copy of your template first.</li><li>Now find for ]]></b:skin></li><li>Add below code just before ]]></b:skin></li></ol></div> <pre><code>/* START EasySlider By helperblogger.com */ #slide-container { height: 360px; position: relative; width: 480px; } #slider { height: 360px; left: 25px; overflow-x: hidden; overflow-y: hidden; position: relative; width: 480px; font-family: calibri; } .slide-desc { background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0; color: #FFFFFF; padding: 10px; position: absolute; right: 0px; text-align: left; top: 0; width: 200px; z-index: 99999; } .slide-desc h2 { display: block; } .crosscol .widget-content { position: relative; } #slider ul, #slider li, #slider2 ul, #slider2 li { margin: 0; padding: 0; list-style: none; } #slider2 { margin-top: 1em; } #slider li, #slider2 li { /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width: 480px; height: 360px; overflow: hidden; } #prevBtn, #nextBtn, #slider1next, #slider1prev { display: block; width: 30px; height: 77px; position: absolute; left: -30px; text-indent: -9999px; top: 71px; z-index: 1000; } #nextBtn, #slider1next { left: 520px !important; } #prevBtn, #nextBtn, #slider1next, #slider1prev { display: block; height: 77px; left: 0; position: absolute; top: 132px; width: 30px; z-index: 1000; } #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a { display: block; position: relative; width: 30px; height: 77px; background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0; } #nextBtn a, #slider1next a { background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0; } /* numeric controls */ ol#controls { margin: 1em 0; padding: 0; height: 28px; } ol#controls li { margin: 0 10px 0 0; padding: 0; float: left; list-style: none; height: 28px; line-height: 28px; } ol#controls li a { float: left; height: 28px; line-height: 28px; border: 1px solid #ccc; background: #DAF3F8; color: #555; padding: 0 10px; text-decoration: none; } ol#controls li.current a { background: #5DC9E1; color: #fff; } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus { outline: none; } /* END EasySlider By helperblogger.com */ </code></pre> You can edit above CSS values as you wish.You may use our <a href="http://editor-btsnts.blogspot.com/" target="_blank">HTML Editor</a> to see a live preview of your changes.(Note - If you are editing this gadget in HTML Editor then you have to add all three codes simultaneously in editor) <h4>Step 2 - Adding JavaScript</h4> <ul style="text-align: left;"><li>Now find for </body> tag</li><li>Add below code just after/below </body> tag.</li></ul></div> <pre><code> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script> <script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); //]]> </script>  </code></pre> Now save your template. <h4>Adding The Gadget</h4><ul style="text-align: left;"><li>Now go to Page Layout</li><li>Add a Gadget > HTML/JavaScript</li><li>Paste below piece of code and save it.</li></ul> <pre><code><div id="slider"> <script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script> <script style="text/javascript"> var numposts_gal = 6; var numchars_gal = 150; var random_posts = false; // random posts </script>  <script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div> </code></pre> <ul style="text-align: left;"><li>Now replace <code>yourblog.blogspot.com</code> with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things.</li></ul> <ul style="text-align: left;"><li>To change number of post find this <code>var numposts_gal = 6;</code> line in above code. (Code Line - 4)</li></ul> <ul style="text-align: left;"><li>If you want to change number of characters to show in description find this piece of code <code>var numchars_gal = 150;</code> (Code Line - 5)</li></ul><div>Now save your all the changes and you are done.Visit your blog to see this beautiful slide.</div><div> </div><blockquote class="tr_bq">Follow this <a href="http://www.helperblogger.com/2012/03/how-to-displayhide-blogger-widgets-on.html" target="_blank">tutorial</a> to show this gadget only on specific page or only in homepage.</blockquote><div> </div><div>Your questions,queries and feedback are always welcome.Also if you need any help about customizing this gadget then feel free to ask me.I'll glad to help you.</div><div>Good day....</div></div>By: http://www.helperblogger.com/ <div style="clear: both;"></div></div><div class="post-footer"><div class="post-footer-line post-footer-line-1"></div><div class="post-footer-line post-footer-line-2"></div><div class="post-footer-line post-footer-line-3"></div></div></div></div>