Monday, 29 December 2014

Cara Membuat Slider Header

Perhatikan baik-baik tutorial cara pemasangan slider ini sebagai berikut :

1. Setelah masuk ke dashboard blogger, pilih blog yang akan dipasang slider ini.

2. Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
Di back up dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.

3. Pertama yang harus Anda lakukan adalah membuat satu buah kolom kosong diatas blog post, seperti gambar di bawah ini (jika pada template yang Anda pakai sudah terdapat satu kolom kosong seperti gambar dibawah, langkah ini tidak perlu dilakukan) :




Caranya, letakkan kode berikut di atas kode ]]></b:skin>

/* Slide Content 
----------------------------------------------- */  
.slide-wrapper {padding:0 <span class="o4hk8d8jrdx4" id="o4hk8d8jrdx4_15" onclick="window.open; return true;" style="height: 12px;">auto</span>;margin:0 auto;width:auto;float: left;  
word-wrap: break-word; overflow: hidden;}   
.slide {color: #666666;line-height: 1.3em;}  
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  
.slide li {margin:0;padding-top:0;  
padding-right:0;padding-bottom:.25em;  
padding-left:0px;text-indent:0px;line-height:1.3em;}  
.slide .widget {margin:0px 0px 6px 0px;} 


Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

atau jika anda tidak menemukkan main-wrapper, bisa anda cari kode <!--Show the image only-->   lalu diatasnya ada kode  <b:else/>

nah kode dibawah ini anda letakkan diatas kode <b:else/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>  
      <div id='slide-wrapper'>  
<b:section class='slide' id='slide' preferred='yes'/>  
      </div>  
</b:if>  


Lalu Save template dulu, sekarang masuk ke Layout/Tata Letak, Anda cek apa sudah terpasang satu kolom di atas Blog Post? Jika sudah ada, masuk lagi ke Edit HTML. Kemudian masukkan kode berikut di atas kode ]]></b:skin>



