Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN TOOLS
Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.
Blog untuk melihat konten berplat-form blogspot di seluruh dunia dan kumpulan tools pendukung operasional blog.
Your ads here!!!
Assalamu'alaikum
Selamat datang di Tutorial Blog for Stylish Blogger. Semoga tidak keberatan untuk membukanya. Sssttt...MOZILLA pakainya yah...! Jangan lupa mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging \m/
Wassalamu'alaikum ☺

0 Komentar WTF
Dalam belajar apalagi mendalami suatu hal, kita memerlukan sarana dan prasarana. Bisa berupa tools, aplikasi, web offline dan lain sebagainya. Kali ini AA Koben akan berbagi trik dan tips belajar dengan menggunakan cara offline web? Mungkin sobat blogger sudah pada tahu cara membuatnya! Yup, dengan cara mendownload semua konten-nya :))
Karena hobi saya mengkoleksi HTML editor, maka yang menjadi korban sekarang adalah monaco editor by Microsoft.
The Monaco Editor is the code editor that powers VS Code. A good page describing the code editor's features is here.

It is licensed under the MIT License and supports IE 11, Edge, Chrome, Firefox, Safari and Opera.

The Monaco editor is not supported in mobile browsers or mobile web frameworks. About
Kenapa saya pilih Monaco-Editor karena pada bagian navigasi ada link dengan title Playground yang sudah barang tentu tools untuk coba-coba :P

Github Microsoft/monaco-editor - Demo Monaco Editor

Kalau sobat coba Save Page As... demo page-nya maka tidak akan jalan walaupun offline, mencoba download file yg ada di github sama saja tidak jalan offline :-? Beruntung saya sebagai user Mozilla Firefox halaman demo Monaco Editor bisa saya jadikan offline o-+

Jangan berharap semua fitur akan berjalan normal, namun saya pastikan 85% work offline. Dan satu hal lagi, semua ini berjalan pada browser mozilla. Di google chrome tidak jalan karena mesin ini melakukan encode pada setiap url link, dan gue males untuk men-decode b-(

home-monaco-editorPada halaman index/home monaco-editor ini berisikan tentang contoh penulisan language! Karena gue belet bahasa inggris, silahkan sobat pelajari sendiri :Dapi-monaco-editorHalaman Monaco Editor API v0.8.3 menceritakan cara kalau sobat mau async dengan key api :))
playground-monaco-editorSebenarnya yang mau saya buatkan offline itu hanya pada halaman ini saja! Karena penggunaan PATH dalam penulisan javascript, apa boleh buat dech #-o
monarch-monaco-editorMonarch Documentation :-? :-??

Tooltips berupa keterangan pada setiap kata tidak berjalan dikarenakan berada dalam satu paket webpack. AA tidak bisa menjangkaunya :)>-

Please read license of product!
This creation tested on mozilla firefox V42.0 and V52.0

UPDATE

Sekarang AA sudah bisa menjangkau tooltip (keterangan) untuk javascript-nya! Lebih jelas lihat screenshot berikut...Monaco-EditorPada halaman playground...Monaco-Editor-PlaygroundPada halaman monarch...MonarchSilahkan di download ulang bagi yg sudah mendownload file sebelumnya. Terima kasih :)

monaco-editor-master.7z on Google Drive.

Password for .7z is pLr6qtE-kB&uY$Fj5KWgfy-Sv7fcxySsJRz3rvn*5h8qv

Maafkan atas segala kekurangan, kebenaran dan kesempurnaan mutlak hanya milik الله سُبْحَانَهُ وَ تَعَالَى

0 Komentar WTF
Berbicara mengenai effects tentu tidak akan ada habisnya. Dengan menggunakan bahasa CSS saja ada bejibun hasil yang sudah bisa kita comot secara gratis ;)) Salah satu efek paling kreatif yg memikat mata adalah The Gooey Effect. Salah seorang kreator dari gooey efek ini adalah bernama Lucas Bebber! Kalau mau membaca artikel tentang The Gooey Effect
Berikut adalah beberapa kreasi goo-ey pilihan dari web playground codepen
  • Gooey toggle switch.
  • Social Icon with Gooey Effect.
  • Pure CSS gooey nav menu button.
  • SVG Filter Gooey Share, Social Media Button.
