Firman Webs

Home All post

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 dengan bermacam efek. Seperti yang sedang ng...

Membuat Lightbox Widget Contact Form Blogger

Sunday, 26 January 2014

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbGT9yE9qbr9rz9uK4fo6CKmBmcd196ACC9qBeRwslnjINFWW8KuQGjLdrtE2H4IVEpZ4DPOl6U_5OeuCBRw36A12CQfBZ1sadWN8ANv6HiVCYHT7XdWMmlWhfc6_KxakL-WewfGcv08/s1600/lightbox-contact-form.gif"><img alt="Membuat Lightbox Widget Contact Form Blogger" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqbGT9yE9qbr9rz9uK4fo6CKmBmcd196ACC9qBeRwslnjINFWW8KuQGjLdrtE2H4IVEpZ4DPOl6U_5OeuCBRw36A12CQfBZ1sadWN8ANv6HiVCYHT7XdWMmlWhfc6_KxakL-WewfGcv08/s1600/lightbox-contact-form.gif" title="Membuat Lightbox Widget Contact Form Blogger" width="400" /></a>Membuat Lightbox Widget Contact Form Blogger – dari beberapa tutorial yang pernah saya share di artikel sebelumnya ada beberapa style widget contact form dengan tampilan yang bervariasi. Pada tutorial ini saya akan kembali membahas mengenai widget contact form dengan efek lightbox agar tidak memerlukan halaman statis untuk memasang widget contact form dimana nantinya widget contact form akan muncul seperti kotak dialog karena ini juga cara yang sama seperti saat membuat modal dialog lainnya. Bagi yang ingin menggunakan, berikut tutorialnya untuk cara Membuat Lightbox Widget Contact Form Blogger. Pertama, masuk ke Edit HTML template blogger lalu cari kode <code>]]></b:skin></code> kemudian pasang kode berikut ini di atasnya. <pre data-codetype="CSS">#contacts-forms{width:100%;margin-bottom:10px} #widget-contact{border:2px solid #E74C3C;position:fixed;top:15%;left:50%;width:400px;height:auto;background-color:#fff;z-index:1000;display:none;margin:0 0 0 -200px} #widget-contact h3.juduls{background:#E74C3C;color:#fff;font:normal 18px Tahoma,Sans-Serif;position:relative;margin:0;padding:15px;text-transform:uppercase} #widget-contact h3.juduls a{position:absolute;top:10px;right:15px;color:#fff;font-size:22px;text-decoration:none;cursor:pointer} #ContactForm1 h2{display:none} #area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none} #ContactForm1_contact-form-email-message{width:355px;background:#222;outline:none;border:1px solid #E74C3C;overflow:hidden;height:150px;color:#fff;margin:0 10px 10px;padding:7px} #ContactForm1_contact-form-submit{font-weight:700;background:#E74C3C;position:relative;cursor:pointer;float:right;width:100px;outline:none;border:none;margin:0 10px 10px;padding:7px} #ContactForm1_contact-form-submit:hover{background:#d00} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:350px;background:#222;color:#fff;outline:none;border:1px solid #E74C3C;margin:0 10px 10px;padding:10px} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff} .contact-form-widget p{margin:0} .contact-form-widget{padding:5px} .buka-contact{width:100%;padding:10px;background:#E74C3C;color:#fff;font-size:16px;cursor:pointer} .buka-contact:hover{background:#d00}</pre>Selanjutnya cari kode <code></body></code> kemudian pasang kode berikut ini tepat di atasnya. <pre data-codetype="jQuery"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script type='text/javascript'> $(function(){$('.buka-contact').click(function(){$('#widget-contact').show();$('#area-overlay').fadeTo("normal",0.8);return false});$('#widget-contact .close').click(function(){$('#area-overlay, #widget-contact').hide();return false})}); </script></pre>Selanjutnya cari kode <code><div id='sidebar-wrapper'></code> kemudian pasang kode berikut ini tepat dibawahnya.<pre data-codetype="HTML"> <div id='contacts-forms'> <div id='widget-contact'> <h3 class='juduls'>Contact Form<a href='#' class='close' title='Close'>&#215;</a></h3> <b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'/> </div> <div id='area-overlay'></div> <button class='buka-contact'>Kirim Pesan</button> </div></pre>Langkah terakhir Simpan template. Sekarang buka Tata Letak, maka disitu sudah muncul satu elemen widget baru. Selanjutnya tinggal klik Tambahkan Widget > Gadget Lainnya > Formulir Kontak seperti pada gambar dibawah ini. <a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc2tUP2SUM9bRseAB0R2zpQ4mvogKybvXLGvsv6NHYiuzZt8ymzBrZes7LvzaCG-T52nyPMmEzN6Ys-agN-zlv7QvAPLYvSzTQBw3swTSclK2SPxI1zxLzwQxCv3YL9bY07QOsazxWekU/s1600/tambah-widget.gif"><img alt="Membuat Lightbox Widget Contact Form Blogger" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc2tUP2SUM9bRseAB0R2zpQ4mvogKybvXLGvsv6NHYiuzZt8ymzBrZes7LvzaCG-T52nyPMmEzN6Ys-agN-zlv7QvAPLYvSzTQBw3swTSclK2SPxI1zxLzwQxCv3YL9bY07QOsazxWekU/s1600/tambah-widget.gif" title="Membuat Lightbox Widget Contact Form Blogger" width="400" /></a>Cukup seperti itu saja untuk Membuat Lightbox Widget Contact Form Blogger. Selanjutnya apabila ingin merubah tampilannya bisa sesuaikan sendiri dengan merubah pada bagian CSS.

