Tutorial Blogspot

Tombol "Simpan Sebagai PDF" di Blog

2009-08-20T00:46:00.005+03:00

Biasanya dibeberapa website berbayar sudah ada fungsi tombol "save as pdf", Lalu Bagaimana cara menambahkan Tombol 'Simpan Sebagai PDF' di setiap posting diblogspot kita? Sehingga para pembaca dapat menyimpan posting anda dalam format PDF. Alat ini benar-benar akan membantu pembaca dalam menyimpan posting yang mereka sukai di sebuah blog yang dikunjungi. Saya sangat senang sekali dengan alat/widget ini, dan saya yakin pembaca pun akan senang juga karna memang sangat berguna sekali.

Caranya sangat mudah sekali, sobat hanya diperintahkan menambahkan beberapa kode ditemplate sobat.

Ini dia caranya:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►

<style>.fullpost{display:inline;}</style>

6. Setelah ketemu, Pasang kode dibawah ini persis di BAWAH kode tadi:

<script type="text/javascript">
</script>
<script src="http://roele112.googlepages.com/save-as-pdf.js" type="text/javascript">
</script>

7. Simpan template dan lihat hasilnya...

Perhatian:
Hasilnya akan ada di Bawah Judul Posting jika di letakkan diBAWAH kode ini:
<style>.fullpost{display:inline;}</style>

Jika ingin dipasang di bawah posting maka sobat harus memasang diATAS kode ini:
<div class='post-footer'>

Moga manfaat...!

Link Newer-Older Post Dengan Gambar

2009-08-14T00:34:00.006+03:00

Pasti sobat sudah tahu kan yang saya maksud dengan Older Post dan Newer Post Link? Nah pada postingan ini saya ingin membahas tentang mengubah Older Post dan Newer Post Link Dengan ikon atau gambar di Blogger. Trik ini sangat bagus untuk membuat blog Anda terlihat sangat indah dan bagus lagi elegan. Trik ini pasti membuat blog Anda terlihat lebih indah dari sebelumnya jika anda menggunakan ikon pada link Older Post dan Newer Post atau Post Terbaru dan Post Terlama.
Biasanya link ini menggunakan tanda panah, sekarang akan diganti dengan gambar yang pasti cool. Untuk masalah iconnya silahkan sobat search aja di mbah google hehe..

Ini dia triknya:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Kemudian cari kode yang berwarna merah dibawah ini (ada 3) dan ganti dengan kode yang berwarna hitam:

1.<data:newerPageTitle/>

Ganti dengan:
<img src='http://roele112.googlepages.com/newer.png'/>

2.<data:olderPageTitle/>

Ganti dengan:
<img src='http://roele112.googlepages.com/older.png'/>

3.<data:homeMsg/>

Ganti dengan:
<img src='http://roele112.googlepages.com/home.png'/>

6. Klik Preview, jika OK langsung Simpan Template dan lihat hasil akhir...

Moga manfaat!

Kunjungi juga Blog Ini

Page Navigation for Blogger

2009-08-11T01:52:00.006+03:00

Sobat tahu apa itu Navigasi Halaman? Saya yakin sudah tahu, dalam bahasa Inggris sering disebut "Page Navigation". Nah, Navigasi Halaman sekarang sudah tersedia untuk blogger. Widget ini juga memungkinkan sobat melihat nomor menu di bawah posting untuk mengunjungi posting terbaru atau posting sebelumnya. Biasanya widget seperti ini hanya disediakan dalam blog wordpress atau "host blogs".Tetapi sekarang hack-nya telah tersedia di blogger, dengan bantuan Mohammad Rias, Thank for the hack.

Mari kita lihat bagaimana menambahkan Navigasi Halaman atau Page Navigation Menu di Blogger:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Page Element

Cari add page element yang paling dekat dengan element posting.

3. Pilih menu HTML/Javascript, kemudian paste kode berikut ini:

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</style>


<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://arawna.blogspot.com">Grab this Widget</a></div>

4. Setelah itu simpan, dan pindahkan element tadi tepat dibawah elemen posting,

5. Klik tombol SAVE yang berwarna orange disebelah kanan atas.

6. Dan lihat hasilnya, kurang lebih seperti ini:

Moga manfaat!

Salam Blogger, Kunjungi juga Blog ini

Cara Buat Tulisan Berbayang (Shadow)

2009-08-08T00:11:00.005+03:00

Pada tanggal 01 Agustus 2009 yang lalu sobat Sbagyo menanyakan bagaimana cara buat title post double (berbayang maksudnya mungkin) lewat kotak komentar. Sekarang saya ingin bahas caranya disini.
Pasti sobat sudah tahu kan maksud saya tulisan berbayang?, ya simpelnya saya ingin bahas cara buat tulisan/teks berbayang (shadow). Trik ini hanya menggunakan kode CSS dan sedikit HTML, disini saya tidak hanya membahas pada title post saja, saya juga akan perluas dengan membuatnya di postingan juga. Bagaimana sudah siap memulai? mualai apa ya? hehe...

ini dia caranya:

► Membuat teks berbayang pada setiap posting:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. TIDAK PERLU mencentang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►

]]</b:skin>

6. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

.tshadow {
color: #000;
background: transparant;
height: 35px;
width: auto;
padding-left: 20px;
line-height: 32px;
font-size: 1.8em;
margin-bottom: 5px;
margin-left: 5px;
text-shadow: 2px 2px 3px #000; /* IMPORTANT */
}

7. Simpan Template

8. Setelah itu kode untuk posting. Sobat hanya menambah kode dibawah ini untuk membuat tulisan berbayang:

<div class="tshadow">Tulisan Yang Ingin Dibuat Berbayang</div>

