Memasang slider otomatis ke dalam Blog

 |  No Comments | 



Assalamualaikum sahabat blogger..
Anda tentu nggak asing lagi dengan istilah slider di dalam blog. Kebanyakan slider yang sering dipakai secara manual dengan memasang foto dan tulisan sehingga kesannya menjadi monoton hanya foto-foto itu saja yang bisa dilihat. Dan jangan khawatir kali ini saya akan membagi tips memasang slider yang muncul secara otomatis dari post yang sudah kita buat. Berikut langkah-langkahnya:
  • 1. Cari kode <head> copy kode berikut tepat di bawah kode <head>
<script src='//code.jquery.com/jquery-1.10.2.min.js'/>
Perlu dipahami apabila di template anda sudah terpasang dengan jquery javascript maka kode jquery yang lama di hapus saja karena bisa bentrok. Atau daripada anda penasaran silahkan kedua-duanya tetep dipasang apabila slider nya tidak muncul maka jquery yang lama dihapus saja. Biasa kodenya yang lama letaknya di bawah kode ]]></b:skin>  atau nggak di atas kode </head> hehehe :u: :u:
  • 2. cari kode ]]></b:skin> lalu copy kode berikut di atas kode ]]></b:skin>

/* Slider
-----------------------------------------------
*/
#main-top h2 {
display:none;
}
#main-top {
position:relative;
z-index:0;
}
#main-top .widget-content::after,
#main-top .widget-content::before,
#manualslidenya::before,
#manualslidenya::after {
content:"";
position:absolute;
z-index:-2;
bottom:15px;
left:5px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0,0,0,0.7);
-moz-box-shadow:0 15px 10px rgba(0,0,0,0.7);
box-shadow:0 15px 10px rgba(0,0,0,0.7);
-webkit-transform:rotate(-1deg);
-moz-transform:rotate(-1deg);
-ms-transform:rotate(-1deg);
-o-transform:rotate(-1deg);
transform:rotate(-1deg);
}
#main-top .widget-content::after,
#manualslidenya::after {
right:5px;
left:auto;
-webkit-transform:rotate(1deg);
-moz-transform:rotate(1deg);
-ms-transform:rotate(1deg);
-o-transform:rotate(1deg);
transform:rotate(1deg);
}
ul.featpost,
ul.featpost li {
padding:0;
margin:0;
overflow:hidden;
position:relative;
}
ul.featpost li {
height:280px;
display:none;
float:left;
}
ul.featpost li:first-child {
display:block;
}
ul.featpost,
.featuredpost {
height:280px;
}
.featuredpost {
overflow:hidden;
}
ul.featpost img {
width:100%;
height:100%;
}
#main-top .widget-content {
padding:5px;
}
ul.featpost .labeltext {
position:absolute;
bottom:35px;
left:0;
width:85%;
z-index:9;
background-color:$(sli.desback.color);
padding:7px 10px;
color:$(sli.text.color);
}
ul.featpost strong.titlex {
position:absolute;
bottom:95px;
display:block;
left:10px;
z-index:10;
background-color:$(sli.back.color);
padding:5px 8px;
max-height:22px;
overflow:hidden;
}
ul.featpost strong.titlex a {
font:$(sli.font.type);
color:$(sli.text.color);F
text-decoration:none;
width:100%;
font-weight:bold;
text-transform:capitalize;
display:inline-block;
}
ul.featpost .labeltext .infolabel {
font-size:90%;text-align:right;
}
ul.featpost .labeltext .infolabel a {
color:$(sli.text.color);
}
ul.featpost .labeltext .date {
margin-right:5px;
}
ul.featpost .labeltext p {
margin:5px 0 0;
font-style:italic;
}
#main-top .flex-control-nav.flex-control-paging, #manualslidenya .flex-control-nav.flex-control-paging {
position:absolute;
width:100%;
bottom:15px;
z-index: 2;
}
#main-top .flex-viewport, #main-top-manualslide .flex-viewport {
max-width:800px;
}
.featuredpost .flex-direction-nav a {
top:50%;
margin-top:-20px;
}
a.feathumb {
width:100%;
height:280px;
display:block;
}
#mainmtop-manualslide .widget > h2 {
display: none;
}
#mainmtop-manualslide .Image .widget-content {
padding: 0;
border: 0;
max-height: 280px;
overflow: hidden;
}
#mainmtop-manualslide .widget {
padding: 0;
margin-bottom: 40px;
}
#mainmtop-manualslide {
overflow: hidden;
max-height: 310px;
position: relative;
z-index: 0;
}
#manualslidenya {
padding: 5px;
max-height: 280px;
}
#main-top-manualslide .bungkus {
padding: 0 10px 15px;
}
#main-top-manualslide .Image img {
max-height: 280px;
}
.flex-direction-nav a {
position:absolute;
display:block;
top:90px;
width:25px;
height:40px;
background-color:$(main2.date.color);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
outline:0;
text-indent:-9999px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdjckO0ZNcJn7HBypmnsTwvNuqu27Ur8ynvwG1gBzChrYMI2bR8qopaScn0-uh2kV9bPigyGdU_3v4YvFASmQ8Irm_OesG3LujA4klBgOOtHF4kEOPhPcnf8zBBYjJpzwKN-WTVbQOsKM/s1600/glyphicons-halflings-white.png);
background-repeat:no-repeat;
z-index: 2;
}
.widget-content:hover .flex-direction-nav a, #manualslidenya:hover .flex-direction-nav a {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}
.flex-direction-nav a:hover {
background-color:$(main2.datehover.color);
}
.flex-direction-nav a.flex-prev {
right:0;
-moz-border-radius:3px 0 0 3px;
-webkit-border-radius:3px 0 0 3px;
border-radius:3px 0 0 3px;
background-position:-18px 7px;
}
.flex-direction-nav a.flex-next {
left:0;
-moz-border-radius:0 3px 3px 0;
-webkit-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
background-position:7px 7px;
}
.flex-control-nav.flex-control-paging,
.flex-control-nav.flex-control-paging li {
list-style:none;
padding:0;
text-align:center;
margin:0;
}
.flex-control-nav.flex-control-paging li {
display:inline-block;
}
.flex-control-nav.flex-control-paging a {
display:inline-block;
text-indent:-9999px;
margin:0 3px;
width:10px;
height:10px;
background-color:$(main2.datehover.color);
cursor:pointer;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}
.flex-control-nav.flex-control-paging a.flex-active {
background-color:$(main2.date.color);
}
.flex-viewport,
.rcbytag {
max-width:612px;
margin:0 auto;
}
.main-outer {
width: 940px;
margin: 0 auto;
}
.column-center-outer {
width: 620px;
float:left;border-right: 1px solid #eaeaea;
}
ul.featpost strong.titlex {
padding: 10px 15px;background: rgba(67,113,207,0.8);
z-index: 99;
font-size: 20px;
bottom: 100px;
margin-bottom: 35px;
}
ul.featpost strong.titlex a{
color: #f5f5f5;
font-family: 'Oswald',serif;
}
ul.featpost .labeltext {
background: rgba(0,0,0,0.7);
padding: 7px 14px;
width: 385px;
color: #fff;
font-size: 13px;
line-height: 17px;
z-index: 99;
}
.column-right-outer {
width: 315px;
float:right;
}

  • 3. Cari kode </head> dan copy kode berikut di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.post-outer {
margin-top: -40px;
}
.post-title {
font-size: 30px;
}
.post-body {
font-size: 14px;
line-height: 1.7;
letter-spacing: 1px;
}
  </style>
</b:if>
<script src='https://dl.dropboxusercontent.com/u/80436322/recent-post.js'/>
<script src='//dl.dropboxusercontent.com/u/80436322/liketodownload/tinynav.min.js'/>

  • 4. Save template
  • 5. masuk ke menu Layout- tambah Add a Gadget pilih HTML/JavaScript dan copy paste kode berikut kedalamnya:
<div id="featpost"></div>
<script type='text/javascript'>
jQuery("#featpost").AutofeaturedPost({
MaxPost:5
});
</script>
  • 6. Posisikan Widget atau Gadget di atas Post
  • 7. Save

Selamat mencoba semoga bermanfaat :14: :14:
Add

0 comments:

Warning!
- Tinggalkan jejak anda di kolom komentar.

Copyright © 2012 CAHLABAN. All rights reserved.