Blog Tip dan Trik

Friday, December 4, 2009

Membuat Wadah (Container) dengan Background

Posted by dav on 8:37 AM with

Sesuai permintaan pembaca setia Blogger TuneUp mengenai pembuatan wadah atau container dengan berlatar belakang gambar seperti kotak Blogroll dibawah ini. Maka pada artikel kali ini mari kita bongkar "behind the scene of container image background" (lebay mode on) hehehe... Tanpa basa basi mari kita ~~kuak misteri~~ blogger hack tersebut...

Membuat Wadah (Container) dengan Background

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:

#wadah {padding: 5px;overflow: auto;width: 96%;height: 250px;margin-bottom: 10px;background-attachment: absolute;background:#fff url(http://lh6.ggpht.com/_xcD4JK_dIjU/Sofer2ZD7pI/AAAAAAAADTo/Pm1KhugFWwE/d/maria_ozawa.gif) no-repeat right top;border: 1px solid rgb(204, 204, 204);}
#wadah ul{list-style-type: none;margin: 0px;padding: 2px;}
#wadah ul li{display:block;line-height:2em;border-bottom:1px dotted #ccc;background: url(http://lh5.ggpht.com/_xcD4JK_dIjU/SoferzemgGI/AAAAAAAADTk/AHLpvar3C5Q/d/indonesia.png) no-repeat 0px 4px;padding: 0 1px 0 19px;}
#wadah li {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 11px;}
#wadah li a:link{text-decoration:none;color:#00F;}
#wadah li a:visited{text-decoration:none;color:#000;}
#wadah li a:hover{text-decoration:underline;}

Langkah 5
Simpan Template dan lanjutkan membaca
Langkah 6
Masuk ke "Tata Letak - Elemen Laman"
Langkah 7
Tambahkan sebuah gadget dengan tipe HTML/JavaScript
Langkah 8
Masukan kode dibawah ini pada konten/isi:

<div id="wadah">
<ul>
<li><a href="http://modification-blog.blogspot.com/" target="_blank">Blogger TuneUp</a></li>
<li><a href="URL Link Anda" target="">Nama Link Anda</a></li>
...dan seterusnya
</ul>
</div>

Langkah 9
Simpan Gadget
Langkah 10
Preview Blog anda

Keterangan:

Untuk mengubah background silahkan ubah link http://.../maria_ozawa.gif pada kode CSS yang ada pada langkah 4
Ubah nilai 250px untuk menentukan tinggi container (lihat kode CSS langkah 4)
Untuk mengubah bentuk bullet silahkan ganti link http://.../indonesia.png (lihak kode CSS langkah 4)
Tambah jumlah List pada ...seterusnya dengan kode yang terdapat diantara kode <li><a href="URL Link Anda" target="">Nama Link Anda</a></li> dan ubahlah URL Link Anda dengan URL yang dituju dan Nama Link Anda adalah nama link yang dituju

Selamat mencoba dan semoga berhasil... happy blogging ... :)

Bloghack Widget

HTML Color Codes

Posted by dav on 8:03 AM with

Satu lagi tool yang disediakan oleh Blogger TuneUp untuk mengetahui kode warna HTML yang sering kita temukan di kode-kode blog. Mudah-mudahan tool ini bisa membantu para blogger untuk menemukan kode-kode warna HTML yang kadang membingungkan. Untuk menggunakannya silahkan tinggal klik pada warna yang di inginkan dan lihat kode HTML yang ditampilkan pada kotak "Kode warna yang dipilih:". Selain itu bagi para blogger yang ingin menggunakan software gratis silakan download disini, nama software untuk menemukan kode warna HTML adalah HTML Color Picker.

HTML Color Codes

Tools

Friday, November 27, 2009

Update! Artikel Terkait Versi 2.0

Posted by dav on 11:35 PM with

Mungkin diantara pembaca setia Blogger Tune-Up ada yang menggunakan fasilitas Artikel Terkait Versi 2.0? Tertanggal 27 Nopember 2009 pembuat dan pengembangan Blogger Related Posts Service melakukan update fasilitasnya dengan menggunakan kunci, hal ini dengan beberapa alasan sebagai berikut (diambil dan diterjemahkan bebas dari blog resmi BPRS):

Saya ingin membuat beberapa orang menyimpan duplikat blog dengan template yang sama.
Saya ingin mencegah pra-instal template, tidak semua pemilik blog ingin Related Posts.
Saya ingin memastikan bahwa Anda memiliki kesempatan untuk membaca Kebijakan Pemblokiran.

Jika blog anda pada bagian artikel terkait menampilkan pesan dibawah ini:

