Make Search Box use placeholder-shown selector Technique

2020 telah tiba! Pembaharuan terjadi disana-sini. Tidak terkecuali pemberhentian layanan dimana-mana :D Jarang melakukan kegiatan posting, sampai² lupa rumus/jurus gue dalam mengetik =)) Ngemeng-ngemeng tentang pembaharuan (blogspot), mungkin diantara sobat sudah melihatnya! Terlihat pada bagian dashboard blog sudah lebih full stylish saat ini. Sebagai salah satu mesin pencari yang digandrungi orang google, pada bagian search box mengalami perubahan!Sekarang AA Koben mau coba berbagi cara membuat kotak pencarian yg seperti itu! Saat anda mengetik pada kotak pencarian akan muncul icon search (🔍) imut-imut :(|) Tidak sama dengan google, tetapi konsepnya yg mirip.Demo I & source kode

Demo II & source kode
Yang terakhir, mirip dengan yang ke-II, tetapi diberikan sedikit sentuhan efek B-)
Demo III & source kode

Harap diperhatikan, disini gue hanya memberikan kode CSS. Adapun penulisan syntax <form> pencarian sobat ganti sendiri :)>-

Original idea by Liam on codepen with title :placeholder-shown selector
Bonus link codepen selection buat kalian yg cari ide/bahan postingan:

simple popover - Sign Up Modal - Buttons UI Kit - double exposure carousel slider - Build a Filtering Component in Pure CSS - The more menu - Accordion / Dropdown / Toggle Pure CSS - My First Color Tools Project - Polygon-style gradient pull quote - CSS TABS - Pure CSS menu cutout effect - BBC News style joined bullets - Pure CSS Accordion - 5-Way Gradient Generator - Pure CSS Card Carousel - Tabs - CSS + JS - Old Typewriter Text Effect - Center Focus Feature Section - Pure CSS Animated Search Bar - CSS-Only Gooey Content Toggle - Gradient Ordered List - Scrolling table - -webkit-box-reflect & SVG filters - Social Menu Share with SVG - Social Media Share Cards - Floating Aside HTML Buttons - CSS Grid Menu - Awesome Flexbox - Details element with custom arrow - Scroll Based Animation - Drop Spread Blur - Reveal Effect Text Animation - Image slideshow HTML and CSS only - Drag-n-drop sticky, with no JS! - PUZZLE MAKER - Blur background on click (modal window) - The circular menu - Video created using HTML and CSS only - Taking advantage of :target / Proposing :target-within - Underline.js - Sliding Tile Puzzle with Custom Images in Vue - Info Button - Amazing Button Hover - React select and crop image - Box skew hover - Image glitch effect - Banners - final demo - Social Media Buttons - Link & Button - Shatter Effect - Locked input field - CSS only - Gradient Playground - Styled "select" options using CSS3 and Flexbox - Color Search w/ React Hooks 🎨 - Find emoji by description - Tabs Navigation UI - Night Party Mode - CSS Only - Social Icons - Hover Effect - Challenges: CSS Strange Nav - magnifying image view with zoom 🔍 - Input group :focus-within - Palette Panda - Simple image comparison slider - Line distortion - Scroll page loader (pure CSS no JS) - Animated Verbs - Animated Portrait w/ GSAP 2.0 - Mini Music Player - VueJS - CSS Modal - (2019) Custom Checkbox, Radio, Switch - CSS Grid-ient - Gradient color button with hover glow - Multiplication Lookup Table - 50+ Pure CSS3 Preloaders (Latest) - Share Selected Text - Modern Gradient Buttons - Happy Fun Nav - Dark mode toggle expanding circle - CSS Swinging Text Animation - LazyLoading Videos with IntersectionObserver - Instagram downloader - 2019 Mood Calendar - TechGirlz CSS Animation (Finished) - Social Animation - Dribbble//Simple Icons - Menu Interaction - One background for multiple divs - Pure CSS Responsive List & Tooltips - Only CSS: Sunset Bird (Orange&Blue) - Footnotes - RSS Single Element - Random Password Generator - Blur Reveal - Navigation Menu w/ Animations - Navigation with Sub-Navigation (CPC) - Document Title Ticker - Web Design - Hover, I dare you! - CSS Only - Multi-line spanning animated underline. - Image Password Strength - Link Fill on Hover - Image Animation Effects - Utilities - Fullscreen Nav - Horizontal - Section numbering with CSS - Stylish Social Buttons - CSS only slider - smallest slider ever w/o JS - cpc-checkbox-hack - Magic with details // CSS Only Dropdown - Animated Search Interaction - 3D CSS Transform Rotation Builder - Menu Hover Fill Text - Pure CSS circular border patterns - Cut/Copy/Paste - Gradient Text Overlay - Color Wheel - Social Icon Gooey Effects - Bring Back the Marquee - Multi line text underline CSS - Clip Path Hover Animation - Keyboard accessible

Adios Amigos...Parantos...Yuk Babay :-h

Encode base64 Automatic to Show Posted

Base64 adalah kelompok skema pengkodean binary-to-text serupa yang mewakili binary data dalam format string ASCII dengan menerjemahkannya ke representasi radix-64. Istilah Base64 berasal dari penyandian transfer konten MIME spesifik. Setiap digit Base64 mewakili tepat 6 bit data. Tiga 8-bit byte (yaitu, total 24 bit) karena itu dapat diwakili oleh empat digit 6-bit Base64. Itulah penjelasan singkat mengenai Base64 dari wikipedia yang diterjemahkan via google translate.
Secara khusus kegunaan base-64 gue juga kagak tauk, tetapi ane tahu dengan melakukan convert/encode tulisan yang terbaca bisa menjadi tulisan alien (alias menjadi deretan kode-kode bit!)

Dengan kelebihannya ini, kita bisa memanfaatkan dalam area postingan untuk melakukan encode/decode! Singkatnya apabila sobat mau menyembunyikan konten (tulisan) maka lakukanlah encode terlebih dahulu, yg kemudian secara otomatis akan di decode di area postingan? Contoh sederhana begini, AA Koben menulis abcde dalam bahasa base64, YWJjZGU= Saat sobat menuliskan YWJjZGU= di HTML Editor post blogger nanti akan langsung tertuliskan abcde pada artikel post! Tetapi ketika dilakukan View Page Source tidak akan ketemu tulisan abcde!!!

Letakan script tepat sebelum/diatas taging </head> Klik kanan pada mouse, Save Link As dan lakukan hosting javascript berikut base64.min.js

Ketika sobat akan melakukan posting blog, jangan lupa tulisan/kode dilakukan encoding terlebih dahulu. Sesudah itu tulis dengan format di html-editor post blog seperti berikut

<script type="text/javascript">document.write(Base64.decode("KODE/TULISAN HASIL ENCODING TARUH DI SINI"));</script>

Tools encodingnya mshang.ca/base64-js

Harap diperhatikan, penulisan dalam bentuk script/base64 katanya buruk bagi index/SEO. Saya tidak bertanggung jawab atas itu semua :D

