Penggunaan Javascript Font Replacement (Cufon)

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 </head>

<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>

Perhatikan pada baris ini:

http://faceblog-evolutions.googlecode.com/files/Vegur_300.js

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:

Cufon.replace('#target_element', { fontFamily: 'Vegur', hover: true });

Pada #target_element anda bisa merubahnya dengan elemen yang anda inginkan. Sebagai contoh misalkan untuk merender tag h1, h2, h3 maupun #id dan .class target maka contoh penulisaannya seperti berikut ini:

Cufon.replace('h1, h2, h3, #target_element, .target_element', { fontFamily: 'Vegur', hover: true });

Sedangkan pada fontFamily: 'Vegur' anda bisa menyesuikannya dengan nama font yang digunakan.

Penggunaan Cufon Lebih Dari Satu

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:

<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>

Agar Cufon Support Internet Explorer (IE)

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 </body>.

<script type='text/javascript'> Cufon.now(); </script>

Penggunaan Jenis Efek jQuery Modal Dialog

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 </head>

<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'/>

Kemudian pasang kode berikut ini di atas kode </body>

<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>

Kemudian Simpan template.

Struktur HTML modal dialog:

<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>
            <p>Disini Isi Konten Kotak Dialog</p>
        </div>
    </div>
</div>

<!-- Tombol untuk menampilkan modal dialog -->
<button class="md-trigger" data-modal="modal-1">Open Dialog</button>
<div class="md-overlay"></div>

class md-effect-1 dan ID modal-1 adalah tipe efek yang di gunakan (Konfigurasi lihat tabel).
<p>Disini Isi Konten Kotak Dialog</p> adalah isi dari kotak dialog.

Untuk menentukan masing-masing efek yang berbeda, lihat pada tabel konfigurasi dibawah ini:

class	id	effect
md-effect-1	modal-1	Fade in & Scale
md-effect-2	modal-2	Slide in (right)
md-effect-3	modal-3	Slide in (bottom)
md-effect-4	modal-4	Newspaper
md-effect-5	modal-5	Fall
md-effect-6	modal-6	Side Fall
md-effect-7	modal-7	Sticky Up
md-effect-8	modal-8	3D Flip (horizontal)
md-effect-9	modal-9	3D Flip (vertical)
md-effect-10	modal-10	3D Sign
md-effect-11	modal-11	Super Scaled
md-effect-12	modal-12	Just Me
md-effect-13	modal-13	3D Slit
md-effect-14	modal-14	3D Rotate Bottom
md-effect-15	modal-15	3D Rotate In Left
md-effect-16	modal-16	Blur
md-effect-17	modal-17	Let me in
md-effect-18	modal-18	Make way!
md-effect-19	modal-19	Slip from top

Agar lebih jelasnya dari masing-masing efek yang ada bisa dilihat pada halaman demo.

demoDemikian untuk tata cara menerapkan dan Penggunaan Jenis Efek jQuery Modal Dialog, Selebihnya bisa berkreasi sendiri di blog masing-masing.

Penggunaan jQuery Toggle, fadeToggle dan slideToggle

Penggunaan jQuery Efek Toggle, fadeToggle dan slideToggle – kata "toggle" didalam bahasa jQuery identik dengan efek show/hide yang tidak lain adalah sebuah tombol yang berfungsi untuk menampilkan atapun menyembunyikan elemen. Namun sebelum lebih lanjut ke tuorial ada baiknya kita pahami terlebih dahulu tentang apa itu jQuery serta cara menggunakannya. Agar lebih leluasa melakukan kontrol pada halaman web/blog pastikan terlebih dahulu sudah terpasang jQuery didalam template blog dan hanya menerapkan satu jQuery saja terserah mau menggunakan yang versi berapa, namun usahakan untuk menggunakan versi yang lebih baru. Karena versi yang terbaru adalah perbaikan dari bug yang terdapat pada versi sebelumnya. Versi terbaru jQuery saat ini adalah jquery-1.10.2. Untuk memasang jQuery didalam template bisa menaruhnya diatas kode </head> atau bisa juga di atas </body>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Apabila sudah ada satu jQuery yang sudah terpasang didalam template, maka abaikan saja kode diatas. Sekarang kembali ke pokok bahasan untuk menerapkan jQuery Toggle, fadeToggle dan slideToggle. Metode ini sudah tidak asing lagi dan sering digunakan untuk membuat sedikit efek pada elemen tertentu didalam sebuah template. Agar mudah dipahami ada baiknya jika kita bahas satu per satu dari masing-masing efek tersebut.

