Cara Membuat Slider di Blogspot

Aru Comment Snippet Tags Tutorial Website Widget

Slider atau yang juga sering disebut slideshow adalah informasi yang berjalan atau sliding di blog atau website. Slider pada dasarnya untuk menampilkan informasi utama yang tertuang dalam sebuah konten blog.

Karena untuk kenyamanan pengunjung, tampilan slider juga menjadi penting diperhatikan. Jika menampilkan slider dengan asal-alasan bukan tidak mungkin akan merusak estetika sebuah website. Olehnya, dibutuhkan tema slider yang sesuai dengan template yang digunakan.

Pada tutorial kali ini, edravika akan memaparkan cara membuat slider yang elegan dan simple untuk blogspot.

Slider ini memiliki fitur menampilkan gambar otomatis dengan efek geser dilengkapi judul dan deskripsi / keterangan, juga memiliki navigasi menggunakan persegi / titik untuk memberikan pada pengunjung agar dapat memilih konten lebih mudah dengan melompat langsung untuk setiap slide.

Slider Geser akan berhenti secara otomatis ketika mouse hover dan ini dikonfigurasi dalam kode Script.

Slider ini dibuat dari beberapa baris HTML sederhana dan jika Anda memiliki pengetahuan dasar CSS, maka Anda dapat menyesuaikan atau memodifikasi seperti yang Anda inginkan, dan memang benar-benar dapat dimodifikasi sehingga terlihat lebih bagus.

Jika tertarik untuk membuatnya, maka ikuti langkah-langkah berikut ini:

Pertama-tama masuk ke dasboard blogspot Anda, lalu pilih Template, Edit HTML.

Cari kode ]]></b:skin> atau </style> di bagian head template. Setelah ketemu (gunakan Ctrl F) copy lalu paste script berikut tepat diatasnya.

Letakkan CSS berikut ini tepat diatas kode ]]></b:skin> :

/* CSS Slider */

.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus  {outline: none;}.slides,

.flex-control-nav,.flex-direction-nav {margin: 0; padding: 0; list-style: none;}



/* FlexSlider Necessary Styles */

.flexslider .slides > li  { margin:0px; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider {margin-bottom:15px; padding: 0; height:400px;}

.flexslider .slides img {max-width: 100%; display: block;}

html[xmlns] .slides {display: block;}

.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */

.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}

* html .slides {height: 1%;}

/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
/* No JavaScript Fallback */

.no-js .slides > li:first-child {display: block;}



/* FlexSlider Default Theme */

.flexslider .slides {zoom: 1;}

.flexslider {position: relative;  zoom: 1;}

.flex-container {zoom: 1; position: relative;}

.flexslider .slides > li {position: relative;}

.flex-caption h3{ margin-top:50px; color:#fff; text-transform:uppercase; font-weight:800; font-size:24px;}

.flex-caption {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPnyMlpuQfccHZXtt3AnxdKLyDrAa2gScqwQuIJRVAwq8gRjBZHx0a-NPIkT0TArUiD1LsYjaU2QsmYXA-Qi6z0-h5-r0L2xMsEBdc0enPs1pf2WmrJnmSlQbPwwwxFpKrpR4BKeIMOPo0/s1600/caption.png); zoom: 1;

font-size:14px; line-height:150%;}

.flex-caption { height:400px; width:400px; padding: 30px 30px 30px 70px; margin: 0; position: absolute; right: 0; top: 0; font-size: 13px; color:#e8e5e5; }



/* Direction Nav */

.flex-direction-nav { height: 0; }

.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

.flex-direction-nav li a {width: 35px; height: 30px; margin: 0px 0 0; display: block; background: url(images/direction.png) no-repeat; position: absolute; bottom: 0; cursor: pointer; text-indent: -999em;}

.flex-direction-nav li .next {background-position: -35px 0; right: 265px;}
.flex-direction-nav li .prev {right: 300px;}

/* Control Nav */

.flex-control-nav li:first-child {margin: 0;}

.flex-control-nav {width: 330px; position: absolute; bottom: 20px; right:30px;  }

.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}

.flexslider {display:none}}

.flex-control-nav li a {width: 16px; height: 16px; display: block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXKSYtzg5hAlREIx-aYtfd6e7hSYfaWhkWZwHdWRmolZxGa3uzsuyoL4jc0AImc7jPXh_d7tPmqa_HPnRoYgFgBNHTRjw1c2UfJ0VwXR8yIoM4ozagR2gXKDZhq2xTXdUCkwnmyG8p6azH/s1600/dot.png); cursor: pointer;  text-indent: -999em;}

