Cara Membuat Page Number Navigasi Seperti di Wordpress pada Blogger

~~~ SeoChipS ~~~ - 09.28

09.28

Cara Membuat Link Pada Tombol Icon Download

~~~ SeoChipS ~~~ - 09.16

09.16

Cara Membuat Featured Post Thumnail Berganti Postingan

~~~ SeoChipS ~~~ - 08.23

08.23

Cara Membuat Featured Post Slide Show Plus SliderLabelNews

~~~ SeoChipS ~~~ - 07.29

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRvdChV1-TND5YQNGojSJab26SfNI3T05DaSqSTQclTyKszote_jJzuwNNSIl8xJTY1VxKWHTPsm8qm1DGaH1Qz4cAMyozN0iNiSm2DTOX9itvXwB6VW4GUpSDBD4uKgCOCeIbYscQs3Q/s1600/featured-post-slide-show.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MayCyber-Download" border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRvdChV1-TND5YQNGojSJab26SfNI3T05DaSqSTQclTyKszote_jJzuwNNSIl8xJTY1VxKWHTPsm8qm1DGaH1Qz4cAMyozN0iNiSm2DTOX9itvXwB6VW4GUpSDBD4uKgCOCeIbYscQs3Q/s640/featured-post-slide-show.jpg" title="Cara membuat Featured Post Slide Show Plus SliderLabelNews" width="640" /></a></div>Sesuai dengan gambar diatas. Kali ini saya akan Membagikan Cara Membuat Featured Post Thumnail Plus LoftSlidebarLabelNews. Featured Post adalah merupakan sebuah fitur yang berisi konten terbaik yang ditaruh diatas postingan. Biasanya berisi tampilan gambar thumbnail beserta keterangan teks disampingnya. Tempo hari saya pernah posting <a href="http://maycyber-download.blogspot.com/2016/08/cara-mudah-membuat-featured-post-di.html">Cara Membuat Featured Post di Blogger, Responsive!</a>. Namun Featured Post tersebut tidak Slide Show. Jadi saya Memodifikasinya agar bisa Slide Show. Featured Post ini Responsive. Kenapa Responsive!? Jika ketika membuka blog anda melalui Smartphone maupun di Komputer, maka Featured Post ini tidak berantakan, itulah yang disebut Responsive dia akan menyesuaikan layar dengan sendirinya. Langsung saja kita praktekan.</div></div> <div style="text-align: center;">Cara Membuat Featured Post Slide Show Plus SliderLabelNews</div>Cara Pertama : 1. Buka Blogger - Kemudian Login. 2. Dashboard - Template. 3. Edit HTML. Proses Pembuatan : 1. Temukan kode ]]></b:skin> atau </style> 2. Copy & Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin> atau </style> <pre data-codetype="CSS" title="CSS"><code class="language-css">/* Slide Content ----------------------------------------------- */ .slide-wrapper {padding:0 auto;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;} </code></pre>3. Temukan kode <div id='main-wrapper'> atau <div class='main-wrapper'> atau <div class='outer-wrapper'> 4. Copy & Paste kode berikut ini, dan Letakkan dibawah kode yang disebutin diatas. <pre data-codetype="HTML" title="HTML"><code class="language-markup"><b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='slide-wrapper'> <b:section class='slide' id='slide' preferred='yes'/> </div> </b:if></code></pre>5. Temukan kode </head> 6. Copy & Paste kode berikut ini, dan Letakkan atas kode </head> <pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> <script src='https://sites.google.com/site/maycyberdownload/maycyber-script/maycyber-slide-show.js' type='text/javascript'/> <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/AVvXsEgLhxqxHkgoDoAqHc9HcqlHHF71Nfj4GiB1DVd9r1LB00Q0R5-85aBdbRVNaxNSDWXGcq0L6Aqn50I0C9e1nTibpLWYWjTSyUMn_tpmQPoE-Gj40mgQqP5wrF9qeEoRr_MVbA2MsmzqL9g/s1600/no+image.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') ? '('+pcm+' '+text+')' : ''; 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>'+daystr+' / '+pcm+' comments</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') ? '('+pcm+' '+text+')' : ''; 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></code></pre>Wajib Baca : Jika JQuery <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> sudah dipasang? Sebaiknya jangan dipasang lagi, Jika belum dipasang, silakan dipasang. 7. Temukan kode ]]></b:skin> atau </style> 8. Copy & Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin> atau </style> <pre data-codetype="CSS" title="CSS"><code class="language-css">/* Featured Post Slide Show */ #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:600px;height:298px;} .slider-main-outer{position:relative;height:100%;width:400px;z-index:3;overflow:hidden} ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:385px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNfKWdP9W59pvxvi4XRZnSlLpX2lcu2XdeYZgiRvmdCsJNDo1gJCL7sD0lutijpYJPGSpPrMvbH8imvbqV70zO6baNXAOY4FOoTJ2SvsU2h7cuMuId521kfNIhm5L4MK_Bff09S1hWttzl/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:405px;height:298px;overflow:hidden;margin:0;padding:0} ul.slider-main-wapper{height:298px;width:405px;position:absolute;overflow:hidden;margin:0;padding:0} ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:405px;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:405px;height:auto;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:10px;top:10px;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}</code></pre>9. Temukan kode <div class='main-wrapper'> atau <div class='outer-wrapper'> 10. Copy&paste kode berikut ini, dan letakkan dibawah kode <div class='main-wrapper'> atau <div class='outer-wrapper'> <pre data-codetype="HTML" title="HTML"><code class="language-markup"><b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='slide-wrapper'> <b:section class='slide' id='slide' preferred='yes'/> </div> </b:if> </code></pre>9. Jika sudah? Silakan Buka Tata Letak/ Layout. Screenshoot : <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCXKmY5pcx8gXLZFl_joAZxbthz5RZ55vIWwqHDpnlNeCUZtHctx2cN2VDTS1SyKg-kT1bKCJFeplo6eliJqgssQkfuUNNncLZ1rAXrDjQ7xbWp6DVG8vNd4_rQgpSHJBybemlAcwDQc0/s1600/layout-maycyber.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCXKmY5pcx8gXLZFl_joAZxbthz5RZ55vIWwqHDpnlNeCUZtHctx2cN2VDTS1SyKg-kT1bKCJFeplo6eliJqgssQkfuUNNncLZ1rAXrDjQ7xbWp6DVG8vNd4_rQgpSHJBybemlAcwDQc0/s640/layout-maycyber.png" width="640" /></a></div> 10. Edit > Add a Gadget.. 11. Pilih HTML Java Script. 12. Copy & Paste kode berikut ini, dan Pastekan di kolom tersebut. <pre data-codetype="HTML" title="HTML"><code class="language-markup"><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/-/Tips?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/-/Seo Freandly?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script> </ul> </div> </div> <script type='text/javascript'> jQuery(document).ready(function($){ $('#slider').lofJSidernews({ interval:6000, duration:800, mainWidth: 405, navigatorWidth: 200, maxItemDisplay:5, easing:'easeInOutQuad', auto:true, isPreloaded: false }); }); </script></code></pre>Wajib Baca :  /feeds/posts/default/-/Tips? : Tips adalah Label saya, silakan ganti dengan label anda. /feeds/posts/default/-/Seo Freandly? : Seo Freandly adalah label saya, silakan ganti dengan label anda. navigatorWidth: 200, : Ini adalah lebar Featured Post ini, silakan sesuaikan dengan lebar blog anda. 10. Simpan Template. Demikianlah Tutorial Blogger kali ini, jika terjadi kesalahan, atau anda kurang mengerti?! Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, silakan lihat homepage anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Featured Post Slide Show Plus SliderLabelNews</div></div></div></div></div></div></div>