Sebelum menentukan efek yang akan dipasang, terlebih dahulu sembunyikan elemen yang sudah anda pilih. Gunakan CSS property display:none, bukan visibility:hidden. Kemudian untuk efeknya nanti baru kita tampilkan menggunakan metode toggle(), fadeToggle() ataupun slideToggle().

Penggunaan jQuery Toggle

jQuery Toggle digunakan untuk membuat efek show() dan hide() yang tidak lain adalah untuk menampilkan dan menyembunyikan elemen dengan menggunakan metode toggle(). Syntax yang di gunakan seperti dibawah ini:

$(selector).toggle(speed,easing,callback)

Contoh:

Apabila di presentasikan contoh penulisannya script untuk menyembunyikan dan menampilkan suatu elemen seperti dibawah ini:

#btn1{
padding:5px 15px;
background:#2ecc71;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#contoh1{
display:none;
text-align:center;
background:#2ecc71;
color:#fff;
padding:50px 0
}

<button id='btn1'>Toggle</button>
<div id='contoh1'>Contoh penggunaan jQuery toggle</div>

Default

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle();
  });
});

Edit & Demo

Dengan menambahkan parameter speed

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle(1000);
  });
});

Edit & Demo

Dengan menambahkan parameter callback

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#contoh1").toggle(1000,function(){
      alert("Pesan ini muncul setelah toggle selesai berjalan");
    });
  });
});

Edit & Demo

Penggunaan jQuery fadeToggle

Metode fadeToggle() digunakan untuk memunculkan efek fadeIn() dan fadeOut() pada elemen yang sudah ditentukan. Syntax yang digunakan seperti dibawah ini:

$(selector).fadeToggle(speed,easing,callback)

Contoh:

Untuk menambahkan parameter speed maupun callback langkahnya sama seperti pada metode toggle().

#bton1{
padding:5px 15px;
background:#D94839;
color:#fff;
border:none;
cursor:pointer;
display:inline-block
}
#gambar{
display:none;
text-align:center;
padding:10px;
background:#E74C3C;
border:5px solid #fff
}
#gambar img{
width:300px;
height:200px;
border:5px solid #fff
}

<button id='bton1'>fadeToggle</button>
<div id="gambar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2RptzVXVNO3N1Mq3ZBNNhEGmC_ST8w41jnVwSOLDcOeTdZ128VqJHCaW9qdCNS6mFxGPPuap_Bw_R30Dhbpsc5p_sUqYX3ONvoYDbHjbzkKsFYBcFmOFk2hRPV4ejsPOsRmcKHdDVN_Y/h200/Paramore+%287%29.jpg"/></div>

$(document).ready(function(){
  $("#bton1").click(function(){
    $("#gambar").fadeToggle();
  });
});

Edit & Demo

Penggunaan jQuery slideToggle

Fungsinya sama seperti metode toggle() dan fadeToggle(), hanya saja efeknya yang berbeda. Metode slideToggle() digunakan untuk membuat efek slideDown() dan slideUp(). Syntax yang digunakan seperti dibawah ini:

$(selector).slideToggle(speed,easing,callback)

Contoh:

Contoh sederhana untuk deklarasi penulisannya script seperti dibawah ini:

#buton1{
padding:5px 15px;
background:#D94839;
color:#fff;
cursor:pointer;
display:inline-block
}
#contoh2{
display:none;
text-align:center;
background:#E74C3C;
color:#fff;
padding:50px 0
}

<div id="buton1">slideToggle</div>
<div id="contoh2">Contoh penggunaan jQuery slideToggle</div>

Default

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle();
  });
});

Edit & Demo

Dengan Menambahkan parameter speed

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle(1000);
  });
});

Edit & Demo

Dengan Menambahkan parameter callback

$(document).ready(function(){
  $("#buton1").click(function(){
    $("#contoh2").slideToggle(1000,function(){
      alert("Pesan ini muncul setelah slideToggle selesai berjalan");
    });
  });
});

Edit & Demo

Konfigurasi:

Parameter	Deskripsi
speed	Opsional. Untuk menentukan kecepatan efek. Value: milidetik (contoh: 1000, 2000, dst). "slow" "fast"
easing	Opsional. Untuk menentukan kecepatan animasi pada titik tertentu. Value default yang digunakan adalah "swing" Value: "swing" bergerak lebih lambat di awal/akhir, tapi lebih cepat di tengah. "linear" bergerak dalam kecepatan konstan.
callback	Opsional. Fungsi yang akan dieksekusi setelah metode toggle(), fadeToggle() ataupun slideToggle() sudah selesai berjalan.