/* Lofslidernews */
#slider{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f6f6),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#f6f6f6 0,#e2e2e2 100%);
border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;padding:10px;margin:4px;position:relative;overflow:hidden;width:760px;height:298px;}
.slider-main-outer{position:relative;height:100%;width:577px;z-index:3;overflow:hidden}
ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:705px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdmnANciGb1Dwy2cIluZhKsO8N9Bo5dgEMRYbUN5fF25qGMj4QVqrpQrgOEm5AZQ8XvxBY7F2ld9F4HSmZH0EuwfYfugEHoMh5CLt0th4wszGTG5SPGnWSFpOLWk4dsBVEBWnk6JWRKLw/s1600/transparant.png);padding:10px}
ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:block;margin:0}
ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:0}
ul.slider-main-wapper li .imgauto{width:705px;height:298px;overflow:hidden;margin:0;padding:0}
ul.slider-main-wapper{height:298px;width:705px;position:absolute;overflow:hidden;margin:0;padding:0}
ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:705px;float:left;margin:0;padding:0}
.slider-opacity li{position:absolute;top:0;left:0;float:inherit}
ul.slider-main-wapper li img{list-style:none;width:705px;height:330px;padding:0}
ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}
ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}
.slider-navigator-outer{position:absolute;right:-20px;top:11px;z-index:10;height:300px;width:200px;overflow:hidden;color:#333}
.slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0}
.slider-navigator li div{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#fff 0,#e2e2e2 100%)color:#444;text-shadow:1px 1px 1px #fff;height:56px;position:relative;margin:0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}
.slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;border:1px solid #999}
.slider-navigator li img{border:#ddd solid 1px;height:44px;width:60px;float:left;margin:5px 5px 5px 0}
.slider-navigator li.active img{border:#eee solid 1px}
.slider-navigator li.active h5{color:#0178d3}


Masih di Edit HTML, masukkan kode script berikut ini diatas </head>



<script src='https://m-code.googlecode.com/svn/ajax.googleapis.1.8.2.jquery.txt' type='text/javascript'/>
<script src='https://m-code.googlecode.com/svn/jquery.easing.txt'/>
<script type='text/javascript'>
//<![CDATA[

(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

$.event.special.mousewheel = {
    setup: function() {
        if ( this.addEventListener )
            for ( var i=types.length; i; )
                this.addEventListener( types[--i], handler, false );
        else
            this.onmousewheel = handler;
    },
    
    teardown: function() {
        if ( this.removeEventListener )
            for ( var i=types.length; i; )
                this.removeEventListener( types[--i], handler, false );
        else
            this.onmousewheel = null;
    }
};

$.fn.extend({
    mousewheel: function(fn) {
        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
    },
    
    unmousewheel: function(fn) {
        return this.unbind("mousewheel", fn);
    }
});


function handler(event) {
    var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
    
    event = $.event.fix(event || window.event);
    event.type = "mousewheel";
    
    if ( event.wheelDelta ) delta = event.wheelDelta/120;
    if ( event.detail     ) delta = -event.detail/3;
    
    // Add events and delta to the front of the arguments
    args.unshift(event, delta);

    return $.event.handle.apply(this, args);
}

})(jQuery);

/**
 * @version        $Id:  $Revision
 * @package        jquery
 * @subpackage    lofslidernews
 * @copyright    Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
 * @website     http://landofcoder.com
 * @license        This plugin is dual-licensed under the GNU General Public License and the MIT License 
 */
// JavaScript Document
(function($) {
     $.fn.lofJSidernews = function( settings ) {
         return this.each(function() {
            // get instance of the lofSiderNew.
            new  $.lofSidernews( this, settings ); 
        });
      }
     $.lofSidernews = function( obj, settings ){
        this.settings = {
            direction            : '',
            mainItemSelector    : 'li',
            navInnerSelector    : 'ul',
            navSelector          : 'li' ,
            navigatorEvent        : 'click',
            wapperSelector:     '.slider-main-wapper',
            interval               : 4000,
            auto                : true, // whether to automatic play the slideshow
            maxItemDisplay         : 5,
            startItem            : 0,
            navPosition            : 'vertical', 
            navigatorHeight        : 60,
            navigatorWidth        : 210,
            duration            : 600,
            navItemsSelector    : '.slider-navigator li',
            navOuterSelector    : '.slider-navigator-outer' ,
            isPreloaded            : true,
            easing                : 'easeInOutQuad'
        }    
        $.extend( this.settings, settings ||{} );    
        this.nextNo         = null;
        this.previousNo     = null;
        this.maxWidth  = this.settings.mainWidth || 600;
        this.wrapper = $( obj ).find( this.settings.wapperSelector );    
        this.slides = this.wrapper.find( this.settings.mainItemSelector );
        if( !this.wrapper.length || !this.slides.length ) return ;
        // set width of wapper
        if( this.settings.maxItemDisplay > this.slides.length ){
            this.settings.maxItemDisplay = this.slides.length;    
        }
        this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
        this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );    
        this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
        this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
        
        if( this.settings.navPosition == 'horizontal' ){ 
            this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
            this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
            this.navigatorOuter.height(    this.settings.navigatorHeight );
            
        } else {
            this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );    
            
            this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
            this.navigatorOuter.width(    this.settings.navigatorWidth );
        }        
        this.navigratorStep = this.__getPositionMode( this.settings.navPosition );        
        this.directionMode = this.__getDirectionMode();  
        
        
        if( this.settings.direction == 'opacity') {
            this.wrapper.addClass( 'slider-opacity' );
            $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
        } else { 
            this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
        }

        
        if( this.settings.isPreloaded ) {
            this.preLoadImage( this.onComplete );
        } else {
            this.onComplete();
        }
        
     }
     $.lofSidernews.fn =  $.lofSidernews.prototype;
     $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
    
     $.lofSidernews.fn.extend({
                              
        startUp:function( obj, wrapper ) {
            seft = this;

            this.navigatorItems.each( function(index, item ){
                $(item).click( function(){
                    seft.jumping( index, true );
                    seft.setNavActive( index, item );                    
                } );
                $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
            })
            this.registerWheelHandler( this.navigatorOuter, this );
            this.setNavActive(this.currentNo );
            
            if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
                this.registerButtonsControl( 'click', this.settings.buttons, this );

            }
            if( this.settings.auto ) 
            this.play( this.settings.interval,'next', true );
            
            return this;
        },
        onComplete:function(){
            setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );
        },
        preLoadImage:function(  callback ){
            var self = this;
            var images = this.wrapper.find( 'img' );
    
            var count = 0;
            images.each( function(index,image){ 
                if( !image.complete ){                  
                    image.onload =function(){
                        count++;
                        if( count >= images.length ){
                            self.onComplete();
                        }
                    }
                    image.onerror =function(){ 
                        count++;
                        if( count >= images.length ){
                            self.onComplete();
                        }    
                    }
                }else {
                    count++;
                    if( count >= images.length ){
                        self.onComplete();
                    }    
                }
            } );
        },
        navivationAnimate:function( currentIndex ) { 
            if (currentIndex <= this.settings.startItem 
                || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
                    this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
                    if (this.settings.startItem < 0) this.settings.startItem = 0;
                    if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
                        this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
                    }
            }        
            this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'), 
                                                {duration:500, easing:'easeInOutQuad'} );    
        },
        setNavActive:function( index, item ){
            if( (this.navigatorItems) ){ 
                this.navigatorItems.removeClass( 'active' );
                $(this.navigatorItems.get(index)).addClass( 'active' );    
                this.navivationAnimate( this.currentNo );    
            }
        },
        __getPositionMode:function( position ){
            if(    position  == 'horizontal' ){
                return ['left', this.settings.navigatorWidth];
            }
            return ['top', this.settings.navigatorHeight];
        },
        __getDirectionMode:function(){
            switch( this.settings.direction ){
                case 'opacity': this.maxSize=0; return ['opacity','opacity'];
                default: this.maxSize=this.maxWidth; return ['left','width'];
            }
        },
        registerWheelHandler:function( element, obj ){ 
             element.bind('mousewheel', function(event, delta ) {
                var dir = delta > 0 ? 'Up' : 'Down',
                    vel = Math.abs(delta);
                if( delta > 0 ){
                    obj.previous( true );
                } else {
                    obj.next( true );
                }
                return false;
            });
        },
        registerButtonsControl:function( eventHandler, objects, self ){ 
            for( var action in objects ){ 
                switch (action.toString() ){
                    case 'next':
                        objects[action].click( function() { self.next( true) } );
                        break;
                    case 'previous':
                        objects[action].click( function() { self.previous( true) } );
                        break;
                }
            }
            return this;    
        },
        onProcessing:function( manual, start, end ){             
            this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
            this.nextNo     = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);                
            return this;
        },
        finishFx:function( manual ){
            if( manual ) this.stop();
            if( manual && this.settings.auto ){ 
                this.play( this.settings.interval,'next', true );
            }        
            this.setNavActive( this.currentNo );    
        },
        getObjectDirection:function( start, end ){
            return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");    
        },
        fxStart:function( index, obj, currentObj ){
                if( this.settings.direction == 'opacity' ) { 
                    $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
                    $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
                }else {
                    this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
                }
            return this;
        },
        jumping:function( no, manual ){
            this.stop(); 
            if( this.currentNo == no ) return;        
             var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
            this.onProcessing( null, manual, 0, this.maxSize )
                .fxStart( no, obj, this )
                .finishFx( manual );    
                this.currentNo  = no;
        },
        next:function( manual , item){

            this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);    
            this.onProcessing( item, manual, 0, this.maxSize )
                .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                .finishFx( manual );
        },
        previous:function( manual, item ){
            this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
            this.onProcessing( item, manual )
                .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                .finishFx( manual    );            
        },
        play:function( delay, direction, wait ){    
            this.stop(); 
            if(!wait){ this[direction](false); }
            var self  = this;
            this.isRun = setTimeout(function() { self[direction](true); }, delay);
        },
        stop:function(){ 
            if (this.isRun == null) return;
            clearTimeout(this.isRun);
            this.isRun = null; 
        }
    })
})(jQuery)

 //]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6P9wiv54YYbfXVLsD3wG-IqYZReL9cjnUh1kQjKuR_OEn0QxO-psZyXEtZlTgNxdcU5p9_Pq1O3R1-ytRMCUpJg8-QlurVsC9nWh64UudWo1S0o48zhGQMZXBYCPl_Ed1xljCCzEY_8k/s1600/no+image+(1).jpg";
showRandomImg = true;
aBold = true;
summaryPost = 70;
summaryTitle = 20;

