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

<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/AVvXsEg3RQAIRYFNy-jmbtTr_FlYF8QVRx9V6wyrx4jq28BJApW1dnUZk0SODIj3yl-PkgUKGbNyl50yllnIjs9c5BKBw-Gatf__D_-NTqVqYkldwMlUsnFRoxHE0-yxhJyUZnHYY2Tp_QkfkzM/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>

//<![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

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

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPdLxH9rcWpVymUTQAV5RI9GQ_K22Y5B3YfpA0O6S1fq_cmL3I0iZ8Jo2Fw1eF-2q0dBwHEqmGOuuPh6TCgXM_wJ33H2RT9N97LfSTcGy37zLf7C9yQ7jmPTX408dxi0eZbFEPhGLLHls/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...!!

HOW CARA

Monday, December 29, 2014

Cara Membuat Slider Header

About Master

No comments:

Popular Posts

Advertisement

Random Post

Popular Posts