Firman Webs

Home All post with category CSS

Kombinasi CSS Button Flat UI Dengan Font Awesome

Saturday, 22 February 2014

Kombinasi CSS Button Flat UI Dengan Font Awesome – tutorial ini sekaligus untuk menjawab salah satu pertanyaan dari brother <a href="http://mas-andes.blogspot.com/2014/02/jquery-fadein-fadeout-page-load-blog.html?showComment=1392106487229#c8775829991683631331" target="_blank">Tenri Baso</a> yang menanyakan di artikel sebelumnya, karena pada artikel tersebut tidak sesuai tema konten yang dibahas jadi alangkah baiknya jika saya jawab pada artikel ini. Dengan adanya font awesome saya rasa sangat memudahkan untuk keperluan berbagai hal dan tanpa perlu adanya penggunaan gambar sehingga sangat efektif penggunaannya. Beberapa waktu lalu pernah saya bagikan tutorial untuk <a href="http://mas-andes.blogspot.com/2013/10/membuat-tombol-share-di-bawah-posting-blog.html" target="_blank" title="membuat tombol share dibawah posting blog">membuat tombol share dibawah posting blog</a>, apabila ingin menggantinya dengan kombinasi font awesome seperti yang saya gunakan pada blog ini langkah-langkah penerapannya masih sama seperti pada tutorial sebelumnya. Namun pastikan terlebih dahulu sudah terpasang font awesome didalam template sebelum mengikuti langkah-langkah di bawah. Apabila belum pernah memasang bisa melihat di tutorial sebelumnya tentang <a href="http://mas-andes.blogspot.com/2013/12/list-icon-font-awesome-dan-css-value.html" target="_blank" title="cara memasang dan menggunakan font awesome">cara memasang dan menggunakan font awesome</a>, disitu juga terdapat list icon font awesome yang bisa dijadikan panduan untuk melihat nama icon. Apabila sudah terpasang bisa dilanjutkan dengan tutorial dibawah ini untuk memodifikasi button dengan kombinasi font awesome. <h2>CSS Social Share Button</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3TMl86S63FXHRDBkpw7jRFJvSWLHSiMMMF3r2DeIwcaMVHks9u4YI9Rm6ShkISdZ4i4G-T5tLJV38lBrPn9ggTezLf4X-pLQPZn3qYSzeBJJTBVIB0EPMp5JJN5hHPqyDck1gxcGk2Zg/s1600/social-share-button-flat-ui.gif" class="center" ><img alt="CSS Social Share Button" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3TMl86S63FXHRDBkpw7jRFJvSWLHSiMMMF3r2DeIwcaMVHks9u4YI9Rm6ShkISdZ4i4G-T5tLJV38lBrPn9ggTezLf4X-pLQPZn3qYSzeBJJTBVIB0EPMp5JJN5hHPqyDck1gxcGk2Zg/s1600/social-share-button-flat-ui.gif" title="CSS Social Share Button"/></a>Button yang pertama adalah untuk widget social share. Karena sudah ada dibawah posting blog ini jadi saya rasa tidak perlu lagi untuk membuat demo, bisa dilihat langsung di akhir artikel. Berikut cara memasang widget social share dengan kombinasi font awesome. Untuk kode CSS seperti biasa, taruh di atas kode <code>]]></b:skin></code> atau <code></style></code> <pre data-codetype="CSS"> #button-share{background:#34495e;color:#fff;line-height:40px;padding-left:60px} #button-share h4{font-size:18px;line-height:40px;margin:0;text-transform:uppercase;display:inline} #button-share h4 span{background:#2c3e50} #button-share a{position:relative;font:normal 16px/20px 'Yanone Kaffeesatz',sans-serif;color:#fff;text-transform:uppercase;padding:7px 10px 7px 50px;box-shadow:1px 1px 1px #222} #button-share a:hover{background:#222}#button-share a:hover span{color:#222} #button-share a span{line-height:20px;width:40px;padding:6px 0;top:0} #button-share a span.fb{background:#2884f6}.fb{background:#1e90ff} #button-share a span.tw{background:#45B0E3}.tw{background:#00bfff} #button-share a span.gp{background:#e00}.gp{background:#f83124} #button-share a span.me{background:#f39c12}.me{background:#f1c40f} </pre>Sedangkan kode HTML bisa taruh di bawah kode <code><data:post.body/></code> atau bisa juga <code><div class='post-footer'></code> sesuaikan template masing-masing saja, Selanjutnya simpan template. <pre data-codetype="HTML"> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='button-share'> <h4> Share artikel ke :</h4> <a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'> Facebook</a> <a class='tw' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'> Twitter</a> <a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'> Google+</a> <script> //<![CDATA[ var uri = window.location.href; var ttle = document.title; document.write("<a class='me' href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' title='Share ke Lintasme' rel='nofollow'> Lintasme</a>"); //]]> </script> </div> </b:if> </pre><h2>CSS Like Button Count (Efek Sliding)</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoU-PwmlL2q-8JnLFS5gj5aVwRfdnLcIBth5ZAeylGh8n42KJSq9oHy-HWln04vdZJo0Xla1NI_ZMBBv7evBDTWH984pGS_t9bRhRa9ZmjzXrmG-oVljEO-tRAgUCFfXL393gcwFt2cbo/s1600/flat+ui+like+count+button.gif" class="center" ><img alt="CSS Like Button Count (Efek Sliding)" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoU-PwmlL2q-8JnLFS5gj5aVwRfdnLcIBth5ZAeylGh8n42KJSq9oHy-HWln04vdZJo0Xla1NI_ZMBBv7evBDTWH984pGS_t9bRhRa9ZmjzXrmG-oVljEO-tRAgUCFfXL393gcwFt2cbo/s1600/flat+ui+like+count+button.gif" title="CSS Like Button Count (Efek Sliding)" width="600"/></a>Tombol like button biasanya terpasang dibawah post artikel yang digunakan untuk menampilkan banyaknya jumlah pengunjung yang menyukai artikel tersebut baik itu melalui button like Facebook, Google Plus maupun Twitter. Untuk membuat tampilan button like count agar lebih menarik dapat menggunakan CSS untuk mengatur tampilan dari widget ini. Penerapannya sama seperti pada tombol social share di atas. <pre data-codetype="CSS"> #button-count{width:100%;overflow:hidden;background:#34495E;margin:10px 0;padding:3px} #button-count span{float:left;position:relative;font-size:16px;color:#fff;margin:12px 10px 12px 5px} .button{background:#DCE0E0;position:relative;display:block;float:left;height:40px;overflow:hidden;width:156px;margin:4px} .ikons{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;text-align:center} .ikons i{color:#fff;line-height:42px} .slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:118px;margin:0} .slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0} .button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out} .facebook .fb_iframe_widget{display:block;position:absolute;right:5px;top:0;z-index:1} .twitter iframe{left:50px;top:10px;z-index:1;display:block;position:absolute} .google #___plusone_0{width:90px!important;top:10px;right:5px;position:absolute;display:block;z-index:1} .facebook .ikons,.facebook .slide{background:#305c99} .twitter .ikons,.twitter .slide{background:#00cdff} .google .ikons,.google .slide{background:#d24228} .facebook:hover .slide,.twitter:hover .slide,.google:hover .slide{left:180px} </pre> <pre data-codetype="HTML"> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='button-count'> BAGIKAN: <div class='facebook button'> <div class='slide'> Like </div> <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/> </div> <div class='google button'> <div class='slide'> +1 </div>  <div class='g-plusone' data-size='medium'/>  <script src='https://apis.google.com/js/platform.js' type='text/javascript'> {lang: &#39;id&#39;} </script> </div> <div class='twitter button'> <div class='slide'> Tweet </div> <a class='twitter-share-button' data-count='horizontal' href='https://twitter.com/share'>Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script> </div> </div> </b:if> </pre><h2>CSS Post Button</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnzmm_QJiBjWa8jxCAe5HBd-d4EGBTzIIh2fshXrJBCR6lesNtDGePO7YmzodQMNdcTe-zBNf7QsMAmg0bD1Y5quEEsMi5MthoUjhBudNY8EE4KPPCsqLtheFhJZAszr1cI2ErZUR-Dvg/s1600/css-button-flat-ui.gif" class="center" ><img alt="CSS Button Flat UI" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnzmm_QJiBjWa8jxCAe5HBd-d4EGBTzIIh2fshXrJBCR6lesNtDGePO7YmzodQMNdcTe-zBNf7QsMAmg0bD1Y5quEEsMi5MthoUjhBudNY8EE4KPPCsqLtheFhJZAszr1cI2ErZUR-Dvg/s1600/css-button-flat-ui.gif" title="CSS Button Flat UI"/></a>Button yang ini adalah button yang saya gunakan pada area posting, untuk membuat tombol demo, dll. Penerapannya ke dalam blog, taruh kode CSS seperti langkah di atas. Sedangkan untuk HTML, taruh kedalam post area mode HTML. <pre data-codetype="CSS"> .bton-grup{width:500px;text-align:center;margin:5px auto} .bton{display:inline-block;height:50px;line-height:50px;padding-right:20px;padding-left:70px;position:relative;background:#1abc9c;color:#fff;font-size:22px;font-family:'Yanone Kaffeesatz',sans-serif;text-transform:uppercase;letter-spacing:1px;margin:5px;border-radius:1px;text-shadow:0 1px 0 rgba(0,0,0,0.5);box-shadow:0 2px 2px rgba(0,0,0,0.2)} .bton span{text-align: center;position:absolute;left:0;width:50px;background:rgba(0,0,0,0.5);border-top-left-radius:1px;border-bottom-left-radius:1px;border-right:1px solid rgba(0,0,0,0.15)} .bton:hover span{background:#222;border-right:1px solid rgba(0,0,0,0.3)} .bton.orange{background:#FF7F00} .bton.purple{background:#8e44ad} .bton.blue{background:#297fb8} .bton.red{background:#e74c3c} </pre> <pre data-codetype="HTML"> <div class='bton-grup'> <a href='http://mas-andes.blogspot.com' class='bton'>Example</a> <a href='http://mas-andes.blogspot.com' class='bton orange'>Example</a> <a href='http://mas-andes.blogspot.com' class='bton purple'>Example</a> <a href='http://mas-andes.blogspot.com' class='bton blue'>Example</a> <a href='http://mas-andes.blogspot.com' class='bton red'>Example</a> </div> </pre>Demikianlah cara mengcustom button agar sedikit lebih menarik dan selanjutnya silahkan bisa di kreasikan sendiri di blog masing-masing.

