Read More ini berfungsi sebagai peringkas posting agar tidak memanjang.
Read More ini sudah terpasang namun anda perlu memotongnya dengan tool
bar yang ada diatas disaat anda membuat posting.
Tentu capek bukan?, Digunakanlah Auto Read More ini, auto read more ini
berfungsi sama jika anda memotong nya dengan tool bar, dengan
menggunakan auto read more ini posting akan terpotong sendirinya.
Tutorial kali ini adalah tutorial yang direquest oleh pengunjung blog
kami, yaitu Putut Sanjaya. Ia Menanyakan tentang bagaimana cara untuk
membuat icon "read more" berputar. untuk bisa membuatnya berikut cara
untuk membuatnya:
Silahkan Masuk Ke Blogger Anda.
Setelah itu, Klik Menu Template, --> Backup templat Anda Terlebih dahulu, --> Lalu, Klik Tombol Edit HTML.
Cari Kode ]]></b:skin> ,dengan menekan CTRL+F.
Masukan Kode Berikut ini diatas kode ]]></b:skin> :
.YBB-readmore
{background:black;font-size:18px;color:#32BDE8;height:100px;width:100px;line-height:100px;position:absolute;z-index:999999;-moz-border-radius:200px;-webkit-border-radius:200px;border:8px
solid rgba(255, 255, 255, 0.8
);margin-top:-10px;margin-left:170px;-webkit-box-shadow:0 1px 9px
red;-moz-box-shadow:0 1px 9px
red;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:
padding-box;opacity:0.9;-moz-transform:
rotate(60deg);-webkit-transform: rotate(60deg);box-shadow:0 1px 9px
blue;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s
ease-in-out;-o-transition: all 0.9s ease-in-out;transition: all 0.9s
ease-in-out;}
.YBB-readmore:hover
{opacity:2;height:100px;width:100px;-webkit-transform:rotate(1080deg);-moz-transform:rotate(1080deg);-ms-transform:rotate(1080deg);-o-transform:rotate(1080deg);transform:rotate(1080deg);box-shadow:0
1px 9px red;}
.YBB-readmore a {color:#ffffff;font-family: 'Rancho', cursive;
text-shadow:0px 0px 1px #ffffff;font-size:18px}
Lalu, Cari Kode </head> dengan menekan CTRL+F.
Masukan Kode Berikut ini diatas kode </head>:
<script type='text/javascript'> var thumbnail_mode = "no-float" ;
summary_noimg = 430; summary_img = 340; img_thumb_height = 100;
img_thumb_width = 120; </script> <script
src='https://daftar-javascript-kami.googlecode.com/files/YBB%20ReadMore.js'
type='text/javascript'/>
Cari Kode <data:post.body/> dengan menekan CTRL+F.
Ganti Kode <data:post.body/> dengan kode berikut ini:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='YBB-readmore' style='text-align: right;'>
<a expr:href='data:post.url'>Read More</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Setelah itu, Klik Tombol Simpan Template.
Selamat Mencoba,
Salam Sukses,