Memotong Snippet Popular Post Dengan CSS

Sebelum melangkah, artikel ini pertama saya dapatkan dari salah seorang teman blogger saya, Sodikin Kurniawan dalam postingannya yang berjudul: Memotong Snippet Popular Post Dengan CSS. Tentunya ini sangat menarik buat dipublis kembali disini. Baiklah, tidak usah berlama-lama. Mari kita lanjut tutorialnya.

Perhatikan gambar berikut!

Tertarik untuk mengaplikasikannya di blog Anda? Silakan ikuti langkah-langkah berikut.

1. Buatlah widget Popular Posts terlebih dahulu dengan cara masuk ke Page Element ~> Add widget ~> Popular Post. Silahkan sesuaikan kebutuhan dengan menyesuaikan cek list yang ada, misalnya gambar, snippet, dan jumlah populat post yang tampil.

2. Lalu, lakukan langkah-langkah berikut!

Sebenarnya CSS untuk memotong kalimat ini ada 2 model, yakni satu tanpa titik (Clip) dan dua dengan titik (Ellipsis).

Dengan menggunakan kode CSS Ellipsis

Untuk menerapkan style di atas dan ini juga trik yang hampir sama jadinya jika memakai java script.

.PopularPosts .item-snippet {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

Kode CSS diatas masukkan saja diatas kode ]]></b:skin>

Menggunakan kode CSS Clip

Jika memakai clip maka tidak terdapat titik di bagian akhirnya, jadi kelihatan kurang rapi.

.PopularPosts .item-snippet {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: clip;
}

Kode CSS di atas masukkan saja di atas kode ]]></b:skin>

Nah, bagaimana? Mudah bukan?

Selamat mencoba.

Lebih lengkap: www.w3schools.com

- Reviewer: Unknown - ItemReviewed: Memotong Snippet Popular Post Dengan CSS

Cara Mengganti Warna Kotak Komentar Anda

Ada ada saja teknik untuk modifikasi blog kita sehingga tampil beda dari yang lain. Salah satunya adalah dengan mengganti warna kotak komentar kita sehingga berbeda dengan warna kotak postingan. Ayo yang suka edit blog coba trik berikut ini.

1. Tata Letak
2. EDIT HTML
3. Cari kode seperti ini :

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}

4. Ganti dengan kode berikut :

#comments-block {
width: 424px;
background: #003366;
text-align:left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 3px solid #C3D9FF;
border-bottom: 3px solid #C3D9FF;
border-left: 3px solid #C3D9FF;
border-right: 3px solid #C3D9FF;
}

Atur ukuran kotak komentar, atur juga warna background kotak komentar
Kalau sudah Simpan tenplate Anda. Semoga Berhasil...

- Reviewer: Unknown - ItemReviewed: Cara Mengganti Warna Kotak Komentar Anda

Cara Membuat Widget Sharing Is Sexy

Beberapa hari yang lalu salah satu dari sobat setia pembaca blog doodey merequest permintaannya tentang bagaimana cara membuat widget sharing is sexy di blog. Untuk itu guna memenuhi request sobat pembaca tersebut, dalam postingan kali ini saya akan memberikan tutorial tentang hal tersebut, yaitu cara membuat widget sharing is sexy tepat di atas kotak subscribe (langganan) email di bawah postingan seperti pada blog doodey ini.

Jika sobat melihat langsung di bawah postingan artikel ini, terdapat kotak subscribe email yang di atasnya terpasang widget sharing is sexy seperti yang dimaksud. Tampilannya begitu simple dan tentunya juga sangat irit tempat. Sangat efektif bukan?!

Langsung saja, berikut adalah tutorial cara membuat widget sharing is sexy :

Silakan sobat tuju dulu ke halaman Edit HTML, lalu pastekan kode di bawah ini tepat setelah kode ]]></b:skin>

<style type='text/css'>

div.sexy-bookmarks { height:54px; background:url(http://img709.imageshack.us/img709/57/sharing.png) no-repeat left bottom;position:relative; width:540px }

div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://img709.imageshack.us/img709/57/sharing.png) no-repeat right bottom; position:absolute; right:-17px }

div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }

div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important }

div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(http://img406.imageshack.us/img406/9198/sexyy.png) no-repeat !important }

.sexy-furl { background-position:-300px top !important }

.sexy-furl:hover { background-position:-300px bottom !important }

.sexy-digg { background-position:-500px top !important }

.sexy-digg:hover { background-position:-500px bottom !important }

.sexy-reddit { background-position:-100px top !important }

.sexy-reddit:hover { background-position:-100px bottom !important }

.sexy-stumble { background-position:-50px top !important }

.sexy-stumble:hover { background-position:-50px bottom !important }

.sexy-delicious { background-position:left top !important }

.sexy-delicious:hover { background-position:left bottom !important }

.sexy-yahoo { background-position:-650px top !important }

.sexy-yahoo:hover { background-position:-650px bottom !important }

.sexy-blinklist { background-position:-600px top !important }

.sexy-blinklist:hover { background-position:-600px bottom !important }

.sexy-technorati { background-position:-700px top !important }

.sexy-technorati:hover { background-position:-700px bottom !important }

.sexy-myspace { background-position:-200px top !important }

.sexy-myspace:hover { background-position:-200px bottom !important }

.sexy-twitter { background-position:-350px top !important }

.sexy-twitter:hover { background-position:-350px bottom !important }

.sexy-facebook { background-position:-450px top !important }

.sexy-facebook:hover { background-position:-450px bottom !important }

.sexy-mixx { background-position:-250px top !important }

.sexy-mixx:hover { background-position:-250px bottom !important }

.sexy-script-style { background-position:-400px top !important }

.sexy-script-style:hover { background-position:-400px bottom !important }

.sexy-designfloat { background-position:-550px top !important }

.sexy-designfloat:hover { background-position:-550px bottom !important }

.sexy-syndicate { background-position:-150px top !important }

.sexy-syndicate:hover { background-position:-150px bottom !important }

.sexy-email { background-position:-753px top !important }

.sexy-email:hover { background-position:-753px bottom !important }

</style>

Lalu cari kode <data:post.body/>

Jika sobat sudah menggunakan read more, maka akan terdapat 2 kode <data:post.body/>. Letakkan kode dibawah ini setelah kode <data:post.body/> yang pertama

<div class='sexy-bookmarks'>

<ul class='socials'>

<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/miscah' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>

<span class='sexy-rightside'/></div>

Kemudian Simpan Template.


Lalu bagaimana cara membuat kotak subscibe email ?

Intinya sobat masukan kode di bawah ini, lalu pastekan tepat di bawah kode widget sharing is sexy di atas. Itu saja intinya. Jika sudah berhasil, klik Save Template, lalu lihat sendiri hasilnya apakah sudah sesuai dengan penempatan yang diinginkan..

Ini kodenya :

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEEDSOBAT&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border: 1px solid rgb(204, 204, 204); padding: 10px; text-align: left; background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNUkba0wdTXekrSp3VnYSwgGNaaOAgKFZg-r24DPuKKifhJoANJvRi5fFr-cp5xpI0d5WW_fjnEhvE8ScWf0sdUFqDCzz95aHS0dPm5KmjMk_qeHDFCvjKyP9GX7PjH6OtbpPe2c0c2nU/s400/feedreader_2.jpg&quot;) no-repeat scroll right center rgb(255, 255, 255);' target='popupwindow'><input name='loc' type='hidden' value='en_US'/><input name='uri' type='hidden' value='NAMAFEEDSOBAT'/><p style='text-align:justify;'><p><font color='#000000'>MASUKAN KALIMAT DISINI</font></p><br/><p><p><input class='inputbox' name='email' style='width:300px;' type='text'/><input name='uri' type='hidden' value='NAMA FEED SOBAT'/><input name='loc' type='hidden' value='en_US'/><input class='button' type='submit' value='Subscribe'/></p></p></p><p/><p/></form>

Nah, untuk sobat yang sudah mau merequest tentang cara membuat widget sharing is sexy ini saya ucapkan terima kasih sebagai bentuk kepercayaan sobat kepada blog doodey ini. Tapi harap sedikit maklum karena permintaannya baru bisa saya tulis sekarang, sebab saya masih sibuk dalam dunia offline nich.. Tapi tetap, yang paling saya utamakan adalah Anda, para pembaca setia blog doodey, OK :)

Selamat mencoba dan semoga berhasil yaa..

- Reviewer: Unknown - ItemReviewed: Cara Membuat Widget Sharing Is Sexy

Cara Membuat Postingan dan Sidebar Berpindah Tempat

Pernah lihat blog ketika setelah menuju ke halaman postingan, posisi postingan dan sidebarnya berpindah tempat dari posisi semula? Jika pernah dan ingin mencobanya, maka kali ini saya akan menulis tutorialnya disini untuk sobat sekalian.

Pernah lihat blognya Kang Rohman di kolom-tutorial.blogspot.com kan?! Nah, itulah contohnya blog yang dimodifikasi dengan memindahkan posisi postingan dan sidebar dari posisi semula. Cara ini memang cukup efektif mengingat kadang kala widget kita terlalu banyak dan tidak ingin untuk menghapusnya karena widget itu penting. Tentu saja cara ini cukup efektif bukan?!

Saya juga pernah membuat tutorial tentang menampilkan widget di halaman tertentu. Pada tutorial itu ditulis bagaimana kita bisa menampilkan widget di halaman tertentu. Misalnya, widget recent post hanya tampil pada homepage saja, begitu juga sebaliknya hanya ditampilkan pada halaman postingan saja. Silakan dipraktekkan saja, klik disini.

Pengen blog sobat seperti punya Kang Rohman? Ikuti tutorialnya di bawah ini!

1.      Silakan sobat tuju ke halaman Edit HTML, lalu cari kode CSS berikut ini :

#main-wrapper {

float: left;

width: 639px;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

2.      Setelah itu, copy kode CSS template sobat yang mirip dengan kode CSS di atas, lalu paste dan taruh kode tersebut di atas kode </head>

3.      Masukkan kode yang berwarna merah. Jangan lupa ganti float: left menjadi float: right nya hingga menjadi seperti di bawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

#main-wrapper {

float: right;

width: 639px;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

</style></b:if>

4.      Nah, jika sudah semua di atas dilakukan, klik Save template dan lihat sendiri hasilnya bagaimana..

Catatan:

Biasanya jika salah satu di antara #main-wrapper dan #sidebar-wrapper diganti float nya, maka otomatis akan berpindah posisi.

- Reviewer: Unknown - ItemReviewed: Cara Membuat Postingan dan Sidebar Berpindah Tempat

Cara Membuat Footer Multi Kolom

Setelah kemarin kita belajar seo dalam postingan kita sebelumnya, maka kali ini saya akan mengajak sobat untuk kembali mengutak-atik template blog sobat supaya lebih kelihatan profesional. Tutorial yang akan saya sajikan kali ini adalah bagaimana cara membuat footer multi kolom seperti pada blog doodey ini.

Apa itu footer multi kolom? Jika sobat melihat bagian bawah dari blog doodey ini, maka sobat akan melihat footer blog (kaki blog) yang terdiri dari multi (banyak) kolom. Nah, tertarik untuk membuat yang sama? Berikut tutorialnya.

1.      Silakan sobat tuju ke bagian Edit HTML, lalu tambahkan kode di bawah ini di atas kode ]]></b:skin>

#footer-column-divide {

background: #444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinEPbBGVutPcq9oH0Kjoa3zcE6PgvXMc_hhmuUA6H0ypWJ6yidV_T994UmOBlu-9I6ezu83O5SkrDFta5fErvU4VmwKMVd1v0aKoyHfM8Xnbw2gRGXiRhI_ZQ_9_vQygIQVnB8ALdrw23h/s1600/buttommenu-c.png) no-repeat;

width: 900px;

position: relative;

clear: both;

float: center;

color: #fff;

margin: 0 auto;

}

.footer-column {

padding: 10px;

}

2.      Setelah itu, cari kode di bawah ini :

<div id='footer-wrapper'>

<b:section class='footer' id='footer' showaddelement='yes'/>

</div>

atau

<div id='footer'>

<b:section class='footer' id='footer' showaddelement='yes'/>

</div>

3.      Tambahkan kode berikut di bawah kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Catatan:
Jika sobat tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut di bawah <div id='footer'>

Untuk pilihan berapa kolom yang akan sobat gunakan, berikut adalah pilihan jumlah kolomnya :

Jika ingin membuat footer 2 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left; margin:0; text-align:left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 50%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div style='clear:both;'/>

</div>

Membuat footer 3 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; float:left; margin:0; text-align:left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 33%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

Membuat footer menjadi 4 kolom, gunakan kode berikut :

<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left; margin:0; text-align:left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>

</div>

<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='footer3' style='width: 25%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

4.      Jika sudah, klik Save template. Kalau sudah berhasil, maka hasilnya akan menjadi seperti ini :

Footer 2 kolom

Footer 3 kolom

Footer 4 kolom

Nah, jika sobat sudah berhasil mempraktekkan tutorial cara membuat footer multi kolom ini, maka hasilnya bisa kurang lebih seperti tampilan footer multi kolom blog doodey ini. :D Selamat mencoba..

- Reviewer: Unknown - ItemReviewed: Cara Membuat Footer Multi Kolom

Perlukah Memasang Widget Recent Post di Homepage?

Belajar SEO Blogspot – Untuk membuat blog yang seo friendly dan juga reader friendly, tentunya kita harus mengoptimalkan template dan desain blog kita bukan!? Pengoptimalan template yang saya maksud disini adalah memasang breadcrumb, read more, related post, popular post, recent post, dan masih banyak lagi yang berguna untuk menjadikan template blog kita reader friendly dan juga seo friendly. Berbicara masalah widget recent post, sebenarnya perlukah kita memasangnya di homepage, mengingat itu tidak akan efektif lagi dalam hal seo jika terdapat 2 url yang sama di dalam homepage? Untuk itu saya akan mencoba mengulasnya dalam artikel ini.

Widget recent post merupakan widget yang berisi beberapa postingan artikel terbaru di dalam blog. Widget ini sangatlah berguna agar para pembaca kita dapat terarah dan lebih mudah ‘menavigasi’ mereka untuk membaca kembali artikel-artikel terbaru kita. Namun, widget ini boleh saya katakan tidak akan berguna atau lebih tepatnya efektif lagi jika kita pasang di halaman homepage blog kita. Mengapa? Sebab dalam hal SEO, sebenarnya tidak direkomendasikan terdapat 2 url yang sama dalam homepage sebuah blog. Lantas bagaimana solusinya?

Dulu, saya memasang widget recent post di homepage blog ini. Karena kebetulan saya mendapatkan informasi di luar bahwa widget recent post tidak efektif dipasang di halaman homepage sebuah karena alasan yang saya katakan tadi di atas. Nah, untuk itu saya berpikir untuk memasangnya di halaman artikel saja, jadi tidak di homepage lagi.

Memasang widget homepage di halaman artikel saja sudah sangat banyak menguntungkan. Sebut saja masalah ketentuan jumlah url di halaman homepage. Search engine memiliki ketentuan untuk memaksimalkan jumlah url di homepage hanya sampai 100 url, tidak lebih. Jika ternyata lebih dari 100 url maka boleh dibilang sudah tidak seo lagi. Selain itu, dengan memasang widget recent post di halaman artikel akan membuat loading blog kita paling tidak bisa lebih ringan dibanding dengan memasangnya di homepage. Mengapa? Sebab semakin sedikit url di homepage, maka bisa dikatakan akan semakin cepat kapasitas loading terhadap sebuah blog. Tentu ini akan memberikan 2 poin keuntungan buat kita bukan jika memasangnya di halaman artikel saja.

Itu semua tergantung dari sobat sendiri juga, lebih enak dimana memasangnya. Jika sobat tidak setuju dengan artikel ini sobat boleh tinggalkan dan meloncat ke artikel sebelumnya. Namun ini merupakan bagian dari rekomendasi para seo master di luar sana yang sampai saat ini berbaik hati mau membagikan sejumlah pengetahuan seonya kepada saya.

Refrensi terkait:

• Cara Membuat Recent Post Dengan Thumbnails 
• Menampilkan Widget di Halaman Tertentu

Demikian artikel saya yang singkat ini tentang perlukah memasang widget recent post di homepage. Mungkin saja pendapat saya tentang hal ini salah, untuk itu saya sangat berharap pendapat kembali dari sobat pembaca sekalian. Sesuai dengan prinsip saya tentang membangun diskusi di dalam blog, saya yakin sobat akan sama-sama merealisasikannya bersama disini. :)

- Reviewer: Unknown - ItemReviewed: Perlukah Memasang Widget Recent Post di Homepage?

Cara membuat Contact Form / Kontak Kami

Sebelum sobat memasang kontak form di blog, ada baiknya mempertimbangkan baik dan buruknya terlebih dahulu. Salah satu kebaikan atau kelebihan dari mamasang fasilitas kontak form yaitu mempermudah pengunjung untuk mengirimkan pesan kepada sobat. Lalu kekukarangan atau keburukannya yaitu karena sangat mudahnya orang mengirimkan pesan, maka sobat harus bersiap-siap kebanjiran email di inbox sobat dan tentunya sobat harus meluangkan waktu untuk membalasnya, betul tidaaakk?

Tapi, dimanakah kita bisa mendapatkan kontak form?

Di luar sana banyak sekali website yang menyediakan fasilitas ini, selain yang berbayar ada juga yang gratisan. Web penyedia kotak form secara gratisan antara lain http://www.emailmeform.com, http://kontactr.com, http://www.zoho.com, dan banyak lagi yang lainnya.

Kontak form yang Blog Doodey pergunakan adalah kontak form dari http://www.emailmeform.com, dan agar seragam maka tutorial yang akan dibahas adalah tentunya dari web ini. Masih ingin lanjut? Berikut adalah langkah-langkah membuat sebuah kontak form :

1.      Silahkan kunjungi situs http://www.emailmeform.com

2.      Arahkan pandangan sobat ke sebelah kanan atas monitor

3.      Klik pada tulisan Sign up for free

4.      Isilah form yang ada dengan data diri sobat :

·     First Name : » isi dengan nama depan sobat. Misal : doodey

·     Last Name : »  isi dengan nama belakang sobat. Misal : erick

·     Username : » isi dengan username yang diinginkan. Misal : doodeyerick

·     Password : » isi dengan kata kunci yang diinginkan. Misal : tralalatrilili

·     Retype Password : » isi dengan kata kunci yang tadi diisikan. Misal : tralalatrilili

·     Your Email : » isi dengan alamat email sobat. Misal : doodeyme@gmail.com

5.      Klik tombol Sign up

6.      Setelah muncul tulisan terima kasih, silahkan cek email yang tadi dimasukan oleh sobat untuk memeriksa email verifikasi

7.      Buka email kiriman dari EmailMeForm yang bertajuk Your new account information

8.      Klik link yang diberikan di email tersebut atau kalau tidak bisa, copy alamat URL tersebut lalu paste di address bar browser internet sobat untuk melakukan verifikasi bahwa email yang tadi dimasukan adalah benar-benar milik sobat

9.      Setelah proses verifikasi selesai, silahkan klik tulisan click here untuk menuju halaman akun kontrol panel sobat

10.  Alihkan perhatian sobat ke sebelah kanan monitor. Klik tulisan Create new form

11.  Ada beberapa form yang perlu diisi :

·     Web form Name : » isi dengan nama yang sobat inginkan, atau biarkan saja (di sana sudah tertera Contact Webmaster)

·     Recipients Emails : » isi dengan alamat email yang akan menerima pesan

·     Spam Email address : » isi dengan alamat email yang diinginkan untuk menerima pesan spam (email sampah, email iseng doank, email iklan, dll) atau kosongkan saja bila tidak mau menerima pesan email spam

·     Thank you page : » isi dengan alamat URL yang memuat tulisan terima kasih. Atau tulis saja alamat blog sobat

·     Number of fields : » biarkan 4 saja

12.  Klik tombol next yang ada di sebelah kanan

13.  Ada beberapa field name yang bisa diganti sesuai keinginan, misal : Your Name jadi Nama, Your Email Address jadi alamat Email, dst. Atau biarkan saja seperti itu

14.  Klik tombol next yang ada di sebelah kanan

15.  Klik tombol next lagi

16.  Silahkan isi dengan keinginan sobat, atau biarkan saja seperti itu

17.  Klik tombol next lagi

18.  Klik tombol next lagi

19.  Akan diperlihatkan contoh tampilan kontak form yang tadi dibuat oleh sobat

20.  Klik tombol Finish

21.  Klik tulisan Get the HTML codes

22.  Copy kode yang ada di text area, dibawah tulisan Copy and paste this HTML code into your page. Lalu paste pada notepad atau text editor lainnya

23.  Dan, selesai!

Untuk membuat sebuah halaman kontak kami, sobat tinggal membuat sebuah postingan seperti biasa. Untuk memasukan kode yang tadi didapat dari EmailMeForm, sobat pindah dulu dari menu compose ke Edit HTML lalu paste disitu. Publish dech. Beres..

Selamat mencoba..!

- Reviewer: Unknown - ItemReviewed: Cara membuat Contact Form / Kontak Kami

Cara Membuat Recent Post Dengan Thumbnails

Blog Tutorial – Pada tutorial blog kali ini adalah bagaimana cara menampilkan recent post disertai dengan gambar pada postingan. Dengan adanya gambar akan menarik para pembaca untuk membaca postingan tersebut. Tertarik membuatnya? Ikuti langkah berikut!

Cara membuatnya adalah sebagai berikut.

Login di Blogger dengan account anda

Klik Layout pada Dashboard anda

Klik Add a Gadget lalu pilih HTML/Javascript

Masukkan kode script di bawah ini, lalu Save

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://blogdoodey.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Letakkan widget ini pada sidebar yang ada inginkan, terserah anda.

Hal yang perlu diubah adalah :

• Boxwidth :  lebar widget
• Cellspacing :  space antara cells (default: 1)
• borderColor :  warna border
• thumbwidth & thumbheight :  lebar dan panjang thumbnail (default: 40)
• fntsize :  ukuran huruf judul postingan
• acolor :  warna huruf judul postingan
• aBold :  bla ingin ditebalkan adalah true, jika tidak false
• numposts :  berapa banyak recent post yang akan ditampilkan
• home_page :  ganti dengan URL blog anda

Pastikan juga seetingan site feed anda sudah pada Allow Blog Feed dengan melihat pada Setting > Site Feed > Full > Allow Blog Feeds.

Selamat mencoba dan semoga bermanfaat!

- Reviewer: Unknown - ItemReviewed: Cara Membuat Recent Post Dengan Thumbnails

Membuat Label Dengan Efek Marquee

Jika Anda sudah pernah membaca postingan artikel saya sebelumnya yang berjudul “Cara Memodifikasi Label Cloud”, sekarang saya akan memodifikasinya lagi dengan menambahkan efek Marquee (teks berjalan).

Tetapi sebelumnya, mungkin untuk para blogger pemula, yang ‘mungkin’ belum tahu cara membuat Label (kategori artikel), silakan Anda baca disini! :)

Langsung saja, kita mulai tutorialnya. Ikuti langkah-langkah berikut ini! :)

Seperti biasa, Anda Login dulu ke Blogger

Jika Anda belum menampilkan label, silahkan Anda pasang dulu labelnya, tentunya label dengan model yang biasa (bukan Label Cloud), baca lagi disini! :)

Jika sudah, pilih menu Tata Letak, klik Edit HTML

Klik Expand Template Widget

Kemudian cari kode yang mirip seperti di bawah ini, sebagai catatan untuk title='Label' adalah judul label yang ada di blog Anda, silahkan disesuaikan. Dan kode yang berwarna merah adalah kode yang harus disisipkan.

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

<marquee align='left' direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> 

<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>

</marquee>

</div>
</b:includable>
</b:widget>

Kemudian Simpan Template Anda


Keterangan :

• direction='up' adalah text yang berjalan dari bawah ke atas.
• height='300' adalah tinggi dari menu.
• scrollamount='2' adalah kecepatan gerakan text, semakin tinggi angkanya maka akan semakin cepat gerakannya.

Itulah tips untuk membuat label dengan efek marquee. Semoga artikel ini bermanfaat bagi Anda dan jangan lupa juga untuk memberikan saran-saran atau masukan untuk blog ini, cantumkan saja di kotak komentar. Terima kasih! :)

- Reviewer: Unknown - ItemReviewed: Membuat Label Dengan Efek Marquee

Cara Modifikasi Label Cloud

Blog Tutorial - Kali ini blog Doodey mendapatkan sebuah ilham dari salah satu teman blogger tentang bagaimana cara memodifikasi tampilan label cloud agar terlihat menarik. Label cloud memang fitur yang disediakan oleh Blogger sejak lama, tetapi saya ingin mempostingnya kembali karena saya rasa hasil dari modifikasi ini cukup menarik untuk dipandang mata.

Karena memang tampilan dari label cloud yang telah disediakan oleh Blogger warnanya masih standar dan kurang enak dilihat, bahkan terlihat biasa-biasa saja. Nah, maka dari itu saya akan membagi tipsnya untuk memodifikasi tampilan label cloud yang saya dapatkan dari salah satu teman blogger.

Caranya cukup mudah kok, ikuti saja langkah-langkah di bawah ini ya! :)

Pertama Login dulu ke Blogger

Cari Tata Letak

Klik Edit HTML

Untuk jaga-jaga (maksudnya jika eksperimennya gagal), sebelumnya back up dulu template blog Anda dengan mengklik Download Template Lengkap

Kemudian letakkan kode berikut tepat di atas kode ]]></b:skin>

.label-size-1 a {

font-size: 13px;

text-decoration: none;

color:#4B8A08;

}

.label-size-2 a {

font-size: 15px;

text-decoration: none;

color:#DF0101;

}

.label-size-3 a {

font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;

color:#045FB4;

}

.label-size-4 a {

font-size: 18px;

text-decoration: none;

color:#DF7401;

}

.label-size-5 a {

font-size: 23px;

text-decoration: none;

color:#045FB4;

}

.label-size-1 a:hover,

.label-size-2 a:hover,

.label-size-3 a:hover,

.label-size-4 a:hover,

.label-size-5 a:hover { text-decoration:underline;}

Kemudian Simpan Template

NB: Untuk kode yang diberi warna biru, Anda bisa ubah sendiri warnanya sesuai keinginan Anda. Kode warna, bisa Anda liat disini !

Semoga bermanfaat! :)

- Reviewer: Unknown - ItemReviewed: Cara Modifikasi Label Cloud