Kombinasi CSS Button Flat UI Dengan Font Awesome – tutorial ini sekaligus untuk menjawab salah satu …

Modifikasi Efek Hover Pada Button Dengan CSS3

Thursday, 6 February 2014

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzpKRzINpTWg34x_2PVmZLl__deUeI0tgaXkblEJBQtYSjN1euV1TTG-0Gn0HIBnEsHCFj-2a-UD-eYAHxoMw-0aCcguNPNObRVvE5e013B8GRJJFFEpJIrJa21a7PgCBh8fEGmCK8IGY/s1600/button-CSS3.gif" class="center" ><img alt="Modifikasi Efek Hover Pada Button Dengan CSS3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzpKRzINpTWg34x_2PVmZLl__deUeI0tgaXkblEJBQtYSjN1euV1TTG-0Gn0HIBnEsHCFj-2a-UD-eYAHxoMw-0aCcguNPNObRVvE5e013B8GRJJFFEpJIrJa21a7PgCBh8fEGmCK8IGY/s1600/button-CSS3.gif" title="Modifikasi Efek Hover Pada Button Dengan CSS3"/></a>Modifikasi Efek Hover Pada Button Dengan CSS3 – setelah beberapa waktu lalu berturut-turut membahas tentang efek jQuery sekarang beralih ke CSS untuk memodifikasi button dengan bermacam efek hover. Apabila mengeposkan artikel dan ingin membuat button saat hover dengan berbagai efek agar lebih mudah dengan menambahkan attribut class dan rel dari efek yang akan di gunakan. Beberapa efek yang dapat digunakan adalah 25 efek menggunakan CSS transform, 6 efek border transitions, 6 efek shadow dan glow transition serta 8 efek speech bubbles dan 4 efek curls. Untuk dapat menerapkan seluruh efek tersebut agar dapat digunakan didalam blog langkah pertama pasang kode berikut ini kedalam template blog dan taruh di atas kode <code></head></code>. <pre><link rel='stylesheet' href='https://mas-andes.googlecode.com/svn/trunk/hover-min.css' media='all'/></pre>Kemudian simpan template. <div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/button.html" target="_blank" rel="nofollow">DEMO</a></div>Untuk menentukan masing-masing efek yang akan di gunakan, kode pemanggilannya seperti dibawah ini: <h2> 2D Transforms</h2><pre data-codetype="HTML"> <a rel='grow' class='button grow'>Grow</a> <a rel='shrink' class='button shrink'>Shrink</a> <a rel='pulse' class='button pulse'>Pulse</a> <a rel='pulse-grow' class='button pulse-grow'>Pulse Grow</a> <a rel='pulse-shrink' class='button pulse-shrink'>Pulse Shrink</a> <a rel='push' class='button push'>Push</a> <a rel='pop' class='button pop'>Pop</a> <a rel='rotate' class='button rotate'>Rotate</a> <a rel='grow-rotate' class='button grow-rotate'>Grow Rotate</a> <a rel='float' class='button float'>Float</a> <a rel='sink' class='button sink'>Sink</a> <a rel='hover' class='button hover'>Hover</a> <a rel='hang' class='button hang'>Hang</a> <a rel='skew' class='button skew'>Skew</a> <a rel='skew-forward' class='button skew-forward'>Skew Forward</a> <a rel='skew-backward' class='button skew-backward'>Skew Backward</a> <a rel='wobble-horizontal' class='button wobble-horizontal'>Wobble Horizontal</a> <a rel='wobble-vertical' class='button wobble-vertical'>Wobble Vertical</a> <a rel='wobble-to-bottom-right' class='button wobble-to-bottom-right'>Wobble To Bottom Right</a> <a rel='wobble-to-top-right' class='button wobble-to-top-right'>Wobble To Top Right</a> <a rel='wobble-top' class='button wobble-top'>Wobble Top</a> <a rel='wobble-bottom' class='button wobble-bottom'>Wobble Bottom</a> <a rel='wobble-skew' class='button wobble-skew'>Wobble Skew</a> <a rel='buzz' class='button buzz'>Buzz</a> <a rel='buzz-out' class='button buzz-out'>Buzz Out</a> </pre><h2> Border Transitions</h2><pre data-codetype="HTML"> <a rel='border-fade' class='button red border-fade'>Border Fade</a> <a rel='hollow' class='button red hollow'>Hollow</a> <a rel='trim' class='button red trim'>Trim</a> <a rel='outline-outward' class='button red outline-outward'>Outline Outward</a> <a rel='outline-inward' class='button red outline-inward'>Outline Inward</a> <a rel='round-corners' class='button red round-corners'>Round Corners</a> </pre><h2> Shadow and Glow Transitions</h2><pre data-codetype="HTML"> <a rel='glow' class='button turqoise glow'>Glow</a> <a rel='box-shadow-outset' class='button turqoise box-shadow-outset'>Box Shadow Outset</a> <a rel='box-shadow-inset' class='button turqoise box-shadow-inset'>Box Shadow Inset</a> <a rel='float-shadow' class='button turqoise float-shadow'>Float Shadow</a> <a rel='hover-shadow' class='button turqoise hover-shadow'>Hover Shadow</a> <a rel='shadow-radial' class='button turqoise shadow-radial'>Shadow Radial</a> </pre><h2> Speech Bubbles</h2><pre data-codetype="HTML"> <a rel='bubble-top' class='button orange bubble-top'>Bubble Top</a> <a rel='bubble-right' class='button orange bubble-right'>Bubble Right</a> <a rel='bubble-bottom' class='button orange bubble-bottom'>Bubble Bottom</a> <a rel='bubble-left' class='button orange bubble-left'>Bubble Left</a> <a rel='bubble-float-top' class='button orange bubble-float-top'>Bubble Float Top</a> <a rel='bubble-float-right' class='button orange bubble-float-right'>Bubble Float Right</a> <a rel='bubble-float-bottom' class='button orange bubble-float-bottom'>Bubble Float Bottom</a> <a rel='bubble-float-left' class='button orange bubble-float-left'>Bubble Float Left</a> </pre><h2> Curls</h2><pre data-codetype="HTML"> <a rel='curl-top-left' class='button purple curl-top-left'>Curl Top Left</a> <a rel='curl-top-right' class='button purple curl-top-right'>Curl Top Right</a> <a rel='curl-bottom-right' class='button purple curl-bottom-right'>Curl Bottom Right</a> <a rel='curl-bottom-left' class='button purple curl-bottom-left'>Curl Bottom Left</a> </pre>Demikian untuk cara Modifikasi Efek Hover Pada Button Dengan CSS3 agar setiap button dapat memiliki efek hover yang berbeda-beda.

Modifikasi Efek Hover Pada Button Dengan CSS3 – setelah beberapa waktu lalu berturut-turut membahas …

Penggunaan Jenis Efek jQuery Modal Dialog

