Cara Membuat Readmore Berbentuk Lingkaran (Circle)

Kali ini Saya akan membahas cara membuat readmore atau baca selengkapnya dengan efek circle.
Readmore ini sangat cocok untuk template yang gelap dan bisa membuat pengunjung betah saat melihat readmore yang Anda buat.

Tanpa berlama-lama berikut cara membuatnya :

• Login ke blogger.com, jika sudah, 
• Pilih Template → Edit HTML → Expand Template Widget 
• Cari kode ]]></b:skin> , agar mudah mencari tekan f3 
• Setelah itu letakkan script di bawah ini di atas kode ]]></b:skin> 

Demo

.Zonareadmore a {
font-family:Covered By Your Grace, sans-serif !important;
color:#CFDBEC !important;text-shadow:1px -1px 1px #000;
font-size:14px;text-decoration:none;
}
.Zonareadmore a:hover {
font-size:19px;color:#fff;text-shadow:0px 0px 2px rgb(0,86,224);}.circlewrapper {
width:98px;
height:98px;
float:right;text-align:center;
}
.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgb(0,86,224);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px rgb(0,86,224);
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgb(0,86,224);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px rgb(0,86,224);
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}
.circle2 {
background-color: transparent;
border: 5px solid rgb(0,86,224);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px rgb(0,86,224);
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}
@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(0,86,224);}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(0,86,224); }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}

• Selanjutnya cari kode </head> agar mudah mencari tekan f3
• Setelah itu letakkan script di bawah ini di atas kode </head> 

<script type='text/javascript'>
var summary_noimg = 300,
summary_img = 300,
img_thumb_height = 80,
img_thumb_width = 90;
</script>
<script type='text/javascript'>
//<![CDATA[

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");
var summ = summary_noimg;
if (img.length >= 1) {
imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

• Selanjutnya cari kode <data:post.body/> , jika ada 2 pilih yang pertama dan ganti kode <data:post.body/> dengan script di bawah ini ↓

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div class='circlewrapper'>
<div class='circle'/>
<div class='circle1'/>
<div class='circle2'>
<span class='Zonareadmore'><a expr:href='data:post.url'>Readmore</a></span>
</div></div>
</b:if>
</b:if>

• Simpan dan lihat hasilnya.

Keterangan :

• Tulisan warna merah adalah jenis font yang bisa Anda ganti
• Tulisan warna biru adalah kode warna teks font Readmore
• Tulisan warna oren adalah zona radius rgb lingkaran
• summary_noimg = 300; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)     
• summary_img = 300; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)     
• img_thumb_height = 80; (Thumbnail 'tinggi dalam piksel)     
• img_thumb_width = 90;  (Thumbnail 'lebar dalam piksel) 
• Tulisan warna hijau jangan Anda rubah.

Selamat Mencoba !