NEWS
Loading...
  • Posted by : Johanes Djogan 16 Jul 2013


    Halo dunia, kali ini saya akan memberikan video demonstrasi dasar" cara merubah tampilan posting pada template lama saya DJOGZS.

    Video ini dimaksudkan agar orang" dapat tahu,paham dan mengerti dasar" pengeditan template blogger,tetapi didalam video ini hanya dikhususkan pada bagian posting. Video ini juga akan menjawab pertanyaan anda misal :


    Bagaimana sih cara merubah tampilan posting pada template "A" seperti tampilan posting template "B" ? apakah bisa diberikan kodenya/bagaimana caranya?

    Caranya tentu saja tidak semudah yang dibayangkan,karena setiap template yang saya buat struktur HTMLnya sudah berubah meskipun beberapa nama CSSnya sama 100%, Saya hanya sebatas berbagi/sharing, jadi jika anda meminta saya untuk mengedit template, tolonglah untuk berusaha sendiri jangan selalu tergantung pada orang lain, be an single fighter , atau jika ingin mempunyai tampilan posting template "A" , silakan langsung mengganti template tersebut.

    nah,pertama anda download Video dibawah ini,ukuranya sudah saya pecah menjadi 2 bagian.
    satukan kembali/ JOIN dengan HJ split.



    Download Via Media Fire 2 part






    Tools

    1. Browser Google Chrome versi terbaru. (Rekomendasi)

    2. Template dasar :DJogzs Blogger Template


    A. Review

    Sebelum memulai penjelasan saya tentang video diatas,ada baiknya untuk mereview kembali secara SINGKAT DAN JELAS fungsi" HTML dibawah ini,perhatikan struktur html posting dibawah ini.

    (klik untuk perbesar gambar)


    1. Pada urutan terluar/layer pertama adalah:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>.... </b:if>
    code di atas adalah html tag conditional yang berfungsi agar element yang ada didalamnya tidak tampil di hlalaman bacaan,bagaimana mengetahuinya? secara teori jika kita perhatikan data:blog.pageType !=.artinya data blog(posting) ditargetkan ke page/halaman negasi sama dengan(!=),jadi selama ada kode negasi(!) element didalamnya tidak akan menampilkan di halaman tersebut.penjelasan lebih lanjut dapat anda baca di sini

    2. post hentry(saya kosongkan cssnya),jadi yang dipsakai adalah postright yang merupjakan element terpenting untuk mengatur posisi posting pada bagian akhir/luar.
    <div class='post hentry'>
    <div class='postright'>
    ...
    ...
    </div></div>



    3. Kode HTML auto readmore di bawah ini,berfungsi untuk menampilkan summary dan thumbnail secara otomatis dari postingan kita dengan pengaturan yang dapat diatur ukuran dan jumlah kata deskripsi atau summary posting.
    <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>

    ketika diterapkan,maka html akan otomatis berubah menjadi :

    <div id="summary6704815413655614278">
    <div class="crop">
    <img src="http://gambar.jpg" width="270px;"></div>
    <div class="posting">
    deskripsi</div></div>
    oleh karena itu setiap template saya,ketika di cek html gambar dan deskripsi template saya adalah .crop dan .posting,saya sengaja memberikan nama itu agar mudah diingat,crop=potong gambar,posting=deskripsi~xDD


    4. setelah itu dibawah html autoreadmore diatas tadi,adalah html yang dapat menampilkan judul postingan kita.
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <h2>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link' expr:title='&quot;Permanent Link to &quot; + data:post.title' rel='bookmark'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url' expr:title='&quot;Permanent Link to &quot; + data:post.title' rel='bookmark'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h2>
    </b:if>


    5. Selanjutnya adalah html jomore,fungsinya hanya sebagai pembatas wilayah didalamnya yang berisi html yang berfungsi untuk menampilkan jumlah komentar dan tanggal default posting
    <div class='jomore'>
    <b:if cond='data:post.allowComments'>Comments :<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='&quot;Comment on &quot; + data:post.title'>
    <b:if cond='data:post.numComments == 0'>0 <b:else/><b:if cond='data:post.numComments == 1'> 1<b:else/><data:post.numComments/> </b:if></b:if></a></b:if>
    <b:if cond='data:post.dateHeader'>
    <div class='timemeta'>Posted: <data:post.dateHeader/></div></b:if></div>

    6. html div style='clear:both' atau biasajuga menjadi div class='clear' atau sebagai pemanggil fungsi css clear:both; berfungsi sebagai break/ganti baris,page break.posisi float akan normal.
    <div style='clear: both;'/> <!-- clear for photos floats -->

    7. Html dibawah ini adalah html yang berisi link yang ditujukan ke alamat posting berfungsi menjadi tombol read more.
    <div class='jomorelink'><a class='anes' expr:href='data:post.url'>+</a></div>


    8. Dan yang terakhir ada html categ(categories) yang berfungsi untuk menampilkan tag/kategori posting tersebut.
    <div class='categ'><b:if cond='data:post.labels'>Tag : <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url + &quot;?&amp;max-results=3&quot;' expr:title='&quot;View all posts in &quot; + data:label.name' rel='tag'><data:label.name/></a>, <b:if cond='data:label.isLast != &quot;true&quot;'/>
    </b:loop></b:if></div>


    Penjelasan Lain" mengenai HTML :
    -mengenai pengenalan html class dan id

    -mengenai dasar" html dan CSS
    perlu saya tambahkan mengenai dasar" html dan CSS,
    Intinya adalah HTML berfungsi sebagai pondasi atau kerangka template pada suatu website entah itu blog/forum/blog/wapsite.
    sedangkan CSS dari singkatanya sudah dapat diketahui Cascading Style Sheets yaitu sebagai pengatur style yang ditujukan pada suatu element html tertentu.
    misalkan saya membuat css class dan ID dengan nama :
    .johanes{...} dan #johanes{...}

    maka HTMLnya akan menjadi

    <div class='johanes'>...</div> (untuk fungsi class)

    dan

    <div id='johanes'>...</div> (untuk fungsi ID)


    HTML yang dibuat harus dibuat dengan awalan div dan diakhiri juga dengan slash div (/div)

    atau bila html tersebut adalah single fighter/forever alone(bahasa gaulnya~xD)

    posisi slash "/" akan berada di belakang,misal <div class='johanes'/>

    pemasangan link: <a href='http://alamatyang dituju.html'>nama link</a>

    untuk pemasangan gambar dengan html : <img src='http://alamatgambar.jpg'/>
    #khusus untuk pemasangan gambar,karena cuma berfungsi untuk pemanggilan gambar,maka posisi slash harus berada diakhir,jika tidak,ketika anda menyimpan kedalam template biasanya akan terjadi error syntax atau html tidak valid.





    2. Penjelasan pada video demo





    Pada langkah pertama,yang saya lakukan yaitu merubah ukuran element/html posting bagian terluar,harus diatur ukuranya agar tepat menjadi 2 kolom dan tidak terjadi overflow jika di zoom-in/zoom-out.




    Kedua yang saya lakukan adalah memunculkan kembali element deskripsi posting yang awalnya memang dihidden/sembunyikan dengan menghapus css display:none;,lalu diatur kembali css'a agar posisi deskripsi berada di sebelah kanan thumbnail posting.



    setelah itu cara memindahkan judul posting ke atas thumbnail,caranya adalah memindahkan html tersebut,jadi bayangkan saja jika html itu adalah sebuah tumpukan batu bata,memindahkan dari layer bawah keatas bukanlah dengan css,karena fungsi html kalau menurut saya sendiri hanya sebuah pondasi/kerangka ,sedangkan css hanya untuk mengatur style pada suatu element html.
    contoh gambaran:




    pada menit ke 13 - 43 adalah membuat menu hover + = readmode dengan element lain yang akan di hover.





    jika kalian perhatikan bagaimana bisa ketika element jomorelink ketika di hover, element jomore yang beranimasi?
    triknya adalah memindahkan seluruh isi html jomore kedalam tombol menu readmore yang merupakan element dari jomorelink,possisinya menjadi seperti ini



    <div class='jomorelink'><a class='anes' expr:href='data:post.url'>+</a>

    <div class='jomore'>
    <b:if cond='data:post.allowComments'>Comments :<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='&quot;Comment on &quot; + data:post.title'>
    <b:if cond='data:post.numComments == 0'>0 <b:else/><b:if cond='data:post.numComments == 1'> 1<b:else/><data:post.numComments/> </b:if></b:if></a></b:if>
    <b:if cond='data:post.dateHeader'>
    <div class='timemeta'>Posted: <data:post.dateHeader/></div></b:if></div>

    </div>

    element jomore berada di dalam jomore link,lalu selanjutnya penggunaan css

    pertama,element jomore kita atur dahulu posisinya,misal pada video saya letakan tepat diatas thumbnail gambar dengan posisi absolute/bebas yang berada di dalam element postright agar tidak keluar batas dari wilayah element tersebut yang mempunyai posisi relativ,setelah itu kita sembunyikan dengan memberikan css opacity:0; pada jomorelink agar dapat disembunyikan juga;
    setelah semuanya sudah tak terlihat,pertama kita buat hover efek pada tombol readmore agar dapat dimunculkan kembali ketika kita arahkan kursor ke posting dengan cara menambahkan css:

    .postright:hover .jomorelink{opacity:1;}

    arti css diatas adalah ketika kita arahkan kursor ke wilayah html postright,maka akan menampilkan efek hover pada element jomore link yaitu opacity menjadi 1.agar efek hovernya bisa halus,digunakanlah css3 transisi (transition: all 0.3s ease-in-out;)

    setelahh berhasil menampilkan tombo menu readmore,selanjutnya adalah memuncukan kembali element jomore yang berada didalam element jomorelink dengan cara menambahkan css:

    .jomorelink:hover .jomore {opacity:1}

    setelah berhasil sampai disini,kita tinggal atur posisi,warna atau backround yang kita inginkan,untuk merubah posisi element jomore,akan sangat berpengaruh juga pada element html jomorelink,oleh karena itu pada video saya sedikit mengalami kendala untuk mengaturnya.

    pada element jomore tersebut jika merasa sudah aman,kita bisa styleing lagi efek animasinya,seperti pada video,saya posisikan awal bottom:-65px,lalu efek hovernya ditambahkan bottom:0px;.jadi posisi nya akan berubah atau sliding ketika saya hover tombol readmorenya.



    bila sudah dirasakan cukup rapih posisinya,barulah kita styling lagi seperti merubah warna/background pada judul,deskripsi ataupun footer posting tersebut. oia,apabila kita tambahkan border meskipun itu 1px,posisi bisa berubah,jadi ukuran element terluar haus diatur lagi lebarnya karena 1px sangat memperngaruhi.






    Demikian penjelasan singkat cara Styling posting pada template dasar DJogzs,semoga bermanfaat ^^ dan mengerti setelah melihat video demo saya dan membaca dasar " tentang html dan css yang saya berikan. Selamat belajar,Indonesia semangat~
    *Baca dan pahami,jangan pernah mau disuapi trus,cari tahu sendiri,informaasi beredar luas diinternet,teruslah berlatih praktek agar mudah dipahami sendiri untu belajar secara otodidak,setel lagu vocaloid/anime biar semangat meskipun ada miliyaran code" didepan anda.


    Bagi yang mengalami kegagalan cuma muncul suaranya saja , silakan download tsc2 standalano.

    http://techsmith.custhelp.com/app/answers/detail/a_id/3558/~/camtasia-studio-8%3A-download-the-tsc2-standalone-codec

    thx to dian ardi ^^

    atau instal dan download codec

    { 41 comments... read them below or Comment }

    1. yeyey, makasih buat yg ini,
      moga pinggangnya cepet sembuh xD

      BalasHapus
    2. Wow, cuma pake inspect element aj :o
      Makasih bang XD

      BalasHapus
    3. one doens't simply komen pertama hahahaha"

      BalasHapus
    4. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    5. aku harus belajar sungguh sungguh !!!
      sepertinya ini kode bahwa bang jo lagi buat templet baru :v

      BalasHapus
    6. info yang bermanfaat aku sendiri juga masih terkendala kalau mau buat efek hover ama transisinya ..
      boleh tahu bang jo elemen apa aja yang perlu dipelajari thank you

      BalasHapus
      Balasan
      1. semuanyalah~ :) ,soalnya ga semua template nama element'a sama.

        Hapus
      2. o gitu berarti harus lebih dalam lagi nih belajar css..
        oh ya bang jo tahu ngak sih website pixiv.net ?
        aku liat gambar artwork animenya bagus - bagus tapi itu legal ngak ya kala dibaut untuk gambar posting blog : )

        Hapus
      3. boleh" aja klo buat pribadi,tapi ga boleh dijual,soalnya masih ada hak ciptanya.makanya aq klo buat selalu free :)

        Hapus
    7. Komentar ini telah dihapus oleh administrator blog.

      BalasHapus
    8. Ah DOWNLOAD??? tinggal kopas sama yang punya langsung :'v

      BalasHapus
    9. Video RAR nya ndak bisa di Buka tuh bg Djogzs, Udah Open With Winrar jugan ndak bisa

      BalasHapus
    10. bang jo videonya rusak ngak bisa diputer gimana nih

      BalasHapus
    11. di gabung dlu pakai hj split =___="
      http://www.downloadfilem.com/cara-menggabungkan-file-dengan-hj-split.html

      BalasHapus
      Balasan
      1. udah bang , udah tak gabung pakai hjsplit tapi pas diputer cuma suaranya aja yang muncul, udah pakai gom, wmp ama kmp tetep aja ngak bisa bang jo

        Hapus
      2. mungkin media player'a ga mendukung codec'a

        coba ini
        http://www.free-codecs.com/download/K_Lite_Codec_Pack.htm

        Hapus
      3. soalnya aq udah coba download sendiri+join,video'a normal" aja .__.

        Hapus
      4. Video RAR Nya ndak bisa di Extract om Johanes

        Hapus
      5. akhirnya bisa ...
        yang mengalami kegagalan cuma muncul suaranya saja coba download tsc2 standalano code linknya

        http://techsmith.custhelp.com/app/answers/detail/a_id/3558/~/camtasia-studio-8%3A-download-the-tsc2-standalone-codec

        Hapus
    12. Wah! Terima kasih banget ya Johanes Djogan.. Tutorial ini lah yang selama ini saya cari.. Terima kasih sekali lagi!

      BalasHapus
    13. Aduh, mengapa video ini hanya muncul suaranya aja ya Johanes Djogan? Adakah ia rusak? >.<

      BalasHapus
    14. makasih k buat videonya,, sangat membantu.. :)
      tapi mau nanya 2 hal,, klo cara besarin gambar post + kasih jarak gmna ya di template black rock shooter..??
      soalnya di video stlying di atas gampang, tinggal ganti nilai margin,, tapi di template black rock shooter w ganti nilai margin malah jadi acak-acakan,, tolong solusinya ya k.. :D

      nihh k ss nya.. http://3.bp.blogspot.com/-QeoIcBt5H8M/UfEhOwL4k7I/AAAAAAAABM0/WxEFNrOFTQg/s1600/2.jpg

      http://z-sub.blogspot.com

      BalasHapus
      Balasan
      1. sorry baru blz, .__.

        klo template brs,
        css'a:
        .post {
        margin: 0px 0px 20px 20px;
        display: inline;
        width: 280px;
        float: left;
        position: relative;
        overflow: hidden;
        }

        nah itukan tinggal atur margin sama ukuranya,nah diluar itu lebar luarnya juga harus diatur lagi,css'a ini :


        #content {
        padding: 0px;
        position: relative;
        width: 600px;
        margin: auto;
        float: left;
        }

        Hapus
    15. Kak, tutornya keren

      Tapi kok, comments numbernya jadi ilang?
      ini ss nya : http://3.bp.blogspot.com/-oalzDCSGr3w/UfoKDzkLWdI/AAAAAAAAA58/w3oXQ05ReFc/s1600/Screenshot_3.png

      Wkwkwk, sori ngerepotin :v

      BalasHapus
      Balasan
      1. hmm,haduh lupa lagi,mana template demonya dah diapus .___.

        klo ga salah,buat css lagi(ketik sendiri),tambahin
        .timemeta a {float:left;}

        Hapus
      2. Dihapus .______. Padahal dulu dikasih demonya :v

        BTW, .timemeta bukannya buat itu, yg tulisan 'Posted : Aug 2, 2013' nya
        Gatau namanya :v

        Hapus
      3. eh iya, maksudnya .comment-link a {float:left;}
        tehee~xD

        Hapus
      4. .comment-link a {float:left;} ??
        ditambah gitu gk ngaruh dia kak

        Iseng2 ak coba ganti kode
        a.comment-link {float:left;width:100%}
        hilangin width:100% nya

        eh tulisannya muncul, tapi dipojok (Pfftt) :v

        cek - http://haikaruu.blogspot.com/

        Hapus
    16. gan aku sudah download udah ku gabungin tapi waktu kulihat koq cuma lagu..??

      BalasHapus
    17. mau tanya k djo,, klo cara ngecilin jarak label gmna..?? contohnya :
      Home > CSS , HTML , Tips blog > Video Styling Post Blogger Template

      jadi jarak (space.a diperkecil) antara home (>) label

      BalasHapus
      Balasan
      1. cari css :


        .breadcrumb ul li a {

        ntarkan dibawah'a ada padding-right'a,,tinggal diganti aja nilai jarak padding'a

        Hapus
      2. thanks k udh berhasil.. :)

        Mau tanya lagi k,, kan w buat tabel di post,, tapi di template HATARAKU MAOU-SAMA! width di tabelnya ga 100%,, gmna ya k cara'a biar 100%..??
        http://2.bp.blogspot.com/-zVwYLz980NA/Ug30nu07ZAI/AAAAAAAABck/Hp405-S0ogk/s1600/tabel.JPG

        1 lagi k,, ko di template HATARAKU MAOU-SAMA! tulisan bold di postingan ga ada keliatan ya..?? klo cara buat munculin'a gmna supaya keliatan di postingan..??

        Hapus
    18. Bang jo Kok waktu posting nya hilang ? http://prntscr.com/5hrjvq

      BalasHapus
    19. Ada yang masih punya videonya nggak?

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -