Cara Membuat Read More dan Add Comment keren Dengan CSS

Posted by : Rendy Note Kamis, 06 September 2012

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 != &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>
<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 &gt; 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 :) 

{ 13 komentar... read them below or Comment }

  1. bimaKamis, 06 September 2012 pukul 16.41.00 WIB

    Sip Sip...

    BalasHapus
  2. Rendy NoteKamis, 06 September 2012 pukul 17.17.00 WIB

    oke

    BalasHapus
  3. Du PaMinggu, 09 September 2012 pukul 22.23.00 WIB

    keyen-keyen. Don't forget to visit me back. Dwi-Tekhnologi

    BalasHapus
  4. Sat-CyberMinggu, 21 Oktober 2012 pukul 21.03.00 WIB

    Beda Hasilnya kk sama SS yang di atas !!! -_- ?

    BalasHapus
  5. UnknownSenin, 22 Oktober 2012 pukul 05.00.00 WIB

    Mantep Gan
    Visit Balik Gan

    BalasHapus
  6. Sat-CyberRabu, 24 Oktober 2012 pukul 01.36.00 WIB

    Kok gini jadinya???

    Read more Otomatis Saya Jadi Hilang ?
    Trus hasil read more | add comments kayak gini ?? "SS"

    http://1.bp.blogspot.com/-Y5Cv2SpbTzU/UIbjJneO9bI/AAAAAAAAA_E/TavRHxIty-k/s1600/untitled.PNG

    BalasHapus
    Balasan
    1. Rendy NoteRabu, 24 Oktober 2012 pukul 15.06.00 WIB

      itu css nya gk kamu tambah atau nama css nya kamu ubah

      Hapus
  7. RikySabtu, 27 Oktober 2012 pukul 14.57.00 WIB

    MW NANYA NEH. MAS..
    KLW GAK ADA CODE
    GMNA .. ??

    BalasHapus
  8. RikySabtu, 27 Oktober 2012 pukul 14.58.00 WIB

    MW NANYAK ..
    KLW GAK ADA CODE YANG KEDUA ITU '' ''

    GMNA TUH.. ?

    BalasHapus

[X-T] COMMENTS RULE :

-DONT SPAM
-DONT FLOOD
-BILA ANDA SUKA DENGAN ARTIKEL INI SILAHKAN BERKOMENTAR
-BILA ANDA INGIN MENDAPATAKAN INFO DI BLOG INI SILAHKAN FOLLOW BLOG INI
-GUNAKANLAH BAHASA YANG SOPAN
-FOLLOW THIS BLOG I WILL FOLLOWBACK !!

Author/Admin = RendyBoyz_25
Add Facebook admin : Klik Disini
Blog ini Telah Saya Setting Jadi Blog Dofollow :D
- Alexa Rank 169,500+
- Links in 117
- Jadi Berkomentar Lah Yang Sopan :)

TESTT

TEST ISI

TEST

TESTT

- Copyright © 2013 XkresssX Technology V.8 - Powered by Blogger - Original by Johanes Djogan - Design By Rendy Aprizia Prayoga -