TUTORIAL BLOGGER

berlangganan

Blogger Widgets
Tampilkan postingan dengan label memperbaiki blog. Tampilkan semua postingan
Tampilkan postingan dengan label memperbaiki blog. Tampilkan semua postingan

0 cara membuat tukar link otomatis


cara membuat tukar link otomatis
mungkin kamu pernah melihat sebuah blog yang memasang widget tukar link otomatis?. Contohnya seperti disini (klik untuk melihatnya).

Ingin membuatnya?. Caranya gampang kok, yuk langsung aja kita lihat cara membuatnya...


Cara membuat widget tukar link otomatis adalah :

1. Silahkan daftar dulu disini...

2. Kemudian login ke account kamu tadi dan klik wizard, lihat tulisan di atas pada account kamu itu.

3. Lalu pilih Newblogger atau blogger baru (pilihan pertama) dan centang pilihan kedua, yaitu pada pilihan paling kiri di bawah (berarti dua pilihan yang satu di atas dan yang kedua di bawah). Kemudian klik generate code.

4. Akan keluar dua kode html setelah itu.

Kode pertama contohnya adalah seperti ini :

<script type="text/javascript" src="http://www.blenza.com/linkies/header.js"></script>

Kode kedua contohnya adalah seperti ini :

<script type="text/javascript" src="http://www.blenza.com/linkies/autolink.php?owner=coba&
postid=04Apr2009"
></script> <== Contoh kode kedua 

5. Login ke account blogger kamu dan masuk ke halaman edit html template kamu. Masukkan kode petama seperti di atas di bawah kode<head>

6. Jika sudah, simpan. Lalu buatlah sebuah posting baru dengan judul tukaran link misalnya, Dan masukkan kode kedua pada akhir tulisan kamu itu (untuk memasukkan kodenya kamu pilih "edit html" ketika menulis posting, bukan "compose").

Ini adalah contoh kode kedua saya, dan pasang dengan di pisahkan</br> .

Contoh pemasangannya :

Kata-kata kamu disini....

</br>

<script type="text/javascript" src="http://www.blenza.com/linkies/autolink.php?owner=coba&postid=04Apr2009"
></script> <== Contoh kode kedua 


7. Selesai, klik publish dan lihat hasilnya...


Salam 
blogger...
Read more »
Label:

0 CARA MEMBUAT FORUM

Forum atau media diskusi yang memungkinkan member dapat saling bertukar pikiran dan saling tanya dan menjawab antara anggota, atau dalam artian pendek adalah bertemunya sang newbie (pemula) dengan master (jagoan) dalam sebuah topik pembicaraan, wah saya sedikit ngawur untuk lebih jelasnya tanyakan saja pada mbah google .

Kita dapat membuat forum sendiri secara gratis. Mau tau caranya?

berikut langkah-langkahnya :

  1. Buka situs www.forumotion.com
  2. Lalu klik tombol "Creat a free forum"
  3. Lalu pilih sebuah sistem forum : phpbb3, phpbb2, invison atau punBB.
  4. Kemudian pilih sebuah templatenya dan klik tombol "continue"
  5. Lalu isi form forum information dan form admin information sesuai dengan data Anda
  6. Kalau langkah ke 5 sudah diisi dengan benar kemudian centang "I Agree...." dan klik tombol continue.
  7. Kemudian ada test admin password diisi samakan dengan password Anda tadi dan klik continue.
  8. Jadi deh.sengihnampakgigi dan silahkan ikuti keterangan berikutnya untuk memanagement forum Anda.
Nah diatas sedikit tutorial cara membuat forum dan untuk versi indonesiannya masuk saja situs www.indonesianforum.net, semoga bermanfaat.happy bloging

Read more »
Label:

0 cara menghilangkan icon tang dan obeng


