Pertemuan kali ini kita akan membahas tentang bagaimana mengecilkan huruf atau font Breadcrumbs di blog. Maaf agak melenceng dari pembahasan utama " Dukun Pelet".

Mari kita berbagi pengalaman apa yang Anda tahu kami juga tahu. Jika Informasi ini bermanfaat silakan bagikan ke teman anda supaya apa yang anda tahu mereka juga tahu.

Ok lanjut'"

Apakah lagi mencari bagaimana cara mengubah ukuran font atau tulisan pada breadcrumbs?

ataukah cuma karena kebetulan saja lagi lihat judul entri ini yang kelihatan unik? hehehe....

Ok guys... mari kita masuk ke pokok pembicaraan yang bertemakan " Cara mengecilkan  Tulisan breadcrumbs.

Tapi sebelum masuk ke Tema pembahasan, saya akan menceritakan pengalaman konyol saya yang mencari Judul blog di internet dengan kata kunci " Cara mengubah ukuran (size) font (tulisan) Breadcrumbs pada Blog"

"Sangat aneh kan??? wawakakwakaka,,,, biasalah Blogger Pemula guys"

Ok Guys Lanjut.....

Cara mengubah Ukuran Font Breadcrumbs.

Coba Perhatikan Script di bawah ini, tentu kalian sudah tahu bahwa ini adalah script yang dipake untuk menambahkan Breadcrumbs di blog.

Lalu bagimana jika Ukuran Font terlalu besar?

Seperti saya alami di template blog ini.

Ukuran Tulisan Pada Postingan dan tulisan breadcrumbs sama besar hingga membuat pandangan tidak begitu nyama.

Contohnya ni:




Kalau dilihat antara Judul entri dan judul breadcrumbs sama besar, sangat mengganggu ya guys? (Ini si menurut saya guys) tidak tahu kalau kalian!


"Nah untuk Mengecilkan ukuran tulisannya perhatikan Script (Kode Html) di bawah ini"

1. <b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
2. <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
3. <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
4. <b:else/>
5. <b:if cond='data:blog.pageType == &quot;item&quot;'>
6. <!-- breadcrumb for the post page -->
7. <b:loop values='data:posts' var='post'>
8. <b:if cond='data:post.labels'>
9. <div class='breadcrumbs' style='     font-size: 14px;' xmlns:v='http://rdf.data-vocabulary.org/#'>
10. <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
11. <b:loop values='data:post.labels' var='label'>
12. &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
13. </b:loop>
14. &#187; <span><data:post.title/></span>
15. </div>
16. <b:else/>
17. <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
18. </b:if>
19. </b:loop>
20. <b:else/>
21. <b:if cond='data:blog.pageType == &quot;archive&quot;'>
22. <!-- breadcrumb for the label archive page and search pages.. -->
23. <div class='breadcrumbs'>
24. <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
25. </div>
26. <b:else/>
27. <b:if cond='data:blog.pageType == &quot;index&quot;'>
28. <div class='breadcrumbs'>
29. <b:if cond='data:blog.pageName == &quot;&quot;'>
30. <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
31. <b:else/>
32. <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
33. </b:if>
34. </div>
35. </b:if>
36. </b:if>
37. </b:if>
38. </b:if>
39. </b:if>
40. </b:includable>

Perhatikan Script yang diwarnai, disitulah perbedaanya guys.

Jadi intinya kita hanya menambahkan kode style='     font-size: 14px;' Pada Kode script Breadcrumbs yang sudah ada pada blog kita.

Jika sudah diterapkan, coba lakukan peninjauan, jika hanya Judul entri saja yang berubah, lakukan langkah ini.

Ganti Kode Html

Ganti Kode Html yang sudah ada di blognya, Mungkin Kurang lebih seperti ini:

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

Ganti Mejadi

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea; font-size: 14px; }
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

Note:
"Warna Biru adalah ukuran font, jadi Anda bisa ubah ukuran sesuia keinginan kalian"


Oklah guys, saya kira  sudah cukup sampai disini, jika ada yang masih belum dimengerti silakan tinggalkan komentar. Wslm

Related Posts