numposts = 10;

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;

    //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 style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</p></h3></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 < 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;

    //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><div><img width="60" height="44" class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5></div></li>';                    
        document.write(trtd);       
                
              j++;
    }
    
}

 //]]>
</script>


----------------------------------------------------------------------------------------------------------

Save templates lagi, pemasangan kode-kode di Edit HTML selesai. Sekarang Anda kembali ke Layout/Tata Letak. Masukkan kode di bawah ini ke dalam kolom kosong diatas Blog Post yang sudah Anda buat pertama kali, klik Add a Gadget >> HTML/Javascript

<ul class> <li class><div class='lof-main-wapper' id='slider'>
<div class='slider-main-outer'>
<ul class='slider-main-wapper'>
<script>                    
document.write("<script src=\"/feeds/posts/default/-/Hot on Week?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</ul>
</div>
<div class='slider-navigator-outer'>
<ul class='slider-navigator'>
<script>                    
document.write("<script src=\"/feeds/posts/default/-/Hot on Week?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</ul>

</div>
<script type='text/javascript'>
jQuery(document).ready(function($){    
    $('#slider').lofJSidernews({
        interval:6000,
        duration:800,
        mainWidth: 715,
        
        navigatorWidth: 200,
        maxItemDisplay:5,
        easing:'easeInOutQuad',
        auto:true,
        isPreloaded: false
    });
});    
</script></div>
<li><a href="http://contohskripsikti.blogspot.com/"><img src="http://i.picasion.com/pic61/573732bdec2a7a192c53e87dbd5f0dc8.gif" width="292" height="280" border="0" alt="" /></a><br /><a href="http://contohskripsikti.blogspot.com"></a></li></li></ul>

---------------------------------------------------------------------------------------------------

Save

Lalu untuk menyempurnakan, mungkin anda ingin menampilkan judul saja.  Anda cari kode ini

<Group description="Tabs Text"

Misalnya punya anda seperti ini

<Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#a2a2a2"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>

   </Group>

Anda hapus itu, lalu sebagai gantinya anda pastekan kode yang dibawah ini

<Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#5d5df8"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#cacafa"/>

   </Group>


Oke selamat, Slider header sudah sempurna...!!
Share:

Memberi Password Pada Postingan Blog / Lock Artikel

Memberi Password Pada Postingan Blog / Lock Artikel

Rafi Orilya, hai sobat semua kali ini saya akan buat artikel tentang cara mengamankan posting/artikel anda dari orang yang tidak dikehendaki. Atau mungkin postingan dengan syarat tertentu bagi yang ingin melihatnya.
Lagi sedih nih sob, maaf kalo ngga bener nulis artikelnya. Hmm..

Artikel/postingan merupakan hal yang akan ditemu ketika seseorang mencari suatu informasi.
Nah masalahnya ketika postingan itu bersifat rahasia bagaimana?
Kita perlu memberinya passwordkan?

Nah...
Kali ini saya akan berbagi tool untuk memberi password pada postingan anda, sehingga hanya orang yang mengerti passwordnya yang dapat membuka artikel tersebut.

Kelebihan :
[+] Lebih mengamankan post anda dari orang yang tidak diperkenankan melihatnya
[+] Lebih mudah dalam menggunakannya
[+] Lebih cepat dalam menguncinya

Kekurangan :
[+] Silahkan coba dahulu

Nah dimana toolnya?

Kami telah memasangnya pada blog ini, silahkan KLIK "Lock Your Post!" pada header diatas atau melalui link dibawah ini :
http://rafi-orilya.blogspot.com/p/lock-your-post-tool-password-posting_28.html


Semoga postingan kali ini bermanfaat bagi anda, silahkan laporkan kepada kami jika terjadi eror atau bug dari tools ini.
Jangan lupa kirimkan komentar yah, klik iklannya juga dong.

Sampai jumpa dipost selanjutnya

Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin
Share:

Sunday, 28 December 2014

Cara Membuat widget Tampil di Halaman Tertentu Saja

Jika anda tertarik, di bawah ini adalah cara-cara membuatnya :
Login dengan account blogger anda.
Kemudian menuju  layout >> Edit HTML
Jangan lupa centang expand widget template nya, karena kalau tidak kode di bawah nanti tidak akan keluar. Sebenarnya kita hanya perlu menambah kan 2 tag kode saja, lihat kode dibawah ini:


Pertama sekali perhatikan gambar dibawah ini :


Kita sudah mendapat kodenya, yaitu Translate1

Lalu kita cari kode itu pada Edit hml template.

lalu akan kita dapat kode lengkap kira-kira seperti ini.

---------------------------------------------------------------------------------------------------
<b:widget id='HTML1' locked='false' title='Translate1' type='HTML'><b:includable id='main'> <!-- only display title if it's non-empty --><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/> </b:includable></b:widget>
-------------------------------------------------------------------------------------------------

Lalu anda hapus mulai <b:includable id='main'>  sampai </b:widget>



Kemudian copypastekan kode dibawah ini sebagai gantinya

---------------------------------------------------------------------------------------------------
<b:includable id='main'><b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- only display title if it's non-empty --><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/> </b:if> </b:includable></b:widget>
------------------------------------------------------------------------------------------------------


Sehingga hasilnya akan menjadi seperti ini
--------------------------------------------------------------------------------------------------
<b:widget id='HTML1' locked='false' title='Translate1' type='HTML'><b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- only display title if it's non-empty --><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/> </b:if> </b:includable></b:widget>
-----------------------------------------------------------------------------------------------------


Lalu simpan template. Maka widget anda hanya akan tampil di homepage saja.
Share:

Kumpulan Script Tool Blog Terbaru dan Cara Memasangnya

Kumpulan Script Tool Blog Terbaru dan Cara Memasangnya

Kumpulan Script Tool Blog Terbaru dan Cara Memasangnya
Tool Blog

Rafi Orilya, Hai sob sudah lama tak jumpa nih. Sekitar beberapa minggu saya tidak post nih biasa nih banyak tugas sekolah numpuk. Tapi sekarang sudah liburan jadi sempetin dong buat post baru biar tambah banyak postingnya dan bermanfaat buat temen-temen semua.

Kali ini saya akan bagi-bagi script nih, sebelumnya saya pikir banyak blog yang menyediakan tool2 pada menu barnya. Ada code warna ada encrypt ada compress css dll, nah kali ini saya akan bagiin itu semua secara langsung bukan 1 postingan masing-masing biar cepet ya.

Kalau sudah paham maksud dari posting kali ini mari kita mulai bersama :

1. Memasang Tool Code Warna pada blog
kita siapkan dulu scriptnya, dibawah ini adalah scriptnya :

<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess">
<param value="http://www.2createawebsite.com/build/col.swf" name="movie">
<param value="high" name="quality">
<param value="#ffffff" name="bgcolor">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>


2. Memasang Tool Encryption pada blog
kita siapkan dulu scriptnya, dibawah ini adalah scriptnya :

<script language="JavaScript">
 function doencrypt(theform) { if (theform.code.value == "") { alert("Masukkan Kode Yang Ingin Di Encrypt Terlebih Dahulu!"); return false; } else { enctext=encrypt(theform.code.value); codetocopy="<script type='text/javascript'>\n"; codetocopy+="<!-- www.yondarkness.com HTML Encrypt -->\n"; codetocopy+="document.write(unescape('"+enctext+"'));\n";codetocopy+="<!-- Encrypt kode HTMLmu di http://www.yondarkness.com/p/tool-html-encryper.html -->\n"; codetocopy+="</script\>"; theform.ecode.value=codetocopy; theform.sac.disabled = false; } return false; } function sandc(thisform) { thisform.ecode.focus(); thisform.ecode.select(); copytext=thisform.ecode.createTextRange(); copytext.execCommand("Copy"); alert("HTML tersimpan di clipboadr, silakan kalian paste di tempat yang kalian inginkan!"); } function encrypt(tx) { var hex=''; var i; for (i=0; i<tx.length; i++) { hex += '%'+hexfromdec(tx.charCodeAt(i)) } return hex; } function hexfromdec(num) { if (num > 65535) { return ("err!") } first = Math.round(num/4096 - .5); temp1 = num - first * 4096; second = Math.round(temp1/256 -.5); temp2 = temp1 - second * 256; third = Math.round(temp2/16 - .5); fourth = temp2 - third * 16; return (""+getletter(third)+getletter(fourth)); } function getletter(num) { if (num < 10) { return num; } else { if (num == 10) { return "A" } if (num == 11) { return "B" } if (num == 12) { return "C" } if (num == 13) { return "D" } if (num == 14) { return "E" } if (num == 15) { return "F" } } }
</script>
<br />
<div style="text-align: justify;">
<br /></div>
<form name="pageform" onsubmit="return doencrypt(this);">
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr><td height="28" width="924"><b>Masukan HTML kalian disini:</b></td></tr>
<tr><td height="21" width="931"><textarea cols="68" name="code" rows="11" style="border: 1px solid rgb(9, 58, 107); outline: none; width: 100%;"></textarea></td></tr>
<tr><td height="21" width="931"><input onclick="doencrypt(pageform);" style="float: left;" type="submit" value="Encrypt!" /></td></tr>
<tr><td width="956"></td> </tr>
<tr><td width="956"><textarea class="toolbot" cols="68" name="ecode" onclick="this.focus();this.select();" readonly="readonly" rows="11" style="border: 1px solid rgb(9, 58, 107); outline: none; width: 100%;"></textarea></td></tr>
<tr> <td width="956"><input disabled="true" name="sac" onclick="sandc(pageform);" style="float: left;" type="button" value="Select And Copy" /></td></tr>
</tbody></table>
<br />
<script type="text/javascript">
document.write(unescape('%3C%64%69%76%20%73%74%79%6C%65%3D%22%74%65%78%74%2D%61%6C%69%67%6E%3A%20%6A%75%73%74%69%66%79%3B%22%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%79%6F%6E%64%61%72%6B%6E%65%73%73%2E%63%6F%6D%2F%32%30%31%34%2F%30%35%2F%63%61%72%61%2D%6D%65%6D%62%75%61%74%2D%74%6F%6F%6C%2D%68%74%6D%6C%2D%65%6E%63%72%79%70%74%65%72%2D%64%69%2D%62%6C%6F%67%2E%68%74%6D%6C%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%44%61%70%61%74%6B%61%6E%20%74%6F%6F%6C%20%65%6E%63%72%79%70%74%65%72%20%6B%61%6C%69%61%6E%20%73%65%6E%64%69%72%69%20%64%69%20%59%6F%6E%64%61%72%6B%6E%65%73%73%3C%2F%61%3E%3C%2F%64%69%76%3E%0A%3C%2F%66%6F%72%6D%3E%0A'));
</script></form>


3. Memasang Tool Compress CSS pada blog
kita siapkan dulu scriptnya, dibawah ini adalah scriptnya :

<div style="text-align: center;">
<b><span class="Apple-style-span" style="color: red; font-size: large;"> Blog Tools CSS Compressor</span></b></div>
<script type="text/javascript">
       var mymode = "normal";
</script>
</div>
</div>
<br />
<b>Compression mode:</b> (<b><a href="javascript:void(0)">?</a></b>)
<input name="mode" onclick="Javascript:comp_whatMode('light')" type="radio" value="light" /> Light
<input checked="checked" name="mode" onclick="Javascript:comp_whatMode('normal')" type="radio" value="normal" /> Normal
<input name="mode" onclick="Javascript:comp_whatMode('super')" type="radio" value="compact" /> Super Compact
<b>Comments handling:</b> (<b><a href="javascript:void(0)">?</a></b>)
<input name="comments" type="radio" value="0" /> Don't strip any comments
<input name="comments" type="radio" value="1" /> Strip ALL comments
<input checked="checked" name="comments" type="radio" value="2" />
Strip comments at least <input name="chars" size="1" type="text" value="4" />
chars long (NOT counting line breaks within comment)
<br />
<center>
<div style="font-family: Arial; font-size: 85%; margin-top: 5px;">
<a href="http://www.rafi-orilya.blogspot.com" target="_blank" title="Blog Tools"> <b>Insert CSS code:</b> </a>
</div>
</center>
<center>
<textarea class="csscodearea" cols="50" name="script" rows="15" style="height: 450px;"></textarea></center>
<br />
<center>
<input style="font-weight: bold;" type="submit" value="Compress-it!" />
<input type="reset" value="Reset form" /></center>
<br />
<div class="sub" id="sub-content">
<div class="user-tools sub">
<div class="search-form">
</div>
</div>
</div>
<center>
<span class="Apple-style-span" style="font-family: 'trebuchet ms'; font-size: x-small; line-height: 20px;">Rafi Orilya Groups |<a href="http://rafi-orilya.blogspot.com" target="_blank">Get This Widget</a>&nbsp;|</span></center>

4. Memasang Tool Cek Kecepatan Blog
kita siapkan dulu scriptnya, dibawah ini adalah scriptnya :

<center>
<form action="http://www.iwebtool.com/tool/tools/speed_test/speed_test.php" method="get" name="pageform" onsubmit="return validate(this);" target="pageframe">
<table border="0" style="border-collapse: collapse;"><tbody>
<tr> <td height="91" valign="top"><span style="font-size: large;">
</span>
<br>
<table class="tooltop" style="border-collapse: collapse; height: 76px;"><tbody>
<tr> <td><span style="font-size: large;">
</span>
<br>
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr> <td colspan="5" valign="top"><span style="font-size: x-small;"><b>Your domain(s): </b></span><span style="font-size: x-small;">Enter each address on a new line (Maximum 10)</span></td> </tr>
<tr> <td colspan="4" valign="top"><textarea name="domain" rows="11" style="height: 200px; width: 375px;"></textarea></td> <td></td> </tr>
<tr> <td><input style="float: left;" type="submit" value="Check!"></td> <td><span style="font-size: xx-small;">(eg. iwebtool.com)</span></td> <td></td> <td colspan="2"></td> </tr>
</tbody></table>
</td> </tr>
</tbody></table>
</td> </tr>
<tr> <td><iframe class="toolbot" frameborder="0" height="251" name="pageframe" width="100%"></iframe></td> </tr>
<tr><td height="39"><br></td></tr>
</tbody></table>
</form>
</center>


################

Nah udah disiapkan semua scriptnya diatas, sekarang cara pasangnya :
1. Masuk blogger
2. Buat post baru/Laman Baru
3. Pilih HTML (Bukan Compose)
4. Copy paste script-script yang sudah disiapkan diatas tadi semuanya.
5. Publish post

Selesai

Mudahkan sob?
Memang sebenernya mudah sih tapi ya kadang kita malas melakukan sesuatu yang mudah karena belum mencoba.
Yap! Mulailah mencoba dari apa yang belum kita tahu maka kita akan selangkah lebih maju!

Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin
Share:

Cara Membuat Kolom Grid Ganti Postingan Biasa di Blog

Cara Membuat Kolom Grid Ganti Postingan Biasa di Blog

Cara Membuat Kolom Grid Ganti Postingan Biasa di Blog    -Seperti biasa, masuk dari edit template.

Lalu anda cari kode     </head> 


Lalu letakkan kode dibawah ini keatasnya:






<script src="http://m-code.googlecode.com/svn/jquery.txt"></script>
<script src="http://m-code.googlecode.com/svn/jquery-migrate.txt"></script>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
    var width = 200;
    var height = 170;
    var placeholder = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgShiaTJuXXXnDloJ8DaGQTglaT6Gqdin1VqkR88WKbRNR1HD7VaiIqIwvfLx3V1plWCppk3ITqY3NnWq7prfs8dxhV_szS51gubCn_eSwLHSyRmvbFGdKMHF4-EhY8beepzZWSaacf6oc/s1600/no-thumb.png';
    var margins = "0px 0px 10px 10px";
    var fitThumb = 1;
    var titleTopPadding = 5;
    var titleBottomPadding = 8;
    var titleLeftRightPadding = 5;
    var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';
    $('.post-body').each(function(n, wrapper) {
        var wrapper = $(wrapper);
        var image = $(wrapper).find('img').first();
        var link = wrapper.parent().find('h3 a');
        var linkURL = link.attr('href');
        var linkTitle = link.text();
        $(link).remove();
        wrapper.empty();
        if (image.attr('src')) {
            var thumbHeight = image.attr('height');
            var thumbWidth = image.attr('width');
            var thumbParent = $(image).parent();
            wrapper.append(thumbParent);
            if (fitThumb) {
                image.attr({
                    src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width + '-c')
                    });
                image.attr('width', width).attr('height', height);
            } else {
                image.attr({
                    src: image.attr('src').replace(/s\B\d{3,4}/, 's' + width)
                    });
                image.attr('width', width);
                var changeHeight = (thumbHeight / thumbWidth * width).toFixed(0);
                image.attr('height', changeHeight);
            }
        } else {
            var image = $('<img>').attr('src', placeholder).attr('height', height).attr('width', width);
            var thumbParent = $('<a>').append(image).appendTo(wrapper);
        }
        thumbParent.attr('href', linkURL).css('clear', 'none').css('margin-left', '0').css('margin-right', '0').addClass('postThumbnail');
        var thumbTitle = $('<div>').prepend(linkTitle).css('padding', titlePadding).css('opacity', '0.9').css('filter', 'alpha(opacity=0.9)').css('width', width).appendTo(thumbParent);
        var ptitleHeight = thumbTitle.height();
        var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
        thumbTitle.css('margin-top', '-' + summary + 'px');
        wrapper.css('float', 'left').css('height', height).css('width', width).css('margin', margins).css('overflow', 'hidden');
    });
    $('#blog-pager').css('clear', 'both');
});
function hideLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length;++i) {
        images[i].onmouseover = function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}
