Cara Memasang Widget Recent Post Pada Blog

Cara Memasang Recent Post Pada Blog

1. login blogger

2. tata letak >> tambah gadget >> html/java script

3. copy paste script dibawah ini

<style>
img.recent_thumb {padding-right:10px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 55px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:0px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>
<script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/recentpoststhumb.js"></script>
<script type="text/javascript">
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>
<script src="http://wayan-susandiarta.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs" type="text/javascript"></script>

NOTE:

1. ganti tulisan berwarna merah dengan url blog sobat
2. pengrtian tentang tulisan berwarna biru:

• var numpost merupakan jumlah posting yang akan tampil pada recent post
• var showpostthumbnail menampilkan gambar pada recent post
• var displaymore tautan link untuk membaca post fungsinya seperti readmore
• var displayseparator menampilkan garis yang membatasi antara post satu dengan yang lainnya
• varcommentnum menampilkan jumlah komentar
• var showpostsummary menampilkan deskripsi tentang post
• var numchars merupakan jumlah karakter dari deskripsi post

3. dan untuk menggunakan mau pun tidak, dapat menggunakan FALSE dan TRUE, saya asumsikan TRUE itu Ya dan FALSE itu Tidak, jadi ketika saya tidak ingin menampilkan var postsummary saya akan menuliskan FALSE.

Cara Membuat Tampilan Popular Post Terkeren

Style Pertama

membuat popular post dengan penomoran otomatis

1. login blogger >> template >> edit html
2. copy paste kode berikut tepat diatas ]]></b:skin>

 .popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; 
}
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Style Kedua

membuat popular post menjadi thumbnail

1. login blogger >> template >> edit html
2. copy paste kode berikut tepat diatas ]]></b:skin>

#PopularPosts1 {width:100%;background:none;} 
#PopularPosts1 .widget-content {margin: 0 !important; } 
#PopularPosts1 ul {margin: 0 !important; padding: 0 !important; } 
#PopularPosts1 ul li {background:none ;list-style-type: none;margin:0;
padding:0 !important} 
#PopularPosts1 ul li .item-title{display:none} 
#PopularPosts1 li {float:left;list-style:none;} 
#PopularPosts1 .item-thumbnail img {float:left;margin-bottom:3px;
width:90px;height:90px;border:none;transition:all 400ms ease-in-out;} 
#PopularPosts1 .item-thumbnail img:hover {opacity:.7}

3. kemudian klik Jump to widget dan pilih Popularpost1
4. cari kode ini <!-- (3) Show only thumbnails --> dibawah kode tersebut ada kode seperti berikut

<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' expr:height='data:thumbnailSize' 
expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>

5. ganti kode diatas dengan kode dibawah ini

<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='thumbnails' expr:src='data:post.thumbnail' 
expr:title='data:post.title' height='90' width='90'/>
</a>
</div>

untuk menyesuaikan lebar dan tinggi thumbnail edit kode yang distabilo kuning

Style Ketiga

membuat widget popular post berwarna warni

1. login blogger >> template >> edit html
2. copy paste kode berikut tepat diatas ]]></b:skin>

.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

simpan template dan lihat hasilnya :D semoga bermanfaat :

Cara Membuat Slider Carousel Otomatis

Tips kali ini saya akan sharing tentang Cara Membuat Slider Carousel Otomatis pada blog,  Slider Carousel disini adalah sebuah widget yang menampilkan dari keseluruhan postingan dan juga bisa untuk menampilkan berdasarkan kategori atau label posting yang ada pada web/blog. Nah, untuk anda yang ingin menambahkan widget ini pada blog maka blog anda akan lebih kelihatan profesional. Ikuti caranya di bawah ini, tapi sebelumnya anda bisa lihat demonya disini

Cara Membuat Slider Carousel Otomatis ini sebenarnya cukup mudah, anda hanya memsukan code pada template dan ganti nama label yang akan ditampilkan didalam Slide Carouser tersebut. Oke langsung saja perhatikan cara membuatnya di bawah ini

1. Seperti biasa masuk ke blog anda

2. Selanjutnya pilih Template

3. Untuk menghindari terjadinya kesalahan, Download full terlebih dahulu template anda

4. Kemudian pilih EDIT HTML

5. Cari code ]]></b:skin> (gunakan CTRL+F atau F3 untuk pencarian lebih cepat)

6. Letakkan code di bawah ini, tepat diatas code ]]></b:skin>

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}

#carousel  .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTER1ps8XzT8a82IRN3QqNferqs5Wh8mo91DYtQRUvh5iW2m2s5SBU-xq0vmArAjC26CV3h6TepUieFSNqjyaNhNSPBPIb_U1rh-7mKo-LPmbuIVS0Dc0Vw26PAexHnEftv_hZNs1eHGw/s1600/scroller-bg.png)  repeat center}