> Silahkan lihat hasilnya.
___________________________________________

► Membuat judul posting/title post berbayang:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. TIDAK PERLU mencentang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►

.post h3

6. Setelah ketemu, tambah kode dibawah ini persis di DALAM tag kode tadi:

text-shadow: 2px 2px 3px #333; /* JANGAN DIRUBAH */

7. Simpan Template selesai dan lihat hasilnya...

PENTING:

Kode ini/Trik ini hanya support dan berfungsi pada beberapa browser.

Lebih lengkap lihat daftar berikut ini:

Moga manfaat!

Jangan lupa baca juga disini

Mengaktifkan Backlink di Blogspot

2009-08-07T21:14:00.008+03:00

Sebelumnya apakah sobat tahu apa itu backlink? simpelnya backlink adalah "link balik" dalam artian me-link balik postingan suatu blog ke blog kita, misalnya sobat menemukan artikel menarik di blog ini, lalu sobat juga menulis posting yang berkaitan tentang artikel yang menarik tadi, lalu sobat mem-backlink postingan tersebut ke postingan yang sobat buat tadi, itulah yang dimaksud dengan backlink. Bagaimana sudah mengerti bukan? saya yakin sudah hehe. Link balik ini biasanya bisa kita temukan di blog yang memakai layanan wordpress.

Lalu apakah bisa memasang link balik di blogspot? jawabannya bisa sekali. Dan kebanyakan dari para pemakai layanan blogspot jarang mengetahui fasilitas ini. Nah, bagaimana caranya? ini dia:

1. Sign In ke blog anda.

2. Tuju tab Settings/Pengaturan Lalu tab ► Comments/Komentar

3. Setelah itu scroll sampai kebawah dan temukan kata "Backlink" atau "Link Balik"
Nah, dalam menu ini ada dua pilihan:
1) Show
2) Hide.

Sobat harus mengaktifkan backlink dengan mengklik atau menceklis pilihan Show.

Jelasnya lihat gambar dibawah ini: (klik untuk perbesar)

4. Setelah menceklis, lalu sobat klik "Save Setting" atau "Simpan Pengaturan".

5. Selesai dan lihat hasilnya.

Bagaimana mudah bukan?

Moga manfaat!

Baca juga disini

Membuat Codeview Pada Postingan

2009-08-07T00:50:00.004+03:00

Pernah mendengar istilah codeview? ya saya yakin sebagian teman-teman sudah mendengar istilah codeview, menurut saya codeview adalah satu fasilitas untuk membuat background datar untuk code-code yang kita posting pada blog kita, simpelnya codeview dipakai untuk meruangkan atau menonjolkan kode-kode html ataupun kode css, saya sendiri memakai codeview berwarna biru muda. Nah sekarang saya ingin mengajak sobat untuk membuat codeview di blogger, bagaimana caranya?

Ikuti langkah berikut ini:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ► ]]</b:skin>

5. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

.codeview {
color: #fff; 
padding: 15px; display: block; margin: 10px 0 10px 0;
background: #3c3a41 url(http://roele112.googlepages.com/blue-grid-bg.png); 
overflow: auto;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

7. Simpan template

8. Selanjutnya, jika sobat ingin menyisipkan kode-kode dipostingan sobat maka sobat harus menambah kode dibawah ini:

<div class="codeview">
tulisan kode
</div>

9. Simpan posting anda dan lihat hasilnya

Moga manfa'at!

Jangan lupa baca juga disini

Spoiler Gaya KASKUS

2009-08-06T00:45:00.005+03:00

Pada artikel sebelumnya saya telah membahas tentang cara membuat spoiler disini. Dan tentu saja disertakan dengan apa itu spoiler dan maksud serta manfaat menggunakannya. Biasanya beberapa temen blogger suka sekali memodifikasi apapun yang berhubungan dengan aksesoris blognya. Nah, sekarang mari kita bahas tentang cara membuat spoiler mirip dengan gaya kaskus. Sobat ingin langsung memasangnya di blog sobat? ini dia caranya:

1. Pasang kode berikut dimana spoiler ingin sobat pasang. Misalnya di postingan sobat yang banyak berisi gambar.

Ini dia kodenya:

<div style="margin:5px; margin-top:3px">
<div class="smallfont" style="margin-bottom:2px"><b>Spoiler</b> untuk <i>gambar</i>: <input type="button" value="Show" style="width:auto;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 3px; border: 1px inset;">
<div style="display: none;">
<img src="ALAMAT_GAMBAR_ANDA" width="none" height="none" alt="spoiler gambar">
</div>
</div>
</div>

Demo:

Spoiler untuk gambar:

KETERANGAN
sobat bisa memodifikasi spoiler tersebut dengan mengubah font, warna, background dan lainya. Gunakan keahlian sobat agar spoilernya tampak menarik hehe. Selesai.

Selamat Ngeblog!

Kunjungi blog saya yang lain disini

Pasang Social Bookmark di Blog

2009-08-04T19:37:00.005+03:00

Apa itu social bookmark? Social bookmark adalah metode untuk pengguna Internet untuk dapat menyimpan, mengorganisir, mencari, dan mengelola bookmark halaman web di Internet dengan bantuan meta data, biasanya dalam bentuk tag yang secara bersama-sama dan atau kolaborasi menjadi folksonomy. Folksonomy disebut juga tag sosial, "proses oleh banyak pengguna yang menambahkan meta data dalam bentuk kata kunci untuk berbagai konten" (wiki). Sekarang sudah tahu kan apa itu social bookmark? Gampangnya sobat bisa men-share artikel blog sobat dalam layanan bookmark ini, bahkan juga para pengunjung blog sobat.

Contoh layanan bookmark seperti: technorati, del.icio.us, digg, google bookmark dan lainya. Apakah sobat ingin memasangnya? Kalau ya ikuti langkah berikut ini:

# Langkah pertama sobat bisa langsung mendaftar layanan social bookmark di beberapa website dibawah ini:

Daftar Layanan Social Bookmark, semua GRATIS tinggal pasang:

1. http://addthis.com/

2. http://www.socialmarker.com/

3. http://www.social-bookmark-script.com/

4. http://www.socialbookmarksmanager.com/

5. http://addtoany.com/

# Setelah mendaftar sobat tinggal pasang script/kode yang diberikan sesuai dengan keinginan sobat, biasanya di setiap posting paling bawah (seperti saya, sobat bisa lihat dibawah posting ini)

Untuk cara pasang social bookmark, sobat bisa ikuti langkah berikut:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Setelah itu sobat cari kode ini :

<div class='post-footer'>

6. Setelah ketemu, pasang script bookmark yang telah sobat dapatkan dari salah satu layanan bookmark diatas, tepat di ATAS kode tadi.

7. Simpan template dan lihat hasilnya...

Untuk cara yang kedua saya akan posting pada postingan selanjutnya.

Moga manfaat...!

Baca juga disini

Modifikasi Readmore Dengan Gambar

2009-08-04T11:07:00.004+03:00

Pada posting sebelumnya tentang membuat readmore saya telah bahas pada postingan disini. Nah sekarang saya masih ingin membahas tentang pasang readmore, tapi kali ini readmore dengan gambar alias backgroundnya menggunakan gambar. Mungkin sudah biasa sobat menggunakan fungsi readmore yang menggunakan teks tulisan, nah sekarang menggunakan gambar. Apakah sobat ingin mencoba memasangnya? Jika ingin silahkan lanjut baca hehe...

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini

]]</b:skin>

5. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

.read_more {
background:url(http://img412.imageshack.us/img412/8126/reedmorebgvk0.gif) no-repeat right; /* SILAHKAN SOBAT GANTI GAMBARNYA DENGAN MILIK SOBAT */
bottom:5px;
font-family:verdana;
font-size:80%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding-right:10px;
text-align:right;
white-space:nowrap;
}

7. Setelah itu cari kode berikut ini:

<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More...</a>
</span>

8. Setelah ketemu, ganti tulisan Read More... dengan kode ini:

<p class='read_more'>» Read More... </p>

9. Simpan template dan lihat hasilnya...

Moga manfaat...!

Lihat juga disini

Membuat Pullquote Pada Postingan

2009-08-03T22:52:00.004+03:00

Dalam istilah postingan kita sebagai blogger pasti tidak asing lagi mendengar kata "blockquote". Blockquote biasanya digunakan pada dasarnya untuk memblock tulisan yang kita kutip dari sumber lain. Namun tak jarang, blockquote juga di gunakan oleh sebagian besar blogger hanya untuk menonjolkan penekanan atau menarik fokus sang pembaca pada tulisan yang dianggap penting oleh penulisnya. Biasanya blockquote menggunakan sintak seperti ini: <blockquote>tulisan yang di-blockquote disini</blockquote>. Nah sekarang saya ingin mengajak sobat untuk membahas pullquote saudaranya blockquote.

Apa itu pullquote? Singkatnya pullquote hampir mirip dengan blockquote hanya terdapat perbedaan kalau pullquote biasanya di gunakan untuk menarik fokus pembaca dengan memberikan sebuah frame pada tulisan, biasanya dalam media cetak sangat jelas dan sering kita temukan. Untuk lengkapnya sobat bisa baca di Wiki. Bagaimana sobat tertarik memasang pullquote di blog sobat? Ini dia caranya:

1. Sign In ke blog anda.

2. Tuju tab Layout ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►

]]</b:skin>

6. Setelah ketemu, pasang kode dibawah ini persis di ATAS kode tadi:

.pullquote_right{ 
width: 190px;
font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0 0 0.4em 15px !important;
padding: 0.6em 5px !important;
background: none !important;
border: 2px solid #ddd;
border-width: 3px 0;
text-align: center;
float: right;
}

.pullquote_left { 
width: 190px;
font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif; 
margin: 0 15px 0.4em 0 !important; 
padding: 0.6em 5px !important; 
background: none !important; 
border: 2px solid #ddd; 
border-width: 3px 0; 
text-align: center; 
float: left; }

7. Kemudian Simpan template.

8. Langkah selanjutnya adalah memosting tulisan. Sobat harus menambahkan kode tag div jika memosting, kodenya seperti ini:

Untuk pullquote sebelah kanan:

<div class="pullquote_right">teks yang di pullquote sebelah kanan</div>

Untuk pullquote sebelah kiri:

<div class="pullquote_left">teks yang di pullquote sebelah kiri</div>

contoh formatnya seperti ini:
<div class="pullquote_right">teks yang di pullquote</div>lanjutkan isi teks atau tulisan sampai akhir

SELESAI.

Moga manfaat...!

Baca juga disini

Pasang Sesuatu Selalu di Samping Blog

2009-08-02T01:47:00.005+03:00

Banyak sekali para blogger yang selalu berusaha mempercantik tampilan template atau blognya. Berbagai macam widget dipasang dan berbagai hack dicoba. Pada kesempatan kali ini saya ingin membahas tentang cara memasang gambar selalu disamping blog. Tentu saja yang saya maksud adalah gambar yang berada disisi template. Banyak fungsi sebenarnya dari widget ini, selain sobat bisa menggunakan widget ini untuk memasang foto profil sobat, juga sobat bisa memasang segala widget misal menu posting yang direkomendasikan untuk di baca para pengunjung. Bagaimana sudah tertarik memasangnya? Ini dia langkah-langkahnya:

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ]]</b:skin>

6. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

#side_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

7. Setelah itu adalah langkah memasang gambar, pasang kode dibawah ini tepat dibawah: </head>

<div id='side_image'><a href='http://kumpulblogger.com/?refid=80103' target='_blank'>
<img border='1' src='http://roele112.googlepages.com/test.gif'/>
</a>
</div>

8. Simpan template dan lihat hasilnya.

Perhatian:

kode yang berwarna merah adalah kode yang bisa sobat ganti sesuai keinginan.

> Untuk pojok kanan bawah :

bottom:5px;
right:5px;

> untuk pojok kanan atas :

top:5px;
right:5px;

> untuk pojok kiri atas

top:5px;
left:5px;

code source: kolom tutorial blogspot.

Moga manfaat...!

Jangan lupa kunjungi blog ini

11 Website Layanan Pembuat Gambar Kartun

2009-07-31T05:57:00.003+03:00

Jika Anda tidak nyaman menggunakan foto asli untuk mewakili Anda dalam setiap profil dan avatar online, mengapa tidak membuat sebuah karakter gambar kartun Anda? Itu pasti akan menyenangkan dan unik bila dilihat orang lain. Nantinya gambar kartun sobat ini akan sobat pasang di mana saja sepeti di MyBlogLog, Blog profil, Facebook, MySpace, Friendster, dll.

Terima kasih banyak kepada layanan web gratis yang menyediakan fasilitas "cartoon me" ini. Sobat tidak perlu susah-susah untuk mengedit gambar kartun sobat semisal di PS (PhotoShop), PI (PhotoImpact) atau image editor lainnya, apalagi kalau sobat belum mahir menggunakan program-program tersebut. Dan Sobat tidak perlu membayar seorang seniman untuk ilustrasi kartun sobat. Yang perlu sobat lakukan adalah meng-upload foto, atau melakukan beberapa mix dan match.

Berikut daftar 11 website yang memungkinkan Anda untuk membuat sebuah karakter kartun Anda via online. Terimakasih buat hongkiat.com atas coll post-nya.

1. Portrait Illustration Maker

2. MeeZ.com

3. Simpsonize Me

4. Yahoo! Avatars

5. BeFunky

6. Buscar Messenger

7. Cartoon Me

8. Joystiq Mii

9. MyPlay

10. South Park Studio

11. MoonJee

Bagaimana tertarik? Cepat kunjungi website-website tersebut.

Moga manfaat...!

Baca juga disini

Mengembalikan Angka di Label

2009-07-30T08:32:00.003+03:00

Sobat pasti tahu kan yang dimaksud dengan angka disini apa? Yang dimaksud dengan angka disini adalah angka pada label post, angka ini berfungsi untuk menginformasikan para pengunjung blog kita akan jumlah posting pada label tersebut. Sudah banyak postingan tutorial cara menghilangkan angka pada label post. Nah sekarang mungkin ada sobat yang ingin mengembalikan angka tersebut seperti semula tapi tidak tahu bagaimana caranya. Saya akan mencoba mencari solusinya dengan memberikan tips ini yaitu tentu saja mengembalikan angka pada label hehe. Bagaimana lanjutkan?

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. CENTANG kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini:

<span dir='ltr'/>

6. Setelah ketemu, Ganti kode tersebut dengan kode dibawah ini:

<span dir='ltr'> (<data:label.count/>) </span>

7. Simpan template dan lihat hasilnya...

Moga manfaat...!

Baca juga disini

Pasang Kamus Indonesia-Arab di Blog

2009-07-28T16:23:00.003+03:00

Para sobat blogger bagaimana kabarnya? Masih tetap eksis nge-blog? Mudah-mudahan masih ya. Saya ada kabar gembira bagi para sobat blogger Indonesia, sebuah situs lokal menyediakan layanan translate atau terjemah online dari Bahasa Arab ke Bahasa Indonesia. Fasilitas ini diberikan secara gratis tanpa biaya apapun dan mudahnya lagi sobat bisa memasang fasilitas terjemah tersebut di blog sobat, jadi tidak perlu mengunjungi situs tersebut. bagaimana tertarik ingin memasangnya? Ini dia kode scriptnya:

# Silahkan sobat pasang dimana sobat mau, biasanya di SIDEBAR

Kamus Indonesia-Arab Online :

<script src="http://kamus.javakedaton.com/inc/js/kamuspopup.js" type="text/javascript"></script>
<form name="my_form" method="post">
<input value="" name="message" size="15"/>
<input maxlength="256" value="Translate" onclick="translate(this.form)" type="button"/>
</form>

Selamat Mencoba...!

Moga manfaat...!

Baca juga disini

Apa Itu RSS dan Kegunaannya

2009-07-28T14:43:00.003+03:00

BEN HAMMERSLEY tak bermaksud membual. Pukul setengah sembilan pagi saja, ia mengaku sudah memamah 75 situs web yang berbeda. “Saya sudah membaca berita-berita headline terkini dan mencermati artikel-artikel yang menarik,” ujarnya. Lebih menarik lagi, semua itu bisa dilakukannya dalam tempo singkat: sebelum secangkir kopi paginya habis!

“Ini benar-benar bermanfaat,” ujar kolomnis digital the Guardian itu. “Anda tidak perlu ketiban foto-foto atau gambar-gambar besar, layout iklan yang berat dan berkedip-kedip, tapi Anda bisa menikmatinya dengan cemat dan nyaman,” ujarnya. Jadi Anda tak perlu menghabiskan pagi Anda hanya untuk membolak-balik bookmark berbagai situs untuk mencari tahu berita terbaru.

Sejak ditemukannya browser web yang bisa menampilkan gambar, tetap saja gambar-gambar ini tak bisa membuat aktivitas membaca online menjadi pengalaman yang menyenangkan. Jika Anda adalah orang yang menggunakan web sebagai sumber utama berita-berita terhangat, pastilah setidaknya Anda punya 60 alamat bookmark yang jarang diakses, atau membuka setidaknya 30 jendela browser secara bersamaan agar tak ketinggalan berita. Merepotkan, dan kadang bikin jengkel juga.

Tapi kini ada cara untuk tetap bisa memantau berita-berita top dari the New York Times, the Washington Post, BBC, situs-situs berita lainnya, atau bahkan juga web blog, secara lebih gampang. Formatnya pun lebih mudah dibaca dan praktis sehingga memungkinkan Anda memindai ratusan berita terbaru tanpa harus buang-buang waktu membuka halaman web satu per satu.

Yang Anda butuhkan — seperti yang juga digunakan Hammersley — adalah mengunduh peranti pembaca (reader) RSS dan memasangnya di komputer. Bagi pengguna PC, seorang redaktur di PC World menyarankan untuk menggunakan SharpReader. Tapi jangan khawatir ada ratusan software serupa yang bisa Anda pilih sesuai selera dan kebutuhan.

Semua peranti lunak ini disediakan gratis, meski si pengembang sistem menghargai donasi dari para pengguna yang happy. Jika Anda mendapatkan pesan error ketika mencoba memulai (seperti “The application failed to initialize properly” atau “The dynamic library mscoree.dll could not be found”), cobalah kunjungi situs Windows Update. Carilah dan install Microsoft.NET Framework agar pemasangan RSS bisa beroperasi dengan baik.

Di reader yang sepintas mirip aplikasi e-mail Outlook ini, Anda bisa menata headline dan sinopsis artikel-artikel yang diminati. Jika Anda melihat ada berita yang ingin dibaca, tinggal mengkliknya, dan sebuah jendela akan menampilkan berita yang ingin Anda simak.

Ketika reader sudah terpasang di komputer, kunjungi balik web browser dan buka situs-situs favorit Anda. Sebagian besar situs sudah punya link yang bertuliskan “RSS” atau “XML”. Sejumlah situs malah memiliki berbagai link, bahkan di setiap menu dalam publikasinya. Lalu ambil (”cut and paste”) alamat tersebut dan taruhlah ke dalam reader untuk membaca isi situs dalam format RSS. Setekah beberapa detik, daftar headline yang Anda pilih akan muncul. Klik tombol “Subscribe” di SharpReader jika Anda ingin menambahkan pasokan (feed) dari situs-situs tersebut dalam daftar baca.

Atau, Anda juga bisa mengetikkan alamat URL sebuah situs dan SharpReader akan mengunjungi situs tersebut untuk memastikan apakah ada RSS feed yang siap “disedot”. Jika ada, ia akan otomatis memindai isinya.

Namun, ada masalah juga. Sejumlah situs, termasuk the New York Times, tidak menampilkan daftar seluruh pasokan RSS-nya di situs utama mereka, kendatipun sudah memasok hampir 20 menu berita yang bisa dinikmati lewat format RSS. Lebih membingungkan lagi, sejumlah RSS suratkabar hanya tersedia melalui pihak ketiga seperti NewsIsFree, yang memang tak mudah dilacak. Jangan panik, coba gunakan mesin pencari khusus RSS macam Syndic8.

RSS (”Really Simple Syndication” atau “Rich Site Summary”) memang memiliki tiga keunggulan dibanding web dan e-mail — dua cara terpopuler membaca berita online selama ini. Pertama, tak ada iklan atau gambar yang menyesaki badan berita. Situs asli berita yang Anda klik sebenarnya memiliki sejumlah iklan, tapi hasil pemindaian RSS jauh lebih efisien. Para blogger misalnya, yang tak butuh iklan untuk bertahan hidup, biasanya mengirimkan hampir seluruh postingnya ke dalam format RSS.

Kedua, RSS otomatis akan memperbaruinya dirinya sendiri dengan item-item terbaru sehingga isinya senantiasa segar. Anda tidak perlu melompat dari satu situs ke situs lainnya atau mengklik tombol Refresh hanya untuk mengetahui sajian terbaru situs favorit Anda. Sistem ini akan memindai situs-situs tersebut dalam hitungan detik dan bukannya melakukan loading halaman-halaman web secara individu yang prosesnya lama dan berat. Metode ini jauh lebih simpel, ramah dan tentu saja menghemat bandwidth.

Ketiga, Anda juga bisa menata sendiri “pasokan” RSS dari berbagai situs berita menjadi aliran data tunggal. Anda akan terbebas dari agenda-agenda tersembunyi para penyedia content situs. Sebagian lagi malah percaya metode ini merupakan solusi jitu menghindari serbuan surat-surat sampah alias spam. Pasalnya, RSS bisa menggantikan posisi dan fungsi e-mail bagi anggota kelompok diskusi yang sering jengkel menemukan inbox-nya dipenuhi spam.

Kemunculan RSS menunjukkan betapa masa depan Internet tidak hanya bersandar pada e-mail dan browser. Para legiun komputer, blogger dan pengembang situs web mengaku jatuh cinta pada fitur ini. Seorang pengembang web mengungkapkan hampir semua kliennya saat ini meminta agar situs yang sedang dibuatnya juga menyediakan pasokan RSS.

Hingga saat ini, tercatat sudah ratusan situs — terutama dari Amerika dan Eropa — sudah menyediakan format RSS untuk layanan beritanya. Tentu, bukan hanya situs berita yang bisa memanfaatkan metode ini. Jika Anda konsumen reguler eBay, pastikan situs ini ada dalam daftar RSS sehingga Anda tak perlu ketinggalan informasi harga terbagus sedetik pun; RSS Amazon akan memungkinkan Anda bisa tahu dengan cepat buku-buku terbaru; atau ITunes akan menginformasikan album-album terbaru ke dalam daftar RSS Anda.

Seorang analis, James Crabtree mengatakan, “Saat ini mungkin banyak orang yang belum tahu benar bagaimana menggunakan RSS. Tapi sekali ia menggunakan, saya pikir, ia akan ketagihan. Ini memang sebuah cara mudah mendapatkan informasi yang diinginkan tanpa harus berlama-lama berselancar untuk membacanya.”

Harus diakui, cepat atau lambat, RSS akan menjadi ikon penting lainnya selain Internet dan e-mail. Secara teknis maupun bisnis, fenomena ini memang layak diprediksikan akan menjadi salah satu lahan penting dalam mendulang keuntungan. Dan bagi pengguna Internet, RSS adalah sebuah kontribusi luarbiasa dalam memperkaya cara orang dalam mengakses informasi dari jagat Internet. [G!]

source: http://thegadget.wordpress.com/

Moga manfaat...!

Salam Blogger

Hack: Hidden Navbar Blogger

2009-07-28T01:02:00.004+03:00

Navbar Blogger adalah menu bar yang disediakan oleh blogger/blogspot untuk berbagai fungsi, selain berfungsi untuk identitas bahwa blog tersebut menggunakan layananan free blog dari blogger/blogspot, navbar juga berfungsi sebagai mesin pencari blog-blog yang terdaftar di blogspot, untuk lebih lengkapnya tentang apa itu navbar baca disini. Kadang kala kita ingin menghilangkan navbar tersebut karna menggangu tampilan blog kita, tetapi kadang juga kita takut karna termasuk melanggar TOS atau tidak jika menghilangkan navbar. Lalu bagaimana solusinya? Tenang saja para Blogger Master telah menemukan cara yang jitu, apa caranya? Lanjutlah membacanya.

Pada posting lalu saya telah membahas tentang menghilangkan navbar di blogger disini. Sekarang ini dia solusi untuk masalah navbar yaitu dengan meng-hidden navbar blogger. Artinya dalam kondisi normal navbar tidak kelihatan, tetapi jika pointer mouse diarahkan disekitar tempat navbar maka navbar akan muncul. Bagaimana mau langsung coba? Ikuti langkah ini:

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Tidak PERLU mencentang kotak yang bertuliskan Expand Widget Template.

5. Lalu cari kode ini:

#navbar {
height:0px;
visibility:hidden;
display:none }

6. Setelah ketemu, Ganti kode tersebut dengan kode dibawah ini:

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0)
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}

7. Setelah itu Simpan Template dan lihat hasilnya.

Moga manfaat...!

Baca juga disini

Download Software Ads Converter

2009-07-27T01:56:00.007+03:00

Pada postingan sebelumnya tentang ads converter, saya telah bahas daftar website yang menyediakan fasilitas ads converter online, sobat bisa baca disini. Nah kali ini saya ingin memberikan kabar gembira buat sobat blogger. Apa sobat pernah merasa jengkel karna koneksi lambat ketika meng-convert kode ads via online? Kalau sobat pernah mengalaminya, sekarang sobat dijamin tidak akan mengalami kejadian tersebut lagi. Kenapa bisa begitu? Ya karna saya akan memberikan solusinya dengan Software Ads Converter for Blogger.

Dengan software ini sobat hanya tinggal copy kode ads awal ke kotak kosong pada software tersebut, lalu klik dan jadi. Sangat simpel sekali dan tidak memakan waktu sobat untuk lanjut memasang ads di blog (apalagi kalau sobat online via warnet hehe, bisa irit biaya kan?) Dan yang terpenting software ini tidak mengharuskan sobat menginstallnya karna ini software portable. Untuk lebih meyakinkan sobat, saya akan berikan screenshoot software converter kode ads, ini dia:

Tertarik ingin download? ini dia linknya:

http://www.ziddu.com/download/5608805/HtmlCodeConverterForBlogger.rar.html

Atau klik disini: Download

Baca juga disini

Cara Membuat Kotak Download Pada Postingan

2009-07-27T00:52:00.005+03:00

Wah rasanya masih banyak hal yang berkaitan tentang dunia tutorila blog, karna kreasi dari para blogger benar-benar inspiratif dan akan terus tergali. Pada posting kali ini saya ingin membahas tentang membuat kotak download. Yang saya maksud dengan kotak download adalah kotak area yang memuat link download, mirip dengan teks area tapi hanya saja kotak download saya berikan background dan border di semua sisi kotaknya. Bagaimana anda tertarik untuk memasang di blog anda, agar blog anda terlihat lebih menarik dan keren? Kalau ya silahkan lanjut bacanya:

Langkah-langkah untuk membuat kotak download:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Tidak PERLU mencentang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini

]]</b:skin>

6. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

.down {
border: 1px solid #C39200;
color: #191919;
background: #FFBF00 url(http://roele112.googlepages.com/dl.gif) no-repeat;
margin: 0 25px 15px;
padding: 12px 12px 12px 12px;
}

7. Simpan template

8. Langkah selanjutnya adalah membuat postingan. Nah pada postingan yang memiliki link download, jika sobat ingin memasang linknya di kotak download caranya seperti ini:

<div class="down">
TULIS LINK DISINI
</div>

contoh:

9. SELESAI

Sobat bisa modifikasi kotak download sesuai keinginan sobat, dan kotak download juga bisa sobat gunakan untuk kotak alert, kotak note dan sebagainya.

Jangan lupa baca juga disini

Kumpulan Icon/Gambar YM Untuk Blog

2009-07-25T17:21:00.005+03:00

Pada artikel sebelumnya saya telah membuat posting tentang mengganti favicon dibloger disini. Nah sekarang saya ingin memosting kumpulan gambar atau icon fasilitas Yahoo Messenger di Blog, saya yakin posting semacam ini sudah banyak di posting di blog manapun, tapi mudah-mudahan ini yang terlengkap ya namanya juga kumpulan ya gak? hehe. Saya akan posting semua gambar yang ada untuk Pasang Yahoo Messengger di Blog. Bagaimana tertarik untuk lanjut membaca? Jika ya maka lanjutkanlah membaca hihi..:

Ini dia daftar gambarnya:

1.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=1

2.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=2

5.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=5

6.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=6

7.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=7

8.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=8

9.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=9

10.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=10

11.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=11

12.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=12

13.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=13

14.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=14

15.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=15

16.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=16

17.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=17

18.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=18

19.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=19

20.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=20

21.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=21

22.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=22

23.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=23

24.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=24

Tips:

Untuk memasang icon YM di blog formatnya seperti ini:
<a href="ymsgr:sendIM?YOUR_EMAIL_HERE"><img src="http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=1"/></a>

Selesai.

Moga manfaat...

Baca juga disini

Mengganti Favicon di Blogger

2009-07-24T20:34:00.003+03:00

Kali ini saya ingin memosting tentang cara mengganti favicon di blogger, ya mungkin ini adalah artikel yang ke-1000an atau lebih yang membahas ini, tapi saya yakin pasti bermanfaat. Sebelumnya tahukah sobat apa itu favicon? Sepengetahuan saya favicon itu adalah icon yang terdapat di tab browser dan ada juga di samping kiri address bar browser kita, fungsinya biasanya untuk identitas blog seseorang. Nah di blogger atau blogspot favicon standart yang diberikan adalah logo blogger. Lalu apakah kita bisa menggantinya dengan icon yang kita inginkan? Jawabnya bisa. Mari ikuti langkah berikut:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini:

</head>

6. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

<link href='LINK FAVICON KAMU' rel='shortcut icon'/>

CARA KEDUA:

Atau sobat juga bisa memasang code favicon sobat di Bawah kode ini:
<head>
Selesai.

TIPS:

Untuk ukuran favicon adalah: 16 x 16px dan usahakan berextensi .png

7. Simpan template dan lihat hasilnya...

Moga manfaat...!

Kunjungi blog free template disini

Pasang Gambar di Polling

2009-07-24T04:53:00.005+03:00

Bagaimana kabar sobat semua? mudah-mudahan masih bisa terus nge-blog ya. Hmm sekarang saya ingin membahas tentang menyisipkan gambar di polling. Sebelum saya membahas caranya, saya ingin membahas tentang polling terlebih dahulu. Polling biasa dipakai untuk membuat pertanyaan yang diajukan untuk orang dan telah disertai jawaban, jadi orang hanya memilih jawaban yang telah kita berikan. Widget Polling ini sudah disediakan oleh blogger, jadi sobat tinggal memasang saja, namun polling yang diberikan hanya biasa-biasa saja. Nah kali ini kita ingin pasang gambar di polling tersebut, lalu bagaimana? ingin mencobanya? jika ya teruskan bacanya hehe...

1. Tentu saja sobat harus Sign In » Tata Letak » Elemen Halaman » Tambah Gadget Lalu pilih Polling

2. Setelah terpasang pilih tab » Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini :

type='Poll'>

6. Lalu pasang gambar yang ingin sobat sisipkan di Bawah kode ini:

<h2><data:title/></h2>

Untuk kode gambar seperti ini:

<img src="LINK-GAMBAR-ANDA-DISINI"/>

Perhatian:

Ini jika sobat ingin memasang gambar di posisi atas, jika sobat ingin pasang dibawah maka kode gambarnya diletakkan dibawah kode Poll tepatnya setelah kode ini:
<b:include name='quickedit'/>
Selesai.

Contoh (Gambar di bawah)

9. Simpan template dan lihat hasilnya...

Moga manfaat...!

Baca juga disini

Tambah 3 Kolom di Atas Blog

2009-07-23T02:07:00.003+03:00

Kemarin saya habis modifikasi template ya menurut saya sekarang lebih bagus lah dari yang kemarin. Hmm sekarang saya ingin bahas apa ya? Hmm bahas bagaimana tambah 3 kolom diatas (seperti yang saya pakai). Saya yakin pasti ini artikel yang ke 1000an yang membahas tentang tambah 3 kolom diblog. Namun mudah-mudahan tetap ada manfaatnya, semakin banyak ada artikel semakin bagus dan mudah untuk para pemula mencarinya, dan siapa tahu gayanya pun berbeda-beda. Bagaimana sobat ingin menambah 3 kolom diatas wrapper/arena posting/dibawah menu navbar sobat? Kalau ya ikuti langkah dibawah ini:

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ]]</b:skin>

5. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

/****** AWAL 3 Kolom Atas *****/

#kolomatas {
width: 940px; /* sesuaikan dgn blog sobat */
position: relative;
float: left;
clear:both;
margin: 0 auto;
padding: 15px 0 15px 0;
color:#fff; /* BISA SOBAT GANTI */
background:#BDBABD; /* BISA SOBAT GANTI */

}

#kolomatas h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00; /* BISA SOBAT GANTI */

font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff; /* BISA SOBAT GANTI */

}

#kolomatas ul {
padding: 0;
margin: 0;
}

#kolomatas ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d; /* BISA SOBAT GANTI */
}

#kolomatas ul li a {
display: block;
padding: 0 10px;
color:#0701FD; /* BISA SOBAT GANTI */
text-decoration: none;

}
#kolomatas ul li a:hover {
background: #B1ACB1;
}