Membuat Lightbox Widget Contact Form Blogger – dari beberapa tutorial yang pernah saya share di artikel sebelumnya ada beberapa style widge...

Penggunaan Javascript Font Replacement (Cufon)

Wednesday, 22 January 2014

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusFqeaQAIJ0o4IrtQmAAU_zKC2HxRqdIs5WykmCajHOccDDZyqDKiDhHl_L8yL2ke-DOj-XhlXBy98nizloFzvjrqS6YA67ha75iwLu1iqSrUoQMMR9isOzlZCGgAQMSXrOLTlcqvGf0/s1600/Cufon.jpg"><img alt="Penggunaan Javascript Font Replacement (Cufon)" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjusFqeaQAIJ0o4IrtQmAAU_zKC2HxRqdIs5WykmCajHOccDDZyqDKiDhHl_L8yL2ke-DOj-XhlXBy98nizloFzvjrqS6YA67ha75iwLu1iqSrUoQMMR9isOzlZCGgAQMSXrOLTlcqvGf0/s1600/Cufon.jpg" title="Penggunaan Javascript Font Replacement (Cufon)" width="550" /></a>Penggunaan Javascript Font Replacement (Cufon) – ini merupakan javascript yang sering digunakan oleh para web developer untuk merender jenis font yang digunakan secara cepat dan mudah menggunakan fungsi canvas dan VML untuk menggantikan fungsi dari sebuah teks yang menggunakan metode image. Teks yang sudah di replace menggunakan cufon yui akan secara otomatis berubah menjadi canvas, atau secara awamnya teks tersebut sudah tidak bisa di block layaknya seperti sebuah gambar. Apabila di klik kanan pada mouse bisa dilihat menggunakan view image dan secara otomatis teks tersebut sudah convert kedalam sebuah gambar base64 yang bisa anda lihat pada address web browser. Kenapa bisa begitu? Karena Cufon yui adalah javascript yang bisa mengganti jenis font dengan menggunakan fungsi canvas dan VML dari browser kita tanpa perlu flash atau gambar. Cufon terdiri dari dua bagian individu yaitu sebuah generator font yang mengubah font untuk format proprietary dan sebuah mesin rendering yang ditulis dalam javascript. Cara untuk menggunakannnya pun cukup mudah, karena dari situs cufon juga sudah menyediakan tool generator yang siap digunakan untuk merender font atau anda juga bisa secara langsung download jenis font yang sudah ada. Untuk bisa menggunakan cufon, pasang terlebih dahulu kode berikut ini kedalam template blog taruh di atas kode <code></head></code> <pre><script type='text/javascript' src='http://cufon.shoqolate.com/js/cufon-yui.js'/> <script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Vegur_300.js'/> <script type='text/javascript'> Cufon.replace('#target_element', { fontFamily: 'Vegur', hover: true }); </script></pre><blockquote class="atas">Perhatikan pada baris ini: <pre>http://faceblog-evolutions.googlecode.com/files/Vegur_300.js</pre>Anda bisa menggantinya dengan URL font lain. Caranya agar lebih mudah bisa langsung download Cufon Kit di [www.cufonfonts.com] kemudian Upload ke Google code atau tempat penyimpanan lainnya yang dapat di gunakan untuk menyimpan file.js Pada baris ini adalah syntax yang digunakan untuk fungsi merender font: <pre>Cufon.replace('#target_element', { fontFamily: 'Vegur', hover: true });</pre>Pada <code>#target_element</code> anda bisa merubahnya dengan elemen yang anda inginkan. Sebagai contoh misalkan untuk merender tag <code>h1</code>, <code>h2</code>, <code>h3</code> maupun <code>#id</code> dan <code>.class</code> target maka contoh penulisaannya seperti berikut ini: <pre>Cufon.replace('h1, h2, h3, #target_element, .target_element', { fontFamily: 'Vegur', hover: true });</pre>Sedangkan pada <code>fontFamily: 'Vegur'</code> anda bisa menyesuikannya dengan nama font yang digunakan.</blockquote><h2>Penggunaan Cufon Lebih Dari Satu</h2>Anda juga bisa menggunakan lebih dari satu jenis cufon untuk target yang berbeda. Misalkan ingin menggunakan dua jenis font yakni Vegur dan Bebas Neue, maka contoh penulisannya seperti dibawah ini: <pre><script src='http://cufon.shoqolate.com/js/cufon-yui.js' type='text/javascript'/> <script src='http://faceblog-evolutions.googlecode.com/files/Vegur_300.js' type='text/javascript'/> <script src='http://faceblog-evolutions.googlecode.com/files/bebas-neue.js' type='text/javascript'/> <script type='text/javascript'> Cufon.replace('h1, .title', { fontFamily: 'Vegur', hover: true }); Cufon.replace('h2, .sidebar', { fontFamily: 'Bebas Neue', hover: true }); </script></pre><h2>Agar Cufon Support Internet Explorer (IE)</h2>Pada browser Internet Explorer Cufon tidak bekerja sebagai mana mestinya, karena pada saat pergantian font terjadi jeda (delay). Untuk mengatasi masalah tersebut solusinya tambahkan kode berikut ini diatas tag <code></body></code>. <pre><script type='text/javascript'> Cufon.now(); </script></pre>

