Sabtu, 04 September 2010

Persiapan Mudik dan Selamat Hari Raya Idul Fitri 1431 H

Hmmm... Tidak terasa ya teman-teman sebentar lagi sudah mau Lebaran Idul Fitri 1431 H (h-5), sudah 25 hari juga kita melewati Puasa di bulan Ramadhan ini, tentunya banyak sekali ujian dan cobaannya :)

Nah, berhubung nanti sore tgl 05 Sept 2010 jam 18.30 wib nanti saya mau mudik (pulang kampung), tepatnya ke kota Belinyu - Bangka Belitung.

Makanya say
a mau nyolong start dulu buat ucapan Selamat Hari Raya IDul Fitri 1431 H untuk semua teman-teman (sobat dan sahabat) blogger yang merayakannya, maklum di sana nanti bakal jauh dari yang namanya internet

Berarti nanti selama saya mudik blog ini untuk sementara waktu belum update artikel dan tentunya belum bisa blogwalking rutin ke blog teman-teman, mohon maaf ya teman-teman... :)

Oiy. saya mau cerita sedikit, perjalanan mudik saya nanti akan dimulai dengan naik Kereta Api 'Senja Utama Jogja' di Stasiun Tugu Yogyakarta sampai Jakarta lanjut lagi dengan Pesawat 'Sriwijaya' dan mendarat di Kota Pangkal Pinang...ups belum sampai teman-teman, masih lanjut lagi naik mobil 2 jam baru deh sampai ke rumah, doain saja ya teman-teman agar perjalanan mudik saya bisa selamat sampai tujuan, amin. :)



Ok, buat teman-teman yang mau mudik, saya juga mau ucapin met mudik aja ya, hati-hati di perjalanan, ingat tips-tips mudik yang saat ini sering disampaikan di televisi, radio dan suratkabar, semoga perjalanan mudiknya menyenangkan dan selamat sampai tujuan, salam untuk kerabat keluarga di sana :)



Akhir kata saya ucapkan Terimakasih untuk teman-teman semua, mohon maaf yang sebesar-besarnya apabila selama ini saya ada salah-salah perilaku (ucapan, komentar, artikel) yang tidak berkenan di hati teman-teman, kita mulai dari 0 lagi ya ? hehehe...



Saya 'ANGGASONA' dan segenap keluarga besar saya mengucapkan:

Minal Aidin Walfaidzin, Mohon Maaf Lahir dan Bathin, SELAMAT HARI RAYA IDUL FITRI 1431 H... :)

Salam...

Membuat Teks Ucapan Terimakasih Untuk Komentator di Form Komentar

Membuat Teks Ucapan Terimakasih Untuk Komentator di Form Komentar merupakan salah satu cara kita selaku admin blog memberikan apresiasi terhadap para pengunjung yang sudah memberikan komentarnya di artikel blog.

Mungkin saja kita tidak sempat untuk membalas komentarnya satu-satu maka dengan teks ucapan terimakasih ini bisa sedikit mewakili rasa terimakasih untuk mereka yang sudah meluangkan waktunya untuk memberikan komentarnya.

Selain itu, tampilan pada form komentar pun akan terlihat lebih atraktif.


lihat pict



Ok, untuk membuatnya silahkan ikuti langkah-langkah di bawah ini:


1. Login ke akun blogspot,

2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,

3. Lalu cari kode berikut (Ctrl F):
<p><data:comment.body/></p>


(akan terdapat 2 buah kode yang sama, pilih kode yang kedua)


Kode lengkapnya seperti ini:

<p><data:comment.body/></p>
</b:if>

</dd>

4. Selanjutnya selipkan kode di bawah ini persis berada di bawah kode tadi:

<span style='color: rgb(255, 102, 0);font-size:85%; float: left;'><span style='font-style: italic;'>Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini...</span></span><b><span style='color: rgb(255, 102, 51);font-size:90%;'><b> by Anggasona </b></span></b>

5. Hasil akhirnya menjadi seperti ini:

<p><data:comment.body/></p>
</b:if>

</dd>


<span style='color: rgb(255, 102, 0);font-size:85%; float: left;'><span style='font-style: italic;'>Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini...</span></span><b><span style='color: rgb(255, 102, 51);font-size:90%;'><b> by Anggasona </b></span></b>

</b:if>

6. Sebelum di save, silahkan di edit dulu beberapa keterangan berikut:

a. Ubah warna teks ucapan terimakasihnya sesuai selera (kode warna RGB lihat di sini) dengan mengganti tulisan yang berwarna merah,

b. Ubah kata-kata ucapannya sesuai keinginan teman-teman,

c. Ganti tulisan yang berwarna pink dengan nama teman-teman (admin blog),

d. Ubah besar kecilnya tulisan dengan mengubah font size ... % .

e. Untuk membuat teks ucapannya kedap kedip silahkan tambahkan kode: <blink>Terimakasih Untuk Komentar Teman-teman Pada Artikel Ini...</blink>

7. Jika sudah klik Save Templates dan lihat hasilnya.


Seperti itulah teman-teman bagaimana cara Membuat Teks Ucapan Terimakasih Untuk Komentator di Form Komentar, semoga bisa bermanfaat dan selamat mencoba. Salam...

Kamis, 02 September 2010

Widget Popular Post Berdasarkan Pageview dan Blog Stats (Total Pageview), Fasilitas Terbaru Blogger [NEW]

Met pagi teman-teman semua, bagaimana kabarnya hari ini? Sepertinya masih pada semangat ya puasanya? hehehe :D

Ok, hari ini saya ada ada informasi menarik dan tentunya kabar baik nih untuk teman-teman blogger khususnya pengguna platform blogspot, sekarang blogger.com sudah menambah 2 gadget (widget) baru untuk blogger, yaitu Widget Popular Post Berdasarkan Pageview dan Blog Stats (Total Pageview), Fasilitas Terbaru Blogger [NEW].

lihat pict (Popular Post)



lihat pict (Blog Stats)



Nah, tentunya 2 fasilitas ini sudah lama kita tunggu-tunggu karena mungkin sebelumnya kita harus menggunakan widget pihak ke-3 untuk mengoptimalkan widget tersebut.


Note: Untuk mengakses widget Popular Post dan Blog Stats sementara waktu ini kita harus melalui: draft.blogger.com jadi bukan blogger.com

Langkah-langkah instalasi:

1. Setelah login ke akun blogspot, silahkan buka tab baru dan ketikkan: http://draft.blogger.com/

2. Jika sudah, lakukan instalasi seperti
biasa: Klik Design/Rancangan >> Page Element >> Add a Gadget,

3. Setelah itu akan muncul 2 widget teratas (new),


lihat pict


4. Untuk menu Widget Popular Post berdasarkan Pageview, kita akan diberikan opsi untuk editing, silahkan disesuaikan saja sesuai kebutuhan, di sini kita juga bisa menampilkan image thumbnail (gambar artikel) saja atau juga snippet (deskiripsi singkat).


lihat pict



5. Untuk menu Widget Blog Stats, kita juga bisa melakukan editing untuk Style nya dan Style Option, sesuaikan saja sesuai dengan keinginan teman-teman. Blog Stats ini adalah Total Pageview keseluruhan.


lihat pict



6. Jika sudah, maka sekarang klik Save dan lihat hasilnya.


Review widget dari saya:


Widget ini adalah bawaan blogger, sehingga hasilnya lebih akurat, instalasi pun bisa kita lakukan dengan mudah, walaupun harus melalui blogger in draft. Mungkin sedikit kekurangannya adalah pada style yang menurut saya masih belum atraktif (khusus untuk Popular Post) dan tidak adanya count jumlah total pageviewnya per post.


Ok, itulah informasi
Widget Popular Post Berdasarkan Pageview dan Blog Stats (Total Pageview), Fasilitas Terbaru Blogger [NEW] yang ingin saya sampaikan pada teman-teman semua, semoga bisa membawa angin segar untuk kita (blogger pengguna blogspot) agar bisa lebih optimal lagi blognya. Tentunya bisa di coba di blog masing-masing. Salam...

Membuat Halaman Full Post (Penuh) Tanpa Sidebar

Sebelumnya saya mau mengucapkan terimakasih dulu untuk beberapa sahabat blogger saya karena sudah mempercayakan kepada saya untuk request beberapa tutorial seputar blogging, jika kemaren dari sahabat Ndolem maka kali ini saya ingin menjawab request dari sahabat Mas Ferdinand (http://dj-site.blogspot.com/).

Beberapa tutorial mungkin belum saya postingkan, bukan karena pilih kasih tetapi ilmu pengetahuan saya juga baru akan berkembang, jadi tutorial yang saya kuasai dulu dan yang sudah saya praktekkan yang akan saya postingkan untuk teman-teman semua.


Ok, kali ini saya ingin share tentang bagaimana cara Membuat Halaman Full Post (Penuh) Tanpa Sidebar, sesuai dengan request mas Ferdinand.


Halaman Full Post (Penuh) Tanpa Sidebar sebenarnya dibuat untuk beberapa alasan, salah satunya adalah untuk menambahkan Embed Forum (cth: Aplikasi Forum Submit Artikel - Nabble), di mana di dalam blog harus memiliki tempat yang sedikit luas agar ruang forum terlihat PAS, tidak kecil. (bisa juga untuk yang lainnya).


Kelebihan: Trik ini hanya untuk halaman tertentu saja, jadi bukan secara keseluruhan halaman, jadi kita bisa memilih sendiri posting yang mana yang harus dibuat dalam 1 halaman penuh tanpa sidebar.


Kekurangan: Teman-teman harus sedikit extra kerja keras, tentunya TELITI agar trik ini bisa berjalan dengan baik di blog teman-teman :D


Buat teman-teman yang ingin mencoba Membuat Halaman Full Post (Penuh) Tanpa Sidebar, silahkan ikuti langkah-langkah di bawah ini:


Sebelum melangkah, kita harus mengetahui dulu 2 kode penting dalam trik ini:


Kode Sidebar:

a. Jika hanya 1 sidebar: #sidebar{ atau #sidebar-wrapper {


b. Jika lebih dari 1 sidebar: #sidebar-wrapper, #mid-sidebarleft, #mid-sidebarright, #sidebar-bottom { atau #sidebar-leftwrap { , #sidebarright {


Kode Area Posting (Post): #main-wrapper {

Ok, masing-masing dari kode Sidebar dan Area Posting di atas memiliki lebar (width) yang berbeda, lihat ilustrasi di bawah ini:


Cari tahu dulu berapa lebar header blog masing-masing, saya contohkan milik saya adalah 900px, lalu lebar area posting (#main-wrapper {) adalah 580px dan sidebar (#sidebar-wrapper) adalah 260px.

Total lebar antara Sidebar dan Area Posting adalah 840px, sisanya adalah 60px itu untuk batas margin/border. Nah lebar dari total itulah yang akan kita gunakan sebagai halaman full post yaitu 840px (selanjutnya kita sebut #main-wrapper {).

1. Login ke akun blogspot,

2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,

3. Cari kode berikut: </head>


4. Tambahkan kode di bawah ini dan taruh di atas kode tadi:


kode untuk blog 1 sidebar:

<b:if cond='data:blog.url == &quot;http://demotutorialanggasona.blogspot.com/2010/09/blog-demo-anggasona-test-post-1.html&quot;'>
<style>
#sidebar-wrapper {
display: none !important;
}
#main-wrapper{
width: 840px;
}
</style>
</b:if>

kode untuk blog 2 sidebar atau lebih:

<b:if cond='data:blog.url == &quot;http://demotutorialanggasona.blogspot.com/2010/09/blog-demo-anggasona-test-post-1.html&quot;'>
<style>
#sidebar-wrapper, #mid-sidebarleft, #mid-sidebarright, #sidebar-bottom {
display: none !important;
}
#main-wrapper{
width: 840px;
}
</style>
</b:if>

Note: Untuk kode sidebar harap disesuaikan saja, tiap templates terkadang berbeda. Tugas kita adalah menyembunyikan sidebar, apabila ada lebih dari 2 sidebar, maka masukkan id sidebarnya dipisahkan dengan koma, sesuai ket di kode untuk blog 2 sidebar atau lebih di atas.

5. Keterangan:


- Silahkan ubah tulisan yang berwarna biru tua dengan alamat url salah satu halaman/postingan teman-teman yang ingin dibuat full post (penuh tanpa sidebar).


- Perhatikan kode width main wraper (warna hijau), harap diubah sesuai dengan lebar total sidebar dengan area posting blog masing-masing.


6. Jika sudah klik Save Templates dan lihat perubahannya.



Seperti itulah teman-teman bagaimana caranya Membuat Halaman Full Post (Penuh) Tanpa Sidebar, semoga saja tutorial ini bisa menjawab request dari Mas Ferdinand, dan buat teman-teman yang lainnya silahkan mencoba. Salam...

Rabu, 01 September 2010

Mencantumkan Sumber/Referensi, Tidak Akan Membuat "Anda" Terlihat Bodoh !

Sebenarnya ini adalah artikel uneg-uneg saya teman-teman, tidak mengapa kan sesekali saya bercerita sedikit di luar tema blog ini, hehehe :D

Begini, sesuai judul di atas yaitu Mencantumkan Sumber/Referensi, Tidak Akan Membuat "Anda" Terlihat Bodoh !, saya sekarang menjadi dilema sendiri, di satu sisi saya pribadi ingin berbagi informasi dengan teman-teman semua, tapi di sisi lain informasi tersebut malah di copas dengan sistem kebut tayang, boro-boro cantumin sumber, minimal referensi dari siapa itupun tidak ada.


Saya sebenarnya tidak masalah apabila semua artikel di dalam blog ini ada yang mau copas, tapi ya kembali lagi ke masalah etika, cantumkan sumbernya atau referensinya dari siapa. :)


Saya juga apabila ada mengambil contoh tutorial dari para senior ya pasti saya tuliskan dari siapanya, misal Kang Abu Farhan dan Bang Baraja (Table of Content), lalu Back To Top jQuery milik Kang Rizky dan lain sebagainya, karena saya punya pemikiran bahwa misalkan saya mencantumkan nama mereka toh blog saya ini tidak akan sepi pengunjung (bukan saya sombong lho, hanya saja saya bingung harus menulis apa) atau dipandang hina kok, tapi malahan saya bangga karena sudah JUJUR pada teman-teman semua.


Beberapa hari kemarin saya iseng-iseng cek beberapa keyword artikel blog saya di Google dan alhasil saya menemukan beberapa artikel yang mulai dari JUDUL sampai paragraph akhir mirip plek dengan artikel saya, lalu barusan iseng-iseng juga (rencana ingin blogwalking, akhirnya tidak jadi) saya lihat ada blog yang saya rasa blog dengan sistem kebut tayang dan isinya ya bisa saya katakan bahasa dengan gaya milik saya.


Tapi saya tidak menegurnya, karena akan banyak membuang waktu dan energi saya selama bulan puasa ini. :D

Kenapa saya tahu bahwa itu bahasa dan gaya milik saya?
Bisa teman-teman perhatikan semua artikel di dalam blog ini:

1. Saya tidak pernah menulis dengan nama sobat atau anda ataupun sahabat, pasti akan saya tulis teman-teman apabila saya ingin menunjukkan objek yang ingin saya sebut,


2. Beberapa kode script tutorial di dalam blog ini sudah dimodifikasi, karena saya sendiri tidak mau menelan mentah-mentah semua tutorial tanpa saya praktekkan dan diedit terlebih dahulu, sehingga apabila ada kesamaan saya tahu bahwa script yang dicopy itu adalah hasil editan saya,


3. Karena artikel itu adalah hasil saya mengetik sendiri dengan berimajinasi secara kreatif jelas saya pasti tahu 100% bahwa artikel yang dicopas itu adalah milik tulisan saya.

Untuk kode script tutorial saya tidak ambil pusing, karena memang untuk dicopas di dalam blog ini, yang jadi masalahnya hanya kata-kata pengantar, tengah dan akhir + gambar yang dengan capek dan susah saya buat dan akhirnya dicopas mentah-mentah :(


Menulis itu susah, buat otak bekerja keras untuk menulis habis kalimat ini apa ya, kalau saya tulis begini apa teman-teman mengerti apa tidak ya, betul tidak tuh? :D Informasi jelas untuk dibagi (share), tapi cara berbaginya pun harus ada cara yang baiknya.


Saya bukan BENCI yang namanya copas, karena saya pun memahami semua butuh proses untuk belajar menulis, tapi kita juga harus ingat bahwa yang di atas Allah swt sudah memberikan kita otak yang gunanya untuk berfikir dengan cara dan gaya masing-masing, agar kita bisa berkreasi secara kreatif, jika tidak diasah mulai sekarang dengan bahasa dan gaya sendiri maka sampai kapanpun tidak ada artikel yang original hasil sendiri.


Jika hanya mengganti gambar dan meng-CUT beberapa kata saja
dan masih meninggalkan jejak aslinya itu TANGGUNG kreatifnya, apabila memang mau copas dengan kreatif saya punya saran:

1. Silahkan edit judul artikelnya dengan judul yang berbeda tapi tetap memiliki makna dan maksud yang sama,

2. Silahkan edit mulai dari paragraph pertama sampai akhir dengan gaya dan bahasa masing-masing, jadi artikel yang akan dicopas itu hanya sebagai referensi,

3. Cari 3-4 artikel yang memiliki topik atau maksud yang sama, lalu simpulkan dengan gaya dan bahasa sendiri sehingga hasilnya akan lebih menarik,
4. Untuk gambar silahkan capture sendiri (tentunya harus praktek dulu),

5. Jangan pernah meninggalkan satu paragraph pun yang masih copas agar tidak ketahuan
sang pemilik blog aslinya.

Saya pun tidak akan membuat blog ini "Dilarang Klik Kanan" atau "tidak bisa dicopas", sungguh egoisnya saya apabila saya melakukan hal tersebut, hmmm... :?


Yasudahlah, di bulan puasa yang penuh barokah dan pahala ini saya jadikan pengalaman saja untuk saya sendiri agar bisa belajar sabar dan lebih sabar lagi. Saya hanya mau pesan untuk beberapa dan segelintir orang yang masih dengan "sistem kebut tayangnya" untuk lebih KREATIF lagi.


Lagian, seperti judulnya Mencantumkan Sumber/Referensi, Tidak Akan Membuat "Anda" Terlihat Bodoh !, malah kita akan terlihat santun, rendah diri dan JUJUR dengan para pengunjung. Dengan tidak Mencantumkan Sumber/Referensi dari hasil artikel copas malah kita terlihat sok pintar dan akhirnya apa, blog kita memang akan sungguh-sungguh ditinggalkan.


Tulisan ini bukan untuk menyinggung siapa-siapa, ini adalah pembelajaran untuk semua termasuk saya. Semoga tulisan ini bisa dianggap sebagai MOTIVASI kita masing-masing, amin. Salam...

Cara Menambah Footer 3 Kolom di Blogspot

Kebetulan sekali malam ini sebenarnya saya mau posting tentang bagaimana Cara Menambah Footer 3 Kolom di Blogspot, nah pas cek komentar di salah satu artikel saya ada sahabat blogger (Ndolem: http://www.ndolem.com/) request tentang Footer tadi.



Menambah footer
entah itu 2 kolom, 3 kolom atau 4 kolom di bawah postingan sudah menjadi hal yang umum, jika berbicara tutorial sudah banyak juga yang buat, tetapi terkadang beberapa kode yang disebutkan tidak dapat ditemukan (karena templates tidak support) atau bisa jadi ada perbedaan kode, sehingga mengurungkan niat untuk membuat footernya.


Nah, anggap saja ini adalah Alternatifnya (apabila teman-teman ingin membuat footer tapi harus mengganti kode tapi kode yang dimaksud tidak ada) karena kita tidak perlu menghapus tetapi hanya menambahkan saja.


Fungsi:


Footer (3 kolom) digunakan untuk membuat space di dalam blog agak luas di bagian bawah sehingga tidak membuat sisi sidebar penuh (karena tambahan widget ini dan itu).


Kebetulan templates blog saya yang sekarang ini sebelumnya tidak memiliki footer sehingga saya harus menambahnya secara manual, dan caranya seperti di bawah ini.


Ok, buat teman-teman yang ingin Menambah Footer 3 Kolom di Blog nya, silahkan ikuti langkah-langkah di bawah ini:


1. Login akun blogspot,

2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,

3. Lalu cari kode berikut: ]]></b:skin>


4. Tambahkan kode di bawah ini persis berada di atas kode tadi:

/* bottom
---------------------------- */ #bottom {
width: 900px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background: transparan;
padding: 15px 0 15px 0;
}
#bottom h2 {
text-align:center;
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#AEB404;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #AEB404;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: transparan;
}

#left-bottom { /* kode kolom footer kiri */
width: 32%;
float: left;
padding-left:10px;
}
#center-bottom { /* kode kolom footer tengah */
width: 32%;
float: left;
padding-left:10px;
}
#right-bottom { /* kode kolom footer kanan */
width: 32%;
float: left;
padding: 0 5px 0 10px;
}

5. Teruskan dengan mencari kode berikut:

<div id='footer-wrapper'>

atau

<div id='footer'>

(biasanya ada di atas kode </body>)

6. Dan tambahkan kode di bawah ini persis berada di atas kode tadi:

<div id='bottom'> <b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>

7. Jika sudah klik Save Templates (lihat perubahan sementara pada bagian Page Element).


Note:


Harap diperhatikan kode-kode yang saya beri warna di atas:


a. Untuk kode width: 900px; harap disesuaikan dengan lebar header blog masing-masing (kode: #header {), jika lebar header 660px, maka diganti width nya 660 px,


b. Untuk merubah warna judul Footer harap ganti pada kode #bottom h2 { ..... color:#AEB404;
[kode warna bisa dilihat di menu tab di atas]

c. Lalu perhatikan kode di bawah ini:


#left-bottom { /* kode kolom footer kiri */
width: 32%;
float: left;
padding-left:10px;
}
#center-bottom { /* kode kolom footer tengah */
width: 32%;
float: left;
padding-left:10px;
}
#right-bottom { /* kode kolom footer kanan */
width: 32%;
float: left;
padding: 0 5px 0 10px;
}

Harap disesuaikan width nya untuk memberi jarak pada masing-masing element, misal total width-nya 100%, maka kita beri jarak masing-masing dengan total 4%, maka sisanya adalah 96%, lalu kita bagi sehingga masing-masing element mendapat luas 32%.


Nah, seperti itulah teman-teman bagaiman Cara Menambah Footer 3 Kolom di Blogspot, semoga cara ini bisa bermanfaat dan diterapkan di blog masing-masing, selamat mencoba. Salam...

Membuat Judul Sidebar Widget Rata Tengah (Center Positions)

Met sore teman-teman semua, berhubung internet di rumah lagi hancur (lemot kayak siput, quota habis), akhirnya update artikel nya di warnet sambil menunggu waktunya buka puasa, mayan juga ambil PaHe 3 jam 5 ribu, hehehe :D

Ok, hari ini saya ingin share kepada teman-teman semua tentang bagaimana cara Membuat Judul Sidebar Widget Rata Tengah (Center Positions), menarik bukan?


Begini, terkadang untuk sebagian besar templates bawaan default untuk semua posisi Judul berada di Rata Kiri (Left Positions) termasuk templates saya yang sekarang ini, tetapi kalau bagi mata saya (khusus untuk judul sidebar widget) rata kiri tidak enak untuk dilihat (note: berbeda orang beda pendapat).

Nah, karena penampilan blog selalu menjadi perhatian saya (blog terlihat klop secara keseluruhan) agar bisa juga dinikmati dengan nyaman khususnya oleh teman-teman dan umumnya untuk para pengunjung, maka saya pun mengambil inisiatif mencari cara bagaimana agar Judul Sidebar Widget tersebut berada di rata tengah.


lihat pict



Bagi teman-teman semua yang ingin membuat Judul Sidebarnya berada di Rata Tengah, silahkan ikuti langkah-langkah di bawah ini:


1. Login akun blogspot,

2. Klik design/rancangan >> Edit HTML >> klik Expand Templates Widget,

3. Lalu cari kode berikut:
.sidebar h2 {


Kode tambahan (untuk membuat menjadi rata tengah): text-align:center;


Ket:


- Apabila diurutan kode tersebut sudah terdapat kode:
text-align:left; maka yang hanya diubah adalah tulisan 'left' nya diganti menjadi 'center',

- Apabila kode:
text-align:left; nya tidak ada maka tambahkan kode: text-align:center; berada setelah kode: .sidebar h2 {

4. Jika sudah, sekarang bisa klik Save Templates.


Note:


Cara ini juga bisa digunakan untuk Judul Widget pada Footer, langkah-langkahnya juga sama seperti di atas, teman-teman hanya perlu mencari kode: #footer { atau id.footer atau #bottom h2 { (disesuaikan saja, tiap templates berbeda). Lalu bisa juga untuk Judul Postingan, silahkan cari kode .post h3 {


Seperti itulah cara Membuat Judul Sidebar Widget Rata Tengah (Center Positions), semoga bisa bermanfaat dan selamat mencoba. Salam...

Selasa, 31 Agustus 2010

Cara Membuat Scroll Pada Komentar Versi 2

Sambil menunggu waktu buka puasa saya ingin share lagi kepada teman-teman semua tentang bagaimana Cara Membuat Scroll Pada Komentar Versi 2. Jika sebelumnya saya juga sudah membuat artikel tentang scroll komentar versi 1 maka ini adalah versi 2 nya.

Beda versi tentu saja akan beda tampilan, jika yang pertama form untuk mengisi komentarnya ikut masuk ke dalam scrollnya, sedangkan yang versi 2 ini form untuk mengisi komentarnya terpisah dengan daftar komentarnya.

lihat pict


Ok, buat teman-teman yang ingin membuatnya silahkan ikuti langkah-langkah di bawah ini:


1. Login akun blogspot,

2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,

3. Cari kode (harap disesuaikan saja kodenya, karena tiap templates terkadang berbeda):

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

4. Lalu tambahkan kode ini persis di bawah kode tadi:

/* ========================= Start of new code */
height:400px;
overflow:auto;
border:1px solid grey;
/* ========================= End of new code */

5. Jika sudah, klik Save Templates.


Ket:
Untuk merubah tinggi kolom scrollnya silahkan ubah height:400px;


Seperti itulah Cara Membuat Scroll Pada Komentar Versi 2, semoga bisa bermanfaat dan selamat mencoba. Salam...

Menu Stats (Statistic Overview), Saat Ini Sudah Ada di Dashboard Default Blogger

Beberapa perubahan telah banyak dilakukan oleh pihak Blogger (Blogspot) untuk memanjakan para penggunanya, kabar baiknya saat ini Menu Stats sudah bisa kita akses tanpa melalui blogger in draft (http://draft.blogger.com/) lagi :)

lihat pict



Ulasan lengkap tentang Menu Stats ini sudah saya ulas di artikel saya kemarin yaitu Manfaatkan Menu Stats Blogger in Draft Untuk Melihat Perkembangan Statistik Blog, jika teman-teman belum ada yang membacanya, saya sarankan untuk membacanya lagi.


Sedikit ulasan dari saya tentang Menu Stats:


1. Ini adalah menu bawaan dari blogger, sehingga hasil yang ditampilkan lebih akurat,

2. Overview statistik bisa dilihat berdasarkan Overview blog itu sendiri, berdasarkan Post, Traffic Sources (sumber traffic) dan Audience (asal pengunjung),

3. Lalu, statistik blog juga bisa dilihat menurut Now (hari ini/sekarang), Last Day (kemarin), Last Week (minggu kemarin), Last Month (bulan kemarin) dan All Time (setiap waktu).


Selain menu Stats ada juga menu Monetize yang juga telah bisa diakses tanpa harus melalui blogger in draft.


Semoga kedepannya blogger (Blogspot) bisa lebih baik lagi dalam memanjakan penggunanya dengan beragam fasilitasnya, agar kita (blogger pengguna flatform blogspot) bisa nge-Blog dengan maksimal. :) Salam...

Minggu, 29 Agustus 2010

Cara Membuat Navigasi Nomor Halaman [Page Number Navigation] - Alternatif

Sebenarnya tutorial seperti ini sudah bejibun bisa teman-teman temukan di Google, termasuk saya sendiri sudah mencobanya dengan keyword: page number atau membuat nomor halaman, hasilnya wow sampai ratusan ribu blog (termasuk punya saya ini, apabila nanti terindeks Google, ngarep.com, hahaha).

Saya juga sudah mencoba beberapa script yang ada di sana (karena saya juga ingin memasangnya di blog ini), tetapi hasilnya Trial n No Respon artinya GA BISA, wkwkw, karena faktor Templates, padahal sudah
beberapa templates sudah saya gunakan :(

Makanya sering saya sampaikan di beberapa artikel terdahulu bahwa: Harap disesuaikan saja kodenya, karena tidak semua templates sama, malah terkadang kode yang dimaksud ga ketemu alias ga ada. :D

Ok, buat teman-teman yang mau Membuat Navigasi Nomor Halaman [Page Number Navigation], ini saya ada Alternatif lainnya (insyallah bisa digunakan di templates teman-teman):

Ket: Untuk hasilnya ada perbedaan dengan Page Number yang lain, tentu saja, kan ini alternatif :P Demonya bisa langsung dilihat di dalam blog ini, atau...

lihat pict



1. Login ke akun Blogspot,

2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,

3. Lalu cari kode berikut (Ctrl F): <b:include name='nextprev'/>

[Harap disesuaikan saja kodenya, karena tidak semua templates sama],


4. Gantikan kode tersebut dengan kode di bawah ini:

<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>

<div align="center" style="margin:5px;">
<form action="#" name="pager20">
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form>
</div>
<script type="text/javascript">

var blogID = "12345678910";
var home_page = "http://cantik-2013.blogspot.com/";
var pager_max_main = 1;

var pager_first_text = "First";
var pager_last_text = "Last";
var pager_prev_text = "Prev";
var pager_next_text = "Next";

</script>
<script src="https://sites.google.com/site/anggasonaanotherbestblog/javascript/page_numbering_v2.js"
type="text/javascript"></script>
</b:if>

Note:

a. Harap di ubah var blog ID nya dengan ID blog teman-teman,
b. Ganti var home_page dengan alamat URL blog teman-teman,
c. var pager_max_main = 1 ini adalah kode untuk menampilkan seberapa banyak artikel dalam 1 halaman, bisa diganti dengan 2, 3, 5 terserah teman-teman.

5. Jika sudah dikerjakan dengan teliti, maka sekarang klik Save Templates.

Seperti itulah Cara Membuat Navigasi Nomor Halaman [Page Number Navigation] - Alternatif, semoga bisa terpasang dengan baik di blog teman-teman semua, selamat mencoba. Salam.

Cara Membuat Form Komentar Klasik di Blogspot

Bagian kotak komentar merupakan salah satu bagian penting dalam sebuah blog yang harus diperhatikan, karena di kotak komentar inilah akan terjadi sebuah dialog antara admin dengan para pengunjung (komentator), bisa tanya jawab, bisa juga berdebat di sana dan lain sebagainya.

Menurut perhatian saya, bagian form komentar di blogspot inilah yang sering di edit (ditambah ini dan itu, di edit sana dan sini), karena memang jika dibandingkan dengan blog flatform wordpress akan terlihat j
auh sekali perbedaannya, makanya harus di edit dulu agar hasilnya bisa maksimal.

Beberapa hal yang biasa di edit pada form komentar:



Nah kali ini saya ingin share lagi kepada teman-teman yang masih seputar from komentar yaitu menambahkan link untuk Form Komentar Klasik, ini adalah sebagai pilihan ketika teman-teman ingin berkomentar, jadi bisa komentar di form komentar yang baru ataupun di form klasik sama saja :)

lihat pict



hasil dari form komentar klasik



Ok, bagi teman-teman yang mau membuatnya silahkan ikuti langkah-langkah di bawah ini:


1. Login ke akun blogspot,

2. Klik Design/Rancangan >> Edit HTML >> Expand Templates Widget,

3. Lalu cari kode berikut (harap disesuaikan saja karena terkadang tiap templates berbeda):

<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>

4. Selanjutnya tambahkan kode di bawah ini persis ada di bawah kode di atas:

[ <a expr:href='&quot; http://www.blogger.com/comment.g?blogID=12345678910&amp;amp;postID=&quot; +data:post.id+ &quot;&amp;isPopup=true&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;' rel='nofollow'><b>Form Komentar Klasik</b></a> ]

5. Jika sudah sekarang klik Save Templates dan lihat hasilnya.


Note: Untuk Id blog harap diganti dengan ID blog teman-teman masing-masing (ganti tulisan yang berwarna merah).


Seperti itulah Cara Membuat Form Komentar Klasik di Blogspot, semoga bisa bermanfaat dan selamat mencoba, salam.


Sabtu, 28 Agustus 2010

Membuat Back To Top Dengan Smoothscroll jQuery

Back To Top merupakan sebuah aplikasi tambahan (widget/plugin) untuk ditempatkan di dalam sebuah blog dan sepertinya saat ini memang sudah tidak asing lagi di telinga kita dan mungkin saja kita sendiri sudah sering menjumpai widget Back To Top ini.



[image src: deconstructioncode.blogspot.com]

Kali ini saya ingin share kepada teman-teman semua tentang bagaimana Membuat Back To Top Dengan Smoothscroll jQuery, sedikit berbeda memang dengan cara memuat Back To Top yang biasanya kita jumpai (tanpa edit HTML).

Tapi ini kita harus sedikit mengutak atik templates namun hasilnya bisa saya katakan sedikit lebih baik, karena ini adalah Smoothscroll jQuery, ketika kita klik tulisan Back To Top (silahkan di coba di dalam blog ini) maka dia akan perlahan-lahan naik ke atas dengan smooth (lembut dan santai).


Fungsi:


Memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tulisan "Back To Top".


Buat teman-teman yang ingin membuatnya silahkan ikuti langkah-langkah di bawah ini:


1. Login akun blogspot,

2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,

3. Cari kode berikut: </head> lalu copy kan script jQuery di bawah ini persis berada di atas kode tadi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

4. Lalu lanjutkan dengan menaruh kode javascript di bawah ini persis di bawah script jQuery tadi:

<!-- Back To Top -->
<script src='https://sites.google.com/site/anggasonaanotherbestblog/javascript/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
<!-- End Back To Top -->

5. Terus cari kode <body> dan gantikan dengan <body id='top'>


6. Lanjutkan dengan mencari kode ]]></b:skin> dan masukkan kode CSS di bawah ini di atas kode ]]></b:skin>


#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}

7. Terus cari kode </body> dan masukkan kode HTML di bawah ini persis ada di atas kode </body>


<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

8. Jika sudah dikerjakan dengan benar, maka klik Save Templates.


Note:


1. Apabila sudah ada Script jquery di dalam blog maka script jQuery di atas tidak usah di masukkan (biar tidak double), lanjutkan saja dengan langkah selanjutnya,

2. Untuk merubah warna, posisi dan tulisan cek di di bagian tulisan yang saya beri warna HIJAU.


Referensi:


- Deconstructioncode [http://deconstructioncode.blogspot.com/2009/04/back-to-top-dengan-smoothscroll-jquery.html]
- David Walsh Blog [http://davidwalsh.name/jquery-top-link]
- Riky Rizkiyana [http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-back-to-top-menggunakan.html]

Seperti itulah
Cara Membuat Back To Top Dengan Smoothscroll jQuery, semoga bisa teman-teman coba di blognya dan bisa bermanfaat. Salam.

Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog

Menampilkan Artikel Terkait atau Related Post sekarang sudah menjadi hal yang umum ada di setiap Blog, sepertinya keberadaan Artikel Terkait ini sudah tidak bisa dipisahkan lagi dengan Blog.

Karena dengan salah satu cara inilah Page View blog akan meningkat (dampaknya akan kepada Alexa Ranking) lalu dengan cara ini pula (read: Artikel Terkait) para pengunjung Blog akan bisa menemu
kan artikel lainya yang masih dalam 1 kategori atau label.

Jika sebelumnya saya juga telah
membuat artikel tentang Artikel Terkait (baca lagi, Artikel Terkait versi 1 dan Versi 2), maka pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog.

Sidebar blog merupakan salah satu tempat yang saya pikir sangat strategis apabila dipasan
g dengan Artikel Terkait ini karena akan terlihat terlebih dahulu ketimbang ditaruh di bawah postingan (tetapi dua cara itu sama baiknya, selera).

lihat pict



Ok, bagi teman-teman yang mau membuat Artikel Terkait di Sidebar Blog, silahkan ikuti langkah-langkah di bawah ini:


1. Login ke akun blogspot,

2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,

3. Cari kode </head> dan copy kode di bawah ini lalu pastekan persis di atas kode tadi:

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>


4. Lanjutkan dengan mencari kode berikut:


<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<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>

5. Ganti kode tersebut dengan kode di bawah ini:

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<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:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Ket: Sebelum di save kode max-results=10 (ini adalah kode untuk menampilkan berapa banyak artikel yang akan ditampilkan perlabel), bisa teman-teman ubah semisal hanya 5 atau 8.


6. Save Templates (belum selesai...)


7. Selanjutnya, masuk ke Page Element >> Add a Gadget >> HTML/JavaScript >> copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript:

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

8. Jika sudah klik Save dan lihat semua perubahannya.


Seperti itulah Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog, semoga ini bisa bermanfaat dan selamat mencoba. Salam

Jumat, 27 Agustus 2010

Sembunyikan Widget [Sidebar/Footer] Solusi Mempercepat Loading di Halaman Tertentu

Tentunya kita semua tahu bahwa salah satu faktor penting dalam Nge-blog adalah Loading Page. Makanya pada hari ini saya ingin share tentang Sembunyikan Widget [Sidebar/Footer] Solusi Mempercepat Loading di Halaman Tertentu.

Sebelum melangkah ke bahasan selanjutnya, di sini saya akan bagi ke
dalam 2 kategori Loading Page, yang pertama Loading Halaman Home Page dan Loading Halaman Posting (Post Page).

1. Home Page:

Pada halaman Home Page biasanya akan terisi oleh beberapa postingan
dengan beberapa widget di sidebar ataupun footer dan umumnya di halaman Home Page ini semuanya akan ditampilkan.

2. Post Page:

Pada halaman ini akan terdapat 1 artikel (read full) dan tetap akan
dilengkapi oleh beberapa widget di sidebar/footer.

Masalahnya tidak jarang saya menemukan pada halaman Post Page ini
tampilannya akan sama dengan Home Page, artinya semua widget tetap ditampilkan baik itu widget buku tamu, facebook, follower dan lain sebagainya dengan posisi baik di sidebar ataupun footer.

Fakta:


1. Beberapa widget (contohnya seperti di atas) dibutuhkan waktu yang cukup lama untuk loading, apalagi widget tersebut telah digunakan oleh banyak pengguna,
2. Search engine misal Google hanya memiliki waktu 0, 0003 sekian detik untuk mengindeks semua halaman posting ketika ada pengunjung yang mengetikkan keyword untuk mencari artikel,
3. Halaman posting adalah halaman penting (artikel yang berisi ilmu).

Ilustrasi:


Ketika para pengunjung datang dari search engine (Google / Yahoo)dan mengetikkan suatu keyword lalu menemukan artikelnya maka dia akan di bawa ke Halaman Postingan 'BUKAN' halaman Home Page.

Nah, bisa kita tarik kesimpulan dari ilustrasi tersebut, ketika ada
pengunjung dari search engine lalu menuju ke halaman posting blog kita di mana dia harus menunggu lama hanya untuk membuka 1 halaman posting yang ingin dia baca tetapi lamanya setengah mati (karena blog harus nge-Load semua tampilan baik itu widget dan lain sebagainya).

Satu kalimat yang bisa saya sampaikan: Close that page and change
the one with another page !!! :)

Nah, sungguh disayangkan bukan apabila mereka tidak jadi membaca
artikel lalu langsung CLOSE PAGE hanya karena harus menunggu lama loading page nya?

Ok, saran saya di sini khusus pada Halaman Post Page tampilkanlah beberapa widget saja yang dianggap penting (apabila tidak mau menghapusnya), caranya dengan Sembunyikan Widget:


1. Pilih dulu widget-widget mana saja yang akan di tampilkan di halaman yang dirasa penting ditampilkan di Halaman Post Page, misal cukup Link Sahabat, Follower dan Buku Tamu saja.

2. Sembunyikan widget tersebut agar blog tidak perlu nge-load widget yang lainnya dengan menambahkan kode seperti di bawah ini:


Login Blogspot >> Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget >> lalu cari kata yang sesuai dengan judul widget yang ada di sidebar atau footer, misal Buku Tamu:


Tambahkan kode yang berwarna merah saja >>


- Hanya tampil di halaman Home Page:

<b:widget id='HTML1' locked='false' title='Buku Tamu' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>

<b:include name='quickedit'/>
</b:includable>

- Hanya tampil di halaman Post Page:

<b:widget id='HTML1' locked='false' title='Buku Tamu' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>

<b:include name='quickedit'/>
</b:includable>


Untuk tampil di halaman keduanya cukup defaut saja, tidak usah ditambahkan kode.

3. Silahkan disesuaikan saja dengan masing-masing widget yang ada diblog teman-teman, jika sudah klik save templates dan lihat perubahannya ketika teman-teman membuka halaman Home Page dengan halaman Post Page.


Blog memang milik kita masing-masing (idealismenya adalah terserah kita mau diapakan), tapi saya fikir yang menikmati bukan kita saja sebagai owner tetapi banyak orang lain
dari berbagai belahan dunia, mereka butuh kenyamanan ketika berkunjung, salah satunya adalah Loading Page yang sampai sekarang ini masih disepelekan oleh sebagian banyak blogger.

Semoga informasi ini bisa bermanfaat untuk teman-teman semuanya,
salam.