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
Gk Bisa Sob....
ReplyDeleteCoba Sekali Lagi Dengan Ikuti Cara-Cara Diatas Dengan Benar,
DeleteDan Lihat Demonya Di http://ybblab.blogspot.com/ ,
Semoga Berhasil,
Salam Sukses,
Your-BelajarBLOG
kode gk ada tuh, letaknya dimana, udah di cari dengan ctrl+f tp tidak bisa? tolong jawabannya. Terima kasih
ReplyDeleteAda Kok Sob,
DeleteIkuti 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
tapi kenapa kok widget yg di sisi2 jadi kebawah semua?
Deletecoba cek ibayastronaut.blogspot.com
Jika Sebelumnya Sudah Terpasang Auto Read More, maka read more ini akan terdapat dua, dan sebaiknya dihapus terlebih dahulu, Dan Jika Sudah Dihapus Ganti Dengan Langkah-langkah diatas, Yang Akan jadi Seperti link blog http://ybblab.blogspot.com/.
DeleteSemoga Berhasil,
Salam Sukses,
Your-BelajarBLOG
thaks yah,,,berhasil..
ReplyDeletesaran:mungkin harus pake garis/border dulu kalau mau pke cara itu
Ok Sip,
DeleteSudah saya kasih border di pinggirnya dan warnanya pake rgba dan terlihat putih transparan, Lalu, sebagai pelengkapnya bayangannya agar lebih menarik.
terima kasih informasinya bro , salam kenal http://gieproject-course.blogspot.com/
ReplyDeletethanks,,jadi lagi... dan udah ku follow blog ini
ReplyDeleteboleh nanya..??
tapi keluar topik
tau g gimana cara ngubah garis di header/dll jadi aneh..??(g tau namanya lah)
kalau bisa kasih caranya..
Bisa lihat blognya?,
DeleteAtau coba Cari kode border: dengan menekan CTRL+F di editor HTML Template.,
Salam Sukses,
Your-BelajarBLOG
bukan di blognya,,,border yang ngerubah misal kan header kotak.lalu dikasih tempat banner nah lalu bordernya jadi kotak tapi terhalang banner..susah ngejelasinnya..punya
ReplyDeleteCoba Di Bordernya di kasih z-index agar tidak terhalang, misal:
Deleteborder {
border: 1px solid #333;
z-index: 99;
}
Semoga Berhasil,
Salam Sukses,
Your-BelajarBLOG
thanks...
ReplyDeletenanya lagi boleh..?
kalau border radius gunanya untuk apa..??
Fungsi dari css border radius adalah memberikan garis lengkung,
Deletecontoh:
#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
saya juga sedang belajar tutorial blog..
ReplyDeletekunjungi juga ya
http://tipsdantrik-net.blogspot.com/2012/03/membuat-auto-read-more-thumbnail-tanpa.html
gan, di ane gk Work ..
ReplyDeletepadahal udh aku ikuti langkahnya dg benar ..
coba agan pake ni Read More di Blog agan sendiri (cuman Sementara)
klo bisa beritahu ane ..
Sudah Saya Praktekan bisa lihat disini http://ybblab.blogspot.com/, http://percobaantp.blogspot.com/,
DeleteKedua-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
Berhasil, gan. Ijin copas, dan Ditunggu kunbalnya di http://death-gas.blogspot.com/
ReplyDelete