Cara Membuat Slide Konten di Blogspot

Cara Membuat Slide Konten di Blogspot - Poetra Pakumis | kali ini saya akan membagikan Tutorial Blog tentang Cara Membuat Slide Konten di Blogspot. Cara ini saya perlajari dari template ciptaan maskolis. sebenarnya kita para blogger newbie bisa belajar dari template-template ciptaan maskolis, Kenapa ? kok bisa belajar dari template mas kolis. Jadi begini saya jelaskan maskolis menciptakan sebuah template dari template lama dia yang di mudif ulang menjadi template yang lebih fress dan maskolis selalu membagikan templatenya dalam bentuk Notepad agar kita para blogger bisa belajar dari template-template maskolis memang sih agak sulit tapi bila kita sudah mengerti apa itu HTML, JavaScript, CSS3 pasti mudah. Oke langsung aja kita ketopik artikel, berikut screenshotnya :

Berikut Ini Cara Membuat Slide Konten :

1. Login akun blogger sobat yah pasti udah pada ngertilah soal itu mah. tapi saya ingatkan lagi biar jelas gitu.

2. Masuk ke Template - Edit HTML (Jagan lupa sob Centang Expand Widget Templates).

3. kalo sudah silahkan sobat cari kode ]]></b:skin> bila seudah ketemu silahkan masukan kode di bawah ini tepat di atas kode ]]></b:skin>.

/* Slide Content
----------------------------------------------- */
.slide1-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;}
.slide1 ul {list-style:none;margin:0;padding:0;}
.slide1 .widget {margin:0}
#bot-wrapper {padding-top:10px;width:970px;float:left;word-wrap:break-word;overflow:hidden}
#bot1-wrapper{width:620px;float:left;word-wrap:break-word;overflow:hidden}
#bot2-wrapper{padding-left:10px;width:340px;float:right;word-wrap:break-word;overflow:hidden}
.bot .widget,.bot1 .widget,.bot2 .widget{margin:0;padding:0 0 8px}
.bot ul,.bot1 ul,.bot2 ul {list-style:none;margin:0 0 0;padding:0 0 0;}

4. Dan masukan juga kode di bawah ini di atas ]]></b:skin> 

#carousel {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwgRG_OZAAvb51o1aLc5iOPFYDxmGYJ2Ii8uQJ30fyoC1WP6UUtVn-e8itr0fzJtXoZGqBryqXR1gK58asho53Izcb2GkoleGqtEQa17udb0KzYH8Ro8Fd3aMYFS7u_6fxxWYwk6G72MAt/s1600/sidebar.png);width: 970px; position: relative; float: left; margin:0 0 10px 0;height:230px;overflow:hidden;}
#carousel .judul{margin-left:10px;font:18px Oswald;padding:5px;color:#FF0000}
#carousel .container {position: absolute;left: 0px;width: 970px;overflow:hidden;}
#carousel ul{width:10000px;position: relative;overflow:hidden;margin-top:0px;}
#carousel ul li {display: inline; float: left; margin:1px 0px 2px 10px; padding:1px; width: 180px; overflow: hidden;height:178px}
#carousel .thumb{height:128px;width: 170px;background:#fff;padding:4px;border:1px solid #ccc;box-shadow:0 0 4px #bbb;-moz-box-shadow:0 0 4px #bbb;-webkit-box-shadow:0 0 4px #bbb;}
#carousel  #previous_button { position: absolute; top:8px;right: 39px; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGQrRNnM5Sz0qM1kd7n6ZBF9_gxvGaOLVz6_FQuOpek0c-JL9T1OLIPFrIaQfKyu3PV0c7P0RaKgY-wM0dGF26ENoTcYZa6hbzFHkYO0O96kQEEEdRHXwfNVvLoxLzAgFJaEz0ejYqGte/s1600/paginate.png) no-repeat; background-position: 0 0; }
#carousel #next_button { position: absolute; top:8px; right:10px; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGQrRNnM5Sz0qM1kd7n6ZBF9_gxvGaOLVz6_FQuOpek0c-JL9T1OLIPFrIaQfKyu3PV0c7P0RaKgY-wM0dGF26ENoTcYZa6hbzFHkYO0O96kQEEEdRHXwfNVvLoxLzAgFJaEz0ejYqGte/s1600/paginate.png) no-repeat; background-position: -27px 0; }
#carousel #next_button:hover, #previous_button:hover { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
#carousel ul li a.slider_title{color:#FF0000;display:block;text-align:center;font:bold 12px Bookman Old Style;margin-top:8px}
#carousel ul li a.slider_title:hover{color:#111}

 5. Bila cara di atas sudah dilakukan jangan kemana-mana dulu masih ada yang lainya. Silahkan sobat cari kode   <div id='main-wrapper'> dan masukan lagi kode di bawah ini tepat di atas kode <div id='main-wrapper'>.

<div class='clear'/>
      <div id='slide1-wrapper'>
<div id='carousel'>
<div class='judul'>Tutorial Blog</div>
<div id='previous_button'/>
<div id='next_button'/>
<div class='container'>
<ul>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Software PC?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script> </ul><div class='clear'/>
</div>
<div class='clear'/>
</div>

Note :
Cara di atas itu untuk menjadikan Slide konten perlabel jika sobat ingin menampilkan Artikel terbaru silahkan sobat Hapus kode yang berwarna biru itu.
Sedangkan kode berwarna merah ada judul dari Slide konten tersebut, silahkan sesuaikan dengan keinginan sobat.

6. Silahkan preview dulu kalo sudah cuco sama sobat baru di save.

Nah, sekian artikel tentang Cara Membuat Slide Konten di Blogspot semoga artikel yang saya tulis bermanfaat bagi sobat semua.

Jika anda menyukai artikel Cara Membuat Slide Konten di Blogspot dan ingin memosting artikel ini.

Bila Anda menjumpai BROKEN LINK atau LINK YANG RUSAK, silahkan berkomentar di bawah postingan pada kotak komentar yang disediakan.