• Contact
  • About

Indonesia Innovation!

Home » Unlabelled » Design, Tutorial and Tips Trik Blogger | Lostsector

Design, Tutorial and Tips Trik Blogger | Lostsector

- on 07.14

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.

Simple CSS3 Table For Blogger

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

Unlimited Backlink Blogger Gratis
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 »
Unlimited Backlink Blogger Gratis

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.

Unlimited Backlink Blogger Gratis
Unlimited Backlink Blogger Gratis

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.

Cara Membuat Email Subscribe di Bawah Postingan 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/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
form.feedburner {margin: 20px 0 0;display: block;clear: both;}
.lostsectorstyle {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeeD4LakHHqJweEr5iQJxMvdFhY1Fxr5RFSYkPSHpzhpzf2rinJct5rWPX8DEO3PJgdLzhItqBOS5lae5mwaqNZbAmKAoUnBh8R7pDgERzg3SwMCyjPRjY-VR6w-I6KkytmTR4fsLORV0/s1600/lostsector.blogspot.com-email-icon.png) no-repeat scroll 4px center transparent;padding: 7px 15px 7px 35px;color: #666;font-weight: bold;text-decoration: none;border: 1px solid #D3D3D3;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC inset;}
.lostsectorsubmit {color: #666;font-weight: bold;text-decoration: none;padding: 6px 15px;border: 1px solid #D3D3D3;cursor: pointer;-moz-border-radius: 4px;-webkit-border-radius: 4px;-goog-ms-border-radius: 4px;border-radius: 4px;background: #fbfbfb;background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);}
#lostsector-widget {-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px;-goog-ms-border-radius: 10px 10px 10px 10px;border-radius: 10px;
background: none repeat scroll 0 0 transparent;border: 1px solid #D3D3D3;padding: 8px;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;width: 480px;-webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);-moz-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);-webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;}
#lostsector-widget:hover {background: none repeat scroll 0 0 #FFF;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC inset;}
#lostsector-widget td {padding: 3px 0;}
</style>
<center><br/><div id='lostsector-widget'>
 <div id='emailwidget'>
  <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
  <tbody>
  <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
   <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '>
     Get free daily email updates!
    </p>
    <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=lostsectorblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
     <input name='uri' type='hidden' value='lostsectorblog'/>
     <input name='loc' type='hidden' value='en_US'/>
     <input class='lostsectorstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
     <input alt='' class='lostsectorsubmit' title='' type='submit' value='Submit'/>
    </form>
   </td>
   <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>
     Follow us!
    </p>
    <a href='http://feeds.feedburner.com/lostsectorblog' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw1-dfy983zlu1T40TSZtuixaa7SP8YTEbSaAzYwhkPDXZV-YveVzz3kbuOQba9tuqTdV4yNMpcMCggZpWt_0ZZF82TQzsz_18VBiD6Hs9iraGhZCqzSGPYIA_6M9CTGjobFYbCL08gYs/s1600/lostsector.blogspot.com-rss-icon.png'/></a>
    <a href='http://twitter.com/lostsector' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcG2sy-lZL0RVaSg_wrqUd5I0Y1QySllKaXKoazFoXzLioSQeta4XinRMQa3tSpY2aYriemRWqRyZ73lJqHXoh3H8QwA3wDmPbxhFruhKrirqCCuoUVvDaCc5S5TtdXdtWPS4_NkHZDaU/s1600/lostsector.blogspot.com-twitter-icon.png'/></a>
    <a href='http://www.facebook.com/lostsector.stars' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV9nO6XWNzodnmPAsvmMZt6_8IM6aAlmncUFCwYZKuq6XBqIBLR4PDoQsd7LJGQUn2L9_cjURLx8aY58YVOt4W679Sr2Tm0JvhwEBXyn6NFjmN0JAB23f2XF4FEUWXamIlM7zO3hJsmAs/s1600/lostsector.blogspot.com-fb-icon.png'/></a>
    <a href='https://plus.google.com/108801075003252823592/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdBn7CN1gKwskNt9wo91sd16Ml7adkbITjb94oAYwf7ru0WXGPF7Y6XHcN6Zcqi5L2UVc-9-GeEvJ_fJA89-4YZAxUzDbnBfULITGqltUwlR7JrGEEYvKFb9GtNm9nIqyjVH-TEpY6ecA/s1600/lostsector.blogspot.com-g+-icon.png'/></a>
   </td>
  </tr>
  </tbody>
  </table>
  <div align='right'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://lostsector.blogspot.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>
  <div class='fb-like' data-href='http://www.facebook.com/lostsector.stars' data-layout='button_count' data-send='false' data-show-faces='false' data-width='80'/><br/>
  <a class='twitter-follow-button' href='http://twitter.com/lostsector' rel='nofollow'/>
  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
 </div>
</div>
</center>
</b:if>
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

Cara Menyembunyikan Widget Pada Halaman Blogspot
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 == &quot;item&quot;'>
.sidebar {display:none;}
</b:if>
</style>
2. Menyembunyikan widget pada halaman tertentu
<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;http://lostsector.blogspot.in/2012/12/cara-mengatasi-missing-required-field-upadate-blog.html&quot;'> 
.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 == &quot;static_page&quot;'>
.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 == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
.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 == &quot;http://lostsector.blogspot.com/2012/11/cara-memepercepat-loading-blog.html&quot;'>
<b:if cond='data:blog.url == &quot;http://lostsector.blogspot.in/2012/12/lostsector-forum.html&quot;'>
<b:if cond='data:blog.url == &quot;http://lostsector.blogspot.com/2012/11/mempercepat-loading-form-komentar-blog.html&quot;'>
.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 == &quot;item&quot;'>
.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

membuat-permalink-SEO-pada-blog
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...!!!

membuat-permalink-SEO-pada-blog

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!

  1. Menggabungkan Kotak Email Subscribe Dengan Permalink SEO Dibawah Postingan Blog
  2. Box/Kotak About Author di Bawah Postingan Blog
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!

  1. Cara Membuat Tombol Keren [Cool Button] untuk Blogger
  2. 4 Tombol CSS3 Animasi Unik dan Menarik Untuk Blogger
Semoga bermanfaat and Happy Nice Blogging...!!!

Cara Menampilkan Widget Pada Halaman Tertentu Blogspot

Posted: 22 Mar 2013 11:56 AM PDT

Cara Menampilkan Widget Pada Halaman Tertentu Blogspot
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.

Cara Menampilkan Widget Pada Halaman Tertentu Blogspot

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 :
Cara Menampilkan Widget Pada Halaman Tertentu Blogspot
  • 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'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<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!

  1. Cara Menyembunyikan Sidebar pada Halaman Blogspot
  2. Cara Menampilkan Tab Penghasilan (Google Adsense) Pada Dashboard Blogger
  3. Cara Menampilkan Rating Bintang Pada Pencarian Search Engine
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.

Cara Membuat Popup Email Subscribe / Berlangganan Artikel Terbaru Pada Blog

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

<link rel="stylesheet" href="https://sites.google.com/site/lostsectorsite/css-lostsector/lostsector-popup-email-subscribe.css?attredirects=0&d=1" />
<style>
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif;
    color: #666;
    height: 400px;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration: none;
}
.box-title {
    color: #F66303;
    font-size: 20px !important;
    font-weight: bold;
    margin: 10px 0;
    border: 1px solid #ddd;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding: 10px;
    line-height: 25px;
    font-family: arial !important;
}
.box-tagline {
    color: #999;
    margin: 0;
    text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
a:link, a:visited {
    border: none;
}
.demo {
    display: none;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://lostsector-javascript.googlecode.com/files/pupup-subscribe-lostsector.js"></script>
 <script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"390px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<style> .home-featured-right {
    background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/dashes-bg.png) #d05353;
    border: 5px solid #fff;
    font-size: 16px;
    margin: 0px;
    width: 320px;
    font-family: calibri;
}
.home-featured-right,
.home-featured-right p,
.home-featured-right h4.widgettitle {
    color: #fff;
    text-shadow: #a64242 -1px -1px;
    text-align: center;
}
.home-featured-right p {
    font-size: 16px;
    margin-bottom: 20px;
}
.home-featured-right .widget {
    margin: 35px;
}
.home-featured-right h4.widgettitle {
    font-size: 26px;
    margin-bottom: 20px;
}
.home-featured-right input[type=text] {
    -moz-box-shadow: inset 0 1px 2px 1px #eee;
    -webkit-box-shadow: inset 0 1px 2px 1px #eee;
    background: #fff url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-icon.png) no-repeat 16px 15px;
    border-bottom: none;
    border-left: 1px solid #963c3c;
    border-right: none;
    border-top: 1px solid #963c3c;
    box-shadow: inset 0 1px 1px 1px #eee;
    color: #000;
    font-family: Verdana, Arial, Tahoma, sans-serif;
    font-size: 12px;
    padding: 14px 15px 14px 45px;
    width: 180px;
}
#home-featured .home-featured-right input[type=submit] {
    background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-button.png) no-repeat !important;
    border: none;
    font-size: 0;
    height: 28px;
    margin: 0 0 0 15px;
    line-height: 0;
    text-indent: -9999px;
    width: 26px;
}

#email-news-subscribe .email-box {
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-image: initial;
    height: 35px;
    margin-left: -20;
}

#email-news-subscribe .email-box input.email {
    background: #FFFFFF;
    border: 1px solid #dedede;
    color: #999;
    padding: 7px 10px 8px 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border-image: initial;
    font-family: "Arial","Helvetica",sans-serif;
}

#email-news-subscribe .email-box input.email:focus {
    color: #333
}
#email-news-subscribe .email-box input.subscribe {
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
    font-family: "Arial","Helvetica",sans-serif;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: white;
    text-shadow: #d08d00 1px 1px 0;
    padding: 7px 14px;
    margin-left: 3px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    border-image: initial;
}
#email-news-subscribe .email-box input.subscribe:hover {
    background: #ff9b00;
    background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
    outline: 0;
    -moz-box-shadow: 0 0 3px #999;
    -webkit-box-shadow: 0 0 3px #999;
    box-shadow: 0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
    background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
    -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border: 1px solid #cc7c00;
    color: #FFFFFF;
    text-shadow: #d08d00 1px 1px 0
}  
</style> 

<div class="home-featured-right">
    <div id="enews-2" class="widget enews-widget">
        <div class="widget-wrap">
            <div class="enews">
                <h4 class="widgettitle">Dapatkan Artikel Terbaru Kami Secara Gratis…!!!</h4>
                <p>Dapatkan artikel terbaru kami langsung di inbox. Cukup masukkan alamat email sobat di bawah ini, kemudian tekan subscribe…!!!</p>
                <p> Your privacy and email address are safe with us!</p>
                <div id="email-news-subscribe">
                    <!-- Email Subscribe -->
                    <div class="email-box">
                        <form action="http://feedburner.google.com/fb/a/mailverify" method="post"
                        target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=lostsectorblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                            <input class="email" type="text" style="width: 150px; font-size: 12px;"
                            id="email" name="email" value="Enter your email here" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;"
                            onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" />
                            <input type="hidden" value="hblogger" name="uri" />
                            <input type="hidden" name="loc" value="en_US" />
                            <input class="subscribe" name="commit" type="submit" value="Subscribe"
                            />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end .home-featured-right -->
