Blog Tutorial Bisnis Online

Cara Membuat Carausel Gambar Bergerak Pada Blog

Hanya Sebuah Catatan bagaimana Cara Membuat Gambar bergerak dengan Script Carausel

Letakan di atas </head>
#carousel {background:#111;width: 970px; position: relative; float: left; margin: 0 0 10px;height:330px;overflow:hidden;border:1px solid #333}
#carousel .judul{margin-left:10px;font:18px Oswald;padding:5px;color:#fec700}
#carousel .container {position: absolute;left: 0px;width: 970px;overflow:hidden;}
#carousel ul{width:10000px;position: relative;overflow:hidden;margin-top:0px;}
#carousel ul li {display: inline; float: left; margin:1px 7px 2px 10px; padding:8px; width: 160px; overflow: hidden;height:258px;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}
#carousel .thumb{height:215px;width: 160px;}
#carousel  #previous_button { position: absolute; top:8px;right: 39px; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT6JFR4Pac2NY9F1WU2YHh-d_DPu6HN8r1FwajFbP9pbZ8eSQ3-DSS_MQNmyH4SCAEvHIANN-cV4Lr8LllEIgN063K7C3XPznEz_A9Wn-j-F0iBxvBZUiameX01QWZ3dTkaloLxhk5s4fD/s1600/paginate.png) no-repeat; background-position: 0 0; }
#carousel #next_button { position: absolute; top:8px; right:10px; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT6JFR4Pac2NY9F1WU2YHh-d_DPu6HN8r1FwajFbP9pbZ8eSQ3-DSS_MQNmyH4SCAEvHIANN-cV4Lr8LllEIgN063K7C3XPznEz_A9Wn-j-F0iBxvBZUiameX01QWZ3dTkaloLxhk5s4fD/s1600/paginate.png) no-repeat; background-position: -27px 0; }
#carousel #next_button:hover, #previous_button:hover { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
#carousel ul li a.slider_title{color:#ccc;display:block;text-align:center;font:bold 11px Arial}
#carousel ul li a.slider_title:hover{color:#fec700}


letakan di atas /head
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1TeNM8tJLGseoL7zoRDZI2WMi3yljcL-_zR3k_sPeRY6pVa1t3z96_7v_9cfJs7Kr1KdIrRbTtRSGg3HnUo9_DbKWQgs54wLyntl4DRBergGSI5ASmnKJfJUuXqUgjDPNqar6qPtOv1W1/s1600/no-video.gif";showRandomImg=true;aBold=true;summaryPost = 80;summaryPost1 = 240;numposts=12;numposts1=10;numposts2=8;Title1="Adventure";Title2="Action";Title3="Bike Game";Title4="Dress-Up";Title5="Strategy";Title6="Sport Game";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><div class="title">'+removeHtmlTag(postcontent,summaryPost1)+'... </div></h3></li>';document.write(trtd);j++}}function showrecentposts0(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li><div><img class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5><div class="title">'+removeHtmlTag(postcontent,summaryPost)+'... </div></div></li>';document.write(trtd);j++}}
function showrecentposts2(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
      for (var i = 0; i < numposts1; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var pcm;
        var posturl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
              }
        }
        for (var k = 0; k < entry.link.length; k++) {
              if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                pcm = entry.link[k].title.split(" ")[0];
                break;
              }
        }
        if ("content" in entry) {
              var postcontent = entry.content.$t;}
        else
        if ("summary" in entry) {
              var postcontent = entry.summary.$t;}
        else var postcontent = "";
        postdate = entry.published.$t;
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];
    for(var u2=0;u2<month.length;u2++){
        if(parseInt(m)==month[u2]) {
            m = month2[u2] ; break;
        }
    }
    var daystr = day+ ' ' + m + ' ' + y ;
    var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="160" height="210" class="Thumbnail thumbnail carousel " src="'+img[i]+'"/></a></div><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
    document.write(trtd);
    j++;
}

}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts2;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"><a href="'+posturl+'"><img class="column_img" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2></div>';document.write(trtd);j++}}
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1TeNM8tJLGseoL7zoRDZI2WMi3yljcL-_zR3k_sPeRY6pVa1t3z96_7v_9cfJs7Kr1KdIrRbTtRSGg3HnUo9_DbKWQgs54wLyntl4DRBergGSI5ASmnKJfJUuXqUgjDPNqar6qPtOv1W1/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h3>'+relatedpoststitle+'</h3>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 10px 10px 0;float:left;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="maskolis_img" src="'+thumburl[r]+'"/><br/><div style="width:127px;padding:0 10px;color:#ccc;height:38px;text-align:center;margin:0px 0px; font:bold 11px Arial; line-height:16px;text-shadow:1px 1px 1px #000">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>


