Update Post in 10 November, Merry Heroes Day :D

Tidak dapat bahan postingan aneh, jika begini keadaan maka harus melakukan update post dengan topic yang sudah pernah di buat :D Sobat masih ingat dengan hello bar widget for blogger? In arsip and you can get here make sticky bar in blogger like as hello bar. Masih sedikit membawa embel-embel JavaScript pada markup HTML. Sekarang 100% akan Koben sharing bagaimana cara membuat CSS3 notifications ala hello bar created by master Acidmartin.
Hi guys, you can read here developer.mozilla.org/en-US/demos/detail/css3-notifications-bar

Kode sebetulnya tinggal comot or langsung download resource. Karena AA Koben orang baik banget'z di seluruh dunia, gue kasih kode modifan agar full stylish dikit ;)) Gue tambahkan efek CSS3 slide right tuing-tuing. Ketika muncul datang dari sisi kiri menuju kanan secara cepet kemudian ada tuing² kiri-kanan bentar :D
Ambil kode CSS dari sini CSS3 notification bar Pasangkan markup HTML berikut

<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">
    <input type="checkbox" id="aspal-hellobar-switcher" checked="checked" />
        <label for="aspal-hellobar-switcher">
            <span>&#8679;</span>
            <span>&#8681;</span>
        </label>
<div>
 <div>BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE...BLAH BLEH BLOH HERE... Ain't it cool?</div>
</div>
</div>

Save.
Satu updetan beres, lanjut bro...

Ooops ada kelupaan, jika sobat memasang kode CSS dari web sumber, tengok pada bagian kode

.aspal-hellobar.aspal-hellobar-e34c26 > div,.aspal-hellobar.aspal-hellobar-e34c26 label span {
background: #e34c26;
}

Itu merupakan jenis gaya yg ada, terdapat 5 gaya varian warna, sobat pilih salah satu, dan rubah juga code pada markup HTML<div class="aspal-hellobar aspal-hellobar-e34c26 slideRight">Kalau mau memilih efek gaya (tuing-tuing) silahkan baca miscellaneous hover effects using CSS3.

Kotak pencarian atau search box merupakan salah satu bagian dasar yg mesti ada kehadirannya pada sebuah web/blog. Untuk memudahkan dalam melakukan explorasi konten ;) Salah satu kotak pencarian full stylish karya master Marco Biedermann, Mac OS X 10.10 Yosemite Search codepen.io/m412c0/pen/dvFCB

.search {
width: 100%;
}
.search .field {
position: relative;
}
.search label {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAQAAAC1QeVaAAAAxElEQVR4AXXPIUuDcRDA4Zv4AUSwTLEKVoNlySyCYLO98CCsahGrX0AW/QhmBRHEJghLS4JFBBXDgrJi2In78w8v4v3S8XDh4nd0DTxLEzd2RC2EnrH07trQVDrXqbhs7FvfnBDWDKWTigOpL2oWvZpYKPjio1zVHEt7BdOtaLUtHRX8MmqjRjooeCVttPBOWi+4JT1aLaDjVLpU/5ytn840Dj1IaWSpYmi8yVlTF54qh9K8nn27usJK5fC3yvfhPx7a/AE9dYwDEfKrlAAAAABJRU5ErkJggg==) no-repeat 0 50%;
color: #b2b2b2;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
transition: left .4s, transform .4s;
padding-left: 1.25em;
}
.search .input-search {
border: 1px solid #dfdfdf;
border-radius: .25em;
box-shadow: 0 1px 0 #bfbebf;
display: block;
font: 400 1em/1.5em sans-serif;
padding: .5em 1.75em;
width: 100%;
}
.search .input-search:focus + label, .search .input-search:valid + label {
left: .5em;
transform: translate(0, -50%);
}
.search .input-search:valid + label {
text-indent: -9999px;
}

<form action="http://YOUR-ADDRESS-BLOG.blogspot.com/search" class="search">
    <div class="field">
      <input type="text" class="input-search" id="input-search" name="q" pattern=".{1,}" required="required">
      <label for="input-search">Search here...</label>
    </div> 
</form>

Change YOUR-ADDRESS-BLOG with your address blog.

Update terakhir yg ketiga tentang markdown Walau jauh dari topic, tetapi tools satu ini unik untuk diketahui :P Silahkan meluncur github.com/jonschlinkert/remarkable

Happy update \m/