Cara Membuat Form Kontak Admin

Di dalam sebuah website khususnya yang digunakan sebagai bisnis tentunya kita menemukan contact form atau form kontak yang digunakan untuk sarana komunikasi offline yang digunakan untuk negosiasi, pertanyaan, penawaran, pembelian, penjualan, pembelian dan lain-lain. adapun untuk sarana komunikasi Online kita bisa menggunakan Yahoo Messenger untuk beberapa kepentingan diatas.

Layaknya sebuah website kita pengguna blog pun juga bisa menggunakan form kontak admin untuk sarana kepentingan masing-masing blog. banyak sekali situs-situs penyedia layanan form kontak tetapi disini Trik Tips Tutorial akan membahas salah satunya saja yaitu layanan contact form yang disediakan oleh www.emailmeform.com.

Sebagai contoh lihatlah form kontak trik tips tutorial disini.

Berikut dibawah ini langkah-langkah membuat sebuah form kontak :

1. Silahkan kunjungi situs http://www.emailmeform.com.
2. Arahkan pandangan anda ke sebelah kanan atas monitor.
3. Klik pada tulisan Sign up for free.
4. Isilah form yang ada dengan data diri anda :
   
   
   • First Name ~> isi dengan nama depan anda. Contoh : Mister.
   • Last Name ~> isi dengan nama belakang anda. Contoh : Rius.
   • Username ~> isi dengan username yang di inginkan. Contoh : Misterius.
   • Password ~> isi dengan kata kunci yang di inginkan. Contoh : misterius90.
   • Retype Password ~> isi dengan kata kunci yang tadi di isikan. Contoh : misterius90.
   • Your Email ~> isi dengan alamat email anda. Misal : misterius@yahoo.com.
5. Klik tombol Sign up.
   
6. Setelah muncul tulisan terima kasih, silahkan cek email yang tadi di masukan oleh anda untuk memeriksa email verifikasi.
   
7. Buka email kiriman dari EmailMeForm yang bertajuk Your new account information.
   
8. klik link yang di berikan di email tersebut atau kalau tidak bisa, copy alamat URL tersebut lalu paste di address bar browser internet anda untuk melakukan verifikasi bahwa email yang tadi di masukan adalah benar-benar milik anda.
   
9. Setelah proses verifikasi selesai, silahkan klik tulisan click here untuk menuju halaman akun kontrol panel anda.
   
10. Alihkan perhatian anda ke sebelah kanan monitor. Klik tulisan Create new form.
    
11. Ada beberapa form yang perlu di sisi :
    
    
    • Web form Name ~> isi dengan nama yang anda inginkan, atau biarkan saja (di sana sudah tertera Contact Webmaster).
    • Recipients Emails ~> isi dengan alamat email yang akan menerima pesan.
    • Spam Email address ~> isi dengan alamat email yang di inginkan untuk menerima pesan spam (email sampah, email iseng doank, email iklan, dll) atau kosongkan saja bila tidak mau menerima pesan email spam.
    • Thank you page ~> isi dengan alamat URL yang memuat tulisan terima kasih, contoh Klik disini. Atau jika bingung, tulis saja alamat blog anda.
    • Number of fields ~> biarkan 4 saja.
12. Klik tombol next yang ada di sebelah kanan.
    
13. Ada beberapa field name yang bisa di ganti sesuai keinginan, misal : Your Name jadi Nama, Your Email Address jadi alamat Email, dst. Atau biarkan saja seperti itu.
    
14. Klik tombol next yang ada di sebelah kanan.
    
15. Klik tombol next lagi.
    
16. Silahkan isi dengan keinginan anda ( hehehe… cape kalau nerangin yang ini) atau biarkan saja seperti itu.
    
17. Klik tombol next lagi.
    
18. Klik tombol next lagi.
    
19. Akan di perlihatkan contoh tampilan kontak form yang tadi di buat oleh anda.
    
20. Klik tombol Finish.
    
21. Klik tulisan Get the HTML codes.
    
22. Copy kode yang ada di text area, di bawah tulisan Copy and paste this HTML code into your page. Lalu paste pada notepad atau text editor lainnya.
    
23. Selesai.
    

                                                      Semoga Bermanfaat..

Read more »

Cara Memasang Jam di Blog

Mungkin dari beberapa pengguna blog sering kita menemukan blog yang dihiasi oleh jam. bagi anda yang ingin memasang jam pada blognya mari kita ikuti tutorial berikut ini :

