Membuat Blog SEO Friendly Dengan Meta Tag

Kali ini saya akan memberikan tips kepada teman-teman semua tentang bagaimana membuat blog yang SEO Friendly dengan memasang meta tag. Meta Tag yang SEO Friendly sangat diperlukan sekali oleh sebuah blog, karena hal ini dapat membuat blog kita terindeks dengan cepat oleh situs direktori seperti Google, Yahoo dan Bing. Pada dasarnya sebuah template blog kadang sudah menyediakan meta tag tapi itu belum cukup menjamin blog kita dapat terindeks oleh beberapa situs direktori. Di bawah ini ada 3 macam meta tag yang dapat teman-teman pakai dan disesuaikan dengan template masing-masing.

Berikut ini adalah langkah-langkah memasang meta tag di blog :

• Masuk ke Edit HTML.
• Cari kode (letaknya di atas) berikut :

<head>
<b:include data='blog' name='all-head-content'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[

• Ganti kode yang berwarna merah dengan kode di bawah ini :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Catatan :

Untuk menambah title, anda bisa melakukan edit terhadap kode di atas (perhatikan kode yang berwarna biru), contoh :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/> | Tutorial Blog | Wordpress | Joomla | Creating Website</title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

atau

<b:if cond='data:blog.pageType == "index"'>
<title> | Tutorial Blog | Wordpress | Joomla | Creating Website<data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

• Setelah selesai mengganti title tag, sekarang tambahkan kode Meta Tags di bawahnya.

Meta Tag yang pertama merupakan meta tag yang sederhana dan masih kurang manfaatnya bagi SEO, berikut kodenya :

<meta content=� Tulis deskirpsi disini�  name=�description�/>
<meta content=�keyword1 keyword2 keyword3� name=�keywords�/>
<meta content=�INDEX, FOLLOW� name=�ROBOTS�/>

Meta tag di atas memiliki kelemahan yaitu akan mendominasi semua halaman blog kita, sehingga semua halaman blog kita memiliki meta description dan meta keywords yang sama. Jika anda memilih meta tag di atas cara memasangnya cukup mudah yaitu anda hanya perlu ganti kode yang berwarna merah sesuai dengan isi konten blog anda.

Meta Tag yang kedua cukup dapat kita andalkan dalam membuat blog yang SEO Friendly, berikut kodenya:

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

<title> <data:blog.pageTitle/> </title>

<meta content=�text/html; charset=utf-8' http-equiv=�Content-Type�/> <meta expr:content=�data:blog.pageName + &quot; � Deskripsi tentang blog anda&quot;� name=�description�/>

<meta expr:content=�data:blog.pageTitle + &quot;,keyword 1, keyword 2, keyword 3, �dst&quot;� name=�keywords�/>

<meta content=�INDEX, FOLLOW� name=�ROBOTS�/>

<b:else/>

<title> <data:blog.pageName/> | <data:blog.title/> </title>

<meta content=�text/html; charset=utf-8' http-equiv=�Content-Type�/> <meta expr:content=�data:blog.pageName + &quot; � Deskripsi tentang blog anda&quot;� name=�description�/>

<meta expr:content=�data:blog.pageName + &quot;,keyword 1, keyword 2, keyword 3, �dst&quot;� name=�keywords�/>

<meta content=�INDEX, FOLLOW� name=�ROBOTS�/>
</b:if>

Keterangan :

Kode html yang saya buat berwarna biru menunjukan meta tags home page, sedangkan bagian yang tidak saya warnai (hitam) itu menunjukan halaman artikel kita, sedangkan yang berwarna merah adalah tempat kita menuliskan meta tags (Deskripsi dan Keyword kita).

Meta Tag yang ketiga, meta tags ini adalah Meta Tags untuk blogger versi terbaru, berikut kodenya :

<!�::::::::::: Block1: Output post meta keywords �>
<b:if cond=�data:blog.pageType == &quot;item&quot;�>
<b:section id=�meta1' showaddelement=�no�>
<!� widget must be a of Type = �blog� to have posts data exposed, and must have a unique id �>
<!� Empty Includables(functions) to output nothing, You must keep them ): �>
<b:widget id=�Blog2' locked=�no� type=�Blog�>
<b:includable id=�nextprev�/>
<b:includable id=�backlinks� var=�post�/>
<b:includable id=�post� var=�post� />
<b:includable id=�status-message�/>
<b:includable id=�comment-form� var=�post�/>
<b:includable id=�backlinkDeleteIcon� var=�backlink�/>
<b:includable id=�postQuickEdit� var=�post�/>
<b:includable id=�commentDeleteIcon� var=�comment�/>
<b:includable id=�feedLinks�/>
<b:includable id=�feedLinksBody� var=�links�/>
<b:includable id=�comments� var=�post�/>
<b:includable id=�main� var=�top�><!� Main Function of Any widget comes with ID �main� �>
<!� Loop Page Posts (only 1 in a post page )�>
<b:loop values=�data:posts� var=�post�>
<b:if cond=�data:post.labels�>
<!� If the post has labels, make Meta keywords by looping lables �>
&lt;meta  content=�<b:loop values=�data:post.labels� var=�label�><data:label.name/><b:if cond=�data:label.isLast != &quot;true&quot;�>,</b:if></b:loop>� name=�keywords�/&gt;
</b:if>
</b:loop>
</b:includable>
</b:widget>
</b:section>
</b:if>
<!�::::::::::: Block1 END �>
<head> <!� THE HEAD �>
<!� must include(called) here to output other head sub elements �>
<b:include data=�blog� name=�all-head-content�/>
<!�::::::::::: Block2: Output Index Title,keywords,decription and Post Title,description �>
<!� Post Page �>
<b:if cond=�data:blog.pageType == &quot;item&quot;�>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta name=�description� expr:content=�data:blog.pageName� />
<!� Index Page �>
<b:else/>
<title><data:blog.title/></title>
<meta content=�Disini Deskripsi Untuk Home Page anda� name=�description�/>
<meta content=�keyword 1, keyword2, keyword3, dst� name=�keywords�/>
</b:if>
<!�::::::::::: Block2 END �>

Keterangan :

Saya tidak akan menjelaskan yang ketiga ini secara panjang lebar karena saya sendiri masih bingung dengan meta tag ini, disini saya hanya bisa memberi tahu anda untuk merubah kode berwarna merah dengan konten blog anda.

Itu tadi sedkit uraian bagaimana memasang Meta Tag di blog agar SEO Friendly. Untuk meta tag pertama dan kedua jika teman-teman kesulitan tanya di kotak komentar. Untuk meta tag yahg ketiga saya belum bisa diandalkan karena saya juga belum pernah mencobanya.

Semoga bermanfaat

Widget yang Harus Dimiliki Suatu Blog

Teman-teman blogger pasti menginginkan blog yang dibuat tampil dengan performa maksimal, dengan desain yang mantab dan bisa menarik pengunjung. Namun, apakah desain atau tampilan blog yang anda pakai sehat untuk blog anda? Karena ada banyak widget yang mengandung banyak kerusakan atau error yang mungkin anda tidak tahu. Nah, kalau begitu, apa saja widget yang seharusnya ada dalam blog anda agar blog anda tetap bagus dan sehat? Mari kita lihat satu persatu:

1. Link Navigasi Horizontal
   Menu ini sangat penting. Namun faktor ini tidak lepas dari link RSS yang ada pada navigasi ini. Beri link ke Posts RSS dan Comments RSS agar membantu Search Engine mengakses blog anda.
   
   Jika anda bingung, berikut link Posts RSS:
   

   http://creatingwebsite-maskolis.blogspot.com/feeds/posts/default

   Dan berikut link Comments RSS:
   

   http://creatingwebsite-maskolis.blogspot.com/feeds/comments/default

   Ganti URL yang bercetak tebal dan berwarna merah dengan URL blog anda.
   
2. Artikel Terbaru
   Widget ini digunakan untuk mengarahkan pengunjung blog anda ke artikel terbaru sebelumnya milik blog anda. Juga bisa digunakan untuk menambah pageviews karena memperbanyak navigasi ke posting yang lainnya. Berikan link ke 5 artikel terbaru anda agar tidak terlalu banyak link yang ada pada homepage.
   
3. Komentar Terbaru
   Digunakan untuk mengetahui komentar terbaru pada blog anda. Jadi, sebagai Administrator blog, anda bisa langsung merespon komentar terbaru yang muncul pada blog anda. Ini juga bisa digunakan untuk menghindari terjadinya Spamming pada komentar.
   
4. Artikel Terkait dengan atau Tanpa Thumbnail
   Widget ini digunakan untuk memberikan navigasi ke artikel yang mempunyai tema yang sama, misal trik blog. Artikel tentu berhubungan satu dengan yang lain. Maka dari itu diperlukan widget ini untuk mempermudah akses ke artikel lainnya juga. Ada juga yang menggunakan thumbnail. Maksudnya adalah dengan menampilkan gambar sebagai pendukung. Untuk lebih jelas, anda bisa membacanya pada cara membuat artikel terkait dengan thumbnail.
   
5. Widget Arsip (Archive)
   Widget ini mengelompokkan postingan dalam bulan tertentu. Misalnya mengelompokkan posting yang dilakukan bulan Januari, Februari, dan lain-lain. Namun, ada optimasi yang harus anda lakukan. Jangan asal menggunakan widget ini. Pilih model Flat List agar tidak ada Error pada blog anda dalam widget ini.
   
6. Social Bookmark
   Digunakan untuk mempublikasikan postingan anda ke layanan sosial yang tersedia dalam widget. Dengan klik, artikel anda akan secara otomatis dipromosikan lewat situs berbasis direktori dan ini bisa membawa manfaat yang baik, yaitu trafik blog anda akan bertambah dan posisi pada Google akan naik juga.
   
7. Widget Langganan Artikel Melalui Feedburner
   Widget ini juga berguna, khususnya untuk mempermudah pembaca blog anda mendapatkan info terbaru pada blog anda melalui email. Setiap artikel yang muncul pada blog anda akan secara otomatis masuk pada email pelanggan Feedburner anda. Ini menjadi cara tersendiri bagi blog anda untuk lebih terkenal.
   
8. Kumpulan Link ke Posting terdahulu
   Untuk hal ini, anda bisa menggunakan widget HTML/Javascript dengan berbagai model, seperti scroll link list atau tab view. Berikan di dalamnya link yang mengarah ke postingan anda terdahulu. Ini digfungsikan agar artikel yang paling lama masih terdeteksi dan bisa dijangkau dengan mudah.
   
9. Statistik
   Widget ini berfungsi untuk memberikan informasi tentang perkembangan blog anda, mulai dari PageRank hingga Alexa Rank. Anda juga bisa menambahkan statistik yang lain seperti Statistik Pengunjung, Widget Online Visitor dan lain-lain. Asal jangan kebanyakan karena script yang terlalu banyak menimbulkan efek samping yang akan membuat blog anda semakin berat.

Di atas adalah widget yang sangat penting dan wajib anda miliki. Untuk tambahan dan tidak masuk dalam widget adalah suatu blog sebaiknya memiliki maksimal 100 URL yang ditampilkan pada homepage, dan homepage memiliki ukuran tidak lebih dari 100 Kb. Ini bisa dilihat dari tool online, yaitu Meta Tag Analyzer milik SEOcentro.

Dan juga anda tidak direkomendasikan memasang Widget Follower pada blog karena ternyata Widget tersebut mengandung banyak sekali pesan Error. Jika anda tidak percaya silakan cek blog anda pada URL berikut:

http://validator.w3.org/

Lebih banyak mana pesan error yang terdapat pada blog anda sebelum dan sesudah anda mencopot widget ini, widget ini juga biasa disebut dengan Google Friend Connect. 

Nah, itu tadi beberapa pilihan widget yang penting untuk dimiliki sebuah blog, sekarang tinggal teman-teman mau dikondisikan seperti apa widget itu, tergantung kreasi masing-masing. Semoga bermanfaat

Memasang Kalender Digital Di Blog

Kadang kita terlalu asyik dengan kegiatan blogging, sehingga lupa waktu, hari ini tanggal berapa ya? Untuk itu, sebuah kalender sangat diperlukan untuk mengingat-ingat tanggal, bulan dan tahun. Di samping itu kalender di blog diperlukan untuk mengingatkan sudah berapa lama kita melakukan kegiatan blogging ini. Mulai kapan kita mengisi postingan pertama kali sampai postingan terakhir. Kali ini saya akan menulis tentang sebuah artikel yang berhubungan dengan kalender, yaitu bagaimana cara memasang kalender digital di blog. 

Untuk yang berminat silahkan ikuti langkah-langkah berikut :

• Login Blogger teman-teman
• Kemudian menuju ke Rancangan/Design
• Klik Tambah gadget / add a gadget

• Klik HTML/javascript

Kemudian copy paste kode berikut :
Versi Indonesia

<script type="text/javascript">
// mulai...........

var waktu=new Date()

var tahun=waktu.getFullYear()

var hari=waktu.getDay()

var bulan=waktu.getMonth()

var tanggal=waktu.getDate()

if (tanggal < 7) {tanggal="0"+tanggal}

var hariarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu")

var bulanarray=new Array("Januari","Pebruari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember")

document.write(hariarray[hari]+", "+tanggal+" "+bulanarray[bulan]+" "+tahun)

</script>

Jangan lupa di simpan dan lihat hasilnya...

Kalau pakai versi inggris silahkan copy script di bawah ini

<script type="text/javascript">
//
// Uncomment desired date format.
//
var sFormat = 1; // January 1, 1970
//var sFormat = 2; // January 01, 1970; not implemented yet
//var sFormat = 3; // Jan. 1, 1970; not implemented yet
//var sFormat = 4; // Jan. 01, 1970; not implemented yet
//var sFormat = 5; // Friday, 29 April, 2005
//var sFormat = 6; // Friday, April 29, 2005
// ----- STOP EDITING -----
var aDayLongNames = new Array(
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
);
var aMonthLongNames = new Array(
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
);
var oToday = new Date();
var iDay = oToday.getDay();
var iDate = oToday.getDate();
var iMonth = oToday.getMonth();
var iYear = oToday.getFullYear();
var sDate = null;
switch (sFormat) {
case 1:// January 1, 1970
sDate = aMonthLongNames[iMonth] + ' ' + iDate + ', ' + iYear;
break;
case 2:
break;
case 3:
break;
case 4:
break;
case 5: // Friday, 29 April, 2005
sDate = aDayLongNames[iDay] + ', ' + iDate + ' ' + aMonthLongNames[iMonth] + ', ' + iYear;
break;
case 6: // Friday, April 29, 2005
sDate = aDayLongNames[iDay] + ', ' + aMonthLongNames[iMonth] + ' ' + iDate + ', ' + iYear;
break;
default:
}
document.write(sDate);
</script>

Demikian tadi adalah sedikit penjelasan dari saya mengenai cara memasang kalender analog di blog kita, selamat mencoba bagi yang tertarik.

Semoga bermanfaat

Cara Membuat Teks Berjalan di Menu Bar

Dalam tutorial saya sebelumnya mengenai membuat text berjalan (marquee), teman-teman semua sudah saya jelaskan bagaimana cara penggunaannya. Tidak lupa kan? Kalau lupa teman-teman semua bisa buka kembali postingan itu disini. Selain membuat teks berjalan di blog, kita juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.

Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1.  Pertama kali yang harus kita lakukan adalah login ke blogger
2.  Pada menu Design -> Edit HTML
3.  Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

msg = " -- Selamat datang di Bikin Website ";

msg = " | www.helmiikhwanul.co.cc -- " + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",200);

}
scrollMSG();
//]]>
</script>

Ganti teks yang dicetak tebal dengan teks yang ingin anda tampilkan. Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4.  Jika sudah, klik Save Template. Selesai

Jika berhasil anda akan melihat teksnya berjalan di menu bar anda. Untuk lebih jelasnya bisa anda lihat hasilnya disini. Demikian tadi tutorial singkat membuat teks berjalan di menu bar, selamat mencoba.

Semoga bermanfaat

Cara Memasang Widget Top Komentator Cloud di Blog

Apakah teman-teman ingin blog yang dimiliki mempunyai data dari para pengunjung yang berkomentar? Jika hal itu memang diperlukan, pada malam hari ini saya akan memberikan penjelasan tentang bagaimana cara memasang widget top komentator cloud. Sebuah blog untuk mendapatkan komentar dari pengunjung harus dofollow. Tujuan blogger menerapkan sistem dofollow adalah untuk memancing pembaca agar aktif memberikan komentar pada blognya dengan imbalan berupa backlink bagi si pemberi komentar. 

Namun karena itu banyak diantaranya yang memanfaatkan kesempatan ini untuk mencari backlink sebanyak-banyaknya misalnya dengan berkomentar disetiap postingannya. Sehingga menjadi ajang untuk mengumpulkan backlink. Nah untuk mengatasinya anda bisa memasang widget Top komentator pada blog anda. Dengan memasang widget ini anda bisa melihat siapa yang memberikan komentar terbanyak dan apakah komentar yang diberikan benar-benar bermanfaat atau hanya sekedar untuk mencari backlink saja

Baik, langsung saja ke langkah-langkah pemasangan widgetnya :.

• Langkah pertama login ke blogger.
• kemudian menuju ke Tata Letak.
• Klik tab Elemen Halaman.
• Tambah Gadget (Add Gadget) -> pilih yang HTML/Javascript.
• Kemudian masukkan kode script dibawah ini :

<!-- Top Commentators Cloud Start
(c) 2010 Blogger Sentral. Original code by http://bloggersentral.blogspot.com/. Do not remove this credit and the Make your own link at the bottom of the code.-->
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "  </a>";//clickable commentator name
display = display + ccLName;
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://bloggersentral.blogspot.com
&Exclusions=Anonymous,Greenlava &ShowHowMany=20 &Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:right;;margin-top:10px;"><a href="http://bloggersentral.blogspot.com/2010/02/top-commentators-cloud-widget.html" target="_blank">Make your own</a></span>
</div>
<!-- Top Commentators Cloud End -->

Keterangan :

• Hapus tulisan yang berwarna merah jika anda tidak ingin menampilkan jumlah komentar.
• Silahkan ganti http://bloggersentral.blogspot.com dengan alamat url blog anda tanpa diakhiri dengan slash ( / ).
• Anonymous,Greenlava adalah nama komentator yang tidak ingin anda tampilkan, biasanya nama pemilik blog, ganti saja dengan nama anda (nama pada user blogger dan besar kecilnya huruf juga berpengaruh).
• Angka 20 adalah banyak komentator yang ingin ditampilkan.
• alphabet adalah urutan top komentator berdasarkan abjad atau huruf, silahkan ganti dengan "frequency" jika ingin mengurutkannya berdasarkan banyaknya komentar.

Jika teman-teman semua ingin membuatnya, ikuti langkah-langkah diatas. Jika ada yang mau ditanyakan isi kotak komentar yang ada di bawah.

Selamat mencoba !

Cara Memasang Breadcrumb di Blogspot

Artikel saya kali ini akan membahas tentang fitur navigasi yang terletak di atas atau bisa juga di bawah judul postingan, yang biasa kita kenal dengan nama breadchumb. Pengertian breadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).

Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :

• Seperti biasa anda harus login ke Blogger.
• Langsung tuju Edit HTML.
• Klik Expand Template Widget.
• Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>

  .breadcrumbs{
  padding:5px 5px 5px 0;
  margin:0;font-size:95%;
  line-height:1.4em;
  border-bottom:4px double #cadaef}

• Setelah itu, cari kode seperti ini :

  <div class='post hentry'>

• Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>

  <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

  Simpan Template.

Itu dulu teman-teman penjelasan dari saya, waktu sudah menunjukkan jam 23.41 menit WIB, jadi udah waktunya tidur nih. Besok saya akan lanjutkan kembali dengan tutorial yang lain.

Semoga bermanfaat

Cara Pasang Musik Player di Blogspot

Musik mungkin bagi sebagian orang adalah sumber inspirasi. Tiada hari tanpa musik, mungkin begitu slogannya. Segala aktivitas akan terasa hambar tanpa mendengarkan musik, begitu juga dengan aktivitas blogging Anda. Jika Anda adalah penggemar musik dan ingin blogging sambil  mendengarkan musik, pada tutorial kali ini saya akan membahas tentang bagaimana cara memasang musik player di blog. Dengan memasang musik player di blog maka tidak hanya anda tetapi pengunjung blog anda juga bisa menikmati lagu kesayangan anda. Sehingga cara ini sangat cocok bagi anda yang blognya berisi tentang musik atau bagi anda yang ingin mempromosikan lagu pribadi.

Banyak sekali situs layanan musik player untuk dipasang di blog yang beredar di internet. Dari sekian banyak layanan yang ada. Menurut saya ada 2 musik player yang cukup bagus yakni Musik-live dan eSnips. Kedua musik player ini masing-masing memiliki kelebihan dan kekurangannya. Sehingga silahkan anda tentukan sendiri mana yang lebih cocok untuk dipasang diblog Anda.

Kali ini kita akan menggunakan widget dari Musik-live.net  [screenshoot-nya seperti ini]

Baiklah, kita mulai saja langkah-langkahnya :

1. Pertama yang mesti dilakukan adalah buka browser dan ketikan http://www.musik-live.net 
2. Kemudian klik Skin Mp3 Player 
3. Pilih Skin/tampilan yang anda inginkan, klik Preview skin untuk melihat tampilannya
4. Copy kodenya
5. Masuk ke Blogger dengan ID anda
6. Klik menu Tata Letak -> Elemen Laman 
7. Klik Tambah Gadget 
8. Pilih HTML/Javascript 
9. Pastekan pada kota HTML/Javascript 
10. Simpan, selesai

Kelebihan:

• Lagu sudah tersedia, tinggal pasang
• Banyak model skin yang bisa anda pilih

Kelemahan:

• Tidak bisa upload lagu sendiri

Catatan: 

Cara diatas lagu yang muncul adalah lagu yang sudah disediakan. Jika anda ingin memilih sendiri lagu yang ingin ditampilkan berikut caranya :

1. Pada halaman depan Musik-Live, cari lagu favorit anda dengan kotak pencari.
2. Lalu klik Play & Embed code untuk menampilkan kodenya
3. Copy kodenya lalu paste ke menu HTML/ Javascript blogger anda.
4. Selesai

Catatan:

Cara ini hanya bisa untuk memutar 1 lagu saja. Jika anda ingin memutar banyak lagu maka gunakan eSnips.

Banyak sekali pilihan jenis musik player yang ingin dipasang di blog, terserah Anda mau pilih yang mana. Dan semuanya sangat gampang dalam proses pemasangannya. Demikian tadi tutorial singkat dari saya mengenai cara memasang musik player di blog, semoga bermanfaat dan selamat mencoba.

Semoga Bermanfaat

Membuat Efek Bayangan Teks Dengan CSS3

Kadang pengunjung kita bosan melihat tulisan atau gambar yang biasa saja (polos) tanpa hiasan apapun. Untuk lebih memikat pengunjung kadang kita harus memberikan efek-efek tertentu pada gambar atau tulisan, tersebut sehingga lebih indah dan lebih menarik. Salah satunya dengan memberikan efek bayangan pada tulisan  atau gambar yang ada di blog kita. Memberi efek bayangan pada gambar merupakan salah satu teknik yang sering digunakan oleh para designer grafis karena dapat membuat gambar terlihat lebih hidup dan menarik. Untuk membuat efek bayangan pada gambar mungkin sudah menjadi hal yang biasa karena dengan menggunakan software pengolah gambar seperti Photoshop atau Coreldraw. Anda dapat dengan mudah memberi efek bayangan pada gambar. Lalu bagaimana dengan tulisan?

Nah pada postingan ini saya akan menjelaskan cara membuat efek bayangan pada teks seperti yang dapat anda lihat pada judul postingan blog ini. Untuk membuat efek ini sangat mudah, anda tidak perlu memakai tool apapun hanya memberi sedikit sentuhan kode CSS3 pada template blog anda maka efek bayangan akan muncul di teks blog anda.

Agar lebih jelas silahkan ikuti langkah-langkah berikut:

Catatan:
Efek ini hanya mendukung browser Firefox, Google Chrome, Safari dan Opera sedangkan IE efek ini tidak akan tampak. Sehingga bagi anda yang menggunakan browser IE silahkan diganti dulu dengan browser lain yang saya sebutkan diatas sebelum mengikuti tutorial ini.

1. Pada menu dashboard blogger. Klik menu Design -> Edit HTML

2. Letakkan kode text-shadow: 2px 2px 2px #ccc; dimana anda ingin memberi efek bayangan pada teks

3. Sebagai contoh anda ingin memberi efek bayangan pada judul postingan maka cari kode seperti ini.

. h3{
margin:0px;
font-weight:bold;
font-size:25px;
line-height:100%;
padding:0px;
margin-bottom:5px
}

Setiap template tentu memiliki kode yang berbeda-beda. Jika anda tidak menemukan kode css seperti diatas maka cari kode di template anda yang mewakili judul postingan kemudian letakkan text-shadow property seperti berikut:

.h3{
margin:0px;
font-weight:bold;
font-size:25px;

text-shadow: 2px 2px 2px #ccc;

line-height:100%;
padding:0px;
margin-bottom:5px
}

Keterangan text shadow property


4. Silahkan diatur nilai propertynya untuk mendapat efek shadow yang anda inginkan. Setelah itu simpan template anda.

Efek ini juga bisa ditambahkan pada teks di bagian sidebar, form komentar, footer, dan lain-lain. Selamat mencoba.

Di akhir artikel ini saya bingung mau ngomong apa, yah pokoknya semoga dapat bermanfaat bagi kita semua. Bagi teman-teman yang masih bingung, tanya aja ke kolom komentar dibawah siapa tau saya bisa jawab.

Memasang Efek Salju di Blog

Bagi para blogger nomor wahid mungkin tutorial ini kurang terasa dibutuhkan karena disamping terlalu ramai juga membuat loading blog agak sedikit lambat. Tapi bagi blogger pemula seperti saya ini terus ingin memodifikasi blog agar lebih hidup. Salah satu fitur modifikasi blog adalah dengan membuat efek salju turun dari atas ke bawah, sehingga blog kelihatan ramai. Jika temen-temen tertarik untuk membuat efek turun salju, di bawah ini saya akan berikan tutorialnya. Tapi yang tidak kepingin blognya ada salju turun ya, baca aja tutorialnya atau di copy paste diblog teman-teman semua biar postingannya tambah banyak, nggak apa-apa kok.

Okey, langsung aja pada inti permasalahannya, yaitu langkah-langkah pembuatan efek turun salju :

1. Pertama-tama seperti yang biasa dilakukan login ke blogger anda, masuk ke menu Design -> Page Elements 
2. Klik Add a Gadgets -> HTML/Javascript 
3. Teman-teman bisa pilih salah satu dari efek salju dibawah ini, lalu Copy kode scipt dibawah ini :

Salju dengan jumlah 20    

<script src="http://h1.ripway.com/pinginbelajar/salju/20.js" type="text/javascript"></script> 

Salju dengan jumlah 30    

<script src="http://h1.ripway.com/pinginbelajar/salju/30.js" type="text/javascript"></script>  

Efek salju berwarna pink :   

<script src="http://daus-borneo.webs.com/undefined/Daus Friendster/salju_pink.js" type="text/javascript"></script> 

Efek salju biasa :   

<script src="http://www.geocities.com/sehatserasi72/efeksalju.js" type="text/javascript"></script>

Paste salah satu kode di atas lalu Save (simpan). Setelah itu tinggal kita lihat perubahannya.

Tidak sulit bukan? Kalau tidak mau repot ya gunakan saja cara dibawah ini

1.  Klik tombol Tambahkan Efek Salju Pada Blog dibawah ini

2.  Pilih blog yang ingin anda pasang efek salju lalu klik Add Widget
3.  Selesai.

Nah, itu tadi sedikit penjelasannya, untuk teman-teman yang tertarik selamat mencoba.

Semoga bermanfaat

Membuat Kotak Komentar Di Bawah Postingan Blog

Saya yakin semua temen-temen blogger sangat ingin berinteraksi dengan para pengunjungnya. Untuk itu diperlukan sebuah kolom atau kotak untuk saling bertukar pendapat. Salah satunya adalah melalui kotak komentar, kotak komentar adalah salah satu fitur yang harus ada dalam sebuah website/blog sebagai alat interaksi antara pengunjung dengan pemilik website/blog tersebut dan bisa juga menjadi tempat diskusi mengenai topik artikel yang dimuat dalam website/blog tersebut.

Oleh karena begitu pentingnya keberadaan kotak komentar, banyak blogger yang melakukan modifikasi kotak komentar untuk memudahkan pengunjung memberikan komentar-komentarnya terhadap suatu artikel atau postingnya dan salah satu kreasinya adalah menampilkan atau membuat kotak komentar berada di bawah postingan.

Lalu bagaimanakah Membuat Kotak Komentar di Bawah Postingan Blog? Berikut ini caranya :

1. Login ke Blogspot Anda, klik Setting, lalu klik Comment dan pada menu Comment Form Placement, klik pada tulisan Embedded below post, kalau sudah selesai jangan lupa di Save. Kira-kira gambarnya seperti di bawah ini :
   
   
   
   
   
2. Kembali ke Dashbord Blog Anda, lalu klik Layout, lalu klik Edit HTML, dan jangan lupa kasih tanda centang pada kotak Expand Widget Template, kemudian cari kode seperti di bawah ini:
   
   
   <p class='comment-footer'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </p>
   
   Lalu ganti dengan kode di bawah ini:
   
   
   <p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p>
3. Save Template dan lihat hasilnya.
4. Jika cara di atas masih juga belum berhasil membuat kolom komentar di bawah posting, silahkan coba dengan cara lain, temukan kode di bawah ini:
   
   
   <b:include data='post' name='comments' />
   
   Setelah kode di atas ditemukan, tambahkan kode di bawah ini tepat berada di bawah kode di atas:
   
   
   <b:include data='post' name='comment-form'/>
   
   Contohnya seperti ini:
   
   
   <b:include data='post' name='comments' />
   <b:include data='post' name='comment-form'/>
5. Kemudian Save Template dan lihat di bawah postingan Anda sekarang sudah mempunyai kolom komentar yang terintregasi di setiap halaman posting blogspot. Namun jika masih belum berhasil juga, silahkan baca ulang dan pelajari dengan seksama tutorial ini, mungkin ada prosedur yang terlewatkan.

Semoga bermanfaat

Membuat Daftar Isi Otomatis di Blogspot

Selamat malam teman-teman semua, belum pada tidur kan? Pada malam hari yang sepi ini saya akan meneruskan artikel saya mengenai membuat daftar isi manual, kali ini saya akan menjelaskan bagaimana caranya untuk membuat daftar isi secara otomatis. Saya tidak akan menjelaskan mengenai fungsi dan cara kerja dari Daftar Isi Otomatis ini, karena sudah cukup dijelaskan pada tutorial Membuat Daftar Isi Manual di Blogspot, oleh karena itu bagi Anda yang belum pernah membacanya silahkan kunjungi dulu tutorial tersebut, tidak dipungut biaya.

Cara pemasangan daftar isi manual dan daftar isi otomatis tidak berbeda, yang membedakan hanya kode-kode yang digunakan dan cara kerjanya saja, namun tidak salahnya kalau saya memberikan contoh bentuk dari daftar isi otomatis tersebut.

Berikut ini cara membuat dan memasang daftar isi otomatis, silahkan ikuti dengan cermat dan seksama langkah-langkah di bawah ini:

1. Login ke Blogger, Klik Layout/Tata Letak;
2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
3. Cari dan pilih HTML/Javascript;
4. Copy paste kode di bawah ini ke dalam content yang telah tersedia, berikut ini kodenya :

   <div style="overflow: auto; width: 300px; height: 200px; text-align: left;">
   <script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
   <script src="http://creatingwebsite-maskolis.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

5. Klik Tombol Save/Simpan.

Keterangan :

• Link yang berwarna merah, silahkan diganti dengan alamat Blog Anda;
• Width: 300px; adalah merupakan lebar dari kotak daftar isi otomotis dan boleh anda sesuaikan;
• Height: 200px; adalah merupakan tinggi dari kotak daftar isi otomotis dan boleh anda sesuaikan.

Demikianlah tutorial Membuat Daftar Isi Otomatis Di Blogspot ini, semoga bermanfaat.

Membuat Daftar Isi Manual Di Blogspot

Kali ini artikel saya akan membahas tentang daftar isi sebuah bllog atau website. Daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog dan bicara soal alat navigasi sebetulnya juga pernah dibahas pada posting saya yang berjudul Membuat Menu Scroll di Blogspot, namun posting ini akan membahas khusus soal alat navigasi berupa Daftar Isi seperti pada Creating Website, contohnya seperti di bawah ini:

Membuat Efek Image Zoom dengan Jquery

Membuat Sliding Login/Register Form Panel di Blog

Memasang Text Resizer di Blog

Membuat Multi Level Drop Down dengan jQuery

Membuat Menu dTree di Blogger

Membuat Menu Horizontal Animasi di Blog

Membuat Menu Navigasi Horizontal Glossy di Blog

Membuat Effect JQuery Link Nudging di Blog

Membuat Info Panel Slide Vertikal dengan jQuery

Membuat Chatbox Slide Vertikal Dengan jQuery di Blog

Membuat Daftar Isi Dengan jQuery Accordion

Memasang Slider Gambar ala Drakon Template

Memasang Gambar Slide Ala Zinmag Primus

Pada umumnya jenis daftar isi ada 2 (dua) macam yaitu daftar isi manual dan daftar isi otomatis. Perbedaan dari kedua daftar isi tersebut adalah jika daftar isi manual sesuai dengan namanya dipasang dan diatur secara manual sesuai keinginan pemilik blog, sedangkan jika daftar isi otomatis akan secara otomatis menampilkan isi blog berdasarkan urutan abjad pada label dan judul postingan.

Baiklah saya rasa penjelasan singkat tentang fungsi daftar isi pada blog sudah cukup dan sekarang mari mulai bahas sesuai judul posting ini Membuat Daftar Isi Manual Di Blogspot, silahkan ikuti langkah-langkahnya sebagai berikut :

1. Login ke Blogger, Klik Rancangan/Design;
2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
3. Cari dan pilih HTML/Javascript;
4. Copy paste kode di bawah ini ke dalam Content yang telah tersedia, berikut ini kodenya :

   <style>
   .list {
   background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQbC0dRM-L9f0QHG9CM-k8k3W5FGobLe78qv2gLXsW42kHRd6YKQALRmgfSZHIyTrPAxa77TcU-g_Z9Ow3yiitBJVsAj9TEi_GR5sVKTmTC9BWc1X6eH7qNVLC1o-GrpUWrwYmgREQuz7/") no-repeat left center;
   line-height:1.5em;
   padding:3px 0px 3px 20px;
   }
   </style>
   <div style="background-color: #f7f7f7; border: 1px solid rgb(68, 67, 67); height: 220px; margin: 0px; overflow: auto; padding: 3px; width: 300px;">
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/memasang-text-resizer-di-blog.html">Memasang Text Resizer di Blog</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-multi-level-drop-down-dengan.html">Membuat Multi Level Drop Down dengan jQuery</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-dtree-di-blogger.html">Membuat Menu dTree di Blogger</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-horizontal-animasi-di-blog.html">Membuat Menu Horizontal Animasi di Blog</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-menu-navigasi-horizontal-glossy.html">Membuat Menu Navigasi Horizontal Glossy di Blog</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-effect-jquery-link-nudging-di.html">Membuat Effect JQuery Link Nudging di Blog</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-info-panel-slide-vertikal.html">Membuat Info Panel Slide Vertikal dengan jQuery</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-chatbox-slide-vertikal-dengan.html">Membuat Chatbox Slide Vertikal Dengan jQuery di Blog</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-daftar-isi-dengan-jquery.html">Membuat Daftar Isi Dengan jQuery Accordion</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-slider-gambar-ala-drakon.html">Memasang Slider Gambar ala Drakon Template</a></div>
   <div class="list">
   <a href="http://creatingwebsite-maskolis.blogspot.com/2011/01/memasang-gambar-slide-ala-zinmag-primus.html">Memasang Gambar Slide Ala Zinmag Primus</a></div>
   </div>

5. Klik Tombol Save/Simpan.

Keterangan :

• Link dan Teks, silahkan diganti dengan link dan teks Anda; 
• width : 230px; adalah merupakan lebar dari kotak daftar isi manual dan boleh anda sesuaikan; 
• height : 180px; adalah merupakan tinggi dari kotak daftar isi manual dan boleh anda sesuaikan.

Untuk tutorial membuat daftar isi manual sudah selesai, silahkan tunggu tutorial berikutnya tentang cara pasang daftar isi otomatis di Blogspot.

Semoga bermanfaat

Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)

Dalam membuat sebuah blog, kita pasti ingin blog kita tampil lebih rapi. Tulisan-tulisan yang mungkin tidak diperlukan atau mengganggu kerapian blog kita, lebih baik kita hilangkan atau digantikan oleh fungsi dari tool lain. Salah satunya adalah Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom), ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"? Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut kita tidak penting dan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya agar lebih rapi. Sesuai dengan namanya Langgan: Entri (Atom) adalah fasilitas untuk berlangganan artikel/posting, sedangkan Subscribe to: Poskan Komentar (Atom) adalah fasilitas berlangganan bagi pengunjung untuk mengetahui komentar-komentar atas posting/artikel dari blog yang bersangkutan.

Namun demikian sebagian blogger tidak menyukai fitur-fitur tersebut, karena selain terlalu sederhana, juga telah tersedia fasilitas berlangganan yang lebih canggih seperti FeedBurner.Com, maka dari itu sebagian blogger lebih suka menghapus/menghilangkan fitur Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) dari blog mereka.

Nah jika Anda ingin mengikuti jejak sebagian blogger tersebut, berikut ini cara menghilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) di Blogspot :

A. Cara Menghapus Langgan: Entri (Atom):

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
2. Cari kode di bawah ini:

   <b:include data='feedLinks' name='feedLinksBody'/>

3. Hapus/delete semua kode di atas, lalu Save Template, selesai.

B. Cara Menghapus Subscribe to: Poskan Komentar (Atom):

1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
2. Cari kode di bawah ini:

   <div class='feed-links'>
   <data:feedLinksMsg/>
   <b:loop values='data:links' var='f'>
   <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
   </b:loop>
   </div>

3. Hapus/delete semua kode di atas, lalu Save Template, selesai.

Demikianlah tutorial sederhana cara hapus/hilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot ini

Semoga bermanfaat.

Merubah Warna Link Pada Blogspot

Link untuk sebuah blog sangat diperlukan untuk menautkan antara isi blog satu dengan yang lainnya. Pengunjung blog tentu akan lebih tertarik jika link pada blog yang dikunjungi menarik. Mungkin temen-temen tidak menyukai warna link di blog temen-temen dan ingin mengubahnya. Secara default biasanya link ini menggunakan warna standar template yang dipilih dan memunculkan garis bawah ketika kursor menyentuhnya. Jika tidak puas denga pengaturan default ini, kita bisa merubahnya. Dengan satu kali pengaturan, perubahan yang dilakukan telah berlaku untuk semua link yang ada, termasuk link-link baru yang menyusul kemudian.  Nah, berikut langkah-langkah cara mengganti warna link di blogspot :

1. Login ke Blogger => Rancangan => Edit HTML, kasih centang pada Expand Template Widget;
2. Cari kode ini a:link { contoh struktur kode yang ada di template blog ini:

   a:link {
   color: #0AF251;
   color:#04B33A;
   text-decoration:none;
   }

3. Gantilah kode color (warna) sesuai selera Anda;
4. Save Template, lalu perhatikan apa yang terjadi? selesai.

Itu tadi adalah penjelasan tentang mengganti warna link dari saya, gampang kan? Oh ya sering-sering aja nanya biar saya nggak pusing-pusing cari materi buat posting blog ini, tapi yang ditanyakan sebaiknya seputar blog ini, kalau diluar itu berarti saya harus googling dulu atau menjawab dengan jawaban "saya tidak tahu", maklum masih belajar juga.

Semoga bermanfaat

Mengganti Header Blog di Blogspot

Pertama kali orang melihat blog, mayoritas mereka melihat header blog tersebut.. Kesan pertama terhadap blog yang mereka kunjungi adalah bagaimana header blog tersebut mencerminkan isi atau konten dari keseluruhan blog. Untuk blogspot blog, tampilan header (pakai gambar atau hanya tulisan saja) biasanya tergantung dari template yang kita gunakan. Ada kalanya, format keseluruhan template blogspot sudah sesuai dengan keinginan kita, namun gambar headernya tidak cocok dengan isi blog kita. Jika demikian kasusnya, kita perlu mengganti header blog agar sesuai dengan konten.

Bagaimana mengganti header blog blogspot? Untuk mengganti header blogspot, ada beberapa cara yang bisa kita lakukan. Cara termudah adalah dengan melalui pengaturan add and arrange page element (tergantung template yang digunakan. sebagian besar template blogspot mendukung penambahan gambar di header lewat menu ini). Untuk mengganti header blogspot dengan cara ini, login ke dashboard blogger.

Masuk ke tab Layout. Pada kotak Header (sesuai judul blog anda) klik Edit.

Pada jendela baru yang muncul, klik Browse untuk mencari gambar yang akan digunakan sebagai header. Sebaiknya sebelum melakukan ini, kita harus menyediakan image yang akan kita pakai sebagai header, dengan ukuran sesuai ukuran header (jika tidak tahu ukuran headernya, beri tanda centang pada Shrink to fit dimana ukuran gambar akan disesuaikan dengan ukuran header). Pilih behind title and description jika gambar yang anda masukkan tidak mengandung teks judul, karena ini berarti judul dan deskripsi blog akan ditampilkan. Sebaliknya, jika anda membuat gambar header komplit dengan tulisan judul dan deskripsinya, pilih instead of title and description yang mana pilihan ini akan menyembunyikan judul dan deskripsi. Klik Save. Kini blog anda sudah mempunyai header yang sesuai dengan keinginan anda (tentunya disesuaikan dengan tema blog).

Cara lain untuk mengganti header blogspot adalah melalui pengaturan kode CSS. Caranya, dari dashboar blogger, masuk ke blog yang akan kita ganti headernya. Masuk ke tab Layout > Edit HTML. Pastikan anda selalu membackup template sebelum mengubahnya (caranya dengan klik Download full template) agar sewaktu-waktu ada kejadian yang tidak kita harapkan, kita bisa kembalikan lagi template seperti semula.

Pada menu Edit HTML, beri centang Expand Widget Template. Tekan tombol Ctrl + F bersamaan untuk memanggil fungsi pencarian. Ketikkan header pada kolom Find untuk mencari kode css header. Anda juga bisa menscroll mouse untuk melakukan pencarian ini, tapi tidak praktis.Cara kedua ini  tidaklah sulit, namun jika Anda tidak ingin pusing-pusing membuat gambar sendiri, Anda bisa memanfaatkan website penyedia gambar yang gratis, seperti: freewebpageheaders.com, smashingmagazine.com dan lain.

Adapun cara download gambar di freewebpageheaders.com adalah sebagai berikut:

1. Klik Daftar Sekarang untuk membuka halaman situsnya;
2. Klik Register untuk mendaftar.
3. Klik Agree. Kemudian Anda akan diminta untuk mengisi Registration form. Form ini terdiri dari 2 bagian yaitu : Required info dan Optional info. Required info merupakan info yang harus Anda berikan untuk pendaftaran sedangkan Optional info merupakan info yang digunakan untuk menampilkan data Anda kepada pengunjung saat Anda login. Jika Anda merasa tidak perlu maka diabaikan saja untuk bagian ini.
4. Klik Submit Registration Form, lalu Anda akan mendapat pesan supaya membuka email untuk mengaktifkan account Anda.
5. Buka email yang Anda gunakan untuk mendaftar. Klik pada link yang diberikan untuk mengakftifkan account Anda.
6. Jika sudah, Anda akan mendapat pesan bahwa account Anda sudah diaktifkan.
7. Klik Return to the front page of free Web Page Headers.
8. Lalu klik Login untuk mendowload gambar header.
9. Pilih kategori header yang Anda inginkan. Jika Anda sudah menemukan gambar yang cocok. Klik pada gambar tersebut lalu klik Download.
10. Kemudian gambarnya akan terbuka pada halaman baru. Klik kanan pada gambar lalu pilih Save Image As lalu tekan Save.
11. Selesai. Sekarang gambar sudah tersimpan di komputer Anda.

Langkah selanjutnya Cara Mengganti Header Blog pada Blogger, yang pertama dilakukan yaitu mencari tahu berapa ukuran header pada template Anda, caranya:

1. Klik Rancangan->Edit HTML.
2. Cari kode #header-wrapper. Supaya mudah untuk mencarinya, tekan Ctrl+F ketikkan #header-wrapper lalu tekan Next.
3. Jika sudah ketemu biasanya ada kode width dan height disekitarnya. Misalnya seperti ini:
   

   #header-wrapper {
   width:975px;
   height:130px;
   margin:0px;
   padding:0px;
   text-align:left;
   background:#FFF url("http://i977.photobucket.com/albums/ae258/SPN_photo/HeaderMaskolis-New.jpg") no-repeat right ;
   }

   Keterangan:
   width:975px; adalah panjang header
   height:130px;adalah lebar header.
   
   Agar gambar Anda sesuai dengan ukuran header template, maka gambar Anda harus diresize menjadi 975x130 pixel. Untuk merizenya Anda bisa menggunakan program pengolah gambar seperti Ms Paint, ACD See, Photoshop atau lainnya.
4. Setelah selesai. Masuk ke Dashboard Blogger Anda lagi, pilih Rancangan => Page Elements.
5. Klik Edit pada bagian Header.
6. Kemudian akan muncul halaman baru, pilih Browse from your computer, jika gambarnya disimpan dikomputer atau Browse from the web, jika gambarnya disimpan di image hosting seperti: Imageshack, Photobucket atau Geocities.
7. Pada bagian Placement. Pilih Behind title and description, jika Anda ingin manampilkan gambar dibelakang judul dan deskripsi blog atau pilih Instead of title and description, jika Anda ingin menyembunyikan judul dan deskripsi blog.
8. Lalu klik Save, selesai.

CATATAN:

• Tidak semua template bisa dipasang gambar, karena ada yang hanya menggunakan teks saja oleh karena itu pilihlah template yang sesuai kebutuhan.
• Jika cara di atas sulit diterapkan pada blog Anda, isi kotak komentar yang ada di bawah siapa tau saya bisa bantu.

Demikian tadi tutorial memasang header dari saya semoga dapat bermanfaat bagi teman-teman semua.

Membuat Kotak Pencari/Search di Blogspot

Sore hari yang mendung, mungkin sebentar lagi hujan. Daripada sebentar lagi listrik mati, mending saya tulis saja artikel ini walaupun mungkin temen-temen semua sudah tahu semua, Saya yakin temen-temen semua pasti sudah tidak asing lagi dengan yang namanya search box. Karena kita rata-rata mencari alamat website atau informasi dengan tool ini.

Secara singkat, search box adalah sebuah tool yang digunakan untuk mencari data-data atau alamat website dengan memasukkan kata kunci yang ingin kita cari. Namun search box atau kotak pencari yang biasa kita gunakan hanya memungkinkan kita untuk mencari data di mesin pencari seperti Google, Yahoo, dan MSN. Lalu bagaimana kalau kita ingin mencari data hanya pada blog kita saja?

Mungkin sekarang sudah banyak template yang sudah disediakan kotak pencari atau search box. Tapi bagi template yang tidak dilengkapi dengan fasilitas ini. Anda juga bisa memasangnya sendiri dengan cara sebagai berikut:

1. Login ke Blogger. Klik menu Design -> Page Elements. Lalu klik pada Add a Gadget.

2. Klik Add a Gadget -> HTML/Java script


3. Masukkan kode dibawah ini kedalam kotak dan klik Save

<p align="left">
<form id="searchthis" action="ALAMAT URL BLOG/search" style="display:inline;" method="get">
<strong>NAMA KOTAK<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Ganti ALAMAT URL BLOG dengan alamat URL blog Anda. Misalnya, http://creatingwebsite-maskolis.blogspot.com dan ganti NAMA KOTAK dengan nama yang ingin Anda tampilkan pada kotak. Misalnya, Cari >artikel disini, Cari disini, dan lain-lain.

4. Jika sudah selesai, klik Save lalu klik View Blog untuk melihat tampilannya di blog.


Jika Anda merasa kotaknya terlalu panjang atau pendek. Anda bisa mengubah ukurannya dengan mengganti nilai pada size. Anda juga bisa mengganti nama tombol Search dengan nama lain misalnya, Cari atau lanjut. Sebagai contoh, saya mengganti "size=30" dan "value=cari" maka hasilnya akan seperti yang dibawah ini.

Semoga bermanfaat

Memposting Kode HTML Pada Artikel

Sebenarnya artikel yang saya tulis ini sangat jarang sekali digunakan oleh para blogger, tapi ada baiknya akan saya tulis untuk lebih memperjelas cara membuat postingan berupa kode HTML ini. Untuk memposting kode HTML pada artikel, anda harus menggunakan tool untuk mengkonversi atau mengubah kode HTML menjadi kode yang dapat dibaca pada artikel. Jika tidak, setiap kali kita memposting. Kode HTML-nya tidak akan muncul pada artikel. Misalnya kode < harus diganti dengan &lt; dan kode &lt; harus diganti dengan &amp;lt;

Berikut adalah cara untuk mengubah kode HTML menjadi kode yang dapat dibaca pada artikel:

1. Buka http://centricle.com/tools/html-entities/

2. Masukkan kode HTML yang mau ditampilkan pada artikel dalam kotak Centricle. Misalnya kode <div id='outer-wrapper'>.


3. Klik Encode. Kemudian akan muncul kode baru seperti pada gambar dibawah ini.

4. Gunakan kode baru tersebut untuk diposting pada artikel

Semoga bermanfaat..!!

Mengenal Fungsi-Fungsi Menu Setting Blog

Pertama kali kita membuat blog dengan menggunakan fasilitas blogspot, kita mungkin akan kebingungan dengan fungsi-fungsi yang tersedia pada blogger. Padahal jika diatur dengan baik kita bisa mengoptimalkan blog kita dengan maksimal. Pada postingan kali ini saya akan memberi sedikit penjelasan mengenai fungsi-fungsi dalam menu setting. Supaya teman-teman bisa lebih mudah untuk mengoptimalkan blognya.

1. Menu Settings -> Basic

• Blog Tools: untuk restore (import blog), backup (export blog) dan hapus blog secara permanen (delete blog)
• Title: untuk mengisi judul blog. Judul ini akan muncul di header blog dan halaman search engine (serp)
• Description: untuk mengisi deskripsi blog. Deskripsi ini akan muncul di bagian header blog
• Add your blog to our listing: untuk mengatur apakah blog anda mau ditampilkan pada menu blogger seperti blogger play dan next blog atau tidak
• Let search engines find your blog: Untuk mengatur apakah blog anda mau di index di halaman mesin pencari Google dan Weblogs.com atau tidak
• Show quick editing on your blog: untuk menampilkan icon quick edit pada postingan yang berfungsi untuk mengedit postingan secara langsung dari halaman blog
• Show email post links: untuk menampilkan icon berbentuk amplop pada postingan yang berfungsi untuk memperbolehkan pembaca mengirim link artikel kita kepada orang lain via email
• Adult Content: untuk menentukan apakah blog kita mengandung konten porno atau tidak
• Select Post Editor: untuk memilih jenis post editor yang ingin anda gunakan
• Enable Transliteration: untuk mengaktifkan fungsi terjemahan pada post editor kedalam bahasa yang dipilih.

2. Menu Setting -> Publishing

• Custom domain: Untuk mengganti alamat dari blogspot.com ke domain sendiri seperti .com, .net, .org, dll
• Blogspot Address: Kalau custom domain untuk mengganti alamat blogspot ke domain sendiri maka yang ini untuk mengganti alamat blogspot yang satu ke alamat blogspot yang lain. (yang belum terdaftar)
• Word Verification: kode verifikasi

3. Menu Setting -> Formatting

• Show at most: untuk menentukan jumlah postingan yang mau ditampil pada halaman blog
• Date Header Format: Untuk menentukan format tanggal yang mau ditampilkan diatas judul posting
• Archive Index Date Format: untuk menentukan format tanggal yang mau ditampilkan pada menu arsip yang terletak di kolom sidebar
• Timestamp Format: untuk menentukan format waktu yang mau ditampilkan pada postingan
• Time Zone: untuk menentukan zona waktu tempat tinggal kita. Misalnya (GMT+07.00) Jakarta untuk wilayah Indonesia
• Language: untuk memilih bahasa yang mau digunakan
• Convert link breaks: untuk mengatur apakah mau dikonversi kode tag pada post editor secara otomatis. Biarkan Yes saja.
• Show Title Field: untuk menampilkan judul postingan. Jika pilih No maka blogger akan mengambil beberapa kata pada awal paragraf sebagai judul postingan. Pilih Yes saja
• Show Link Field: untuk menambahkan link yang berhubungan kedalam setiap postingan. Jika tidak ada, pilih No saja
• Enable Float Alignment: untuk mengaktifkan fungsi penjajaran pada text dan gambar
• Post Template: untuk mengisi teks yang mau ditampilkan pada kotak posting

4. Menu Setting -> Comments

• Comments: untuk menampilkan kotak komentar
• Who Can Comment: untuk menentukan siapa yang boleh memberi komentar
• Comment Form Placement: untuk menentukan dimana letak kotak komentar
• Comments default for posts: untuk mengatur apakah mau diberi komentar pada postingan baru atau tidak
• Backlinks: untuk mengatur apakah mau diberi notifikasi jika ada yang memasang link pada artikel kita atau tidak
• Backlinks default for posts: untuk mengatur apakah mau mengaktifkan fungsi backlinks atau tidak
• Comments Timestamp Format: untuk memilih format waktu yang mau ditampilkan pada kotak komentar
• Comment Form Message: untuk menampilkan pesan singkat diatas kotak komentar
• Comment Moderation: untuk menyaring komentar yang masuk sebelum diposting
• Show word verification for comments: untuk menampilkan kode verifikasi jika ada yang ingin memberi komentar supaya terhindar dari sistem bot yang melakukan spam
• Show profile images on comment: untuk menampilkan gambar profil dari komentator yang memiliki blog di blogger
• Comment Notification Email: untuk mendapatkan pemberitahuan dari blogger melalui email jika ada yang meninggalkan komentar

5. Menu Settings -> Archiving

• Archive Frequently: untuk mengatur frekuensi arsip. Misalnya arsip harian, mingguan atau bulanan
• Enable Post Pages: mengaktifkan halaman posting untuk setiap artikel

6. Menu Settings -> Site Feed

• Allow Blog Feed: untuk menentukan jumlah karakter artikel yang dikirim via RSS Feed atau Feed email
• Post Feed Redirect URL: untuk mengisi alamat URL Feed Anda. Jika belum punya dikosongin aja
• Post Feed Footer: untuk mengisi teks tambahan pada feed

7. Menu Settings -> Email & Mobile

• Blogsend Address: untuk mendapat kiriman postingan ke alamat email Anda setiap kali Anda memposting pada blog Anda.
• Email posting address: untuk menentukan alamat email blogger yang Anda inginkan. Supaya Anda bisa memposting artikel langsung ke blog Anda via email. Catatan: Jangan memberitahu alamat email ini ke orang lain. Jika tidak, orang lain bisa memposting artikel di blog Anda.
• Mobile Devices: Untuk memposting artikel ke blog anda via MMS atau SMS dari hp anda. Cara register dan penggunaanya baca disini

8. Menu Settings -> OpenID

• OpenId: Secara ringkas, openId semacam identitas anda di internet. Dengan openid anda bisa masuk ke dalam website yang berbeda-beda yang mendukung openid tanpa memasukkan username dan password anda seperti lazimnya. Keterangan lanjut tentang OpenID baca disini aja ya

9. Menu Setting -> Permissions

• Blog Authors: memperbolehkan orang lain untuk ikut menulis di blog Anda. Caranya klik Add Authors lalu masukkan alamat email orang yang mau diundang kemudian klik Invite
• Blog Readers: untuk mengatur siapa yang bisa membaca artikel blog Anda

Nah itu tadi penjelasan dari masing-masing fungsi yang bisa diatur pada blog Anda.  Semoga bermanfaat.