Menanggapi pertanyaan dari beberapa blogger… hehehe…bimablogunik serasa jadi konsultan blogger saja ya kalau posting biasanya pake kata-kata tersebut  soalnya “ Your Questions is my inspiration” pertanyaan anda adalah inspirasiku. Jadi rahasia kenapa blog ini masih bisa bertahan sampai sekarang adalah karena masih ada yang bertanya ke bimablogunik. So, tentu saja ide untuk posting selalu ada. Eh..eh.. ko…gitu sich.. la ko  jadi ngelantur nih, kembali ke judul posting ini ah.
Apa sih maksud dari judul posting ini, sepertinya agak aneh? begini nih teman-teman, jika kita sedangmengedit template dan melihat hasilnya maka pada sudut-sudut element akan terlihat icon bergambar obeng dan tang. berikut contoh screenshotnya :

quick-edit

Icon tersebut di sebut juga dengan icon Quick Edit atau dengan kata lain untuk mengedit secara cepat. Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa melihat icon tersebut.
Namun ternyata ada beberapa blogger yang tidak suka dengan kehadiran icon tersebut dan ingin menghapusnya. Apakah kita bisa  menghapus icon tersebut? Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita. Ingin tahu kodenya seperti apa, nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Mudah sekali bukan? atau masih bingung. Ok deh, ini dia cara lengkapnya :

  1. Login ke blogger dengan ID anda tentunya.
  2. Klik  Tata Letak.
  3. Klik tab Edit HTML.
  4. Cari kode seperti ini :

    ]]></b:skin>

  5. Copy paste kode berikut persis di atas kode yang tadi :

    .quickedit{
    display:none;
    }

  6. Klik tombol Simpan template.
  7. Selesai.


Selain langkah di atas, sebenarnya masih ada yang harus anda lakukan yaitu silahkan ucapkan “ Selamat tinggal Obeng dan Tang…dadaaahhhhh “ hehehe….

Selamat mencoba!
Read more »
Label:

0 CARA MEMASANG RELATED POST SIMPLE


Cara membuat related post - Jika Anda mencari informasi cara membuat related post di blogger, maka Anda sudah berada di area yang tepat. Karena pada kesempatan kali ini admin ingin berbagi tips seputar blogging kepada rekan - rekan blogger sekalian yang masih kebingungan dalam membuat related post di blognya. Seperti yang kita tahu bahwa fungsi dari related post atau bahasa Indonesianya kita sebut dengan artikel terkait, artikel yang berhubungan dengan postingan yang sedang dibaca atau artikel yang direkomendasikan oleh pemilik blog kepada pembacanya untuk memahami lebih dalam suatu topik dalam kategori tertentu, intinya sederhana, blogger dapat pageviews yang lebih banyak, pembaca mendapat informasi yang lengkap. Nah, setelah mengenal apa itu related post beserta fungsinya, langsung aja kita praktekkan bersama cara membuat related post diblog seperti langkah - langkah yang saya tuliskan dibawah ini :
1. Yang pasti Login dulu di blogger.com.
2. Klik Rancangan » Edit HTML
3. Back up template lama Anda agar jika gagal, tidak merusak tampilan blog.
4. Klik "Expand Template Widget".
5. Gunakan Ctrl + F untuk mempermudah pencarian.
6. Masukkan kode css berikut tepat atas kode </head>

<style> #related-posts { float : left; width : auto; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHQ3umEsViS4OHWqV8hbCKCvxHTGHUiJMAinZYC3lhYVhc3UVzpnsp2zjfX225wRLzarAyMOONgD9hZ7rKsqyuhCjUSOqYeisF33E6nb44wtRKr_LHIiJlce1TKBrlEPAzXfQPdVGbZLNq/s1600/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/0542826181/ttm.txt.js' type='text/javascript'/>

7. Cari kode <data:post.body/> atau <div class='post-body>, usahakan yang berdekatan dengan post-entri, Kemudian copy code dibawah ini, letakkan tepat dibawahnya.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

8. Klik Simpan, Lihat hasilnya.

