Tanah Baru: Blogging

Pengenalan JQuery

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL. Selain dukungan fasilitas yang lengkap, membuat plugin jquery juga cukup mudah. Dukungan ajax adalah salah satu fasilitas yang sudah tersedia di jquery.

JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Bagi Web Developer jQuery akan sangat menyederhanakan kode-kode JavaScript, seperti saat digunakan untuk penanganan event, interaksi Ajax yang cepat. jQuery ini dirancang untuk mengubah cara Kita menulis JavaScript.

Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time.

Dikarenakan Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan, adalah salah satu alasan kenapa banyak web developer lebih memilih JQuery dibandingkan dengan Javascript Framework lain.

Apa itu Javascript Framework?

Framework, jika diterjemahkan ke bahasa kita, bisa berarti “area kerja”, atau “lingkungan kerja”. Dalam bahasa susahnya, berarti sebuah area kerja yang sudah disediakan fungsi-fungsi yang kita tinggal menggunakannya. Jadi tidak perlu lagi membuatnya dari awal.

Analoginya, seperti kita menyewa sebuah kantor yang didalamnya sudah terdapat semua macam kebutuhan kantor seperti telepon, meja kerja, ruangan, dapur, dan lain-lain. Nah, Framework ini juga berarti sama. Sebuah framework sudah banyak menyediakan kegunaan-kegunaan yang dengan mudah kita gunakan.

Framework inilah yang kini menjadi trend di dunia pemrograman. Tidak hanya di Javascript, tapi juga di PHP. Dan pengertian Framework semua sama.

JQuery dan kemudahannya

JQuery punya sebuah slogan yang “ngena” banget. “Write less, do more” memang bukan sembarang slogan. Menulis sedikit, bisa melakukan hal yang banyak.

Mari kita tengok bagaimana JQuery mempermudah kita.

Jika kita punya halaman HTML seperti ini:

<div id="container">This is container</div>

Penggunaannya yang mudah tapi bisa melakukan segala macam yang kita inginkan adalah salah satu alasan kenapa banyak web develover lebih memilih JQuery dibandingkan dengan Javascript Framework lain.

Maka kita bisa memperlakukan banyak hal dengan JQuery. Pemanggilan objek container bisa dilakukan sama seperti anda memperlakukannya di CSS.

<script src="jquery.js" type="text/javascript">

</script>

<script type="text/javascript">

$("#container").append("<strong>Ini hasil tambahan dari JQuery</strong>");

</script>

Untuk keterangan lebih lanjut, bisa dibaca manual JQuery di websitenya disini.

Cara membuat Recent Post by label horizontal diblogspot

Postingan Cara membuat Recent Post by label horizontal diblogspot ini juga masih berhubungan dan tidak beda jauh dari dengan postingan sebelumnya. yaitu Cara membuat Popular post horizontal. Namun pada postingan ini, saya tidak memberikan tutorial lengkap karena saya anggap semua sudah mahir dan jago design blogger template sendiri.

Oopss..!!!
Jangan protes dulu ya..!!!
Jika mengalami kesulitan, anda bisa tinggalkan komentar dibawah kok. Lagi pula kalau selalu diberikan tutorial siap pakai, kapan mau belajar dan pintarnya..??!!!!

Hehee...!!! ^_^

Ok..!!!

Tanpa banyak basa-basi, kita langsung saja masuk ke pokok pembahasan.

Yang harus kita lakukan pertama adalah membuat sebuah kolom tempat widget Recent Post by label horizontal ini akan kita pasang.

Anda bisa mengambil referensi CSS dibawah ini untuk membuatnya.

.gadgetr-wrapper{}
.gadget {
 color: #333;
 line-height: 1.2em;
 margin:0 text-align: left;
 padding: 0 }
 
.gadget ul {
  font: normal 13px Arial;
  text-transform: none;
  list-style: none;
  margin: 0;
  padding: 0 }
 
.gadget li {
  text-indent: 0;
  line-height: 1.2em;
  text-align: left;
  margin: 0 auto;
  padding: 0 auto }
 
.gadget li a:hover {
  color: #36c;
  text-decoration: none;
  text-shadow: 1px 1px #111 }
 
.gadget .widget {
  background: none;
  border-bottom: 1px ridge #125;
  margin: 0 0 5px;
  padding: 10px }
 
.gadget img.label_thumb {
  float: left;
  height: 60px;
  width: 60px;
  margin: 0 10px 5px 0;
  border: ridge 1px #125;
  padding: 4px }
 
.gadget .label_with_thumbs {
  float: left;
  width: auto;
  max-height: 65px;
  margin: 0 auto;
  padding: 0 auto }
 
.gadget ul.label_with_thumbs li {
  min-height: auto;
  width: 200px;
  float: left;
  border: none;
  clear: none;
  margin: 0 10px 5px 0;
  padding: 0 }
 
.gadget ul.label_with_thumbs li a:link,.gadget ul.label_with_thumbs li a:visited {
   color: #333;
   text-decoration: none;
   line-height: 1.2em;
   font: bold 13px Georgia }

.gadget ul.label_with_thumbs li a:hover {color:#35c;text-decoration: none }

Jika pembuatan kolom ini benar maka kira-kira kita akan mempunyai kolom pemasangan seperti format dibawah ini.

Karena semua udah jago otak-atik CSS, maka semua pasti tahu yang harus kita lakukan hanyalah sedikit menyesuaikan lebar dan warna dari area template utama yang kita pakai. Saya anggap semua sudah mengerti tentang cara pembuatan dan pembagian kolom ini. Jika belum mengerti, silakan baca terlebih dahulu baca postingan sebelumnya.

Selanjutnya kita tinggal pasang Script Recent Post by label melalui Dashboard -> Design -> Add Gadget -> HTML/Javascript. Script Recent Post by label ini bisa anda dapatkan pada postingan yang telah kita bahas dipostingan ini.

Semoga bermanfaat..!!

Black Computer Store Blogger Template

Setelah sebelumnya share template White ads pigeon blogger Template, maka dipostingan kali ini admin ngalor ngidul kembali ingin share template gratis. Nama templatenya Black Computer Store Blogger Template. Sesuai namanya template ini khusus buat pecinta template berwarna gelap karena template ini warnanya hitam pekat.

Black Computer Store Blogger Template ini bukan murni hasil design dari admin ngalor ngidul. Admin ngalor ngidul hanya melakukan sedikit edit saja. Aslinya template ini adalah blogger store V2 hasil design dari Rifki Aria Gumelar, author dari www.javatemplates.com.

Berikut ini adalah tampilan dari Black Computer Store Blogger Template.

Home page style

Main Post Style

Fitur dari Black Computer Store Blogger Template ini sendiri tidak jauh beda dengan blogger store V2. Bahkan bisa dibilang sama. Admin hanya mengedit sedikit dan juga menambahkan share button dan Java script extra agar bisa dipasang image transisi dibagian posting.

Jika belum tau seperti apa fitur yang admin tambahkan anda bisa langsung lihat sendiri di blog demonya. Untuk saat ini, template tersebut hanya bisa didownload melalui the doctor template.

Live Demo

Download

Jika ada kesulitan, silakan langsung ke tutorial asli dari template ini di www.javatemplates.com.

Atau Hubungi kami melalui menu kontak untuk penambahan fitur dan mengkustomisasi lebih lanjut.

Perhatian:
Mohon jika anda menggunakan template ini untuk tidak meremove link yang ada difooter. Hargailah sedikit karya dan usaha kami. Jika ingin template yang memang hanya milik anda, anda bisa anda bisa membuat template dengan design anda sendiri. Atau dengan menggunakan jasa kami (^_^).

Trik Cepat menghilangkan Navbar dan widget bawaan blogger

Salah satu keuntungan dari menggunakan custom template untuk blogger biasanya kita tidak terlalu repot edit sana edit sini dari template yang disediakan. Sebuah custom template juga rata-rata telah dilengkapi dengan berbagai widget dan konten-konten favorite dan disukai oleh para blogger.

Salah satu cirinya lagi adalah telah menghilangnya widget-widget bawaan dari blogger, seperti misalnya navbar bawaan blogger. Tapi tahukah anda jika sebenarnya widget tersebut sebenarnya tidaklah hilang dari template anda. Widget tersebut biasanya hanya disembunyikan oleh designernya.

Coba saja ada masuk ke menu edit html dari dashboard anda. Kemudian cari kode berikut ini.

#navbar atau .navbar

Biasanya kode CSS yang akan mengikuti dari kode tersebut adalah seperti ini:

#navbar {
visibility:hidden;
}

.navbar {
visibility:hidden;
}

#navbar {
display:none
}

.navbar {
display:none
}

Memang betul jika dengan kode tersebut maka Navbar bawaan blogger tersebut akan menjadi hilang atau tersembunyi. Namun bukan berarti navbar bawaan blogger tersebut hilang. Sebagai buktinya adalah jika kita sedikit tahu tentang inspect element atau dilihat dari page sourcenya, sebenarnya widget tersebut masih ada.

Lalu bagaimana caranya agar Navbar dan widget bawaan blogger tersebut benar-benar hilang??
Caranya cukup gampang.

1. Login ke dashboard -> design -> edit html.
2. Cari kode:

<body>
3. Letakkan kode berikut tepat diatasnya.

<script type="text/javascript">
<![CDATA[
<!--/*<body>*/-->
]]>
</script>

4. Save Template.
Maka kita akan ada pemberitahuan seperti ini. Klik saja hapus atau delete widgets.

Maka widget-widget bawaan dari blogger tersebut akan benar-benar hilang termasuk juga widget bawaan lainnya seperti tanda obeng atau quick edit dan lain sebagainya.

Tambahan:
Jika kita ingin memunculkan kembali widget tersebut, maka kita tinggal hapus kode tersebut. Gampangkan??

Trik dan Kode-kode Untuk Menampilkan dan Menghilangkan Widget Content Blog

Dipostingan kali ini kita akan membahas bagaimana cara menghilangkan dan menampilkan suatu objek diblog. Dalam mendesign sebuat template, Penggunaan Trik dan Kode-kode Untuk Menampilkan dan Menghilangkankan ,atau lebih tepatnya menyembunyikan Widget Content Blog ini sangat diperlukan agar hasil template yang kita buat tidak terlihat monoton. Sebagai contoh adalah widget slider dan salah satu sidebar yang ada pada blog ini. Widget tersebut hanya akan muncul dihalaman utama dan kategori blog dan akan menghilang jika kita masuk kehalaman posting.

Kode-kode Untuk Menampilkan dan Menyembunyikan Widget Content Blog ini biasanya pasti ada ditemplate-template dengan gaya magazine atau majalah. Seperti yang kita ketahui, template blog dengan gaya Magazine Style merupakan salah satu favorit template yang sering di pakai oleh para blogger. Salah satu ciri template blog dengan gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog.

Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda terapkan untuk mengatur tampilan widget blog Anda.

1. Hanya pada Halaman Utama Blog

<b:if cond="data:blog.url == data:blog.homepageUrl">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika kita mengklik Label Post atau membaca postingan secara keseluruhan.

2. Kategori Post dan Single Post

<b:if cond="data:blog.url != data:blog.homepageUrl">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (postingan secara keseluruhan).

3. Halama Utama Blog dan Kategori Post

<b:if cond="data:blog.pageType != "item"">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca postingan secara keseluruhan.

4. Single Post atau Halaman Postingan

<b:if cond="data:blog.pageType == "item"">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.

5. Halama Utama Blog dan Kategori Post

<b:if cond="data:blog.pageType == "index"">

...Kontent...

</b:if>

Fungsi kode ini sama dengan fungsi kode pada nomer 3.

6. Menampilan Widget Blog Pada Postingan Tertentu Saja

<b:if cond="data:blog.url == "URL_POST_TERTENTU"">

...Konten...

</b:if>

Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu.

7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja

<b:if cond='data:blog.url != "URL_POST_TERTENTU"'>

...Konten...

</b:if>

Kode ini merupakan kebalikan dari kode no 6 dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul pada postingan yang lain.

Cara penggunaan kode ini sangatlah gampang. Kita cukup menambahkan kode yang kita inginkan kewidget yang ingin kita tampilkan atau sembunyikan.

Untuk penerapan kode-kode diatas ada 2 cara yaitu langsung pada widget dan secara kelompok atau dengan memberikan perintah melalui kode CSS-nya. Namun biasanya, penerapan kode-kode ini melalui CSS hanya di gunakan untuk mengatur komposisi dari suatu kolom widget konten. Misalnya lebar dan posisi widget atau objek berbeda dihalaman utama dan postingan. Mungkin hal ini akan kita bahas di postingan berikutnya.

Mungkin itu saja yang saya tahu tentang Kode-kode Untuk Menampilkan dan Menyembunyikan Widget Content Blog ini. Jika teman-teman punya pendapat atau ilmu yang lain, silakan tinggalkan komentar dan url postingannya dibawah ini. Semoga bermanfaat.

Kode Script dan Cara Memasang Recent Post By Label Di Blogspot

Sebenarnya Cara Memasang Recent Post ini sudah banyak dibahas oleh para master blogger. Namun biasanya dan kebanyakan yang dibahas hanya bisa menampilkan artikel-artikel yang disortir berdasarkan postingan terakhir yang diterbitkan.

Nah, Pada postingan kali ini kita akan coba membahas yang sedikit berbeda. Yaitu Bagaimana Cara menampilkan postingan-postingan terakhir tersebut diurutkan berdasarkan label. Hal ini akan sangat berguna buat kita jika blog yang ingin kita tulis berupa Blog berita. Seperti yang kita ketahui bersama biasanya blog atau web yang berupa berita ini biasanya menggunakan design seperti halnya Magazine atau Majalah.

Perbedaan template ini biasanya dilengkapi dengan kolom yang banyak agar kita bisa memasang widget yang juga tidak sedikit. Dimana nantinya setiap widget ini mempunyai fungsi untuk menampilkan artikel-artikel terdahulu yang di shortir berdasarkan label dari postingan.

Berikut ini adalah fungsi yang bisa kita manfaatkan dengan Memasang Script Recent Post By Label ini.

1. Recent Post By Label Hanya Judul Postingan.
2. Recent Post By Label Judul dan Gambar Postingan.
3. Recent Post By Label Judul, Gambar dan Jumlah Komentar Postingan.
4. Recent Post By Label Judul, Gambar dan Tanggal Postingan.
5. Recent Post By Label Judul, Gambar, Jumlah Komentar dan Tanggal Postingan.
6. Recent Post By Label Judul, Gambar, Jumlah Komentar, Tanggal Postingan dan Baca Selengkapnya.

Cara pemasangannya.
1. Masuk ke Dashboard -> Design -> Edit Html.
2. Cari kode </head>
Kemudian letakkan kode berikut diatasnya.

4. Save Template.
5. Kembali ke Dashboard -> Design -> Add Element -> HTML/JavaScript.

Keterangan kode:

1. var numposts = 4; = jumlah Postingan yang ingin ditampilkan
2. var showpostthumbnails = false; = Kode Menampilkan gambar
3. var displaymore = false; Kode Menampilkan tulisan read more
4. var showpostdate = true; = Kode Menampilkan tanggal posting
5. var showcommentnum = true ; Kode Menampilkan Jumlah Komentar Postingan
6. var showpostsummary = true ; Kode Menampilkan sebagian isi Postingan
7. var numchars = 340; Panjang karakter isi postingan yang ditampilkan
8. var displayseparator = false; Kode Untuk memberikan Pembatas setiap tampilan

Ganti false (kode warna merah) dengan true (kode warna biru) untuk menampilkan, demikian juga sebaliknya.

Ganti LabelPost (kode warna cokelat) Dengan Label yang ingin ditampilkan. Jika label tersebut menggunakan spasi, maka ganti kode spasi dengan %20.
Contoh Label = Belajar Blog maka untuk penulisannya harus dengan format seperti ini:

Tambahan:
Kode ini juga bisa dipakai untuk memanggil feed post blog kita yang lain. Caranya adalah cukup dengan menambahkan URL BLOG dan Label yang ingin ditampilkan.

Contoh:

Cara membuat Popular Post dengan Thumbnail Horizontal

Postingan kali ini masih berhubungan dengan beberapa posting sebelumnya. Yaitu masih seputar CSS dan Inspect Element.

Seperti diketahui bersama, dari bawaan blogger sendiri sudah tersedia widget Popular Post sendiri. Tapi kelemahannya, Widget tersebut sudah mempunyai pengaturan default dan hanya tersedia dalam bentuk vertikal, sehingga bentuk dari widget tersebut terlihat monoton dan agak membosankan jika dilihat. Dan yang pasti, jika kita ingin menampilkan Popular Post dengan Thumbnail yang maksimal, posisi yang cocok untuk tempat peletakannya hanya dibagian sidebar saja.

Oleh sebab itu maka saya coba sedikit melakukan uji coba agar widget popular post dengan Thumbnail tersebut bisa dipasang dibagian footer dan dengan posisi horizontal. Demonya ya bisa langsung dilihat di bagian footer blog ini.

Tapi itu juga masih banyak kekurangan. Soalnya untuk postingan yang tidak disertai gambar maka akan terlihat kosong. Ada yang bisa bantu gak ya??

Berikut ini adalah langkah-langkah Untuk Cara membuat Popular Post dengan Thumbnail Horizontal ini,

1. Login ke Dashboard blogger -> Design -> Edit Html. Atau Jika menggunakan fitur yang bahasa indonesia Beranda -> Rancangan -> Edit Html.
2. Cari kode ]]</b:skin>

Kemudian letakkan kode CSS berikut ini di atasnya.

#content-footer{
width:100%;
clear:both
}
#content-footer h2{
color: #333;
text-transform: none;
font-family: Georgia;
font-size: 16px;
font-weight: 700;
margin-bottom: 0px;
padding: 5px 15px;
}

.bottom-content .PopularPosts ul {
padding: 0;
margin: 0px;
background: #FFF;
overflow:hidden;
}
.bottom-content .PopularPosts ul li {
width: 82px;
padding: 0; margin:0 7px 0;
border: none;
float: left;
list-style: none;
line-height: 1em;
}
.bottom-content .PopularPosts {
background: none!important;
}
.bottom-content .PopularPosts .item-thumbnail img {
width:82px;
height:105px;
padding:0;
}
.bottom-content .PopularPosts .item-title {
padding: 5px 0;
margin:0px 0 10px;
font:bold 11px Georgia;
border-bottom: 1px solid #861519;
clear:both; height: 37px;
overflow: hidden; text-align: center;
}
.bottom-content .PopularPosts .item-title a {
color:#25c;
}
.bottom-content .PopularPosts .item-snippet {
margin:10px 0;
color:#4f4f4f;
}
.bottom-content .section{
margin: 0 5px;
}

3. Berhubung pada template ini widget popular post saya pasang di atas footer maka yang selanjutnya adalah Cari Kode:

<div id="footer-wrapper">

Atau sejenisnya, Kemudian letakkan kode berikut diatasnya.

Untuk pencarian id atau class dari suatu widget ini bisa dibaca dipostingan ini.

4. Save Template.

Jika tidak ada masalah, maka hasilnya kira-kira akan seperti widget popular post dibagian bawah blog ini.

Semoga Bermanfaat..!!

Tempat-tempat untuk membuat template blog - Template Generator Online

Membuat dan men-Design sebuah template Blog memang tidak mudah, dan tidak juga terlalu susah. Jika bosan dengan template-template yang tersedia, solusi yang terbaik adalah membuat sendiri design templatenya. Untuk membuat template kita harus memahami struktur sebuah template tersebut. Misalnya anda menggunakan blogspot, anda cukup mempelajari bahasa html, css dan java script. Tetapi jika anda menggunakan wordpress, kita harus memahami html, css, script php, dan javascript.

