Cara Membuat Read More dan Add Comment keren Dengan CSS

Posted by : Unknown Jumat, 22 November 2013

Hay Sobat X-T :)

Hmm Udh lama Ya Admin gk poting Tentang Tutorial Blog ?? XD karna admin lg banyak urusan jdi maaf ya klo jarang posting :) oke kini kita membahas tentang Read More Kamu Tau kan Fungsi Read More Untuk Blog ?? heheh .. tpi klo Read biasa pasti letakk nya di bawah kan ?? hehe klo readmore ini letakk nya di tengah² postingan blog ;) mau tau tutorial nya ?? oke cekidot !!

Login Blogger Sobat
Masuk Ke Rancangan
Masuk Ke Editing Html
Centang Expand template widget
Cari Kode ]]></b:skin> Pastekan Css Di bawah Ini Di atas Kode Tersebut

/* CSS Read More */

a.XTREAD{opacity:1.0;float:right;font-size:23px;font-family:'Cooper Std',cursive;text-shadow:1px 1px 1px #000,-1px 1px 1px #000,-1px -1px 1px #000,1px -1px 1px #000;color:#fff;height:80px;width:129px;margin-top:-120px;margin-right:257px;position:center;padding:5px;border:3px solid #000;background:#0005cf;-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;-moz-border-topleft-radius:10px;moz-border-bottom-left-radius:10px;-moz-border-bottomright-radius:10px;-o-border-top-left-radius:10px;-o-border-bottom-left-radius:10px;-o-border-bottom-right-radius:10px;text-align:center;line-height:84px;-webkit-transition:all .9968s ease-out;-moz-transition:all .9968s ease-out;-ms-transition:all .9968s ease-out;-o-transition:all .9968s ease-out;transition:all .9968s ease-out}a.XTREAD:hover{opacity:1.0;float:right;font-size:23px;font-family:'Cooper Std',cursive;text-shadow:1px 1px 1px #000,-1px 1px 1px #000,-1px -1px 1px #000,1px -1px 1px #000;color:#fff;height:80px;width:129px;margin-top:-120px;margin-right:257px;position:relative;padding:5px;border:3px solid #000;-moz-box-shadow:0 0 29px #0003cf;-webkit-box-shadow:0 0 29px #0003cf;box-shadow:0 0 29px #0003cf;background:#0005cf;-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;-moz-border-topleft-radius:10px;moz-border-bottom-left-radius:10px;-moz-border-bottomright-radius:10px;-o-border-top-left-radius:10px;-o-border-bottom-left-radius:10px;-o-border-bottom-right-radius:10px;text-align:center;line-height:84px;-webkit-transition:all .9968s ease-out;-moz-transition:all .9968s ease-out;-ms-transition:all .9968s ease-out;-o-transition:all .9968s ease-out;transition:all .9968s ease-out}a.XTADD{opacity:1.0;float:right;font-size:20px;font-family:'Cooper Std',cursive;text-shadow:1px 1px 1px #000,-1px 1px 1px #000,-1px -1px 1px #000,1px -1px 1px #000;color:#fff;height:80px;width:129px;margin-top:-120px;margin-right:60px;position:relative;padding:5px;border:3px solid #000;background:#0005cf;-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;-moz-border-topleft-radius:10px;moz-border-bottom-left-radius:10px;-moz-border-bottomright-radius:10px;-o-border-top-left-radius:10px;-o-border-bottom-left-radius:10px;-o-border-bottom-right-radius:10px;text-align:center;line-height:84px;-webkit-transition:all .9968s ease-out;-moz-transition:all .9968s ease-out;-ms-transition:all .9968s ease-out;-o-transition:all .9968s ease-out;transition:all .9968s ease-out}a.XTADD:hover{opacity:1.0;float:right;font-size:20px;font-family:'Cooper Std',cursive;text-shadow:1px 1px 1px #000,-1px 1px 1px #000,-1px -1px 1px #000,1px -1px 1px #000;color:#fff;height:80px;width:129px;margin-top:-120px;margin-right:60px;position:relative;padding:5px;border:3px solid #000;-moz-box-shadow:0 0 29px #0003cf;-webkit-box-shadow:0 0 29px #0003cf;box-shadow:0 0 29px #0003cf;background:#0005cf;-webkit-border-top-left-radius:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom-left-radius:10px;border-bottom-right-radius:10px;-moz-border-topleft-radius:10px;moz-border-bottom-left-radius:10px;-moz-border-bottomright-radius:10px;-o-border-top-left-radius:10px;-o-border-bottom-left-radius:10px;-o-border-bottom-right-radius:10px;text-align:center;line-height:84px;-webkit-transition:all 1s ease-out;-moz-transition:all .9968s ease-out;-ms-transition:all .9968s ease-out;-o-transition:all .9968s ease-out;transition:all .9968s ease-out}

Sisa nya Kamu Edit Sendiri Ya ??

Dan Cari Kode <data:post.body/> ( bila ada 3/2 pilih yang pertama )
Pastekan Script ini Di bawah nya

<b:else/><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>

<div style='float:right'><a class='XTREAD' expr:href='data:post.url'> Read More </a></div><div style='float:right; margin-right:8px'><b:if cond='data:post.allowComments'> <a class='XTADD' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Add Comment </b:if> <b:if cond='data:post.numComments == 1'> 1 Comment </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if> </a> </b:if></div>

</b:if>

Sisanya Juga Kamu Editing Sendiri

Oke Sekian Tutorial nya :)

Bila ada yang perlu di tanyakan Harap Berkomentar oke :)