Bonus:

The "Read more" link - GSAP 'Menu' Experiment - Reactive Photo Gallery - CSS Text Reveal - Useful Broken Images - Search field animations with material icons - Diagonal stripe border effects - 100Day CSS Challenge #40 - Sea - Mobile Nav bar - Ribbon Menu - Glitch Photo Filters CSS - Image Transitions Using SVG Filters - Image Transition On Scroll (GSAP) - CSS3 trendy retro photo effect - CSS Gradient Hover Effect - photo effect - Click to Copy String Interaction - Buddons - 3D Navbar

Make Awesome Hover List Image use CSS

Tepatnya AA Koben tidak tahu, tampilan home page www.blogger.comHome Page Blogger berubah menjadi full stylish! Sepertinya telah terjadi perubahan di sana-sini dari pihak google? Ada banyak layanan embah google yang diberhentikan. Ya sudahlah, sekarang gue mau berbagi tutorial CSS bagaimana cara membuat awesome hover lists image. Jika sobat mempunyai beberapa gambar (4 image) dan ingin ditampilkan secara bersamaan di dalam satu konten, maka pelajarilah trik berikut ini :D
Mungkin dengan adanya snapshoot akan terlihat lebih cuamik :PSudah terbayangkan betapa kerennya tutorial saat ini! Ke empat gambar di bungkus menjadi satu & memiliki efek transition yg akan memanjakan mata para pelancong :"> Kalau gambarnya kuntilanak, pelancong bakalan minggat =))

.rangka-fix {
margin: -15px 0 0 -15px;
}
.rangka .rangka-dalam {
float: left;
display: inline;
text-align: left;
margin: 10px 0 0 15px;
width: 250px;
padding: 5px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #2c2c2c;
}
.rangka .rangka-dalam a {
display: block;
outline: 0;
}
.rangka .rangka-dalam:hover {
background: #1a1a1a;
}
.rangka-dalam .gambar {
position: relative;
background: #000000;
overflow: hidden;
}
.rangka-dalam .gambar img {
display: block;
width: 100%;
height: auto;
text-align: center;
}
.rangka .gambar img.gambar2, .rangka .gambar img.gambar3, .rangka .gambar img.gambar4 {
position: absolute;
width: 60px;
height: auto;
border: 1px solid #7c7c7c;
opacity: 0.7;
transition: all 0.3s;
}
.rangka .gambar img.gambar1 {
transition: all 0.3s;
}
.rangka .gambar img.gambar1:hover {
transform: scale(1.3);
}
.rangka .gambar img.gambar2:hover, .rangka .gambar img.gambar3:hover, .rangka .gambar img.gambar4:hover {
opacity: 1;
z-index: 4;
width: 100px;
height: auto;
}
.rangka .gambar img.gambar2 {
right: 5px;
bottom: 5px;
z-index: 3;
}
.rangka .gambar img.gambar3 {
right: 15px;
bottom: 15px;
z-index: 2;
}
.rangka .gambar img.gambar4 {
right: 25px;
bottom: 25px;
z-index: 1;
}
.rangka .gambar {
line-height: 135px;
}
.rangka-dalam .judul {
color: #fff;
padding: 3px;
height: 13px;
overflow: hidden;
display: block;
text-align: center;
font-size: 15px;
letter-spacing: 1px;
}

Silahkan sobat ganti/atur height, width, padding, or margin.

<div class="rangka">
<div class="rangka-fix">
<div class="rangka-dalam">
<a href="SYNTAX LINK 1" title="">
<div class="gambar">
<img class="gambar1" src="IMAGE LINK 1" alt=" " />
<a href="SYNTAX LINK 2" title="title 2"><img class="gambar2" src="IMAGE LINK 2" alt=" " /></a>
<a href="SYNTAX LINK 3" title="title 3"><img class="gambar3" src="IMAGE LINK 3" alt=" " /></a>
<a href="SYNTAX LINK 4" title="title 4"><img class="gambar4" src="IMAGE LINK 4" alt=" " /></a>
</div>
<span class="judul">Your Title Here</span>
</a>
</div>
</div>
</div>

Kalau di kasih screenshot sepertinya kurang gereget, mungkin musti ada demonya :-?
DEMO: codepen.io/beben-koben/pen/yaGbyL

Sobat bisa gantikan gambar 'n link 2, 3, dan 4 dengan gambar web jejaring untuk berbagi or terserah mau apapun! Source saya dapatkan dari salah satu website bokep :D
Be a creative ;)

Make Search Description Box With Links Share

Seperti yang sudah kita ketahui bersama, bahwasannya blog dengan platform blogspot telah disisipkan dengan kolom Search Description! Apakah itu? Tidak lain untuk menuliskan penjelasan singkat tentang post yg sedang kita buat, agar mesin penjelajah dapat mengindex hasil post kita itu dengan customize keywords secara akurat ;))
Contoh pada blog ini penampakan seperti berikut:AA Koben akan memberikan hiasan sederhana pada bagian itu dengan menanamkan 3 buah link share. Maka akan tampak spt:Sobat hanya perlu menambahkan kode CSS ke dalam template!

.wrap-bq {
margin: 0 auto;
padding: 5px 0;
max-width: 100%;
overflow: hidden;
}
.page-bq {
font-weight: 100;
line-height: 1.5;
padding: 10px 0;
position: relative;
text-align: left;
font-size: inherit;
border: solid #ccc;
border-width: 1px 0;
}
.page-bq-share {
right: 0;
bottom: 10px;
font-size: 0;
height: 21px;
overflow: hidden;
position: absolute;
}
.page-bq-share > li {
font-size: 18px;
vertical-align: top;
display: inline-block;
}
.page-bq-share > li+li {
margin-left: 11px;
}
.page-bq-share a {
color: inherit;
display: block;
}
.page-bq-share a img {
height: 20px;
width: 20px;
}
.screen-reader {
clip: rect(0 0 0 0);
display: block !important;
position: absolute;
width: auto !important;
}
.text-bq {
color: inherit;
}

Silahkan edit-edit value or tambah-tambah sesuai dengan kebutuhan...

Syntax HTML pasangkan setelah kode<div class='post-body entry'>Kalau ada dua, berarti yang ke dua! Brikut kode HTMLnya Search Description HTML Coded. Begitu saja yg bisa gue beri, bonusnya spt biasa sangat luar biasa ;)
BONUS . . .
Count Words - Count Words 📖🔍 - Random Selection Color 🌈🎲 - Split-String ✂︎ Encoder - Tinkerpad - Responsive Website Testing Tool - HTML Widget with CSS Options Panel - JOE: The JavaScript Operating Environment - PreEQual: The World's First EQCSS Pre-Processor - ProCSS: The CSS Pro-Processor - CSS Tooltips and Popovers - Custom code editor palette in pure CSS - Daily UI #010 - Social Share - show hidden text - ellipsis - Medium-style highlight menu - Pure CSS Slideshow Gallery - Strikethrough hover - mix-blend-mode demo - oxeQqo - Colourful Flower Popup Menu - Gooey Menu CSS Only - Windows - 90's emoji cursor - React Redux Todo App #1 - Dynamic Gradient Backgrounds - ES6 Random Color Text - CSS3 Paper Folding Effect - Update CSS Variables with JS - Material Buttons.css - Imperfect Buttons - Widgets - Vertical color adapting CSS menu - DailyUI026 Subscribe Popup - HEX Background Blend Modes Tester - DailyUI027 Dropdown - Text particle - Email Sentiment Widget Builder - Simple Image Overlay Hover Effects - 18 Simple Styles for Horizontal Rules (hr CSS Design) - Todo List - RSS Job board - JSON and PHP Short Tag Array Converter