Tuesday, 28 January 2014

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0HaAXJpdFKGMyhhveONiTKYqCls7uEEV0mqD4OBGEwM9rMoZezkgZJWZMv8CcE6bFuInWGJEn_R-dOZpvKRk68XomAFBn_kpXo3kb0-UnR0wmSHjIOjQhdKxkV7rYu1awDAPf0UGkhT4/s1600/modal-dialog.gif"><img alt="Penggunaan Jenis Efek jQuery Modal Dialog" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0HaAXJpdFKGMyhhveONiTKYqCls7uEEV0mqD4OBGEwM9rMoZezkgZJWZMv8CcE6bFuInWGJEn_R-dOZpvKRk68XomAFBn_kpXo3kb0-UnR0wmSHjIOjQhdKxkV7rYu1awDAPf0UGkhT4/s1600/modal-dialog.gif" title="Penggunaan Jenis Efek jQuery Modal Dialog" width="580" /></a>Penggunaan Jenis Efek jQuery Modal Dialog - Ada banyak cara untuk menampilkan lightbox overlay dengan bermacam efek. Seperti yang sedang ngetrend saat ini adalah pengggunaan style lightbox untuk menampilkan efek pada widget dengan beberapa cara modern yang salah satunya mereka gunakan adalah menggunakan CSS transisi dan animasi untuk membuat efek pada kotak dialog saat muncul. Dalam desain user interface, modal dialog dikenal sebagai jendela tampilan baru kotak dialog yang mengharuskan pengguna untuk berinteraksi sebelum mereka dapat kembali ke operasi tampilan induk, sehingga mencegah alur kerja pada tampilan utama. Di Web/blog, Modal Dialog sering digunakan untuk menampilkan gambar secara rinci ataupun widget lainnya, dalam pola yang dikenal sebagai Lightbox. Efek lightbox sering juga disebut Modal Window atau Modal Dialog karena tampilan jendela sering digunakan untuk menampilkan kotak dialog. Apabila ingin mengkombinasikan untuk membuat kotak dialog dengan beberapa macam efek pada blog anda, berikut adalah cara untuk menggunakan jQuery Modal Dialog dengan CSS transisi dan animasi. Pertama masuk Edit HTML template dan pasang kode berikut ini di atas kode <code></head></code> <pre><link href='http://mas-andes.googlecode.com/svn/trunk/modal-dialog.css' rel='stylesheet' type='text/css'/> <script src='http://mas-andes.googlecode.com/svn/trunk/modernizr.custom.js' type='text/javascript'/></pre>Kemudian pasang kode berikut ini di atas kode <code></body></code> <pre><script type='text/javascript'> //<![CDATA[ var ModalEffects=(function(){function init(){var overlay=document.querySelector('.md-overlay');[].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el,i){var modal=document.querySelector('#'+el.getAttribute('data-modal')),close=modal.querySelector('.md-close');function removeModal(hasPerspective){classie.remove(modal,'md-show');if(hasPerspective){classie.remove(document.documentElement,'md-perspective')}}function removeModalHandler(){removeModal(classie.has(el,'md-setperspective'))}el.addEventListener('click',function(ev){classie.add(modal,'md-show');overlay.removeEventListener('click',removeModalHandler);overlay.addEventListener('click',removeModalHandler);if(classie.has(el,'md-setperspective')){setTimeout(function(){classie.add(document.documentElement,'md-perspective')},25)}});close.addEventListener('click',function(ev){ev.stopPropagation();removeModalHandler()})})}init()})(); (function(window){'use strict';function classReg(className){return new RegExp("(^|\\s+)"+className+"(\\s+|$)")}var hasClass,addClass,removeClass;if('classList'in document.documentElement){hasClass=function(elem,c){return elem.classList.contains(c)};addClass=function(elem,c){elem.classList.add(c)};removeClass=function(elem,c){elem.classList.remove(c)}}else{hasClass=function(elem,c){return classReg(c).test(elem.className)};addClass=function(elem,c){if(!hasClass(elem,c)){elem.className=elem.className+' '+c}};removeClass=function(elem,c){elem.className=elem.className.replace(classReg(c),' ')}}function toggleClass(elem,c){var fn=hasClass(elem,c)?removeClass:addClass;fn(elem,c)}var classie={hasClass:hasClass,addClass:addClass,removeClass:removeClass,toggleClass:toggleClass,has:hasClass,add:addClass,remove:removeClass,toggle:toggleClass};if(typeof define==='function'&&define.amd){define(classie)}else{window.classie=classie}})(window); //]]> </script></pre>Kemudian Simpan template. Struktur HTML modal dialog: <pre><div class="md-modal md-effect-1" id="modal-1">     <div class="md-content">         <h3>Modal Dialog <a class="md-close">&#215;</a></h3>         <div>             Disini Isi Konten Kotak Dialog         </div>     </div> </div>  <button class="md-trigger" data-modal="modal-1">Open Dialog</button> <div class="md-overlay"></div></pre><blockquote class="atas">class <code>md-effect-1</code> dan ID <code>modal-1</code> adalah tipe efek yang di gunakan (Konfigurasi lihat tabel). <code>Disini Isi Konten Kotak Dialog</code> adalah isi dari kotak dialog.</blockquote>Untuk menentukan masing-masing efek yang berbeda, lihat pada tabel konfigurasi dibawah ini: <table> <tbody><tr> <th>class</th> <th>id</th> <th>effect</th> </tr><tr> <td><code>md-effect-1</code></td> <td><code>modal-1</code></td> <td>Fade in & Scale</td> </tr><tr> <td><code>md-effect-2</code></td> <td><code>modal-2</code></td> <td>Slide in (right)</td> </tr><tr> <td><code>md-effect-3</code></td> <td><code>modal-3</code></td> <td>Slide in (bottom)</td> </tr><tr> <td><code>md-effect-4</code></td> <td><code>modal-4</code></td> <td>Newspaper</td> </tr><tr> <td><code>md-effect-5</code></td> <td><code>modal-5</code></td> <td>Fall</td> </tr><tr> <td><code>md-effect-6</code></td> <td><code>modal-6</code></td> <td>Side Fall</td> </tr><tr> <td><code>md-effect-7</code></td> <td><code>modal-7</code></td> <td>Sticky Up</td> </tr><tr> <td><code>md-effect-8</code></td> <td><code>modal-8</code></td> <td>3D Flip (horizontal)</td> </tr><tr> <td><code>md-effect-9</code></td> <td><code>modal-9</code></td> <td>3D Flip (vertical)</td> </tr><tr> <td><code>md-effect-10</code></td> <td><code>modal-10</code></td> <td>3D Sign</td> </tr><tr> <td><code>md-effect-11</code></td> <td><code>modal-11</code></td> <td>Super Scaled</td> </tr><tr> <td><code>md-effect-12</code></td> <td><code>modal-12</code></td> <td>Just Me</td> </tr><tr> <td><code>md-effect-13</code></td> <td><code>modal-13</code></td> <td>3D Slit</td> </tr><tr> <td><code>md-effect-14</code></td> <td><code>modal-14</code></td> <td>3D Rotate Bottom</td> </tr><tr> <td><code>md-effect-15</code></td> <td><code>modal-15</code></td> <td>3D Rotate In Left</td> </tr><tr> <td><code>md-effect-16</code></td> <td><code>modal-16</code></td> <td>Blur</td> </tr><tr> <td><code>md-effect-17</code></td> <td><code>modal-17</code></td> <td>Let me in</td> </tr><tr> <td><code>md-effect-18</code></td> <td><code>modal-18</code></td> <td>Make way!</td> </tr><tr> <td><code>md-effect-19</code></td> <td><code>modal-19</code></td> <td>Slip from top</td> </tr></tbody></table>Agar lebih jelasnya dari masing-masing efek yang ada bisa dilihat pada halaman demo. <div class="bt-grup"><a class="bt" href="http://mas-andes.blogspot.com/p/demo.html?url=https://mas-andes.googlecode.com/svn/trunk/modal-dialog.html" target="_blank">demo</a></div>Demikian untuk tata cara menerapkan dan Penggunaan Jenis Efek jQuery Modal Dialog, Selebihnya bisa berkreasi sendiri di blog masing-masing.

Penggunaan Jenis Efek jQuery Modal Dialog - Ada banyak cara untuk menampilkan lightbox overlay denga…

Post Snippet Pengganti Script Auto Readmore Blogger

Monday, 20 January 2014

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8xE1RsfzIRKdYHUCGdiINJ3be4D98slUZ60-GDFYEDNhv7eg1scPP_RFzoBdffuCZBlitubm8v8Zw5Nx04zbwefL0Te3z76wKG3mCR6aE1bvC2EnjHZduslfyFpbDRWj3TWvfJ9NpY4/s1600/post-snippet.gif" class="center"><img alt="Post Snippet Pengganti Script Auto Readmore Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8xE1RsfzIRKdYHUCGdiINJ3be4D98slUZ60-GDFYEDNhv7eg1scPP_RFzoBdffuCZBlitubm8v8Zw5Nx04zbwefL0Te3z76wKG3mCR6aE1bvC2EnjHZduslfyFpbDRWj3TWvfJ9NpY4/s1600/post-snippet.gif" title="Post Snippet Pengganti Script Auto Readmore Blogger" width="550" /></a>Post Snippet Pengganti Script Auto Readmore Blogger – banyak metode untuk memotong teks artikel yang ditampilkan pada homepage. Cara yang paling banyak digunakan dan popupler adalah menggunakan script auto read more, namun ada juga yang masih menggunakan cara manual dengan metode jump break yang disediakan pihak blogger pada area posting mode Compose dan tag <code></code> pada posting mode HTML. Alternatife lain yang akan saya bahas pada tutorial ini adalah menggunakan metode <code>data:post.snippet</code> untuk memotong post artikel dan <code>data:post.thumbnailUrl</code> untuk memanggil gambar dari post tersebut. Cara ini menurut saya lebih simple karena tidak memerlukan javascript untuk memotong artikel secara otomatis. Namun setiap metode pasti memiliki kelemahan masing-masing, begitu pula dengan cara ini. Jika suatu post tidak memiliki thumbnail maka jumlah karakter yang akan ditampilkan adalah 140 karakter dan jika post yang memiliki thumbnail maka karakter yang ditampilkan adalah 100 karakter. Entah bagaimana untuk mengubah dan menentukan jumlah batasan karakter tersebut saya sendiri masih mencari tahu akan hal ini. Untuk penerapannya kedalam template, sebagai patokan saya menggunakan default template blogger agar lebih mudah dan bisa dimengerti. Untuk yang sudah menggunakan script auto read more bisa menyesuaikan. Langkahnya cari kode <code><b:includable id='post' var='post'></code> maka dibawahnya akan terdapat dua kode <code><data:post.body/></code>, kemudian replace kode <code><data:post.body/></code> yang kedua dengan kode berikut ini:<pre><data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <b:if cond='data:post.hasJumpLink'> <data:post.body/> <b:else/> <b:if cond='data:post.snippet'> <b:if cond='data:post.thumbnailUrl'> <div class='thumb'> <a expr:href='data:post.url' expr:title='data:post.title' expr:alt='data:post.title'><img expr:src='data:post.thumbnailUrl'/></a> </div> <b:else/> <div class='thumb'> <a expr:href='data:post.url' expr:title='data:post.title' expr:alt='data:post.title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyPod3GKxBs188Z2Y_RvvHGsXXV2yrGGt8THbUXGX_fts5jOZOc1ZC7hKxOoK6AKRkVzXSnvc-nnlu1mAWG_HjyyEvmYYbicFpWhAu9kvNTWQL3fGqjXLvT0MbFc_UlftQ5Xn7RxOY0VY/h120/no-image.jpg'/></a> </div> </b:if> <data:post.snippet/> <div class='jump-link'> <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> </div> <b:else/> <data:post.body/> </b:if> </b:if> </b:if> </b:if></pre>Untuk mengatur tampilannya anda bisa menambahkan kode CSS seperti dibawah ini dan taruh di atas kode <code>]]></b:skin></code> <pre>.thumb img{float:left;margin-right:10px;width:72px;height:72px} .jump-link{display:inline;float:right;padding:5px;background:#ddd;margin-top:20px}</pre>Diatas hanya dasarnya, untuk merubah tampilan lebih lanjut atur pada bagian CSS dengan penambahan background, border, dll agar lebih sesuai dengan yang di inginkan.

Post Snippet Pengganti Script Auto Readmore Blogger – banyak metode untuk memotong teks artikel yang…

List Icon Font Awesome dan CSS Value Content V4.0.3

