Design, Tutorial and Tips Trik Blogger | Lostsector

7 Style Tabel Modifikasi CSS3 Untuk Blogger
Unlimited Backlink Blogger Gratis
Cara Membuat Email Subscribe di Bawah Postingan Blog
Cara Menyembunyikan Widget Pada Halaman Blogspot
Cara Membuat / Memasang Permalink SEO di Blog
CSS Buttons With Transitional Hover Untuk Blogger
Cara Menampilkan Widget Pada Halaman Tertentu Blogspot
Cara Membuat Popup Email Subscribe / Berlangganan Artikel Terbaru Pada Blog
Bagaimana Cara Memasang Email Subscription di Bawah Postingan Blog ?
Cara Mudah Membuat Formulir Contact Us / Hubungi Kami di Blog
Minify / Compressor Javascript Rekomendasi Google

7 Style Tabel Modifikasi CSS3 Untuk Blogger

Posted: 22 Mar 2013 03:25 PM PDT

Tabel blog pada dasarnya adalah sebuah element pada blog yang mempunyai petak-petak atau yang paling sering kita sebut sebagai column dan row dengan garis yang mengelilingi masing-masing row dan colom. Penggunaan tabel sudah sangat lumrah dan tidak jarang pula digunakan oleh para blogger untuk kepentingan tertentu demi mempercantik tampilan blog/web mereka.

Mungkin anda pernah menemukan sebuah blog dengan tabel yang mempunyai tampilan yang dikombinasikan dengan berbagai variasi warna baik itu warna background, garis (border) dan penggabungan beberapa cell sehingga tampilannya terlihat sangat mencolok dan berbeda dengan yang lain. Sebetulnya, tabel seperti itu adalah tabel hasil modifikasi dengan cara menambahkan kode CSS kedalam template mereka dan jika tidak menggunakan tambahan CSS, maka tampilannya akan terlihat sangat sederhana.

Proses pembuatan table pada blog/website sudah pernah saya bahas beberapa waktu yang lalu, namun karena pada kesempatan kali ini saya hanya akan memberikan beberapa kode CSS yang sudah siap pakai untuk mempercantik tabel, untuk itu saya sangat dan sangat merekomendasikan kepada anda untuk membaca terlebih dahulu artikel Panduan Lengkap Membuat & Mengatur Tabel Pada Blog, karena artikel tersebut akan menjadi referensi anda untuk pembuatan dan modifikasi tabel blog.

Well, sebelum lanjut saya ingin memberikan sebuah kerangkan tabel komplit dengan pembagian-pembagian seperti Judul, Header, Column dan Row dalam satu kesatuan seperti yang bisa anda lihat dibawah ini :

<table border="1">
<caption>TITLE</caption>
<tbody>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td>Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
<tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
<tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</tbody>
</table>

Kerangka table diatas, jika ditampilkan secara standard tanpa ada tambahan CSS yang mengatur tampilannya, maka akan terlihat seperti gambar di bawah ini.

Nah, jika ingin memberikan sedikit sentuhan agar tampilan table diatas menjadi lebih baik dan lebih mencolok, sebaiknya anda menambahkan kode CSS kedalam template sebagai pengaturnya dan dibawah ini ada 7 style tabel yang sudah siap pakai (Pure CSS3) yang saya lengkapi dengan demo by image sehingga memudahkan anda untuk memilih sesuai selera.

CSS Tabel dan Cara Menempatkannya Didalam Template

Pilih salah satu kode CSS tabel yang akan saya berikan sebentar, kemudian copy kode tersebut dan pastekan tepat berada di atas tag ]]></b:skin>.

1. Hitam Biru Style - CSS

