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>:
- Cari Kode <data:post.body/> dengan menekan CTRL+F.
- Ganti Kode <data:post.body/> dengan kode berikut ini:
<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>
Keterangan :
Jika Terdapat Kode <data:post.body/> yang ada dua atau lebih, ganti kedua atau lebih tersebut.
- Setelah itu, Klik Tombol Simpan Template.
Selamat Mencoba,
Salam Sukses,
Your-BelajarBLOG
Dan Lihat Demonya Di http://ybblab.blogspot.com/ ,
Semoga Berhasil,
Salam Sukses,
Your-BelajarBLOG
Ikuti Caranya dengan benar,
untuk mencari kodenya klik dahulu kode yang ada pada templatenya, lalu Tekan Tombol CTRL+F.
dan jika kode terdapat dua ganti kedua-duanya.
Semoga Berhasil,
Your-BelajarBLOG
coba cek ibayastronaut.blogspot.com
Semoga Berhasil,
Salam Sukses,
Your-BelajarBLOG
saran:mungkin harus pake garis/border dulu kalau mau pke cara itu
Sudah saya kasih border di pinggirnya dan warnanya pake rgba dan terlihat putih transparan, Lalu, sebagai pelengkapnya bayangannya agar lebih menarik.
boleh nanya..??
tapi keluar topik
tau g gimana cara ngubah garis di header/dll jadi aneh..??(g tau namanya lah)
kalau bisa kasih caranya..
Atau coba Cari kode border: dengan menekan CTRL+F di editor HTML Template.,
Salam Sukses,
Your-BelajarBLOG
border {
border: 1px solid #333;
z-index: 99;
}
Semoga Berhasil,
Salam Sukses,
Your-BelajarBLOG
nanya lagi boleh..?
kalau border radius gunanya untuk apa..??
contoh:
#border-radius {
border-radius: 10px 0px 10px 0px;
border: 2px solid rgba(0,0,0,0.5);
}
atau seperti berikut :
#border-radius {
border-radius: 10px;
border: 2px solid black;
}
Salam Sukses,
Your-BelajarBLOG
kunjungi juga ya
http://tipsdantrik-net.blogspot.com/2012/03/membuat-auto-read-more-thumbnail-tanpa.html
padahal udh aku ikuti langkahnya dg benar ..
coba agan pake ni Read More di Blog agan sendiri (cuman Sementara)
klo bisa beritahu ane ..
Kedua-duanya bisa dengan menggunakan template dari blogger,
Coba Taruh Ganti kode <data:post.body/> (kode kedua dari pencari, jika menggunakan template dari blogger) dengan kode berikut ini, cari dengan CTRL+F:
<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>
Mungkin Jika kode <data:post.body/> tidak ditaruh dengan benar tidak akan muncul fitur readmore, atau coba satu persatu kode <data:post.body/> dan ganti dengan kode diatas.
Semoga Berhasil,
Salam Sukses,
Your-BelajarBLOG