Sunday, 29 December 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxGbO8ABWT7XZFkSTHOVkJxQWSvySMMeEAeXLekR2aV5zZMFcwCbaFivdWgrBBYgcCf5SdU3HTr8aetTvhsZhIf0MvO9vSbODfsJN0P2l2G54Xd9qjWw6qAzkUWMIaq2fJbhnvotacXE/s1600/font-awesome.gif" class="center" ><img alt="List Icon Font Awesome dan CSS Value Content V4.0.3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxGbO8ABWT7XZFkSTHOVkJxQWSvySMMeEAeXLekR2aV5zZMFcwCbaFivdWgrBBYgcCf5SdU3HTr8aetTvhsZhIf0MvO9vSbODfsJN0P2l2G54Xd9qjWw6qAzkUWMIaq2fJbhnvotacXE/s640/font-awesome.gif" title="List Icon Font Awesome dan CSS Value Content V4.0.3"/></a>List Icon Font Awesome dan CSS Value Content V4.0.3 sedikit mau berbagi setelah lama tidak menjamah dunia blogging dan mengupdate blog ini. Pada artikel ini bagi yang suka bermain main dengan desain blog maka pilihan tepat untuk menambah pernak-pernik pada elemen-elemen tertentu hingga sampai yang mendetail dengan menggunakan Font Awesome untuk melengkapi maupun mempercantik blog. Font Awesome versi 4.0.3 merupakan update dari versi sebelumnya, dan terdapat 11 icon baru pada Font Awesome V4.0.3 dan juga pembaharuan nama icon. Font Awesome merupakan font web yang mengagumkan dan mengandung semua ikon dari kerangka Twitter Bootstrap, dan sekarang lebih banyak lagi icon-icon lain hanya dengan menambah satu styleshet pada template maka anda bisa menggunakan 369 icon. Agar bisa menggunakan Font Awesome, maka anda perlu menambahkan styleshet dibawah ini kemudian menyimpannya di atas kode <code></head></code><pre><link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/></pre>Cara penggunaanya didalam HTML anda hanya perlu menambahkan tag <code></code> kemudian class dari nama icon yang dipilih. Misal untuk cara penulisannya seperti dibawah ini: fa-html5 <pre> fa-html5</pre>Untuk memperbesar ukuran, maka anda hanya perlu menambahkan class <code>fa-lg</code>, <code>fa-1x</code>, <code>fa-2x</code>, <code>fa-3x</code>, <code>fa-4x</code>, <code>fa-5x</code> dan berikut contohnya: fa-html5 fa-html5 fa-html5 fa-html5 fa-html5<pre> fa-html5 fa-html5 fa-html5 fa-html5 fa-html5 </pre>Gunakan class <code>fa-ul</code> dan <code>fa-li</code> untuk mempermudah dalam membuat daftar list dan menentukan nama icon. <ul class="fa-ul"> <li>fa-check-square</li> <li>fa-check-square</li> <li>fa-spinner fa-spin</li> <li>fa-square</li></ul><pre> <ul class="fa-ul"> <li>fa-check-square</li> <li>fa-check-square</li> <li>fa-spinner fa-spin</li> <li>fa-square</li> </ul> </pre>Gunakan class <code>pull-right</code> atau <code>pull-left</code> untuk membuat icon berada di sebelah kanan atau sebelah kiri, sedangkan <code>fa-border</code> adalah untuk membuat border pada icon tersebut. Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right. <pre> Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right. </pre>Gunakan class <code>fa-spin</code> untuk membuat icon agar bisa berputar. Ini biasa di kombinasikan pada icon fa-spinner, fa-refresh, dan fa-gigi agar bisa berputar dengan baik. Namun sayangnya animasi CSS3 ini tidak support di IE8 - IE9. <pre> </pre>Untuk memutar atau membalik icon, gunakan class <code>fa-rotate-*</code> dan <code>fa-flip-*</code>. Ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di rotate.   normal   fa-rotate-90   fa-rotate-180   fa-rotate-270   fa-flip-horizontal   icon-flip-vertical <pre> &nbsp; normal &nbsp; fa-rotate-90 &nbsp; fa-rotate-180 &nbsp; fa-rotate-270 &nbsp; fa-flip-horizontal &nbsp; icon-flip-vertical </pre>Diatas adalah cara dimana untuk menuliskan Font Awesome didalam sebuah markup HTML, masih banyak lagi tips trik lainnya yang bisa digunakan didalam Font Awesome. Untuk lebih jelasnya bisa mencoba dan berkreasi sendiri agar bisa lebih memahami bermain-main dengan berbagai komponen Bootstrap. Bahkan dengan cara lain anda juga bisa untuk menambahkan icon Font Awesome didalam CSS pada pseudo elemen <code>:before</code> dengan menuliskan value content dari icon tersebut. Berikut skema penggunaan Font Awesome pada pseudo elemen CSS: <pre> .element{ position: relative; } /* ganti tulisan berwarna merah pada value content */ .element:before { content: "\f000"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; /*--custom pada CSS--*/ color: #000; font-size: 18px; padding-right: 0.5em; position: absolute; top: 10px; left: 0; } </pre>Setelah mengetahui cara penggunaan dari Font Awesome baik itu pada CSS maupun HTML maka berikut adalah list dari icon Font Awesome versi 4.0.3 beserta CSS value content. <h3>List Icon Font Awesome dan CSS Value Content V4.0.3</h3> <ul class="kiri"> <li>  fa-glass "\f000" </li> <li>  fa-music "\f001" </li> <li>  fa-search "\f002" </li> <li>  fa-envelope-o "\f003" </li> <li>  fa-heart "\f004" </li> <li>  fa-star "\f005" </li> <li>  fa-star-o "\f006" </li> <li>  fa-user "\f007" </li> <li>  fa-film "\f008" </li> <li>  fa-th-large "\f009" </li> <li>  fa-th "\f00a" </li> <li>  fa-th-list "\f00b" </li> <li>  fa-check "\f00c" </li> <li>  fa-times "\f00d" </li> <li>  fa-search-plus "\f00e" </li> <li>  fa-search-minus "\f010" </li> <li>  fa-power-off "\f011" </li> <li>  fa-signal "\f012" </li> <li>  fa-cog "\f013" </li> <li>  fa-trash-o "\f014" </li> <li>  fa-home "\f015" </li> <li>  fa-file-o "\f016" </li> <li>  fa-clock-o "\f017" </li> <li>  fa-road "\f018" </li> <li>  fa-download "\f019" </li> <li>  fa-arrow-circle-o-down "\f01a" </li> <li>  fa-arrow-circle-o-up "\f01b" </li> <li>  fa-inbox "\f01c" </li> <li>  fa-play-circle-o "\f01d" </li> <li>  fa-repeat "\f01e" </li> <li>  fa-refresh "\f021" </li> <li>  fa-list-alt "\f022" </li> <li>  fa-lock "\f023" </li> <li>  fa-flag "\f024" </li> <li>  fa-headphones "\f025" </li> <li>  fa-volume-off "\f026" </li> <li>  fa-volume-down "\f027" </li> <li>  fa-volume-up "\f028" </li> <li>  fa-qrcode "\f029" </li> <li>  fa-barcode "\f02a" </li> <li>  fa-tag "\f02b" </li> <li>  fa-tags "\f02c" </li> <li>  fa-book "\f02d" </li> <li>  fa-bookmark "\f02e" </li> <li>  fa-print "\f02f" </li> <li>  fa-camera "\f030" </li> <li>  fa-font "\f031" </li> <li>  fa-bold "\f032" </li> <li>  fa-italic "\f033" </li> <li>  fa-text-height "\f034" </li> <li>  fa-text-width "\f035" </li> <li>  fa-align-left "\f036" </li> <li>  fa-align-center "\f037" </li> <li>  fa-align-right "\f038" </li> <li>  fa-align-justify "\f039" </li> <li>  fa-list "\f03a" </li> <li>  fa-outdent "\f03b" </li> <li>  fa-indent "\f03c" </li> <li>  fa-video-camera "\f03d" </li> <li>  fa-picture-o "\f03e" </li> <li>  fa-pencil "\f040" </li> <li>  fa-map-marker "\f041" </li> <li>  fa-adjust "\f042" </li> <li>  fa-tint "\f043" </li> <li>  fa-pencil-square-o "\f044" </li> <li>  fa-share-square-o "\f045" </li> <li>  fa-check-square-o "\f046" </li> <li>  fa-arrows "\f047" </li> <li>  fa-step-backward "\f048" </li> <li>  fa-fast-backward "\f049" </li> <li>  fa-backward "\f04a" </li> <li>  fa-play "\f04b" </li> <li>  fa-pause "\f04c" </li> <li>  fa-stop "\f04d" </li> <li>  fa-forward "\f04e" </li> <li>  fa-fast-forward "\f050" </li> <li>  fa-step-forward "\f051" </li> <li>  fa-eject "\f052" </li> <li>  fa-chevron-left "\f053" </li> <li>  fa-chevron-right "\f054" </li> <li>  fa-plus-circle "\f055" </li> <li>  fa-minus-circle "\f056" </li> <li>  fa-times-circle "\f057" </li> <li>  fa-check-circle "\f058" </li> <li>  fa-question-circle "\f059" </li> <li>  fa-info-circle "\f05a" </li> <li>  fa-crosshairs "\f05b" </li> <li>  fa-times-circle-o "\f05c" </li> <li>  fa-check-circle-o "\f05d" </li> <li>  fa-ban "\f05e" </li> <li>  fa-arrow-left "\f060" </li> <li>  fa-arrow-right "\f061" </li> <li>  fa-arrow-up "\f062" </li> <li>  fa-arrow-down "\f063" </li> <li>  fa-share "\f064" </li> <li>  fa-expand "\f065" </li> <li>  fa-compress "\f066" </li> <li>  fa-plus "\f067" </li> <li>  fa-minus "\f068" </li> <li>  fa-asterisk "\f069" </li> <li>  fa-exclamation-circle "\f06a" </li> <li>  fa-gift "\f06b" </li> <li>  fa-leaf "\f06c" </li> <li>  fa-fire "\f06d" </li> <li>  fa-eye "\f06e" </li> <li>  fa-eye-slash "\f070" </li> <li>  fa-exclamation-triangle "\f071" </li> <li>  fa-plane "\f072" </li> <li>  fa-calendar "\f073" </li> <li>  fa-random "\f074" </li> <li>  fa-comment "\f075" </li> <li>  fa-magnet "\f076" </li> <li>  fa-chevron-up "\f077" </li> <li>  fa-chevron-down "\f078" </li> <li>  fa-retweet "\f079" </li> <li>  fa-shopping-cart "\f07a" </li> <li>  fa-folder "\f07b" </li> <li>  fa-folder-open "\f07c" </li> <li>  fa-arrows-v "\f07d" </li> <li>  fa-arrows-h "\f07e" </li> <li>  fa-bar-chart-o "\f080" </li> <li>  fa-twitter-square "\f081" </li> <li>  fa-facebook-square "\f082" </li> <li>  fa-camera-retro "\f083" </li> <li>  fa-key "\f084" </li> <li>  fa-cogs "\f085" </li> <li>  fa-comments "\f086" </li> <li>  fa-thumbs-o-up "\f087" </li> <li>  fa-thumbs-o-down "\f088" </li> <li>  fa-star-half "\f089" </li> <li>  fa-heart-o "\f08a" </li> <li>  fa-sign-out "\f08b" </li> <li>  fa-linkedin-square "\f08c" </li> <li>  fa-thumb-tack "\f08d" </li> <li>  fa-external-link "\f08e" </li> <li>  fa-sign-in "\f090" </li> <li>  fa-trophy "\f091" </li> <li>  fa-github-square "\f092" </li> <li>  fa-upload "\f093" </li> <li>  fa-lemon-o "\f094" </li> <li>  fa-phone "\f095" </li> <li>  fa-square-o "\f096" </li> <li>  fa-bookmark-o "\f097" </li> <li>  fa-phone-square "\f098" </li> <li>  fa-twitter "\f099" </li> <li>  fa-facebook "\f09a" </li> <li>  fa-github "\f09b" </li> <li>  fa-unlock "\f09c" </li> <li>  fa-credit-card "\f09d" </li> <li>  fa-rss "\f09e" </li> <li>  fa-hdd-o "\f0a0" </li> <li>  fa-bullhorn "\f0a1" </li> <li>  fa-bell "\f0f3" </li> <li>  fa-certificate "\f0a3" </li> <li>  fa-hand-o-right "\f0a4" </li> <li>  fa-hand-o-left "\f0a5" </li> <li>  fa-hand-o-up "\f0a6" </li> <li>  fa-hand-o-down "\f0a7" </li> <li>  fa-arrow-circle-left "\f0a8" </li> <li>  fa-arrow-circle-right "\f0a9" </li> <li>  fa-arrow-circle-up "\f0aa" </li> <li>  fa-arrow-circle-down "\f0ab" </li> <li>  fa-globe "\f0ac" </li> <li>  fa-wrench "\f0ad" </li> <li>  fa-tasks "\f0ae" </li> <li>  fa-filter "\f0b0" </li> <li>  fa-briefcase "\f0b1" </li> <li>  fa-arrows-alt "\f0b2" </li> <li>  fa-users "\f0c0" </li> <li>  fa-link "\f0c1" </li> <li>  fa-cloud "\f0c2" </li> <li>  fa-flask "\f0c3" </li> <li>  fa-scissors "\f0c4" </li> <li>  fa-files-o "\f0c5" </li> <li>  fa-paperclip "\f0c6" </li> <li>  fa-floppy-o "\f0c7" </li> <li>  fa-square "\f0c8" </li> <li>  fa-bars "\f0c9" </li> <li>  fa-list-ul "\f0ca" </li> <li>  fa-list-ol "\f0cb" </li> <li>  fa-strikethrough "\f0cc" </li> <li>  fa-underline "\f0cd" </li> <li>  fa-table "\f0ce" </li> <li>  fa-magic "\f0d0" </li> <li>  fa-truck "\f0d1" </li> <li>  fa-pinterest "\f0d2" </li> <li>  fa-pinterest-square "\f0d3" </li> <li>  fa-google-plus-square "\f0d4" </li> <li>  fa-google-plus "\f0d5" </li> <li>  fa-money "\f0d6" </li> <li>  fa-caret-down "\f0d7" </li> <li>  fa-caret-up "\f0d8" </li> <li>  fa-caret-left "\f0d9" </li> <li>  fa-caret-right "\f0da" </li> <li>  fa-columns "\f0db" </li> <li>  fa-sort "\f0dc" </li> <li>  fa-sort-asc "\f0dd" </li> <li>  fa-sort-desc "\f0de" </li> <li>  fa-envelope "\f0e0" </li> <li>  fa-linkedin "\f0e1" </li> <li>  fa-undo "\f0e2" </li> <li>  fa-gavel "\f0e3" </li> <li>  fa-tachometer "\f0e4" </li> <li>  fa-comment-o "\f0e5" </li> <li>  fa-comments-o "\f0e6" </li> <li>  fa-bolt "\f0e7" </li> <li>  fa-sitemap "\f0e8" </li> <li>  fa-umbrella "\f0e9" </li> <li>  fa-clipboard "\f0ea" </li> <li>  fa-lightbulb-o "\f0eb" </li> <li>  fa-exchange "\f0ec" </li> <li>  fa-cloud-download "\f0ed" </li> <li>  fa-cloud-upload "\f0ee" </li> <li>  fa-user-md "\f0f0" </li> <li>  fa-stethoscope "\f0f1" </li> <li>  fa-suitcase "\f0f2" </li> <li>  fa-bell-o "\f0a2" </li> <li>  fa-coffee "\f0f4" </li> <li>  fa-cutlery "\f0f5" </li> <li>  fa-file-text-o "\f0f6" </li> <li>  fa-building-o "\f0f7" </li> <li>  fa-hospital-o "\f0f8" </li> <li>  fa-ambulance "\f0f9" </li> <li>  fa-medkit "\f0fa" </li> <li>  fa-fighter-jet "\f0fb" </li> <li>  fa-beer "\f0fc" </li> <li>  fa-h-square "\f0fd" </li> <li>  fa-plus-square "\f0fe" </li> <li>  fa-angle-double-left "\f100" </li> <li>  fa-angle-double-right "\f101" </li> <li>  fa-angle-double-up "\f102" </li> <li>  fa-angle-double-down "\f103" </li> <li>  fa-angle-left "\f104" </li> <li>  fa-angle-right "\f105" </li> <li>  fa-angle-up "\f106" </li> <li>  fa-angle-down "\f107" </li> <li>  fa-desktop "\f108" </li> <li>  fa-laptop "\f109" </li> <li>  fa-tablet "\f10a" </li> <li>  fa-mobile "\f10b" </li> <li>  fa-circle-o "\f10c" </li> <li>  fa-quote-left "\f10d" </li> <li>  fa-quote-right "\f10e" </li> <li>  fa-spinner "\f110" </li> <li>  fa-circle "\f111" </li> <li>  fa-reply "\f112" </li> <li>  fa-github-alt "\f113" </li> <li>  fa-folder-o "\f114" </li> <li>  fa-folder-open-o "\f115" </li> <li>  fa-smile-o "\f118" </li> <li>  fa-frown-o "\f119" </li> <li>  fa-meh-o "\f11a" </li> <li>  fa-gamepad "\f11b" </li> <li>  fa-keyboard-o "\f11c" </li> <li>  fa-flag-o "\f11d" </li> <li>  fa-flag-checkered "\f11e" </li> <li>  fa-terminal "\f120" </li> <li>  fa-code "\f121" </li> <li>  fa-reply-all "\f122" </li> <li>  fa-mail-reply-all "\f122" </li> <li>  fa-star-half-o "\f123" </li> <li>  fa-location-arrow "\f124" </li> <li>  fa-crop "\f125" </li> <li>  fa-code-fork "\f126" </li> <li>  fa-chain-broken "\f127" </li> <li>  fa-question "\f128" </li> <li>  fa-info "\f129" </li> <li>  fa-exclamation "\f12a" </li> <li>  fa-superscript "\f12b" </li> <li>  fa-subscript "\f12c" </li> <li>  fa-eraser "\f12d" </li> <li>  fa-puzzle-piece "\f12e" </li> <li>  fa-microphone "\f130" </li> <li>  fa-microphone-slash "\f131" </li> <li>  fa-shield "\f132" </li> <li>  fa-calendar-o "\f133" </li> <li>  fa-fire-extinguisher "\f134" </li> <li>  fa-rocket "\f135" </li> <li>  fa-maxcdn "\f136" </li> <li>  fa-chevron-circle-left "\f137" </li> <li>  fa-chevron-circle-right "\f138" </li> <li>  fa-chevron-circle-up "\f139" </li> <li>  fa-chevron-circle-down "\f13a" </li> <li>  fa-html5 "\f13b" </li> <li>  fa-css3 "\f13c" </li> <li>  fa-anchor "\f13d" </li> <li>  fa-unlock-alt "\f13e" </li> <li>  fa-bullseye "\f140" </li> <li>  fa-ellipsis-h "\f141" </li> <li>  fa-ellipsis-v "\f142" </li> <li>  fa-rss-square "\f143" </li> <li>  fa-play-circle "\f144" </li> <li>  fa-ticket "\f145" </li> <li>  fa-minus-square "\f146" </li> <li>  fa-minus-square-o "\f147" </li> <li>  fa-level-up "\f148" </li> <li>  fa-level-down "\f149" </li> <li>  fa-check-square "\f14a" </li> <li>  fa-pencil-square "\f14b" </li> <li>  fa-external-link-square "\f14c" </li> <li>  fa-share-square "\f14d" </li> <li>  fa-compass "\f14e" </li> <li>  fa-caret-square-o-down "\f150" </li> <li>  fa-caret-square-o-up "\f151" </li> <li>  fa-caret-square-o-right "\f152" </li> <li>  fa-eur "\f153" </li> <li>  fa-gbp "\f154" </li> <li>  fa-usd "\f155" </li> <li>  fa-inr "\f156" </li> <li>  fa-jpy "\f157" </li> <li>  fa-rub "\f158" </li> <li>  fa-krw "\f159" </li> <li>  fa-btc "\f15a" </li> <li>  fa-file "\f15b" </li> <li>  fa-file-text "\f15c" </li> <li>  fa-sort-alpha-asc "\f15d" </li> <li>  fa-sort-alpha-desc "\f15e" </li> <li>  fa-sort-amount-asc "\f160" </li> <li>  fa-sort-amount-desc "\f161" </li> <li>  fa-sort-numeric-asc "\f162" </li> <li>  fa-sort-numeric-desc "\f163" </li> <li>  fa-thumbs-up "\f164" </li> <li>  fa-thumbs-down "\f165" </li> <li>  fa-youtube-square "\f166" </li> <li>  fa-youtube "\f167" </li> <li>  fa-xing "\f168" </li> <li>  fa-xing-square "\f169" </li> <li>  fa-youtube-play "\f16a" </li> <li>  fa-dropbox "\f16b" </li> <li>  fa-stack-overflow "\f16c" </li> <li>  fa-instagram "\f16d" </li> <li>  fa-flickr "\f16e" </li> <li>  fa-adn "\f170" </li> <li>  fa-bitbucket "\f171" </li> <li>  fa-bitbucket-square "\f172" </li> <li>  fa-tumblr "\f173" </li> <li>  fa-tumblr-square "\f174" </li> <li>  fa-long-arrow-down "\f175" </li> <li>  fa-long-arrow-up "\f176" </li> <li>  fa-long-arrow-left "\f177" </li> <li>  fa-long-arrow-right "\f178" </li> <li>  fa-apple "\f179" </li> <li>  fa-windows "\f17a" </li> <li>  fa-android "\f17b" </li> <li>  fa-linux "\f17c" </li> <li>  fa-dribbble "\f17d" </li> <li>  fa-skype "\f17e" </li> <li>  fa-foursquare "\f180" </li> <li>  fa-trello "\f181" </li> <li>  fa-female "\f182" </li> <li>  fa-male "\f183" </li> <li>  fa-gittip "\f184" </li> <li>  fa-sun-o "\f185" </li> <li>  fa-moon-o "\f186" </li> <li>  fa-archive "\f187" </li> <li>  fa-bug "\f188" </li> <li>  fa-vk "\f189" </li> <li>  fa-weibo "\f18a" </li> <li>  fa-renren "\f18b" </li> <li>  fa-pagelines "\f18c" </li> <li>  fa-stack-exchange "\f18d" </li> <li>  fa-arrow-circle-o-right "\f18e" </li> <li>  fa-arrow-circle-o-left "\f190" </li> <li>  fa-caret-square-o-left "\f191" </li> <li>  fa-dot-circle-o "\f192" </li> <li>  fa-wheelchair "\f193" </li> <li>  fa-vimeo-square "\f194" </li> <li>  fa-try "\f195" </li> <li>  fa-plus-square-o "\f196" </li></ul> <div style='clear:both'></div>Demikian mengenai List Icon Font Awesome dan CSS Value Content V4.0.3 selanjutnya silahkan bereksperimen seperti yang sedang ngetrend saat ini. Sweet greetings and congratulations from <a href="http://mas-andes.blogspot.com" title="http://mas-andes.blogspot.com">http://mas-andes.blogspot.com</a> welcome coming new year 2014. <style type='text/css' scoped='scoped'>.clear{clear:both} ul{list-style:none} .kiri li{width:40%;float:left;padding:5px 20px} .css-value{float:right} </style>