The key is not supplied. Please go to BRPS to obtain one.
If you are reading this, please relay the message to the owner of this blog.

Berarti blog anda membutuhkan kunci untuk mengaktifkan fasilitas Artikel Terkait.

Aktifkan Fasilitas Artikel Terkait

Langkah 1
Silahkan arahkan browser ke situs BPRS
Langkah 2
Masukan alamat blog anda pada kotak "Your blog address:"
Langkah 3
Klik tombol "Get Key and Installation Steps"
Langkah 4
Perhatikan kunci (key) yang diberikan dan copy
Langkah 5
Login ke Blogger
Langkah 6
Masuk ke "Tata Letak - Edit HTML" dan checklist "Expand Template Widget"
Langkah 7
Cari kode dibawah ini:

<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>

Langkah 8
Modifikasi kode pada langkah 7 dengan menambahkan kunci (warna merah) yang sudah diperoleh hingga menjadi seperti dibawah ini:

<script src='http://brps.appspot.com/brps.js?key=[kunci]' type='text/javascript'/>

Langkah 9
Simpan template dan preview blog...

Jika fasilitas ini masih juga diblok silahkan gabung di forum BPRS dan minta admin untuk membuka fasilitas ini pada blog anda. Semoga berhasil dan happy blogging... :)

Bloghack Tips Trik

Membuat Widget Artikel Terkait (Versi 4.0)

Posted by dav on 10:40 PM with

Blogger Tune-Up pernah membahas "Membuat Artikel Terkait" hingga 4 versi, yaitu Versi Klasik, Versi 1.0, Versi 2.0, dan Versi 3.0. Tetapi semuanya ditempatkan dibagian bawah artikel dan akan muncul sesuai dengan kategori pada artikel yang sedang kita buka. Sedangkan kali ini kita akan membuat artikel terkait yang ditempatkan pada sidebar, dan sidebar artikel terkait ini akan ditampilkan jika pengunjung membaca artikel saja, tidak akan tampil pada halaman utama. Sebenarnya tips trik kali ini adalah pengembangan dari artikel terkait Versi 1.0. Untuk demonya silahkan lihat pada blog ~~Program Gratisan~~.

Langkah Integrasi Widget/Gadget Artikel Terkait pada Sidebar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

</head>

Langkah 5
Masukan kode JavaScript dibawah ini diatas kode pada langkah 4:

<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>

Langkah 6
Cari kode dibawah 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 != "true"'>,</b:if>
</b:loop>
</b:if>

Langkah 7
Tambahkan kode dibawah ini:

<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>

Sehingga menjadi seperti dibawah 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 != "true"'>,</b:if>
<!-- Tambahan Kode-->
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
<!--Tambahan Kode-->
</b:loop>
</b:if>

Langkah 8
Simpan template
Langkah 9
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 10
Klik "Tambah Gadget" pada sidebar dengan tipe "HTML/JavaScript"
Langkah 11
Beri judul gadget baru (misal; Artikel Terkait) tersebut dan masukan kode dibawah ini pada konten:

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

Langkah 12
Klik "Simpan" gadget, belum selesai sampai disini...
Langkah 13
Masuk ke "Tata Letak - Edit HTML" dan "Expand Template Widget"
Langkah 14
Cari kode sesuai nama Gadget yang telah kita buat pada langkah 11, sebagai contoh pada langkah 11 adalah "Artikel Terkait", dan tambahkan kode (yang diblok) seperti dibawah ini:

<b:widget id='HTML2' locked='false' title='Artikel Terkait' 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>
</b:widget>

Langkah 15
Simpan template

Keterangan:

Perhatikan Langkah 7 pada kode max-results=10, ubah nilai 10 untuk menentukan jumlah posting yang akan ditampilkan
Hati-hati pada langkah 14, salah memasukan kode maka akan ada sidebar yang muncul pada saat artikel dibuka saja, dan tidak akan muncul pada halaman utama

Selamat mencoba, semoga berhasil... Happy blogging...:)

Bloghack Widget

Saturday, November 21, 2009

Tulisan Arab pada Blogger

Posted by dav on 10:06 AM with

Artikel ini dikhususkan bagi blogger Islam yang ingin menampilkan ayat-ayat Al-Qur'an, Hadist, atau tulisan arab lainnya didalam artikel blog-nya. Hal tersebut tidaklah sulit karena kita hanya membutuhkan sedikit tambahan kode CSS (cascading style sheet) didalam template blog kita agar tulisan arab tersebut dapat ditampilkan didalam artikel blog. Mau mencoba? Silahkan ikuti langkah dibawah ini.

Langkah integrasi kode CSS tulisan arab pada template blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diata kode pada langkah 3:

.arabic {
font-family: Traditional Arabic;
font-size: 24px;
direction:rtl;
line-height: 200% ;
font-weight: bold;
}

Langkah 5
Simpan template

Langkah dan contoh integrasi tulisan arab pada artikel blog

<div class="arabic"> بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</div>

Hasilnya:

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

<p class="arabic"> بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</p>

Hasilnya:

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

<span class="arabic"> بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span>

Hasilnya:
بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Keterangan:

Ubahlah font-size dan font-weight untuk mengatur ukuran huruf
Gunakan kode <span class="arabic"> بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span> untuk mencampurnya didalam artikel

Selamat mencoba semoga berhasil... Tinggalkan jejak pada komentar dan Happy Blogging... ;)

Bloghack Tips Trik

Monday, November 16, 2009

Membuat Widget Daftar Isi

Posted by dav on 4:25 AM with

Beberapa hari ini Blogger TuneUp standby tanpa artikel-artikel maupun-maupun trik baru, hal ini dikarenakan kesibukan di darat (dunia nyata). Berbagai upaya dilakukan untuk kembali aktif nge-blog tapi nyatanya tetap saja tidak bisa dilakukan. Dalam waktu yang begitu sempit Blogger TuneUp mencoba menyajikan tips dan trik yang sudah lama dibuat tapi baru kali ini bisa di publish. Mudah-mudahan bukan merupakan tips trik basi atau tertinggal jaman.

Tips trik kali ini akan membahas tentang "Membuat Widget Daftar Isi", sedikit berbeda dengan tips trik membuat daftar isi yang pernah dibuat sebelumnya, seperti membuat tabel daftar isi dan membuat daftar isi pada halaman artikel. Kali ini pemasangan daftar isi sangatlah sederhana, hanya cukup menambahkan kode pada gadget/widget HTML, maka dengan otomatis artikel akan disusun sesuai dengan tanggal pembuatan artikel tanpa perlu memasukan judul artikelnya satu persatu. Lebih sederhana, mudah dan otomatis. Mau mencoba???

Membuat Gadget Daftar Isi

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 3
"Tambah Gadget" baru dengan type "HTML/JavaScript"
Langkah 4
Tambahkan kode dibawah ini:

<div style="border: 1px solid #000; overflow: auto; height: 220px;">
<script style="text/javascript" src="http://URL/daftar_isi.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>

Langkah 5
Simpan Gadget

Keterangan:

border: 1px solid #000 : Ubahlah border sesuai dengan keinginan anda
height: 220px : Ubah nilai 220px untuk mengatur tinggi widget daftar isi
Jika ingin menampilkan daftar isi sesuai dengan label/kategori tertentu silahkan tambahkan kode /-/Label sehingga menjadi seperti kode dibawah ini (ganti Label dengan kategori yang ingin ditampilkan):

<script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>

Selamat mencoba semoga berhasil... Tinggalkan jejak anda dan Happy Blogging :)

Bloghack Widget

Friday, October 23, 2009

Google Ajax Custom Search Elemen untuk Blogger

Posted by dav on 3:33 AM with

Beberapa saat yang lalu, Blogger TuneUp pernah membahas tips trik blog tentang "Fasilitas AutoLoad pada Mesin Pencari Blog". Pada tips trik kali ini masih berhubungan dengan fasilitas pencarian artikel pada blog kita menggunakan Google Ajax Custom Search sebagai pengembangan dari Google Custom Search.

Google Custom Search adalah salah satu fasilitas yang disediakan oleh Google sebagai suatu mesin pencari yang dapat disesuaikan dengan keinginan para penggunanya. Sehingga Google Custom Search mampu diarahkan untuk mencari sesuatu yang lebih terarah, terperinci dan disesuaikan dengan kebutuhan pencarian tertentu. Google memberikan kebebasan kepada penggunanya untuk membuat target pencarian terarah pada situs tertentu, sesuai keyword tertentu dan atau sesuai kategori tertentu.

Ajax adalah salah satu bahasa pemrograman turunan dari JavaScript yang mampu melakukan beberapa perintah sekaligus dengan cepat, ringan dan dengan hasil akhir yang hampir mendekati maksud dan tujuan para penggunanya. Google sebagai salah satu developer JavaScript telah mengintegrasikan bahasa pemrograman Ajax pada beberapa aplikasi buatannya, salah satunya dengan mengintegrasikan Ajax dengan Google Custom Search, sehingga proses pencarian akan lebih cepat, tepat, ringan dan tidak memakan banyak tempat (space) untuk menampilkan hasil pencariannya.