Ada banyak situs yang menyediakan widget untuk memasang jam secara gratis tetapi disini Trik Tips Tutorial akan membahas cara memasang jam dari sebuah situs yang menyediakan pemasangan jam secara gratis dan situs ini yang paling banyak digunakan oleh para blogger. Situs ini menyediakan berbagai bentuk jam apalagi di dalam situs tersebut kita tinggal mengcopy dan paste kodenya tanpa harus registrasi terlebih dahulu. situs tersebut adalah :

www.clocklink.com

Berikut cara memasang widget Jam di blogger :

1. Pertama kunjungi www.clocklink.com
2. lalu klik pada menu Gallery (disitu kita bisa memilih kategori-kategori yang ingin kita pilih)
3. sebagai contoh kategori analog kita pilih,
4. kemudian klik view html tag pada kotak di bawah jam yang kita pilih lalu akan timbul halaman baru di window baru. disitu nanti kita ada ketentuan-ketentuan yang memakai bahasa inggris,
5. langsung aja kita pilih accept
6. Selanjutnya kita diminta memilih warna (color), {time zone untuk Waktu Indonesia Bagian Barat sebaiknya memilih JOG : Jogyakarta Indonesia Time (GMT + 07.00)} serta jangan lupa tuliskan ukuran (size) jam agar sesuai dengan sidebar tempat meletakan jam itu nantinya. Dapat juga diatur kemudian.
7. Copy seluruh kode HTML kemudian disimpan di komputer kita contoh pada notepad.

Langkah selanjutnya kita menuju blog kita

1. Silahkan login ke blogger dengan ID anda
2. Klik Tata Letak
3. Klik tab Elemen Halaman
   
4. Klik Tambah Gadget
5. Klik tanda plus (+) untuk HTML/Javascript
6. Copy paste kode yang kita taruh di notepad tadi ke dalam kolom konten yang tersedia
7. selesai

jika sudah berhasil akan tampak seperti dibawah ini :






ada beberapa situs lain yang menyediakan widget jam untuk blog secara gratis diantaranya adalah :

www.mytictac.com

Semoga berhasil..

Read more »

Cara Memasang Kalender di Blog

Mungkin sebagian dari para blogger ada yang memasang kalender pada blognya, selain agar mereka mengetahui tanggal pada hari tersebut, biasanya kalender ini digunakan untuk menambah hiasan di blognya masing-masing.

Kemudian bagaimana cara memasang kalender di blog..?
Caranya sangat mudah, mari kita baca di bawah ini :

Untuk memasang sebuah kalender kita bisa memanfaatkan berbagai situs penyedia kalender gratisan. Situs seperti ini sangatlah banyak, dengan menampilkan kalender-kalender yang menarik untuk di lihat.

Sebagai contoh :

http://www.free-blog-content.com.

Di dalam situs ini kalender yang di sediakan sangat beragam. hanya dengan mengklik kategori yang ada untuk memilih bentuk kalender yang anda inginkan untuk dipasang di blog anda, kemudian copy kode yang di berikan di bawah gambar kalender lalu paste pada blog anda dengan cara sebagai berikut :

1. Sign in blog anda di blogger.com


2. Klik menu Tata Letak


3. Klik menu Elemen Halaman


4. Klik tulisan Tambah Gadget


5. pilih tulisan HTML/JavaScript


6. Copy kode kalender tersebut kemudian paste pada kolom yang di sediakan


7. Klik tombol SIMPAN


8. Selesai. kemudian lihat perubahan blog.

Jika sudah berhasil, salah satu contoh gambar kalender yang di sediakan akan tampak seperti contoh dibawah ini :




Adapun bagi anda yang ingin memasang widget kalender Hijriah, salah satu situs yang menyediakan widget tersebut adalah http://hijriah.jentayu.com. Bentuk kalendernya seperti dibawah ini :

Read more »

Cara Membuat Label Animasi Flash "Blogumulus"

Awalnya label animasi flash ini digunakan oleh para pengguna wordpress yang dinamakan Tag-Cumulus yang diciptakan oleh Roy Tanck (www.roytanck.com), Namun seiring berjalannya waktu para blogger bisa menggunakan widget ini yang sekarang diberi nama Blogumulus, atau mungkin sebagian orang menyebutnya dengan Blogumus, ini dikreasikan oleh sahabat blogger sejati yaitu Amanda Fazani (www.bloggerbuster.com).