List Icon Font Awesome dan CSS Value Content V4.0.3 sedikit mau berbagi setelah lama tidak menjama…

CSS Animasi Menu Dropdown Blogger

Friday, 13 December 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgDZspUq4KcyH65wiA6nKiTM_91PTlDZOMKqifJ-4zGNx8YvSI3WyhPXeQ3fgYJTORlUv_Ln6fOGgRo9gvsBumWGNS0VHnkTUfE3rKFQ9jSIyoqMZxnOHg0NYl7pu3p0PBUDuorxTWNGo/s1600/animasi-menu-css.gif" class="center" style="margin-left: 1em; margin-right: 1em;"><img alt="CSS Animasi Menu Dropdown Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgDZspUq4KcyH65wiA6nKiTM_91PTlDZOMKqifJ-4zGNx8YvSI3WyhPXeQ3fgYJTORlUv_Ln6fOGgRo9gvsBumWGNS0VHnkTUfE3rKFQ9jSIyoqMZxnOHg0NYl7pu3p0PBUDuorxTWNGo/s320/animasi-menu-css.gif" title="CSS Animasi Menu Dropdown Blogger" width="320" /></a>CSS Animasi Menu Dropdown Blogger – pada tutorial ini setelah lama tidak membahas tentang menu navigasi blogger maka sekarang sedikit akan saya jelaskan tentang CSS animasi dropdown menu yang terpasang pada <a href="http://mas-andes.blogspot.com/2013/11/darkforyou-blogger-template.html" target="_blank">template Darkforyou</a> dan <a href="http://mas-andes.blogspot.com/2013/12/bluesforyou-blogger-template.html" target="_blank">Bluesforyou</a>. Untuk membuat animasi menu dropdown ini tidak memerlukan adanya jquery dan disinilah letak kehebatan fitur CSS transition untuk membuat animasi CSS yang berjalan secara halus dengan mengatur efek pada transition-delay. Berikut lebih jelasnya untuk memasang CSS Animasi Menu Dropdown Blogger ke dalam blog. 1. Login ke akun blogger lalu masuk ke Edit HTML template. 2. Lalu taruh kode CSS berikut ini di atas kode <code>]]></b:skin></code><pre>.menu,.menu ul{list-style:none;margin:0;padding:0} .menu{background:#252525;height:35px;width:100%;border-bottom:2px solid #181818;border-top:2px solid #303030} .menu li{background:#252525} .menu &gt; li{display:block;float:left;position:relative;box-shadow:2px 0 0 0 rgba(51,51,51,1)} .menu a{border-left:3px solid rgba(0,0,0,0);color:gray;display:block;font-family:Electrolize,sans-serif;font-size:18px;line-height:35px;text-decoration:none;text-transform:uppercase;padding:0 25px} .menu a:first-letter{color:#0091d6} .menu li:hover{background-color:#1c1c1c} .menu li:hover &gt; a{border-left:3px solid #0091d6;color:#fff} .submenu{left:0;max-height:0;position:absolute;top:100%;z-index:0;perspective:400px;width:200%} .submenu li{opacity:0;transform:rotateY(90deg);transition:opacity .4s, transform .5s;border-bottom:2px solid #181818;border-top:2px solid #303030} .menu .submenu li:hover a{border-left:3px solid #454545;color:#fff} .menu &gt; li:hover .submenu,.menu &gt; li:focus .submenu{max-height:2000px;z-index:10} .menu &gt; li:hover .submenu li,.menu &gt; li:focus .submenu li{opacity:1;transform:none} .menu li:hover .submenu li:nth-child(1){transition-delay:0s} .menu li:hover .submenu li:nth-child(2){transition-delay:50ms} .menu li:hover .submenu li:nth-child(3){transition-delay:100ms} .menu li:hover .submenu li:nth-child(4){transition-delay:150ms} .menu li:hover .submenu li:nth-child(5){transition-delay:200ms} .menu li:hover .submenu li:nth-child(6){transition-delay:250ms} .menu li:hover .submenu li:nth-child(7){transition-delay:300ms} .menu li:hover .submenu li:nth-child(8){transition-delay:350ms} .submenu li:nth-child(1){transition-delay:350ms} .submenu li:nth-child(2){transition-delay:300ms} .submenu li:nth-child(3){transition-delay:250ms} .submenu li:nth-child(4){transition-delay:200ms} .submenu li:nth-child(5){transition-delay:150ms} .submenu li:nth-child(6){transition-delay:100ms} .submenu li:nth-child(7){transition-delay:50ms} .submenu li:nth-child(8){transition-delay:0s} .menu &gt; li:nth-child(1) {border-right:2px solid #111} .menu &gt; li:nth-child(2),.menu &gt; li:nth-child(3),.menu &gt; li:nth-child(4),.menu &gt; li:nth-child(5),.menu &gt; li:nth-child(6),.menu &gt; li:nth-child(7),.menu &gt; li:nth-child(8){border-right:2px solid #111;border-left:2px solid #333} </pre>3. Selanjutnya untuk menampilkan menu ini dibawah header, jika menggunakan struktur template HTML5 maka cari kode <code></header></code> lalu taruh kode berikut ini tepat di bawahnya. Cara lain, bisa juga dengan menaruh kode berikut tepat di atas kode <code><div id='main-wrapper'></code> atau <code><article id='main-wrapper'></code><pre><nav> <ul class='menu'>     <li><a expr:href='data:blog.homepageUrl'>Home</a></li>     <li><a href='#'>Menu 1</a>         <ul class='submenu'>             <li><a href='#'>Submenu a</a></li>             <li><a href='#'>Submenu b</a></li>             <li><a href='#'>Submenu c</a></li>             <li><a href='#'>Submenu d</a></li>             <li><a href='#'>Submenu e</a></li>             <li><a href='#'>Submenu f</a></li>             <li><a href='#'>Submenu g</a></li>             <li><a href='#'>Submenu h</a></li>         </ul>     </li>     <li class='active'><a href='#'>Menu 2</a>         <ul class='submenu'>             <li><a href='#'>Submenu a</a></li>             <li><a href='#'>Submenu b</a></li>             <li><a href='#'>Submenu c</a></li>             <li><a href='#'>Submenu d</a></li>             <li><a href='#'>Submenu e</a></li>             <li><a href='#'>Submenu f</a></li>             <li><a href='#'>Submenu g</a></li>             <li><a href='#'>Submenu h</a></li>         </ul>     </li>     <li><a href='#'>Menu 3</a>         <ul class='submenu'>             <li><a href='#'>Submenu a</a></li>             <li><a href='#'>Submenu b</a></li>             <li><a href='#'>Submenu c</a></li>             <li><a href='#'>Submenu d</a></li>             <li><a href='#'>Submenu e</a></li>             <li><a href='#'>Submenu f</a></li>             <li><a href='#'>Submenu g</a></li>             <li><a href='#'>Submenu h</a></li>         </ul>     </li>     <li><a href='#'>Menu 4</a></li>     <li><a href='#'>Menu 5</a></li> </ul> </nav> </pre>4. Langkah terakhir Simpan template. Demikian tutorial sederhana untuk membuat CSS Animasi Menu Dropdown Blogger. Harapan saya setelah anda mengenal satu per satu elemen kode pada template maka anda bisa berkreasi sendiri untuk membuat tampilan blog seperti keinginan kreasi masing-masing.