Penggunaan Javascript Font Replacement (Cufon) – ini merupakan javascript yang sering digunakan oleh para web developer untuk merender jeni...

Post Snippet Pengganti Script Auto Readmore Blogger

Monday, 20 January 2014

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8xE1RsfzIRKdYHUCGdiINJ3be4D98slUZ60-GDFYEDNhv7eg1scPP_RFzoBdffuCZBlitubm8v8Zw5Nx04zbwefL0Te3z76wKG3mCR6aE1bvC2EnjHZduslfyFpbDRWj3TWvfJ9NpY4/s1600/post-snippet.gif"><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 ditampilkan pada homepage. Cara yang p...

Cara Membuat Widget Recent Post By Tag Label

Friday, 17 January 2014

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWA0F7dVFoUKhu9T-41h_SpaEbRfLfxkutbfWBMvpENtTeU9k5ZTosLgWxGIbf1048rAlu_PW0pTph9Bj11lfomyNbaAPg5D697gZmEqFnFwETxEbsap36Fo3JzJIf6LwcA3zBI1KkgQ/s1600/Recent-Post-By-Tag-Label.gif"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWA0F7dVFoUKhu9T-41h_SpaEbRfLfxkutbfWBMvpENtTeU9k5ZTosLgWxGIbf1048rAlu_PW0pTph9Bj11lfomyNbaAPg5D697gZmEqFnFwETxEbsap36Fo3JzJIf6LwcA3zBI1KkgQ/s550/Recent-Post-By-Tag-Label.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="550" /></a>Cara Membuat Widget Recent Post By Tag Label – maksud dari widget ini adalah untuk menampilkan daftar posting terbaru berdasarkan masing-masing label. Widget ini biasanya digunakan pada template magazine untuk menampilkan artikel-artikel terbaru pada post homepage berdasarkan label yang digunakan, atau bisa juga untuk diterapkan pada sidebar untuk menampilkan recent post berdasarkan label tertentu. Bahkan bisa juga digunakan untuk menampilkan daftar posting terakhir yang di publish layaknya seperti recent post biasa atau yang umum digunakan, semua tergantung dari pengaturan untuk kebutuhan seperlunya dari blog tersebut. Untuk yang masih bingung penerapannya, berikut uraian tutorialnya untuk memasang widget recent post by tag label baik itu pada sidebar maupun di bagian bawah list post homepage. 1. Pertama, copy kode berikut ini lalu taruh di atas kode <code></head></code> <pre><script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}function labelthumbs(json){document.write('<ul class="taglabel">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var thumburl;try{thumburl=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKhedygQ_B4FZpYAvzzDh_zRsAmEtVk1Tn4wKQA9cWkASWphjldYOYyYhq9PdzFUKYO3POWghcSyHJ0KzRlRcwZ2PvS-khC1jMfpWAfi_2OvheoTWmV-kFGlAQE34azrum1l7O6h1t1P5/'}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'"><img alt="'+posttitle+'" title="'+posttitle+'" class="label_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a> ');if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('')}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('')}}var towrite='';var flag=0;document.write(' ');if(showpostdate==true){towrite=towrite+cdday+'-'+monthnames[parseInt(cdmonth,10)]+'-'+cdyear;flag=1}if(showcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext=''+commenttext+'';towrite=towrite+commenttext;flag=1}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" title="'+posttitle+'">More »</a>';flag=1}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')} //]]> </script></pre>2. Kemudian copy lagi kode berikut ini dan taruh di atas kode <code>]]></b:skin></code> <pre>img.label_thumb{float:left;border:1px solid #aaa;margin-right:5px;height:55px;width:55px;padding:5px} .taglabel{float:left;width:100%;padding:0;margin:0} ul.taglabel li{padding:5px 0;min-height:73px}</pre>3. Selanjutnya pasang kode berikut ini pada 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/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre><blockquote class="atas">Perhatikan pada baris ini:<pre> <script type="text/javascript" src="/feeds/posts/default/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre>Apabila ingin merubah recent post menjadi default(tidak berdasarkan sebuah label), ganti baris kode tersebut dengan kode berikut ini:<pre> <script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script></pre></blockquote>Jika ingin memasang di bagian bawah post homepage namun belum terdapat elemen kolom widget, maka buat terlebih dahulu kolom widget untuk tempat penyimpanan kode, langkah-langkah membuatnya seperti berikut ini. Agar lebih simple maka saya bagi menjadi 2 kolom widget yang sejajar atau berdampingan dan 1 kolom widget dibawahnya. Untuk CSSnya sama seperti tadi, taruh diatas <code>]]></b:skin></code> <pre>#label-left .widget ul,#label-right .widget ul,#label-bottom .widget ul{margin-top:-10px!important} #label-left .widget,#label-right .widget,#label-bottom .widget{position:relative;display:block;border:1px solid #aaa;float:left;padding:1%} #label-left .widget,#label-right .widget{width:47%} #label-bottom .widget{width:97.3%} #label-left .widget li,#label-right .widget li,#label-bottom .widget li{font-family:Electrolize,sans-serif!important} #label-left h2,#label-right h2,#label-bottom h2{border-bottom:2px solid #63C4F1;background:#111;font:bold 18px Electrolize,sans-serif;color:#63C4F1;position:relative;display:block;top:-17px;right:-7px;padding:5px} #label-left .widget{margin-right:5px} #label-bottom .widget{margin-top:20px} #label-left h2:before,#label-right h2:before,#label-bottom h2:before{content:&#39;&#39;;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent transparent #111;border-style:solid;border-width:0 0 10px 12px} #label-left .widget ul,#label-right .widget ul,#label-bottom .widget ul{list-style:none;margin:0;padding:0} #label-left .widget ul li,#label-right .widget ul li,#label-bottom .widget ul li{font-size:13px;font-family:Oswald,sans-serif;border-bottom:1px solid #aaa;margin:0 auto;padding:5px} #label-left .widget li:last-child,#label-right .widget li:last-child,#label-bottom .widget li:last-child{border-bottom:none}</pre><blockquote class="atas">Perhatikan pada baris ini jika ingin menyesuikan lebar widget <pre>#label-left .widget,#label-right .widget{width:47%} #label-bottom .widget{width:97.3%}</pre></blockquote>Selanjutnya cari kode berikut ini: <pre><b:section class='main' id='main' showaddelement='no'> ....................bla bla bla................... </b:section></pre>Jika di lihat secara keseluruhan tampilan lengkapnya struktur kode tersebut seperti dibawah ini: <a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s1600/main-section.gif"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WSY-t7pR2nFcZYRVa9ev-SpL_ry8xusOiEbDCzF40U-AOAgAqcIT2jISi1F8wek1cC5oOdCi8aWI4bgz-bhqAE4e_AqXlqCwEBey1siD5CHb0p1Xmh36m37uI0jN-BsTZ_jHFJDMSzE/s640/main-section.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="550"/></a>Perhatikan kode <code></b:section></code>, jika sudah ketemu copy kode berikut ini lalu paste tepat dibawahnya kode tersebut. <pre><b:if cond='data:blog.url == data:blog.homepageUrl'> <b:section class='label-left' id='label-left' preferred='yes'/> <b:section class='label-right' id='label-right' preferred='yes'/> <b:section class='label-bottom' id='label-bottom' preferred='yes'/> </b:if></pre>Sekarang lihat pada halaman tata letak blog, disitu sudah terdapat 3 elemen widget. <a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdyQTXoGAgeoQIcOlH-mg5PewqGaNdCqqCyJybnk4E3j30HWGB9UNDuKWFD3uClQ_IyFhuFnahFjIAhAKYQDT_i9h-3BX8hPwU13FzmyiA9-WgSzUe0-hhUKgSlFQtRsVgQnrMYvyzynE/s1600/widget-bawah-post.gif"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdyQTXoGAgeoQIcOlH-mg5PewqGaNdCqqCyJybnk4E3j30HWGB9UNDuKWFD3uClQ_IyFhuFnahFjIAhAKYQDT_i9h-3BX8hPwU13FzmyiA9-WgSzUe0-hhUKgSlFQtRsVgQnrMYvyzynE/s320/widget-bawah-post.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="320" /></a>Selanjutnya tinggal pasang kode yang terdapat pada point 3 kedalam widget HTML/Javascript. <a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjod3rFWbkAOMS8kj60Ug4w7AcrelyACA7Gyn0l6ZlUQJXK4-CTQTxSIEedVVQNkY5YRHhJHWhIp_tVx0R9WicU0zpglOEnJOtcAhT-dIBtCFXu8Jnq9cJLDSxRcEjYgUQWJuLGUIpxM_8/s1600/tambah-widget-html.gif"><img alt="Cara Membuat Widget Recent Post By Tag Label" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjod3rFWbkAOMS8kj60Ug4w7AcrelyACA7Gyn0l6ZlUQJXK4-CTQTxSIEedVVQNkY5YRHhJHWhIp_tVx0R9WicU0zpglOEnJOtcAhT-dIBtCFXu8Jnq9cJLDSxRcEjYgUQWJuLGUIpxM_8/s320/tambah-widget-html.gif" title="Cara Membuat Widget Recent Post By Tag Label" width="320" /></a>Langkah terakhir Simpan dan selesai.