Mungkin hal ini juga yang membuat blogger yang menggunakan blogspot sebagai sarana pertama belajar nge-blog. Untuk mempermudah kita tanpa harus mempelajari semua bahasa pemrograman web diatas, kita bisa membuat template blog dengan menggunakan Template Generator. Dibawah ini saya akan sharing beberapa situs penyedia template generator yang dapat dicoba.

1. CSSEZ.
CSSEZ ini adalah generator template online untuk blog Wordpress, movable type, Live Door Blog, dan Amoeba Blog. Jika anda ingin menggunakan layanan ini, anda perlu registrasi gratis disini. Beberapa fiturnya yang bagus adalah memilih antara satu sampai empat kolom template, mengatur lebar kolom, padding, margin, border, font dan style link. Anda juga dapat mengupload gambar atau membuat sendiri dengan image maker.

2. Drupal Theme Generator
Generator ini adalah generator theme berbasis MS Excel untuk situs atau blog drupal yang menggunakan template PHP dan Xtemplate. Layanan ini gratis dan memiliki fitur yang kaya seperti generator theme random color, preview theme langsung, html color assistant, dan integrasi CSS, javascript, PHP dan kode html pada theme dari file eksternal dan lain sebagainya. Selain itu ada 9 theme yang bisa anda dapatkan ketika mendownload generator ini.

3. Firdamatic
Generator template online untuk blogger dan movable type ini memiliki pilihan dua dan tiga kolom, anda bisa memasukkan sendiri informasi pada boks relevan pada form online yang tersedian dan klik generate template, selain itu anda juga bisa menambahkan judul situs, url gambar dan memilih huruf dan warnanya.

4. PsycHo
Generator online template open source ini dapat diaplikasikan pada platform blogger, persian blog, dan blogFa. Anda bisa mengatur sendiri judul halaman, warna background body template, judul background, deskripsi, teks, spacing dan memilih hingga 4 pilihan kolom. Anda juga bisa preview template anda dan menyimpan kodenya. Layanan ini mudah digunakan tanpa pengetahuan html yang terlalu banyak.

5. Templatr
Templatr ini menyediakan lebih dari 20 layout dan pilihan formatting untuk berbagai elemen halaman termasuk halaman utama, header, footer, titles, margin, padding, border dan banyak lagi untuk keperluan wordpress blog. Selain itu, layanan ini juga menyediakan upload dimana anda bisa mengupload grafis/gambar . Setelah itu anda bisa mendownload template jika anda telah selesai dan mengaplikasikannya pada blog anda.

6. Weebly
Generator template yang rapi ini memiliki 15 desain pre-built yang bisa dikustomisasi dengan menambahkan elemen seperti iklan, feed icon, map, contact form, teks dan layout gambar, kolom google dan youtube video dan lain sebagainya. Jika anda sudah selesai anda bisa mempublikasikan situs/blog tersebut pada platform anda.

7. WordPress Theme Generator
Layanan generator online dapat membantu anda untuk membuat sendiri theme wordpress anda dengan mudah tanpa pengetahuan html dan css language. Layanan ini menyediakan pilihan untuk memilih sendiri nama blog, ukuran body, lokasi sidebar dan ukurannya, menambahkan kolom ketiga, layout menu, warna dan skema teks, anda juga bisa menambahkan tag cloud, arsip dan kotak pencarian. Selain itu anda bisa mengupload logo situs anda online dan membuat link-nya dari template. Jika anda telah selesai anda bisa melihat hasil kreasi anda dan mendownloadnya dalam file zip.

8. iStylr
Bagi yang senang edit css dan yang lainnya bisa mampir disini.

9. PixoPoint
Pixo point adalah template generator yang didesain bagi anda yang ingin membuat desain untuk website anda tanpa harus menyentuh sedikit pun kode-kode HTML. Tidak seperti Generator lainnya, semua kreasi template yang ada disini hanya bisa digunakan untuk WordPress. Begitu banyak pilihan modifikasi yang tertera di control panel, anda jadi lebih memudah merubah disain anda kapanpun juga.

10. DoTemplate
doTemplate menawarkan berbagai jenis catalog web template gratis. Semua template yang di hadirkan di sini sangat mengundang selera dan cukup bisa memikat anda. Cukup memilih warna, huruf dan beberapa efek-efek grafik untuk membuat kreasi template anda yang baru.

11. Pimp My Profile
Template Generator yang satu ini telah menyediakan fasilitas yang dapat dipilih untuk membuat blog. Kita dapat dengan luluasa men desain template yang kita inginkan

12. Page Colomn Layout Generator
Bahkan Template Generator yang satu ini telah menyediakan pilihan colomn yang dapat di pilih mulai dari 1 colomn sampai 5 colomn

Sebenarnya masih ada banyak lagi tempat-tempat membuat template secara online, anda bisa browsing sendiri di google.

Semoga Bermanfaat..!!

10 Bukti nyata Blogger Sukses Berpenghasilan Terbesar Per bulan

Disebuah postingan berbahasa inggris yang dulu pernah saya posting diblog ini, (red_atau lebih tepatnya saya copas entah dari mana, karena waktu itu saya hanya ingin mendaftarkan blog ini ditechnorati. Karena konon katanya dengan mendaftarkan blog di technorati blog kita semakin cepat bisa terindeks oleh mesinnya si mbah google), ada seorang sahabat pernah berkomentar dan mengeluh.

"Benar gak sich blogging itu bisa menghasilkan uang, Kok setelah sekian lama blogging, tapi saya belum juga bisa menghasilkan sedikitpun??"

Dan pada lain tempat, yaitu lewat Chat, pernah juga seorang sahabat bertanya:
"Seberapa besar sih penghasilan yang bisa diperoleh dari sebuah blog?"

Pertanyaan semacam ini juga banyak diajukan oleh orang-orang yang ingin mencari sumber penghasilan sebagai Blogger atau sekedar ingin membenarkan diri bahwa menjadi Blogger itu tidak ada gunanya. Nah, pada kesempatan kali ini, saya coba menjawab pertanyaan dari teman-teman yang mungkin masih ragu kalau aktifitas blogging atau dapat uang dari internet itu benar-benar bisa menghasilkan. Kebetulan saat blogwalking saya menemukan sebuah postingan yang mungkin bisa membantu kita untuk tetap semangat blogging.

Berikut ini merupakan contoh nyata dari Blogger-blogger yang sukses meraup keuntungan dari blognya antara lain:

1. TechCrunch.com
TechCrunch pada awalnya hanya dikelola oleh Michael Arrington, seorang pengacara yang sekaligus seorang tech geek. Saat ini, TechCrunch digawangi oleh sejumlah editor yang bekerja sebagai tim. Niche blog ini adalah teknologi dan starts up. Penghasilan per bulan yang diperoleh TechCrunch adalah $200,000 (atau setara Rp.2.053.000.000!) dan terutama bersumber dari iklan-iklan banner. Konon katanya, harga spot iklan selama sebulan di TechCrunch adalah $10,000! (atau setara Rp.102.650.000!).

2. Mashable.com
Mashable adalah blog yang dibuat oleh Pete Cashmore, seorang web technology consultant dari Skotlandia dan saat ini diawaki oleh 10 orang editor tetap. Blog dengan tag line "The Social Media Guide" ini membidik niche social media sebagai sasarannya. Berdiri sejak tahun 2005, Mashable kini telah menghasilkan uang $180,000 (atau setara Rp.1.847.700.000!) setiap bulannya. Sumber penghasilan utama Mashable adalah dari iklan banner.

3. PerezHilton.com
PerezHilton adalah blog berita selebritis yang dibuat dan dikelola oleh Mario Lavandeira. Mengambil nama plesetan dari Paris Hilton, blog dengan niche entertainment dan mengusung tag line "Celebrity Juice, Not from Concentrate" ini konon menghasilkan uang $140,000 (atau setara Rp.1.437.100.000!) setiap bulannya. Sumber penghasilan utamanya berasal dari iklan banner.

4. Gothamist.com
Gothamist adalah blog tentang berbagai sisi kota New York. Dibuat dan dikelola oleh Jake Dobkin, blog dengan tag line "New York City News, Food, Arts and Events" ini banyak mendapatkan penghasilan dari iklan PPC. Per bulan, penghasilan Gothamist ditaksir mencapai angka $80,000 (atau setara Rp.816.287.872!).

5. TimothySykes.com
Blog ini, sesuai namanya, dimiliki dan dikelola secara pribadi oleh Timothy Sykes, seorang pialang dan manager hedge fund asal Amerika Serikat. Dengan niche finance, blog Timothy Sykes terutama banyak mendapatkan penghasilan dari penjualan produk-produk affiliasi keuangan. Setiap bulannya, blog dengan tag line "Short Selling Penny Stocks" ini setidaknya memberikan penghasilan $80,000 (atau setara Rp.816.287.872!).

6. VentureBeat.com
VentureBeat adalah blog berita teknologi dan starts up yang dikelola oleh Matt Marshall. Berdiri sejak tahun 2004, Venture Beat setiap bulannya menghasilkan uang $62,000 (atau setara Rp.636.429.998!) untuk Matt Marshall. Sumber penghasilan utamanya berasal dari iklan PPC.

7. LifeHacker.com
LifeHacker adalah blog yang mengupas tentang tips-tips praktis dalam kehidupan sehari-hari. Dikelola oleh Gina Trapani dan Nick Denton, blog dengan tag line "Tips and Downloads for Getting Things Done" ini menghasilkan $60,000 (atau setara Rp.615.899.999!) terutama dari iklan banner.

8. TutsPlus.com
TutsPlus adalah blog unik yang berisi tentang berbagai tutorial dan video tips-tips praktis. Dibuat oleh Collis Taeed dan diawaki oleh sejumlah editor tetap untuk setiap segmen tutorial, TutsPlus yang mengusung tag line "Mad Skills" ini menghasilkan $55,000 per bulannya (atau setara Rp.564.575.000!). Sumber penghasilan utamanya adalah iklan banner.

9. SmashingMagazine.com
Smashing Magazine adalah blog yang terutama ditujukan bagi para web designers dan web developers. Setiap bulannya, Smashing Magazine memberikan penghasilan $50,000 (atau setara Rp.513.250.000!) terutama dari iklan banner. Dibuat oleh Vitaly Friedman, seorang web developer, pada tahun 2006, Smashing Magazine kini dijalankannya berdua bersama Sven Lennartz, seorang web designer asal Jerman.

10. StevePavlina.com
Seperti namanya, StevePavlina.com dimiliki dan dikelola secara pribadi oleh Steve Pavlina, seorang guru pengembangan kepribadian asal Las Vegas, Amerika Serikat. Blog dengan tag line "Personal Development for Smart People" ini memiliki penghasilan $45,000 (atau setara Rp.461.925.000!) setiap bulannya. Sumber penghasilan utamanya berasal dari iklan PPC dan JV (Joint Venture).

Sebenarnya mereka adalah cuma contoh kecil. Jika kita ingat-ingat sedikit, kita pasti pernah mendengar bahwa pendiri wordpress yaitu Matt Mullenweg dan juga facebook dan juga penemu facebook mark zuckerberg, tidak akan mungkin bisa punya ide-ide cemerlang seperti itu jika mereka dulunya bukan seorang blogger. Kita kita juga tahu bahwa blogger-blogger Indonesia sendiri sudah ratusan bahkan ribuan orang yang telah berhasil. Atau kita fikir saja secara logika, jika kegiatan ini tidak benar-benar bisa menghasilkan, mungkinkah ada begitu banyak orang yang hanya melakukan pekerjaan yang sia-sia?

Sekarang barangkali jawaban pertanyaan ini justru kembali kepada Anda sendiri. Seberapa besarkah penghasilan yang Anda inginkan dari aktivitas blogging? Anda sendiri yang menentukan.

Yang pasti, dunia blogging sejatinya menawarkan teramat banyak peluang. Sayangnya, terutama di Indonesia, peluang ini belum banyak dimanfaatkan. Blog masih dianggap sebatas diary online, atau paling banter hanya dianggap sebagai blog pribadi yang bersifat personal. Padahal, jika dikelola secara serius dan profesional, blogging bisa sangat menguntungkan dan memberikan penghasilan dalam jumlah yang bakal membuat mata siapapun yang melihatnya melotot keluar.

ref: http://mylaboratorium.blogspot.com/2012/01/10-blogger-berpenghasilan-di-atas-450.html

Cara Mengetahui id dan class dari suatu widget atau kolom

Seperti yang kita ketahui bersama, setiap template merupakan sekumpulan dari kolom-kolom. Dimana setiap widget atau kolom atau juga konten area pasti memiliki id tersendiri. Id ini merupakan nama dari widget tersebut seperti halnya header, sidebar, footer dan lain sebagainya. Untuk si pembuat atau designer template tersebut pasti tidak sulit untuk mengubah suatu area baik itu lebar, tinggi posisi dan lain sebagainya dari template tersebut. Namun berbeda halnya dengan kita yang hanya bisa memakai alias menikmati hasilnya.