if (window.addEventListener) {
    window.addEventListener('load', hideLightbox, undefined);
} else {
    window.attachEvent('onload', hideLightbox);
}
//]]>
</script>
<style>
.post {
    border-bottom: 0 dotted #E6E6E6;
    margin-bottom: 0;
    padding-bottom: 0;
}
h2,.post-footer {
    display: none;
}
a.postThumbnail div {
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
    background: rgb(125,126,125);
/* Old browsers */
    background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;
    #7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
}
a.postThumbnail:hover div {
    display: block;
}
.post-body img {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.post-body img:hover {
    -ms-filter: &quot;
    progid: DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;
    ;
filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
}
</style>
</b:if>
Share:

Saturday, 27 December 2014

Januari 2015, Samsung Berencana Merilis Smartphone Tizen

Samsung Z1 - Setelah sekian lama sejak beredar berita kehadiran smartphone samsung berbasis Tizen, kini akhirnya muncul ke permukaan bocoran tentang smartphone Samsung Z1 yang akan rilis pada januari 2015 mendatang. Kabarnya samsung memulai peluncuran pertamanya di India pada 18 januari 2015 kemudian berlabuh ke Cina dan Korea Selatan.
Menurut informasi yang beredar, smartphone samsung Z1 Tizen merupakan salah satu ponsel Low-End dengan spesifikasi sederhana. Memiliki layar beresolusi 800x480 pixel di dukung prosesor dual core 1.2Ghz CPU dan RAM sebesar 768 MB saja. 4 GB penyimpanan internal dan dapat diperluas menggunakan slot kartu MicroSD. Ketahanan batrai tertulis sebesar 1.500 mAH.

Samsung Z1 akan menggunakan slot kartu dual sim dan fitur 3G, bluetooth 4.0, GPS, Radio FM, Kamera belakang 3 mega-pixel dilengkapi flash dan kamera depan hanya 0,3 mega-pixel. Untuk harga smartphone dengan spesifikasi tersebut.

Meskipun belum tentu benar adanya kabar tentang smartphone ini, terdengar kalau samsung bakal mematok harga Samsung Z1 Tizen sebesar $90 atau setara Rp. 1.080.000. Cukup terjangkau juga.

Sumber : GSM Arena
Share:

Cara Terbaru Membuat Slider Carousel Berdasarkan Label di Footer Blog

Cara Terbaru Membuat Slider Carousel Berdasarkan Label di Footer Blog
Cara Terbaru Membuat Slider Carousel Berdasarkan Label di Footer Blog -  Anda mungkin bingung mengikuti tutorial blog lain, sebab semua kode-kode yang mereka suruh untuk anda cari tidak ketemu, sehingga akhirnya anda tidak berhasil mewujudkannya. Tapi dengan mengikuti tutorial ini dijamin, pasti anda akan berhasil.



1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4.Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
=======================================================================

        #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBMdserY2mhG-gTYvkB99YywpqHhT1qRAO7Ch76t0nWWHCB5OacXD3UJg-jotdLc2njuPuHkeXjzC7H4xYcA8LeN7wyG6GoBgRPgBbIymE7NdIjn3xcS4s2MgppsufQJdE_nCf85mHKZU/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvsttBBJ1Z9lmiMR94vReNLZW3_gBcRcuGQMYN8Rz19AVaXDc7Q54yMvtZ5yqMqawh0gYmtFPC8OM5jNuvc-85z5LnlAklslxIEPMOfQ27bsoLybzSgbZ9O9ajGnr22J0ejyq1VLVmn7U/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLl4V882zQf-awk7wtr63VQzJnjLhYbDxiY5BcKWfecgaJmdcewmSpyoJzJ8MdSxWpGG_vL3x2NkVl6thRIHNJE9ZQQOdkxbyxE-cizygFg5Jo68lwuXW2dGQNy5k_KlwiEL5OYDFK2d0/s1600/prevs.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuPHTOz_Bv5hZZuoJhRdLe-ceaY_l2OeERKM7uJCA2I1nzBWoQnxMo-w6h4Er2fGAFEoOtieFv4DQMGeKNTMYVt98_JazKPYjfNt8k2nHzsx2X8g6NOKysyQqd0l6y4LIMQ22AAnxlqfE/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6A6PCXbO1N7IvBcr2FKnd3T6PU3J5xeBykRXwZPogbKaK_U1Ko_h0KH8Oe-xEkS70W-YlNYcZTAyGvdJoGbfpOlXWo6TqyDUmLLZA6dDvmFt5XH-TaG3TsEXyRoyn5ZEv1JOHO8LAQ1E/s1600/nexts.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6XQmmNXTIvH-w8ljVGJwVAj1crmVd5j7xwqXjnRKEFwoL4_FwrD5rvgIrzn1XCPE3BS83E5uXg8Ywg7Q3HCPK3b-hJCtaZPJtujyJ7xTQTVJB5PlqGwPcjbrGDtTL2bts_tyv1nTGvJ8/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}
========================================================================

Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

 ========================================================================
<script src='http://m-code.googlecode.com/svn/ajax.google%20apis.txt' type='text/javascript'/>
<script src='https://m-code.googlecode.com/svn/Carousel%20slider%20js.txt' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-2Wlm5Mqg9l0xZGNiO7gHn6vILYvJa7icC5LaxUm3NVicoyS3lw85IJQ3prq-4HT6WN4HZ5hHXIA7UPlMmx8ReD4CyTTndcrZudS5GbhI2QM5TG_aBpNAIJ2bJU75EsfiYdWqf42euP0/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

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();
document.write('<ul>');
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="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
=======================================================================
 Keterangan :

Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).
Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode  </footer>, kemudian letakkan kode berikut ini dibawahnya :
=======================================================================
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>    
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,    
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)    
</script>
</b:if> 
=======================================================================
Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.
Share:

