Bird

salju

cursor

header

http://aridhoprahasti.blogspot.com/
Blog Advertising

Slde

lintas me

Minggu, 26 Januari 2014

SLIDER RESPONSIVE PADA BLOG


Seperti yang sudah saya jelaskan pada artikel sebelumnya bahwa slider merupakan sebuah widget yang menampilkan dari keseluruhan postingan dan juga bisa menampilkan artikel berdasarkan kategori atau label posting yang ada pada blog. Diartikel kali ini tidak jauh bedah dengan artikel sebelumnya yaituMembuat Auto Feature Slider Konten, Membuat Slider Lofslidernews Otomatis dan Membuat Slider Carousel Otomatis. Slider kali ini mempunyi kelebihan yaitu bisa menyesuaikan pada tampilan device dengan kata lain responsive dan tampilannya secarah otomatis langsung menyesuaikan dengan halaman hompage sebagai demo Anda bisa lihat disini. Slider ini bersumber dari salah satu template Maskolis yang responsive pada salah satu situsnya (www.mastemplate.com).

Slider Responsive


Bila Anda tertarik memsangnya pada blog, ikuti tutorialnya berikut ini :

1. Seperti biasa login terlebih pada blog Anda
2. Pilh Dashboard Template
3. Kemudian pilih EDIT HTML
4. Selanjutnya letakkan code di bawah ini, tepat di bawah code ]]></b:skin>

 

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



<style type='text/css'>



/* Slider */



.camera_wrap a,.camera_wrap img,.camera_wrap ol,.camera_wrap ul,.camera_wrap li,



.camera_wrap table,.camera_wrap tbody,.camera_wrap tfoot,.camera_wrap thead,



.camera_wrap tr,.camera_wrap th,.camera_wrap td



.camera_thumbs_wrap a,.camera_thumbs_wrap img,.camera_thumbs_wrap ol,



.camera_thumbs_wrap ul,.camera_thumbs_wrap li,.camera_thumbs_wrap table,



.camera_thumbs_wrap tbody,.camera_thumbs_wrap tfoot,.camera_thumbs_wrap thead,



.camera_thumbs_wrap tr,.camera_thumbs_wrap th,.camera_thumbs_wrap td{background:none;border:0;font:inherit;font-size:100%;margin:0;padding:0;



vertical-align:baseline;list-style:none}







.camera_wrap{display:none;float:left;position:relative;z-index:0;width:97.6%;



padding:6px 7px 6px 6px;border:1px solid #e3e3e3}







.camera_wrap img{max-width:none!important}



.camera_fakehover{height:100%;min-height:100px;position:relative;width:100%;z-index:1}



.camera_src{display:none}



.cameraCont,.cameraContents{height:100%;position:relative;width:100%;z-index:1}



.cameraSlide{bottom:0;left:0;position:absolute;right:0;top:0;width:100%}



.cameraContent{bottom:0;display:none;left:0;position:absolute;right:0;top:0;width:100%}



.camera_target{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;



right:0;text-align:left;top:0;



width:100%;z-index:0}







.camera_overlayer{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;



top:0;width:100%;z-index:0}







.camera_target_content{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:2}



.camera_target_content .camera_link{



background:url(http://1.bp.blogspot.com/-HVkOhvZvPWE/UQlkh-TuJsI/AAAAAAAAIEI/3OoSgPgTtvk/s1600/blank.gif);



display:block;height:100%;text-decoration:none}







.camera_loader{



background:url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) 



no-repeat center;







background:rgba(255,255,255,0.9) url(http://1.bp.blogspot.com/-U50t_WWuuYY/UR2JCuL7yFI/AAAAAAAAALE/w8dJNZaYB2E/s1600/loading.gif) 



no-repeat center;







border:1px solid #fff;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;height:36px;left:50%;



overflow:hidden;position:absolute;margin:-18px 0 0 -18px;top:50%;width:36px;z-index:3}







.camera_bar{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:3}



.camera_thumbs_wrap.camera_left .camera_bar,.camera_thumbs_wrap.camera_right .camera_bar{height:100%;position:absolute;width:auto}



.camera_thumbs_wrap.camera_bottom .camera_bar,.camera_thumbs_wrap.camera_top .camera_bar{height:auto;position:absolute;width:100%}



.camera_nav_cont{height:65px;overflow:hidden;position:absolute;right:9px;top:15px;width:120px;z-index:4}



.camera_caption{bottom:0;display:block;position:absolute;width:100%}



.camera_caption &gt; div{padding:10px 10px}



.camerarelative{overflow:hidden;position:relative}



.imgFake{cursor:pointer}



.camera_prevThumbs{bottom:4px;cursor:pointer;left:0;position:absolute;top:4px;visibility:hidden;



width:30px;z-index:10}







.camera_prevThumbs div{



background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) 



no-repeat -160px 0;











display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}







.camera_nextThumbs{bottom:4px;cursor:pointer;position:absolute;right:0;top:4px;



visibility:hidden;width:30px;z-index:10}







.camera_nextThumbs div{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) 



no-repeat -190px 0;







display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}