Ada banyak sih, searching saja sendiri, try also in github ;)
Setelah gue baca dan mengamati, ternyata efek yang dihasilkan itu bisa murni menggunakan bahasa CSS, SVG, atau Script? Tergantung sobat terbiasa dengan yg mana, tinggal pilih sesuai kebutuhan! Untuk lebih jelas, silahkan sobat buka HTML Editor Playground kalian atau secara online bisa kunjungi Create a New Pen, Create a new fiddle or Live HTML Editor.

Masukan syntax HTML pada kotak HTML, kode CSS pada kotak CSS begitu jg JavaScript pd kotak script! Berikut kode awal untuk melihat bagaimana indahnya si gooey efek tercipta dengan CSS?

.blobs{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 400px;
height: 200px;
margin: auto;
background-color: #FFF;
filter: contrast(15) contrast(.5) sepia(1) brightness(1.85) hue-rotate(319deg) saturate(3.45);
overflow: hidden;
}
.blob{
background-color: #000;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
transition: cubic-bezier(.8,0,.25,1) 1.3s;
box-shadow: 0 0 30px 10px black;
}
.blobs:hover .blob:first-child{
transform: translate(-50%, -50%) translateX (-70px);
}
.blobs:hover .blob: last-child{
transform: translate(-50%, -50%) translateX (70px);
}
<div class="blobs">
<div class="blob"></div>
<div class="blob"></div>
</div>

Salah satu creation perpaduan goo_ey efek dgn memakai SVG and jQuery SVG Filter Gooey Share, Social Media Button. By dynamicdrive you can get free code for Slide Out Social Icon Buttons. Di awal tadi salah seorang master sudah membuat Gooey Menu dengan 4 varian menggunakan CSS and SVG Filters! Sekarang AA Koben akan bagi pada kalian satu persatu ke-4 varian tersebut. Kode yg saya buat khusus untuk browser mozilla? This is my experiment bro HA...HA :))

The code is the creation of an experiment for the mozilla browser only.

Gooey Menu Version 1