CSS Animasi Menu Dropdown Blogger – pada tutorial ini setelah lama tidak membahas tentang menu navig…

Bluesmulus Blogger Template

Sunday, 8 December 2013

Bluesmulus Blogger Template – seiring berjalannya waktu kesibukan semakin bertambah, hingga akhirnya waktu untuk bloggingpun semakin sempit. Sudah lama rasanya ingin update artikel blog ini dan akhirnya sekarang tercapai juga. Lama tidak menulis artikel rasanya masih kaku sama seperti saat pertama kali publish artikel di blog. Pada kesempatan kali ini kembali saya persembahkan sebuah template platform blogger dengan desain yang sederhana, simple dan minimalis yang pastinya valid HTML5 dan CSS3. Jika sekilas di perhatikan pada template ini memang lumayan mirip dengan <a href="http://mas-andes.blogspot.com/2013/12/bluesforyou-blogger-template.html" target="_blank" title="Bluesforyou Blogger Template">template Bluesforyou</a> yang sudah saya publish pada tempo hari sebelumnya. <a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrx7MWCG9P1HK3AiqcHZc0rGQgbeVqwEl2doLYxHKnfkkwHoZ2BxgNKoL2we7nhjLEeuF13VEA1A648RXpuXLyU1-2iPDBjr1MGfN_oIhjObXCZ9NLFAGARNtUwHtakgrVUegdT8tjx0/s1600/Bluesmulus-blogger-template.jpg"><img alt="Bluesmulus Blogger Template" height="412" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrx7MWCG9P1HK3AiqcHZc0rGQgbeVqwEl2doLYxHKnfkkwHoZ2BxgNKoL2we7nhjLEeuF13VEA1A648RXpuXLyU1-2iPDBjr1MGfN_oIhjObXCZ9NLFAGARNtUwHtakgrVUegdT8tjx0/s640/Bluesmulus-blogger-template.jpg" title="Bluesmulus Blogger Template" width="640" /></a>Berikut beberapa fitur dari Bluesmulus Blogger Template: 1. Valid HTML5 dan CSS3 2. Score SEO 100% in Chkme.com 3. Auto post Slideshow 4. Auto post featured Carousel 5. Custom error 404 page 6. Post by tag label, dll. <a class="button" href="http://bluesmulus.blogspot.com/" rel="nofollow" target="_blank">Preview</a> <a class="button" href="http://faceblog-evolutions.googlecode.com/files/Bluesmulus-theme.txt" rel="nofollow" target="_blank">Download</a> Cara menambahkan widget Post by tag label pada homepage <a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovvhuVLS_t93qe2otJsoHxR_85nTewnZdtMXAcwtti0XjJuJh2vJpTRUJD6A3rgzD3R4ZFZevZK5AlVQXDrdAP3iIgB19hSFJgTl2xX2VMjrI8Yze6gQeilukD5MNgvyYBQC_akM9Oeo/s1600/post-by-label.gif"><img alt="Bluesmulus Blogger Template" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovvhuVLS_t93qe2otJsoHxR_85nTewnZdtMXAcwtti0XjJuJh2vJpTRUJD6A3rgzD3R4ZFZevZK5AlVQXDrdAP3iIgB19hSFJgTl2xX2VMjrI8Yze6gQeilukD5MNgvyYBQC_akM9Oeo/s640/post-by-label.gif" title="Bluesmulus Blogger Template" width="640" /></a>Taruh kode berikut ini kedalam widget HTML/Javascript: <pre><script type='text/javascript'>     var numposts = 5; // Jumlah Post yang di tampilkan     var showpostthumbnails = true; // Ganti "false" untuk tidak menampilkan [Thumbnail]     var displaymore = false; // Ganti "true" untuk menampilkan link [More]     var displayseparator = false;     var showcommentnum = false; // Ganti "true" untuk menampilkan [Komentar]     var showpostdate = false; // Ganti "true" untuk menampilkan [Tanggal]     var showpostsummary = true; // Ganti "false" untuk tidak menampilkan [Deskripsi Post]     var numchars = 60; // Character Deskripsi yang di tampilkan </script> <script type="text/javascript" src="/feeds/posts/default/-/CSS?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre><blockquote class="atas">Teks berwarna merah adalah nama label, ganti dengan label blog anda.</blockquote> [ <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Ae9fip_SOgtKAUQwwCqEmlITJQiTej_LhwoMbeSIeWFRpU5Ngx6E_0EL2JsIS_nyN8uLYFNwswo1DdXTT-0jcKHn2ngEdtIpMyPdQKOklOo6jj8GEMRtDb1Y1xqreQz9TZZrVbHsh7sz/s1600/installasi-template.gif" rel="nofollow" target="_blank">Petunjuk Install Template</a> ]