Nah, permasalahannya disini adalah ketika ada sesuatu yang terlihat agak janggal, kemudian kita ingin memperbaiki dengan mengedit kode CSS-nya, atau kita ingin menambahkan suatu area disekitarnya, maka kita mau atau tidak mau kita harus tahu terlebih dahulu id dari kolom widget yang kita rubah. Id ini sendiri haruslah bersifat unik alias tidak boleh sama. Jadi tidak semua widget itu memiliki nama yang sama. Sehingga ketika sebuah template ini didesign, terutama template yang memiliki banyak kolom maka akan semakin banyak pula id-id yang akan diberikan oleh si designer.

Sebagai contoh misalnya sebuah template yang mempunyai 2 kolom sidebar, maka si designer ini pasti akan memberikan id tersendiri dari masing area. Pemberian id ini tidak ada ketentuannya. Id Sidebar tersebut bisa saja sidebar pertama diberi nama dengan sidebar-left dan sidebar kedua diberikan id sidebar-right, atau sidebar1 dan sidebar2, atau id-id yang lain misalnya yang satu id-nya sidebar-left, tapi sidebar yang kedua diberikan id kolom-tambahan.

Agar kita bisa mengetahui id dari suatu widget ini caranya sangat gampang. Kita tidak perlu memeriksa dan mengeditnya satu persatu. Caranya adalah kita cukup menggunakan fasilitas inspect element. Jika belum tahu tentang inspect element ini, silakan baca terlebih dahulu postingan tentang inspect element disini.

Disini saya juga akan coba memberikan satu contoh kecil. Saya akan contohkan bagaimana saya melihat id salah satu kolom yang ada di blog ngalor-ngidul ini langsung.

1. Pertama letakkan mouse pada widget yang ingin kita ketahui id-nya, sebagai contoh disini saya akan melihat id-id dari widget slider yang ada di homepage blog ini.
2. Klik kanan pada browser. Saya sendiri disini menggunakan browser google chrome. Jadi Kalau mau hasilnya sama, maka saya sarankan anda juga menggunakan google chrome.
3. Pilih inspect element sehingga kita akan mendapatkan hasil seperti dibawah ini. Jika kurang jelas klik saja gambarnya.

4. Sekarang coba kalian perhatikan bagian yang saya lingkari dengan garis merah tebal. Disitu kita bisa lihat ada banyak sekali kode source dan/atau kode HTML dari blog ini. Dan disetiap tag yang berawalan <div> pasti disertai dengan kata id atau class.

Setelah kita tahu mengetahui id dari widget yang ingin kita rubah tersebut maka kita tidak perlu takut melakukan kesalahan dalam mengedit template tersebut. Karena untuk setiap id tersebut juga mempunyai kode CSS-nya sendiri sesuai dengan id-nya. Kode CSS dari id tersebut terdapat pada kolom inspect element disebelah kanan. Kode CSS tersebut juga akan berubah setiap kali kita melakukan inspect element diarea yang berbeda. Untuk melihat apakah widget yang ingin kita edit tersebut sudah benar atau tidak, maka dilayar monitor kita akan suatu tanda seperti yang terlihat di gambar dibawah ini.

Dengan demikian maka untuk pencarian id ini pun selesai. Heheee.....

Cara membuat sudut melengkung dengan CSS

Pada umumnya setiap kali kita membuat sebuah batasan atau garis border pada suatu area, maka hasil yang kita dapatkan pastilah berbentuk persegi. Namun tentu para sobat sekalian pernah melihat ada blog atau website yang memiliki widget content dengan sudut yang kelihatan melengkung atau tumpul.

Nah pada postingan kali ini kita akan membahas sedikit bagaimana caranya agar sudut-sudut ter sebut menjadi melengkung atau menjadi tumpul. Agar bisa langsung mengerti kita akan langsung saja masuk ke metode pembuatannya dan contoh tutorial pembuatannya.

Sebagai contoh anggap saja kita telah memiliki kode HTML dan CSS sebagai berikut:
Kode HTML

Anggap Disini Adalah Content.

Kode CSS

#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
}

Hasil:

Anggap Disini Adalah Content.

Sekarang kita tambahkan sedikit kode CSS dengan format perintah seperti ini.

border-radius: 15px; /*Kode pembuat lengkungan sudut*/

Sehingga kode CSS-nya menjadi seperti ini.

#areaku{
width:600px;
background: #DDD;
color: #222;
border: 2px solid blue;
padding: 10px;
border-radius: 15px; /*Kode pembuat lengkungan sudut*/
}

Maka dengan penambahan kode tersebut kita akan langsung mendapatkan hasil seperti dibawah ini.

Anggap Disini Adalah Content.

Seperti yang kita lihat, maka kita langsung mendapatkan hasil dengan lengkungan yang sama disetiap sudut. Seperti halnya dalam pembuatan border, maka pembuatan lengkungan pada sudut border ini juga bisa dilakukan secara individu. Secara individu rumus untuk pembuatan border radius ini juga bisa kita lakukan seperti ini.

- border-top-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri atas.*/
- border-top-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan atas.*/
- border-bottom-right-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan bawah.*/
- border-bottom-left-radius: 15px; = /*digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri bawah.*/

Selain itu perintah ini juga bisa dilakukan dengan perintah singkat. Hal ini bisa kita lakukan dengan perintah seperti ini.

1. Border-radius: 15px 0px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

2. Border-radius: 0px 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 15px;

3. Border-radius: 15px 15px 0px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 0px;
- border-bottom-left-radius: 15px;

4. Border-radius: 0 15px 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 15px;

5. Border-radius: 15px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 15px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

6. Border-radius: 0px 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

7. Border-radius: 15px 0 0 15px;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

- border-top-left-radius: 0px;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 15px;
- border-bottom-left-radius: 0px;

8. Border-radius: 0 15px 15px 0;
Dengan perintah tersebut hasilnya sama dengan perintah individu:

border-top-left-radius: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 15px;

Dan Lain Sebagainya........

Cara Membuat Teks bayangan dan Text 3D

Pada posting sebelumnya, kita sudah membahas tentang Cara membuat efek bayangan atau Box Shadow. Nah, pada postingan kali ini kita akan coba membahas Cara Membuat Teks bayangan dan Text 3D. Untuk Cara membuat teks bayangan ini proses dan cara kerjanya sama persis dengan membuat efek bayangan atau Box Shadow. Jadi kalau belum membaca postingannya silakan baca dulu posting sebelumnya.

Dalam design blog atau website, pemakaian teks dengan bayangan ini sendiri agak jarang dipakai, karena jika terlalu berlebihan maka bukannya website atau blog menjadi semakin bagus, tapi malah menjadi sulit untuk dibaca. Yang paling sering dipakai paling hanya efek bayangan kecil seperti yang dipakai diblog ini.

Untuk sedikit contohnya kalian bisa lihat perbedaannya di bawah ini.

#teks-bayangan{background: #666;  
border:3px ridge #FFF;  
padding: 15px;  
margin-top: 10px;  
font-size: 18px;  
color: #111;  
text-align:center;  
box-shadow: 0 0 10px red;
}

Hasil sebelum kode bayangan/shadow

Sekarang kita tambahkan sedikit kode dari teks-shadownya.

text-shadow: 2px 2px 0 red;

Hasil CSS setelah ditambah kode bayangannya yang kita dapatkan kira-kira seperti ini.

#teks-bayangan{
background: #666;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code box bayangan--*/
text-shadow: 2px 2px 0 red; /*--code teks bayangan--*/
}

Hasil Setelah Penambahan kode bayangan/shadow

Untuk melihat atau membuat contoh yang lain silakan coba rubah angka-angka tersebut sesuka hati kalian.

2. Cara pembuatan efek bayangan ganda atau lebih.

Untuk cara pembuatan bayangan efek ganda atau lebih ini serta efek bayangan 3D, prinsipnya tetap juga sama dengan pembuatan efek bayangan ganda dicara pembuatan box shadow. Jadi saya hanya memberikan contohnya disini. Untuk pembuatan efek 3D ini kita hanya perlu sedikit kreatif karena untuk pembuatannya kita akan membutuhkan sangat banyak kode bayangannya dan pengaturan posisi serta blurnya.

Berikut ini adalah hasil-hasil kode CSS dan contohnya.
1. Letter Press.

#letter-press{
text-shadow: 0px 1px 1px #fff;
}

Letter Press

2. Text shadow Stereoscopic.

#stereoscopic{
text-shadow: 4px 0 0 blue,-4px 0 0 red;
}

Stereoscopic

3. Neon.

#neon{
text-shadow: 0 0 1px #2ec728, 0 0 3px #2ec728,
0 0 5px #2ec728, 0 0 7px #2ec728, 0 0 9px #2ec728;
}

Neon Teks

4. Efek teks terbakar.

#teks-terbakar{
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 
2px -10px 6px #fd3, -2px -15px 11px #f80, 
2px -18px 18px #f20;
}

Efek Teks Terbakar

5. Efek Teks 3D

#teks-3D{text-shadow: 
1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 
1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 
4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 
4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 
7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 
7px 8px #bbb, 8px 8px #ddd;
}

Teks Efek 3D dengan CSS

Pastikan perpaduan warna pada background dan teks shadow ini adalah warna yang serasi agar terlihat lebih menarik. Semoga bermanfaat...

Info Kontes SEO 2012 - Lomba Blog Semi SEO "Karapan Sapi" Berhadiah Ponsel Android

Setelah sebelumnya ada yang namanya Lomba Semi SEO Sekolah Manajemen Perhotelan IHS, maka diposting kali ini ane juga ada satu lagi info tentang Lomba Semi SEO. Lomba Semi Seo ini diadakan dalam rangka HUT Plat-M yang kedua. Nah buat yang sedang semangat-semangatnya buat ngetes kemampuan Dalam bidang SEO, berikut ini rincian yang ane copas langsung dari sumbernya.

Tema Kontes: “Karapan Sapi”

I. Persyaratan Lomba
1. Kompetisi ini bebas diikuti oleh siapapun yang berdomisili di Indonesia.
2. Menulis dan memposting artikel ke blog Anda dalam bahasa Indonesia minimal 800 kata dengan gaya bahasa yang digunakan bebas-santai-sopan, tidak harus formal/EYD
3. Tulisan harus milik sendiri, bukan jiplakan, dan belum pernah dipublikasikan sebelumnya di media massa manapun (cetak maupun elektronik)
4. Memiliki blog pribadi baik yang gratis (.wordpress .blogspot .blogdetik .dagdigdug. dll) atau self-hosted
5. Tulisan harus mencantumkan kata-kata “Karapan Sapi” dan wajib ada link ke plat-m.com, bloggernusantara.com dan idblognetwork.com
6. Peserta wajib ‘tweet’ judul tulisan beserta ‘link’-nya dengan ‘ follow dan mention’ ke @plat_m @blognusantara dan @idblognetwork dengan hashtag #XLaluCintaIndonesia
7. Peserta wajib memasang banner lomba semi SEO Karapan Sapi dengan mengcopy script html yang tersedia di bawah ke blog masing-masing
8. Pendaftaran artikel dimulai tanggal 23 Desember 2011 dan ditutup 23 Januari 2012, dengan sebelumnya harus telah mengirimkan URL artikel (bukan artikel halaman depan blog) melalui formulir online yang tersedia di bagian bawah halaman ini.
9. Penjurian akan dimulai setelah penutupan pendaftaran, dan pengumuman pemenang via online di situs plat-m.com dan di twitter @plat_m. Pemenang di Madura dan sekitarnya diminta untuk mengambil hadiahnya di tempat dan waktu yang telah disepakati. Adapun pemenang dari luar Madura, hadiah akan dikirimkan ke alamat yang diminta.

II. Penilaian Lomba
1. Penilaian lomba meliputi: gaya bahasa, memiliki obyektif yang sesuai dengan tema, yaitu Karapan Sapi
2. Tulisan akan dinilai oleh juri dari idblognetwork dan Blogger Nusantara
3. Kualitas dan kuantitas komentar pembaca pada setiap artikel akan menjadi nilai tambah.
4. Tautan artikel yang diambil untuk dinilai tim juri adalah artikel yang sesuai dengan ketentuan tulisan dan muncul pada urutan 20 teratas berdasarkan halaman hasil pencarian di google.co.id dengan kata kunci “Karapan Sapi” pada tanggal 23 januari 2012 pukul 23:30 WIB.
5. Setelah diputuskan sebagai pemenang, maka publik memiliki kesempatan 1 (satu) minggu untuk memberikan masukan /menyanggah jika ada indikasi artikel yang menang tersebut adalah hasil copy-paste! 6. Jika nanti setelah dicek-silang ternyata artikel tersebut terbukti hasil plagiarisme, kemenangannya akan dibatalkan dan diganti oleh yang lain.
6. Keputusan juri adalah mutlak dan tidak dapat diganggu gugat.

III. Hadiah.

- Grand Winner (1 orang) : Samsung S5360 Galaxy Y (OS: Android)
- 1st Runner Up (1 orang) : Ponsel Qwerty
- 2nd Runner Up (3 orang): Modem GSM.

Buat yang merasa bisa memenuhi syarat dan berniat untuk berpartisipasi silakan langsung menuju mendaftar disitus resminya di http://plat-m.com/lomba-blog-semi-seo-berhadiah-ponsel-android/

.co.cc kembali terindeks google