.menu-item, .menu-open-button {
background: #ff4081;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 50%;
margin-left: -190px;
padding-top: 20px;
padding-left: 190px;
width: 380px;
height: 250px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #ff4081;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 70ms;
transition-duration: 70ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 130ms;
transition-duration: 130ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 190ms;
transition-duration: 190ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
}
.menu-item:nth-child(7) {
-webkit-transition-duration: 310ms;
transition-duration: 310ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 160ms;
transition-duration: 160ms;
-webkit-transform: translate3d(114.42548px, 11.48084px, 0);
transform: translate3d(114.42548px, 11.48084px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 240ms;
transition-duration: 240ms;
-webkit-transform: translate3d(77.18543px, 85.2491px, 0);
transform: translate3d(77.18543px, 85.2491px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 320ms;
transition-duration: 320ms;
-webkit-transform: translate3d(0.09158px, 114.99996px, 0);
transform: translate3d(0.09158px, 114.99996px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: translate3d(-77.04956px, 85.37192px, 0);
transform: translate3d(-77.04956px, 85.37192px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
-webkit-transition-duration: 480ms;
transition-duration: 480ms;
-webkit-transform: translate3d(-114.40705px, 11.66307px, 0);
transform: translate3d(-114.40705px, 11.66307px, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>
</nav>
DEMO:

Gooey Menu Version 2

.menu-item, .menu-open-button {
background: #e91e63;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 150px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 50%;
margin-left: -190px;
padding-top: 20px;
padding-left: 190px;
width: 380px;
height: 250px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #e91e63;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(7) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(8) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(9) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
-webkit-transform: translate3d(0.08361px, -104.99997px, 0);
transform: translate3d(0.08361px, -104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 280ms;
transition-duration: 280ms;
-webkit-transform: translate3d(90.9466px, -52.47586px, 0);
transform: translate3d(90.9466px, -52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 380ms;
transition-duration: 380ms;
-webkit-transform: translate3d(90.9466px, 52.47586px, 0);
transform: translate3d(90.9466px, 52.47586px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 480ms;
transition-duration: 480ms;
-webkit-transform: translate3d(0.08361px, 104.99997px, 0);
transform: translate3d(0.08361px, 104.99997px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
-webkit-transition-duration: 580ms;
transition-duration: 580ms;
-webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
transform: translate3d(-90.86291px, 52.62064px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(8) {
-webkit-transition-duration: 680ms;
transition-duration: 680ms;
-webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
transform: translate3d(-91.03006px, -52.33095px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(9) {
-webkit-transition-duration: 780ms;
transition-duration: 780ms;
-webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
transform: translate3d(-0.25084px, -104.9997px, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-ellipsis-h"></i> </a>
</nav>
DEMO:

Gooey Menu Version 3

.menu-item, .menu-open-button {
background: #00bcd4;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 7%;
margin-left: -80px;
padding-top: 20px;
padding-left: 80px;
width: 650px;
height: 150px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #00bcd4;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 190ms;
transition-duration: 190ms;
-webkit-transform: translate3d(110px, 0, 0);
transform: translate3d(110px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 290ms;
transition-duration: 290ms;
-webkit-transform: translate3d(220px, 0, 0);
transform: translate3d(220px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 390ms;
transition-duration: 390ms;
-webkit-transform: translate3d(330px, 0, 0);
transform: translate3d(330px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 490ms;
transition-duration: 490ms;
-webkit-transform: translate3d(440px, 0, 0);
transform: translate3d(440px, 0, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
</nav>
DEMO:

Gooey Menu Version 4

.menu-item, .menu-open-button {
background: #ffc107;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
top: 20px;
color: white;
text-align: center;
line-height: 80px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform ease-out 200ms;
transition: -webkit-transform ease-out 200ms;
transition: transform ease-out 200ms;
transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}
.menu-open {
display: none;
}
.hamburger {
width: 25px;
height: 3px;
background: white;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -12.5px;
margin-top: -1.5px;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.hamburger-1 {
-webkit-transform: translate3d(0, -8px, 0);
transform: translate3d(0, -8px, 0);
}
.hamburger-2 {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hamburger-3 {
-webkit-transform: translate3d(0, 8px, 0);
transform: translate3d(0, 8px, 0);
}
.menu-open:checked + .menu-open-button .hamburger-1 {
-webkit-transform: translate3d(0, 0, 0) rotate(45deg);
transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu {
position: absolute;
left: 7%;
margin-left: -80px;
padding-top: 20px;
padding-left: 80px;
width: 650px;
height: 150px;
box-sizing: border-box;
font-size: 20px;
text-align: left;
-webkit-filter: url("#shadowed-goo");
filter: url("#shadowed-goo");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'shadowed-goo\'><feGaussianBlur in=\'SourceGraphic\' result=\'blur\' stdDeviation=\'10\'/><feColorMatrix in=\'blur\' mode=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7\' result=\'goo\'/><feGaussianBlur in=\'goo\' stdDeviation=\'3\' result=\'shadow\'/><feColorMatrix in=\'shadow\' mode=\'matrix\' values=\'0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2\' result=\'shadow\'/><feOffset in=\'shadow\' dx=\'1\' dy=\'1\' result=\'shadow\'/><feBlend in2=\'shadow\' in=\'goo\' result=\'goo\'/><feBlend in2=\'goo\' in=\'SourceGraphic\' result=\'mix\'/></filter></defs></svg>#shadowed-goo");
}
.menu-item:hover {
background: white;
color: #ffc107;
}
.menu-item:nth-child(3) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(4) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(5) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-item:nth-child(6) {
-webkit-transition-duration: 180ms;
transition-duration: 180ms;
}
.menu-open-button {
z-index: 2;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
-webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
transform: scale(1.1, 1.1) translate3d(0, 0, 0);
cursor: pointer;
}
.menu-open-button:hover {
-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}
.menu-open:checked + .menu-open-button {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}
.menu-open:checked ~ .menu-item {
-webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.menu-open:checked ~ .menu-item:nth-child(3) {
-webkit-transition-duration: 170ms;
transition-duration: 170ms;
-webkit-transform: translate3d(80px, 0, 0);
transform: translate3d(80px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-webkit-transform: translate3d(160px, 0, 0);
transform: translate3d(160px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
-webkit-transition-duration: 330ms;
transition-duration: 330ms;
-webkit-transform: translate3d(240px, 0, 0);
transform: translate3d(240px, 0, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
-webkit-transition-duration: 410ms;
transition-duration: 410ms;
-webkit-transform: translate3d(320px, 0, 0);
transform: translate3d(320px, 0, 0);
}
nav.menu a, .fa {
width:80px;
height:80px;
line-height:80px;
vertical-align:middle;
}
<nav class="menu">
<input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open"/>
<label class="menu-open-button" for="menu-open">
<span class="hamburger hamburger-1"></span>
<span class="hamburger hamburger-2"></span>
<span class="hamburger hamburger-3"></span>
</label>
<a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
<a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
</nav>
DEMO:

For fun

CSS3 Keyframes Animation Link Style - Animated Search Box - What is Clojure - Wavy Walrus & the Carpenter - Floating Social Buttons (Font Awesome) - Asana Style Buttons - Flat Buttons' Psuedo Striped Shadows - Styled file input - Laser Text animation - Header Resize on Scroll Simple Page Layout - CSS 3 Icons - Panels - Button with orbit #1 - Split fractured text - Kata - Simple gallery - Ordered List Hacks - What does a developer share? - Text Rotater - Simple toggle - Border-Image : SVG - Split Screen - CSS Text animation - floating button wants to be clicked - Magazine Template - Destination magazine - CSS only 3D paper fold text effect - Gradient Buttons with Background-Color Change (CSS-only) - Open menu effect | Pure CSS - Emoji as a cursor - Cascading text effects 📶✍️🤓 - File Dropper - ASCII art - Fading text with CSS blend modes - Pure CSS Responsive Flexbox Navigation - PX to EM calculator - Bokeh Pattern - 3D Magazine flip preview in CSS - Draggable Menu Icon - CSS3 Social buttons vol.1 - Numscrubber.js - Quick CSS3 tooltips (No images, no js) - Stacked Cards Hover Effects - Vue.js Border Radius Generator

Bye :-h

0 Komentar WTF
Dulu saya pernah menuliskan artikel tentang PDF viewer for browser mozilla & chrome bertujuan untuk melihat file PDF pada mesin browser. Eh sekarang sudah tertanam secara permanen di mozilla ;)) Sekarang AA Koben akan berbagi informasi bagaimana kita akan menulis dan kemudian di convert ke dalam bentuk word? Seperti yg kita ketahui bersama, untuk membuat sebuah file .word kebanyakan web di luaran sana menawarkan jasanya dengan cara mesti register terlebih dahulu! Dari banyaknya editor salah satu yg terkenal adalah TinyMCE. Dengan editor tersebut gue dapat dari web GitHub html-docx-js.html-docx-js

HTML docx js

Ini adalah perpustakaan yang sangat kecil yang mampu mengkonversi dokumen HTML ke format DOCX yang digunakan oleh Microsoft Word 2007 dan seterusnya. Itu berhasil melakukan konversi di browser dengan menggunakan fitur yang disebut 'altchunks'. Singkatnya, hal itu memungkinkan konten embedding dalam bahasa markup yang berbeda. Kami menggunakan dokumen MHT untuk mengantar konten tertanam ke Word karena memungkinkan untuk menangani gambar. Setelah word membuka file tersebut, ia mengubah konten eksternal untuk mengolah kata ML (ini adalah markup dari file DOCX disebut) dan menggantikan referensi.

Altchunks tidak didukung oleh Microsoft Word untuk Mac 2008 dan tidak didukung oleh LibreOffice dan Google Docs.

Compatibility

Perpustakaan ini harus bekerja pada setiap browser modern yang mendukung blob (baik native atau melalui Blob.js). Itu diuji pada Google Chrome 36, Safari 7, Firefox 42.0 dan Internet Explorer 10.

Ini juga bekerja pada Node.js (diuji pada v0.10.12) menggunakan Buffer bukan Blob.

Images Support

Perpustakaan ini hanya mendukung gambar base64 inline (bersumber melalui DATA URI). Tetapi mudah untuk mengkonversi gambar biasa (bersumber dari folder statis) dengan cepat.

Seperti biasa aku hanya menambahkan di sana-sini agar .html ini bisa beroperasi secara offline ;) Satu lagi saya sudah menambahkan fitur get local image pada bagian menu Insert >>> Image.

Download

4shared or Google Drive

Password:

Berikut beberapa resources buat sobat untuk mempelajari lebih lanjut...
  • TinyMCE documentation
  • TinyMCE on CodePen
  • TinyMCE Image Upload
  • TinyMCE 4 w/ Twitter Bootstrap
Semoga bermanfaat, dan silahkan dikembangkan, kalau sudah ngembang kasih tauk saya yah :D :)

0 Komentar WTF
Sekarang gw mau bereksperimen ria dengan variabel feColorMatrix, feBlur and feOffset! Coba lihat terlebih dahulu a pen by Paresh Deshpande. Saya forked kode yang sudah ada, dan berlaku untuk browsingan mozilla! Begini hasilnya. Nggak ada kerjaan ya sudah eksperimen saja dengan kode-kode yg sudah ada ;))
Masih di lingkungan codepen.io, ada seorang member @Sasha sudah membuat Floating Action Button sederhana yg terinspirasi dari web google! Tugas Koben hanya meng-kompile & mengakali satu variabel saja!

.container, .button, .nav {
position: absolute;
}
.container {
margin: auto;
top: 1em;
right: 55px;
width: 50px;
height: 100px;
}
#toggle {
display: none;
}
.button {
z-index: 999;
width: 43px;
height: 43px;
background: #F28482;
border-radius: 100%;
transition: all 0.5s ease-in-out;
box-shadow: 1px 3px 10px 0 rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:before {
position: absolute;
top: 20px;
left: 9px;
content: '';
width: 25px;
height: 2px;
background: #FFF;
transform: rotate(90deg);
}
.button:after {
position: absolute;
top: 20px;
left: 9px;
content: '';
width: 25px;
height: 2px;
background: #FFF;
}
.nav {
transform: translateY(-10%);
visibility: hidden;
top: 20px;
left: -55px;
transition: all 0.5s ease-in-out;
background: #FFF;
width: 150px;
border-radius: 2px;
transform: translateY(0%);
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}
.nav a {
text-align: center;
display: block;
margin: 15px 0;
color: #F28482;
text-decoration: none;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
#toggle:checked ~ .nav {
visibility: visible;
transform: translateY(10%);
}
#toggle:checked ~ .button {
transform: rotate(135deg);
box-shadow: 0 0 0 0 transparent;
}

<div class="container">
<input type="checkbox" id="toggle" />
<label class="button" for="toggle"></label>
<nav class="nav">
<a href="#" target="_blank">Home</a>
<a href="#" target="_blank">About</a>
<a href="#" target="_blank">Hire Me</a>
<a href="#" target="_blank">Subscribe</a>
</nav>
</div>

This is for other resources
  • Floating Action Button aka FAB (Material Google inspired)
  • Material Design floating action button for web, that really stands out
  • react material floating button
  • 35 Cool Floating Action Button Animations
Jikalau sobat mau dapat ide cari saja di web ini yah Free HTML, CSS and JS examples, di jamin towewew!

Bonus:

Before and After - Image Preview - CSS Paper Text - Responsively crop copy, restore onclick via slide animation - Responsive fonts - auto-scaling root font-size in pure CSS - Share Your Profile - HSL color picker - Color Stuff (CSS only) - Custom Context Menu With Toasts - CodeMirror GitHub theme with Copy to clipboard - CSS Horizontal Scrolling - Polyrize.js - Converting colors using filters - CSS sidebar toggle - Slide to Open - Split Text Slides - A Web Dev's Valentine - Text Visual - Team Cards - CSS Flip Cards - blurry hover effect 2 - Flexbox Demo - Popular Pens, Sort by Stat - Jelly Checkbox - Interactive 3D Video Thumbnail - Scrolling Pattern - SVG folding line hover effect - ruler - jQuery drawers - Push Notifications and Newsletter Signup Form with Transitions - Atom Button - Repeatable Patterns in CSS - Rings Navigation Concept - Blurry checkbox style

0 Komentar WTF
Salah satu teknik dalam membuat terkenal weblog kita adalah dengan disediakannya navigasi berupa link tautan berbagi ke web jejaring! Dari sekian banyak web yang menawarkan jasa berbagi itu adalah AddThis share buttons. Seperti di blog AA koben yg keren ini penampakannya seperti:Pada platform blogspot syntax link berbeda pada umumnya! Sobat harus tauk apakah entuh yg disebut Layouts Data Tags. Kenapa saya memberitahukan hal tersebut, karena dalam memuat kode bentrok dengan code emoticon, jadi takut salah :P
Original idea and demo you can look here: Share Your Profiles
Untuk blog yang sudah memakai technique font-awesome pada templatenya, maka kode sbb:

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
.social {
display: flex;
text-align: center;
position: relative;
width: 300px;
height: 70px;
font-size: 18px;
font-weight: 700;
border-top: 2px solid #dbe3ea;
border-bottom: 2px solid #dbe3ea;
color: #9aa9b5;
background: #fff;
overflow: hidden;
margin: auto;
transition: box-shadow .2s ease-out;
}
.social span, .social div {
margin: auto;
box-sizing: border-box;
}
.social .social-links {
display: flex;
text-align: center;
position: absolute;
top: 0;
left: 0;
background: rgba(62, 130, 251, 0);
width: 100%;
height: 100%;
padding: 0 30px;
transition: all .25s ease;
}
.social .social-links a {
margin: auto;
padding-top: 13px;
background: #fff;
color: #3e82fb;
width: 40px;
height: 28px;
line-height: 40px;
font-size: 15px;
transform: translate3d(0, 60px, 0);
transition: all .2s;
}
.social .social-links a:hover {
background: #89b3fd;
color: #fff;
}
.social:hover {
border: none;
box-shadow: inset 0 0 0 2px #dbe3ea, 0 1rem 20px rgba(62, 130, 251, 0.2);
}
.social:hover .social-links {
background: #3e82fb;
}
.social:hover .social-links > a {
animation: elastic .5s ease-out forwards 0s;
}
.social:hover .social-links > a:nth-child(2) {
animation-delay: 0.05s;
}
.social:hover .social-links > a:nth-child(3) {
animation-delay: 0.1s;
}
.social:hover .social-links > a:nth-child(4) {
animation-delay: 0.15s;
}
.social:hover .social-links > a:nth-child(5) {
animation-delay: 0.2s;
}
@keyframes elastic {
0% {
transform: translate3d(0, 60px, 0);
}
40% {
transform: translate3d(0, -5px, 0);
}
70% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

<div class="social">
<span>Share your link</span>
<div class="social-links">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-plus" aria-hidden="true"></i></a>
</div>
</div>
Bagi sobat yg ingin memakai gambar, sediakan gambar dengan resolusi 15px x 15px, kode sbb:
.social {
display: flex;
text-align: center;
position: relative;
width: 300px;
height: 55px;
font-size: 18px;
font-weight: 700;
border-top: 2px solid #dbe3ea;
border-bottom: 2px solid #dbe3ea;
color: #9aa9b5;
background: #fff;
overflow: hidden;
margin: auto;
transition: box-shadow .2s ease-out;
}
.social span, .social div {
margin: auto;
box-sizing: border-box;
}
.social .social-links {
display: flex;
text-align: center;
position: absolute;
top: 0;
left: 0;
background: rgba(62, 130, 251, 0);
width: 100%;
height: 100%;
padding: 0 30px;
transition: all .25s ease;
}
.social .social-links a {
margin: auto;
padding-top: 13px;
background: #3e82fb;
color: #3e82fb;
width: 40px;
height: 28px;
line-height: 40px;
font-size: 15px;
transform: translate3d(0, 60px, 0);
transition: all .2s;
}
.social .social-links a:hover {
background: #4285F4;
color: #fff;
}
.social:hover {
border: none;
box-shadow: inset 0 0 0 2px #dbe3ea, 0 1rem 20px rgba(0, 0, 0, 0.2);
}
.social:hover .social-links {
background: #fff;
}
.social:hover .social-links > a {
animation: elastic .5s ease-out forwards 0s;
}
.social:hover .social-links > a:nth-child(2) {
animation-delay: 0.05s;
}
.social:hover .social-links > a:nth-child(3) {
animation-delay: 0.1s;
}
.social:hover .social-links > a:nth-child(4) {
animation-delay: 0.15s;
}
.social:hover .social-links > a:nth-child(5) {
animation-delay: 0.2s;
}
@keyframes elastic {
0% {
transform: translate3d(0, 60px, 0);
}
40% {
transform: translate3d(0, -5px, 0);
}
70% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

<div class="social">
<span>Share your link</span>
<div class="social-links">
<a href="#"><img src="IMAGE-FACEBOOK 15px x 15px"></a>
<a href="#"><img src="IMAGE-TWITTER 15px x 15px"></a>
<a href="#"><img src="IMAGE-LINKEDIN 15px x 15px"></a>
<a href="#"><img src="IMAGE-G-PLUS 15px x 15px"></a>
<a href="#"><img src="IMAGE-MORE 15px x 15px"></a>
</div>
</div>

Sebelumnya saya sudah kasih tau ttg layouts data tag? Ini berlaku pada penulisan syntax-HTML! Pada tutor di atas gue buat<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>atau<a href="#"><img src="IMAGE-FACEBOOK 15px x 15px"></a>Buat blogspot berbeda, dan tergantung link tujuan web?
Contoh:
<a expr:href='&quot;//www.facebook.com/share.php?u=&quot; + data: post.url + &quot;&amp;title=&quot; + data: post.title' target='_blank'><i class="fa fa-facebook" aria-hidden="true"></i></a>
or
<a expr:href='&quot;//www.facebook.com/share.php?u=&quot; + data: post.url + &quot;&amp;title=&quot; + data: post.title' target='_blank'><img src="IMAGE-FACEBOOK 15px x 15px"></a>
Demo. Good luck :D