Cara Membuat Auto Read More Berputar

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 != &quot;item&quot;'>
<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>
<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 == &quot;item&quot;'><data:post.body/></b:if>

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,
Salam Sukses,

Posted in: :::Tips and Trick:::