Friday, 26 December 2014

Kata - Kata atau Ucapan Selamat Tahun Baru 2015

Perayaan tahun baru 2015 tinggal menghitung hari saja dan sudah banyak sekali aktifitas dari masyarakat untuk merayakannya. Banyak persiapan mulai dari membeli kembang api, menentukan tujuan ke tempat wisata, bahkan menyiapkan ucapan selamat tahun baru buat orang tua, saudara, teman atau kekasih.

Seperti pada tahun - tahun sebelumnya, selain menikmati liburan panjang, banyak sekali seseorang meluangkan waktunya hanya sekedar untuk mengucapkan selamat tahun baru dengan cara mencari di internet atau merangkai kata - kata sendiri yang sekiranya kreatif dan menarik untuk dibaca.


Ucapan Selamat Tahun Baru 2015
Pada kesempatan kali ini, saya mencoba membagikan beberapa ucapan selamat tahun baru 2015 yang mungkin bisa kalian gunakan. Dengan harapan bisa membantu kalian yang sedang mencari atau merangkai namun masih bingung harus membuat tulisan yang seperti apa. Daripada bengong, berikut runtutan ucapan itu:

Satu tahun sudah kita melewati hari-hari dengan penuh suka dan cita
Tidak berhenti untuk selalu berbuat yang terbaik demi sesama
Namun pasti ada kekurangan atau kesalahan yang mungkin tidak disengaja
Oleh karena itu, mudah-mudahan ditahun 2015 ini kita bisa menjadi lebih baik lagi dari sebelumnya