ok selanjutnya Copy paste script di bawah ini di bawah <body>

<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
      </div>
<div class='clear'/>
<div id='carousel'>
<div class='judul'>Sakarepmu Judule</div>
<div id='previous_button'/>
<div id='next_button'/>
<div class='container'>
<ul>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>   
</ul><div class='clear'/>
</div>
<div class='clear'/>
</div>
<script type='text/javascript'>
            (function($) { $(document).ready(function(){
                $(&quot;#carousel .container&quot;).jCarouselLite({
                                            auto:0,
                                        scroll: 1,
                    speed: 400,   
                    visible: 5,
                    start: 0,
                    circular: false,
                    btnPrev: &quot;#previous_button&quot;,
                    btnNext: &quot;#next_button&quot;
                });
            })})(jQuery)   
</script>
</b:if></b:if>

sampai batas
       <div id='main-wrapper'>
Demikina catatan Cara Membuat Carausel Gambar Bergerak Pada Blog
Share:

Membuat Artikel Terkait Bergambar di bawah Postingan

Membuat Artikel Terkait Bergambar di bawah Postingan ( Related Posts )

 Letakan di atas ]]></b:skin>
copy yg di bawah ini
 #artikel-terkait a {color:#ddd;}  
#artikel-terkait ul {width:100%;margin-bottom:10px;padding:0px;list-style:none;margin-left: 0px;}
#artikel-terkait ul li {background: #111010;
float: left;
height: 204px;
margin: 0 7px 7px 0;
width: 280px;
font: 14px Open Sans;
text-align: center;
padding-top: 10px;
padding: 0;
border-bottom: 1px solid #262525;
transition: all 400ms ease-in-out;overflow: hidden;}
#artikel-terkait img {max-width: 100%;
width: 280px;
height: 180px;
opacity: 1;
padding: 0;
object-fit: cover;
background: none;
box-shadow: none;
transition: all 400ms ease-in-out;}
#artikel-terkait ul li:nth-child(3n+3) {margin-right:0px;}
      .hrecipe{line-height:1.7em;font-size:13px;margin:6px 0 0;padding:12px;
        background:#f8f8f8;border:none;color:#303641;overflow:hidden;}
   
]]></b:skin>

 Letakan di bawah
<b:else/><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
copy yg di bawah ini
<!-- ARTIKEL TERKAIT MULAI -->
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
              <div id='inikotak'>
                Related Posts
              </div>
              <div id='artikel-terkait'>
                <script type='text/javascript'>
//<![CDATA[
var ry='';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();
function related_results_labels(c)
    {
    for(var b=0;
    b<c.feed.entry.length;
    b++)
        {
        var d=c.feed.entry[b];
        titles[titlesNum]=d.title.$t;
        for(var a=0;
        a<d.link.length;
        a++)
            {
            if('thr$total'in d)
                {
                commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment
            }
            else
                {
                commentsNum[titlesNum]=rdisable
            };
            if(d.link[a].rel=="alternate")
                {
                urls[titlesNum]=d.link[a].href;
                timeR[titlesNum]=d.published.$t;
                if('media$thumbnail'in d)
                    {
                    thumb[titlesNum]=d.media$thumbnail.url
                }
                else
                    {
                    thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPkloxiikL5hhYWwIBx_ehZuJFbInEO7KTHavTwNKnuQoetSoQyOU1D1PW0Y8vigODJDM3PxxXNv71U3ffR2TmUf2afvt8zuDZeumyguWrpgq83x-yX96WbMW7KQx1kDxVHwhiyFP2XFLM/s1600/no+image.jpg'
                };
                titlesNum++;
                break
            }
        }
    }
}
function removeRelatedDuplicates()
    {
    var b=new Array(0);
    c=new Array(0);
    e=new Array(0);
    f=new Array(0);
    g=new Array(0);
    for(var a=0;
    a<urls.length;
    a++)
        {
        if(!contains(b,urls[a]))
            {
            b.length+=1;
            b[b.length-1]=urls[a];
            c.length+=1;
            c[c.length-1]=titles[a];
            e.length+=1;
            e[e.length-1]=timeR[a];
            f.length+=1;
            f[f.length-1]=thumb[a];
            g.length+=1;
            g[g.length-1]=commentsNum[a]
        }
    }
    urls=b;
    titles=c;
    timeR=e;
    thumb=f;
    commentsNum=g
}
function contains(b,d)
    {
    for(var c=0;
    c<b.length;
    c++)
        {
        if(b[c]==d)
            {
            return true
        }
    }
    return false
}
function printRelatedLabels(a)
    {
    var y=a.indexOf('?m=0');
    if(y!=-1)
        {
        a=a.replace(/\?m=0/g,'')
    }
    for(var b=0;
    b<urls.length;
    b++)
        {
        if(urls[b]==a)
            {
            urls.splice(b,1);
            titles.splice(b,1);
            timeR.splice(b,1);
            thumb.splice(b,1);
            commentsNum.splice(b,1)
        }
    }
    var c=Math.floor((titles.length-1)*Math.random());
    var b=0;
    if(titles.length==0)
        {
        dw+=rn
    }
    else
        {
        dw+=ry;
        dw+='<ul>';
        while(b<titles.length&&b<20&&b<maxresults)
            {
            if(y!=-1)
                {
                urls[c]=urls[c]+'?m=0'
            }
            if(commentYN=='yes')
                {
                comments[c]=' - '+commentsNum[c]
            }
            else
                {
                comments[c]=''
            };
            dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c].replace("/s72-c/","/s280/")+'" title="'+titles[c]+'"/></a></div><a href="'+urls[c]+'" title="'+titles[c]+'" rel="nofollow" class="rellu">'+titles[c]+'</a><div class="clear"></div></li></div>';
            if(c<titles.length-1)
                {
                c++
            }
            else
                {
                c=0
            }
            b++
        }
        dw+='</ul>'
    };
    urls.splice(0,urls.length);
    titles.splice(0,titles.length);
    document.getElementById('artikel-terkait').innerHTML=dw
};




