Jika selama ini sebuah auto readmore selalu tampil ala kadarnya, kali ini kita kan buat yang lebih atraktif dengan bantuan kode css3 transition, css3 transformation, border-radius, box-shadow dan text-shadow. Untuk menggunakannya anda perlu melakukan sedikit modifikasi pada template melalui penambahan kode css dan javascript serta perubahan xHTML. Penggantian xHTML dilakukan di antara tag pembuka dan penutup body (<body> & </body>) sedang penambahan kode css dan javascript di antara tag pembuka dan penutup head (<head> & </head>).
Kode CSS :
.PIObacayo a{
float:right;
font-size:14px;
color:red !important;
font-weight:bold;
text-transform:uppercase;
font-family:Arial;
background:rgba(255,255,255,0.8);
text-shadow:2px 2px 2px #888;
padding:4px 8px;border:1px solid #555;
text-decoration:none;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
-ms-transition:1s;
}
.PIObacayo a:hover{
background:red;
color:#fff !important;
text-decoration:underline;
}
.PIOmorethumb{
box-shadow:0 0 6px #aaa;
border:1px solid #eee;
border-radius:6px;
padding:6px 6px 2px 6px;
margin:5px 12px 5px 0;
background:#ccc;
}
.PIOmorethumb img{
padding:0;
margin:0;
border:1px solid #555;
border-radius:4px;
}
.PIObacayo a,.PIOmorethumb img{
transition:1.2s;
-o-transition:1.2s;
-moz-transition:1.2s;
-webkit-transition:1.2s;
-ms-transition:1.2s;
}
.PIOmorethumb{
transition:2.5s 1s;
-o-transition:2.5s 1s;
-moz-transition:2.5s 1s;
-webkit-transition:2.5s 1s;
-ms-transition:2.5s 1s;
}
.PIOmorethumb:hover{
transform:scale(2) translate(27px,0);
-o-transform:scale(2) translate(27px,0);
-moz-transform:scale(2) translate(27px,0);
-webkit-transform:scale(2) translate(27px,0);
-ms-transform:scale(2) translate(27px,0);
z-index:10;
}
.PIOmorethumb img:hover{
transform:scale(0.7);
-o-transform:scale(0.7);
-moz-transform:scale(0.7);
-webkit-transform:scale(0.7);
-ms-transform:scale(0.7);
border-radius:8px;
}
Javascript :
<script type='text/javascript'> summary_noimg = 530; /* jumlah teks tanpa thumbnail */ summary_img = 440; /* Jumlah teks dengan auto thumbnail */ img_thumb_height ='auto'; img_thumb_width = 100; /* width thumbnail * Semakin besar akan semakin lebar dan tinggi */ </script> <script src='https://sites.google.com/site/shannenpio/gitisimimin/SHNauto-readmore.js' type='text/javascript'></script>
xHTML Baru :
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' style='text-align:justify;'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='PIObacayo'><a expr:href='data:post.url' expr:title='data:post.title'>Read More</a></span>
</b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Cara menggunakan kode :
Untuk menggunakan kode ini silahkan anda baca melalui link di bawah ini. Jika anda sudah mengikuti panduan sebelumnya (Auto Post Thumbnail - Auto Readmore with CSS3 Effects), maka hanya perlu mengganti kode CSS dan Javascriptnya saja karena xHTML Baru tak ada perubahan (sama persis).
Tidak ada komentar:
Posting Komentar