Cara Membuat Widget Recent Post By Tag Label – maksud dari widget ini adalah untuk menampilkan daftar posting terbaru berdasarkan masing-ma...

Cara Memasang Auto Post Slider Carousel di Blog

Tuesday, 14 January 2014

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenpXfZsisCS4ccb4BKkfk5pqmgFH8C2yPBMaXI6PcnysZlXZMs-pP5VSnM-ErqAJvlW9G_PZPNR2uhwgxIUKhdudoca6qa4_DmPKnj7CsUC8ZMKO55LeWGVTakZC6IYkTrpeL8yAkAhM/s1600/auto-post-slider-carousel.jpg"><img alt="Cara Memasang Auto Post Slider Carousel di Blog" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhyphenhyphenpXfZsisCS4ccb4BKkfk5pqmgFH8C2yPBMaXI6PcnysZlXZMs-pP5VSnM-ErqAJvlW9G_PZPNR2uhwgxIUKhdudoca6qa4_DmPKnj7CsUC8ZMKO55LeWGVTakZC6IYkTrpeL8yAkAhM/s520/auto-post-slider-carousel.jpg" title="Cara Memasang Auto Post Slider Carousel di Blog" width="520" /></a>Cara Memasang Auto Post Slider Carousel di Blog – terdapat berbagai macam jenis slider yang dapat kita terapkan ke dalam blog dan salah satunya adalah Slider Carousel. Slider Carousel merupakan slider yang sudah tiga kali saya terapkan ke dalam template blog yang beberapa waktu lalu saya bagikan. Pada tutorial ini akan saya bahas penerapan Slider Carousel ke dalam template agar sewaktu siapa saja bagi yang ingin menggunakan slider untuk memodifikasi template blognya supaya lebih mudah. Slider Carousel merupakan slider bergaya horisontal yang menampilkan thumbnail dari setiap posting secara otomatis yang dapat kita set agar menampilkan posting terbaru atau bisa juga post by tag label. Agar lebih jelasnya, berikut tutorial Cara Memasang Auto Post Slider Carousel di Blog. 1. Pada Dashboard blog masuk ke Edit HTML template. 2. Kemudian taruh kode berikut ini diatas kode <code></head></code> <pre><script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js'/></pre>3. Selanjutnya copy kode CSS berikut ini lalu taruh di atas kode <code>]]></b:skin></code> <pre>#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto} #featured{border:2px solid #444;outline:1px solid #000;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto} #featured ul{width:9999px} #featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden} #featured li{width:150px;display:inline-block;float:left;height:150px;background:#222;border-left:1px solid #111;border-right:1px solid #333;} .thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000} .thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;} .title-featured{text-align:center;position:relative;margin-top:-20px} .title-featured h4{font-size:90%;max-height:45px;overflow:hidden} .arrow{position:absolute;display:block;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1i-5uOpnLzQMjhRe1xLY3B-2UyJWQWuy6Riug7VGGiwqhMzlJqhyphenhypheniHv7J5LJ5iNU79N5Wzfi2AevCEDJmRdMP1tf2LXoAfmzMJqB-PMIA-q4peWPZOjvVKT8nB66ADXELjFAuXuP4f4/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset} .arrow.back{background-position:0 50%;left:10px} .arrow.forward{background-position:100% 50%;right:10px} span.slideloading{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUe0SwgMIrq9NPtTeFN6Tz3ONCSVo1KvgbSZ4Pt6S4sbfdMR1-9Cnga4-69FbY97ysx8SSM8kD2HAlJrz9Cx1fbCX44dA0xKMQxEaHgxWCfIq8ddt73utRYorxEV9XfLqmh-GjMEIJrVc/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}</pre>4. Jika ingin membuat Slider Carousel tampil di bawah header seperti pada <a href="http://mas-andes.blogspot.com/2013/12/bluesforyou-blogger-template.html" target="_blank" title="Bluesforyou Blogger Template">template Bluesforyou</a> maka cari kode <code><div id='main-wrapper'></code> lalu taruh kode berikut ini tepat di atasnya. <pre><b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='featured-wrap'> <div id='featured'> Loading... </div> </div> </b:if></pre>Jika ingin membuat Slider Carousel tampil di atas footer seperti pada <a href="http://mas-andes.blogspot.com/2013/12/bluesmulus-blogger-template.html" target="_blank" title="Bluesmulus Blogger Template">template Bluesmulus</a> maka cari kode <code><div id='footer-wrapper'></code> lalu taruh kode yang ada pada point 4 tepat di atasnya. 5. Langkah terakhir Simpan template. Demikian akhir dari tutorial Cara Memasang Auto Post Slider Carousel di Blog, apabila ingin merubah tampilan slider maka ubah saja dan sesuaikan pada kode CSS.

Cara Memasang Auto Post Slider Carousel di Blog – terdapat berbagai macam jenis slider yang dapat kita terapkan ke dalam blog dan salah sat...

List Icon Font Awesome dan CSS Value Content V4.0.3

Sunday, 29 December 2013

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxGbO8ABWT7XZFkSTHOVkJxQWSvySMMeEAeXLekR2aV5zZMFcwCbaFivdWgrBBYgcCf5SdU3HTr8aetTvhsZhIf0MvO9vSbODfsJN0P2l2G54Xd9qjWw6qAzkUWMIaq2fJbhnvotacXE/s1600/font-awesome.gif"><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 menjamah dunia blogging dan mengupdate blog in...

CSS Animasi Menu Dropdown Blogger

Friday, 13 December 2013

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgDZspUq4KcyH65wiA6nKiTM_91PTlDZOMKqifJ-4zGNx8YvSI3WyhPXeQ3fgYJTORlUv_Ln6fOGgRo9gvsBumWGNS0VHnkTUfE3rKFQ9jSIyoqMZxnOHg0NYl7pu3p0PBUDuorxTWNGo/s1600/animasi-menu-css.gif" 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 navigasi blogger maka sekarang sedikit akan ...