.flex-control-nav li a:hover {background-position: 0 -16px;}

.flex-control-nav li a.active {background-position: 0 -32px; cursor: default;} 

@media (max-width:767px) {

Letakkan kode Jquery berikut ini tepat diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'/>



<script type='text/javascript'>

//<![CDATA[
/*

 * Free to use under the MIT license.

* jQuery FlexSlider v1.8

* http://www.woothemes.com/flexslider/

(function(a){a.flexslider=function(c,b){var d=a(c);a.data(c,"flexslider",d);d.init=function(){d.vars=a.extend({},a.flexslider.defaults,b);a.data(c,"flexsliderInit",true);d.container=a(".slides",d).first();d.slides=a(".slides:first > li",d);d.count=d.slides.length;d.animating=false;d.currentSlide=d.vars.slideToStart;d.animatingTo=d.currentSlide;d.atEnd=(d.currentSlide==0)?true:false;d.eventType=("ontouchstart" in document.documentElement)?"touchstart":"click";d.cloneCount=0;d.cloneOffset=0;d.manualPause=false;d.vertical=(d.vars.slideDirection=="vertical");d.prop=(d.vertical)?"top":"marginLeft";d.args={};d.transitions="webkitTransition" in document.body.style;if(d.transitions){d.prop="-webkit-transform"}if(d.vars.controlsContainer!=""){d.controlsContainer=a(d.vars.controlsContainer).eq(a(".slides").index(d.container));d.containerExists=d.controlsContainer.length>0}if(d.vars.manualControls!=""){d.manualControls=a(d.vars.manualControls,((d.containerExists)?d.controlsContainer:d));d.manualExists=d.manualControls.length>0}if(d.vars.randomize){d.slides.sort(function(){return(Math.round(Math.random())-0.5)});d.container.empty().append(d.slides)}if(d.vars.animation.toLowerCase()=="slide"){if(d.transitions){d.setTransition(0)}d.css({overflow:"hidden"});if(d.vars.animationLoop){d.cloneCount=2;d.cloneOffset=1;d.container.append(d.slides.filter(":first").clone().addClass("clone")).prepend(d.slides.filter(":last").clone().addClass("clone"))}d.newSlides=a(".slides:first > li",d);var m=(-1*(d.currentSlide+d.cloneOffset));if(d.vertical){d.newSlides.css({display:"block",width:"100%","float":"left"});d.container.height((d.count+d.cloneCount)*200+"%").css("position","absolute").width("100%");setTimeout(function(){d.css({position:"relative"}).height(d.slides.filter(":first").height());d.args[d.prop]=(d.transitions)?"translate3d(0,"+m*d.height()+"px,0)":m*d.height()+"px";d.container.css(d.args)},100)}else{d.args[d.prop]=(d.transitions)?"translate3d("+m*d.width()+"px,0,0)":m*d.width()+"px";d.container.width((d.count+d.cloneCount)*200+"%").css(d.args);setTimeout(function(){d.newSlides.width(d.width()).css({"float":"left",display:"block"})},100)}}else{d.transitions=false;d.slides.css({width:"100%","float":"left",marginRight:"-100%"}).eq(d.currentSlide).fadeIn(d.vars.animationDuration)}if(d.vars.controlNav){if(d.manualExists){d.controlNav=d.manualControls}else{var e=a('<ol class="flex-control-nav"></ol>');var s=1;for(var t=0;t<d.count;t++){e.append("<li><a>"+s+"</a></li>");s++}if(d.containerExists){a(d.controlsContainer).append(e);d.controlNav=a(".flex-control-nav li a",d.controlsContainer)}else{d.append(e);d.controlNav=a(".flex-control-nav li a",d)}}d.controlNav.eq(d.currentSlide).addClass("active");d.controlNav.bind(d.eventType,function(i){i.preventDefault();if(!a(this).hasClass("active")){(d.controlNav.index(a(this))>d.currentSlide)?d.direction="next":d.direction="prev";d.flexAnimate(d.controlNav.index(a(this)),d.vars.pauseOnAction)}})}if(d.vars.directionNav){var v=a('<ul class="flex-direction-nav"><li><a class="prev" href="#">'+d.vars.prevText+'</a></li><li><a class="next" href="#">'+d.vars.nextText+"</a></li></ul>");if(d.containerExists){a(d.controlsContainer).append(v);d.directionNav=a(".flex-direction-nav li a",d.controlsContainer)}else{d.append(v);d.directionNav=a(".flex-direction-nav li a",d)}if(!d.vars.animationLoop){if(d.currentSlide==0){d.directionNav.filter(".prev").addClass("disabled")}else{if(d.currentSlide==d.count-1){d.directionNav.filter(".next").addClass("disabled")}}}d.directionNav.bind(d.eventType,function(i){i.preventDefault();var j=(a(this).hasClass("next"))?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}})}if(d.vars.keyboardNav&&a("ul.slides").length==1){function h(i){if(d.animating){return}else{if(i.keyCode!=39&&i.keyCode!=37){return}else{if(i.keyCode==39){var j=d.getTarget("next")}else{if(i.keyCode==37){var j=d.getTarget("prev")}}if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}}}}a(document).bind("keyup",h)}if(d.vars.mousewheel){d.mousewheelEvent=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll":"mousewheel";d.bind(d.mousewheelEvent,function(y){y.preventDefault();y=y?y:window.event;var i=y.detail?y.detail*-1:y.originalEvent.wheelDelta/40,j=(i<0)?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(j)){d.flexAnimate(j,d.vars.pauseOnAction)}})}if(d.vars.slideshow){if(d.vars.pauseOnHover&&d.vars.slideshow){d.hover(function(){d.pause()},function(){if(!d.manualPause){d.resume()}})}d.animatedSlides=setInterval(d.animateSlides,d.vars.slideshowSpeed)}if(d.vars.pausePlay){var q=a('<div class="flex-pauseplay"><span></span></div>');if(d.containerExists){d.controlsContainer.append(q);d.pausePlay=a(".flex-pauseplay span",d.controlsContainer)}else{d.append(q);d.pausePlay=a(".flex-pauseplay span",d)}var n=(d.vars.slideshow)?"pause":"play";d.pausePlay.addClass(n).text((n=="pause")?d.vars.pauseText:d.vars.playText);d.pausePlay.bind(d.eventType,function(i){i.preventDefault();if(a(this).hasClass("pause")){d.pause();d.manualPause=true}else{d.resume();d.manualPause=false}})}if("ontouchstart" in document.documentElement){var w,u,l,r,o,x,p=false;d.each(function(){if("ontouchstart" in document.documentElement){this.addEventListener("touchstart",g,false)}});function g(i){if(d.animating){i.preventDefault()}else{if(i.touches.length==1){d.pause();r=(d.vertical)?d.height():d.width();x=Number(new Date());l=(d.vertical)?(d.currentSlide+d.cloneOffset)*d.height():(d.currentSlide+d.cloneOffset)*d.width();w=(d.vertical)?i.touches[0].pageY:i.touches[0].pageX;u=(d.vertical)?i.touches[0].pageX:i.touches[0].pageY;d.setTransition(0);this.addEventListener("touchmove",k,false);this.addEventListener("touchend",f,false)}}}function k(i){o=(d.vertical)?w-i.touches[0].pageY:w-i.touches[0].pageX;p=(d.vertical)?(Math.abs(o)<Math.abs(i.touches[0].pageX-u)):(Math.abs(o)<Math.abs(i.touches[0].pageY-u));if(!p){i.preventDefault();if(d.vars.animation=="slide"&&d.transitions){if(!d.vars.animationLoop){o=o/((d.currentSlide==0&&o<0||d.currentSlide==d.count-1&&o>0)?(Math.abs(o)/r+2):1)}d.args[d.prop]=(d.vertical)?"translate3d(0,"+(-l-o)+"px,0)":"translate3d("+(-l-o)+"px,0,0)";d.container.css(d.args)}}}function f(j){d.animating=false;if(d.animatingTo==d.currentSlide&&!p&&!(o==null)){var i=(o>0)?d.getTarget("next"):d.getTarget("prev");if(d.canAdvance(i)&&Number(new Date())-x<550&&Math.abs(o)>20||Math.abs(o)>r/2){d.flexAnimate(i,d.vars.pauseOnAction)}else{d.flexAnimate(d.currentSlide,d.vars.pauseOnAction)}}this.removeEventListener("touchmove",k,false);this.removeEventListener("touchend",f,false);w=null;u=null;o=null;l=null}}if(d.vars.animation.toLowerCase()=="slide"){a(window).resize(function(){if(!d.animating&&d.is(":visible")){if(d.vertical){d.height(d.slides.filter(":first").height());d.args[d.prop]=(-1*(d.currentSlide+d.cloneOffset))*d.slides.filter(":first").height()+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}else{d.newSlides.width(d.width());d.args[d.prop]=(-1*(d.currentSlide+d.cloneOffset))*d.width()+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}}})}d.vars.start(d)};d.flexAnimate=function(g,f){if(!d.animating&&d.is(":visible")){d.animating=true;d.animatingTo=g;d.vars.before(d);if(f){d.pause()}if(d.vars.controlNav){d.controlNav.removeClass("active").eq(g).addClass("active")}d.atEnd=(g==0||g==d.count-1)?true:false;if(!d.vars.animationLoop&&d.vars.directionNav){if(g==0){d.directionNav.removeClass("disabled").filter(".prev").addClass("disabled")}else{if(g==d.count-1){d.directionNav.removeClass("disabled").filter(".next").addClass("disabled")}else{d.directionNav.removeClass("disabled")}}}if(!d.vars.animationLoop&&g==d.count-1){d.pause();d.vars.end(d)}if(d.vars.animation.toLowerCase()=="slide"){var e=(d.vertical)?d.slides.filter(":first").height():d.slides.filter(":first").width();if(d.currentSlide==0&&g==d.count-1&&d.vars.animationLoop&&d.direction!="next"){d.slideString="0px"}else{if(d.currentSlide==d.count-1&&g==0&&d.vars.animationLoop&&d.direction!="prev"){d.slideString=(-1*(d.count+1))*e+"px"}else{d.slideString=(-1*(g+d.cloneOffset))*e+"px"}}d.args[d.prop]=d.slideString;if(d.transitions){d.setTransition(d.vars.animationDuration);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.slideString+",0)":"translate3d("+d.slideString+",0,0)";d.container.css(d.args).one("webkitTransitionEnd transitionend",function(){d.wrapup(e)})}else{d.container.animate(d.args,d.vars.animationDuration,function(){d.wrapup(e)})}}else{d.slides.eq(d.currentSlide).fadeOut(d.vars.animationDuration);d.slides.eq(g).fadeIn(d.vars.animationDuration,function(){d.wrapup()})}}};d.wrapup=function(e){if(d.vars.animation=="slide"){if(d.currentSlide==0&&d.animatingTo==d.count-1&&d.vars.animationLoop){d.args[d.prop]=(-1*d.count)*e+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}else{if(d.currentSlide==d.count-1&&d.animatingTo==0&&d.vars.animationLoop){d.args[d.prop]=-1*e+"px";if(d.transitions){d.setTransition(0);d.args[d.prop]=(d.vertical)?"translate3d(0,"+d.args[d.prop]+",0)":"translate3d("+d.args[d.prop]+",0,0)"}d.container.css(d.args)}}}d.animating=false;d.currentSlide=d.animatingTo;d.vars.after(d)};d.animateSlides=function(){if(!d.animating){d.flexAnimate(d.getTarget("next"))}};d.pause=function(){clearInterval(d.animatedSlides);if(d.vars.pausePlay){d.pausePlay.removeClass("pause").addClass("play").text(d.vars.playText)}};d.resume=function(){d.animatedSlides=setInterval(d.animateSlides,d.vars.slideshowSpeed);if(d.vars.pausePlay){d.pausePlay.removeClass("play").addClass("pause").text(d.vars.pauseText)}};d.canAdvance=function(e){if(!d.vars.animationLoop&&d.atEnd){if(d.currentSlide==0&&e==d.count-1&&d.direction!="next"){return false}else{if(d.currentSlide==d.count-1&&e==0&&d.direction=="next"){return false}else{return true}}}else{return true}};d.getTarget=function(e){d.direction=e;if(e=="next"){return(d.currentSlide==d.count-1)?0:d.currentSlide+1}else{return(d.currentSlide==0)?d.count-1:d.currentSlide-1}};d.setTransition=function(e){d.container.css({"-webkit-transition-duration":(e/1000)+"s"})};d.init()};a.flexslider.defaults={animation:"fade",slideDirection:"horizontal",slideshow:true,slideshowSpeed:7000,animationDuration:600,directionNav:true,controlNav:true,keyboardNav:true,mousewheel:false,prevText:"Previous",nextText:"Next",pausePlay:false,pauseText:"Pause",playText:"Play",randomize:false,slideToStart:0,animationLoop:true,pauseOnAction:true,pauseOnHover:false,controlsContainer:"",manualControls:"",start:function(){},before:function(){},after:function(){},end:function(){}};a.fn.flexslider=function(b){return this.each(function(){if(a(this).find(".slides li").length==1){a(this).find(".slides li").fadeIn(400)}else{if(a(this).data("flexsliderInit")!=true){new a.flexslider(this,b)}}})}})(jQuery);

*

* Copyright 2012 WooThemes

* http://www.opensource.org/licenses/mit-license.php

*

* Contributing Author: Tyler Smith
*/

//]]>

 * Dual licensed under the MIT and GPL licenses:

</script>

<script type='text/javascript'>

//<![CDATA[
/*

* Superfish v1.4.8 - jQuery menu widget

* Copyright (c) 2008 Joel Birch
*

* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt

*  http://www.opensource.org/licenses/mit-license.php

*  http://www.gnu.org/licenses/gpl.html
*
 */

(function($){$.fn.superfish=function(op){var sf=$.fn.superfish,c=sf.c,$arrow=$(['<span class="',c.arrowClass,'"> &#xbb;</span>'].join("")),over=function(){var $$=$(this),menu=getMenu($$);clearTimeout(menu.sfTimer);$$.showSuperfishUl().siblings().hideSuperfishUl();},out=function(){var $$=$(this),menu=getMenu($$),o=sf.op;clearTimeout(menu.sfTimer);menu.sfTimer=setTimeout(function(){o.retainPath=($.inArray($$[0],o.$path)>-1);$$.hideSuperfishUl();if(o.$path.length&&$$.parents(["li.",o.hoverClass].join("")).length<1){over.call(o.$path);}},o.delay);},getMenu=function($menu){var menu=$menu.parents(["ul.",c.menuClass,":first"].join(""))[0];sf.op=sf.o[menu.serial];return menu;},addArrow=function($a){$a.addClass(c.anchorClass).append($arrow.clone());};return this.each(function(){var s=this.serial=sf.o.length;var o=$.extend({},sf.defaults,op);o.$path=$("li."+o.pathClass,this).slice(0,o.pathLevels).each(function(){$(this).addClass([o.hoverClass,c.bcClass].join(" ")).filter("li:has(ul)").removeClass(o.pathClass);});sf.o[s]=sf.op=o;$("li:has(ul)",this)[($.fn.hoverIntent&&!o.disableHI)?"hoverIntent":"hover"](over,out).each(function(){if(o.autoArrows){addArrow($(">a:first-child",this));}}).not("."+c.bcClass).hideSuperfishUl();var $a=$("a",this);$a.each(function(i){var $li=$a.eq(i).parents("li");$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});});o.onInit.call(this);}).each(function(){var menuClasses=[c.menuClass];if(sf.op.dropShadows&&!($.browser.msie&&$.browser.version<7)){menuClasses.push(c.shadowClass);}$(this).addClass(menuClasses.join(" "));});};var sf=$.fn.superfish;sf.o=[];sf.op={};sf.IE7fix=function(){var o=sf.op;if($.browser.msie&&$.browser.version>6&&o.dropShadows&&o.animation.opacity!=undefined){this.toggleClass(sf.c.shadowClass+"-off");}};sf.c={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",arrowClass:"sf-sub-indicator",shadowClass:"sf-shadow"};sf.defaults={hoverClass:"sfHover",pathClass:"overideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},speed:"normal",autoArrows:true,dropShadows:true,disableHI:false,onInit:function(){},onBeforeShow:function(){},onShow:function(){},onHide:function(){}};$.fn.extend({hideSuperfishUl:function(){var o=sf.op,not=(o.retainPath===true)?o.$path:"";o.retainPath=false;var $ul=$(["li.",o.hoverClass].join(""),this).add(this).not(not).removeClass(o.hoverClass).find(">ul").hide().css("visibility","hidden");o.onHide.call($ul);return this;},showSuperfishUl:function(){var o=sf.op,sh=sf.c.shadowClass+"-off",$ul=this.addClass(o.hoverClass).find(">ul:hidden").css("visibility","visible");sf.IE7fix.call($ul);o.onBeforeShow.call($ul);$ul.animate(o.animation,o.speed,function(){sf.IE7fix.call($ul);o.onShow.call($ul);});return this;}});})(jQuery);



