Cara Membuat Widget Slideshow Responsive Di Blog

Cara Membuat Slider Carousel Otomatis Di Blogspot - Pada sinag ini saya akan kasih menu Slider Carousel Otomatis yang bisa di psang di bawah saja , anda bisa pasang di bawah psotinagn atau di atas kode footer seperti yang kamu lihat saya akan kasih menu Slider Carousel Otomatis yang saya edit yang akan di kasihkan ke kamu yang membutuhkan untuk blog anda ,Ga usah cari kamana ke mari anda cukup masuk blog saya maka saya akan kasih menu Slider Carousel Otomatis ini dengan cara gratis.

Slider Carousel Otomatis ini yang tanpilan bukan hanya cantik saja tapi bisa memudahkan pengjung blog anda untuk memilih judul yang dia cari ,Slider Carousel Otomatis banyak manpat sekali pada blog ,

Slider Carousel Otomatis adalah sebuah menu yang bisa di tanpilkan dengan sesuwai lebel yang ada pada dalam blog anda ,jika anda mau tau tanpilan anda bisa lihat pada gambar di bawah ini.

Seperti yang kamu lihat pada gambar di atas ,jika kamu tertarik sama menu itu yang kamu lihat di atas kamu bisa lasung saja pasang dan lanjut pada tutorial nya di bawah ini tutorial Cara Membuat Slider Carousel Otomatis Di Blogspot.

Langkah Pertama...

1. Login ke blogger

2. Cari menu Template dan Edit HTML kemudian Tekan Kibot CTRL+F

3. Kamu cari kode ]]></b:skin> jika sudah ketemu anda ambil kode di bawah dan copy kan kode di bawah di bawah kode ]]></b:skin> ini.

<style type='text/css'>
#carousel{width:auto;height:180px;margin-bottom:0px;position:relative;display:block} #carousel .container{position:absolute;left:39px;width:895px;height:180px;overflow:hidden;background:url(#) repeat center} #carousel #previous_button{position:absolute;width:35px;height:180px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhng37yxnuvJouEfZJufiY-dmhgjdfxBn_qXIXGDA5SGnwrfq4VSb7D45DMNoNLPZ_IZJ_OMFUFx6y0gNaygkAcpR9h87OYkla6_0IhHEMxZxdL80R55cQj9K28jmh9ezwchu7UceDi1yo/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/AVvXsEgYThbcR_IERlSs12AlpoSazHVh_aHx53fMeun-U1AXq2KDzVu09CUH5cYBgsFUNmd6WQPvS8oMey9KWtst_Oz1j3EWL0DKT5L1dm9QgtfAltJ4QUhkzts0MIBYnw6UUJ0vTWZ4M27f1lU/s1600/prev.png) center} #carousel #next_button{position:absolute;right:0;width:40px;height:180px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtM7d6gmdWDCFjW7y7QJB24YXtRfMBXO2_2uyeDX-P5HCyx6UHjkxBAMYlQpUGWZhVKBWbIO2vB5L33Fgwt9sqXupac0CGGR-MugBFyg0KwwvCX4AjskCg3akMpavk_a90MnIvxy865vQ/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/AVvXsEhGVldbzXG9i8pJU-CvRYhqSiALR3k6CxIgD8b5HU0c-EsJp5EcbAxyGnXzUi7BF08sY0NvUrNuM0G4cWTBI8HU0X1TuJwXwTEjdLNl5Q3bk8rr_YCxSLxLTakobAP_W_sHmUpTyO_awpQ/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/AVvXsEjWkG8m4wJpS1IziZ53mdwuEXlQBBnFZqnJaDV-3SF3VTao2Be6dmKpeoClOM0wZLPhUDqwGbGT9l3uZgNYv37Fjs1CCmYNcQpWMX5RMUk2YB5UFw5s-DP0rI2RWasuBsd6nf201UiYrOE/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:100px;height:150px;margin:0 4px 20px 3px;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}
</style>

4. Berikutmua kamu cari kode </head> dan letkan kode di bawah di atas kode </head> ini.

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

aBold = true;

summaryPost = 1400;
summaryTitle = 25;
numposts1 = 12;

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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';

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

5.Langkah Berikutnya masih sama cari kode </head> dan letkan kode di bawah di atas kode </head> ini.

<script src='https://rawgit.com/danikece/adanitutorialcid/master/slider-jquery-tutorialcid.min.js' type='text/javascript'/>
<script src='https://rawgit.com/danikece/adanitutorialcid/master/menu-slider-tutorialcid.js' type='text/javascript'/>

6. Kemuidan Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya.

<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#carousel .container").jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 4,
start: 0,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"
});
})})(jQuery)
</script>

7.Kemudian coba kamu Save pada tempale jika menu itu tidak tanpil anda bisa taru di mana aja ,Demikian lah pada postingan Cara Membuat Slider Carousel Otomatis Di Blogspot ini semoga bisa bermanpaat bagi anda dan kita semuwanya ,Jika kamu suka pada psotingan yang saya buat ini kamu bisa like dan shree pada teman-teman anda di blogger cukup sekian terimakasih anda telah memaca artikel saya semogabermanpaat wasalam.

Lokasi:

tes

Cara Membuat Widget Slideshow Responsive Di Blog

Langkah Pertama...

Menu Halaman Statis