Sedikit Info Seputar Trik Membuat Auto Readmore Animasi Terbaru 2017 - Hay gaes kali ini team Apps Android Games, kali ini akan membahas artikel dengan judul Trik Membuat Auto Readmore Animasi, kami selaku Team Apps Android Games telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Apps Android Games. semoga isi postingan tentang Artikel Tips And Trick, Artikel Tips And Trick Blogger, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Trik Membuat Auto Readmore Animasi Full Update Terbaru
link: Trik Membuat Auto Readmore Animasi

Artikel Terbaru Trik Membuat Auto Readmore Animasi Update Terlengkap 2017

Membuat dan menggunakan read more otomatis yang dilengkapi dengan thumbnail pada posting adalah pilihan yang sangat menarik. Dengan auto read more (automatic post summaries with thumbnail) anda tak perlu lagi untuk menggunakan fitur read more (insert jump break)yang telah disediakan blogger karena sebuah javascript akan secara otomatis menampilkan setiap posting dalam bentuk "menggunakan readmore" yang disertai sebuah image berukuran kecil (tentu saja jika posting menyertakan gambar). Jumlah teks yang ditampilkan sebelum read more (di halaman blog) dapat diatur melalui javascript, demikian pula dengan ukuran thumbnailnya.

Jika selama ini sebuah auto readmore selalu tampil ala kadarnya, kali ini kita kan buat yang lebih atraktif dengan bantuan kode css3 transition, css3 transformation, border-radius, box-shadow dan text-shadow. Untuk menggunakannya anda perlu melakukan sedikit modifikasi pada template melalui penambahan kode css dan javascript serta perubahan xHTML. Penggantian xHTML dilakukan di antara tag pembuka dan penutup body (<body> & </body>) sedang penambahan kode css dan javascript di antara tag pembuka dan penutup head (<head> & </head>).
DEMO

KODE CSS

.GRbacayo a{
       float:right;
       font-size:14px;
       color:red !important;
       font-weight:bold;
       text-transform:uppercase;
       font-family:Arial;
       background:rgba(255,255,255,0.8);
       text-shadow:2px 2px 2px #888;
       padding:4px 8px;border:1px solid #555;
       text-decoration:none;
       transition:1s;
       -o-transition:1s;
       -moz-transition:1s;
       -webkit-transition:1s;
       -ms-transition:1s;
}
.GRbacayo a:hover{
       background:red;
       color:#fff !important;
       text-decoration:underline;
}
.GRmorethumb{
       box-shadow:0 0 6px #aaa;
       border:1px solid #eee;
       border-radius:6px;
       padding:6px 6px 2px 6px;
       margin:5px 12px 5px 0;
       background:#ccc;
}
.GRmorethumb img{
       padding:0;
       margin:0;
       border:1px solid #555;
       border-radius:4px;
}
.GRbacayo a,.GRmorethumb img{
       transition:1.2s;
       -o-transition:1.2s;
       -moz-transition:1.2s;
       -webkit-transition:1.2s;
       -ms-transition:1.2s;
}
.GRmorethumb{
       transition:2.5s 1s;
       -o-transition:2.5s 1s;
       -moz-transition:2.5s 1s;
       -webkit-transition:2.5s 1s;
       -ms-transition:2.5s 1s;
}
.GRmorethumb:hover{
       transform:scale(2) translate(27px,0);
       -o-transform:scale(2) translate(27px,0);
       -moz-transform:scale(2) translate(27px,0);
       -webkit-transform:scale(2) translate(27px,0);
       -ms-transform:scale(2) translate(27px,0);
       z-index:10;
}
.GRmorethumb img:hover{
       transform:scale(0.7);
       -o-transform:scale(0.7);
       -moz-transform:scale(0.7);
       -webkit-transform:scale(0.7);
       -ms-transform:scale(0.7);
       border-radius:8px;
}

JAVASCRIPT

<script type='text/javascript'>
summary_noimg = 530; /* jumlah teks tanpa thumbnail */
summary_img = 440;  /* Jumlah teks dengan auto thumbnail */
img_thumb_height ='auto';
img_thumb_width = 100; /* width thumbnail * Semakin besar akan semakin lebar dan tinggi */
</script>
<script src='http://gubhugreyotprojects.googlecode.com/svn/GRauto-readmore.js' type='text/javascript'></script>

XHTML

<div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' style='text-align:justify;'>
       <b:if cond='data:blog.pageType == "item"'>
          <data:post.body/>
          <b:else/>
          <b:if cond='data:blog.pageType == "static_page"'>
             <data:post.body/>
             <b:else/>
             <div expr:id='"summary" + data:post.id'>
                <data:post.body/>
             </div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='GRbacayo'><a expr:href='data:post.url' expr:title='data:post.title'>Read More</a></span>
           </b:if>
        </b:if>
              <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

Cara menggunakan kode :

Untuk menggunakan kode ini silahkan anda baca melalui link di bawah ini. Jika anda sudah mengikuti panduan sebelumnya (Auto Post Thumbnail - Auto Readmore with CSS3 Effects), maka hanya perlu mengganti kode CSS dan Javascriptnya saja karena xHTML Baru tak ada perubahan (sama persis).

Tutorial :

Tutorial » Auto Post Thumbnail - Auto Readmore with CSS3 Effects

Kalau tidak berhasil dengan cara diatas bisa dengan cara yang saya gunakan saipul muiz tutorial by muizcyan-xp..

1.yang pertama login seperti bisa ke blogger ..
2. masuk ke template > edit HTML>expand widget
3. cari kode <style type='text/css'>
4. masukkan kode css diatas.. dibawah kode <style type='text/css'>
5. terus cari kode </head> dan tambahkan kode javascript diatas </head>

kalau yang xhtml gak usah ditambahin ... cuman segitu tutorial yang saya pakai sebelum melakukan kegiatan lebih dahulu backup template anda....

sekian salam blogger by muizcyan-xp

tag cara membuat gambar postingan blog animasi| trik membuat gambar post berputar| trik membuat gambar postingan penuh dengan animasi transition| cara membuat animasi di gambar postingan blog

Itulah sedikit Artikel Trik Membuat Auto Readmore Animasi terbaru dari kami

Semoga artikel Trik Membuat Auto Readmore Animasi yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Apps Android Games. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Artikel Tentang Trik Membuat Auto Readmore Animasi

Info Tentang Trik Membuat Auto Readmore Animasi Update Terbaru 2017 Gratis

Artikel Terbaru Trik Membuat Auto Readmore Animasi Update Terlengkap 2017

Itulah sedikit Artikel Trik Membuat Auto Readmore Animasi terbaru dari kami