nGe Hank

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-13f90a5odka7x" style="width:auto;border:none;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin[BORDER_COLOR] = #D580FE;
skin[ENDCAP_BG_COLOR] = #FEBFBF;
skin[ENDCAP_TEXT_COLOR] = #000;
skin[ENDCAP_LINK_COLOR] = #0000cc;
skin[ALTERNATE_BG_COLOR] = #33FF00;
skin[CONTENT_BG_COLOR] = #FFFFFF;
skin[CONTENT_LINK_COLOR] = #0000cc;
skin[CONTENT_TEXT_COLOR] = #1919B3;
skin[CONTENT_SECONDARY_LINK_COLOR] = #7777cc;
skin[CONTENT_SECONDARY_TEXT_COLOR] = #666666;
skin[CONTENT_HEADLINE_COLOR] = #FF0000;
skin[NUMBER_ROWS] = 4;
google.friendconnect.container.setParentUrl(/ /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: div-13f90a5odka7x,
   site: 14360626934896265745 },
  skin);
</script>

• http://img339.imageshack.us/img339/8822/71411271.jpg  Bisa anda ganti dengan alamat gambar anda yang ingin di tampilkan pada Daftar postingan yang tidak memiliki gambar.
• http://www.blogger.com/ Ganti dengan Alamat Blog anda

Membuat Widget Scrolling Related Post Di Blogspot  – Widget related post atau artikel terkait yang mau saya share kali ini sedikit berbeda dengan widget related post statis (diam) yang sering kita lihat seperti yang ada di blog Share With Irfan ini. Kali ini kita akan belajar membuat widget related post dengan fitur Carousel (Carousel Related Post). Keunikan widget related post ini ada pada scrolling dengan efek marquee dari thumbnail dan judul artikel sesuai label terkait dari posting yang ada. Dan apabila mouse kita sorotkan pada thumbnail atau judul (mouseover), maka secara otomatis akan memunculkan tulisan dari judul artikel. Jadi kalau kita melihat related post ini seperti layaknya kita melihat sebuah tayangan slide. Kalau di platform Wordpress mungkin lebih gampang lagi karena sudah tersedia wordpress related post slider plugin. Sementara untuk blogspot kita masih harus membuatnya secara manual.

Screenshot Carousel Related Post

  

<b:if cond=data:blog.pageType == &quot;item&quot;>

<style type=text/css>

#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}

#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}

#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}

#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}

.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}

.tooltip span.top{padding:20px 5px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfSUfKKW46m18dB9vZC9gQu4bwetymmmGLUFePddZ0zZSwIl2SA5jD4UK0OcN2TR6cTUa20rJCSmZQ03pMD1sAe7KhPIpovsc3DYYdbPDdIPw7tylwxNoRLUJcrkVzt9YASc0kozxcL0A/s1600/bt.png) no-repeat top;}

.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfSUfKKW46m18dB9vZC9gQu4bwetymmmGLUFePddZ0zZSwIl2SA5jD4UK0OcN2TR6cTUa20rJCSmZQ03pMD1sAe7KhPIpovsc3DYYdbPDdIPw7tylwxNoRLUJcrkVzt9YASc0kozxcL0A/s1600/bt.png) no-repeat bottom;}

</style>

<script type=text/javascript>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFXaLtmj-v3QTBTWvt3msQVlgXTkb_pHLrHOzG_NjfZ3A94e21Mn6H8QckjiaROnLH6QbIUzqpiY3oXiL30k8PfifSiWqXobIDBxJiVZTt1IZFN25GHTseur27dVQXMJu70_dbVki1AA/s1600/noimage.jpg;</script>

<script src=http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js type=text/javascript></script>

</b:if>

<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>

<b:if cond=data:blog.pageType == &quot;item&quot;>

<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=12&quot; type=text/javascript/></b:if></b:loop>

<h3>Related Posts</h3>

<marquee align=center behavior=alternate direction=left onmouseout=this.start() onmouseover=this.stop() scrollamount=2 width=100%>

<script type=text/javascript>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=10;

var relatedpoststitle=&quot;&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script></marquee>

</div><div style=clear:both/>

</b:if>

<a href="http://radiorodja.com/">

<img src="http://widget.radiorodja.com/logo.png" 

alt="Radio Rodja 756AM" /></a>

<a href="http://radiorodja.com/">

<img src="http://widget.radiorodja.com/rodja.gif" 

alt="Radio Rodja 756AM" /></a>