NB : Mungkin untuk menghapus link credit postingannya akan saya bahas pada kesempatan lain, jadi tetap monitoring perkembangannya ya sobat, semoga artikel tutorial cara memasang related post ini dapat membantu Anda yang memang sedang memerlukannya.

POTING INI DI TULIS OLEH

Sumber : http://syacom.blogspot.com/2012/06/cara-membuat-related-post.html#ixzz1zKJto7ly
Read more »
Label:

0 cara posting hanya muncl judulnya saja (part1)

Update kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat tempat pada halaman depan sebuah blog. Biasanya cara ini digunakan karena artikel, sidebar ataupun konten yang ditampilkan sudah padat. Tapi ada juga yang hanya sekedar ingin tampil lebih praktis dan lebih meringankan pada saat loading ketika blog tersebut dibuka.
Untunglah ada sobat blogger yang mengeluhkan, bahwa kode css yang saya berikan tidak bekerja dengan baik.... terima kasih sobat. Dan ternyata setelah saya cek kembali, ada beberapa kode yang kurang, dan kini kode yang saya berikan dibawah sudah normal kembali, maka dari itu artikel ini saya update kembali ... bagi yang memerlukan trik ini silahkan anda coba dan saya pastikan akan berhasil tanpa keluhan.




OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.


4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode css di bawah ini dan taruh sebelum kode </head>:
<style type='text/css'>

<b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'>

.post {margin:.5em 0 1.5em;border-bottom:0px dotted $bordercolor;padding-bottom:1.0em;height:50px;}.post h3 {margin:.25em 0 0;padding:0 0 4px;font-size:20px;font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;font-weight:normal;line-height:1.4em;color:#cc6600;}

.post h3 a, .post h3 a:visited, .post h3 strong {display:block;text-decoration:none;color:#cc6600;font-weight:normal;}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}.post-footer {display:none;}.comment-link {display:none;}.post img {display:none;}.post blockquote {display:none;}.post blockquote p {display:none;}h2.date-header {display:none;}.post-labels {display:none;}.post-rating {display:none;}

</b:if></b:if>

</style>

setelah itu simpan 
selamat mencoba.. salam blogger


Read more »
Label:

0 cara membuat bubble di blog


membuat efek gelembung busa terbang.Buat ngisi blog biar ga terlalu lama vakum..
Tahukah kamu sobat blogger salah satu cara menjadikan blog kamu menjadi super alay.
nih caranya :


Pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (1)


gelembung busa blogger.

membuat gelembung blog.


Selanjutnya pilih HTML/Javascript kemudian letakkan kode berikut:
<script src="http://clief.googlecode.com/files/bubble.js"></script>
Lalu simpoan template sobat,moga berhasil ya :D


Read more: http://pelajaran-blog.blogspot.com/2012/06/membuat-efek-gelembung-busa.html#ixzz1z32ZbFGN
sumber : pelajaran-blog.blogspot.com
Read more »
Label:

0 cara membuat spoiler



Membuat Spoiler atau Open Close Keren  hari ini saya akan share sebuah Blogger Tutorial mengenai cara membuat sebuah spoiler atau tombol open close di blog.


Spoiler
 

Spoiler atau tombol open close ini berfungsi untuk menyembunyikan sebuah text, gambar ataupun widget. Ketika kalian meng-klik tombol open maka text, gambar ataupun widget yang kalian sembunyikan akan terlihat begitu pula sebaliknya, jika kalian kembali meng-klik tombol close maka text, gambar ataupun widget yang kalian sembunyikan akan kembali tertutup. Kalian sudah mengerti kan? Kalau kalian ingin menggunakannya silahkan kalian pilih bentuk spoilernya dan copas kode di bawahnya ke tempat yang kalian inginkan


Spoiler 1


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" style="background: none repeat scroll 0% 0% yellow; border: 1px dashed red; color: blue; font-size: 10px; margin: 0px; padding: 5px; width: auto;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background-color: yellow; border: 2px dashed red; color: blue; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Spoiler 2



<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<input 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 = 'CLOSE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'OPEN'; }" style="background: none repeat scroll 0% 0% BLUE; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="OPEN" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Spoiler 3



<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<input 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 = 'CLOSE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'OPEN'; }" style="-moz-border-radius: 15px 15px 15px 15px; background: none repeat scroll 0% 0% BLUE; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="OPEN" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Spoiler 4



<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<input 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" style="-moz-border-radius-bottomleft: 15px; -moz-border-radius-topright: 15px; background: none repeat scroll 0% 0% RED; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Spoiler 5



<div><div style="margin: 5px;">
<div class="normalfont" style="margin-bottom: 2px;">
<input 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0% darkgreen; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="BUKA" /></div>
<div class="alt2">
<div style="display: none;">
<div style="color: white; padding: 10px; text-align: justify;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Spoiler 6



<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<input 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'; }" style="margin: 0px; padding: 0px; width: 100%;" type="button" value="SHOW" /> </div>
<div class="alt2" style="-moz-background-inline-policy: continuous; background: none repeat scroll 0% 0% rgb(255, 0, 0); border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Text, URL Gambar atau Widget kalian Disni</div>
</div>
</div>

Catatan :
1. Kalian bisa melakukan beberapa modifikasi : mengganti warna/color, ukuran/jenis font, text-attribute seperti bold/italic, dari Spoiler tersebut.

2. Isi dari Spoiler juga bisa dimasukkan kode div style seperti di bawah ini, sehingga bentuknya seperti tabel yg ada scroll bar-nya...


<div style="padding:10px; overflow:auto; width:200px; height:200px;" 1px="">
.
.
.

</div>


NB : 


Kode titik2 ditengahnya adalah isi, bisa berisi link, text, gambar, dll

Bagaimana? Cukup mudah bukan cara membuatnya tinggal copas aja koq.

Semoga bermanfaat and Happy Blogging.
Baca juga artikel Blogger Tutorial lainnya. happy blogging......
Read more »
Label:

0 cara mengatasi postingan ganda

Bagaimana cara mengatasi posting ganda di blogger?

Ada 2 teman kita yang mengalami posting ganda ini, katanya di blognya postingan ada 2 (artikel yang sama), padahal dia cuma nulis 1 artikel saja, tapi di blognya malah jadi dua.

Sebenarnya saya juga belum pernah mengalami hal seperti ini, namun kali ini saya akan mencoba memberi sebuah solusi untuk mengatasi posting ganda.

Agar artikel ini tidak terlalu panjang, maka di sini saya hanya akan menuliskan 1 cara saja (yang saya anggap lebih mudah), dan mudah-mudahan ini bisa menjadi solisi.

Sebenarnya ada cara yang lebih mudah lagi, yaitu dengan cara mengganti template dengan yang baru.

Ok mari kita lanjut.
Panduan Cara Mengatasi Posting Ganda Di Blogger

Panduan Untuk Blogger Baru
Panduan Untuk Blogger Lama

Tutorial Mengatasi Posting Ganda Di Blogger Untuk Blogger Baru
1. Klik menu seperti ini



2. Klik menu / tulisan Template

3. Klik menu Edit HTML

4. Klik tulisan / menu Lanjutkan

Panduan Mengatasi Posting Ganda Di Blogger Di Blogger Lama
1. Klik Menu Rancangan / Design

2. Klik Menu Edit Html



Sekarang cari kode
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
Lihat di sana, apakah ada kode yang mirip seperti kode tersebut, misalnya seperti ini
<b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog'/>
Jika ia, maka silakan hapus salah satunya. Kemudian simpan pengaturan template kamu.

Nah itulah salah satu cara mengatasi posting ganda di blogger, semoga dapat membantu. Jika cara kode yang saya tuliskan di atas cuma 1 saja silakan jelaskan permasalahannya dengan cara memberi komentar.
Read more »
Label:

0 pasang strip-ad navbar ala blogger


Menayangkan iklan bergaya Stripe-Ad tentu lebih baik dari pada menayangkan iklan dalam bentuk Popup Ad (Pop-ups, pop-overs and pop-unders), Selain dapat menghindari Popup Blocker, memasang Stripe-Ad terasa sangat pas untuk menampilkan satu focus informasi yang dirasa penting (bisa berupa iklan baris, pengumuman, Feed atau informasi apa saja sesuai kebutuhan).


Jika anda melihat contoh Stripe-Ad diatas pada blog ini, sekilas terlihat hampir serupa dengan standar Navigation Bar (Navbar) Blogger. Pengunjungpun dapat melihat langsung batang navigasi ini ketika pertama kali mereka mengunjungi halaman blog anda. Iklan ini akan tetap tampil walaupun pembaca melakukan Mouse Scroll pada halaman. Jika tertarik kemungkinan besar pembaca akan mengkliknya, jika dirasa mengganggu mereka dapat dengan mudah menutupnya dengan mengklik tombol X pada pojok kanan atas.

Stripe-Ad tentu saja bukan hal yang baru. Pengguna Wordpress biasanya menggunakan plugin Strip-Ad buatan MaxBlogPress cara installasinya pun terbilang mudah dan sudah ditulis dengan lengkap caranya, silahkan pelajari sendiri disitusnya ya :)

Cara Pasang Strip-Ad di Blogger:

1. Upload File javascript dibawah ke lokasi penyimpanan file anda, Simpan file dengan nama Stript-ad.js

var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("mta_bar").style.visibility = "hidden";
}

