Cara Membuat Title Post Rata Tengah

Assalaamu'alaikum. Rasanya sudah lama Ruangsharing tidak posting hati terasa rindu buat berbagi tips kepada sahabat semua. bila header tittle di hari-hari kemarin ruangsharing dihiasi judul cantennator penghitung ukuran antena, maka kali ini saya akan sedikit memberi trik cara membuat title post rata tengah. sejauh ini kebanyakan template akan mempunyai nilai default untuk title dengan perataan kiri. contoh setelah saya mengubah perataan teks pada title seperti tampak pada gambar di bawah ini.

Tentu banyak sobat saya yang sudah tahu tips perataan pada title post, tapi juga tidak salah pula pada kesempatan kali ini saya akan menyampaikan tips ini pada sahabat saya yang masih bingung mengutak-atik template script html-nya.

Sebelum kita lanjut ke pembahasan, ada baiknya saya kasih tahukan dulu kepada sobat bahwasanya Title pada post dikategorikan sebagai 'selector'. dimana selector ini dalam bahasa Html-nya sering di syntax-kan dengan H3. intinya bahwa nanti bila kita ingin utak-atik  script html maka sobat fokus kepada pencarian H3, dimana selector H3 akan mempunyai deklarasi yang didalamnya ada 'properti' dan 'nilai'. oke, kita tidak akan membahas mengenai properti-properti di H3 tapi langsung pada inti topik diatas yaitu membuat agar title post kita nanti rata tengah.

Ikuti Step by step di bawah ini dan berdo'a dulu ya :) :

• 1. Silahkan buka perancang template sobat ( disini saya gak ngasih tahu cara buka perancangnya ya... :) )
• 2. Kemudian temukan Properti 'h3' yang mirip seperti script di bawah ini

                                 <b:includable id='post' var='post'>
                                 <div class='post hentry'>
                                 <a expr:name='data:post.id'/>
                                 <b:if cond='data:post.title'>
                                 <h3 class='post-title entry-title'>
                                 <b:if cond='data:post.link'>
                                 <a expr:href='data:post.link'><data:post.title/></a>
                                      <b:else/>
                                      <b:if cond='data:post.url'>
                                      <b:if cond='data:blog.url != data:post.url'>
                                      <a expr:href='data:post.url'><data:post.title/></a>
                                 <b:else/>
                                 <data:post.title/>
                                 </b:if>
                                 <b:else/>
                                 <data:post.title/>
                                 </b:if>
                                 </b:if>
                                 </h3>
                                 </b:if>

• 3. Bila sudah ketemu maka tulisan yang berwarna merah di ' <h3 class='post-title entry-title'> ' akan kita sisipkan syntax perataan tengah di depannya dengan perintah ' <center> ' dan penutupnya pada sesudah ' </h3> ' diberi penutup ' </center>.

• 4. Sehingga syntax html diatas akan menjadi seperti berikut ini.

                                 <b:includable id='post' var='post'>
                                 <div class='post hentry'>
                                 <a expr:name='data:post.id'/>
                                 <b:if cond='data:post.title'>
                                 <center><h3 class='post-title entry-title'>
                                 <b:if cond='data:post.link'>
                                 <a expr:href='data:post.link'><data:post.title/></a>
                                      <b:else/>
                                      <b:if cond='data:post.url'>
                                      <b:if cond='data:blog.url != data:post.url'>
                                      <a expr:href='data:post.url'><data:post.title/></a>
                                 <b:else/>
                                 <data:post.title/>
                                 </b:if>
                                 <b:else/>
                                 <data:post.title/>
                                 </b:if>
                                 </b:if>
                                 </h3></center>
                                 </b:if>

• 5. Lakukan pratinjau dahulu hasil editan sobat dan bila sudah berhasil maka silahkan simpan perubahan tempalte-nya. 
• 6. Selesai deh....

Bagaimana, Insya Allah mudah bila diiringi praktek langsung dan bersungguh-sungguh. kuncinya teliti dan sabar...hehehe.... Selamat mencoba dan semoga sukses selalu buat sahabat semua. Wassalamu'alaikum.

Thursday, March 21, 2013