//]]>

</script>



<script type='text/javascript'>

//<![CDATA[

jQuery(document).ready(function() {



/* Navigation */

delay:       500,        // 0.1 second delay on mouseout 

jQuery('#submenu ul.sfmenu').superfish({ 

animation:   {opacity:'show',height:'show'}, // fade-in and slide-down animation 

dropShadows: true        // disable drop shadows 
});

/* Responsive slides */

  controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
jQuery('.flexslider').flexslider({
  directionNav: false 

jQuery('#content .grid_2:odd').after('<div class="clear"></div>');
}); 


});

//]]>
</script>

 

Simpan Kode HTML Berikut dibawah Kode <div id='content-wrapper'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div id='slider'>

<div class='flexslider'>

<a href='/p/ppdb.html'><img class='slide-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcArnc7y8SmaZk1NcpEKI-bMBeeSIfmSZ-a6bWNXq5cQH8j3URwwe9RetORTa_X-VRpSyQOQukjO2o8hJIF9TVQo2D1j9z4mxHYOotWTXL_HMjTqokv1TxEmVjZCeuuoSQuYyi2w092I/s1600/PPDB+SMPIT+AL+HUSNA+2019-2020.png'/></a>

<ul class='slides'>


<li>

<div class='flex-caption'>

<h3>PENERIMAAN PESERTA DIDIK BARU (PPDB) SMPIT AL HUSNA PARUNGKUDA