#carousel  #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVfy12aW1sCbUncGW9_t5FEYqxR599ZLVkVYnpAbB0c3la5VvVc9Pgi7-AuxxCmk0dMz6xllq2Hsrx9SpgxG-XSe5Ikc2N6sZrtn4V6yM7n0dBK0gjaq_mF92SJggfWIAvRZSRF9SNKiU/s1600/prev.png)  center;z-index:100;cursor:pointer;border-right:1px solid #ccc}

#carousel  #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinF4Cxon1KN8EwQF1F2e6ZqEOxWl_qhOAqCYvl9xy8yY30EpBR1mIMDaYgUYKZ0rCt-nib_3cALvwLN6hzDkSL0Og86zCjmiANkkYMJrb39EmOwA9CbKIkUZ2qGn8fiyR4k5mZ1c9dKxY/s1600/prev.png)  center}

#carousel  #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv8IHyFcJK0UfHYQhZJNYhhp01Obc-Tnvq15rQUMC2lmt1B6_PNhqQRNa9Q2282i1c4JNkLQGrHRi8CIBzZqgaxoGE4s4gNOqzrX4ScLeBAAccapcxcmixOFE9u-thtaoSSGTMwcv40UM/s1600/next.png)  center;z-index:100;cursor:pointer;border-left:1px solid #ccc}

#carousel  #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV4srBvKXa_B55NrPwbVqSdL5FrdWl8BLbWxjkiMAx9uhG2XIR1gJVBWztXU-87Rf6r1b45gymBsAqyQWs4uAPsGV0sSEjgxNffvEehhy2X_kbw1IuRD1RbLejMjvSIpFjcnzv6vQe5og/s1600/next.png)  center}

#carousel ul{width:100000px;position:relative;margin-top:10px}

#carousel ul li{background:#fff  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijo3ilTUZD5siBvf4YamR4hQylfETYHKKz0qCou7oFr-jQjuDmYx6bmQrZDG_npGcyE6TCkEL1aU4VbsMVpMPVOr-nmQCb-_n77D6B_g_hBWl9TAmoulaIDsACunNdMC7uC0GtAoNe-Do/s1600/main.png)  repeat-x  top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px  solid #ccc;width:145px;height:150px;margin:0 4px 20px  7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}

#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}

#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}

#carousel ul li a.slider_title:hover{color:#cd1713}

#carousel a img{display:block;background:#fff;margin-top:0}

Keterangan:
Untuk code yang berwarna merah adalah tinggi dan lebar pada slider ini, jadi sesuaikan dengan template yang anda gunakan.

7. Langkah selanjutnya cari code </head> dan letakkan code di bawah ini, tepat diatas code </head>

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

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbfumHJQ4KWks5Et6PYAGG0g5sgiD8veBZ1KPGWbjMIZz6VL2K7gVeekFkhQO3VJivKHvudefDmwEG-sBkFFFZgMWif8zsZdzOhtgpaB5IwzzNXu-NdY7lNCQ_LNsZRAven_Gi2RPhgOY/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 10;
label1 = "Sport";

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();
document.write('<ul>');
for (var i = 0; i < numposts1; 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 class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Keterangan :
Perhatikan code diatas yang berawarna merah, itu adalah kode script jQuery.min.js jika pada template sudah terdapat kode tersebut tidak perlu anda masukan lagi code script jQuery.min.js tersebut. Dan untuk code berwarna biru 10 adalah jumlah yang di tampilkan pada Slider sedangkan Sport adalah label yang akan ditampilkan pada Slider jadi bisa anda ganti sesuai selerah anda (besar kecil huruf harus disesuaikan).

8. Selanjutnya untuk memunculkan Slider, cari code <div id='main-wrapper'> dan letakkan code di bawah ini tepat diatas code <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='carousel'>

<div id='previous_button'/>

<div class='container'>

<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

</script>  

<div class='clear'/>

</div>

<div id='next_button'/>

</div>

<script type='text/javascript'>

(function($) {     $(document).ready(function(){

$(&quot;#carousel .container&quot;).jCarouselLite({

    auto:4000,

    scroll: 1,

    speed: 800,  

    visible: 5,

    start: 0,

    circular: true,

    btnPrev: &quot;#previous_button&quot;,

    btnNext: &quot;#next_button&quot;

    });

    })})(jQuery)  

</script>

</b:if> 

Catatan :
Code di atas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga  diatas footer

9. Terakhir Save, dan lihat hasilnya

Membuat Image 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 yaitu Membuat 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.

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 code jquery-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