Button Cool Readmore

Assalamu'alaikum Wr.Wb.

Sudahkah WebBlog Mojang dan Bujang dipercantik Tombol Readmore-nya. Share posting Go Blog Go kali ini membahas Button Cool ReadmoreCool Readmore (Tombol Ciamik buat Readmore), kebetulan ini Kreasi Saya sendiri karena sesuatu hal baru bisa di share posting-nya sekarang, begitu banyak kelebihan dari CSS ini, sampai bisa memanipulasi seperti Code Javascript. Yang penting nda bikin WebBlog Mojang dan Bujang berat karena murni CSS saja, siap untuk tambah Button Cool di-WebBlog-nya ???
Seperti biasa tambahkan kode CSS berikut ini kedalam Code CSS WebBlog Mojang dan Bujang :

• Login dulu ke www.blogger.com
• Masuk Dashboard
• Klik Monitize(more options) -> Pilih -> Template
• Klik Edit HTML -> Proceed (lanjutkan) ->
• Klik Expand Widgets Template
• Cari Code ]]></b:skin>
• Tempatkan Code CSS pas diatas Code ]]></b:skin>

Saran : "lebih baik kalau meng-edit WebBlog Template jangan langsung di WebBlog-nya namun gunakan media External seperti NotePad++, kalau bisa bikin 2(dua) back-up yang 1(satu) buat edit yang lain-nya buat kalau terjadi Error pada Template-nya"
Code CSS

.baca{cursor:pointer; float:right; display:inline-block; position:relative; padding:4px 11px; -webkit-border-radius:18px; -moz-border-radius:18px; border-radius:18px;
color:#623f1d!important;
font:12px/1.4 "myriad-pro-1","myriad-pro-2","Lucida Grande",Sans-Serif;
font-weight:600;
background-color:#feda71;
background-image:-webkit-gradient(linear,left top,left bottom,from(#feda71),to(#febb49))!important;
background-image:-webkit-linear-gradient(top,#feda71,#febb49)!important;
background-image:-moz-linear-gradient(top,#feda71,#febb49)!important;
background-image:-ms-linear-gradient(top,#feda71,#febb49)!important;
background-image:-o-linear-gradient(top,#feda71,#febb49)!important;
box-shadow:inset 0 1px 1px white,0 3px 3px rgba(0,0,0,0.6);
border:1px solid #e7a943!important;text-shadow:0 -1px 0 rgba(0,0,0,0.3)}
.baca:hover{box-shadow:inset 0 2px 6px white,0 3px 3px rgba(0,0,0,0.6)}
.baca:active{box-shadow:inset 0 2px 6px white,0 1px 1px rgba(0,0,0,0.6);
top:2px;}

Masih di Editor Template untuk mempercepat pencarian tekan Ctrl+F, masukkan Code yang dicari yaitu <div class='post-header'> Code ini ada 2(dua) Mojang dan Bujang cari Code yang ke-dua setelah ditemukan, lihat Code HTML yang diberi warna :

<div class='post-header'> 
<div class='post-header-line-1'/> 
</div> 
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>     
<data:post.body/>     
<div style='clear: both;'/> 
<!-- clear for photos floats --> 
</div>  
<b:if cond='data:post.hasJumpLink'>     
<div class='jump-link'>       
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>   
</div> </b:if>

Nah disini Mojang dan Bujang tinggal menambahkan sedikit Code Class CSS <span class='baca'> ... </span>, seperti Code yang Saya beri tanda Warna dibawah ini.

<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <span class='baca'><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></span> </div> </b:if>

Perlu diketahui juga bahwa pemasangan ini untuk Readmore Manual bawaan Blogger Baru seperti menambahkan Code <!--more--> untuk pemotongan disetiap postingan.
Sedangkan untuk Readmore otomatis dengan JavaScript sama dengan menambah Code HTML dibawah code <div class='post-header'>, lihat dibawah ini :

<div class='post-header'>     
<div class='post-header-line-1'/>     
</div>  
<b:if cond='data:blog.metaDescription == &quot;&quot;'> <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->     
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'> <!-- Problem Page Static if ReadMOre --> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<data:post.body/>  
<b:else/>   
<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='baca'><a expr:href='data:post.url'>Baca...</a></span>  
<b:else/>  
<data:post.body/> 
</b:if> 
</b:if>

Buat Mojang dan Bujang tinggal Download aja Code CSS-nya

DOWNLOAD
Vooaalaaa !!! tinggal Save Template-nya dan Preview, dan lihat Button Cool Readmore dah nampang di WebBlog Mojang dan Bujang, untuk demo-nya lihat WebBlog Saya ini disetiap postingan-nya ada Button Cool Readmore. Selamat berkreasi Go Blog Go ...!!! Amiin

Wassalam,