TAHUN PELAJARAN 2019/2020</h3>

<p> SMPIT AL HUSNA Membuka Pendaftaran Peserta Didik Baru untuk Tahun Pelajaran 2019/2020, informasi selengkapnya <a href='/p/ppdb.html' style='color:#222' target='_blank'>  [klik disini]</a></p>

</div>

</li>

<a href='#'><img class='slide-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVakjwqopJqim8bX8yZMueDk8L-CjJG9FHgfwSzk2jmcOAUFPMyuH-cdditiRpqk_S7-fAs1iQRBZywfjOehcC35iAMvZbX6EFDW4Qhwk3KeRepvssa6FvU6g1j0r37Y4MxZaifrzu1No/s1600/5.jpg'/></a>

<li>

<div class='flex-caption'>

<p>Salah satu sarana untuk menyebarkan suatu informasi tertentu yaitu dengan cara menulis. Selain menonton maupun mendengar, menulis menjadi sarana yang paling efektif. Pada era kejayaan Islam banyak informasi didapatkan melalui menulis. Ulama-ulama semisal Imam Syafi&#8217;i, Imam Bukhari, dan Ibnu Khaldun adalah sebagian kecil ulama yang menyebarkan informasi dengan cara menulis. [...]</p>

<h3>Mengapa Harus Menulis ?</h3>