#kolomatas-kiri { /* kode kolom kiri */
width: 305px;
float: left;
padding-left:10px;
border-right:3px double #ccc; /* Bisa sobat ganti */
}

#kolomatas-tengah { /* kode kolom tengah */
width: 305px;
float: left;
padding-left:10px;
border-right:3px double #ccc; /* Bisa sobat ganti */
}

#kolomatas-kanan { /* kode kolom kanan */
width: 305px;
float: left;
padding: 0 5px 0 10px;
}

/****** FINISH 3 Kolom Atas *****/

6. Setelah memasang kode tadi, cari kode ini :

<div id="main-wrapper">

(Contoh saja)

7. Setelah ketemu, tambahkan kode diwabah ini tepat di ATAS kode tadi:

<div id='kolomatas'>
<b:section class='kolomatas' id='kolomatas-kiri'/>
<b:section class='kolomatas' id='kolomatas-tengah'/>
<b:section class='kolomatas' id='kolomatas-kanan'/>
</div>

8. Simpan template dan lihat hasilnya...

PERHATIAN

Jika sobat ingin memasang di bawah wrapper and diatas footer, silahkan kode di no.7 sobat simpan di atas <div class="footer'> (misal). Selesai

Moga manfaat...!

Pasang Jam + Kalender di Blog

2009-07-19T20:06:00.011+03:00

Pada posting yang lalu saya telah membuat posting tentang pasang jam di blog dengan basis flash dibuat dengan software flash maker, sobat bisa baca disini. Sekarang saya akan membahas tentang cara pasang jam + kalender di blog lagi-lagi kali ini berbasis flash, tapi ada juga jam javascript telah saya posting sebelumnya, sobat bisa baca disini. kelebihan yang sekarang adalah karna gabung antara jam dan kalender, jadi simple dan tidak butuh tempat karna menggunakan fungsi scroll. Nah bagaimana tertarik?

# Langkahnya anda tinggal mengklik tombol installer dibawah ini dan ikuti petunjuknya:

Cara Buat Spoiler di Blogspot

2009-07-19T16:23:00.011+03:00

Kali ini saya ingin membahas tentang tutorial cara membuat spoiler di Blogspot. Sebelumnya apakah sobat tahu apa itu spoiler? spoiler berfungsi sebagai widget untuk menyembunyikan (show and hidden) suatu teks atau gambar agar tidak memakan tempat dan terlihat lebih simple. Spoiler ini bagus sekali digunakan bagi sobat yang ingin postingnya tidak terlihat terlalu panjang dan banyak berisi gambar-gambar, fungsi spoiler ini bisa sobat dapati dibeberapa forum-forum lokal atau luar, misal kaskus.us. Nah sekarang yang jadi pertanyaan apakah bisa memasang spoiler di blogspot yang notabenenya gratisan? jawabannya lagi-lagi sangat bisa, malah sobat bisa memodifikasi tampilan spoiler tersebut misalnya dengan warna dan sebagainya. Bagaimana tertarik ingin memasangnya?

Ikuti langkah berikut:

1. Pasang kode berikut dimana spoiler ingin sobat pasang. Misalnya di postingan sobat yang banyak berisi gambar.

Ini dia kodenya:

<div style="margin: 20px; margin-top:5px"><div class="smallfont" style="margin-bottom: 2px;"><input value="Tampilkan" type="button" style="margin: 0px; padding: 5px; width: auto; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">

GAMBAR ATAU TEKS SOBAT LETAKKAN DISINI

</div></div></div></div>

Contoh ingin memasang sebuah GAMBAR ini:

Maka hasilnya seperti ini:

Spoiler untuk gambar:

contoh spoiler dengan teks:

Ini adalah teks untuk contoh spoiler.
Bagaimana mudahkan?

Maka hasilnya seperti ini:

Spoiler untuk teks:

KETERANGAN

sobat bisa memodifikasi spoiler tersebut dengan mengubah font, warna, background dan lainya. Gunakan keahlian sobat agar spoilernya tampak menarik hehe. Selesai.

Full DEMO Here

Selamat ngeblog!

Menghilangkan Angka di Label dan Arsip

2009-07-19T02:19:00.003+03:00

Pada posting yang lalu saya telah membahas tentang cara membuat tulisan berkedip dan link berkedip dalam istilah blogger disebut blink text dan blink link, sobat bisa baca disini. Sekarang saya ingin membahas tentang cara menghilangkan angka pada label dan arsip. Sebenarnya fungsi angka ini adalah untuk menginformasikan pada pengunjung tentang berapa jumlah arsip sobat dan banyaknya posting dalam satu label. Namun sebagian teman merasa risih dengan adanya angka pada label dan arsip blognya, bisa jadi salah satu alasan karna postingnya masih sedikit dan tentu ada alasan lain lagi. Nah bagi sobat tertarik ingin mencoba tutorial ini?

Ikuti langkah dibawah ini dengan seksama dan khidmat hehe kayak upacara aja ya?

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode dibawah ini untuk menghilangkan angka di label:

(<data:label.count/>)

5. Setelah ketemu, HAPUS kode yang dicari tadi.

7. Setelah itu cari kode berikut ini untuk menghilangkan angka di arsip:

(<data:i.post-count/>)

8. Setelah ketemu, HAPUS kode tersebut.

Perhatian:

Penting: untuk Arsip: ada TIGA kode seperti kode diatas, yang harus dihapus adalah kode PERTAMA. Dan kode ini hanya ada jika sobat memasang arsip di blog sobat. Selesai

9. Simpan template dan lihat hasilnya...

Moga manfaat...!

Salam Blogger