table[border="1"] {border-collapse:collapse;}
table[border="1"] caption {font:normal normal 11px Arial,Sans-Serif;color:#fff;background-color:#333;}
table[border="1"] tr {background:#fafafa;}
table[border="1"] caption {background:#000;vertical-align:top; padding:5px 10px; border:1px solid #bbb;color:#fff}
table[border="1"] th, table [border="1"] td {vertical-align:top; padding:5px 10px; border:1px solid #bbb;}
table[border="1"] tr:nth-child(even) {background:#f5f5f5;}
table[border="1"] th {background:#418AA4;color:#fff;font-weight:bold;}

2. Black Style - CSS

table[border="1"] {border-collapse:collapse;font:normal normal 11px Arial,Sans-Serif;color:#ccc;-webkit-box-shadow:0 1px 3px black;-moz-box-shadow:0 1px 3px black;box-shadow:0 1px 3px black;}
table[border="1"] caption {font:normal normal 11px Arial,Sans-Serif;color:#fff;background-color:#333;}
table[border="1"] tr {background-color:#222;}
table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:1px solid #3c3c3c;}
table[border="1"] td:nth-child(even) {background-color:#1c1c1c;}
table[border="1"] th {background-color:#555;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666',endColorstr='#555');background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#555));background-image:-webkit-linear-gradient(top,#666,#555);background-image:-moz-linear-gradient(top,#666,#555);background-image:-ms-linear-gradient(top,#666,#555);background-image:-o-linear-gradient(top,#666,#555);background-image:linear-gradient(top,#666,#555);color:black;font-size:12px;text-shadow:0 1px 0 rgba(255,255,255,.4);font-weight:bold;}

3. Grey Dark Style - CSS

table[border="1"] {color: #333;font-family: Helvetica, Arial, sans-serif;border-collapse:collapse; border-spacing: 0;}
table[border="1"] caption {height: 30px;color:#fff;background-color:#555;}
table[border="1"] td, th {border: 1px solid transparent;height: 30px;transition: all 0.3s;}
table[border="1"] th {background: #DFDFDF;font-weight: bold;}
table[border="1"] td {background: #FAFAFA;text-align: center;}
table[border="1"] tr:nth-child(even) td { background: #F1F1F1;}
table[border="1"] tr:nth-child(odd) td { background: #FEFEFE; }
table[border="1"] tr td:hover { background: #666; color: #FFF; }

4. Dark Green Style - CSS

table[border="1"] {border-collapse:collapse;font:normal 12px Verdana,Arial,Sans-Serif;color:#333;}
table[border="1"] tr {background:#F0F0F0;}
table[border="1"] th, table[border="1"] td, {vertical-align:top;padding:5px 10px;border:2px solid #fff;}
table[border="1"] td:nth-child(odd) {background:#DEDEDE;}
table[border="1"] th, table[border="1"] caption {background:#4A6D67;color:#fff;font-weight:bold;}

5. Red Vs Gray Style - CSS

table[border="1"]{border-collapse:collapse;margin:0px;}
table[border="1"],table[border="1"] th, table[border="1"] td{border:1px solid #ccc;padding:2px 7px;}
table[border="1"] caption {font:normal normal 11px Tahoma,Sans-Serif;color:#fff;background-color:#800000;}
td{vertical-align:top;}
table[border="1"] th{background-color:#fafafa;text-align:left;}

6. Shadow Style - CSS

table[border="1"] caption {font:normal normal 11px Tahoma,Sans-Serif;color:#fff;background-color:#C2B084;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);-moz-box-shadow:0 1px 3px rgba(0,0,0,.5);box-shadow:0 1px 3px rgba(0,0,0,.5);}
table[border="1"] {border-collapse:collapse;font:normal normal 11px Verdana,Arial,Sans-Serif;color:#666;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);-moz-box-shadow:0 1px 3px rgba(0,0,0,.5);box-shadow:0 1px 3px rgba(0,0,0,.5);}
table[border="1"] tr {background-color:#fafafa;}
table[border="1"] th, table[border="1"] td {vertical-align:top;padding:5px 10px;border:1px solid white;}
table[border="1"] tr:nth-child(even) {background-color:#f5f5f5;}
table[border="1"] th {background-color:#ECE9D8;color:#ACA899;font-weight:bold;}

7. Blogger Style - CSS

table[border="1"] {border-collapse:collapse;font:normal normal 11px Trebuchet,"Trebuchet MS",Arial,Sans-Serif;color:#3366CC;}
table[border="1"] tr {background:#E1D4C1;}
table[border="1"] th, table[border="1"] caption, table[border="1"] td {vertical-align:top;padding:5px 15px;border:1px solid #fff;}
table[border="1"] td:nth-child(odd) {background:#F5EDE3;}
table[border="1"] th {background:#104386;color:#99CCFF;font-weight:bold;}

CSS diatas bisa anda modifikasi kembali sehingga menghasilkan tampilan yang lebih sempurna lagi serta sesuai dengan apa yang anda harapkan. Semoga bermanfaat dan terima kasih!

Unlimited Backlink Blogger Gratis

Posted: 22 Mar 2013 08:17 AM PDT

Backlink atau Linkback merupakan salah satu teknik sehingga blog bisa bersaing di SERP dan teknik ini juga merupakan salah satu langkah dalam Pengoptimalan SEO Friendly. Backlink yang saya maksudkan disini adalah Backlink Yang Berkualitas, mempunyai pagerank yang tinggi serta blog dofollow.

Mencari blog ataupun website yang dofollow tidaklah rumit dan pada kesempatan kali ini saya akan menjelaskan bagaimana cara menemukan blog dofollow dan bagaimana cara mendapatkan backlink gratis. Nah berikut ini merupakan penjelasan singkat mengenai 2 hal tersebut :

1. Cara Menemukan Blog / Web Dofollow dan Mendapatkan Baclink.

Website social bookmarking yang sudah terkenal seperti facebook, twitter, google plus, pinterest dan website lainnya adalah situs yang bisa dijadikan sarana untuk mendapakan baclink secara gratis. Namun diluar daripada itu, tentu anda juga bisa mendapatkan backlink secara gratis dan unlimited (tanpa batas) dari blog/web lain. Nah, untuk menemukan web/blog yang dofollow tersebut, anda hanya perlu melakukan hal di bawah ini.

Pertama, buka search engine seperti google.com, bing.com, yahoo.com dan mesin pencari lainnya, kemudian masukkan keyword seperti dibawah ini :

inurl: Keyword sobat disini"This site uses KeywordLuv"

atau

inurl: Keyword sobat disini"Enable CommentLuv"

Keterangan :

Ganti text yang berwarna biru dengan keyword yang anda inginkan, atau anda juga bisa menggunakan keyword di bawah ini untuk menemukan blog yang dofollow.

Contoh »

inurl: Tutorial Blogger"This site uses KeywordLuv"

atau

inurl: Tutorial Blogger"Enable CommentLuv"

Demo By Image »

Pada halaman pertama mesin pencari, biasanya blog-blog tersebut adalah blog yang dofollow. Buka salah satu (bisa juga semuanya) kemudian berkomentarlah sewajarnya, tapi ingat jangan lupa memasukkan Link Hidup kedalam kolom komentar karena link hidup tersebut yang nantinya akan menjadi Backlink yang menuju langsung ke blog anda. Namun jika anda belum atau tidak tahu bagaimana cara meninggalkan Link Hidup pada kolom komentar, berikut penjelasannya.

2. Cara Memasukkan Link Hidup (Aktif) Kedalam Kolom Komentar

Sebelum saya lanjutkan, terlebih dahulu saya ingin menjelaskan apa itu link hidup. Link Hidup Web menurut saya pribadi adalah sebuah link yang bisa diklik langsung yang mengarah ke halaman web lain dan tanpa harus melakukan pencopyan dan mempastenya pada address bar.

Contoh Link Hidup (Link Aktif)

http://www.lost-sector.net/

Contoh Link Tidak Hidup (Tidak Aktif)

http://www.lost-sector.net/

Sekarang, untuk penjelasan bagaimana cara memasukkan link aktif kedalam kolom komentar, saya akan bagi menjadi 3 cara dan berikut caranya :

1. Memasukkan link dengan menggunak attribut <a href="...">
Pada saat anda membuat komentar dan ingin memasukkan link hidup, anda hanya perlu memasukkan attribut <a href="..."> kedalamnya. Perhatikan contoh komentar di bawah ini :

"Nice post, jangan lupa berkunjung balik ke Lost-Sector"

Nah, kata Lost-Sector akan saya berikan link aktif, dan untuk menerapkannya, cukup dengan menjepit kata yang akan diberi link aktif dengan cara menambahkan attribut <a href="..."> dan diakhiri dengan attribut penutup </a>.

"Nice post, jangan lupa berkunjung balik ke <a href="www.lost-sector.net">Lost-Sector</a>"

2. Berkomentar Dengan Menggunakan Akun OpenID
Jika anda tidak ingin repot menambahkan/memasukkan link aktif dengan menambahkan attribut <a href="..."> kedalam kolom komentar, maka berkomentarlah dengan menggunakan akun OpenID kemudian pada form "URL OpenID" masukkan URL blog anda kemudian klik lanjutkan. Lihat gambar untuk lebih jelasnya.

3. Berkomentar Dengan Menggunakan Akun Name/URL
Dua cara diatas bahkan yang ketiga ini semuanya mempunyai tujuan yang sama yakni sama-sama ingin mendapatkan backlink, namun untuk hal kenyamanan pengunjung terlebih bagi admin, maka saya sarankan lebih baik anda berkomentar dengan menggunakan akun name/url karena hal ini untuk menghindari penghapusan komentar oleh admin karena tidak semua admin menyukai pengunjungnya lebih cenderung hanya ingin mendapatkan baclink semata. Namun jika blog tersebut tidak menyediakan akun name/url, maka gunakanlah salah satu dari dua cara diatas. Berikut screenshoot berkomentar dengan Akun Name/URL.

Nah, itulah penjelasan singkat mengenai Cara Mendapatkan Backlinks Blogger Secara Gratis dan Tanpa Batas (Unlimited). Jika ada yang ingin menambahkan, bertanya, memberikan masukan, maka anda bisa meninggalkannya pada kolom komentar. Semoga bermanfaat, terima kasih dan Salam Blogger...!!!

Cara Membuat Email Subscribe di Bawah Postingan Blog

Posted: 22 Mar 2013 10:06 AM PDT

Hanya sekedar mengisi waktu jeda sambil mengumpulkan ide untuk menulis artikel baru, pada kesempatan kali ini saya akan berbagi kepada sobat tentang bagaimana cara membuat email subscribe tepat di bawah postingan yang dilengkapi dengan fitur social bookmark lainnya seperti tombol like fans page facebook, twitter, google plus & rss feedburner.

Widget yang satu ini tidak kalah menarik dari widget popup like box fans page facebook with timer countdown, popup email subscribe dan widget social bookmarking all in one yang telah saya posting beberapa waktu yang lalu. Namun bedanya, widget yang satu ini penempatannya tepat di bawah postingan atau artikel sehingga lebih mudah dilihat oleh para pengunjung ketika selesai membaca artikel pada blog.

LIVE DEMO

Baiklah, setelah sobat melihat gambar di atas dan demonya, langsung aja yuk simak bagaimana cara memasang widget tersebut pada blog. Simak baik-baik ya, jangan sampai ada yang ketinggalan (hehehe).

Login ke Blogger
Template » Edit HTML » Expand Template Widget
Copy kode di bawah ini dan pastekan tepat di bawah tag <data:post.body/>

Keterangan :

Ganti lostsectorblog dengan username feedsburner

Ganti lostsector dengan username twitter

Ganti lostsector.stars dengan username facebook fans page

Ganti 108801075003252823592 dengan id profil google plus yang sobat punya

Langkah terakhir, simpan template

Selamat mencoba dan semoga bermanfaat buat sobat. Jika ada kendala dalam pemasangan widget ini, silahkan memberikan komentar di bawah, Insya Allah saya akan membantu sobat untuk memasang widget tersebut. Terima kasih dan salam bloggers...!!!

Cara Menyembunyikan Widget Pada Halaman Blogspot

Posted: 22 Mar 2013 11:10 AM PDT

Postingan saya kali ini akan membahas tentang bagaimana cara menyembunyikan widget / gadget / sidebar pada halaman blogger. Sebenernya cara ini sudah banyak yang mensharing, tetapi tidak ada salahnya jika saya mesharenya kembali.

Selain menyembunyikan widget pada halaman blogger, trik ini juga bisa menyembunyikan beberapa item lain seperti kolom komentar, popular post dan lain sebagainya, namun sebelum melakukannya, sobat harus mengerti beberapa kode css sehingga sobat bisa dengan mudah menyembunyikan widget ataupun item-item lain pada halaman blogspot.

Pada umumnya, kode css (deklarator) untuk widget adalah .sidebar, tetapi pada template tertentu penulisan deklarator .sidebar agak sedikit berbeda tetapi penulisannya tidak akan jauh berbeda dari template yang lain dan yang sobat butuhkan hanyalah memperhatikan dengan seksama beberapa kode css widget / item lain yang nantinya akan sobat sembunyikan.

Well, untuk penerapan tentang bagaimana cara menyembunyikan widget pada halaman postingan blogger, berikut ulasan lengkapnya.

Untuk penempatan kode HTML-nya sendiri, sobat harus menempatkannya tepat di atas tag </head>

1. Menyembunyikan widget pada seluruh halaman postingan

<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
.sidebar {display:none;}
</b:if>
</style>

2. Menyembunyikan widget pada halaman tertentu

<style type='text/css'>

<b:if cond='data:blog.pageType == "http://lostsector.blogspot.in/2012/12/cara-mengatasi-missing-required-field-upadate-blog.html"'>

.sidebar {display:none;}
</b:if>
</style>

3. Menyembunyikan widget pada halaman statis (contact us, daftar isi atau forum)

<style type='text/css'>
<b:if cond='data:blog.pageType == "static_page"'>
.sidebar {display:none;}
</b:if>
</style>

4. Menyembunyikan widget pada halaman postingan dan halaman statis

<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
.sidebar {display:none;}
</b:if>
</b:if>
</style>

5. Untuk mengatur beberapa widget sehingga tidak muncul pada beberapa halaman tertentu dan halaman statis, berikut kodenya :

<style type='text/css'>

<b:if cond='data:blog.url == "http://lostsector.blogspot.com/2012/11/cara-memepercepat-loading-blog.html"'>

<b:if cond='data:blog.url == "http://lostsector.blogspot.in/2012/12/lostsector-forum.html"'>

<b:if cond='data:blog.url == "http://lostsector.blogspot.com/2012/11/mempercepat-loading-form-komentar-blog.html"'>

.sidebar{display:none;}
</b:if>
</b:if>
</b:if>
</style>

Oh ya, untuk mengatur beberapa item seperti kolom komentar, popular post, menu navigasi atau bahkan footer untuk tidak ditampilkan pada halaman blogger, sobat hanya perlu menambahkan beberapa kode css kedalam kode css seperti contoh di bawah ini :

<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
.sidebar, #comments, #navigation, #popular-post {display:none;}
</b:if>
</style>

Perhatikan deklarator yang saya beri tanda warna biru di atas, kode tersebut tidak mengikat karena pada umumnya deklarator template berbeda-beda, yang sobat harus lakukan adalah memperhatikan dan memahami deklaratornya kemudian menambahkannya kedalam kode css di atas. Contoh widget yang disembunyikan pada halaman postingan blog

Cara Membuat / Memasang Permalink SEO di Blog

Posted: 22 Mar 2013 12:16 PM PDT

Maaf sobat saya bukan ahli SEO tapi tidak ada salahnya kita menyinggung sedikit sambil belajar tentang SEO. Nah, pada kesempatan kali ini saya akan membahas tentang bagaimana cara membuat permalink SEO di blogger yang katanya merupakan sebuah hal penting dalam mengoptimalkan Search Engine Optimization [SEO].

Apa itu Permalink SEO?

Permalink SEO merupakan sebuah link internal dan permanen pada blogger dan berfungsi untuk membuat blog lebih SEO lagi sehingga bisa bersaing di search engine [itu kata master SEO]... Hehehe

Nah, untuk urusan yang satu ini, memang bukanlah hal yang sulit untuk dipahami dan dimengerti karena disamping pembuatannya yang gampang dan simple [SEO, tentunya], juga bisa dijadikan sebagai pemberian peringatan kepada bloggers yang suka copy paste tetapi tidak tau tatakrama atau yang sering orang lain bilang "suka nyolong jemuran orang" eh salah, maksudnya "suka nyolong artikel orang" [hehehe] tetapi tidak mencantumkan link sumbernya atau tanpa ijin dari empunya blog. Gambar di bawah ini merupakan salah satu contoh permalink SEO...!!!

Cara Memasang Permalink SEO Blogspot

Langkah pertama, ya sudah pasti login ke akun blogger sobat
Setelah itu, buka Rancangan » Edit HTML
Beri centang pada "Expand Template Widget"
Cari ]]></b:skin> [seperti biasa gunakan Ctrl + F untuk mempermudah pencarian]
Setelah ketemu, copy paste kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>

.permalink-lostsector
{border: 1px dotted #424242;
padding: 5px;
background: none;-moz-border-radius:5px;}
.permalink-lostsector a
{background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}

Nah langkah selanjutnya, cari <data:post.body/> (jika terdapat banyak <data:post.body/> di dalam template, cari <data:post.body/> yang kedua) dan pastekan kode di bawah ini tepat di bawah kode <data:post.body/>

<div class='permalink-lostsector' style='padding:5px 5px 5px 5px; overflow: auto; width: auto; height: auto; text-align: center;'><blink><b>Baca dulu sobat, Penting...!!!</b></blink><br/>Terima kasih telah membaca artikel tentang <strong><data:blog.pageName/></strong> dengan URL :<br/> <strong><data:post.url/></strong><br/> Sobat boleh menyebarluaskan atau mengcopy artikel <strong><a expr:href='data:post.url'><data:blog.pageName/></a></strong> ini, namun jangan lupa mencantumkan link sumbernya.</div>

Simpan template dan lihat hasilnya...!!!

Full Recommended!

Anyway , jika sobat berminat membaca artikel tentang Meta Tag SEO Friendly, silahkan sobat klik DISINI untuk info lebih lanjut dan Sekian dulu pembahasan tentang SEO kali ini, semoga bermanfaat buat sobat (khususnya kepada diri saya sendiri). Salam bloggers...!!!

CSS Buttons With Transitional Hover Untuk Blogger

Posted: 22 Mar 2013 09:51 AM PDT

CSS3 Buttons With Transitional Hover Untuk Blogger

Button Transitional Hover adalah sebuah tombol yang berisikan link atau tidak pada blog baik itu tombol download, informasi, live demo maupun yang lainnya dengan efek hover atau bergerak pada saat tersentuh pointer mouse.

Tombol Transitional Hover ini sendiri adalah hasil dari modifikasi CSS3 dan tanpa ada tambahan Javascript maupun jQuery sehingga tidak mempengaruhi load time blog. Nah untuk melihat demo atau contohnya, silahkan mengklik link live demo di bawah.

LIVE DEMO

Cara memasang dan menggunakan tombol transitional

Login ke Blogger
Pada dashboard, pilih Template » Edit HTML
Copy kode di bawah ini dan pastekan tepat di atas/sebelum tag ]]</skin>

#button .icon {
background:#E3E3E3 url('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
display:block;
color:#212121;
float:none;
height:80px;
width: 80px;
line-height:80px;
margin:10px auto 0;
padding-top:1px;
position:relative;
text-shadow:0 1px 0 #FAFAFA;
text-align:center;
text-decoration:none;
white-space:nowrap;
-webkit-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;
}
#button a span {
display:none;
}
#button:hover a span {
display:inline;
}
#button a span {
font-size:1.4em;
}
#button:hover .icon {
width:420px;
}
#button .demo {
background-position:0 -80px;
}
#button .info {
background-position:0 -160px;
}
#button .download {
background-position:0 0;
}

Simpan template.

Nah, untuk memasangnya pada postingan blog, pilih HTML (samping kanan compose) pada saat membuat postingan/artikel terbaru dan masukkan salah satu kode pemanggil di bawah ini :

Button Download

<div id="button">
<a href="#" class="icon demo"><span>Lihat Demo</span></a>
</div>

Button Live Demo

<div id="button">
<a href="#" class="icon download"><span>Lihat Demo</span></a>
</div>

Button Info

<div id="button">
<a href="#" class="icon info"><span>Lihat Demo</span></a>
</div>

Keterangan : Ganti tanda # (pagar) dengan URL tujuan

Selanjutnya pilih pratinjau atau publikasikan untuk melihat hasilnya.

Rekomendasi Terbaik!

Semoga bermanfaat and Happy Nice Blogging...!!!

Cara Menampilkan Widget Pada Halaman Tertentu Blogspot

Posted: 22 Mar 2013 11:56 AM PDT

Terkadang pada saat melakukan setting Design Blog, widget atau item yang terpasang pada tempat tertentu kadang mengganggu sehingga desain blogspot yang dilakukan tidak menampilkan hasil yang maksimal dan tidak sesuai dengan apa yang diharapkan.

Pengaturan widget dengan menampilkan pada halaman tertentu blog konsepnya agak sedikit berbeda dengan Cara Menyembunyikan Sidebar pada Halaman Blogspot karena penerapan konsep untuk menyembunyikan widget diperlukan sebuah pemahaman mengenai deklarator kode css. Sedangkan untuk menampilkan sidebar / widget diperlukan sebuah pemahaman condtional tags, posisi dan id widget pada xml/html blog yang akan ditampilkan.

Nah, untuk penerapan konsep ini sebenarnya tidaklah terlalu rumit cukup dengan memahami beberapa tags pada xml/html template. Tags yang yang saya maksudkan disini adalah conditional tags b:if, dimana tag ini merupakan sebuah bagian pada xml/html template blog yang berfungsi untuk menampilkan atau menyembunyikan element pada halaman tertentu.

1. Mencari ID widget yang akan ditampilkan

Mencari ID widget tidaklah sulit, yakni bisa dengan cara mengakses "quickedit" (gambar obeng dan kunci pada sudut kanan bawah widget) atau dengan cara masuk ke dasboard, pilih tata letak dan mengklik edit pada sudut kanan bawah widget yang akan dicari ID-nya tersebut, kemudian akan muncul popup window. Perhatikan pada URL pada addressbar, nah ID widget berada tepat di ujung url. Contohnya seperti gambar di bawah.

Perhatikan id widget pada gambar di atas (HTML4), nah id tersebut harus sobat simpan di notepad atau dimana saja yang penting sobat bisa ingat.

2. Memberikan tags conditional pada widget atau sidebar yang akan ditampilkan

Perhatikan langkah-langkah di bawah dalam pemberian contional tags pada widget yang akan ditampilkan pada halaman tertentu pada blog.

Login Blogger
Pilih Template » Edit HTML dan centang "Expand Template Widget"
Langkah selanjutnya, cari ID wiget yang sobat simpan tadi di notepad dengan cara menekan CTRL + F untuk mempermudah pencarian. Berikut contohnya :

Selanjutnya tambahkan conditional tag pembuka (<b:if cond='.......'>) sesudah tag <b:includable id='main'> dan tag penutup (</b:if>) sebelum tag </b:includable> kedalamnya. Berikut cara lengkpanya :

1. Menampilkan widget pada homepage / beranda

<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>

2. Menampilkan widget hanya pada halaman postingan

<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>

3. Menampilkan widget pada halaman statis (contact us, daftar isi, forum, dsb)

<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>

4. Menampilkan widget pada halaman arcive /arsip

<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>

5. Menampilkan widget hanya pada halaman tertentu

<b:widget id='HTML4' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Masukkan URL halaman sobat disini"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>

Terakhir, simpan template dan lihat hasilnya.

Best Rekomendasi!

Thanks for reading this article and happy nice blogging...!!!

Cara Membuat Popup Email Subscribe / Berlangganan Artikel Terbaru Pada Blog

Posted: 22 Mar 2013 11:17 AM PDT

Cara kerja Popup Email Subscribe Update Pada Blog ini hampir sama dengan pembuatan Popup Like Box Facebook yang dilengkapi dengan timer countdown yakni sama-sama terbuka pada saat halaman blog di buka atau direload dan sama-sama dilengkapi script pembaca cookies browser untuk tidak muncul kedua kali jika browser di reload (refresh) atau dikunjungi kedua kalinya.

Langkah-langkah pemasangannya sendiri juga tidak rumit karena hanya memerlukan sebuah kode css/javascript dan memasukkan ke dalam gadget html/javascript pada blog. Jika sobat ingin melihat langsung bagaimana cara kerjanya, silahkan klik live demo di bawah ini.

LIVE DEMO

CSS, HTML, JavaScript dan Cara Memasang

Nah, jika sobat tertarik untuk menggunakan Popup box berlangganan artikel terbaru pada blog ini, berikut cara pemasangan dan kodenya :

Login ke Blogger
Pilih Tata Letak » Add Gadget » HTML/Java Script
Copy paste kode di bawah ini dan pastekan tepat di dalam box HTML/Javascript

Keterangan :

Ganti "lostsectorblog" dengan username feedburner yang sobat miliki

Klik simpan dan lihat hasilnya..

NB : Untuk mengoptimalkan kecepatan blog pada saat memasang kode css dan script di atas, silahkan sobat compress kode cssnya dan upload script di tempat hostingan yang sobat punya.

Best Recommended!

Demikianlah tutorial tentang Bagaimana Cara Membuat Popup Email Subscribe / Berlangganan Artikel Terbaru Pada Blog kali ini, semoga ada manfaatnya. Terima kasih dan happy blogging...!!!

Bagaimana Cara Memasang Email Subscription di Bawah Postingan Blog ?

Posted: 22 Mar 2013 10:09 AM PDT

Setelah kemarin saya sempat memposting sebuah artikel tentang bagaimana cara membuat email subscribe plus fitur social bookmarking facebook, twitter, google plus di bawah postingan blog, nah pada kesempatan kali ini saya akan menshare sebuah widget yang hampir sama dengan widget yang diatas tetapi yang membedakan hanya tampilannya saja. Namun widget yang satu ini bisa dikatakan lebih lengkap karena sudah ditambah dengan social bookmarking pinterset dan tombol fans page like box facebook.

Widget ini sendiri saya dapat dari salah satu blogspot luar negeri dan saya tidak tahu pasti siapa yang membuatnya, makanya widget kali ini saya tidak akan mencantumkan credit untuk authornya. Nah untuk lebih jelasnya, di bawah adalah contoh gambar widget yang saya maksudkan disertai dengan live demonya.

LIVE DEMO

Bagaimana, sobat tertarik memasang gadget di atas? Jika ia, berikut kode beserta bagaimana cara memasangnya pada blogspot.

Login ke Blogger
Template » Edit HTML » Expand Template Widget
Copy kode di bawah ini dan pastekan tepat di bawah tag <data:post.body/>

Keterangan :

Ganti lostsectorblog dengan username feedburner sobat
Ganti http://www.facebook.com/lostsector.stars dengan url facebook fans page
Ganti http://twitter.com/lostsector dengan url twitter yang sobat miliki
Ganti https://plus.google.com/108801075003252823592/ dengan url profil google plus
Ganti http://pinterest.com/lostsector dengan url pinterest
Ganti http://feeds.feedburner.com/lostsectorblog dengan url google feedburner
Ganti lostsector.stars dengan username facebook fans page yang sobat punya

Terakhir, klik simpan dan lihat hasilnya.

Best Recommended!

Demikian totorial pembuatan widget email subscribe di bawah postingan ini, semoga apa yang saya sajikan kali ini bermanfaat buat sobat. Terima kasih dan salam blogger...!!!

Cara Mudah Membuat Formulir Contact Us / Hubungi Kami di Blog

Posted: 22 Mar 2013 09:06 AM PDT

Cara Membuat Formulir Contact Us / Hubungi Kami / Email me form

Membuat Formulir Contact Us / Hubungi Kami / Email Me merupakan suatu hal yang penting dan tidak bisa terpisahkan dari sebuah blog ataupun website. Tujuan pembuatan formulir contact us ini adalah untuk menyediakan formulir bagi para visitors / pengunjung untuk menyampaikan keluhan, saran, bertanya, ataupun hal lain mengenai suatu blog ataupun website tersebut.

Pembuatan Formulir Contact Us / Email Me tersebut bertingkat-tingkat, ada yang mudah, ada yang agak sedikit ribet dan ada yang melalui php buatan sendiri, tergantung dari individu mau memilih cara yang yang mana. Pada saat sekarang ini banyak pihak ketiga yang menyediakan fasilitas form email me ini, contohnya : foxyform.com, emailmeform.com, contactr.com, freecontactform.com dan masih banyak lagi.

Nah pada kesempatan kali ini, lostsector akan menjelaskan tentang bagaimana cara membuat formulir contact us dengan menggunakan layanan pihak ke tiga yakni foxyform.com. Alasan lostsector memilih menulis artikel ini dengan menggunakan fasilitas foxyform.com karena pembuatannya tidak rumit dan tidak membutuhkan yang namanya sign up atau mendaftar, tetapi cukup dengan membuka websitenya dan memlih kriteria formnya dan mencopy paste kode yang diberikan.

DEMO

Well, tanpa basa basi lagi, berikut tutorial pembuatannya :

Langkah pertama buka www.foxyform.com

1. Menu Setting

Cara mudah Membuat Formulir Contact Us / Email me form

Penjelasan :

Menu ini merupakan menu pilihan yakni title, name, email, subject, First Name, street, ZIP + town, Phone dan Website. Siliahkan sobat pilih kategori mana yang akan sobat tampilkan.

2. Menu Advanced settings

Penjelasan :

Pada menu ini terdapat 4 pilihan untuk mengatur background (latar belakang), font color (warna huruf), Font (jenis huruf) dan Font size (jenis huruf)

3. Target e-mail address

Penjelasan :

Pada menu form ini, sobat diminta untuk memasukkan email yang nantinya akan jadi target pengiriman jika ada visitor yang mengirimkan pesannya kepada sobat.

4. Preview (Pratinjau)

tips trik pembuatan contact us / hubungi kami

Penjelasan :

Preview ini adalah contoh formulir yang akan ditampilkan, sesuai dengan pilihan-pilihan pada menu sebelumnya.

5. Create Formular / Buat Formulir

Penjelasan :

Ketika kriteria formulir sudah ditentukan, nah langkah selanjutnya mengklik Create Formular untuk melanjutkan pada tahap selanjutnya yakni pada halaman untuk mendapatkan kode untuk di tempatkan di website atau blog

6. Mendapatkan kode HTML/Javascrip

Penjelasan :

Copy kode html/javascript yang sudah muncul kemudian masukkan ke dalam entri baru atau laman baru pada blog sobat, tapi ingat harus memasukkannya kedalam HTML bukan Compose.

7. Pratinjau (Preview) atau publikasikan untuk melihat hasilnya.

Semoga tutorial pembuatan formulir contact us ini bermanfaat buat sobat. Terima kasih...!!!

Minify / Compressor Javascript Rekomendasi Google

Posted: 22 Mar 2013 09:11 AM PDT

Javascript Compressor Rekomendasi Google

Merampingkan atau memperkecil ukuran kode Javascript dapat menghemat banyak bytes data dan mempercepat download, parsing dan waktu eksekusi pada saat halaman atau home page blog dibuka atau diload. Kalimat tersebut di atas merupakan kalimat dari kutipan yang sempat saya baca di salah satu halaman developer.google.com sebelum lostsector membuat artikel ini.

Memang banyak cara untuk memperkecil ukuran Javasript code dengan menggunakan pihak ketiga, tetapi yang direkomendasikan oleh mbah google yakni Closure Compiler, JSMin dan YUI Compressor. Berikut kutipan google di salah satu halamannya tentang penjelasan di atas.

"Minifying" code refers to eliminating unnecessary bytes, such as extra spaces, line breaks, and indentation. Keeping JavaScript code compact has a number of benefits. First, for inline JavaScript and external files that you don't want cached, the smaller file size reduces the network latency incurred each time the page is downloaded. Secondly, minification can further enhance compression of external JS files and of HTML files in which the JS code is inlined. Thirdly, smaller files can be loaded and run more quickly by web browsers.

Several tools are freely available to minify JavaScript, including the Closure Compiler, JSMin or the YUI Compressor. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory. We recommend minifying any JS files that are 4096 bytes or larger in size. You should see a benefit for any file that can be reduced by 25 bytes or more (less than this will not result in any appreciable performance gain).

Source : developers.google.com

Jika sobat, bingung mengartikan paragrap di atas, silahkan translate sendiri di http://translate.google.com/... Hehehehe

Dari uraian di atas menjelaskan bahwa, memperkecil / mengurangi ukuran atau meminimalkan kode javascript serta menghapus yang tidak penting dapat mengurangi latency jaringan yang terjadi setiap kali halaman di-download sehingga halaman dapat dimuat dan berjalan lebih cepat pada browser web.

Nah, karena mengacu kepada compressor javascript yang direkomendasikan oleh google, pada kesempatan kali ini saya akan menjelaskan tentang bagaimana memperkecil ukuran javascript dengan menggunakan salah satu dari tiga compressor javasript rekomendasi google yakni Closure Compiler dan jika sobat tertarik memakainya, perhatikan langkah-langkah berikut ini :

Cara Pertama

Buka Closure Compiler
Masukkan link javascript ke dalam box yang telah disiapkan, kemudian klik add pada samping kanan box. Jika sudah di add, selanjutnya klik compile. Perhatikan gambar di bawah untuk lebih jelasnya :

Minify javascript yang direkomendasikan oleh google

memperkecil ukuran javascript rekomendasi oleh google

Klik untuk memperbesar gambar

Contoh link javascript : https://lostsector-javascript.googlecode.com/files/accordin-pack.js

Cara Kedua

Cara ini hampir sama dengan cara pertama, tetapi bedanya yakni pada cara pertama yaitu memasukkan link JS ke dalam box url JS, sedangkan untuk cara yang kedua ini yaitu memasukkan kode JS yang masih mentah (belum diupload ke googlecode.com). Perhatikan gambar untuk lebih jelasnya :

memperkecil size javascript yang direkomendasikan google

Klik untuk memperbesar gambar

Setelah langkah-langkah di atas sudah dilakukan, langkah selanjutnya, copy kode disamping kanan pada Closure Compiler dan pastekan kode tersebut ke dalam notepad serta upload kembali javascript ke google.code.com. Jika belum tau cara mengupload javascript ke googlecode, silahkan baca DISINI untuk informasi lebih lanjut.

Demikian, artikel singkat tentang Javascript Compressor Rekomendasi Google ini, semoga ada manfaatnya buat sobat. Terima kasih, salam Blogger...!!!