07.29

Legal atau iLegal? Baca Ebook ini. Sehari Mendapatkan 50$ dari Google Adsense

~~~ SeoChipS ~~~ - 02.28

02.28

Cara Membuat dan Memasang Widget Multi Tab Pada Sidebar

~~~ SeoChipS ~~~ - 05.40

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvcGcFEB_IsQqjewRsvZaeo4zMo6YVqshsNK-0-4I_fXGfPpcQ0nGJQsX2i6kL8iT9iyqftmp2hAnOafUGE3tjjk2_RWpSTokqMpgjgf80IF7fJPLMsRG5RegREY_7i1ofvC7WgHEf6IQ/s1600/multi-tab-sidebar-maycyber-download.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="maycyber-download" border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvcGcFEB_IsQqjewRsvZaeo4zMo6YVqshsNK-0-4I_fXGfPpcQ0nGJQsX2i6kL8iT9iyqftmp2hAnOafUGE3tjjk2_RWpSTokqMpgjgf80IF7fJPLMsRG5RegREY_7i1ofvC7WgHEf6IQ/s640/multi-tab-sidebar-maycyber-download.jpg" title="multi-tab-sidebar-maycyber-download" width="640" /></a></div><div> </div>Bismillah. Pada kesempatan kali ini, Saya akan Membagikan Cara Membuat dan Memasang Widget Multi Tab pada Sidebar Blog. Waktu itu saya sedang memperganteng blog saya ini. Kalau saya memasang Widget Populart Pos di Sidebar blog maka Otomatis akan Berjejer Kebawah, maka dari itu akan memakan tempat. Ditambah lagi memasang Labels di Sidebar blog berjejer kebawah, Makin memakan tempat lagi. Lalu ditambah lagi memasang Archive Blog di Sidebar Blog Berjejer Kebawah makin makan tempat lagi. Maka dari itu saya memasang Widget Multi Tab Sidebar sehingga blog saya terasa rapih. Oke, langsung saja ke intinya langsung kita praktekan.^.^ <div> </div><div>Cara Pertama : 1. Buka Blogger- Kemudian Login.</div><div>2. Dashboard - Template.</div><div>3. Edit HTML.</div><div> </div><div>Proses Pembuatan : 1. Temukan (CTRL+F ) Kode ]]></b:skin> atau </style></div><div>2. Copy & Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin> atau </style></div><div><pre data-codetype="CSS" title="CSS"><code class="language-css">/* Multi Tab Widget */ .multitab-section{background:transparent;text-transform:uppercase;width:100%;max-width:337px;z-index:-999} .multitab-widget{list-style:none;margin:0 auto;background:#444;padding:10px 10px 40px;border-radius:4px 4px 0 0;border-bottom:4px solid #ff5050;width:100%} .multitab-widget li{list-style:none;padding:0px;margin:0;float:left} .multitab-widget li a{background:transparent;display:block;padding:10px 0;font:13px merriweather sans,sans-serif;font-weight:700;text-shadow:0 1px 1px #000;color:#999} .multitab-tab{border:0;width:33.3%;text-align:center} .multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;} .multitab-widget li a.multitab-widget-current{padding:12px 0;margin:0;background:#ff5050;text-decoration:none;text-transform:uppercase;border-radius:4px 4px 0 0;text-shadow:0 1px 1px #000;color:#fff}</code></pre>3. Temukan lagi kode <div class='sidebar-inner'> atau <div id='sidebar-wrapper'> 4. Copy & Paste kode berikut ini, dan Letakkan dibawah kode <div class='sidebar-inner'> atau <div id='sidebar-wrapper'>. <pre data-codetype="Javascript" title="Javascript"><code class="language-javascript"><script type='text/javascript'> //<![CDATA[ // Multi tab widget jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); //]]> </script> <div class='multitab-section'> <ul class='multitab-widget multitab-widget-content-tabs-id'> <li class='multitab-tab'><a href='#multicolumn-widget-id1' title='Popular'>Popular</a></li> <li class='multitab-tab'><a href='#multicolumn-widget-id2' title='Label'>Kategori</a></li> <li class='multitab-tab'><a href='#multicolumn-widget-id3' title='Arsip'>Arsip</a></li> </ul> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'> <b:section class='sidebar' id='sidebartab1' preferred='yes'> </b:section> </div> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'> <b:section class='sidebar' id='sidebartab2' preferred='yes'> </b:section> </div> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'> <b:section class='sidebar' id='sidebartab3' preferred='yes'> </b:section> </div> </div></code></pre>Wajib Baca : title='Popular'> . title='Label'> . title='Arsip'> : Anda bisa mengganti judul, misalnya Recent Comment. 6. Simpan Template. 7. Buka Tata Letak/Layout. 8. Tambahkan Gadget. Demikianlah Tutorial Blogger kali ini, jika terjadi kesalahan, atau anda kurang mengerti?! Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, buka tata letak tambahkan gadget jika sudah ditambahkan silakan lihat homepage anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat dan Memasang Widget Multi Tab Pada Sidebar</div></div></div></div></div>