Tahun 2014 sudah berlalu
Kini telah hadir Tahun Yang Baru
Tahun 2015 adalah Tahun yang akan kita lalui, dan
Semoga kita semua bisa merubah hidup menjadi lebih baik lagi

Untuk kamu kekasih hati yang jauh di sana
Maafkan Aku yang tidak bisa menemuimu meski hanya sekedar tegur sapa
Namun jangan kawatir, di tahun 2015 ini
Aku pasti menyambutmu dengan sepenuh hati.Love You kasih

Semua kenangan buruk selama 2014, aku harap kalian buang jauh-jauh
Tanpa menyimpan sedikitpun dendam dalam hati
Sebab di tahun 2015 ini, akan ada lembaran baru
Yang mana semuanya kupastikan menjadi lebih baik lagi

Tahu tempe terbuat dari kedelai
Habis itu di cocolin pakek sambal terasi
Kalau terasa pedas minum saja ES
Habis itu hapi hapi merayakan tahun baru 2015

satu Detik telah berubah menjadi satu menit
begitu pula satu menit sudah berganti satu Jam
tidak terkecuali Hari berganti minggu
Minggupun sudah berganti bulan
Satu Bulan sudah beranjak menjadi satu tahun
tak terasa tahun 2014 berlalu dan berganti tahun 2015
dengan begitu, selamat tahun baru sobat