Modifikasi Efek Hover Pada Button Dengan CSS3

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 </head>.

<link rel='stylesheet' href='https://mas-andes.googlecode.com/svn/trunk/hover-min.css' media='all'/>

Kemudian simpan template.

DEMO

Untuk menentukan masing-masing efek yang akan di gunakan, kode pemanggilannya seperti dibawah ini:

2D Transforms

<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>

Border Transitions

<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>

Shadow and Glow Transitions

<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>

Speech Bubbles

<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>

Curls

<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>

Demikian untuk cara Modifikasi Efek Hover Pada Button Dengan CSS3 agar setiap button dapat memiliki efek hover yang berbeda-beda.

Membuat Lightbox Widget Contact Form Blogger

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 ]]></b:skin> kemudian pasang kode berikut ini di atasnya.

#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}

Selanjutnya cari kode </body> kemudian pasang kode berikut ini tepat di atasnya.

<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>

Selanjutnya cari kode <div id='sidebar-wrapper'> kemudian pasang kode berikut ini tepat dibawahnya.

<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>

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.
Cukup seperti itu saja untuk Membuat Lightbox Widget Contact Form Blogger. Selanjutnya apabila ingin merubah tampilannya bisa sesuaikan sendiri dengan merubah pada bagian CSS.

Post Snippet Pengganti Script Auto Readmore Blogger

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 <!--more--> pada posting mode HTML. Alternatife lain yang akan saya bahas pada tutorial ini adalah menggunakan metode data:post.snippet untuk memotong post artikel dan data:post.thumbnailUrl 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 <b:includable id='post' var='post'> maka dibawahnya akan terdapat dua kode <data:post.body/>, kemudian replace kode <data:post.body/> yang kedua dengan kode berikut ini:

<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/AVvXsEhJJnXhC1a6oovkog5ql-4DZLMIiR_2zSaPolDtDg8X-NaDeRGUk8-CEZq80M6zgENNo5X-UA9zTgJSJg8DAm_zzasAlDqzihLjFW9-GF84Ci4hN1ya9fPRJrYZED0GaehfhBmkL35uyVo/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>

Untuk mengatur tampilannya anda bisa menambahkan kode CSS seperti dibawah ini dan taruh di atas kode ]]></b:skin>

.thumb img{float:left;margin-right:10px;width:72px;height:72px}
.jump-link{display:inline;float:right;padding:5px;background:#ddd;margin-top:20px}

Diatas hanya dasarnya, untuk merubah tampilan lebih lanjut atur pada bagian CSS dengan penambahan background, border, dll agar lebih sesuai dengan yang di inginkan.

Cara Membuat Widget Recent Post By Tag Label

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 </head>

<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='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';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/AVvXsEj3L8aYZk0Suk0SZyiC0GZ3ZysMcSDoPNxHv8JQ-x23g4jFV0dYdt-b4rwoI-RiGwE_uggCE5Y87QmdE8wHsEHL2-h5zCjj7wDNP9rLDJyrbeNLhZMaGZ28rSG51T9YgQmniflN6d9yyFjr/'}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><br>');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('<br>');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>

2. Kemudian copy lagi kode berikut ini dan taruh di atas kode ]]></b:skin>

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}

3. Selanjutnya pasang kode berikut ini pada Widget HTML/Javascript.

<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>

Perhatikan pada baris ini:

<script type="text/javascript" src="/feeds/posts/default/-/NAMA_LABEL?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Apabila ingin merubah recent post menjadi default(tidak berdasarkan sebuah label), ganti baris kode tersebut dengan kode berikut ini:

<script type="text/javascript" src="/feeds/posts/default?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

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 ]]></b:skin>

#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:'';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}

Perhatikan pada baris ini jika ingin menyesuikan lebar widget

#label-left .widget,#label-right .widget{width:47%}
#label-bottom .widget{width:97.3%}

Selanjutnya cari kode berikut ini:

<b:section class='main' id='main' showaddelement='no'>
....................bla bla bla...................
</b:section>

Jika di lihat secara keseluruhan tampilan lengkapnya struktur kode tersebut seperti dibawah ini: Perhatikan kode </b:section>, jika sudah ketemu copy kode berikut ini lalu paste tepat dibawahnya kode tersebut.

<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>

Sekarang lihat pada halaman tata letak blog, disitu sudah terdapat 3 elemen widget.
Selanjutnya tinggal pasang kode yang terdapat pada point 3 kedalam widget HTML/Javascript.
Langkah terakhir Simpan dan selesai.