05.40

Cara Membuat Site Map atau Daftar Isi Versi Anchor Text Keren

~~~ SeoChipS ~~~ - 04.45

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on">Sitemap atau Peta Situs atau Daftar Isi adalah sebuah lokasi yang menempatkan semua artikel yang pernah dipostingan anda menjadi satu halaman. Site Map ini berperan sangat penting sebagai pengganti "Search" pada blog anda. Karena akan tampail semua postingan anda, walaupun itu artikel baru maupun artikel yang sudah lama. Alangkah baiknya blog anda dipasangkan Sitemap. Tujuannya adalah supaya Pengunjung atau Visitor tidak kebingungan mencari artikel apa saja yang ada di blog anda. Selain itu Sitemap tidak perlu diubah-ubah. Kerena ketika kita membuat "Postingan baru" dan anda memposting nya, Maka Otomatis Sitemap ini akan mengindex postingan tersebut. Oke Sitemap kali ini adalah Versi Anchor Text. Langsung saja kita praktekan.^ Screenshoot : <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvADjgScwZxVJlKMszWe_473zy4Ay3CzRDuBetabV_MN3DPyNJYePhg_SivnkJS-0fNIUz8Nr6bJefK7YxJ7CbL9-A-1-6gCaoOI29TyNr6RLOI1fmsQcdIet4wmguVqMtudb7puOae10/s1600/sitemap-maycyber-download.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="maycyber-download" border="0" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvADjgScwZxVJlKMszWe_473zy4Ay3CzRDuBetabV_MN3DPyNJYePhg_SivnkJS-0fNIUz8Nr6bJefK7YxJ7CbL9-A-1-6gCaoOI29TyNr6RLOI1fmsQcdIet4wmguVqMtudb7puOae10/s400/sitemap-maycyber-download.jpg" title="sitemap-maycyber-download" width="400" /></a></div> <div style="text-align: center;">Cara Membuat Site Map atau Daftar Isi Versi Anchor Text Keren</div>Cara Pertama : 1. Buka Blogger - Kemudian Login. 2. Dashboard - Laman. 3. Laman Kosong. Proses Pembuatan : 1. Dashboard - Laman 2. Buatlah Laman Kosong. 3. Copy & Paste kode berikut ini, dan Paste di bagian HTML. <pre data-codetype="CSS" title="CSS"><code class="language-css"><style type="text/css"> #toc{ width:99%; margin:5px auto; border:1px solid #2D96DF; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); } .labl{ color:#FF5F00; font-weight:bold; margin:0 -5px; padding:1px 0 2px 11px; background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%); background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE)); border:1px solid #2D96DF; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block; } .labl a{ color:#fff; } .labl:first-letter{t ext-transform:uppercase; } .new{ color:#FF5F00; font-weight:bold; font-style:italic; } .postname{ font-weight:normal; background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%); background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE)); } .postname li{ border-bottom: #ddd 1px dotted; margin-right:5px } </style> <div id="toc"> <script src="https://googledrive.com/host/0B2ww3WS8P1MJM2JkeHlyUVp4dnc/" type="text/javascript"></script> <script src="http://maycyber-download.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script></div></code></pre>Wajib Baca : Silakan anda ganti URL Alamat Blog saya dengan URL Alamat Blog anda. 4. Simpan, kemudian Publikasikan. Demikianlah Tutorial Blogger kali ini, jika terjadi kesalahan, atau anda kurang mengerti?! Silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir, lihatlah halaman statis tersebut. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Site Map atau Daftar Isi Versi Anchor Text Keren</div></div></div>

04.45

~ SeoChipS ~

Cara Membuat Page Number Navigasi Seperti di Wordpress pada Blogger

Cara Membuat Link Pada Tombol Icon Download

Cara Membuat Featured Post Thumnail Berganti Postingan

Cara Membuat Featured Post Slide Show Plus SliderLabelNews

Legal atau iLegal? Baca Ebook ini. Sehari Mendapatkan 50$ dari Google Adsense

Cara Membuat dan Memasang Widget Multi Tab Pada Sidebar

Cara Membuat Site Map atau Daftar Isi Versi Anchor Text Keren

Mengenai Saya

Featured

Entri Populer

Popular

Blog Labels

Blog Archive

Inspirasi

Inspiratif

Entri Populer

Tips