Malam ini ‘kan berlalu,
minggu ini ‘kan beranjak,
bulan ini akan pergi,
tahun ini ‘kan meninggalkan.
Sejarah kehidupan, catatan suka dan duka,
menyongsong tahun baru.
Selamat tahun baru 2012.
Semoga selalu jaya dan sejahtera.

hari berganti
bulan berganti
tahun pun berganti
tahun baru harapan baru
tetap semangat
masa lalu adalah kenangan
hari ini adalah goresan
hari esok adalah harapan
selamat tahun baru 2013
selamat tinggal kenangan
selamat datang harapan
Share:

Thursday, 25 December 2014

Daftar Lagu Tembang Kenangan Tahun 70, 80an Terpopuler

Daftar Lagu Tembang Kenangan Tahun 70, 80an Terpopuler - Tidak selamanya lagu indonesia terbaru dan terpopuler saat ini bisa memendam dalam-dalam lagu yang sempat populer di era tahun 70 dan 80an. Sangat banyak sekali daftar lagu tembang kenangan yang memiliki lirik lagu romantis dan berirama syahdu kala itu. Sebut saja lagu berjudul "Senja Di Batas Kota yang dinyanyikan oleh Erni Johan, "Andaikan Kau Datang" ciptaan Koes Plus, "Teluk Bayur" yang dibawakan oleh Rani Pancarani dan lain sebagainya. Semua itu merupakan lagu paling ngetop sampai saat ini dan masih sering terdengar di banyak tempat.
Daftar Lagu Tembang Kenangan Tahun 70, 80an
Secara pribadi, saya sangat menikmati mendengarkan lagu-lagu tembang kenangan tersebut. Sebab, lirik dan irama lagunya bisa menyentuh hati. Tidak terkecuali ayah saya yang sering meminta agar menncarikan lewat Internet. Hemm jadi bingung mau nyari lagu apa saja. Tapi setelah mencari melalui google, akhirnya saya menemukan beberapa website yang menyediakan download lagu tembang kenangan gratis. Selengkapnya bisa kalian lihat sendiri di bawah ini.

Daftar Lagu Tembang Kenangan Tahun 70, 80an Terpopuler

  1. Andaikan Kau Datang - Koes Plus
  2. Senja Di Batas Kota - Ernie Johan
  3. Jangan Biarkan Lagu Nostalgia
  4. tembang kenangan ne
  5. Teluk BayurRani Pancarani
  6. Angin Malam - Broery Marantika
  7. tembang nostalgia - agin malam
  8. Sunda Kelapa Harbor
  9. Dalam Kerinduan - The Mercys
  10. Julie - Julio Bernardo Euson
  11. Bandar Jakarta - Keroncong
  12. Cintaku Cintamu - Harry VH Mety Baan
  13. Apanya Dong - Euis Darliah
  14. Will Go To Jakarta
  15. Di Balik Rindu Ada Dusta - Jamal Mirdad
  16. Hati Yang Terluka - Broery Marantika
  17. Semua Bisa Bilang - Rani
  18. Exotic Oldtown
  19. Jangan Ditanya - Farid Hardja
  20. Kr Romantika - Mus Mulyadi
  21. Air Mata - Lilis Suryani
  22. gembala sapiRani Pancarani
  23. Aku Melangkah Lagi - Vina Panduwinata
  24. Nia DaniatyUntuk Kau Di Sana
  25. Go To Pangandaran West - Java Indonesia
  26. Lembah Biru - Andi Meriem Matalatta
  27. Putus Cinta Di Batas Kota - Titiek Sandora
  28. Di Sini Di Batas Kota Ini - Tomy J Pisa
  29. Sunda Kelapa Harbor
  30. KASMARAN - Iga Mawarni Lagu kenangan
  31. tembang nostalgia - mimpi sedih
  32. Hati Seorang Kawan Baru - Hetty Koes Endang
  33. Pertemuan - Indonesian Pop Nostalgia
  34. One More Try - Reggae Disco Remix
Daftar Lagu Tembang Kenangan di atas bisa kalian unduh secara gratis melalui website rujukan yang ada di bawah ini:
http://www.listube.com/#connect=A2n
Semoga Bermanfaat.
Share:

Saturday, 20 December 2014

Kumpulan Daftar Lagu Daerah Indonesia Lengkap

Daftar Lagu Daerah Indonesia Lengkap - Sekali lagi, sebagai warga negara indonesia yang baik dan mengaku cinta tanah air, sebaiknya mengenali lagu-lagu daerah yang ada di seluruh pelosok Negri ini. Sebelumnya saya juga pernah menginformasikan tentang macam-macam rumah adat yang ada di Indonesia sebagai salah satu bentuk kecintaan juga terhadap tanah air. Tujuannya tidak lain adalah untuk mengajak kalian semua agar mengenal lebih jauh lagi terhadap macam-macam lagu daerah yang ada di bumi pertiwi ini. Apa saja lagu-lagi itu, berikut daftar selengkapnya.
http://karangtarunabhaktibulang.blogspot.com/2014/12/kumpulan-daftar-lagu-daerah-indonesia.html