//]]>
</script>
                <b:loop values='data:post.labels' var='label'>
                  <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=related_results_labels&amp;amp;max-results=15&quot;' type='text/javascript'/>
                </b:loop>
                <script type='text/javascript'>
                  var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
              </div>
              <div class='clear'/>
            </b:if>
            <!-- END -->
dengan Script yang sudah di Parsing
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #222;display:block;height:72px;position:relative;width:74px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.6}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}


Copy Paste kode Script di bawah ini taruh di atas </head>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined') thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNC26R2uCDSRD7pJ0mjBEhD1660rjTFHjVI490j3kAq8kEwlbk3gkqKBZR54M2DIFpW4gp3sZkJS5Mgkh1E5mBbdwrR9IPAMsuTKCmCdGUx_EPB14ZSUEA_Zh_clw9uVfaHr2vUqk3nyI/s400/noimage.png"}}if(relatedTitles[relatedTitlesNum].length>35)

relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined')splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<ul id="related-posts">');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a');document.write(' href="'+relatedUrls[r]+'"><span class="overlay" style="display:none;">'+relatedTitles[r]+'</span><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/></a></li>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

ok selanjutanya cari kode
 <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> di dalam template
Jika sudah ketemu lalu Copy pastekan Kode script di bawah ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h2>Judul bebas</h2>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2zLp2sepEYajn-7sxwWrnfiU6ayDWvha72k3i7q_j39yzEG6850scWS5JpcDME3QTToJScTUUfwIlfgzI81RS1h77WEfd1VcGJUqxh95eE4o-gIhg7ubQuPkT_J3cgzxKOIHTlEmIvbA/s1600/no+image.jpg&quot;;
var maxresults=7;
</script><script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined')thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNC26R2uCDSRD7pJ0mjBEhD1660rjTFHjVI490j3kAq8kEwlbk3gkqKBZR54M2DIFpW4gp3sZkJS5Mgkh1E5mBbdwrR9IPAMsuTKCmCdGUx_EPB14ZSUEA_Zh_clw9uVfaHr2vUqk3nyI/s400/noimage.png"}}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined')splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<ul id="related-posts">');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a');document.write(' href="'+relatedUrls[r]+'"><span class="overlay" style="display:none;">'+relatedTitles[r]+'</span><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/></a></li>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>

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

</b:if>
ok gaes jika sudah selesai simpan template anda
Share:

Update Driver Komputer Secara Automatis dengan Driver.Navigator.3.6.0.16914.Final

Salah satu cara Update Driver lama pada komputer yang sulit kita cari karena kita tidak mengetahui Hardwhere yg terpasang pada komputer kita, dengan menggunakan Driver Navigator semua driver yang terpasang di Komputer anda bisa terdeteksi dan bisa langsung di download secara otomatis
Driver.Navigator.3.6.0.16914.Final
Driver Navigator cara mudah menjaga driver Anda up to date, ini akan memperbaiki dan diselesaikan masalah driver Anda. Perangkat lunak Ini akan membantu Anda memindai hilang driver, download dan install semua driver up-to-date untuk komputer Anda. Driver Navigator 3.6.0.16914 menyediakan 4,000,000+ driver entri pada database mereka, Anda akan mendapatkan driver compactable dengan perangkat keras menggunakan di komputer Anda.

Driver.Navigator.3.6.0.16914.Final Download






Share:

Cara Membuat Widget Recent Post Bergambar Automatis

Posting kali ini Masih dalam Berbagi Tutorial Blogger yaitu Cara Membuat Widget Recent Posts Automatis dengan tampilan gambar seperti contoh di bawah ini.
Cara membuatnya sangat mudah silahkan ikuti langkah nya seperti berikut :
  • Login ke akun Blogger anda
  • Masuk ke dasbord blogger pilih Tata Letak
  • Pada menu dalam Tata Letak lalu klik Tambahkan Gadget
  • Pada kolom Dasar-dasar pilih html/javascript 
  • Copy paste kode script di bawah ini pada kolom Mengkonfigurasi html
Copy Paste Kode berikut
 <div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 70;
var imgFloat = 'left';
var myMargin = 9;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://gototbexy.blogspot.com/feeds/posts/summary?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script>


Membuat Widget Recent Post Bergambar Automatis
Share:

Cara Membuat Popular Post Bergambar Tanpa Judul

Tips kali ini saya berbagi trik bagaimana cara membuat Popular Posts bergambar pada blog atau web tanpa Judul dan keterangan saat di sentuh gambar bergerak.
Sebenarnya sudah banyak yang membuat tutorial seperti ini bagaimana cara membuat popular post bergambar pada blog hanya saja ini saya post sebagai catatan biar saya tidak lupa jika suatu saat saya memerlukanya.oke gaes langsung aja...yach
ikuti langkah di bawah ini Cara Membuat Popular Post Bergambar Tanpa Judul
  1. Login ke akun Blogger anda
  2. Masuk ke dasbord blogger pilih Tata Letak
  3. Pada menu dalam Tata Letak lalu klik Tambahkan Gadget
  4. pada kolom Dasar-dasar pilih Entri Terpopuler
  5. Selanjutnya anda Konfigurasikan seperti Gambar di bawah ini
  6. Selanjutnya masuk ke Edit Html pada menu Template
  7. Cari kode ]]></b:skin> lalu taruh kode berikut ini di atasnya