Oke, langsung saja bagi anda yang tertarik untuk memasang label animasi atau label flash ini, kita langsung menuju pada langkah-langkahnya.

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. KLik tab Edit HTML.
4. Klik tulisan Download Template Lengkap (ini untuk memback-up bila terjadi kesalahan). agar templatenya aman.
5. Cari kode yang mirip dengan kode di bawah ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>

6. Copy kode di bawah ini kemudian taruh kode tersebut (paste) dibawah kode di atas.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> Posted by <a href='http://trik-tips-tutorial.blogspot.com/'>Trik Tips Tutorial</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

7. Klik tombol SIMPAN TEMPLATE

Note :
Agar tampilan label animasi ini serasi dengan templet blog anda, sesuaikan kode-kode berikut dengan templet yang dipakai. Misal:

Merubah lebar, tinggi dan warna background.
Variable untuk lebar dan tinggi ada pada baris script berikut,

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

240 menunjukkan lebar widget.
300 menunjukkan tinggi widget.
#ffffff menjukkan warna background.
100 menunjukkan kecepatan putaran.

Merubah warna text.
Variable untuk lebar dan tinggi ada pada baris script berikut,

so.addVariable("tcolor", "0x333333");

"tcolor" adalah flash variable, jadi pastikan hanya mengganti angkanya saja.

Merubah ukuran font.
Variable untuk lebar dan tinggi ada pada baris script berikut,

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

12 menujukan ukuran font yang digunakan.

~> bila anda menginginkan background yang transparan, maka anda tinggal menghapus tanda // dari script di atas

//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

Nah, silahkan anda ganti kode-kode pada variabel di atas sesuai dengan kebutuhan template anda. Untuk kode-kode warna html, silahkan kunjungi di sini.

Semoga Berhasil.

Read more »

Cara Membuat Read More Otomatis

Fungsi Read More adalah untuk meminimalisasi tampilan pada artikel/postingan yang terlihat pada halaman utama blog. cara membuatnya sangat mudah seperti pada artikel di bawah ini :

1. Cara Membuat Read More di Blog


2. Cara Membuat Read More + Judul Artikel

Namun pada fungsi read more kali ini sedikit berbeda dan lebih modern dengan memudahkan kita untuk tidak lagi membatasi artikel dengan panggilan:

............................................
....<span class="fullpost">
............................................
</span>

dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan yang ada di template posting. Untuk versi Read More Otomatis kali ini akan lebih mudah dan simple, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode seperti diatas. seperti yang di pakai oleh Blog Trik Tips Tutorial ini.

hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman kita sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter.

1. jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan

2, jumlah karakter tanpa image. apabila masih bingung langsung aja kita bahas dengan praktek.


Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

kode yang kita pelajari sebelumnya tampilannya seperti di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More.. &#187;&#187;</a>
</b:if>

Mari Kita Lanjutkan Tutorial Cara Membuat Read More Otomatis.



Pertama, Kita langsung menuju ke kolom EDIT HTML, Cari kode

</head>

kemudian letakan script dibawah ini di atas atau dibawah kode </head>.

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Kalau sudah jangan lupa disimpan terlebih dahulu.


Kedua, Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right'>
<a expr:href='data:post.url'>Read More... <data:post.title/></a>
</span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Tulisan yang berwarna coklat itu menandakan read more + judul posting jika kita tidak menghendakinya tinggal di hapus.
dan tulisan right yang berwarna biru menandakan letak daripada tulisan read more tersebut.
jika left : berarti berada di sebelah kiri. tetapi jika kita ganti menjadi
right : berarti berada di sebelah kanan (seperti pada contoh gambar di atas)

silahkan disimpan dan lihat hasilnya :)

Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 400; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 150; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)

Semoga Berhasil.

Demikianlah artikel tentang Cara Membuat Read More Otomatis
Kembali ke Beranda Blog Trik Tips Tutorial
Semoga Bermanfaat..

Read more »

Cara Mengatur Link pada Sub Pages

Mengatur link pada menu navbar mungkin mudah bagi mereka yang sudah mengenal kode HTML tetapi bagi mereka yang awam akan kode HTML sangatlah rumit dikarenakan banyaknya kode kode html seperti <ul> ------ </ul> dan <li> ------ </li> semuanya itu mungkin rumit bagi mereka yang tidak mengenalnya.

Sebelum kita membahasnya kita ketahui terlebih dahulu bahwa setiap sub page akan berawalan <ul> dan berakhir pada </ul>.

Dan pada link pada menu page, sub page, sub sub page dan sub sub sub page akan berawalan <li> dan berakhir pada </li>

