Video Styling Post Blogger Template

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

Part 1

Part 2

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