2. Tuju kehalaman Edit HTML di blogger.

Copi-Paste kode CSS dibawah, letakan diatas kode ]]></b:skin>

#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }

3. Masukan kode pemanggilan JS dibawah, letakan diatas kode </head>, jangan lupasesuaikan dengan alamat lokasi URL dimana anda meyimpan file JS-nya.
<script src='http://www.alamatserveranda.com/Stripe-Ad.js' type='text/javascript'/>

4. Letakan kode dibawah ini dibawah kode <body>, Silahkan sesuaikan setingan dibawah dengan link dan deskripsi anda sendiri.
<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/ooms-logs' target='_blank'>Kurang lebih 3200 pembaca Rss Feed sudah bergabung, Sudahkah anda?</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;o-om.com.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://http://www.alamatserveranda.com/close.gif' style='cursor:hand;cursor:pointer;'/></span></div>

5. Simpan hasil kerja anda :)

Selamat Mencoba..
Read more »
Label:

0 free blogger template generator


Siapa bilang ngedesain template sendiri itu sulit? cukup berbekal Blogger Template Generator dibawah ini kita sudah bisa kok membuat Template dinamis secara instan tanpa harus menguasai bahasa pemrograman seperti HTML, XML dan CSS. Disini yang kita butuhkan hanya sedikit kreatifitas saja, selebihnya imajinasi kita sendiri yang menentukan hasil akhir dari desain template.

Template generator ini tampil menggunakan tab menu sederhana, kita dapat memulai membuat template dengan memilih beberapa fasilitas yang sudah disediakan. Sebelum mencoba tools ini pastikan kita menggunakan browser versi IE6 atau versi diatasnya, Firefox dan Opera.


Kita dapat merancang blogger template sendiri  mulai dari header hingga sampai ke footer. Yang jelas kita tidak harus memiliki pengetahuan lebih tetang HTML, cukup mengaturnya langsung melalui beberapa setting yang tesedia. Seperti yang dikatakan pembuatnya, waktu yang kita habiskan untuk mendesain sebuah template kurang lebih hanya 10 menit.


Generator ini menyediakan berbagai macam pililhan column, mulai dari generator untuk template 1 coloums bahkan sampai 5 Column juga tersedia. Beberapa fitur lain diantarnya:
  • Liquid design, no tables, no javascript, pure layers and css.
  • Visual layout and backgroud color design, WYSIWYG
  • Cross browser compatibility
  • Compact CSS code, reduce 25% of length

