Halo sobat blogger ketemu lagi diblog INFONETCMU Setelah lama tidak post karena ada kesibukan lain. Dan pada kesempatan kali ini saya akan share artikel blog tentang cara Membuat gambar pada homepage melingkar (bundar) atau yang lebih jelasnya tampak seperti uang logam / koin, kali ye.! he..he..
Cara membuatnya juga tidak begitu sulit, kita cuma diharuskan sedikit bermain dengan kode HTML (sedikit menambah kode gitu..!)
Okey bagi kawan-kawan yang mau mencoba menerapkan Gambar Melingkar ini ke blognya. silahkan ikuti petunjuk berikut.
- Langka pertama login ke akun bloger sobat
- Langkah kedua klik menu Rancangan » Edit HTML
- Langkah ketiga Download dulu template sobat biar aman dan biar kalau terjadi error ada cadangan templatenya
- Langkah keempat anda cari kode ]]></b:skin>
- Langkah kelima anda kopy kode berikut dan paste tepat dibawah kode]]></b:skin> atau diatas Tag </head>
<!-- kondisi home -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.thumb-post img {
padding: 4px;
margin-top:0;margin-right:0;margin-bottom:5px;margin-left:0;
width: 90px;
height:90px;
background: #fff;
border: 3px solid #ff8000;
-webkit-border-radius: 50px;
-moz-border-radius: 50px; border-radius: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.post:hover:hover .thumb-post img {
border: 3px solid #0000ff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
</style>
</b:if>
</b:if>
<!-- /kondisi home -->
- Langkah selanjutnya anda cari kode yang seperti dibawah ini, atau yang jelasnya adalah kode Readmore Otomatis yang letaknya diatas kode </head>
- Tapi kalau anda blum menggunakan ReadMore Otomatis anda bisa membaca artikel saya yang dulu tentang cara Membuat Readmore Otomatis
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
- Setelah kode diatas ketemu Sisipkan kode berikut <div class="thumb-post"> didepan kode <span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>
- Jadi hasilnya akan seperti ini.
<div class="thumb-post"> <span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>
- Atau anda juga bisa langsung menggunakan kode dibawah ini, dengan cara Hapus keseluruhan kode readmore otomatis anda, kemudian ganti dengan kode berikut
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 340;
summary_img = 340;
img_thumb_height =120 ;
img_thumb_width =120 ;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
*/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
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);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; }
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<div class="thumb-post"><span style="float:left;padding:0px 10px 5px 0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjphZkoFSkpCR4J4sd6GO5IcA9Qu4CiktcCh2W4wfnPnMC1_kBhpgJhJFoY234QqlxI4iUXnCPrqS3nMPv5Kv-mcVSoDSLdsEcKQFnW3Qgu8U5Sd-QQegFFa4j1UvBnKrG1kLZOEm5Nx-42/s0/diary.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>'; var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<div class="thumb-post"><span style="float:left;padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>'; summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
- Kode yang berwarna merah adalah sisipan kode pada script ReadMore ( Tambahannya )