Add FA Link Arrwos for a Style

Pada artikel sebelumnya AA sudah menginformasikan cara membuat link open new tab dengan varian tanda panah! Untuk melengkapi gaya/style pada trik tersebut, maka gue akan meneruskannya. Akan ada 9 buah gaya varian yang bisa sobat pakai. Ide ini saya dapatkan dari postingan FA link arrows codepen.io/ControlledChaos/pen/XmmxLg. Sangat cocok sekali bagi kalian yg sudah memakai font awesome icons! Kode link jadi masih mandiri, sehingga diperlukan kecerdasan kalian untuk memasukannya ke dalam code link yg sudah ada pada template. Intinya sobat tinggal menambahkan saja variabel code yg belum ada ;)

CSS kode link harus sudah ada varian sbb, kalau belum ada tinggal salin/tambahkan saja:

a {
  color: #333;
  text-decoration: none;
  outline: none;
}
a:after {
  display: inline-block;
  font-family: '';
  color: #1d9d74;
  transition: margin .2s;
}
a:hover:after {
  margin-left: .7em;
}
.semb:after {
  transition: all .25s;
  opacity: 0;
  margin-left: -.5em;
}
.semb:hover:after {
  opacity: 1;
  margin-left: .4em;
}

Jika sudah ada varian itu di dalam CSS kode link sobat, maka tahap selanjutnya menambahkan CSS kode ke-9 gaya!

FA arrow circle right

.fa-arrow-circle-right a:after {
  content: '\279C';
}
.fa-arrow-circle-right .roll-slide:after {
  transition: margin .25s, opacity .25s, transform .25s;
  transform: rotate(-180deg);
  opacity: 0;
  margin-left: -10px;
}
.fa-arrow-circle-right .roll-slide:hover:after {
  transition: margin .5s, opacity .25s, transform .5s;
  transform: rotate(0);
  opacity: 1;
  margin-left: .7em;
}

Syntax HTML <div class="fa-arrow-circle-right">

</div>

FA arrow right

.fa-arrow-right a:after {
  content: '\279C';
}
.fa-arrow-right .swoopIn:after {
  margin: 0;
  transform: rotate(20deg) translateX(-1.5em) translateY(-0.2em);
  opacity: 0;
}
.fa-arrow-right .swoopIn:hover:after {
  transition: opacity .25s, transform .5s;
  transform: rotate(0) translateX(0.5em) translateY(0);
  opacity: 1;
}

Syntax HTML <div class="fa-arrow-right">

</div>

FA chevron circle right

.fa-chevron-circle-right a:after {
  content: '\2794';
}
.fa-chevron-circle-right .roll-in:after {
  transition: margin .25s, opacity .25s, transform .25s;
  transform: rotate(-180deg);
  opacity: 0;
  margin-left: -10px;
}
.fa-chevron-circle-right .roll-in:hover:after {
  transition: margin .5s, opacity .25s, transform .25s;
  transform: rotate(0);
  opacity: 1;
  margin-left: .7em;
}

Syntax HTML <div class="fa-chevron-circle-right">

</div>

FA chevron right

.fa-chevron-right a:after {
  content: '\2771';
}
.fa-chevron-right .scale-bump {
  transform: translateY(1px);
}
.fa-chevron-right .scale-bump:after {
  margin: 0;
  transform: scale(0.6) translateX(0.3em) translateY(2px);
  transition: transform .25s;
}
.fa-chevron-right .scale-bump:hover:after {
  transform: scale(1) translateX(0.8em) translateY(1px);
}

Syntax HTML <div class="fa-chevron-right">

</div>

FA caret right

.fa-caret-right a:after {
  content: '\25BA';
}
.fa-caret-right .scale-up:after {
  margin: 0;
  transform: scale(0.8) translateX(0.4em);
  transition: transform .25s;
}
.fa-caret-right .scale-up:hover:after {
  transform: scale(1.6) translateX(0.4em);
}

Syntax HTML <div class="fa-caret-right">

</div>

FA long arrow right

.fa-long-arrow-right a:after {
  content: '\2799';
}
.fa-long-arrow-right .shoot-in:after {
  transition: margin 0s;
  margin-left: -10em;
  opacity: 0;
}
.fa-long-arrow-right .shoot-in:hover:after {
  transition: margin .35s, opacity .1s;
  margin-left: .5em;
  opacity: 1;
}

Syntax HTML <div class="fa-long-arrow-right">

</div>

FA share

.fa-share a:after {
  content: '\219D';
}
.fa-share .rotate-in:after {
  transform: rotate(-90deg) translateX(-1em) translateY(-1em);
  opacity: 0;
}
.fa-share .rotate-in:hover:after {
  transition: opacity .25s, transform .5s;
  transform: rotate(0) translateX(0) translateY(0);
  opacity: 1;
}

Syntax HTML <div class="fa-share">

</div>

FA paper plane

.fa-paper-plane a:after {
  content: '\21C9';
}
.fa-paper-plane .take-off:after {
  transform: rotate(30deg) skew(-15deg);
}
.fa-paper-plane .take-off:hover:after {
  margin-left: 1em;
}
.fa-paper-plane .take-off:after {
  margin: 0;
  transform: scale(2) rotate(0) skew(0) translateX(-2em) translateY(1em);
  opacity: 1;
  visibility: hidden;
}
.fa-paper-plane .take-off:hover:after {
  transform: rotate(30deg) translateX(8em) translateY(-20em);
  opacity: 0;
  visibility: visible;
  transition: transform 2s, opacity 1.8s, visibility .15s;
}

Syntax HTML <div class="fa-paper-plane">

</div>

FA Rocket

.fa-rocket a:after {
  content: '\27A1';
}
.fa-rocket .roket:after {
  margin: 0;
  transform: scale(2) translateX(-2em) translateY(1em);
  opacity: 1;
  visibility: hidden;
}
.fa-rocket .roket:hover:after {
  transform: rotate(30deg) translateX(8em) translateY(-20em);
  opacity: 0;
  visibility: visible;
  transition: transform 2s, opacity 1.8s, visibility .15s;
}

Syntax HTML <div class="fa-rocket">