Kabar gembira banget neh... Udah ketinggalan berita banget sich.. Yaitu tentang .co.cc kembali terindeks di google. Sebenarnya dari bulan kemaren udah mulai nemuin lagi blog-blog atau website yang menggunakan .co.cc. Dan entah kenapa belakangan ini saya kembali tergerak untuk kembali blog walking.

Nah, dari situ saya mulai bertanya-tanya, kok sekarang yang pakai .co.cc banyak lagi ya??
Saya langsung coba cek kegoogle untuk cek blog domain .co.cc saya. yaitu www.gembelelit.co.cc dan ternyata memang www.gembelelit.co.cc sudah kembali terindeks.

Seperti yang kita ketahui bersama, memang ada banyak sekali pernyataan dan keputusan-keputusan google yang membuat para blogger menjadi kecewa. Dan tidak sedikit yang mencurahkannya lewat postingan-postingan mereka. Termasuk admin ngalor-ngidul sendiri. Jika teman-teman masih ingat puncaknya dan terakhir saya tulis tentang keluhan-keluhan tersebut ada dipostingan ini.

Huft..
Akhirnya setelah mengalami kekecewaan pada keputusan-keputusan google, sedikit dari keluhan para blogger newbie seperti saya didengar juga. Setelah Menjalani masa hukuman selama 6 Bulan akhirnya situs penyedia Domain Gratis Co.cc Kembali terindex Sang Mah Google. Semoga saja hal ini akan terus lebih berlanjut dan google tetap akan memberikan yang terbaik untuk para blogger-blogger sejatinya. Amieennn......

Artikel Sekolah Manajemen Perhotelan IHS Kena Sand box

Waduuhh...

Bingung juga neh kenapa? Soalnya ini yang pertama kali menghadapi yang seperti ini. Artikel Sekolah Manajemen Perhotelan IHS Kena Sand box. Padahal baru kemaren di cek artikel ini masih nongkrong di posisi no 11 di google.co.id. Tapi malam ini saya coba cek, artikel tersebut hilang entah kemana.

Ingat-ingat lagi, kalau tidak salah memang banyak juga para blogger yang suka mengalami hal seperti ini. Jadi langsung searching di google buat cara mengatasinya. Setelah baca langsung praktek cara-cara Cepat Keluar dari Google Sandbox.

1. Edit artikel yang terkena efek sandbox yaitu artikel Sekolah Manajemen Perhotelan IHS dengan menambahkan beberapa kata atau kalimat baru. Cek link yang ada, pastikan tidak ada yang broken link. Anda juga bisa tambahkan beberapa link atau menguranginya. Intinya lakukan update pada postingan yang bersangkutan.

2. Buat postingan yang berhubungan dengan Google Sandbox dan arahkan link ke postingan yang terkena efek tersebut.

3. Resubmit Sitemap blog Anda dengan menggunakan bantuan Google Webmaster Tools.

4. Berikan beberapa backlink berkualitas ke postingan yang bersangkutan dengan berkomentar di blog lain atau menaruh link tersebut di blog dummy Anda.

Dan yang terakhir adalah tinggal "berdoa" semoga artikel Sekolah Manajemen Perhotelan IHS lekas keluar dari efek ini dan dapat diindeks kembali oleh Google.

Jika ada teman-teman yang punya cara lebih cepat, mohon share dan koment dibawah ya...

Jenis-jenis border dan cara pembuatannya

Setelah kita tahu sedikit tentang border margin dan padding, maka dalam pada posting kali ini masih seputar dasar-dasar dari design blog ini juga. Yaitu Jenis-jenis border dan cara pembuatannya. Seperti yang kita ketahui border ini selain sebagai pembatas, juga sekaligus berfungsi untuk mempercantik tampilan blog.

Penulisan border ini sendiri juga bisa dengan memberikannya secara individu atau arahannya: yaitu atas, bawah, kiri, kanan. Untuk pengaturan dan properti CSS border ini kita bisa menggunakan perintah dari keterangan CSS dibawah ini.

Property Border:

Border-color : berfungsi untu menentukan warna.

border-color:red;
border-color:blue;
dsb..

border-color:#000; = Hitam pekat, 
border-color:#FFF; = Putih,
dan lain sebagainya.

border-color:rgb(255, 255, 0); untuk warna kuning, 
border-color:rgb(0, 0, 255); untuk warna biru.
Dsb..

border-top-color: red;
border-right-color: #FF6600;
border-bottom-color: rgb(128, 0, 128);
dsb

Untuk menentukan warna dalam bentuk kode ini kita bisa menggunakan color picker yang ada pada program-program design atau bisa juga dengan mencarinya di internet langsung. Ada banyak kok situs yang menyediakannya. Bahkan diblogger sendiri, untuk yang type sederhana kita bisa langsung mendapatkannya di bagian setting template melalui dahsboard kita. Atau jika mau anda juga bisa memasangnya di blog sendiri kalian bisa mendapatkan scriptnya diposting Cara membuat Color Picker diblog.

Border-style : berfungsi untuk menentukan style atau pola dari border.

border-style:solid, 
border-style:double.
Dsb..

border-top-style:solid;
border-right-style: dotted;
border-bottom-style: double;
border-left-style: dashed;

Border-width: berfungsi untuk menentukan ketebalan dari border.

Untuk penentu ketebalan border kita bisa kode initial, medium atau thick. Namun umumnya dalam proses design website atau template blog, yang biasanya digunakan satuan panjang seperti px, em, cm, in, dsb.

border-width:1px; 
border-width: 2em;
Dsb..

border-top-width: 1px
border-right-width: 2px;
border-bottom-width: 1em;
border-left-width: cm;
Dsb..

Namun pada umumnya tidak semua kode-kode tersebut pasti kita pakai. Biasanya kita juga hanya menuliskannya secara singkat. Untuk penulisan singkat ini kita gunakan jika border yang ingin kita buat memilik style, warna, dan ketebalan yang sama. sebagai contoh kita ingin membuat border kolom kontent dengan border property sebagai berikut: Ketebalan border = 5px Style border = ridge dan warna border = merah. Maka untuk penulisan secara individunya kita akan menuliskan seperti ini.

border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;

border-top-style: ridge;
border-right-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;

border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;

Anggap disini adalah content

Namun karena border yang ingin kita buat memilik style, warna, dan ketebalan yang sama, maka penulisannya cukup dengan kode seperti dibawah ini:

border: 5px ridge red;

Dan penulisan kode singkatnya ini memilik sifat otomatis. Jadi meski penulisannya terbalik-balik juga tidak masalah.
border: 5px ridge red; atau,
border: ridge 5px red; atau
border: red 5px ridge;
dsb,,
hasil yang didapatkan adalah sama.

Anggap Disini Adalah Content.

Anggap Disini Adalah Content.

Anggap Disini Adalah Content.

Category