Telah lama blogger mendukung Google Custom Search melalui tersedianya gadget Google Custom Search tetapi tidak menggunakan Ajax, sehigga proses pencarian bekerja lebih lama serta hasil pencarian akan ditampilkan dalam lembar yang terpisah. Hal ini membuat proses pencarian artikel blog sangat tidak nyaman bagi mereka yang tidak terbiasa menggunakan Google Custom Search.

Tapi dengan terintegrasinya Google Custom Search dengan Ajax API membuat proses pencarian artikel pada blog kita menjadi lebih cepat, tepat tanpa perlu membuka halaman baru untuk menampilkan hasil pencarian artikel pada blog kita, hal ini membuat hasil pencarian Google Custom Search merupakan bagian dari blog kita. Selain itu Google Ajax Custom Search bisa dintegrasikan dengan Google Adsense bagi mereka yang sudah bergabung dengan program penerbit Adsense. Makin lengkap saja fasilitas mesin pencari pada blog. Untuk mencobanya silahkan gunakan Google Ajax Custom Search diatas

Kode Google Ajax Custom Search tersedia pada Google Web Element dengan 3 pilihan, yaitu:

Pencarian artikel blog kita secara otomatis
Pencarian artikel blog kita dan menggunakan Adsense untuk pencarian
Menggunakan Custom Search Engine milik kita

Untuk menampilkan iklan Adsense maka kita harus memilih opsi 2 dan opsi 3. Jika kita memilih opsi yang kedua maka kita harus menyediakan ID Penerbitan Adsense kita (yang berformat pub-xxxxxxxx). Jika menggunakan opsi yang ketiga maka kita harus menyediakan Custom ID, yang bisa kita peroleh dari kode Google Custom Search.

Mengambil Kode Google Ajax Custom Search

Langkah 1
Kunjungi Google Web Element disini.
Langkah 2

Pilih opsi yang sesuai dengan keinginan kita. Jika ingin menggunakan opsi kedua siapkan terlebih dahulu ID penerbit Adsense kita, jika memilih opsi ketiga siapkan Custom Search ID kita. Opsi kedua dan ketiga hanya untuk blogger yang sudah bergabung dengan program penerbitan Google Adsense, jika anda belum mempunyai ID penerbit Adsense maka cukup menggunakan/memilih opsi kesatu.

Langkah 3

Ambil (copy) kode yang telah tersedia pada kotak dibawah kalimat "Copy and paste this snippet code into your webpage"

Pemasangan Google Ajax Custom Search Pada Blogger

Langkah 4
Login ke Blogger
Langkah 5
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 6
"Tambah Gadget" baru dengan tipe HTML/JavaScript
Langkah 7

Masukkan kode Google Ajax Custom Search yang sudah kita peroleh pada konten/isi gadget baru

Langkah 8

Atur tata letak gadget tersebut pada lokasi yang cukup lebar (rekomendasi diatas posting) hal ini agar iklan ditampilkan dalam ruangan yang cukup (khusus bagi yang menggunakan kode opsi kedua dan ketiga)

Langkah 9

Simpan gadget baru tersebut, preview blog dan tes Google Ajax Custom Search milik kita.

Keterangan:

Artikel ini bersumber pada Google Ajax Custom Search.
Untuk lebih jauh mengenai Google Ajax Custom Search silahkan kunjungi disini.

Bagaimana menarik bukan? Selamat mencoba dan semoga berhasil. Tinggalkan jejak, saran dan kritik melalui kotak komentar dibawah. Happy blogging... :)

Blog Widget

Blog Tip dan Trik

Friday, December 4, 2009

Membuat Wadah (Container) dengan Background

Membuat Wadah (Container) dengan Background

HTML Color Codes

Friday, November 27, 2009

Update! Artikel Terkait Versi 2.0

Aktifkan Fasilitas Artikel Terkait

Membuat Widget Artikel Terkait (Versi 4.0)

Langkah Integrasi Widget/Gadget Artikel Terkait pada Sidebar

Saturday, November 21, 2009

Tulisan Arab pada Blogger

Langkah integrasi kode CSS tulisan arab pada template blog

Monday, November 16, 2009

Membuat Widget Daftar Isi

Membuat Gadget Daftar Isi

Friday, October 23, 2009

Google Ajax Custom Search Elemen untuk Blogger

Mengambil Kode Google Ajax Custom Search

Pemasangan Google Ajax Custom Search Pada Blogger

Categories

Popular Posts

Blog Archive