</div>Perhatikan pada kode syntax HTML, masukanlah kode class="BLAH BLEH BLOH" bersamaan dengan tag post di dalam template blog sobat.
Ex:<div class="post fa-arrow-circle-right">

</div>Kalau masih bingung, pelajari lebih lanjut halaman berikut dan ada kode yg bentrok juga dengan emot :-s (lakuksan save page as) FA Link Arrows.

Happy arrow \m/

Concept How to Add List Grid Viewer for Blogger use JavaScript

Pernah melihat/mendengar tentang list/grid view? Tampilan yang bisa di rubah menjadi bentuk list ataupun grid. Untuk lebih jelasnya silahkan sobat buka halaman berikut switch list-grid view using jQuery jsfiddle.net/v57JF/embedded/result. atau make list grid view use bootstrap codepen.io/ajaypatelaj/full/zIBjJ. Gue akan berbagi tutorial, lebih tepatnya konsep bagaimana cara membuat/menanamkan kode grid/list viewer ke dalam blogger blogspot. Kode yg akan diberikan masih bersifat default, yg artinya bisa pajebret dengan kode bawaan template sobat :D Tetapi jangan khawatir, karena di sini kita akan hanya melihat bagaimana jadinya tampilan blog sobat setelah terpasang grid-list-view ;)

GRID	LIST

Jangan lupa selalu lakukan langkah backup full template!

#list-view-button {
text-align: left;
cursor: pointer;
font-size: 14px;
border-bottom: 5px solid #eaeaea;
text-decoration: none;
}
#list-view-button a {
text-decoration: none;
color: #666;
}
.grid-view-button {
background-color: #efefef;
color: #666;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
}
.list-view-button {
background-color: #efefef;
color: #000;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
}
.post-grid-view {
width: 100%;
height: 250px;
overflow: hidden;
float: left;
margin: 0 0 20px !important;
position: relative;
display: block;
-webkit-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.post-grid-view {
width: 40% !important;
height: 250px !important;
float: left;
margin: 0;
position: relative;
border-top: 0 solid transparent !important;
overflow: hidden;
}
.post-grid-view {
display: none;
}
.post-grid-view .post-body img {
min-width: 300px !important;
min-height: 250px !important;
display: block;
width: 100% !important;
height: auto !important;
max-width: 800px !important;
max-height: 400px !important;
border: none;
outline: none;
position: relative;
margin: 0;
padding: 0;
}
.post-grid-view {
opacity: 1;
background: none;
width: 58%;
font-size: 120% !important;
clear: none !important;
display: inline-block !important;
padding: 80px 0 !important;
color: #666 !important;
text-shadow: none !important;
float: right !important;
text-align: left;
position: relative !important;
}
.post-grid-view .post-body {
height: 250px;
background: #f5f5f5;
}
.post-title-grid a {
font-size: 170%;
color: #777;
}
.post-title-grid {
position: absolute;
left: 42%;
top: 5%;
z-index: 1;
}
.post-grid-view .post-footer {
left: 41%;
display: block;
position: absolute;
bottom: 2%;
font-size: 120%;
background: transparent !important;
border: 0 solid transparent !important;
font-family: &#39;
Open Sans Condensed&#39;
, sans-serif;
}
.post-grid-view .post-footer a {
color: #128EC9;
}

Cari kode berikut dengan memencet kombinasi tombol Ctrl + F<b:section class='main' id='main' showaddelement='no'>Jika tidak menemukan kode tersebut, cari yg seperti ini<b:section class='main' id='main' showaddelement='yes'>Kalau sudah ketemu, tepat diatasnya simpan kode ini

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <b:if cond='data:blog.pageType!= &quot;item&quot;'>
  <div id='list-view-button'><a class='grid-view-button' onclick='grid_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4S-emKk_DJ4ASKB_fqtb4wsCmv29-HoYzRH3ft9coqdA2Tid4McbccF-itt5zfWN9VCbzq944i9RwfpQGQ5D2NE6Et1a4DbIPQyzckvOgMOF3O8pXV7FTOUoiu-9VBDrQ89gRCn6HuDbl/s1600/search-grid-icon.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> Grid View</a> <a class='list-view-button' onclick='list_view()'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqjOZfA-ay7L3zRWDpuxWaDKuoL6HSao3a8Pt0PXnRnmuFhQI6JDWCDHqmUCwWdy5c_HvlPdeb1i9wn0nprXMwxuUyV5FfDQHeQpOisPX7IK05t6THoMokad8VH1gskwUqMODM83z_eBg/s1600/icon-list-view.png' style='margin: -8px 1px -3px -6px;width: 16px;'/> List View</a></div>
 </b:if>
</b:if>

Cari code </body> simpan JavaScript brikut

<script type='text/javascript'>//<![CDATA[
function list_view(){
if(document.getElementsByClassName("post")) {elementArray = document.getElementsByClassName("post"); while (elementArray.length) {elementArray[0].className = "post-grid-view";}}
if(document.getElementsByClassName("post-title")) {elementArray = document.getElementsByClassName("post-title"); while (elementArray.length) {elementArray[0].className = "post-title-grid";}}
}
function grid_view(){
if(document.getElementsByClassName("post-grid-view")) {elementArray = document.getElementsByClassName("post-grid-view"); while (elementArray.length) {elementArray[0].className = "post";}}
if(document.getElementsByClassName("post-title-grid")) {elementArray = document.getElementsByClassName("post-title-grid"); while (elementArray.length) {elementArray[0].className = "post-title";}}
}
//]]></script>

SAVE, done and look for the result :D
Sebenarnya script/coded pada sumber artikel dijadikan satu dengan auto read more. So bagi sobat yang kepengen mencoba tutorial create a list/grid view switcher in blogger with auto read more please visit www.bloggerwidgetgenerators.com/2015/03/list-grid-view-switcher-for-blogger.html

Customize Input Type File use CSS

Koben akan mencomot salah satu artikel semelehoy punya dari codrops tentang styling & customizing file inputs the smart way. Namun sebelum masuk ke sesi tersebut gue mau berbagi info trik mencegah blogger dari mengarahkan blog blogspot anda ke url negara² tertentu! Google telah membuat aturan baru bagi pengguna blogspot yg mana jika membuka url blog akan langsung diarahkan ke domain negara yg bersangkutan. Jika kita membuka salah satu url blog maka akan terjadi blah-bleh-bloh.blogspot.co.id kalau di inggris akan jadi blah-bleh-bloh.blogspot.co.uk dan seterusnya...

Untuk mencegah agar url blog tersayang kita tidak redirect, master Amit Agarwal telah membuat snippet JavaScript. Letakan di atas/sebelum tag </head>

<script type="text/javascript">//<![CDATA[
// Written by Amit Agarwal
/* Get the full URL of the current blogger page */

var blog = document.location.href.toLowerCase();

/* Do not redirect if the domain is .com already */
if (!blog.match(/\.blogspot\.com/)) {

/* Replace the country TLD with .com and ncr switch */
   blog = blog.replace(/\.blogspot\..*?\//, ".blogspot.com/ncr/");

/* Redirect to the new .com URL in the current tab */
   window.location.replace(blog);
}
    // Source: http://labnol.org/?p=21031
//]]></script>

SAVE...DONE.
Dengan tertanamnya java-script ini di dalam template, maka blogspot.com akan tetap adanya :)
Dari ragam komponen input salah satunya ada input type file yg mana banyak di pakai untuk melakukan aktifitas open file. Berikut contoh syntax HTML default input-type-file

Select a file:

Kita akan buat yg default itu menjadi full stylish dengan CSS karya master Osvaldas Valutis. Akan ada 7 macam gaya yg bisa kalian sikat. Mari kita mulai sesi pokok postingan sekarang ini :))

