Cara Membuat Tampilan Homepage Blogger A la Magazine Style (Versi 2)

Sebelumnya telah saya bagikan pengalaman saat membuat tampilan homepage blogger a la magazine style. Hanya saja baris kode yang tertulis pada template blogger sangat sedikit. Sedangkan pencarian selanjutnya saya temukan referensi lainnya tentang magazine style namun sedikit berbeda.

Pasalnya,,script untuk membuat tampilan beranda blogger menjadi a la magazine style kali ini lumayan banyak. Untuk itu, saya namakan saja script kali ini dengan nama yang sama namun versi ke 2. Penamaan ini secara pribadi bertujuan untuk memudahkan agar keduanya bisa terbedakan.

Selanjutnya, silahkan simak dan praktekan secara langsung bahasan intinya di bawah ini. Terutama bagi teman-teman yang tertarik untuk mencoba script untuk membuat tampilan homepage blogger dengan gaya magazine versi kedua ini.

Cara Membuat Tampilan Homepage Blogger A la Magazine Style (Versi 2)

Salah satu ciri utama theme magazine style biasanya memiiliki halaman beranda yang terbagi menjadi banyak kolom atau multiple column. Tema ini digunakan oleh situs web yang memiliki beragam konten artikel yang ingin ditampilkan dengan tampilan menarik.

Dan kali ini kita akan mencoba menerapkan script magazine style versi kedua. Selengkapnya, berikut ini tutorial cara membuat tampilan homepage blogger a la magazine style yang brehasil saya terapkan di Terisi Info Theme; sebuah theme blogger yang dibuat dari nol dengan Halfmoon.

1. Login ke dashboard Blogger.

2. Pilih Blog yang ingin diperbaiki jika memiliki blog lebih dari satu.

3. Klik "Tema".

4. Klik icon "▼" di sebelah tulisan SESUAIKAN.

5. Klik "Edit HTML".

6. Letakan kode di bawah ini setelah tag </head> dan sebelum <body>.

7. Selanjutnya, masih menyambung langkah pada nomor 6 di atas, letakan kode berikut setelahnya.

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <style> .first-post-thumb { margin-right: 10px; border: 1px solid #fff; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); box-shadow: 2px 2px 5px rgba(0,0,0,0.3); } .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img { background: none; border: none; box-shadow: none; padding: 0; } #first { /* Styles for the First Post Container */ width: auto; height: 250px; float: left; margin-bottom:10px; background-color: #F4F4F4; /* background color for the first post */ border: 1px solid #E5E5E5; /* border for the first post */ } .first-body { /* Style for the First Post summary */ color: #545454; font-size: 13px; text-align: justify; padding: 5px 10px; line-height:1.5em; } #first h3 a, #first h3 a:visited { /* Style for the First Post Title*/ border-bottom: 2px solid #DFDFDF; color: #515151; font-size: 20px; display:block; margin: 10px auto; width: 95%; font-size: 20px; padding: 0px 0px 4px 0px; font-weight: bold; text-align:left; line-height: 1.4em; background: none; } #first h3 a:hover { /* Color on mouseover for the First Post Title */ color: #1061A1; } .post { /* Styles for the small posts container */ float:left; margin-right: 10px; width: 290px; height: 210px; padding: 0px 5px 5px 5px; background: #transparent; /* background color for the small posts warna latar thumb foto beranda */ border: 1px solid #transparent; /* #E5E5E5 border for the small posts */ overflow: hidden; } .posts-thumb { /* Style for the small posts thumbnails */ margin-right: 5px; background: #ddd; padding: 3px 3px 0px; border: 1px solid #C4C4C4; border-radius: 4px; } h3.post-title a{ /* Style for the small posts titles */ font-size: 14px; color: #747474; background-color: #F4F4F4; /* Background color for the small posts titles */ width: 95%; font-weight: bold; font-family: ‘Arial Narrow’, sans-serif; padding: 5px; } h3.post-title a:hover { /* Color on mouseover for the Small Posts Title */ color: #005B77; } h2.date-header { /* Hide the post date */ display:none; } .post-footer { display: none;} h3.post-title {margin: 0px;} .readmorebutton { margin-top: 5px;} .readmorebutton a { /* Styles for the Read More link */ color: #767676; border: 1px solid #E1E1E1; background: #EAEAEA; /* Background color for the Read More link */ text-decoration:none; padding: 3px 5px; font-weight: bold; font-size: 11px; } .post-comment-link { /* Style for the comment bubble of posts below */ float: right; display: inline; margin: -35px 0px; border: 1px solid #E1E1E1; /* border for the comment bubble */ background: #EAEAEA; /* background color for the comment bubble */ font-size: 11px; position: relative; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } #first .post-comment-link { /* Style for the comment bubble of first post */ margin: -200px 10px; } .post-comment-link a{ /* Link color for the comments bubble*/ padding: 10px; color: #6A6A6A; text-decoration:none; font-weight: bold; } #blog-pager {clear:both;} </style> </b:if> </b:if>

8. Langkah opsional, letakan kode di bawah ini untuk mengganti tag <data:post.body/> bagi yang belum memasang script auto read more. Script ini terletak pada tag <body> dengan tulisan . Namun bagi teman-teman yang sudah menimpannya dengan script auto read more sendiri tidak mengapa lewati langkah ini.

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <span class='post-comment-link'><b:if cond='data:blog.pageType != "item"'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading »</a></span></b:if></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> -->

9. Simpan template.

Kesimpulan

Sekian artikel kali ini tentang cara membuat tampilan homepage blogger a la magazine style versi kedua. Script di atas berhail saya terapkan pada theme blogger sendiri yang dibuat dari nol dengan bantuan Halfmoon agar lebih cepat.

Bagi teman-teman yang mendapatkan masalah ketika menerapkan kode di atas silahkan komentar di bawah. Siapa tahu masalah tersebut pernah saya alami beserta solusinya.

Selamat mencoba.

Cara Membuat Tampilan Homepage Blogger A la Magazine Style (Versi 2)

Cara Membuat Tampilan Homepage Blogger A la Magazine Style (Versi 2)

Kesimpulan

Tidak ada komentar:

Posting Komentar

Memuat...

Nama Domain Murah

Yusuf