Bluesmulus Blogger Template – seiring berjalannya waktu kesibukan semakin bertambah, hingga akhirnya…

Bluesforyou Blogger Template

Saturday, 30 November 2013

Bluesforyou Blogger Template – elemen template Bluesforyou tidak jauh berbeda dengan template <a href="http://mas-andes.blogspot.com/2013/11/darkforyou-blogger-template.html" target="_blank">Darkforyou</a>, untuk custom segala keperluannya sama persis dengan template sebelumnya bisa di lihat pada halaman demo. Bluesforyou Blogger Template terdapat dua versi yakni light version (versi terang) dan dark version (versi gelap). Pada template versi gelap saya lebih suka bermain CSS untuk mengatur desain layout dan membuat tampilan lebih peka dan memperhalus warna, sedangkan pada template yang versi terang saya kolaborasikan dengan image untuk mambuat varian pada layout template. Bluesforyou blogger merupakan release kedua dari template sebelumnya, untuk membuat template ini saya menggunakan kerangka template sebelumnya agar lebih mudah dan merubah seperlunya saja pada bagian-bagian tertentu. Terutama pada bagian homepage yang menggunakan mode grid. Bluesforyou Blogger Template antara dua versi tersebut terdapat perbedaan yang sangat mencolok, karena pada light version Bluesforyou Blogger Template saya menggunakan konsep gambar. Untuk fitur kedua template tersebut masih sama dengan template yang sebelumnya, berikut untuk lebih rinci dan detailnya serta screenshot dari Bluesforyou Blogger Template. Light Version<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78eRibUg_vLe3vaYPijDOL-FIlELdUNxjcg3NJhrLkx0NFXSF_ItBqvqDljxHBR6ovrw_0wQWzo_KxGkn4m9cLeFV-VuQNJJbN4itdJBW7r7BFhkCmUXBJOcD15U4PN9I4iUqS1sNsZM/s1600/Light-Bluesforyou.jpg" class="center"><img alt="Bluesforyou Blogger Template" height="412" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi78eRibUg_vLe3vaYPijDOL-FIlELdUNxjcg3NJhrLkx0NFXSF_ItBqvqDljxHBR6ovrw_0wQWzo_KxGkn4m9cLeFV-VuQNJJbN4itdJBW7r7BFhkCmUXBJOcD15U4PN9I4iUqS1sNsZM/s640/Light-Bluesforyou.jpg" title="Bluesforyou Blogger Template" width="640" /></a><a class="button" href="http://light-bluesforyou.blogspot.com/" rel="nofollow" target="_blank">Preview</a> <a class="button" href="http://faceblog-evolutions.googlecode.com/files/Bluesforyou%20%5BLight%5D.txt" rel="nofollow" target="_blank">Download</a> <blockquote class="atas">UPDATE 04 DESEMBER 2013 [Perbaikan Layout, dll]</blockquote> Dark Version<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MINimqvg_fXea7UYsdSgHYfk7HeAxLHnOzUQ2xJd2QAXl6skgh2uA6XYmz1nsu8BnVNaaVlNbAsdnZmZbKI-Rlw3VGIxVCYa-wetXC56UKOVb5mcAQONRFAQM7RWyx9h9T9EnslWUV0/s1600/Dark-Bluesforyou.jpg" class="center"><img alt="Bluesforyou Blogger Template" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MINimqvg_fXea7UYsdSgHYfk7HeAxLHnOzUQ2xJd2QAXl6skgh2uA6XYmz1nsu8BnVNaaVlNbAsdnZmZbKI-Rlw3VGIxVCYa-wetXC56UKOVb5mcAQONRFAQM7RWyx9h9T9EnslWUV0/s640/Dark-Bluesforyou.jpg" title="Bluesforyou Blogger Template" width="640" /></a><a class="button" href="http://dark-bluesforyou.blogspot.com/" rel="nofollow" target="_blank">Preview</a> <a class="button" href="http://faceblog-evolutions.googlecode.com/files/Bluesforyou%20%5BDark%5D.txt" rel="nofollow" target="_blank">Download</a> <blockquote class="atas">UPDATE 04 DESEMBER 2013 [Perbaikan Layout, dll]</blockquote> Berikut beberapa fitur dari Bluesforyou Blogger Template 1. Valid HTML5 dan CSS3 2. Score SEO 100% in Chkme.com 3. Auto post featured 4. Custom error 404 page 5. Fast Loading, dll (lainnya lihat sendiri di halaman demo). [ <a class="tooltip" href="http://dark-bluesforyou.blogspot.com/2013/11/intruksi-install-template-darkforyou.html" rel="nofollow" target="_blank" title="Instruksi Installasi Template">Instruksi Installasi Template</a> ]

Bluesforyou Blogger Template – elemen template Bluesforyou tidak jauh berbeda dengan template Darkfo…