Trix Blogspot Template Generator
TrixTG v1 adalah tool untuk membantu kita mendesain template untuk Blogspot. Memang antarmuka tidak sebagus yang kita harapkan, tetapi fungsionalitas yang disediakan oleh generator template ini sangat baik.


Selamat mencoba aja :)
Read more »
Label: , ,

0 cara memasang search angine dengan background

Berjumpa lagi dalam tutorial menarik di blog ini, iya anas dulu udah pernah posting tentang cara membuat search engine sederhana tapi sekarang anas membuat search engine di blog lebih menarik dengan background gambar dan tombol sumbit juga ada gambarnya, menurut kamu menarik gak sih search engine yang kaya begini... kalau kamu belum faham juga ni dibawah aku kasih contoh search engine yang menarik

Gimana? Dari gambar diatas kamu tertarik gak pengen buat search engine yang kaya gituan wkakaak pastinya penegen dunk orang menarik iya kan?

Iya itu adalah background karya aku sendiri dan nanti kamu juga bisa buat Backgroundnya sendiri dan juga tombol submit buatan kamu sendiri okey

langsung aja deh ke cara pembuatanya

  1. Log in ke blogger dahulu kalau sudah masuk menu Layout kemudian masuk Edit HTML
  2. Lalu taruh Code Dibawah diatas Code ]]></b:skin>


    #searchform {
    position:letf;
    top: 20px;
    right: 0px;
    background: url(http://sites.google.com/site/anasku2000/search-back.png) no-repeat right bottom;
    height: 59px;
    width: 210px;
    }
    #searchform #s{
    background: #ffffff url(http://sites.google.com/site/anasku2000/form-field-bg.gif) no-repeat ;
    height: 17px;
    width: 148px;
    margin: 30px 5px 0px 10px;
    padding: 3px 7px 2px 5px;
    color: #999999;
    border: none;
    }
    #searchform #searchsubmit {
    background: url(http://sites.google.com/site/anasku2000/searchbtnnk7.png) no-repeat left top;
    height: 24px;
    width: 24px;
    border: none;
    text-indent: -999%;
    line-height: 1px;
    margin-top: 6px;
    }
  3. Kemudian Simpan Template
  4. Lalu langkah selanjutnta adalah masuk menu Layout ---> Page Elements
  5. Pilih tempat yang mau dipasangi Search engine kemudian Add A Gadget
  6. Lalu pilih HTML/JavaScript kemudian Taruh Code Dibawah Kedalamnya

    <form id="searchform" action="/search" method="get">
    <div>
    <input type="text" id="s" value="" name="q" />
    <input id="searchsubmit" value="Go" type="submit" />
    </div>
    </form>
  7. Lalu Simpan dehh

Nah jika kamu ingin membuat karyamu sendiri silahkan ganti link backroundnya yahh dan atur penempatanya okey


http://sites.google.com/site/anasku2000/search-back.gif ---> Ini adalah Link Backgroundya

http://sites.google.com/site/anasku2000/form-field-bg.gif -----> Ini Background Form
http://sites.google.com/site/anasku2000/searchbtnnk7.png ---> Ini Tombol Submitnya


Gimana trik gw jadul tapi manjur kan wkakakakak okelah silahkan menjoba jangan lupa isi komentar yahh di bawah juga kalau gak keberatan klik iklanya juga wkakakakakak

BACKGROUND YANG BISA KAMU GUNAKAN


http://sites.google.com/site/anasku2000/search-back.png
Read more »
Label:

0 cara membuat menu horizontal

Masih membahas tentang cara membuat menu horizontal atau menu navigasi di blog kita, dan dulu sudah pernah saya memposting tentang cara membuat menu horizontal dan menu vertical di blog ini, namun kali ini saya akan menulis tutorial bagaimana membuat menu horizontal yang lebih canggih dibandingkan yang kemaren yaitu membuat multi level menu atau menu bertingkat.

Okkey langsung saja ke cara pembuatanya ya


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>



.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}
Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>

Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah code yang diatas tadi


