All Coded To Be a Professional Blogger

Waktu terus berjalan, seiring berjalannya sang waktu para blogger khususnya blogger Indonesia makin full stylish. Dari segi penampilan template, konten yang menarik, dan lain². Satu yg harus kita jaga adalah semangat membara BW (selagi ada kesempatan) :D Beben Koben si bloglang anu ganteng kalem tea, selaku blogwalker lumayan aktif dalam berburu artikel, akan mencoba membantu kalian bagaimana cara membuat blog kita tampil lebih profesional! Inti dari postingan sekarang, hasil hunting berita teranyar dari master² luar negeri untuk kita para blogger sejati :-bd
Bloggers pecinta gadget twitter telah hadir keluaran teranyar Twitter Friends Widget v2.0 (jQuery plugin) Silahkan diambil widget twitterer twitter friends widget karya master @mike_more owner moretechtips.net

Kotak berlangganan tempat form mengajak orang lain untuk berlangganan artikel kita, keberadaannya mungkin sudah menjadi satu hal yg pokok di dalam blog. Koben sudah buat yg sederhana simple subscribes box for you! Supaya kotak langgan menjadi satu dengan link jejaring, we are friend @way2blogging have make with Mashable style b-) sikat bos mashable style social subscription widget for blogger/blogspot sekalian nih kotak folow email bergaya WP static follow by email pop out widget for blogger/blogspot by way2blogging
Sudah mendekati profesional apa belum penampilan template sobat sekarang :-/ Mau yang kayak ginian atau enggak customize iframe toolbar? hajar bos iframe toolbar for blogger created by master @nitinmaheta :-"

Minimal sudah ada beberapa tambahan style di blog kita yah :D Gaya dulu, baru beliii =)) Sebagai bonus Koben akan menghadirkan style penulisan seputaran trik ordered & unordered list. Datang dari @catalinred master Catalin Rosu salah seorang kontributor red-team-design, membuat karya fancy faq page using css3 only. Dilihat-lihat dari hasil karyanya mungkin mirip² dengan ini sob unordered list hover style :D

Fancy FAQ Demo

Cus mu Lu Nyun?

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has.

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.

Ka canG Bun Cis NgklE?

Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in.

Sine paternoster simplificate su non, anglese moderne secundo da web.

Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan.

pere Pet jeng Kol?

Cras semper nisi quis purus aliquam ultricies. Vivamus pellentesque ipsum non magna ultricies sed iaculis mi iaculis.

Donec eu velit lectus. Aenean justo quam, faucibus non vestibulum et, tincidunt sed felis. Vivamus vehicula egestas nisl ut lacinia. Suspendisse tempor adipiscing mi. Pellentesque posuere blandit nisi eget vestibulum.

.faq-section input,
.faq-section p{
display: none;
}
.faq-section label+p{
display: block;
color: #777;
font-size: .85em;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-ms-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.faq-section input[type=checkbox]:checked~p{
display: block;
color: #444;
font-size: 1em;
text-overflow: clip;
white-space: normal;
overflow: visible;
}
.faq-section label{
font-size: 1.2em;
cursor: pointer;
color:#714F23;
background: #E5CBA9;
display: block;
position: relative;
padding: 5px 10px;
font-weight: bold;
border: 1px solid #999;
border-left: 3px solid #888;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.faq-section label::-moz-selection{
background: none;
}
.faq-section label::selection{
background: none;
}
.faq-section label:hover{
background: #f5f5f5;
}
.faq-section input[type=checkbox]:checked~label{
border-color: #714F23;
background: #D3A76F;
color: #EEE;
}
.faq-section label::before{
content: '';
position: absolute;
right: 4px;
top: 50%;
margin-top: -6px;
border: 6px solid transparent;
border-left-color: inherit;
}
.faq-section input[type=checkbox]:checked~label::before{
border: 6px solid transparent;
border-top-color: inherit;
margin-top: -3px;
right: 10px;
}

Markup HTML

<div class="faq-section">
<input type="checkbox" id="q1">
<label for="q1">YOUR TITLE HERE?</label>
<p>Blah bleh Bloh 1</p>
<p>Blah bleh Bloh 2</p>
</div>Sobat mau menambahkan kotak yg ada tinggal membuat syntax seperti itu. Yang perlu diperhatikan yaitu kode yg diberi warna harus berbeda (unique ID) ;) Setelah dilihat lebih lama kok mirip ini yah Make Accordion Use CSS3 Latest :P
Satu lagi bonus bagi kalian datang dari web panutan CSS-Tricks mengenai How To Create a Notebook Design with CSS! Tutorial yg akan menunjukkan cara untuk membuat website bertema notebook hanya menggunakan CSS. Like this

• Bangun tidur...
• Terus mandi...
• Tidak lupa menggosok GIGI.
• Habis mandi ku tolong Ibu.
• Membereskan...
• Tempat tidurku...
• Bantal guling bau ompol.

Kode CSS

.list {
color: #555;
padding: 0 !important;
font-family: courier, monospace;
border: 1px solid #dedede;
position: relative;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.list li {
list-style: none;
border-bottom: 1px dotted #ccc;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 5px 0 5px 40px;
text-transform: capitalize;
}
.list li:hover {
background-color: #eee;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
}
.list li: last-child {
border-bottom: 0;
}
.list:before {
content: "";
border-left: 1px solid #ffaa9f;
border-right: 1px solid #ffaa9f;
width: 1px;
position: absolute;
height: 100%;
left: 25px;
}

HTML Markup

<ul class="list">
<li>Blah Bleh Bloh...1</li>
<li>Blah Bleh Bloh...2</li>
<li>Blah Bleh Bloh...3</li>
</ul>Lihat di sesi komentar disana, para master & developer saling berunjuk kabisa menampilkan trik serupa ;)) Contoh karya master Lea Verou ;)

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. Uzx zavod tomatis televidenie do. Znat dajte dev no, ku hce gladju sportju vipolnil. Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum.

Happy coding \m/