Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Auto Read More Berputar

by Irsyad Aslam , at 4/24/2013 , has 19 komentar
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>


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
Irsyad Aslam
About
Cara Membuat Auto Read More Berputar - written by Irsyad Aslam , published at 4/24/2013, categorized as Trik Blogger . And has 19 komentar
19 komentar Add a comment
Gk Bisa Sob....
Coba Sekali Lagi Dengan Ikuti Cara-Cara Diatas Dengan Benar,
Dan Lihat Demonya Di http://ybblab.blogspot.com/ ,

Semoga Berhasil,
Salam Sukses,


Your-BelajarBLOG
Delete
Reply Delete
kode gk ada tuh, letaknya dimana, udah di cari dengan ctrl+f tp tidak bisa? tolong jawabannya. Terima kasih
Ada Kok Sob,
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
Delete
tapi kenapa kok widget yg di sisi2 jadi kebawah semua?
coba cek ibayastronaut.blogspot.com
Delete
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/.

Semoga Berhasil,
Salam Sukses,


Your-BelajarBLOG
Delete
Reply Delete
thaks yah,,,berhasil..
saran:mungkin harus pake garis/border dulu kalau mau pke cara itu
Ok Sip,
Sudah saya kasih border di pinggirnya dan warnanya pake rgba dan terlihat putih transparan, Lalu, sebagai pelengkapnya bayangannya agar lebih menarik.
Delete
Reply Delete
terima kasih informasinya bro , salam kenal http://gieproject-course.blogspot.com/
Reply Delete
thanks,,jadi lagi... dan udah ku follow blog ini

boleh 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?,
Atau coba Cari kode border: dengan menekan CTRL+F di editor HTML Template.,


Salam Sukses,


Your-BelajarBLOG
Delete
Reply Delete
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


Coba Di Bordernya di kasih z-index agar tidak terhalang, misal:

border {
border: 1px solid #333;
z-index: 99;
}

Semoga Berhasil,
Salam Sukses,



Your-BelajarBLOG
Delete
Reply Delete
thanks...
nanya lagi boleh..?

kalau border radius gunanya untuk apa..??
Fungsi dari css border radius adalah memberikan garis lengkung,
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
Delete
Reply Delete
saya juga sedang belajar tutorial blog..
kunjungi juga ya
http://tipsdantrik-net.blogspot.com/2012/03/membuat-auto-read-more-thumbnail-tanpa.html
Reply Delete
gan, di ane gk Work ..
padahal 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/,
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 != &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>

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
Delete
Reply Delete
Berhasil, gan. Ijin copas, dan Ditunggu kunbalnya di http://death-gas.blogspot.com/
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger