Back To Tutorial Post after Ramadhan

Tidak terasa bulan penuh rahmat dan barakah telah kita lewati, semoga tahun berikutnya kita diijinkan kembali menemui bulan Ramadhan (Insya Alloh SWT) Tak lupa Beben Koben si bloglang anu ganteng kalem tea kembali mengucapkan maaf lahir & bathin kepada seluruh sobat-sobat blogger di dunia, khususnya kepada agan/aganwati pelancong setia ke blog ini :)
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...

Pertama

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...

Kedua

Kunyah ampe lembut.

Ketiga

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

Code Modify by Beben Koben

<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/AVvXsEghyGEg56pjZpxGpqyGrkCXym2HinUplON-iyOwUrSPfqMs4X8R3Ae9ewzAY66XvbSLos38n7kOssedrAd4o5E440AnLbw2GL5BBMGIkHx9er4fjybj1f_b81efPVywbAc1_CJ3uJuy9IY/" style="height:205px;width:100%"/></p>
</div>
</div>

</div>

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 BLUEjsfiddle.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/