Taruh kode CSS input utama pada tempat semestinya.

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;    /* 10px 20px */
}
.inputfile:focus + label,.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}
.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}
.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;    /* 4px */
    margin-right: 0.25em;    /* 4px */
}

Kode CSS input utama ini harus ada, berikut kode-css ke-7 gaya input_type-style./* style 1 */.inputfile-1 + label {
color: #f1e5e6;
background-color: #d3394c;
}
.inputfile-1:focus + label,.inputfile-1.has-focus + label,.inputfile-1 + label:hover {
background-color: #722040;
}/* style 2 */.inputfile-2 + label {
color: #d3394c;
border: 2px solid currentColor;
}
.inputfile-2:focus + label,.inputfile-2.has-focus + label,.inputfile-2 + label:hover {
color: #722040;
}/* style 3 */.inputfile-3 + label {
color: #d3394c;
}
.inputfile-3:focus + label,.inputfile-3.has-focus + label,.inputfile-3 + label:hover {
color: #722040;
}/* style 4 */

.inputfile-4 + label {
color: #d3394c;
}
.inputfile-4:focus + label,.inputfile-4.has-focus + label,.inputfile-4 + label:hover {
color: #722040;
}
.inputfile-4 + label figure {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #d3394c;
display: block;
padding: 20px;
margin: 0 auto 10px;
}
.inputfile-4:focus + label figure,.inputfile-4.has-focus + label figure,.inputfile-4 + label:hover figure {
background-color: #722040;
}
.inputfile-4 + label svg {
width: 100%;
height: 100%;
fill: #f1e5e6;
}

/* style 5 */

.inputfile-5 + label {
color: #d3394c;
}
.inputfile-5:focus + label,.inputfile-5.has-focus + label,.inputfile-5 + label:hover {
color: #722040;
}
.inputfile-5 + label figure {
width: 100px;
height: 135px;
background-color: #d3394c;
display: block;
position: relative;
padding: 30px;
margin: 0 auto 10px;
}
.inputfile-5:focus + label figure,.inputfile-5.has-focus + label figure,.inputfile-5 + label:hover figure {
background-color: #722040;
}
.inputfile-5 + label figure::before,.inputfile-5 + label figure::after {
width: 0;
height: 0;
content: '';
position: absolute;
top: 0;
right: 0;
}
.inputfile-5 + label figure::before {
border-top: 20px solid #dfc8ca;
border-left: 20px solid transparent;
}
.inputfile-5 + label figure::after {
border-bottom: 20px solid #722040;
border-right: 20px solid transparent;
}
.inputfile-5:focus + label figure::after,.inputfile-5.has-focus + label figure::after,.inputfile-5 + label:hover figure::after {
border-bottom-color: #d3394c;
}
.inputfile-5 + label svg {
width: 100%;
height: 100%;
fill: #f1e5e6;
}

/* style 6 */

.inputfile-6 + label {
color: #d3394c;
height: 45px;
}
.inputfile-6 + label {
border: 1px solid #d3394c;
background-color: #f1e5e6;
padding: 0;
}
.inputfile-6:focus + label,.inputfile-6.has-focus + label,.inputfile-6 + label:hover {
border-color: #722040;
}
.inputfile-6 + label span,.inputfile-6 + label strong {
padding: 0.625rem 1.25rem; /* 10px 20px */
}
.inputfile-6 + label span {
width: 200px;
min-height: 2em;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
}
.inputfile-6 + label strong {
height: 100%;
color: #f1e5e6;
background-color: #d3394c;
display: inline-block;
}
.inputfile-6:focus + label strong,.inputfile-6.has-focus + label strong,.inputfile-6 + label:hover strong {
background-color: #722040;
}

Berikut syntax HTML-nya
/* style 1 */<input type="file" name="file-1[]" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple/>
<label for="file-1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>
</svg>
<span>Choose a file&hellip;</span>
</label>/* style 2 */<input type="file" name="file-2[]" id="file-2" class="inputfile inputfile-2" data-multiple-caption="{count} files selected" multiple/>
<label for="file-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>
</svg>
<span>Choose a file&hellip;</span>
</label>/* style 3 */<input type="file" name="file-3[]" id="file-3" class="inputfile inputfile-3" data-multiple-caption="{count} files selected" multiple/>
<label for="file-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>
</svg>
<span>Choose a file&hellip;</span>
</label>/* style 4 */<input type="file" name="file-4[]" id="file-4" class="inputfile inputfile-3" data-multiple-caption="{count} files selected" multiple/>
<label for="file-4">
<span>Choose a file&hellip;</span>
</label>/* style 5 */<input type="file" name="file-5[]" id="file-5" class="inputfile inputfile-4" data-multiple-caption="{count} files selected" multiple/>
<label for="file-5">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>
</svg>
</figure>
<span>Choose a file&hellip;</span>
</label>/* style 6 */<input type="file" name="file-6[]" id="file-6" class="inputfile inputfile-5" data-multiple-caption="{count} files selected" multiple/>
<label for="file-6">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>
</svg>
</figure>
<span></span>
</label>/* style 7 */<input type="file" name="file-7[]" id="file-7" class="inputfile inputfile-6" data-multiple-caption="{count} files selected" multiple/>
<label for="file-7">
<span></span>
<strong>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewbox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/>
</svg>
Choose a file&hellip;
</strong>
</label>Source: tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way

Buzz Information for Blogger by Google

Agan Koben hanya akan menyampaikan dua informasi update dari blogger dan google. Yang pertama datang dari blooger buzz tentang pembaharuan syntax XML. Sobat bisa baca di sini buzz.blogger.com/2015/05/adding-new-expressions-to-blogger.html Versi master Taufik www.dte.web.id/2015/06/pembaharuan-operator-xml-blogger-2015.html Karena saya juga belum paham, silahkan sobat blogger membaca sendiri :D Semoga dengan adanya pemutakhiran expression ini akan lebih efisien tentunya ;)
Informasi ke dua datang dari google mengenai material icons! Salah satu layanan dari google design yang memungkinkan kita untuk melakukan pemanggilan icon. Sobat mungkin lebih familiar dengan Font Awesome Icon! Tidak jauh berbeda dengan hal itu, tetapi di sini kita akan menggunakan hostingan langsung dari embah google :D Ada 750+ icon yg sudah tersedia dengan size hanya 40KB saja dengan format woff2!