<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Page Elements"



Terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik aja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://sangmerak.blogspot.com">SangMerak</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorial-jitu.blogspot.com">Tutorial Blog</a></li>
</ul>
<br style="clear: left" />
</div>

Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan di SAVE deh.

Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan. Miss u all. bye² 
Read more »
Label:

0 cara pasang icon komenter sebelum link

bagaimana cara pasang icon komentar sebelum link "posting sebuah komentar"? untuk menjawab pertanyaan ini agar gak bingung kamu bisa melihat gambar dibawah:

 
Dari gambar diatas bisa dilihat icon komentar ini sangat berguna sekali. Kenapa kita perlu memasang icon ini, jujur..untuk standar blogger link "posting sebuah komentar" sangat membingungkan apalagi jika link komentar tersebut nyempil dibawah komentar dan tidak kelihatan, agar para pengujung dimudahkan memberi komentar ada baiknya icon ini kita pasang.

Ikuti langkah dibawah untuk memasang icon komentar:

Pertama:
Jangan lupa lakukan backup template

Kedua:
Masuk ke Template -> Edit html - > beri tanda cek pada Expand Template Widget

Ketiga:
Cari kode Dibawah ini :

 <p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> </a>
</p>
</b:if>

Kemudian sebelum tag </a> kita masukan kode dibawah ini :

<b><font color='#444'>
<img alt='Buat sebuah Komentar' border='0' height='47' src='http://www.geocities.com/oom_directory/images/comments.gif' width='61'/>
<data:postCommentMsg/></font></b>

Code diatas bisa kita edit sesuai keinginan, misalnya kita ingin mengganti icon milik sendiri, caranya cukup ganti alamat Url yang berwarna merah diatas dan ganti dengan alamat dimana icon tersebut disimpan.

Keempat:
Simpan dan lihat hasilnya
Read more »
Label:

0 cara memasang kotak iklan di blog


Sudah lama ya om gak nulis tutorial untuk blogspot, kali ini om akan ngajarin trik sederhanan cara bikin kotak iklan (Banner Box). Untuk fungsiBanner ads sendiri kayaknya gak perlu om jelasain lagi untuk apa..om yakin pasti semua sudah ngerti. Oh iya kalo tidak salah ada beberapa rekan juga yang minta dibuatkan cara mudahnya, maaf om lupa nama yang minta, yang jelas ada dikolom komentar dan imel yang masuk. Ya udah om tulis aja tutorialnya dibawah ini:



Cara membuat kotak iklan (Banner Box):

Pertama, masuk pada halaman Edit Html, kemudian masukan kode CSS dibawah ini dibawah kode <b:skin><![CDATA[


#Box-Banner-ads  {

margin: 0px;

padding: 5px;

text-align: center;

}

#Box-Banner-ads  img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Box-Banner-ads  img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

Sudah? selanjutnya buat element halaman baru..kemudian anda tinggal memasukan kode dibawah ini.


<div id="Box-Banner-ads">

<a target="_blank" href="http://www.o-om.com"><img 
border="0" alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"/></a>

<a target="_blank" href="http://www.o-om.com"><img 
border="0" alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"/></a>
<a target="_blank" href="http://www.o-om.com"><img 
border="0" alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"/></a>
<a target="_blank" href="http://www.o-om.com"><img 
border="0" alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"/></a>

</div>

Untuk jumlah iklan anda tinggal menambahkan atau mengurangi sesuai kode dibawah ini. jangan lupa mengganti warna merah dengan alamat url anda sendiri.


<a target="_blank" href="http://www.o-om.com"><img 
border="0" alt="ads" src="http://oom.blog.googlepages.com/Banner2.gif"/></a>

Semoga tutorial sederhana ini bisa menjawab pertanyan selama ini.
Read more »
Label:
Langganan: Postingan (Atom)

Total Pengunjung

free counters
 

TUTORIAL BLOGGER Copyright © 2011 - |- Template created by O Pregador - |- Powered by Blogger Templates