<div style="background: #fff;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <!-- Don't remove the credit links,If you removed credits then your gagdet will not work --><span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://lostsector.blogspot.com/2012/12/cara-membuat-box-popup-berlangganan-artikel-blog.html" target="_blank" >Get This Widget »</a></span></div></div>
</div>
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!

  1. Cara Membuat Email Subscribe di Bawah Postingan Blog
  2. Menggabungkan Kotak Email Subscribe Dengan Permalink SEO Dibawah Postingan Blog
  3. Bagaimana Cara Memasang Email Subscription di Bawah Postingan Blog ?
  4. Membuat Widget Subscribe Keren di Blog
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.

Cara Membuat Email Subscribe di Bawah Postingan Blog Part II

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

<!--Subscribe widget start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.lostsector-box {
background: #fff;
border: 1px solid #ddd;
height: 360px;
margin: 10px auto;
padding: 10px;
width: 572px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.lostsector-subscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.lostsector-subscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.lostsector-mailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.lostsector-mailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.lostsector-submit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.lostsector-submit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.lostsector-submit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
.lostsector-sharebox {
border: 1px solid #D3D3D3;
margin: -157px 0 0 330px;
padding: 8px;
width: 225px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.lostsector-sharebox:hover {
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='lostsector-box'>
<div class='lostsector-subscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=lostsectorblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='lostsectorblog' />
<input name='loc' type='hidden' value='en_US' />
<input class='lostsector-mailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'
onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}'
type='text' value='Enter your email...' />
<input alt='' class='lostsector-submit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='http://www.facebook.com/lostsector.stars' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIY9T8xY7v1VrTUPrmxRQDVQiEpCNVTuLEF5265QOxVBswFBEWNvTAl-y22lH2XPhxylV2QHaVJBVNc1uw7AE5NVVL2q9NufkP7wnG7cEYGGwaoQ-f4hWAPBHx7x0cEn8fyr6yhmbcWVXO/s1600/lostsector.blogspot.com-facebook-icon.png' alt='facebook'/></a>
<a href='http://twitter.com/lostsector' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYHRHlP1tETXOTFCFZn4Ny0NbZEjvqZYuuoIPOsyLIePH6WM43YcSoUZtZ8z0Bb5ohRL0NLyS2xsS_Y7l_ZQtwUQLCBZeJWqK_vj_o6sEXmsFgdX1USFOSAL-sKCmXVeqF_kM26861a7am/s1600/lostsector.blogspot.com-twitter-icon.png' alt='twitter'/></a>
<a href='https://plus.google.com/108801075003252823592/' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDICUvU02v9dhBMrWS0Ja5OlsORp_VXqvosw8tU5zfy65otHyP34sXaC7ZZxo-kbVZnpqcwcSIq8jYrE2c8LmbADY_WVwIFSjH-YnotCPKILCtHBWkiAtEyeFjSCMSEa6n3L_UzonaSusa/s1600/lostsector.blogspot.com-google-icon.png' alt='gplus'/></a>
<a href='http://pinterest.com/lostsector' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaVLgjzpi2uWr6Kwnz6EnYpZkgZgpqYSif5An5TH2krOvWQQxW5_GyOVDRCsCVlZnUxPmeWzpVlL5fJqL1Enl6-UlERqBQyRAw8AfolZlUDGkIK-Tf7RsyIi3kZDAkPu6DqE5IKktWNgcy/s1600/lostsector.blogspot.com-pinterset-icon.PNG' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/lostsectorblog' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghhhlc69aGI6uzaOmGCzYR7WR1C5gIYUbVF4SKTVLp8KJaawwgijR0Hgf248un3fhAQ6-3lzw9ny8Aso6JOXx5fRIwed_0ssyzb0Niw7koDdvKkI8erbJfjca1Y6YXCKioNnwAlmtwSZGa/s1600/lostsector.blogspot.com-rss-icon.png' alt='rss'/></a>
</div>
</div>
<div class='lostsector-sharebox'>
<script type='text/javascript'>
var switchTo5x = true;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
onhover: false
});
</script>
<div style='margin: 5px 5px;'>
<span class='st_fblike_hcount' displaytext=''></span>
</div>
<div style='margin: -30px -20px 0 0; float: right;'>
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'
expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title'
data-count='horizontal'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script>
</b:if>
</div>
<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>
<a class='addthis_counter'></a>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script>
</div>
<div style='margin: 5px 5px;'>
<su:badge layout='1'></su:badge>
<script type='text/javascript'>
(function () {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
</div>
</div>
<div style='float: right; margin: -40px -5px 0 0;'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div>
<script type='text/javascript'>
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div style='margin-top: 20px;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Flostsector.stars&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if>
<!--Subscribe widget end-->
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!

  1. Cara Membuat Email Subscribe di Bawah Postingan Blog
  2. Menggabungkan Kotak Email Subscribe Dengan Permalink SEO Dibawah Postingan Blog
  3. Cara Membuat Popup Email Subscribe / Berlangganan Artikel Terbaru Pada Blog
  4. Membuat Widget Subscribe Keren di Blog
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
Cara Membuat Formulir hubungi kami
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
Tutorial pembuatan contact us / hubungi kami

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
membuat contact us / hubungi kami
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

membuat contact us / email me form
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...!!!
You are subscribed to email updates from Lost-Sector
To stop receiving these emails, you may unsubscribe now.
Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610
Tweet
Posting Lebih Baru Posting Lama Beranda

Popular Posts

  • Design, Tutorial and Tips Trik Blogger | Lostsector
    Design, Tutorial and Tips Trik Blogger | Lostsector Bagaimana Cara Mendapatkan Backlink Berkualitas ? ...
  • [New post] Indonesian Volcano Erupts Again
    Newsdesk posted: "A volcanic eruption on the Indonesian island of Sulawesi sent lava spewing up to 6,500 feet in the...
  • [New post] Marissa Mayer: Yahoo Inc. to delete and recycle inactive accounts
    Newsdesk posted: "That Yahoo Inc.'s CEO Marissa Mayer manages to stay in news again for the once-largest search ...
  • [New post] SIM card flaw said to allow hijacking of millions of phones
    Newsdesk posted: " A vulnerability on SIM cards used in some mobile phones could allow malware infection and survei...
  • Design, Tutorial and Tips Trik Blogger | Lostsector
    Design, Tutorial and Tips Trik Blogger | Lostsector Manfaat Luar Biasa Jeruk Nipis Bagi Kesehatan Po...
  • Update New Special Cheat Multi Login GAME ModooMarble / MONOPOLI ONLINE HackTerbaru 2013 Bisa Buat GB sendiri 1 PC bisa main 2 ID, 3 Id, 4 ID bahkan 10 Id kalau RAM Anda Berkapasitas Work ALL OS Simple tutor no RIBET!!!!
    Download Cheat : Click here No Password Fungsi: Cheat Multi LoginModooMarble bisa lebih dari 1 client modoomarble dalam 1 pc. istilah bekenn...
  • [New post] Hunter x Hunter [Remake] – E68
    jamrfirdaus posted: " 68 Pirates x And x Guesses Kaizoku x to x Suisoku (カイゾク×ト×スイソク)  February 24, 2013 ...
  • [New post] Al Salem brace helps Saudi Arabia rally to beat Indonesia
    Newsdesk posted: "Jakarta --- Yousef Al Salem's twin headers helped Saudi Arabia recover from a goal down to bea...
  • Bokep IGO Gangbang Pemerkosaan 3gp
    Pagi ini aku ada waktu luang sedikit, jadi aku sempatkan untuk membuat sebuah postingan yang bertema video lagi, tentunya ditujukan untuk ag...
  • [New post] Peppertones – CHANCE! (2013)
    jamrfirdaus posted: " MP3 (320 kbps) : 4shrd *buy original CD and Merchandise for appreciate the artist Tra...
340,761
Diberdayakan oleh Blogger.
© Copyright 2013 Indonesia Innovation! - ALL RIGHTS RESERVED
Template by Blogger Jateng and Cyber Area