AA akan coba tuntun bagaimana cara memasang material icons google. Ada 2 metode yg bisa kita pakai.

Metode 1

Cara termudah untuk mengatur ikon font untuk digunakan dalam setiap halaman web adalah melalui Google Web Font. Yang perlu Anda lakukan adalah memasukkan satu baris HTML berikut:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />Letakan yaaa kira-kira di bawah tag <head>

Metode 2

Bagi sobat yg ingin menghosting sendiri font web, bisa melakukan dengan cara ini:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

Adapun link download source nanti ada pada akhir acara! Aturan CSS render font icon adalah sbb:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Ekstra aturan untuk CSS render

// Aturan untuk ukuran ikon.
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

// Aturan untuk menggunakan ikon sebagai hitam sebagai warna latar belakang.
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

// Aturan untuk menggunakan ikon putih sebagai warna latar belakang.
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Cara penggunaan huruf ikon di HTML. Contoh sederhana...

Display	Syntax
face	<i class="material-icons">face</i>
face	<i class="material-icons UNIK-ID for CLASS">face</i>

Source:
>> www.google.com/design/icons
>> google.github.io/material-design-icons
>> github.com/google/material-design-icons
>> codeload.github.com/google/material-design-icons/zip/master
>> github.com/google/material-design-icons/blob/master/iconfont/codepoints
Bonus...
>> www.google.com/design/tool/devices

Sebenarnya memang lagi rombak besar-besaran ngikutin trend material design gitooh :D

Terima kasih :)

Circular Contextual App Menu Experiment

Jika berbicara tentang klik kanan (right click) pada mouse mungkin yang terbesit pada pikiran kita adalah tidak bisa di klik kanan ;)) Secara default pada masing-masing web browser telah disisipkan beberapa konteks menu. Misalkan pada mozilla jika sobat melakukan klik-kanan mouse di area kosong maka akan muncul: go back & go forward one page, Reload current page, Bookmark This Page, Save Page As, Select all, View Page Source, View Page Info dan Inspect Element. Konteks menu akan lain lagi jika sobat melakukan right-click pada textarea, input, link, image, iframe or etc!

Singkat cerita, bagaimana kalau perintah klik kanan pada mouse diisikan dengan context menu kreasi kita :-? Jadi kalo ada orang klik-kanan maka akan terpampang 6 menu bulet-bulet (Circular Contextual App Menu) Here original idea codepen.io/simgooder/details/BNLGXm.Seperti itu versi modifan gue bro! Pada source sumber memakai trik font-awesome. Sehingga akan sedikit berbeda pada pemanggilan script. Trick ini terintegrasi dengan jQuery script! Jadi pada template kalian harus sudah terpasang jQuery ;)

.circle-container {
position: relative;
width: 10em;
height: 10em;
padding: 0;
border-radius: 50%;
list-style: none;
-webkit-animation: 0.2s spin linear;
animation: 0.2s spin linear;
margin: 5em auto 0;
position: absolute;
display: none;
}
.circle-container > * {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin: -2em;
}
.circle-container > *:nth-of-type(1) {
-webkit-transform: rotate(0deg) translate(5em) rotate(0deg);
-ms-transform: rotate(0deg) translate(5em) rotate(0deg);
transform: rotate(0deg) translate(5em) rotate(0deg);
}
.circle-container > *:nth-of-type(2) {
-webkit-transform: rotate(60deg) translate(5em) rotate(-60deg);
-ms-transform: rotate(60deg) translate(5em) rotate(-60deg);
transform: rotate(60deg) translate(5em) rotate(-60deg);
}
.circle-container > *:nth-of-type(3) {
-webkit-transform: rotate(120deg) translate(5em) rotate(-120deg);
-ms-transform: rotate(120deg) translate(5em) rotate(-120deg);
transform: rotate(120deg) translate(5em) rotate(-120deg);
}
.circle-container > *:nth-of-type(4) {
-webkit-transform: rotate(180deg) translate(5em) rotate(-180deg);
-ms-transform: rotate(180deg) translate(5em) rotate(-180deg);
transform: rotate(180deg) translate(5em) rotate(-180deg);
}
.circle-container > *:nth-of-type(5) {
-webkit-transform: rotate(240deg) translate(5em) rotate(-240deg);
-ms-transform: rotate(240deg) translate(5em) rotate(-240deg);
transform: rotate(240deg) translate(5em) rotate(-240deg);
}
.circle-container > *:nth-of-type(6) {
-webkit-transform: rotate(300deg) translate(5em) rotate(-300deg);
-ms-transform: rotate(300deg) translate(5em) rotate(-300deg);
transform: rotate(300deg) translate(5em) rotate(-300deg);
}
.circle-container li > * {
display: block;
max-width: 100%;
border-radius: 50%;
-webkit-transition: .15s;
transition: .15s;
padding: 2em 0;
line-height: 1;
}
.circle-container li {
border: solid 5px #333;
border-radius: 50%;
box-shadow: 0px 3px 6px #333;
}
.home {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5b48p0RNt7ukHmPykVS49omPG6Sqqj6MCNaIus7DmoeM7DESwuSf5UNdgZK99f2XmDlpktmidI4IW4-ULLuKH_m8sD6666ryKQLi34SFdrlc4CUdkWvXwbXTURi2MBIGDixzjOOp85pw/s32/) no-repeat center center;
}
.close {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh23xYnz5FkwLQXWjCsp1l8Mtq9M-mJLBRZyBnnH88n59NyZ10q7RVjL1PqEuCmlBSl8ac54YIw-vnv9f9Mj-RldJfs73F-rLKeSokEak0noYO89adLetjUUlgouqnGyyVDWs3oOKkzegJ5/s32/) no-repeat center center;
}
.menu-1 {
background: #f90 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpgAlF4DRkDAKS4JBN32mMI10bugQ5BBPF7lCIpdWUe-YIB2ZbZ2n-apB5R0mIJFxRZxquI8yUt9iQfP3MmB3ZK9tVorkG5twnenwdk5cCIK7tdUcKxoTPIZ6vaHde5jrh8KezCFugTPc/s32/) no-repeat center center;
}
.menu-2 {
background: #06f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCivGTKQqNqG9n-2UXyWh78a9rxOgPituPrFuNzBzJj_spRDPc46QnTKjZby0OBvw3l39oGUqH2pBgO8Gf7ctoZTMqLpCtIMEV4LGZBW2GRvsFj7XlXxhB15bGEIpcFi3IkihsgIY2AAXO/s32/) no-repeat center center;
}
.menu-3 {
background: #09f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwcyB-TQoHTPjJN-DYQ6FYT1qmHkjVDSHerb-JQdm3-xtxRZZQlqHMxyDdn4w_atuWILRE3RK8JlSAfTSOa8aJ8RhrMpstHlS9mVYOgdv5guz7hy6yjiO6nRlOouXbtpcYIn9-B7Yyr5fe/s32/) no-repeat center center;
}
.menu-4 {
background: #f00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivB_Z0p3Vt-NabPSgDCZNO93KdOSR6rsp8_Q2Mkyvac-xmbFnK3344GWIOrRB1lpbwcnugQXOvtHxGBYmrRws9MdE3k7K64xZfD8HvypzsfA6dgoOVtnadODzfVxrhKmla8s9MPhpx3qQ/s32/) no-repeat center center;
}
.menu-5 {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOmpEbhVHXcJJfh1Ih7ccI0ylw70bOEqK0Oc5FcQWQrPDUzJ50jmQDSWCYAJ1U7xE8IKJeetEIoqj2EU6JA1-I8eysqsjpb__tkkuh7h-X5XjZq0X6GwUTDNCZVQG6gneCQX2aKiIVBGnY/s32/) no-repeat center center;
}
.hide {
-webkit-animation: 0.2s spinout linear !important;
animation: 0.2s spinout linear !important;
}
@-webkit-keyframes spin {
0% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
30% {
opacity: 0;
}
}
@keyframes spin {
0% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
30% {
opacity: 0;
}
}
@-webkit-keyframes spinout {
0% {
opacity: 1;
}
70% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
}
@keyframes spinout {
0% {
opacity: 1;
}
70% {
opacity: 0;
-webkit-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
}
}

