Membuat Blogazine Hanya dengan Tag Kondisional - Salam sobat labeltutorial.com , sudah mengenal kan apa itu tag kondisional pada postingan saya beberapa hari yang lalu di blog ini? nah jika sudah mengenal dan paham cara menggunakannya kali ini saya akan berbagi sedikit lagi mengenai cara menggunakan tag kondisional pada blogazine , mungkin anda sudah banyak mengenal blog blog yang menerapkan blogazine pada blognya , huh bagi saya itu sulit sekali karena butuh kreatifitas yang tinggi untuk setiap postingan dengan berbeda style. Nah bagi anda yang ingin menerapkan blogazine pada blog anda bisa simak salah satu cara dan tips membuat blogazine pada blog berikut ini.
 |
| After Blogazine |
 |
| Before Blogazine |
1. Harus Paham Elemen-elemen yang ada di blog sobat
ya ini sih syarat mutlak kalo ingin menerapkan blogazine pada blog sobat karna kalo sobat tidak paham elemen-elemen pada blog sobat ya bagaimana manipulasi style pada blog sobat berikut struktur sederhana pada blog blog umum.
#header
#main
#side
#footer
Nah biasanya Css pemanggil elemen diatas adalah kerangka/pembungkus elemen lainnya pada blogger, elemen pelengkapnya seperti :
#relatedpost
#menubar
dll.
#header
#main
#side
#footer
Nah biasanya Css pemanggil elemen diatas adalah kerangka/pembungkus elemen lainnya pada blogger, elemen pelengkapnya seperti :
#relatedpost
#menubar
dll.
2. Cari inspirasi untuk pengganti Css yang sudah ada
Nah ini dia yang harus punya kreatifitas yang tinggi, karna kalo sobat ingin menerapkan blogazine pada blog, sobat harus jago mainin css pada elemen yang sudah ada atau sobat juga bisa menggunakan elemen baru dan css baru juga tentunya dengan bantuan tag kondisional. tapi kalo sudah mentok bisa seperti pada halaman blogazine blog ini yang hanya menyesuaikan warna dan sedikit merubah css hehe
3. Tag Kondisional yang di pakai
Saya menggunakan tag kondisional berikut
<b:if cond='data:blog.url == "URLPAGE"'>
Kode CSS atau elemen
</b:if>
4. Contoh Penggunaan dan Penerapan Blogazine pada blog ini
Menyimpan Style dengan tag kondisional berikut dibawah </b:skin> atau </style> atau diatas </head> pada blog sobat
<style>
<b:if cond='data:blog.url == "http://www.http://www.label-tutorial.blogspot.com/2014/01/Membuat-Blogazine-Hanya-dengan-Tag-Kondisional.html"'>
body {
background-color: #243749
}
#main {
width: 100%;
padding-bottom: 60px;
font-size: 15px;
right: 0
}
#top-menuwrapper {
display: none
}
#top-menumobile {
display: none
}
#side {
display: none
}
.fixed-samping {
display: none
}
.breadcrumbs {
display: none
}
#related-post {
display: none
}
.post-wrapper {
background: #243749;
color: #fff;
margin: 1px 1px 1px 1px;
padding: 20px 20px
}
.post-single {
font-size: 15px;
line-height: 1.7em;
margin: 30px;
color: #fff
}
h1.post-title {
background: #FC465C;
font-size: 40px;
text-align: center;
color: #fff;
margin-right: -1px;
padding: 15px;
position: relative;
line-height: 1.6em;
display: yes
}
.post-single h3 {
border-bottom: 2px solid rgb(253, 143, 147);
background: #10877e;
font-size: 20px;
text-align: center;
color: #fff;
padding: 15px
}
.meta {
visibility: hidden
}
.share-post {
display: none
}
.tags {
display: none
}
.kolom2 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px
}
.kolom3 {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
column-gap: 30px
}
.konversi-button, .emo-button {
background-color: rgba(252, 252, 252, 0.68)
}
.konversi-button:hover, .emo-button:hover {
background-color: #fff
}
#comments {
background: #243749;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0
}
#comments .click-comment {
background: #324047
}
#comments .click-comment:hover {
background: #34495e
}
#comments h3 {
background: #324047
}
#comments h3:before {
background: #324047
}
.comment-form p {
display: none
}
.comment_inner {
background-color: rgba(87, 100, 107, 0.41)
}
.comment_inner.comment_admin {
background: rgba(119, 134, 150, 0.25)
}
.comment_body {
background: #1F2C33
}
#copyright {
display: none
}
#BounceToTop {
display: none
}
#BounceToTop {
background: #10877e
}
#homezine {
background: rgb(184, 88, 96);
font: 12px Arial;
width: 50px;
position: absolute;
z-index: 9999;
top: -90px;
overflow: hidden
}
#zine {
margin: 0 auto;
width: 850px;
padding: 0
}
#zine ul {
float: left;
width: auto;
margin: 0;
padding: 0;
list-style-type: none
}
#zine ul li {
float: left
}
#zine ul li a, #nav ul li a:visited {
float: left;
padding: 10px 10px;
color: #fff;
text-transform: none
}
#zine ul li a:hover {
color: black;
text-decoration: none;
background: #10877e
}
</b:if>
</style>
lalu sobat bisa sesuaikan elemen pemanggil cssnya dan kemudian taruh di postingan - pilih mode HTML lalu simpan elemen barunya disana contohnya seperti ini
elemen pemanggil css #homezine dan #zine dibawah saya taruh di dalam postingan pada mode HTML pada postingan blogazine ini
<div id="homezine">
<div id="zine">
<ul>
<li><a href="www.http://www.label-tutorial.blogspot.com/">Home</a></li>
</ul>
</div>
</div>
5. Penutup
nah Mudah bukan membuat blogazine pada blogger ? ini hanya salah satu cara untuk membuat blogazine pada blogger , silahkan sobat bisa otak atik css dan elemennya dengan kreatifitas sobat sendiri karna css dan elemen diatas belum tentu sama dengan blog milik sobat . sekian salam labeltutorial.com
Author : +Asep Septian
