Cara Membuat Blog dengan Mudah dan Gratis Terbaru Tahun 2012

Cara membuat blog sudah sangat banyak diulas oleh para blogger  baik di situs berbahasa indonesia maupun situs berbahasa asing, Meski demikian saya juga akan berbagi kepada sahabat pembaca mengenai cara mudah bikin blog ini.

Tahun 2012 ini memang ada beberapa perubahan baik fitur maupun tampilan yang dimiliki oleh Produk Google, seperti halnya Gmail, Jejaring Sosial Google+, termasuk juga perubahan tampilan bloggernya. Untuk itu agar pembaca mudah memahami tutorial ini bisa lebih freindly saya akan menjelaskan cara membuat blog terbaru dengan sangat mudah. 

Menjadi Blogger Pemula seperti saya memang awalnya terasa sangat sulit untuk membuat blog, namun ternyata rasa ingin tau yang besar akan membantu memudahkan calon blogger untuk membuat blog.

Panduan Membuat Blog Gratis di Blogspot

Membuat Blog di Blogspot Gratis

Benar sekali untuk membuat blog di blogspot, kita tidak dikenakan biaya apapun, selain itu fitur di yang dimiliki blogger sangat mudah untuk dipahami, untuk seorang pemula yang ingin bikin blog tidak akan mengalami kesulitan yang berarti, tentu saja situs kita akan memiliki format domain seperti http://situsanda.blogspot.com 

Langkah Membuat Blog Gratis di Blogspot

1. Buat Email di Gmail

Gmail.com adalah produk Google , untuk membuat blog dari blogger sudah barang tentu Wajib memiliki akun Gmail, selain itu Google juga memberikan kemudahan-kemudahan bagi pemilik akun blogger dan Google+ untuk langsung Login dari Gmail.com ini. Jika belum memiliki akun Gmail silahkan daftarkan di www.gmail.com dan klik Create New Akun  pada bagian sudut kanan atas dan kemudian isikan semua data yang diperlukan termasuk juga Pasword anda.

2. Mendaftar di Blogger.com

Ini adalah langkah inti membuat blog gratis di blogspot, Masuk ke www.blogger.com dan Klik Sign Up atau Daftar dan isikan data yang dibutuhkan di Formulir Blogger.

Keterangan :

• Email : isikan dengan alamat email Gmail yang baru anda daftarkan
• Pasword : Masukkan Pasword anda minimal 8 karakter
• Retype Pasword : Masukkan pasword yang sama sekali lagi, untuk memastikan anda mengingat dengan baik pasword tersebut.
• Display Name : Masukkan nama yang ingin anda tampilkan sebagai penulis di blog, misalkan anda menggunakan nama "hadhara rizka" maka di artikel yang anda posting nanti akan muncul posted by hadhara rizka
• Gender : Masukkan jenis kelamin anda, pilih Male = Jika Laki - laki, Female = Jika Perempuan, atau bisa pula memilih Other atau lainya
• Birthday : Masukkan tanggal lahir anda sesuai dengan format yang diminta misalkan 07 desember 1991 maka dibuat 07/12/1991, jika di dalam Inggris strukturnya adalah Month/Day/Year (Bulan/Tanggal/Tahun) maka anda buat 12/02/1991
• Word Verifications : Isikan dengan kode yang terdiri dari angka maupun huruf yang muncul di kotak dialog Gmail
• Centang Accept the term of service, Saran saya baca dahulu persyaratan pendaftaran dengan baik
• Klik Continue jika anda memutuskan untuk membuat blog

3. Membuat Blog

Nah, Akun blogger sobat sudah jadi, sekarang saat nya membuat blog. Klik "Blog Baru" pada bagian Kiri atas. dan akan muncul tampilan seperti di bawah ini.

Keterangan :

• Pada Kolom "Title" Isikan Judul Blog yang sobat ingin buat, misalkan My Personal Blog, My Story atau apalah yang sobat inginkan
• Pada kolom alamat isikan nama situs sobat, misalkan hadhara-personalblog.blogspot.com,  pilihlah alamat yang sesuai dengan nama dan tema blog dan cari yang simple saja agar mudah diingat 
• Pilih Template yang sederhana saja, saya rekomendasikan pilih Awesome, karena lebih sederhana.
• Blog Sobat sudah jadi, untuk mengecek coba ketikan alamat yang anda daftarkan tadi di url browser anda misalkan hadhara.blogspot.com (kalau tidak di cek juga tak masalah)

Selamat sekarang sobat sudah memiliki blog, dan sudah mulai bisa menulis apa yang ingin sahabat tulis dengan mengklik new post di halaman depan (dasbor) blog sobat.

Motivasi :
Jangan lelah untuk mencoba, karena setiap manusia telah diberikan jatah kegagalan. Tugas kita adalah secepat mungkin menghabiskan jatah gagal tersebut hingga keberhasilan akan diraih.

Terima kasih sudah membaca semoga anda tidak lagi mencari cara membuat blog setelah membaca tulisan ini. Yuks Buat Blog

Terima Kasih Telah Membaca Artikel Ini, Jika Bermanfaat, silahkan bagikan atau di repost dengan mencatumkan link aktif berikut ini dan jadilah blogger dan netter yang jujur

Read More

Widget Recent Post Terbaru

Widget yang tampak berwarna hijau di atas adalah widget recent post/posting terbaru dengan begitu banyak pilihan. Anda bisa menyembunyikan gambar, komentar, bulan terbit dan ringkasan atau sebaliknya, menampilkannya. Menentukan apakah widget ini akan dianimasikan atau tidak juga bisa dilakukan. Cukup ikuti langkah-langkah di bawah ini dan pelajari tabel konfigurasinya:

Lihat Demo

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:

Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
div.spy-outer {
  border:2px solid white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  margin:0px auto;
}

div.spy-outer h2 {
  margin:0px 0px;
  padding:5px 10px;
  background-color:#008800;
  background-image:-webkit-linear-gradient(top, #008800, #037103);
  background-image:-moz-linear-gradient(top, #008800, #037103);
  background-image:-ms-linear-gradient(top, #008800, #037103);
  background-image:-o-linear-gradient(top, #008800, #037103);
  background-image:linear-gradient(top, #008800, #037103);
  color:white;
  font:bold 12px Arial,Sans-Serif;
  text-transform:none;
  text-shadow:0px 1px 2px black;
}

ul.spy {
  margin:0px 0px;
  padding:0px 0px;
  font:normal 10px/12px Arial,Sans-Serif;
  color:#666;
  overflow:hidden;
}

ul.spy li {
  list-style:none;
  text-align:left;
  margin:0px 0px;
  padding:5px 7px;
  background-color:#AABD30;
  background-image:-webkit-linear-gradient(top, #AABD30, #9BB009);
  background-image:-moz-linear-gradient(top, #AABD30, #9BB009);
  background-image:-ms-linear-gradient(top, #AABD30, #9BB009);
  background-image:-o-linear-gradient(top, #AABD30, #9BB009);
  background-image:linear-gradient(top, #AABD30, #9BB009);
  border-top:1px solid #A7D101;
  border-bottom:1px solid #899D00;
  word-wrap:break-word;
  overflow:hidden;
}

ul.spy a {text-decoration:none;}

ul.spy li em {
  font-weight:bold;
  color:#409540;
}

ul.spy a.header {
  font:bold 12px/14px 'Trebuchet MS',Arial,Sans-Serif;
  display:block;
  color:yellow;
  text-shadow:0px 1px 0px rgba(0,0,0,0.2);
}

ul.spy a.header:hover {
  color:white;
  text-decoration:underline;
}

ul.spy li .summ {
  margin-top:5px;
  overflow:hidden;
}

ul.spy li .imgwrap, ul.spy li img {
  float:right;
  margin:0px 0px 2px 7px;
  width:72px;
  height:72px;
  border:4px solid #899D00;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  padding:0px;
}

ul.spy li .imgwrap {
  -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.7);
  box-shadow:0px 0px 2px rgba(0,0,0,0.7);
}

ul.spy li img {
  border:none !important;
  float:none;
  margin:0px 0px;
  padding:0px 0px;
  display:none;
}
</style>
<script type='text/javascript'>
var spyTitle           = "Artikel Terbaru",
    numposts           = 7,
    numchars           = 127,
    komentar           = "Komentar",
    pBlank             = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    modeID             = true,
    showSummaries      = true,
    openNewTab         = false,
    showPostDate       = true,
    showComment        = true,
    showThumbnails     = true,
    animatedRecentPost = true,
    limitspy           = 4,
    intervalspy        = 4000,
    tickspeed          = 1000;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/rp-spy-whatever-v1.js"></script>
<script src="http://mtktik.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

Ganti URL http://mtktik.blogspot.com dengan alamat blog Anda lalu simpan.

Read More

Membuat Readmore Otomatis

Em salah satu temen yaitu Pemilik blog Zainal sering bertanya cara membuat readmore karena dia bilang gak bisa nerapin readmore otomatis di blognya nah kali ini saya akan membahas cara membuat readmore otomatis part ||.

Kenapa part || karena sebelumnya saya sudah pernah membahas Cara membuat readmore otomatis Disini.

1. Log in ke blog anda
2. KLik Rancangan / Template
3. KLik Edit HtmL
4. Cari Kode </head>
5. Dan Letakan kode di bawah ini Di atas kode </head>

<script type='text/javascript'>
var summary_noimg    = 300,
    summary_img      = 300,
    img_thumb_height = 80,
    img_thumb_width  = 90;
</script>
<script type='text/javascript'>
//<![CDATA[
/**
 * =======================================================================
 * Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo
 * =======================================================================
 */
function removeHtmlTag(strx, chop) {
    if (strx.indexOf("<") != -1) {
        var s = strx.split("<");
        for (var i = 0; i < s.length; i++) {
            if (s[i].indexOf(">") != -1) {
                s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
            }
        }
        strx = s.join(" ");
    }
    chop = (chop < strx.length - 1) ? chop : strx.length - 2;
    while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
    strx = strx.substring(0, chop - 1);
    return strx + '...';
}

function createSummaryAndThumb(pID) {
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if (img.length >= 1) {
        imgtag = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
        summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>

5. SimpaN Template
6. Setelah Anda simpan Template Lalu Centang Expand Template widget Dan Cari Kode di Bawah ini

<data:post.body/>

Setelah ketemu Anda Hapus kode Tersebut dan Ganti dengan Kode ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'> READMORE....!! </a>
</b:if>
</b:if>

7. Klik SIMPAN.

Read More

Cara Membuat Widget Rata Tengah Scroll Box

Cara Membuat Widget Rata Tengah Scroll Box - Memasang widget/gadget di sidebar merupakan hal yang biasa dilakukan para blogger. Selain dapat mempercantik tampilan blog, widget tersebut juga bermanfaat baik bagi pengunjung maupun pemilik blog itu sendiri. Widget-widget itu berisikan informasi-informasi mengenai blog tersebut sesuai dengan kegunaannya masing-masing.

Bila widget-widget yang dipasang di sidebar cukup banyak dapat membuat sesak ruangan di sidebar. Salah satu solusi untuk menghemat tempat di sidebar adalah dengan memasang widget-widget tesebut ke dalam scroll box. Lalu, bagaimana caranya agar posisi widget-widget tersebut di scroll box menjadi rata tengah sehingga terlihat rapi dan sedap dipandang mata?

Nah, berikut ini akan dijelaskan cara membuat posisi widget menjadi rata tengah di scroll box. Seperti dibahas pada posting terdahulu bahwa untuk membuat scroll box di sidebar, diperlukan script seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

ISI/ELEMEN KOTAK

</div>

Agar posisi widget menjadi rata tengah, maka script-nya akan terlihat seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
<center>
<script widget 1><br />
<script widget 2><br />
<script widget 3><br />
<script widget 4><br />
<script widget 5><br />
</center>

</div>

• Ganti script widget dengan script widget yang akan dipasang.
• width:100%px; menunjukkan lebar dari kotak yang diinginkan. Ganti sesuai dengan kebutuhan Anda, misalnya 200px atau 300px. Agar lebih mudah menyesuaikan dengan lebar sidebar tentukan saja nilainya dengan 100%px.
• height:200px; menunjukkan tinggi kotak, dapat diubah sesuai keinginan Anda.

Sebagai contoh:
Misalnya, saya mempunyai beberapa script widget yang akan dipasang di scroll box, yaitu:

• <a href="http://bloggers.com/asrul507" rel="dofollow" ><img src="http://bloggers.com/u/108651/p/img_01.png" title="Asrul Nur Rahim - Find me on Bloggers.com" alt="Asrul Nur Rahim - Find me on Bloggers.com" /></a>

• <a href="http://www.ontoplist.com/" target="_blank" title="Online Marketing"><img src="http://www.ontoplist.com/images/ontoplist32.png" alt="Online Marketing" border="0" /></a>

• <a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=25040" target="_blank"><img src="http://www.w3-directory.com/images/logo-w3-world-wide-web-directory.gif" width="125" height="35" border="0" alt="W3 Directory - the World Wide Web Directory" /></a>

• <noscript><a href="http://www.w3-directory.com/directory-Personal-web-sites-Blogs.php">Personal web sites / Blogs directory</a> <a href="http://www.w3-directory.com/directory-Indonesia.php">Indonesia directory</a></noscript>

• <a href="http://indonesia-blogger.com"><img src="http://www.indonesia-blogger.com/img/indonesia-blogger.jpg" border="1"/></a><a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/19.gif" border="0" alt="blog-indonesia.com"/></a>

• <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a>

• <a href="http://www.getrank.org" target="_blank"><img src="http://www.getrank.org/prbutton/pagerank-display.php?s=59" title="Pagerank" alt="PageRank Checker" border="0px" /></a>

• <a href="http://feedvalidator.org/check.cgi?url=http%3A//kamu-klik.blogspot.com/feeds/posts/default"><img src="http://feedvalidator.org/images/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>

Sekarang kita akan masukkan script-script di atas ke script untuk membuat scroll box, maka script-nya menjadi seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

<center> 

<a href="http://bloggers.com/asrul507" rel="dofollow" ><img src="http://bloggers.com/u/108651/p/img_01.png" title="Asrul Nur Rahim - Find me on Bloggers.com" alt="Asrul Nur Rahim - Find me on Bloggers.com" /></a><br/>

<a href="http://www.ontoplist.com/" target="_blank" title="Online Marketing"><img src="http://www.ontoplist.com/images/ontoplist32.png" alt="Online Marketing" border="0" /></a><br/>

<a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=25040" target="_blank"><img src="http://www.w3-directory.com/images/logo-w3-world-wide-web-directory.gif" width="125" height="35" border="0" alt="W3 Directory - the World Wide Web Directory" /></a><br/>

<noscript><a href="http://www.w3-directory.com/directory-Personal-web-sites-Blogs.php">Personal web sites / Blogs directory</a> <a href="http://www.w3-directory.com/directory-Indonesia.php">Indonesia directory</a></noscript><br/>

<a href="http://indonesia-blogger.com"><img src="http://www.indonesia-blogger.com/img/indonesia-blogger.jpg" border="1"/></a><br/>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/19.gif" border="0" alt="blog-indonesia.com"/></a><br/>

<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a><br/>

<a href="http://www.getrank.org" target="_blank"><img src="http://www.getrank.org/prbutton/pagerank-display.php?s=59" title="Pagerank" alt="PageRank Checker" border="0px" /></a><br/>

<a href="http://feedvalidator.org/check.cgi?url=http%3A//kamu-klik.blogspot.com/feeds/posts/default"><img src="http://feedvalidator.org/images/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a><br/>

</center>

</div>

Untuk memasang scroll box di sidebar, berikut ini langkah-langkahnya:

• Masuk ke akun Blogger
• Klik Rancangan > Elemen Laman > Tambah Gadget.
• Kemudian pilih HTML/JavaScript.
• Berikan judul dan isi kolom Konten dengan script scroll box.
• Klik tombol SIMPAN.
• Atur posisi widget ke tempat yang diinginkan.
• Klik tombol SIMPAN. 

Okelah demikian cara-cara tersebut yang saya tahu.. selamat mencoba dan semoga berhasil :)

Read More

Cara Memodifikasi Tulisan Jumlah Komentar

Cara Memodifikasi Tulisan Jumlah Komentar - Biasanya pada bagian atas kolom komentar terdapat tulisan yang menunjukkan ada berapa banyak jumlah komentar yang ada di bawahnya. Tulisan yang saya maksud adalah seperti yang terlihat pada screenshot di bawah ini. Screenshot ini diambil dari blog yang menggunakan template "Mudah" dari Blogger.

Tulisan jumlah komentar.

Tulisan tersebut dapat diganti sesuai dengan keinginan kita agar tampak lebih menarik. Misalnya saja, tulisan itu diganti dengan kalimat: Ada 3 komentar untuk "Link Judul Artikel". Selain itu, kita dapat pula menambahkan kalimat berikutnya yang mengandung link atau tautan untuk menuju langsung ke formulir komentar. Saat jumlah komentar telah banyak pada artikel tertentu,  hal ini dapat memudahkan pengunjung yang ingin memberi komentar baru karena tak perlu repot-repot lagi menggulung layar untuk menemukan form komentar yang terletak di bawah komentar terakhir.

Berikut langkah-langkah untuk memodifikasi tulisan jumlah komentar serta menambahkan link menuju form komentar. Selamat menyimak.

1. Masuk ke akun Blogger.

2. Klik menu "Template" melalui "Opsi lainnya" (simbol segitiga hitam) pada Dasbor baru Blogger.

3. Untuk membuat salinan template, klik tombol "Cadangkan / Pulihkan" lalu klik Tombol "Unduh template lengkap". Hal ini berguna untuk memudahkan kita mengembalikan template ke keadaan sebelum pengeditan jika terjadi kesalahan dalam mengedit template. Bila sudah, klik tombol "Tutup".

4. Klik tombol "Edit HTML" pada bagian "Langsung di Blog" lalu klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Carilah kode yang mirip dengan kode di bawah ini. Kode pada masing-masing template dapat saja sedikit berbeda.

<h4>
      <b:if cond='data:post.numComments == 1'>
        1 <data:commentLabel/>:
      <b:else/>
        <data:post.numComments/> <data:commentLabelPlural/>:
      </b:if>
    </h4>

Untuk menemukan kode dengan cepat, gunakan fitur pencarian teks pada browser. Misalnya, pada Mozilla Firefox, tekan tombol Ctrl+F di keyboard atau pada Google Chrome tekan tombol F3, lalu masukan penggalan kode yang akan dicari sebagai kata kunci utamanya.

7.  Hapus kode tersebut dan ganti dengan kode di bawah ini.

<h4>

      <b:if cond='data:post.numComments == 1'>

        Ada 1 komentar untuk &quot;<a expr:href='data:post.url'><data:blog.pageName/></a>&quot;. Baca komentar tersebut di bawah ini atau <a href='#comment-form' rel='nofollow'>poskan komentar</a>.

      <b:else/>

       Ada <data:post.numComments/> komentar untuk &quot;<a expr:href='data:post.url'><data:blog.pageName/></a>&quot;. Baca komentar-komentar tersebut di bawah ini atau <a href='#comment-form' rel='nofollow'>poskan komentar</a>.

      </b:if>

    </h4>

8. Selanjutnya klik tombol "Simpan template".

9. Jika berhasil, hasilnya akan tampak seperti gambar di bawah ini.

Tulisan jumlah komentar yang sudah dimodifikasi.

Selamat mencoba dan semoga berhasil.

Read More

Cara Mengatur Lebar Sidebar pada Template Thesis

Cara Mengatur Lebar Sidebar pada Template Thesis - Setidaknya ada 2 macam template Thesis untuk Blogspot yang saya temui. Ada template Thesis yang pada bagian sidebar-nya terdapat 2 kolom seperti pada template yang sedang saya gunakan ini. Ada pula template Thesis yang mengandung satu kolom saja di sidebar-nya.

Saya merasa sidebar tersebut terlalu lebar sehingga membuat lebar kolom halaman posting terlihat menjadi agak sempit. Sebenarnya sidebar yang cukup lebar tersebut memang didesain untuk menaruh unit iklan (adsense). Namun, saya ingin mengurangi lebar dari sidebar itu.

Screenshot sidebar sebelum dikurangi lebarnya.

Mengurangi lebar sidebar harus dibarengi dengan menambahkan lebar halaman posting. Yang mana nilai pengurangan lebar sidebar sama dengan nilai untuk menambahkan lebar halaman posting. Misalnya, saya mengurangi lebar sidebar sebesar 60px, maka saya juga harus menambahkan lebar halaman posting sebesar 60px.

Berikut ini langkah-langkah yang saya lakukan untuk mengubah nilai lebar halaman posting dan lebar sidebar pada template yang sedang saya pakai ini.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" kemudian klik "Template".

3. Klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template.

4. Lalu klik tombol "Edit HTML" dan klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Kemudian saya mencari kode-kode seperti di bawah ini untuk menemukan lebar halaman posting dan lebar sidebar. Dari kode-kode di bawah ini kalau lebar halaman posting sebesar 507px, lebar sidebar atas dan sidebar bawah sebesar 362px, lebar sidebar-wrapper1 sebesar 160px, dan lebar sidebar-wrapper2 sebesar 182px.

#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}
#sidebar-top {
border-left: 1px  dotted #dddddd;
border-bottom: 1px  dotted #dddddd;
border-top: 1px  dotted #dddddd;
border-right: 1px  dotted #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:8px;
}
#sidebar-wrapper1 {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPHjpYOteHAKrUluVcUQ5IXRP5KsxSVOv6s3DD3MrG_BQlRcPOUAx7g3ZnFZB86tSg4WvDO1QRHNyZeP15kkV-amCEV3ezNAzjtp_B7cRLBphHVu07rX8Mx3T8s6ttR0Lx1oBmxBHK2F8K/s1600/sidebg.gif) repeat-y scroll left top;
float:left;
overflow:hidden;
padding-left:15px;
margin:18px 0px 5px 0px;
width:160px;
word-wrap:break-word;
}
#sidebar-wrapper2 {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPHjpYOteHAKrUluVcUQ5IXRP5KsxSVOv6s3DD3MrG_BQlRcPOUAx7g3ZnFZB86tSg4WvDO1QRHNyZeP15kkV-amCEV3ezNAzjtp_B7cRLBphHVu07rX8Mx3T8s6ttR0Lx1oBmxBHK2F8K/s1600/sidebg.gif) repeat-y scroll left top;
float:left;
overflow:hidden;
padding-left:8px;
margin:0px 10px 10px 0px;
width:182px;
word-wrap:break-word;
}
#sidebar-bottom {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPHjpYOteHAKrUluVcUQ5IXRP5KsxSVOv6s3DD3MrG_BQlRcPOUAx7g3ZnFZB86tSg4WvDO1QRHNyZeP15kkV-amCEV3ezNAzjtp_B7cRLBphHVu07rX8Mx3T8s6ttR0Lx1oBmxBHK2F8K/s1600/sidebg.gif) repeat-y scroll left top;
float:right;
overflow:hidden;
padding-left:8px;
margin:0px 10px 10px 0px;
width:362px;
word-wrap:break-word;
}

7. Di sini saya akan membuat lebar sidebar atas dan sidebar bawah menjadi 300px. Dengan demikian saya harus mengurangi lebar kedua sidebar tersebut sebesar 62px karena 362px dikurang 300px sama dengan 62px. Setelah mengurangi lebar sidebar sebesar 62px, berarti saya juga harus menambah lebar halaman posting sebesar 62px juga. Dengan demikian lebar halaman posting menjadi 569px (507px + 62px).

Sekarang saya harus menyesuaikan lebar untuk sidebar-wrapper1 dan side-wrapper2. Seperti diketahui, saya telah mengurangi lebar sidebar-top dan sidebar-bottom masing-masing sebesar 62px, untuk itu saya harus mengurangi juga lebar kedua sidebar-wrapper tersebut sebesar 62px. Agar lebih mudahnya saya bagi 2 saja angka 62px ini sehingga lebar (width) sidebar-wrapper1 yang 160px itu saya kurangi 31px. Dengan demikian lebarnya menjadi 129px. Begitu pula lebar side-wrapper2 saya kurangi 31px sehingga menjadi 151px (182px - 31px).

8. Karena lebar kolom komentar dan lebar kotak komentar sama dengan lebar halaman posting (sebelum diubah) yakni sebesar 507px, maka ada baiknya kita menambahkan pula lebar kedua elemen tersebut agar tampak serasi yaitu menjadi 569px (sama dengan lebar halaman posting setelah diubah).

Untuk mencari kedua lebar elemen tersebut, carilah kode-kode seperti di bawah ini.

#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='507'/>

9. Kemudian gantilah kedua angka 507 tersebut menjadi 569.

10. Klik tombol "Simpan template" dan lihat hasilnya.

Screenshot sidebar yang lebarnya sudah dikurangi

Sedangkan untuk mengurangi lebar sidebar pada Template Thesis SEO Blogger yang mengandung 1 kolom, caranya tidak jauh berbeda dengan cara di atas. Pada template ini, kode lebar halaman posting dan lebar kedua sidebar terdapat pada kode-kode seperti di bawah ini.

#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}
#sidebar-top {
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:10px;
}
#sidebar-wrapper {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPHjpYOteHAKrUluVcUQ5IXRP5KsxSVOv6s3DD3MrG_BQlRcPOUAx7g3ZnFZB86tSg4WvDO1QRHNyZeP15kkV-amCEV3ezNAzjtp_B7cRLBphHVu07rX8Mx3T8s6ttR0Lx1oBmxBHK2F8K/s1600/sidebg.gif) repeat-y scroll left top;
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}

Misalnya saya juga ingin membuat lebar kedua sidebar (sidebar-top dan sidebar-wrapper) menjadi 300px maka saya tinggal mengurangi 362px dengan 62px. Dengan demikian saya juga harus menambah lebar halaman posting (main-wrapper) sebesar 62px. Hasilnya adalah 569px (507px + 62px).

Setelah itu jangan lupa untuk mengubah lebar kolom komentar dan lebar kotak komentar. Yang tadinya mempunyai lebar 507 diganti menjadi 569. Tujuannya adalah agar serasi dengan lebar halaman posting sekarang. Kode-kode untuk kedua elemen tersebut adalah seperti di bawah ini.

#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='507'/>

Berikut screenshot sidebar pada template Thesis 1 kolom sidebar, baik yang sebelum diganti lebarnya maupun setelah dikurangi lebarnya.

Sidebar yang belum dikurangi lebarnya.

Sidebar yang sudah dikurangi lebarnya.

Setelah melakukan perubahan pada lebar sidebar dan lebar halaman posting, kita perlu juga mengatur ulang banyaknya karakter atau huruf pada widget readmore otomatis agar tampilan home page menjadi lebih serasi.

Read More

Widget Jadwal Sholat untuk Blog

Widget Jadwal Sholat untuk Blog - Bagi Sobat muslim yang ingin memasang jadwal sholat pada blog, ada nih salah satu situs yang menyediakan widget tersebut yakni Islamic Finder. Widget ini dapat mengingatkan kita akan waktu sholat agar kita dapat sholat tepat waktu dan tidak terlena saat membaca artikel-artikel yang ada pada blog.

Untuk mendapatkan widget jadwal sholat ini, silakan ikuti langkah-langkahnya di bawah ini.

1. Silakan Sobat kunjungi situs Islamic Finder di http://www.islamicfinder.org/

2. Klik banner yang bertuliskan "Add Daily Prayer times To Your Web Site".

Tambah Jadwal Sholat Harian di Blog

3. Arahkan perhatian Sobat ke pilihan No. 2). Klik menu dropdown yang bertuliskan "Select a country".

4. Kemudian klik nama negara yang Sobat inginkan. Misal: Indonesia.

5. Selanjutnya klik tombol "Go".

6. Klik nama kota yang diinginkan. Misal: Jakarta.

7. Klik tombol "Generate Code".

8. Silakan copy kode tabel jadwal sholat yang diberikan. Silakan dipilih salah satu, apakah mau yang vertikal atau yang horizontal. Kemudian paste di notepad.

Langkah-langkah di atas adalah cara untuk mendapatkan kode jadwal sholat. Untuk memasangnya di sidebar blog, silakan ikuti langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Sobat.

2. Klik "Opsi lainnya" diikuti mengeklik menu "Tata Letak".

3. Kemudian klik link "Tambah Gadget".

4. Selanjutnya klik HTML/JavaScript.

5. Berikan judul yang Sobat inginkan pada kolom "Judul".

6. Letakkan kode jadwal sholat tadi di kolom "Konten".

7. Klik tombol "Simpan".

8. Pindahkan elemen "Jadwal Sholat" ini ke lokasi yang Sobat inginkan.

9. Klik tombol "Simpan setelan".


Jadwal sholat untuk tabel vertikal.





Jadwal sholat untuk tabel horizontal.

Read More

Membuat Simbol Matematika, Huruf Yunani, dan Simbol Lainnya dengan Kode HTML

Membuat Simbol Matematika, Huruf Yunani, dan Simbol Lainnya dengan Kode HTML - Sebelumnya di blog ini telah diulas mengenai cara membuat simbol atau karakter khusus dengan menggunakan kode HTML pada posting yang berjudul Cara Membuat Karakter-karakter Khusus dalam Postingan. Namun, pada artikel tersebut hanya dibahas beberapa simbol saja.

Kali ini masih akan membahas tentang cara membuat simbol menggunakan kode HTML tetapi dengan jumlah simbol yang lebih banyak. Baik dengan kode HTML yang berupa angka maupun kode HTML dengan huruf atau kata. Kedua kode tersebut menghasilkan simbol yang sama di bagian "Compose" atau setelah posting dipublikasikan. Yang harus diingat adalah menuliskan kode tersebut pada bagian "HTML".

Simbol-simbol ini terbagi menjadi 3 kelompok tabel. Tabel yang pertama memuat simbol-simbol yang berhubungan dengan matematika. Tabel yang kedua berisi simbol dan tulisan Yunani. Sedangkan tabel yang terakhir memuat simbol-simbol yang lainnya.

Berikut 3 tabel yang memuat simbol-simbol beserta kode HTML-nya. Selamat menyimak dan semoga bermanfaat.

I. SIMBOL MATEMATIKA

SIMBOL	HTML ANGKA	HTML KATA	KETERANGAN
∀	∀	∀	for all
∂	∂	∂	part
∃	∃	&exists;	exists
∅	∅	∅	empty
∇	∇	∇	nabla
∈	∈	∈	isin
∉	∉	∉	notin
∋	∋	∋	ni
∏	∏	∏	prod
∑	∑	∑	sum
−	−	−	minus
∗	∗	∗	lowast
√	√	√	square root
∝	∝	∝	proportional to
∞	∞	∞	infinity
∠	∠	∠	angle
∧	∧	∧	and
∨	∨	∨	or
∩	∩	∩	cap
∪	∪	∪	cup
∫	∫	∫	integral
∴	∴	∴	therefore
∼	∼	∼	simular to
≅	≅	≅	approximately equal
≈	≈	≈	almost equal
≠	≠	≠	not equal
≡	≡	&equip;	equivalent
≤	≤	≤	less or equal
≥	≥	≥	greater or equal
⊂	⊂	⊂	subset of
⊃	⊃	⊃	superset of
⊄	⊄	⊄	not subset of
⊆	⊆	⊆	subset or equal
⊇	⊇	⊇	superset or equal
⊕	⊕	⊕	circled plus
⊗	⊗	⊗	circled times
⊥	⊥	⊥	perpendicular
⋅	⋅	⋅	dot operator

II. HURUF YUNANI

KARAKTER	HTML ANGKA	HTML KATA	KETERANGAN
Α	Α	Α	Alpha
Β	Β	Β	Beta
Γ	Γ	Γ	Gamma
Δ	Δ	Δ	Delta
Ε	Ε	Ε	Epsilon
Ζ	Ζ	Ζ	Zeta
Η	Η	Η	Eta
Θ	Θ	Θ	Theta
Ι	Ι	Ι	Iota
Κ	Κ	Κ	Kappa
Λ	Λ	Λ	Lambda
Μ	Μ	Μ	Mu
Ν	Ν	Ν	Nu
Ξ	Ξ	Ξ	Xi
Ο	Ο	Α	Omicron
Π	Π	Π	Pi
Ρ	Ρ	Ρ	Rho
Σ	Σ	Σ	Sigma
Τ	Τ	Τ	Tau
Υ	Υ	Υ	Upsilon
Φ	Φ	Φ	Phi
Χ	Χ	Χ	Chi
Ψ	Ψ	Ψ	Psi
Ω	Ω	Ω	Omega
α	α	α	alpha
β	β	β	beta
γ	γ	γ	gamma
δ	δ	δ	delta
ε	ε	ε	epsilon
ζ	ζ	ζ	zeta
η	η	η	eta
θ	θ	θ	theta
ι	ι	ι	iota
κ	κ	κ	kappa
λ	λ	λ	lambda
μ	μ	μ	mu
ν	ν	ν	nu
ξ	ξ	ξ	xi
ο	ο	ο	omicron
π	π	π	pi
ρ	ρ	ρ	rho
σ	σ	σ	sigma
τ	τ	τ	tau
υ	υ	υ	upsilon
φ	φ	φ	phi
χ	χ	χ	chi
ψ	ψ	ψ	psi
ω	ω	ω	omega
ϑ	ϑ	ϑ	theta symbol
ϒ	ϒ	ϒ	upsilon symbol
ϖ	ϖ	ϖ	pi symbol

III. SIMBOL-SIMBOL LAINNYA

SIMBOL	HTML ANGKA	HTML KATA	KETERANGAN
Œ	Œ	Œ	capital ligature OE
œ	œ	œ	small ligature oe
Š	Š	Š	capital S with caron
š	š	š	small S with caron
Ÿ	Ÿ	Ÿ	capital Y with diaeres
ƒ	ƒ	ƒ	f with hook
ˆ	ˆ	ˆ	modifier letter
˜	˜	˜	small tilde
	 	 	en space
	 	 	em space
	 	 	thin space
‌	‌	‌	zero width non-joiner
‍	‍	‍	zero width joiner
‎	‎	‎	center-to-right mark
‏	‏	‏	right-to-center mark
–	–	–	en dash
—	—	—	em dash
‘	‘	‘	center single quotation mark
’	’	’	right single quotation mark
‚	‚	‚	single low-9 quotation mark
“	“	“	center double quotation mark
”	”	”	right double quotation mark
„	„	„	double low-9 quotation mark
†	†	†	dagger
‡	‡	‡	double dagger
•	•	•	bullet
…	…	…	horizontal ellipsis
‰	‰	‰	per mille
′	′	′	minutes
″	″	″	seconds
‹	‹	‹	single center angle quotation
›	›	›	single right angle quotation
‾	‾	‾	overline
€	€	&uero;	uero
™	™	™	trademark
←	←	←	left arrow
↑	↑	↑	up arrow
→	→	→	right arrow
↓	↓	↓	down arrow
↔	↔	↔	left right arrow
↵	↵	↵	carriage return arrow
⌈	⌈	⌈	left ceiling
⌉	⌉	⌉	right ceiling
⌊	⌊	⌊	left floor
⌋	⌋	⌋	right floor
◊	◊	◊	lozenge
♠	♠	♠	spade
♣	♣	♣	club
♥	♥	♥	heart
♦	♦	♦	diamond

Read More