Jika mau mengganti gambar, gantilah dengan yang memiliki resolusi 32 x 32 pixel.

<script type='text/javascript'>
//<![CDATA[
 $(document).bind("contextmenu", function(event) {
       event.preventDefault();
       var circle = "<ul class='circle-container' style='display:block;'><li class='home'><a href='' target='top'></a></li><li class='menu-1'><a href=''></a></li><li class='menu-2'><a href=''></a></li><li class='menu-3'><a href=''></a></li><li class='menu-4'><a href=''></a></li><li class='menu-5'><a href=''></a></li><li class='close'><a href=''></a></li></ul>";
$(circle)
 .appendTo("body")
 .css({top: event.pageY-160 + "px", left: event.pageX-80 + "px"});
});
$('.circle-container').get(0).click();
//Better solution - Button Specific
$(document).mousedown(function(e){
 if( e.which==1 ) {
  $(".circle-container").toggleClass("hide");
  setTimeout(function(){
       $(".circle-container").hide();
    },100);
 }
});
//]]>
</script>

Isikan alamat link pada syntax <a href=''></a> Sobat bisa tambah variasi target='top' Ingat koma atas satu pakainya jangan yg koma atas dua "" Script di atas sudah ditambahkan sedikit, gak tau bener atau salahnya, tetapi berjalan :D Soalnya kalau pakai dari sumber, pas menanamkan syntax link tidak jalan!!!
Ternyata Circular Contextual App Menu masih sebuah konsep yg perlu pengembangan bro. Karena saya tidak bisa jQuery, silahkan bagi sobat yg mau berbagi ilmunya tolong di fix itu script jQuery di atas :)

Hmmm....:-<

Eyes Saver, Make Your Screen Cool

Pada dasarnya trik ini memiliki fungsi hampir sama dengan tutorial membuat screensaver untuk blog. Jika pada trick screensaver mempunyai tujuan yakni menyembunyikan konten dan digantikan dengan tampilan lain, kesempatan sekarang AA Beben akan mencoba bagaimana cara membuat Eyes Saver! Eyes-saver adalah secuil deretan kode CSS untuk menampilkan efek redup-redup (rgba) supaya ketika menemukan web/blog dengan tampilan warna yang kontras mata kita akan terbantu terlindungi dengan mengaktifkan fitur eyes saver :D
Ilustrasi on sekrin siut:Dalam kasus ini, penanaman kode rgba(0,0,0,0.3); sebagai warna background akan membantu berfungsi sebagai filter kontras cahaya yg berlebihan (mencolok)! Singkat cerita, gue mau kasih tau bagaimana cara membuat layar monitor anda sekalian menjadi rgba(0,0,0,0.3) :))