Copy paste kode di bawah ini..!!  
 .popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:15px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}
.popular-posts ul li img {padding:0px;height:67px;width:67px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;}
.popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

Keterangan untuk yg berwarna biru sesuaikan dengan lebar template anda untuk mengatur ukuran gambar.

Selanjutnya masih di dalam menu edit html
Cari kode seperti di bawah ini di dalam Template anda
 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
Tekan Ctrl+F agar lebih mudah dalam pencarian

Jika sudah ketemu silahkan anda ganti dengan kode di bawah ini
<b:widget id='PopularPosts1' locked='false' title='Popular Posts'
type='PopularPosts'>
<b:includable id='main'>
  <b:if
cond='data:title'><h2>
<data:title/></h2>
</b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
<li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a
expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'>
<a
expr:href='data:post.href'><data:post.title/></a></div>
<div
class='item-snippet'>
<data:post.snippet/></div>
</b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0'
expr:height='data:thumbnailSize' expr:src='data:post.thumbnail'
expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHh1kB5y8qTuBNQQTd8kgRhz43U6XNBoCZULT1CEukl0E-OLD33hohHHpaYalzkIYRODaphOlFXYByMEPrYRgiBXqb-8l5VNLCjg4v1M4tltJntjIJoccfQwF0qQqoMCMpIINQSREQFRA/s72-c/default.png'
 expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>
</div>
<b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0'
expr:height='data:thumbnailSize' expr:src='data:post.thumbnail'
expr:width='data:thumbnailSize'/>
                  </a>
                </div>
</b:if>
              <div class='item-title'>
<a
expr:href='data:post.href'><data:post.title/></a></div>
<div
class='item-snippet'>
<data:post.snippet/></div>
</div>
<div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
</b:loop>
    </ul>
<b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Lalu anda Save Template anda dan perhatikan perubahan pada Popular Post anda yang baru.
sekian dan terima kasih "selamat mencoba dan Semoga berhasil" dalam Membuat Popular Post Bergambar Tanpa Judul
    Share:

    Cara Download Driver Komputer Tanpa Software

    Cara mencari Driver Komputer tanpa menggunakan Software, Melalui pengalaman pribadi pada operas system windows XP trik ini bisa di gunakan jika di Komputer sudah terinstal driver Lan untuk bisa koneksi ke internet.
    ikuti langkah Tips dan Trik berikut ini..Panteeeung
    1. Klik kanan icon My Computer =>Properties
    2. di Properties Pilih tab hadware => DeviceManager
    3. Pada Menu DeviceManager Klik kanan driver yang tidak dikenali atau simbol ? berwarna kuning, kemudian pilih properties Pilih tabDetails, untuk lebih jelas lihat pada gambar di bawah

    Tekan Ctrl+c Copy pada kursor di bawah Device Intence Id
    Share:

    Menu

    Postingan Populer

    Facebook