Untuk pemanasan membuka lembaran awal mengenai tutorial blog penuh gaya (full stylish for blogger) Koben akan berbagi trick or tut's pilihan dicomot dari sobat blogger in the world :D
Yang pertama membuat tabs menggunakan CSS 3! Dengan hadirnya variabel CSS3 transition dan transform membuat tab dengan penggunaan CSS lebih terasa lembut :"> Judul asli "Variante de pestañas usando sólo CSS" karya master @vagabundia dirasakan dapat mewakili sobat yang memang lagi mencari tab dengan menggunakan CSS. Like this...
Tutorial blog for full stylish blogger...
Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit. Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente.
Freedom of expression and system of brains...
Kunyah ampe lembut.
Silahkan sobat satroni guna mendapatkan ramuannya Make Varian Tab use only CSS 3. Kalau mau pakai yang kayak demo Koben silahkan sikat (background aku jadiin abu-abu) :P
Masih datang dari master JMiur, kali ini tutorial mengenai cara membuat galeri image menggunakan Transform Effect. Artikel sebelumnya tentang trik serupa pernah aku sharing juga loh Image Galery with Transform Effect. Bedanya kali ini hanya pada susunan gambar. Master JMiur membuatnya menjadi menumpuk-numpuk. Seperti:
Sok mangga dilihat bagaimana cara mebuatnya ya Galería with efectos CSS 3 ;))
Terakhir Koben ganteng mau berbagi dari salah satu sobat yang cukup lumayan aktif di beberapa web/blog, memberikan ilmunya guna dunia blogging khususnya platform blogspot. Membuat tombol dengan CSS3 dengan sentuhan gambar gelembung-gelembung sehingga terlihat full stylish b-) Kayak ngene...ORANGE GREEN BLUE jsfiddle.net/yKEhN/2/ Sok mangga diacak-acak blog kepunyaan master Mukund mengenai Animated Bubble Buttons Using CSS3 On Blogger Tutorialzine :-bd
Demikian artikel pembukaan dari Beben Koben si bloglang anu ganteng kalem tea setelah kita merayakan hari kemenangan penuh barakah. Semoga bermanfaat :)
Happy blogging \m/
Sok mangga dilihat bagaimana cara mebuatnya ya Galería with efectos CSS 3 ;))
Terakhir Koben ganteng mau berbagi dari salah satu sobat yang cukup lumayan aktif di beberapa web/blog, memberikan ilmunya guna dunia blogging khususnya platform blogspot. Membuat tombol dengan CSS3 dengan sentuhan gambar gelembung-gelembung sehingga terlihat full stylish b-) Kayak ngene...
Demikian artikel pembukaan dari Beben Koben si bloglang anu ganteng kalem tea setelah kita merayakan hari kemenangan penuh barakah. Semoga bermanfaat :)
Happy blogging \m/
ѕєвєℓαѕ вυℓαη кιтα кєנαя ∂υηια,
Tulisan 
<style>
.tabs {
margin: 0 auto;
min-height: 285px;
position: relative;
width: 550px;
}
.tab {
float: left;
}
.tab label {
background-color: #a00;
border-radius: 5px 5px 0 0;
left: 0;
cursor: pointer;
color: #DDD;
margin-right: 1px;
padding: 5px 15px;
position: relative;
}
.tab [type=radio] {
display: none;
}
.kontent {
background-color: #555;
bottom: 0;
left: 0;
overflow: hidden;
padding: 20px;
position: absolute;
right: 0;
top: 23px;
}
.kontent > * {
opacity: 0;
-moz-transform: translateX (-100%);
-webkit-transform: translateX (-100%);
-o-transform: translateX (-100%);
-moz-transition: all 0.7s ease;
-webkit-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
[type="radio"]:checked ~ label {
background-color: #555;
z-index: 2;
color: #FFF;
}
[type=radio]:checked ~ label ~ .kontent {z-index:1;}
[type=radio]:checked ~ label ~ .kontent > * {
opacity: 1;
-moz-transform: translateX (0);
-webkit-transform: translateX (0);
-o-transform: translateX (0);
-ms-transform: translateX (0);
}
img.rusa {
float: left;
padding: 0 10px 0 0;
}
</style>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">Pertama</label>
<div class="kontent">
<p style="text-align:justify;font-size:15px;font-family:Arial;padding:15px;border:1px dotted #AAA;color:#DDD">
Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit. Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente.
</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">Kedua</label>
<div class="kontent">
<p style="padding-top:5px;color:#DDF;font-size:15px;font-family:Verdana">
<img src="http://3.bp.blogspot.com/-HoM-8S7BqUg/Tl1NEDGF6mI/AAAAAAAASrE/an4i7aMTPPU/s000/rusa.gif" class="rusa">Cxtir sonis li kak, on mne maks zvestis profesor. Gda polakju blagodarim vo. Troh zxiznuf mai te. Kupit pervju jazikas na sos, kak iz edat podpor. Pisajut hrvatzem dev mi, jazika partner rodzinuf zxe ne, razumju belaruszem des bu. Uzx zavod tomatis televidenie do. Znat dajte dev no, ku hce gladju sportju vipolnil.</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Ketiga</label>
<div class="kontent">
<p style="text-align:center;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbYMIlMaCALA8hRHJxalYcjRTkxU0Kec4JlXy_9aN6AGxq-KlyahEjo8PZQozrHh7pRcYQBcvwIrOsR6ycedB5EJ__c_HoOj_T5x930wtCtlZzudT9vaTOzc7w-qjPFa-H4DcglOXpGAQ/" style="height:205px;width:100%"/></p>
</div>
</div>
</div>