.container_ {
transition: transform 0.5s;
backface-visibility: hidden;
}
.eyesSaver-Overlay {
display: none;
background: rgba(0,0,0,0.3);
}
.eyesSaver-Overlay,.eyesSaver-Overlay a {
position: fixed;
z-index: 99;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.button {
display: block;
float: right;
background: #fff;
padding: 5px 10px;
border-radius: 50%;
font-size: 1.3em;
transition: all 0.3s linear;
}
.button:before {
content: '\2600';
}
.button:hover {
box-shadow: 0 13px 25px 0 rgba(0,0,0,0.3);
}
nav:target ~ .container_ .eyesSaver-Overlay {
display: block;
}
.nav1 {
bottom: 5%;
right: 4%;
position: fixed;
}

Tempatkan syntax HTML di dalam tag <body> sebelum tag </body> template.<nav id="slideLeft"></nav>
<div class="container_">
<div class="eyesSaver-Overlay"><a href="#"></a></div>
<div class="nav1">
<a href="#slideLeft" class="button"></a>
</div>
</div>DEMO
Bye :-h

Shortcode Plugin Blogger for Write Syntax with Easy

Pada tanggal 4/03/2015 master Mohammad beserta STCnetwork team telah membuat Blogger Shortcode Plugin. Blogger short code plugin adalah sebuah sistem yang akan membuat web/blog design dan penciptaan widget dengan hanya menggunakan script plugin (a macrocode)! Adapun fitur yg ditawarkan yaitu agar kita dapat menyisipkan video, audio, photo gallery, tabs, accordions etc. Fitur tersebut dapat langsung berfungsi pada post area, widgets, side-bar, kolom komentar dan dimana lagi juga bisa (still on work)? Dengan begini proses Embedding Objek di Blogger tidak pernah semudah sebelumnya.

Blogger shortcode adalah satu baris macrocode yang berisi satu set instruksi yang memungkinkan kita melakukan hal-hal yang bagus dengan upaya minimalis. Shortcode dapat membantu menanamkan file atau membuat objek di BlogSpot blog dengan satu baris kode yang biasanya akan memerlukan banyak kerja kompleks, kode panjang and jelek :P

Sekarang anda dapat dengan mudah memasukkan benda seperti Video, Audio, File, slideshow dan semua elemen web penting seperti akordion, tab, tombol warna-warni, kotak dll ke dalam Header, Sidebar, Footer, Pos, Pages, Judul dan luar biasa bahkan di dalam komentar! Hal ini tidak memerlukan pengetahuan tentang HTML, CSS atau JavaScript. Plugin ini sangat ringan dan multiple-embed-support yg akan mengurangi waktu loading halaman beban sebesar 50%.
Singkat cerita inspirasi datang hampir sama dengan kepunyaan shortcode wordpress!

List of Supported Shortcodes

Sejauh ini telah dikembangkan sekitar 10 shortcode dan rencana ke depan untuk dikembangkan lagi sekitar 50 shortcode insya Allah dalam bulan-bulan ini. Shortcode akan dibuat berdasarkan kepentingan dan kegunaan mereka.
Berikut ini adalah shortcode yg sudah dikembangkan sejauh ini.

Shortcode	Definisi
[accordion]	Membuat daftar item secara vertikal ditumpuk yg mana setiap item dapat "memperluas" atau "ditarik" untuk mengungkapkan isi yang berhubungan dengan item. Item dapat diaktifkan dan dinonaktifkan dengan mudah.
[tab]	Widget tab memungkinkan beberapa dokumen atau panel yang akan terkandung dalam satu jendela, menggunakan tab sebagai widget navigasi untuk beralih antara set dokumen.
[code]	Menampilkan syntax Highlighter yang mempertahankan format asli dari kode sumber.
[quote]	Membuat blockquote yg fullstylish.
[button]	Menyisipkan tombol CSS3 berwarna-warni.
[icon]	Masukan ikon FontAwesome di mana saja dengan dukungan pilihan kustom.
[soundcloud]	Memasukkan embeds soundCloud track.
[dailymotion]	Memasukkan embeds video dailymotion.
[divider]	Menyisipkan horizontal separator untuk membagi bagian, juga mengandung tombol Back To Top
[num]	Menyisipkan a number enclosed inside a circular background.
[warning]	Menyisipkan kotak warning message.
[success]	Menyisipkan kotak sukses message.
[alert]	Menyisipkan kotak alert message.
[info]	Menyisipkan kotak dengan beberapa info message.
[update]	Menyisipkan kotak dengan update status message.
more on!	it's way . . .

Langkah-langkah Instalasi

Ikuti langkah-langkah berikut untuk menginstal Shortcode Plugin ke dalam template blogger kalian.

1. Go To Blogger > Template > Backup Download full template kalian!
2. Click Edit HTML
3. Press Ctrl + F, search </body>
4. Paste file dynamically updated JS tepat diatasnya.
<!-- Blogger Shortcode Plugin Dynamic JS File --> <script src='http://downloads.mybloggertricks.com/shortcodes.js' type='text/javascript'></script>
5. Kemudian search <head>
6. Pastekan file CSS berikut tepat di bawahnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> <link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Perhatikan bahwa dalam kode di atas telah menyertakan versi terbaru dari jQuery dan FontAwesome. Saya menyarankan agar menggunakan versi ini bukan versi lama, dan mungkin sobat sudah menggunakannya.
7. Save & done.

Gunakan Shortcode Plugin Dynamic JS file bawaan, karena file shortcodes.js akan selalu diperbaharui.

Shortcode Syntax

Shortcode memiliki nama dan attributes. Attributes adalah pilihan yang membantu mengkonfigurasi objek. Shortcode dilambangkan dengan tanda kurung persegi [ Square brackets ]. Square brackets dibuka & ditutup seperti HTML tetapi dengan format yg lebih sederhana (mirip dengan markdown)
Ex:
Misalkan sobat ingin memasukan embed video dari dailymotion ke dalam postingan![dailymotion src="x2lhjki"][/dailymotion]
lebih sederhana
[dailymotion src="x2lhjki" /]
Sekarang jika sobat ingin mengubah warna tombol pemutar, menyembunyikan informasi player dan mengedit dimensi player, maka kita dapat memasukkan atribut dengan syntax seperti dibawah ini[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0"][/dailymotion]
lebih sederhana
[dailymotion src="x2lhjki" width="100%" background="0080ff" height="100" info="0" /]Penulisan syntax diatas hanya contoh saja, rincian lengkap tentang cara menggunakan/menuliskan syntax shortcode-plugin akan dibagi dalam tutorial mendatang (UPDATED)

>> jQuery Accordion Shortcode For Blogger!
www.mybloggertricks.com/2015/04/blogger-shortcode-for-jquery-accordion.html
>> jQuery "Tabs Shortcode" For Blogger!
www.mybloggertricks.com/2015/04/create-tabs-in-blogger.html
>> Dailymotion Shortcode For Blogger!
www.mybloggertricks.com/2015/04/dailymotion-shortcode-for-blogger.html
>> SoundCloud Shortcode For Blogger!
www.mybloggertricks.com/2015/04/add-SoundCloud-Player-in-Blogger.html
>> Facebook Page Plugin Shortcode For Blogger
www.mybloggertricks.com/2015/04/add-facebook-page-plugin-in-Blogger.html
>> Create CSS3 Notification Boxes in Blogger
www.mybloggertricks.com/2015/04/message-box-shortcodes-for-blogger.html
>> YouTube Shortcode For Blogger Blogs!
www.mybloggertricks.com/2015/04/create-a-YouTube-Shortcode-in-Blogger.html
>> Syntax Highlighter Shortcode For Blogger Blogs!
www.mybloggertricks.com/2015/04/SyntaxHighlighter-Shortcode-for-Blogspot.html
>> Buttons Shortcode - Create CSS3 Buttons in Blogger!
www.mybloggertricks.com/2015/05/button-shortcode-for-blogger.html
>> Image Shortcode - Embed Images in Blogger Comments!
www.mybloggertricks.com/2015/05/insert-image-shortcode-in-blogger.html
>> Create Shortcode For CSS3 Tooltip in Blogger!
www.mybloggertricks.com/2015/05/create-shortcode-for-css3-tooltips.html
>> Create Shortcode For Responsive HTML Tables!
www.mybloggertricks.com/2015/05/HTML-Table-Shortcodes.html
>> Horizontal Divider Line With Back-To-Top Button
www.mybloggertricks.com/2015/06/CSS3-Divider-shortcode.html
>> Font Awesome Shortcodes Add Icons Easily
www.mybloggertricks.com/2016/01/font-awesome-shortcodes.html

Syntax Errors

Hindari membuat kesalahan-kesalahan ini saat mengetik nama shortcode dan attributes:

• Jangan gunakan CamelCase atau UPPER-CASE untuk nama atribut atau nama Shortcode. Gunakan hanya huruf kecil.
• Jangan menambahkan spasi di antara nama shortcode dan tanda kurung persegi.
• Macro shortcode dapat menggunakan tanda kutip tunggal (') atau tanda kutip ganda (") untuk nilai atribut, atau menghilangkan tanda kutip sepenuhnya jika nilai atribut tidak mengandung spasi.
[table col='123' row=456] sama dengan [table col="123" row="456"]
• Sebuah ruang (spasi) diperlukan antara nama shortcode dan atribut shortcode. Bila lebih dari satu atribut yang digunakan, setiap atribut harus dipisahkan oleh setidaknya satu spasi.
• Shortcode parser tidak menerima tanda kurung persegi dalam atribut.
[tag attribute="[Some value]"]

Links source:
www.mybloggertricks.com
ask.mybloggertricks.com/t/which-blogger-shortcode-would-you-like-us-to-create/1684
Need Quick Help within 24 Hours? ask.mybloggertricks.com