Membuat Tampilan Gambar Random Slide di Blogspot

Apa kabar sobat Blogger semua tentu sehat-sehat saja bukan, nah untuk kesempatan kali ini aku ingin berbagi tips sedikit tentang Cara Membuat Tampilan Gambar Random Slide di Blogspot ala maskolis. kenapa saya katakan ala maskolis karena tutorial ini aku ambil dari kode template maskolis yang tentu sudah tak asing lagi buat pembaca blogger. memang karya maskolis ini tak ada habisnya untuk membuat template blogger yang free alias gratis. ini bisa terbukti dari beberapa blogger mamakai template beliau ini dan yang aku bongkar di tutorial ini adalah template Johny Genit. 

nah sebelum kita bahas lebih lanjut alangkah baiknya kalian lihat dulu bagaimana Tampilan Gambar Random Slide di blog saya www.kumpulanapk.com. bagi yang enggan mengunjungi blog saya silahkan lihat saja gambar dibawah ini.

nah kalau sudah melihat bagaimana tampilanya mari kita langsung masuk ke operasi bedah template blogspot. untuk langkah yang pertama silahkan kalian login ke blogger.

1. login ke blogger.

2. silahkan langsung ke edit template. untuk jaga-jaga kalau ada yang tidak diharapkan silahkan backup template kalian, kalau belum tahu caranya backup template silahkan baca cara backup template dan upload template.

3. untuk yang berikutnya silahkan pilih menu edit HTML jangan lupa untuk mencontreng pada kotak kecil sebelah kanan.

4. kalau sudah cari kode ]]></b:skin>. kalau sudah ketemu silahkan taruh kode dibawah ini tepat dibawahnya.

Klik >>

 <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;background:#f3fbfd;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbKufb6-JrqnnTBws7N48ogDoIlFINyqcNgwMhkBXdycapAYPJyZLJ2EZqnhcqR6ZKmsVWR4kVMWTLw3Jj6IeFwSB-aXmW0lP_Pfl8dSQtFvEdvQm4_Bv1afyhqNnZlBE976ITPMGKJbQ/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}
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgurswFpEAwXBznNTy0FEcIKHukD9JrmPCjuSeYIhLisqrvHagFTi9hbHs2gvA62DqOU_jwY1XIFEJq1SQH0IZPqpH-6h3Lp5XFydh-sRT1BIhb4nVgXsgsmU2ysC9NYfHbVzvy2hzkgzSL/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>

5. tahap berikutnya silahkan taruh javascript dibawah ini tepat diatas </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://kodegigawatt.googlecode.com/files/kamera-bergerak-giga-watt.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>

untuk warna merah adalah javascript jquery terbaru kalau di template sobat sudah ada silahkan lewati saja dan untuk yang berwarna biru kalau javasript jquery-ui.min.js sudah ada juga silahkan lewati juga, namun yang hitam tu... jangan lewat karena pasti belum ada ditemplate kalian hehehe....

6. nah kita hampir selesai. ditahap yang akhir ini silahkan mencari lagi kode 

<div id='main-wrapper'> atau bisa juga <div class='main-wrapper'>.

nah kalau sudah ketemu kode diatas silahkan taruh kode dibawah ini tepat dibawahnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='randompost'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
CameraSlider({
blogURL:'http://giga-watt.blogspot.com/',
idcontaint:"#randompost",
NumCharacter: 160,
});
});
//]]>
</script>
</b:if>
<div class='clear'/>

sebelum kalian simpan silahkan ganti url yang warna biru dengan blog kalian. dan kalau sudah sekarang kalian bisa simpan atau save dan lihat hasilnya.

kalau sudah berhasil ucapkan alhamdulillah akhirnya bisa juga ya... hehehehhe... untuk sobat yang sudah pasang widget Random Slide gambar ini banyak keuntungannya karena pada tayangan slide ini gambar atau postingan yang ditayangkan selalu acak jadi bukan yang baru saja... bahkan postingan yang sudah lama sekalipun akan bisa tampil di tayangan slide ini. dan buat maskolis sendiri saya minta maaf kalau kode-kode template blog maskolis aku bongkar semoga maskolis harap maklum adanya ini semua... nah mungkin hanya itu yang bisa kau bagikan buat sobat blogger Cara Membuat Tampilan Gambar Random Slide di Blogspot. dan kalau ada masalah dengan tutorial ini silahkan berkomentar dibawah. semoga sukses dan banyak pengalaman juga di internet. happy bloging...