Berikut di bawah ini adalah ilustrasinya :

<div id='NavbarMenu'>
  <ul id='nav'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

    <li><a href='#'>Page</a>
      <ul>                                 /* ------> awal menu pada sub page */
        <li><a href='#'>Sub Page #1&#160;&#160;&#160;&#160;&#187;</a>
          <ul>                             /* ------> awal menu pada sub sub page */
            <li><a href='#'>Sub Sub Page #1&#160;&#160;&#160;&#160;&#187;</a>
              <ul>                         /* ------> awal menu pada sub sub sub page */
                <li><a href='#'>Sub Sub Sub Page #1</a></li>
                <li><a href='#'>Sub Sub Sub Page #2</a></li>
              </ul>                         /* ------> akhir dari menu pada sub sub sub page */
            </li>
            <li><a href='#'>Sub Sub Page #2</a></li>
            <li><a href='#'>Sub Sub Page #3</a></li>
          </ul>                             /* ------> akhir menu pada sub sub page */
        </li>
        <li><a href='#'>Sub Page #2</a></li>
        <li><a href='#'>Sub Page #3</a></li>
        <li><a href='#'>Sub Page #4</a></li>
        <li><a href='#'>Sub Page #5</a></li>
      </ul>                                 /* ------> akhir menu pada sub page */
    </li>

    <li><a href='#'>About Me</a></li>
  </ul>
</div>

Ket :

• Tulisan # Ganti dengan alamat link. diikuti nama link tersebut yaitu dengan mengganti tulisan sub page, sub sub page dan sub sub sub page yang ada di sampingnya.


• Kode "&#160;" adalah "spasi" untuk membatasi jarak dengan kode "&#187;" yang berarti tampilan "»" jadi pada kode "Sub Sub Page #1&#160;&#160;&#160;&#160;&#187;" nantinya akan tampil menjadi "Sub Sub Page #1    »"


• Tulisan NavbarMenu dan nav adalah pemanggil dari kode css pada template. jadi sesuaikan nama tersebut dengan kode css yang anda miliki pada template anda.


• Jika belum mempunyai kode css tersebut mungkin anda harus membuatnya terlebih dahulu sesuai ukuran template anda. tetapi saran dari Trik Tips Tutorial agar anda memakai template yang sudah disertai sub pages pada templatenya kemudian anda tinggal mengedit linknya seperti yang diterangkan di atas.

Demikianlah artikel tentang Cara Mengatur Link pada Sub Pages
Kembali ke Beranda Blog Trik Tips Tutorial
Semoga Bermanfaat..

Read more »

Cara Memasang Google Translate (Penterjemah Bahasa)

Luasnya jangkauan dunia internet hingga menyeluruh dunia bisa memungkinkan pengunjung dari negara lain menemukan blog kita dan membaca artikel yang mereka cari tetapi bagi mereka yang tidak mempunyai bahasa yang sama akan sulit untuk memahami artikel kita.

Untuk mengatasi hal tersebut yang kita perlukan hanyalah widget translate atau alat penterjemah bahasa pada setiap website atau blog.

Alat penterjemah google atau Google translate adalah solusi yang paling tepat untuk mengatasi terjemahan bahasa dari bahasa kita ke bahasa lainnya.

Berarti dengan menggunakan widget Google translate anda tidak perlu lagi pusing dengan persoalan bahasa, silahkan anda berkreasi dalam blog/web anda dengan bahasa anda sendiri dan biarkan google translate menterjemahkan ke dalam bahasa lain. Widget Google Translate bisa anda dapatkan di http://translate.google.com.

Atau jika anda ingin langsung memilikinya langsung ikuti langkah dibawah ini :

Berikut cara memasang widget google translate di blogger

1. Silahkan login ke blogger dengan ID anda
2. Klik Tata Letak
3. Klik tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik tanda plus (+) untuk HTML/Javascript
6. Copy paste kode google translate ke dalam kolom yang tersedia
   
   

   <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>

   
   
7. Klik tombol Simpan


8. Selesai

dan anda dapat melihat hasilnya seperti dibawah ini :

	Gadgets powered by Google

Atau anda juga bisa memasang widget translate terbaru dari google dengan kode :

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Lihatlah perbedaannya.. Demikianlah artikel tentang Cara Memasang Google Translate (Penterjemah Bahasa)
Kembali ke Beranda Blog Trik Tips Tutorial
Semoga Bermanfaat..

Read more »