.camera_command_wrap .hideNav{display:none}



.camera_command_wrap{left:0;position:relative;right:0;z-index:4}



.camera_wrap .camera_pag .camera_pag_ul{list-style:none;margin:0;padding:0;text-align:center}



.camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;



display:inline-block;height:16px;margin:20px 5px;position:relative;text-align:left;text-indent:-9999px;width:16px}







.camera_commands_emboss .camera_pag .camera_pag_ul li{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}



.camera_wrap .camera_pag .camera_pag_ul li &gt; span{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:8px;



left:4px;overflow:hidden;position:absolute;top:4px;width:8px}







.camera_commands_emboss .camera_pag .camera_pag_ul li:hover &gt; span{



-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);



-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);



box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}







.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent &gt; span{-moz-box-shadow:0;



-webkit-box-shadow:0;box-shadow:0}







.camera_pag_ul li img{display:none;position:absolute}



.camera_pag_ul .thumb_arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid;top:0;left:50%;margin-left:-4px;position:absolute}



.camera_prev,.camera_next,.camera_commands{cursor:pointer;height:40px;



margin-top:-20px;position:absolute;top:50%;width:40px;z-index:2}







.camera_prev{left:0}



.camera_prev &gt; span{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png)



 no-repeat 0 0;







display:block;height:40px;width:40px}







.camera_next{right:0}



.camera_next &gt; span{



background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) 



no-repeat -40px 0;







display:block;height:40px;width:40px}







.camera_commands{right:41px}



.camera_commands &gt; .camera_play{



background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) 



no-repeat -80px 0;







height:40px;width:40px}







.camera_commands &gt; .camera_stop{



background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) 



no-repeat -120px 0;







display:block;height:40px;width:40px}







.camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px



;







border-radius:8px;cursor:pointer;display:inline-block;height:16px;margin:20px 5px;position:relative;text-indent:-9999px;width:16px}







.camera_thumbs_cont{-webkit-border-bottom-right-radius:4px;



-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;



border-bottom-right-radius:4px;border-bottom-left-radius:4px;overflow:hidden;position:relative;width:100%}







.camera_commands_emboss .camera_thumbs_cont{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}



.camera_thumbs_cont &gt; div{float:left;width:100%}



.camera_thumbs_cont ul{overflow:hidden;padding:3px 4px 8px;position:relative;text-align:center}



.camera_thumbs_cont ul li{display:inline;padding:0 4px}



.camera_thumbs_cont ul li &gt; img{border:1px solid;cursor:pointer;margin-top:5px;vertical-align:bottom}



.camera_clear{display:block;clear:both}



.showIt{display:none}