Kumpulan Daftar Lagu Daerah Indonesia Lengkap

Ampar-Ampar Pisang –> provinsi Kalimantan Selatan
Anak Kambing Saya –> provinsi NTT
Angin Mamiri –> provinsi Sulawesi Selatan
Anju Ahu –> provinsi Sumatra Utara
Apuse –> provinsi Papua
Ayam Den Lapeh –> provinsi Sumatra Barat
Barek Solok –> provinsi Sumatra Barat
Batanghari –> provinsi Jambi
Bolelebo –> provinsi Nusa Tenggara Barat
Bubuy Bulan –> provinsi Jawa Barat
Bungong Jeumpa –> provinsi NAD
Burung Tantina –> provinsi Maluku
Butet –> provinsi Sumatra Utara
Cik-Cik Periuk –> provinsi Kalimantan Barat
Cing Cangkeling –> provinsi Jawa Barat
Dago Inang Sarge –> provinsi Sumatra Utara
Dayung Palinggam –> provinsi Sumatra Barat
Dek Sangke –> provinsi Sumatra Selatan
Desaku –> provinsi NTT
Esa Mokan –> provinsi Sulawesi Utara
Gambang Suling –> provinsi Jawa Tengah
Gek Kepriye –> provinsi Jawa Tengah
Goro-Gorone –> provinsi Maluku
Gundul Pacul –> provinsi Jawa Tengah
Haleleu Ala De Teang –> provinsi NTB
Fluhatee –> provinsi Maluku
llir-llir –> provinsi Jawa Tengah
Indung-Indung –> provinsi Kalimantan Timur
Injit-Injit Semut –> provinsi Jambi
Jali-Jali –> provinsi DKI Jakarta
Jamuran –> provinsi Jawa Tengah
Kabile-bile –> provinsi Sumatra Selatan
Kalayar –> provinsi Kalimatan Tengah
Kambanglah Bungo –> provinsi Sumatra Barat
Kampung nan Jauh Di Mato –> provinsi Sumatra Barat
Ka Parak Tingga –> provinsi Sumatra Barat
Keraban Sape –> provinsi Jawa Timur
Keroncong Kemayoran –> provinsi DKI Jakarta
Kicir-Kicir –> provinsi DKI Jakarta
Kole-Kole –> provinsi Maluku
Lalan Belek –> provinsi Bengkulu
Lembah Alas –> provinsi NAD
Lipang Lipangdang –> provinsi Lampung
Lisoi –> provinsi Sumatra Utara
Macep-cepetan –> provinsi Bali
Madedek Magambiri –> provinsi Sumatra Utara
Malam Baiko –> provinsi Sumatra Barat
Mande-Mande –> provinsi Maluku
Manuk Dadali –> provinsi Jawa Barat
Ma Rencong –> provinsi Sulawesi Selatan
Mejangeran –> provinsi Baii
Meriam Tomong –> provinsi Sumatra Utara
Meyong-Meyong –> provinsi Bali
Moree –> provinsi NTB
Na Sonang Dohita Nadua –> provinsi Sumatra Utara
Ngusak Asik –> provinsi Bali
Nuluya –> provinsi Kalimantan Tengah
0 Ina Ni Keke –> provinsi Sulawesi Utara
Ole Sioh –> provinsi Maluku
0 Re Re –> provinsi NTB
Orlen-Orlen –> provinsi NTB
0 Ulate –> provinsi Maluku
Pai Mura Rame –> provinsi NTB
Pakarena –> provinsi Sulawesi Selatan
Palu Lempong Pupoi –> provinsi Kalimantan Tengah
Panon Hideung –> provinsi Jawa Barat
Paris Barantai –> provinsi Kalimantan Selatan
Peia Tawa-Tawa –> provinsi Sulawesi Tenggara
Pileuleuyan –> provinsi Jawa Barat
Pinang Muda –> provinsi Jambi
Pitik Tukung –> provinsi DI Yogyakarta
Potong Bebek –> provinsi NTT
Putri Ayu –> provinsi Bali
Rambadia –> provinsi Sumatra Utara
Rang Talu –> provinsi Sumatra Barat
Rasa Sayang-Sayange –> provinsi Maluku
Ratu Anom –> provinsi Bali
Saputanga Bapuncu Ampat –> provinsi Kalimantan Selatan
Sarinande –> provinsi Maluku
Selendang Mayang –> provinsi Jambi
Sengko-Sengko –> provinsi Sumatra Utara
Sepakat Segenap –> provinsi DI Aceh
Sinanggar Tulo –> provinsi Sumatera Utara
Sing Sing So –> provinsi Sumatra Utara
Sinom –> provinsi DI Yogyakarta
Sipatokahan –> provinsi Sulawesi Utara
Sitara Tillo –> provinsi Sulawesi Utara
Soleram –> provinsi Riau
Surilang –> provinsi DKI Jakarta
Suwe Ora Jamu –> provinsi DI Yogyakarta
Tahanusangkara –> provinsi Sulawesi Utara
Tanduk Majeng –> provinsi Jawa Timur
Tanase –> provinsi Maluku
Tari Tanggai –> provinsi Sumatra Selatan
Tebe O Nana –> provinsi NTB
Tekate Dipanah –> provinsi DI Yogyakarta
Tokecang –> provinsi Jawa Barat
Tondok Kadindangku –> provinsi Sulawesi Tengah
Tope Gugu –> provinsi SulawesiTengah
Tumpi Wayu –> provinsi KalimantanTengah
Tutu Koda –> provinsi NTB
Yamko Rambe Yamko –> provinsi Papua

Kumpulan daftar lagu daerah indonesia di atas berhasil saya ambilkan dari beberapa situs tetangga. Meskipun begitu, harapannya agar bisa bermanafaat bagi diri saya pribadi dan siapa saja yang memang ingin mengenal lebih jauh lagi lagu-lagu daerah.
Sumber: wikipedia & Klik
Share:

Blogroll

This Blog is protected by DMCA.com

Labels

Blog Archive