</div>
</li>


<a href='ENTER-SLIDE-3-LINK-HERE'><img class='slide-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYtdRQLmDmYZkHukg4PeC8q_Rsi9tqjnGk3rxobMTLRbDDflbldqUSkTTC7wZZC6NaMR26qXcBBI3hBNb1QiaxEkXFCfr_7rJX3XiVgrcFcr4VzeUSLIutQT8G_yJgcQtAUU5LTBBEDa4/s1600/4.jpg'/></a>
<li>

<p>Menulis sejatinya fitrah manusia. Peradaban manusia sejak dibangun kembali oleh Nabi Nuh a.s hingga sekarang selalu diwarnai oleh tulisan sebagai cirinya. Sehingga hal yang wajar bila Allah swt menurunkan kitab suci-Nya secara tertulis yang dibaca oleh seluruh umat manusia dari sejak ia diturunkan hingga sekarang. [...]</p>

<div class='flex-caption'>

<h3>Mengapa Perlu Menuliskan Resolusi Hidup?</h3>

</div>
</li>

<p>Terkadang ada saatnya kita bertemu dengan sebuah titik.
<li>

<a href='ENTER-SLIDE-4-LINK-HERE'><img class='slide-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimAkZOLjozf0V1ExrjtkXsO1_HasG5GzluOSU8XRnrX_NhHvCk-EH2VPelttYukqJ0pyqJbuwpILZm4TQaFzkOns4MwqYbre2Ors5ZRBM6KiYLvPB9Drc8gonkTaeBQC2VVzeD_mHLfYY/s1600/2.jpg'/></a>

<div class='flex-caption'>

<h3>A Goal Without a Plan is Just a Wish</h3>

<div class='intro-text'>

Titik hampa dalam sebuah proses perjalanan.

Ketika berbagai pertanyaan melayang dalam pikiran.

Apa yang sedang aku lakukan? Akan berujung bagaimana? Untuk apa? Untuk siapa? Harus bagaimana? Dsb. [...]</p>

</div>
</li>

</div> 
</ul>

<div class='intro'>
</div>  

</b:if>
</div>
</div>