.camera_caption a{color:#b8fa5e;font:16px Oswald;margin:0 10px 10px 0}



.camera_caption a:hover{color:#fff}



.camera_caption .comt{font:11px Tahoma;margin:5px 0 0;color:#fc0; display:none}



.camera_caption p{font:12px Arial;margin:5px 0 0}



.camera_clear{



clear:both;display:block;height:1px;margin:-1px 0 25px;position:relative}







.pattern_1 .camera_overlayer{



background:url(http://4.bp.blogspot.com/-mK_USJALT1w/USSK5zcb0VI/AAAAAAAAAPM/BXmbKtwCdPI/s1600/laya.png) repeat}







.pattern_2 .camera_overlayer



{background:url(http://2.bp.blogspot.com/-VVgg8zHpY1Q/USSLGoqh93I/AAAAAAAAAPU/1L3y6jLQv3I/s1600/layb.png) repeat}



.pattern_3 .camera_overlayer{background:url(http://2.bp.blogspot.com/-vt97g0-7sy0/USSLQhI53RI/AAAAAAAAAPc/LUep3GmWmnI/s1600/layc.png) repeat}



.pattern_4 .camera_overlayer{



background:url(http://1.bp.blogspot.com/-siY1U2dtkdk/USSLcJ6_iWI/AAAAAAAAAPk/P8wAOzA3Myo/s1600/layd.png)



 repeat}















.pattern_5 .camera_overlayer{



background:url(http://4.bp.blogspot.com/-svWnNDcbzkQ/USSLndwFBeI/AAAAAAAAAPs/IpAgpa_YNXs/s320/laye.png) 



repeat}















.pattern_6 .camera_overlayer{



background:url(http://4.bp.blogspot.com/-beOrTn_xAb0/USSL5TpKKKI/AAAAAAAAAP0/Be6TaEBGNbM/s320/layf.png)



 repeat}















.pattern_7 .camera_overlayer{background:url(http://1.bp.blogspot.com/-ZIu8sF_tT74/USSMFPPT_aI/AAAAAAAAAP8/ihrFsYG3Y4E/s320/layg.png) 



repeat}















.pattern_8 .camera_overlayer{background:url(http://1.bp.blogspot.com/-KSaEP4OQ_qw/USSMPrJ3PzI/AAAAAAAAAQE/K-3k29KDUwM/s320/layh.png) 



repeat}















.pattern_9 .camera_overlayer{background:url(http://3.bp.blogspot.com/-FilWZbFD07E/USSMiDKIURI/AAAAAAAAAQM/K7a6fvbnvGc/s1600/layi.png) repeat}



.pattern_10 .camera_overlayer{background:url(http://4.bp.blogspot.com/-M96ItiZRE7w/USSMiAM3xEI/AAAAAAAAAQQ/_NGNkQuKAnM/s320/layj.png) 



repeat}















.camera_caption{color:#fff}



.camera_caption &gt; div{background:url(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/s1600/transparant.png)}



.camera_wrap .camera_pag .camera_pag_ul li{background:#8cd700}



.camera_wrap .camera_pag .camera_pag_ul li:hover &gt; span{background:#8cd700}



.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent &gt; span{background:#7b418e;



box-shadow: 0 0 8px #e6aef8}







.camera_pag_ul li img{border:3px solid #f3fbfd;-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);



-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);box-shadow:0 3px 6px rgba(0,0,0,.5)}







.camera_pag_ul .thumb_arrow{border-top-color:#f3fbfd}



.camera_prevThumbs,.camera_nextThumbs,.camera_prev,.camera_next,.camera_commands,.camera_thumbs_cont{



background:#f3fbfd;background:rgba(216,216,216,0.85)}







.camera_wrap .camera_pag .camera_pag_ul li{background:#f3fbfd;box-shadow:0 1px 3px #6ab3cc; 



-moz-box-shadow:0 1px 3px #6ab3cc; -webkit-box-shadow:0 1px 3px #6ab3cc}







.camera_thumbs_cont ul li &gt; img{border-color:1px solid #000}



/*GREEN SKIN*/



.camera_green_skin .camera_prevThumbs div {



    background-position: -160px -640px;



}







.camera_green_skin .camera_nextThumbs div {



    background-position: -190px -640px;



}







.camera_green_skin .camera_prev &gt; span {



    background-position: 0 -640px;



}







.camera_green_skin .camera_next &gt; span {



    background-position: -40px -640px;



}







.camera_green_skin .camera_commands &gt; .camera_play {



    background-position: -80px -640px;



}







.camera_green_skin .camera_commands &gt; .camera_stop {



    background-position: -120px -640px    ;



}







@media screen and (max-width: 960px) {



.main-wrapper{width:65.5%}



.sidebarleft-wrapper,.sidebar2-wrapper{display:none}



}



@media screen and (max-width: 760px) {



.main-wrapper{margin-right:0;width:auto;padding:10px 10px 0}



.sidebar-wrapper,.sidebar1-wrapper{border:none;width:auto;margin:0 auto 10px;padding:0 10px}



}



@media screen and (max-width: 340px){



.camera_wrap{width:95%}



.camera_caption p{display:none}



.cutter{width:100px;height:70px;}



}







</style>



</b:if>

5. Selanjutnya cari code </head> dan letakkan code berikut ini, tepat diatas code </head>

 

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



<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>



<script src='http://yourjavascript.com/11325639179/camera-slider.js' type='text/javascript'/>
Keterangan :
Bila pada template Anda sudah terdapat code jquery.min.js dan code jquery-ui.min.js versi apa saja tidak perlu dipasangi lagi. Ingat pada template hanya perlu terdapat satu code jquery.min.js dan satu codejquery-ui.min.js saja tidak lebih.

6. Masih dalam Edit Html, cari code <div class='main-wrapper'> dan letakkan code di bawah ini tepat di bawah code <div class='main-wrapper'>

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



<div id='randompost'/>



<script type='text/javascript'>



//<![CDATA[



$(document).ready(function () {



CameraSlider({



blogURL:'http://ganti-nama.blogspot.com/',



idcontaint:"#randompost",



NumCharacter: 160,



});



});



//]]>











</script>



</b:if>

Keterangan :
Ganti Url yang berwarna merah (http://ganti-nama.blogspot.com/) dengan Url blog Anda


Demikian cara membuat Slider Responsive pada blog, dan untuk melihat demo responsvienya silahkanklik disini.
Diposting oleh di
Label:
Comments
0 Comments
Facebook

Tidak ada komentar:

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Posting Komentar

Langganan: Posting Komentar (Atom)

Aridhoprahasti Education Blog

Memuat...