How To Create a Circle in CSS

How To Create a Circle in CSS atau membuat sebuah bagian template menjadi berbentuk bulat,bundar dan sebagainya. Tips ini hampir sama dengan Tips sebelumnya yaitu How To Rounded Corner in CSS , tentang membuat sudut-sudut melingkar pada bagian template, bedanya tips kali ini yaitu membuat bagian template menjadi bulat atau bundar seluruhnya. sebagai contoh Blog Tips and Trick membuat bagian header template yang dibagi 3 bagian, dan 2 dari bagian header tersebut manjadi bulat seperti pada gambar dibawah ini.

Gambar 0.1

Untuk membuat agar bagian header tersebut menjadi bulat atau berbentuk lingkaran. kita perlu menggunakan kode -Moz-Border-Radius- pada kode CSS yang ada pada halaman HTML template kita pada bagian header tersebut. contohnya seperti dibawah ini.

#header-wrapper1 {
float: left;
margin: 12px 0px 12px 0px;
padding: 0px 0px 0px 0px;
width: 170px;
height: 170px;
background: $headerbgColor;
border-top: 10px solid #747474;
border-bottom: 10px solid #747474;
border-left: 10px solid $headerBorderColor;
border-right: 10px solid $headerBorderColor;
-moz-border-radius-topleft: 95px;
-moz-border-radius-topright: 95px;
-moz-border-radius-bottomleft: 95px;
-moz-border-radius-bottomright: 95px;
}

Pada contoh kode diatas yang berwarna kuning adalah kode radius yang akan membuat header tersebut menjadi bulat, dan kode yang berwarna biru adalah ketebalan garis pinggir atau border tersebut. bila kamu tidak mau memakai garis pinggir, kamu bisa menghapus kode yang berwarna biru tersebut. yang penting untuk membuat header tersebut menjadi bulat adalah menentukan nilai ukuran dari setiap -Moz-Border-Radius-Width( Lebar) dan Height(tinggi).

pada dasarnya, setiap template yang kamu download dan kamu gunakan. biasanya jarang terdapat  ukuran Height pada setiap bagian template tersebut. seperti pada bagian Header sidebar dll. karena dapat membatasi jumlah widget pada bagian tersebut. bila kamu ingin membuat bagian dari template tersebut menjadi bulat, hal pertama yang haru kamu lakukan adalah membuatnya menjadi kotak terlebih dulu dengan memberi nilai ukuran height dan width yang sama. setelah itu kamu masukan kode -moz-border-radius- nya. contohnya untuk ukuran 170px; X 170px. saya memberi nilai 95px pada setiap sisi radiusnya. Untuk lebih jelasnya silahkan kamu praktekkan tips ini seperti contoh kode di atas. bila kamu berhasil membuat bagian dari template tersebut menjadi bulat, kamu bisa memasukan gambar yang bulat juga seperti contoh gambar speaker dibawah ini.

Sehingga menjadi seperti gambar dibawah ini

Gambar 0.3

Selamat Mencoba dan semoga bermanfaat, mohon maaf bila terapat kekurangan pada postingan kali ini, maklum masih pemula nieh....Salam blogger mania.

Readmore

Add your Comment 1 comments

How to Create Rounded Corner in CSS

How to Create Rounded Corner in CSS" atau bagaimana caranya untuk membuat sudut melingkar atau bulat pada kode CSS. Tips ini cocok sekali bagi anda yang ingin agar tampilan templatenya terlihat 3D.dengan sudut-sudut melingkar pada setiap bagian templatenya, seperti sidebar, header dll. Untuk membuat setiap bagian body template kita agar mempunyai sudut melingkar, caranya yaitu kita perlu menambahkan kode CSS -Moz-Border-Radius, pada bagian body template tersebut. misalnya kita ingin membuatnya pada bagian sidebar. caranya yaitu edit kode CSS sidebar pada halaman HTML template kamu dengan menambahkan kode -Moz-Border-Radius- seperti contoh dibawah ini.

#sidebar1 .widget {
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 5px;
background: $sidebar1bgColor;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;
}

Maka hasilnya akan seperti gambar dibawah ini : maaf gambar ini hanya contoh loch....

Contoh gambar sidebar diatas menggunakan kode -moz-border-radius- pada setiap sisinya dengan ukuran 20px atau 20pixel. bila kamu ingin membuat agar sudut bulatan tersebut hanya pada sebagian sisi sidebar saja. kamu hanya cukup menggunakan 1, 2 atau tiga bagian dari kode radius tersebut.

contohnya untuk semua sisi

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-moz-border-radius-bottomright: 20px;

Contoh untuk sisi sebelah kiri atas dan kanan atas

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;

Pada dasarnya  kita hanya cukup menambahkan kode -moz-border-radius- ditambah dengan nilai ukuran dari radius tersebut dan  sisi yang kita inginkan, seperti Topleft, Topright, Bottomleft, Bottomright dll.

Ok saya rasa cukup sekian dulu postingan Blog Tips and Trick tentang membuat sudut melingkar dengan kode CSS kali ini. mohon maaf bila terdapat kekurangan pada setiap isi postingan saya. maklum masih pemula.... semoga bermanfaat dan salam Blogger mania.

Readmore

Add your Comment 1 comments

How To Create 3D Template

How to create 3D Template, atau bagaimana caranya membuat agar template kita terlihat 3D. cara untuk membuat bagian dari body template kita agar terlihat 3D, yaitu kita hanya perlu menambahkan nilai ukuran border dan perpaduan warna pada pada bagian template tersebut. ada juga cara lainnya, yaitu dengan memasukan background gambar yang sudah berbentuk 3D pada bagian template tersebut.

Yang akan Blog Tips and Trick bahas kali ini, yaitu tentang cara membuat agar tampilan dari template kita terlihat 3D tanpa menggunakan Background gambar. contohnya untuk membuat bagian sidebar, Headder, dll  dari template tersebut terlihat 3D seperti contoh pada gambar dibawah ini.

Agar bagian template kita terlihat 3D seperti pada contoh gambar diatas. caranya adalah  sebagai berikut ini.

1. Misalnya kita akan membuat bagian sidebar kita terlihat 3D. yang harus kamu lakukan adalah Edit kode CSS sidebar tersebut pada halaman HTML template kamu dengan memberi nilai ukuran border dan paduan warna pada background dan setiap sisi sidebar itu, contohnya :

#sidebar1 .widget {
margin: 0px 0px 5px 0px;
padding: 5px 5px 5px 5px;
background: #0000c0;       /*-Background = Biru --*/
border-top: 10px solid #6666ff;   /*-Border atas = Biru Muda-*/
border-bottom: 10px solid #6666ff;  /*-Border Bawah = Biru Muda-*/
border-left: 10px solid 1414b0;  /*-Border kiri = Biru Tua--*/
border-right: 10px solid 1414b0;  /*-Border kanan = Biru Tua--*/
}

2. Terus misalnya pada bagian Header sidebar tersebut ingin dibuat 3D juga, caranya yaitu :

#sidebar1 h2  {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
text-align: center;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: none;
text-decoration: none;
background: #cc0000;  /*-Background = Merah --*/
border-top: 10px solid  #ff7070;   /*-Border atas = Merah Muda--*/
border-bottom: 10px solid  #ff7070;  /*----Border Bawah = Merah Muda-*/
border-left: 10px solid  #b00000;   /*-Border kiri = Merah Tua-*/
border-right: 10px solid  #b00000;   /*Border kanan = Merah Tua--*/
}

Maka hasilnya akan seperti pada gambar dibawah ini.

Pada dasarnya untuk membuat bagian template tersebut agar terlihat 3D, kita hanya perlu memberi ukuran border dan perpaduan warna saja, silahkan kamu coba praktekkan tips ini pada template kamu. dan bila kamu berminat dengan template 3D karya Blog Tips and Trick, kamu bisa lihat contoh templatenya dan mendownloadnya disini.  saya rasa cukup sekian dulu postingan Blog Tips and Trick tentang cara membuat tampilan template 3D kali ini. semoga bermanfaat dan salam Blogger mania.

Readmore

Add your Comment 0 comments

Teks Area dengan Flip Background Image

Teks area dengan Flip Background Image, Pada postingan kali ini, Blog tips and Trick akan membahas tentang cara membuat text area dengan 2 background gambar yang akan berubah dengan mouse over, mungkin para blogger ataupun anda sudah tak aneh lagi dengan yang namanya Teks area yang sering anda lihat pada setiap blog ataupun website, dimana terdapat beberapa tulisan yang terletak pada kotak teks area tersebut. tapi bagaimana dengan kotak teks area yang mempunyai background gambar serta warna tulisan yang bisa berubah dengan mouse over. mungkin sebagian dari anda masih banyak yang belum tahu tentang trik ini. contohnya kurang lebih seperti dibawah ini, coba anda gerakan mouse anda ke kotak area dibawah ini, Tulisan dan gambar backgroundnya akan berubah dengan digerakkannya mouse anda.

Apa sih Shoutbox itu ? Shoutbox adalah sebuah widget yang mempunyai fungsi yang tidak jauh berbeda dengan chatting, dimana semua pengunjung ataupun pemilik blog itu sendiri.bisa saling mengirimkan pesan-pesan singkat seperti perkenalan, pemberitahuan dan lain sebagainya. Bila kita melihat blog ataupun website yang sudah memasang shoutbox, biasanya shoutbox ini terletak pada halaman depan blog ataupun website tersebut, karena dengan adanya Widget shoutbox ini sangat memudahkan bagi para pengunjung untuk berkomunikasi secara langsung dengan pemilik blog ataupun dengan pengunjung lainnya secara bersamaan

Bagi anda yang berminat untuk membuat teks area seperti pada contoh di atas pada begian postingan anda, caranya adalah sebagai berikut ini.

1. Anda copy semua kode dibawah ini, lalu paste kode tersebut tepat dibawah kode ]]></b:skin> pada bagian halaman Html template anda.

<style>
textarea.imageOne{
background-color:#000000;
background-image:url(Masukan Link gambar anda disini);
color:#00ff00;
}
textarea.imageTwo{
background-color:#000000;
background-image:url(Masukan Link gambar anda disini);
color:#ff0000;
}
</style>

2. Setelah itu klik simpan/save.


Keterangan :.

Silahkan anda rubah tulisan yang dicetak tebal dan berwarna kuning diatas sesuai dengan yang anda inginkan. misalnya  pada bagian  textarea.imageOne, tertulis background-color:000000; yaitu untuk warna background. background-image:url(Masukan Link gambar ana disini); yaitu untuk background gambar, silahkan anda masukan link gambar yang anda inginkan. dan color:ff0000; yaitu untuk warna Teks. semua kode yang ada pada bagian bawah textarea.imageOne, yaitu gambar ataupun warna Teks yang akan tampil pertama dan kode yang terdapat dibawah textarea.imageTwo, yaitu yang akan tampil ketika mosue digerkan atau Mouse over.

3. Setelah anda selesai mencopy, meng-edit dan mempaste semua kode diatas. sekarang adalah cara memasukan kode Teks area kedalam postingan. caranya yaitu anda copy kode dibawah ini terus anda masukan kedalam postingan anda.

<textarea
 rows="12" cols="60"
 class="imageOne"
 onMouseOver="this.className='imageTwo'"
 onMouseOut="this.className='imageOne'">

 Tulis teks yang anda inginkan disini 

</textarea>

Keterangan :

Bila anda ingin merubah ukuran Teks area tersebut. silahkan anda ganti ukuran rows dan cols-nya seperti yang dicetak tebal dan berwarna kuning pada bagian kode di atas.  rows yaitu untuk ukuran tinggi dan cols untuk ukuran lebar kotak teks area tersebut.

4. Selesai.

Silahkan mencoba dan semoga bermanfaat. salam blogger mania.

Readmore

Add your Comment 0 comments

Cara Membuat Google Sitemap

Cara membuat google sitemap untuk blogger blogspot, caranya yaitu pertama kamu login ke layanan gratis google yaitu Webmasters tools google dengan account google kamu. setelah itu kamu klik Add  site, terus masukan url blog kamu pada kolom add site. setelah kamu klik add site, kemudian dari pihak webmasters google akan memberikan kode berupa meta content, dengan tujuan untuk memverifikasi  apakah kamu itu adalah pemilik website tersebut atau bukan. kurang lebih contoh meta contentnya seperti dibawah ini..

<meta content='+u636AvikZsTh2E3QLuMozuF7mFa8+2c/dJw3HTZpGo=' name='verify-v1'/>

Yang perlu kamu lakukan adalah, copy kode tersebut, terus kamu paste ke ke dalam halaman HTML template blog kamu, tepat dibawah kode <head>. contoh lengkapnya seperti dibawah ini.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
<meta content='+u636AvikZsTh2E3QLuMozuF7mFa8+2c/dJw3HTZpGo=' name='verify-v1'/>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

Setelah kamu paste kode tersebut pada halaman html kamu juga setelah kamu klik simpan/save template kamu, kemuadian kamu kembali ke webmaters tools google. untuk melakukan verifikasi, dengan mengklik verify. bila status website kamu telah terverifikasi oleh webmasters google. langkah selanjutnya yaitu kamu klik Add General Web Sitemap . pada pilihan Add Sitemap. kemudian masukkan pilihan sitemap dibawah ini,

1. Atom.xml
2. Rss.xml
3. feeds/posts/default
4. feeds/posts/default?alt=rss
5. feeds/posts/default?orderby=updated
   

Biasanya url website kamu sudah tertulis sebelum kolom isian add sitemap. misalnya :http://blog-tips-and-trick.blogspot.com/   ,jadi bila kamu memasukan salah satu dari pilihan sitemap diatas. nantinya akan menjadi http://blog-tips-and-trick.blogspot.com/Atom.xml , Kamu bisa pilih salah satu dari pilihan sitemap di atas, atau kamu juga memasukkan semuanya. yaitu untuk cadangan. siapa tahu salah satu dari sitemap diatas gagal. karena pada pilihan sitemap no 1 dan 2, terkadang suka gagal. jadi baiknya kamu copy semua pilihan sitemap di atas terus paste ke dalam kolom add sitemap.

setelah itu kamu itu tunggu hasilnya dari google untuk beberapa saat, apakah dari semua pilihan sitemap diatas ada yang gagal atau tida, bila ada yang gagal kamu bisa menghapusnya.

Ok saya rasa cukup sekian dulu sekilas tentang cara membuat google sitemap untuk blogger blogspot kali ini, mohon maaf bila banyak kekurangan dalam postingan saya diatas, maklum masih pemula banget...salam blogger mania

Readmore

Add your Comment 0 comments

Memasang Gambar Animasi Pada Judul Posting

Blog Tips and Trick kali ini akan membahas cara memasang gambar animasi pada judul postingan.format gambar yang digunakan adalah format gift. contohnya seperti dibawah ini.

Untuk yang berminat cara memasang gambar animasi tersebut pada judul postingan yaitu sebagai berikut.

1. Setelah anda logi ke Blogger.com, selanjutnya anda masuk ke menu Tata Letak/Layout>>Edit Html

2. Pada halaman Html, anda cari kode .post h3. atau lebih lengkapnya  seperti dibawah ini.

.post h3 {
background:url(Masukan Link gambar anda disini) no-repeat;
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 35px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: none;
text-align: left;
line-height: 1.4em;
/* text-transform: uppercase; */
border-bottom: 2px solid $posttitleBorderColor;
}

3. Setelah anda menemukan kode seperti di atas, selanjutnya anda masukan link gambar animasi anda pada background url seperti tulisan yang saya beri warna kuning di atas.sebagai contoh Blog Tips and Trick memakai animasi gambar Emoticon dengan link.

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif ,

maka anda tulis linknya seperti ini.

backround url (http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif) no-repeat;

4. Klik simpan/save.

5. Selesai

Silahkan anda buka blog anda untuk melihat hasilnya.

Selamat Mencoba dan semoga bermanfaat, salam blogger mania.

Readmore

Add your Comment 0 comments

Widget Label Animasi Vertikal

Blog Tips and Trick Kali ini akan membahas tentang bagaimana caranya membuat widget label animasi dengan menggunakan efek Marquee. Semua tulisan label seperti contohnya : Tips and Trick, Make Money dan lain-lainnya akan bergerak ke atas secara berulang-ulang. Tulisan label itu juga akan berhenti bila pointer mouse kita di arahkan ke tulisan tersebut dan akan bergerak kembali bila pointer mouse kita dijauhkan lagi. Contoh dari tampilannya bisa anda lihat seperti yang ada dibagian samping blog saya ini.

Untuk anda yang gemar mempercantik tampilan blognya, tak ada salahnya bila anda mencoba tips yang satu ini.cara untuk membuat Widget Label animasi vertikal tersebut adalah sebagai berikut ini.

1. Setelah anda login ke Blogger, selanjutnya anda masuk ke menu Tata letak/Layout >> elemen halaman. terus anda tambahkan gadget baru, yaitu gadget Html/javascript

2. Copy dan paste semua kode dibawah ini ke gadget Html anda. tapi sebelumnya anda edit terlebih dahulu beberapa bagian kode dibawah ini.

<span style="text-align: center;font-family:georgia;font-size:130%;color:white;"><marquee onmouseout="this.start()" direction="up" padding="5px" behavior="scroll" scrollamount="2" onmouseover="this.stop()" scrolldelay="10" style="text-align: left;" height="200px" bgcolor="black" width="145px">

<li><a href="Masukan Link label anda disini"> Tulis nama Label disini</a><li>

<li><a href="Masukan Link label anda disini"> Tulis nama Label disini</a><li>

</marquee></span>

Keterangan :

Silahkan anda edit beberapa bagian kode yang saya beri warna kuning di atas. misalnya ukuran font atau teks yang tadinya  130%  menjadi  150% Sesuai keinginan anda. untuk warna teks yang tadinya White  misalnya anda ganti dengan blue dan sebagainya. jangan lupa untuk menyesuaikan ukuran widget tersebut dengan amerubah ukuran width dan height nya.tergantung ukuran dimana anda akan menempatkannya. jadi semuanya tinggal anda sesuaikan saja.

Untuk isi konten seperti nama label dan link labelnya silahkan anda masukan ke bagian kode yang berwarna biru di atas. untuk mencari Link label,baiknya anda gunakan dulu widget label standar dari blogger.com. setelah semua linknya anda dapat baru anda hapus kembali widgetnya.

bila anda ingin memperbanyak isi konten, anda cukup mengcopy  kode seperti dibawah ini dan anda paste sebelum kode </marquee>. kode yang diperbanyak yaitu.

<li><a href="Masukan Link label anda disini"> Tulis nama Label disini</a><li>

3. klik simpan/save
4.selesai, silahkan anda lihat hasilnya pada blog anda.

kurang lebih tampilannya seperti dibawah ini.

Tips And Trick

Blogging Tips

Widget Tips

Make Money Tips

File Hosting Tips

SEO Tips

Web Hosting Tips

Free Template

Widget Colection

Tips And Trick

Silahkan Mencoba dan semoga bermanfaat, salam blogger mania.

Readmore

Add your Comment 1 comments

Widget Donasi Paypal Button

Panduan Cara Memasang Donasi Paypal Button di Blog

Pada posting kali ini saya akan menjelaskan bagaimana caranya memasang ataupun menambah Button Donasi Paypal pada halaman Blog. Bila anda telah memiliki account paypal maka anda sudah dapat memasukan atau menambahkan Button Donasi Paypal ke halaman Blog anda. jika anda belum memiliki account paypal maka anda harus daftar terlebih dulu. untuk mendaftar dan memiliki account paypal anda bisa klik disini. cara untuk menambahkan Button Donasi Paypal adalah sebagai berikut :

1. Login ke paypal dengan memasukan Email paypal anda.

2. Setelah itu anda klik 'Merchant Services' tab Pada bagian atas halaman seperti pada gambar dibawah berikut :

3.Gerakan mouse anda dan klik "Donation" pada tampilan menu disebelah kanan

4. Setelah anda klik donation maka akan melihat menu drop down yang isinya terdapat beberapa pilihan seperti product, servis, subcription & recurring billing, donations, dan gift certificates. anda cukup pilih saja yang donations.

5. Setelah itu anda klik create Button pada bagian bawah halaman.

6. Setelah anda klik create Button maka akan tampil halaman seperti pada gambar dibawah ini. dan yang anda harus lakukan yaitu cukup mengcopy semua code HTML nya.

7. Setelah mengcopy code HTML nya anda login ke Blogger dan tambahkan elemen halaman pada Blog anda dan paste semua kode tersebut.

8. Klik simpan/save dan selesai.

Buka blog anda untuk melihat hasilnya. semoga bermanfaat dan salam blogger mania.

Readmore

Add your Comment 0 comments

Tips Memasang Widget Shoutbox di Blog

Apa sih Shoutbox itu ? Shoutbox  adalah sebuah widget yang mempunyai fungsi yang tidak jauh berbeda dengan chatting, dimana semua pengunjung ataupun pemilik blog itu sendiri.bisa saling mengirimkan pesan-pesan singkat seperti perkenalan, pemberitahuan dan lain sebagainya

Bila kita melihat blog ataupun website yang sudah memasang shoutbox, biasanya shoutbox ini terletak pada halaman depan blog ataupun website tersebut, karena dengan adanya Widget shoutbox ini sangat memudahkan bagi para pengunjung untuk berkomunikasi secara langsung dengan pemilik blog ataupun dengan pengunjung lainnya secara bersamaan

Untuk anda yang berminat memasang widget shoutbox ini pada Blog ataupun website anda. Caranya adalah sebagai berikut :

1. Buka situs http://www.shoutmix.com kemudian pada halaman website tersebut anda klik CREATE YOUR SHOUTBOX NOW. Seperti pada gambar dibawa ini.

2. Setelah itu anda akan dibawa ke halaman pendaftaran seperti dibawah ini, dimana pada halaman tersebut anda harus mengisi semua data yang diperlukan dengan benar.

3. setelah anda mengisi data-data anda pada halaman pendaftaran tadi, kemudian anda akan diminta untuk memilih style ataupun bentuk tampilan shoutbox yang akan anda pasang pada blog anda nantinya. Seperti pada gambar dibawah ini.

4. Setelah anda pilih salah satu style shoutbox seperti pada gambar di atas dan setelah anda mengisi  kode verifikasinya juga maka proses pembuatan account shoutbox anda telah selesai. Dan anda sudah bisa memasang shoutbox  dengan style yang anda pilih tadi pada blog anda

5. Untuk memasang shoutbox pada blog anda yaitu dengan cara, klik Go to my control panel now” setelah itu pada bagian menu Quick Start anda klik  Get Codes untuk mendapatkan code widgetnya. seperti pada gambar seperti dibawah ini.

6. Setelah anda klik Get codes kemudian anda pilih Place Shoutbox on webpage. Terus Copy semua kode HTML yang ada dalam kotak Generated Codes.

7. Setelah anda copy semua kode tersebut anda bisa pastekan dulu kode tersebut untuk sementara  ke notepad, microsoft word dsb.

8. Login ke blogger terus klik Layout dan klik page element untuk menambah widget baru pada blog anda dengan cara klik add a Gadget terus anda pilih yang HTML/JavaScript. Seperti pada gambar dibawah ini :

9. Setelah itu anda paste kan semua kode shoutbox yang anda dapatkan sebelumnya seperti contoh pada gambar dibawah ini.

10. Klik save dan setelah itu maka proses pembuatan widget shoutbox anda telah selesai. Untuk melihat hasilnya anda tinggal klik view blog. Gampang kan hehehe….

Ok Cukup sekian dulu postingan Blog Tips and Trick tentang cara membuat ataupun memasang shoutbox di blogger kali ini. Semoga bermanfaat dan salam blogger mania.

Readmore

Add your Comment 1 comments

Cara Membuat Menu Tab View

Cara Membuat Menu Tab View

gambar : 1

Untuk anda yang ingin membuat Menu Tab View seperti gambar di atas untuk halaman blog anda, caranya adalah sebagai berikut :

01. Save template anda terlebih dulu yaitu dengan mendownload full template anda. kemudian Buka menu edit template atau Layout, terus buka edit HTML. jangan lupa kasih tanda centang pada Expand widget template. setelah itu cari kode ]]></b:skin> pada halaman HTML dengan menekan ctrl+F dan paste kan ]]></b:skin> tersebut pada kotak find dan tekan enter  contoh nya seperti pada gambar

berikut ini :

gambar : 2

2. Langkah berikutnya adalah copy semua kode dibawah ini terus paste kan tepat di atas ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;

border-top: 1px solid #d9e3ff;
border-left: 1px solid #d9e3ff;
border-right: 1px solid #d9e3ff;
border-bottom: 1px solid #d9e3ff;
font-family: "verdana", Serif;
font-weight: 900;
color: #ffffff;                   /* Warna text menu tab */
background-color: #ca0a0a;  /* Warna background menu tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #1200ff;  /* Warna background menu tab yang active */
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #d9e3ff;
border-right: 1px solid #d9e3ff;
border-bottom: 1px solid #d9e3ff;
overflow: hidden;
background-color: #ffffff;  /* Warna background menu  halaman */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Catatan : semua kode warna yang saya tandai pada kode diatas bisa anda rubah sesuai keinginan anda. contoh anda ganti dengan kode #ffffff untuk warna putih ataupun dengan kode warna lainnya.

3. Setelah anda mamasukan semua kode di atas kemudian anda cari kode </head> setelah itu copy kode berikut ini dan paste tepat di atas kode </head>.

<script src='http://www.geocities.com/damn_lunchix/tabview.js' type='text/javascript'/>

4. Klik simpan atau save template anda.

5. Setelah anda selesai mengcopy dan mempastekan semua kode-kode diatas pada halaman HTML template anda. langkah selanjutnya anda buka menu elemen halaman dan klik add a Gadget dan pilih seperti pada gambar berikut ini :

gambar : 3

gambar : 4

gambar :5

6. Kemudian Copy dan paste semua code berikut ini pada gadget HTML tersebut seperti contoh pada gambar 5 diatas.

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 300px;" class="Tabs">

<a class="Active" href="javascript:tabview_switch('TabView',%201);">Recent Post</a>

<a class="" href="javascript:tabview_switch('TabView',%202);">Most Popular</a>

<a class="" href="javascript:tabview_switch('TabView',%203);">Wallpaper</a>

</div>

<div style="width: 298px; height: 150px;" class="Pages">

<div style="overflow: auto; height: 150px; display: block;" class="Page">

<div class="Pad">

</ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>

</ol>

</div>

</div>

<div style="overflow: auto; height: 150px; display: none;" class="Page">

<div class="Pad">

<ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
</ol>

</div>

</div>

<div style="overflow: auto; height: 150px; display: none;" class="Page">

<div class="Pad">

<ol>

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>
<ol>

</div>

</div>

</div>

</div></form>

<script type="text/javascript"><br/>
<br/>tabview_initialize('TabView');<br/><br/></script>

Catatan : Untuk kode yang diberi warna kuning diatas bisa anda rubah sesuai keinginan anda contoh,

<div style="width: 298px; height: 150px;" class="Pages"> . 298px adalah ukuran lebar gadget tersebut

sedangkan 150px adalah ukuran tinggi gadget tersebut.contoh berikutnya adalah tentang

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li> ini juga anda rubah sesuai dengan yang anda iningkan. Masukan Link yang di tuju disini yaitu masukan link yang anda tuju misalnya link untuk alamat posting anda ataupun link alamat yang lain. judul posting disini myaitu untuk judul postingan anda ataupun yang lainnya. Bila anda ingin memperbanyak tampilan daftar judul posting ataupun yang lainnya. anda cukup mengcopy dan memperbanyak kode :

<li><a href="Masukan Link yang di tuju disini">judul posting disini</a></li>

seperti contoh yang saya berikan pada kode diatas  yaitu untuk 3 judul content untuk tiap halaman.

7. Selesai dan anda lihat blog anda untuk melihat hasilnya.

Ok saya rasa cukup sampai disini postingan saya tentang bagaiman caranya membuat menu tab view.
Semoga bermanfaat dan salam blogger mania.

Readmore

Add your Comment 0 comments

Tips Merubah Domain Blogspot Menjadi CO.CC

Bila anda mempunyai Blog dari Blogger.com yaitu penyedia blog milik Google tentunya Blog anda mempunyai nama sub domain dari blogspot misalnya http://namaanda.blogspot.com sebenarnya nama sub domanin tersebut  bisa dirubah, misalnya  menjadi  “http://www.namaanda.co.cc” .

Bila anda menginginkan mengganti nama sub domain blog anda menjadi co.cc caranya adalan sebagai berikut ini :

1.Sebelum anda melanjutkan ke tahap pendaftaran account untuk mendapatkan domain co.cc, anda harus menentukan dulu nama url yang anda inginkan.caranya yaitu clik disini, nanti akan ada tampilan seperti pada gambar dibawah ini :

2.Pada gambar tersebut anda harus memasukan nama url yang anda inginkan, misalkan anda menginginkan nama url tersebut www.namaanda.co.cc maka anda ketik pada kotak isian dengan namaanda kemudian klik chek availability

3.Setelah anda mengklik chek availability, nanti anda akan melihat apakah nama yang anda masukan tersebut tersedia ataukah tidak. bila tidak tersedia anda harus memasukan nama yang lainnya.bila nama anda yang anda pilih ternyata tersedia maka anda tinggal mengklik continue registration.

4.Setelah anda selesai melakukan registrasi tahap selanjutnya adalah menyetting domain anda, caranya adalah masuk ke menu Domain Setting >> Manage Domain >> Setup.

5.Pada menu setup, anda abaikan dulu menu manage DNS, anda langsung klik menu ke 2. yaitu menu Zona Record. pada menu ini anda harus mengisi beberapa data dengan rincian sebagai berikut :

Host : Isi dengan nama url yang anda pilih sebelumnya, misalkan www.namaanda.co.cc
TTL : 1D ( tidak perlu dirubah )
Type : pilih CNAME
Value : isi dengan ghs.google.com

kurang lebih hasilnya seperti pada gambar dibawah ini :

Bila anda telah selesai anda tinggal klik setup.

6. Setelah anda selesai menentukan nama domain dan settingnya,kemudian anda lanjutkan ke setting blogspot pada account blogger.com anda.caranya yaitu sebagai berikut :

• Masuk / login ke “blogger.com” dengan account anda tentunya.

• Setelah login kemudian anda masuk ke menu setting / pengaturan.

• Lalu klik menu Publishing / publikasikan

• Pada menu publishing anda klik “Switch to: • Custom Domain”
  

• Klik already “Already own a domain? Switch to advanced settings”
  

• Isikan pada kolom “Your Domain” dengan “domain co.cc”" yang anda daftarkan sebelumnya misal “www.namaanda.co.cc”
  

• Pada pilihan Use a missing files host? pilih no
  

• Masukan Code Verivication dan klik save setting
  

Setelah selesai anda tinggal menunggu proses sincronisasinya dari co.cc ke Blogspot maksimal 24 jam setelah itu anda sudah bisa mengakses url “blogspot.com” anda dengan nama domain co.cc anda tersebut, yang tadinya http://namaanda.blogspot.com/ menjadi http://namaanda.co.cc/.

Silahkan mencoba dan semoga bermanfaat. salam blogger mania..

Readmore

Add your Comment 1 comments

Mempromosikan Blog ke Chitika

Chitika sebenarnya bukanlah sebuah program yang baru, dan merupakan sebuah program yang telah lama berdiri. Mungkin teman-teman disini juga sudah banyak yang mengenal dan menggunakan program chitika ini.

CHITIKA berbeda dengan adsense karena iklannya perpaduan dari iklan text dan icon gambar, jadi iklan adsense dan chitika bisa dipasang bersamaan dan tidak akan melanggar TOS dari adsense. Nilai payout yang harus dicapai oleh chitika sekitar $50 melalui paypal, sedikit lebih rendah dari adsense.

Kelebihan dari chitika dari adsense adalah nilai click through ratenya (CTR) yang bisa dibilang lebih besar dari rata-rata nilai CTR adsense. Besarnya nilai CTR chitika memang sangat sesuai karena mereka membidik pasar orang US dan Canada. Jadi ketika seseorang yang berasal dari US atau Canada berkunjung ke website atau blog kita lewat search engine iklan dari chitika akan muncul. Memang jauh lebih sulit dari adsense yang bisa muncul kapan saja dan siapapun yang berkunjung. Inilah yang sebenarnya membuat chitika menjadi salah satu jenis iklan yang disukai advertiser karena targeted traffic.

Untuk teman-teman disini yang ingin mencoba daftar ke chitika sebenarnya persyaratannya mudah-mudah saja, kalau berdasarkan pengalaman saya untuk bisa daftar ke chitika cukup memenuhi :

a. Blog atau site yang berbahasa inggris murni.

b. Postingan blog sekitar 10 posts.

c. Alexa cukup dibawah 2 jutaan juga sudah diterima.

d. Bisa dipasang dengan blog yang ber-adsense.

Bagaimana sebenarnya bentuk iklan chitika ini ? Dapat dilihat pada screenshot dibawah.

Ketika kita sudah memasang kode html chitika nantinya iklan chitika tidak akan muncul, kecuali kalau kita melakukan test seperti ini di blog atau site.

http://www.namadomainanda.com/#chitikatest=car

untuk mengetest iklan yang muncul bila kata pencarian di search engine adalah “car”

http://www.namadomainanda.com/#chitikatest=mortage

untuk mengetest iklan yang muncul bila kata pencarian di search engine adalah “mortage”


Ok, mungkin sudah cukup jelas dengan CHITIKA kali ini. Bila ingin bergabung klik disini.
semoga bermanfaat, salam blogger mania

Readmore

Add your Comment 0 comments

Tips Mempromosikan Blog Ke SE

Siapa yang tidak kenal dengan search engine Google, Yahoo, AOL, MSN dan ODP Dmoz (Web directory), 5 search engine inilah yang harus anda focuskan dalam promosi blog anda, jika anda melihat statistik pada gambar disamping tentu ada bisa menyimpulkan sendiri yang mana search engine yang harus anda opitmalkan.

Dalam posting Blog Tips and Trick kali ini tidak menjelaskan secara rinci bagaimana cara mengoptimalkannya tapi anda akan memahami bagaimana cara melakukan promosi dengan mendaftarkan blog anda ke search engine Google, Yahoo dan MSN serta bagaimana cara sukses agar blog anda terdaftar di ODP Dmoz.

Cara Daftar ke Google:

Google bisa dikatakan sebagai Rajanya search Engine, saya sangat menyarankan kepada anda untuk mendaftarkan blog anda pertamakali di search engine ini.Caranya Klik http://www.google.com/addurl/ Kemudian pada formulir pendaftaran Masukan Alamat Blog pada kolom URL dan beri komentar pada kolom comment sesuai dengan tema blog anda.

Cara Daftar ke Yahoo:

Yahoo sebagai search engine kedua yang banyak digunakan, untuk mendaftarkan Blog anda ke Yahoo ikuti langkahnya sebagai berikut. Sebelum anda mendaftarkan blog anda ke Yahoo pastikan anda sudah memiliki account Yahoo, seperti namaanda@yahoo.com jika anda sudah memilikinya anda tinggal klik http://siteexplorer.search.yahoo.com/submit
kemudian pada kotak isian pertama silahkan memasukan alamat blog anda,


Contoh :

http://www.namaanda.blogspot.com

Atau

http://www.namaanda.wordpress.com

Untuk pilihan kedua anda diminta memasukan alamat feed anda seperti Contoh :

Http://www.namaanda.blogspot.com/atom.xml

Atau

http://www.namaanda.wordpress.com/rss.xml

kemudian tekan tombol submit.

Cara daftar ke MSN :

Dalam statistik Search Engine, MSN milik Microsoft ini juga termasuk banyak digunakan jadi kalau bisa blog anda juga harus terdaftar di Search Engine ini. Cara daftarnya yaitu masuk ke:
http://search.msn.co/docs/submit.aspx?FORM=WSDD2
lalu anda tinggal memasukan kode verifikasi dan memasukan alamat blog anda.

Cara Praktis Mendaftarkan blog ke Search Engine

Cara yang paling praktis adalah dengan menggunakan auto web submit. Ada banyak layanan gratis yang menyediakan layanan untuk pendaftaran, anda bisa mencarinya sendiri di search engine atau tanyakan langsung ke Google. untuk memudahkan dalam mendaftar ke Search engine, saya sarankan anda menggunakan layanan Mypagerank Layanan lain yang dikhususkan dalam pencarian blog diantaranya adalah Google Blog Search dan Blogdigger kedua layanan ini merupakan pencarian blog yang paling banyak digunakan saat ini.

hampir semua penyedia layanan blog mempunyai fasilitas pencarian dengan cara mengindex link pada database mereka sendiri, selain itu kita juga lebih diuntungkan apabila penyedia layanan blog tersebut mempunyai fasilitas ping karena hal ini akan memudahkan kita dalam mempromosikan blog yang telah dibuat. Salah satu web auto submit adalah mypagerank, layanan ini akan memudahkan kita mendaftarkan blog ke beberapa search engine besar seperti dibawah ini :

{www.google.com}{www.searchengine.com}{www.infotiger.com}

{www.scrubtheweb.com}{www.searchuk.com}{www.entireweb.com}

{www.maxpromo.com}{www.aesop.com}{www.whatuseek.com}

{www.splatsearch.com}{www.walhello.com}{www.acoon.de}

{www.szukacz.pl}{www.daypop.com}{www.fybersearch.com}

{www.biveroo.de}{www.infoseek.co.jp}{www.yandex.ru}

{www.amfibi.com}{www.bigfinder.com}{www.metawebsearch.com}

{www.jayde.com}{www.cipinet.com}{www.websquash.com}

{www.Search-o-rama.com}{www.unasked.com}{www.uk.abacho.com}

{www.mixcat.com}

Untuk mempromosikan blog anda keseluruh SE diatas silankan anda klik disini tapi saya tidak menjamin kalau dalam waktu cepat situs ataupun blog anda akan terdaftar, semua ini tergantung dari bagaimana semua search engine diatas tersebut meng-index halaman blog ataupun situs anda.

Untuk keterangan lebih lanjut mengenai bagaimana cara mempromosikan blog anda ke search engine silahkan anda download E-book gratisnya disini. Salam blogger mania....

Readmore

Add your Comment 0 comments

Widget Label Cloud Animasi

Blogumus "adalah Flash tag cloud widget yang menggunakan konversi script dari Roy Tanck's WP Cumulus plugin untuk Wordpress. saya sangat suka sekali  plugin karya Roy Cumulus ini ketika saat pertama kali  saya  melihatnya, dan kita hanya harus belajar bagaimana mengubah plugin  ini agar bisa digunakan di Blogger blog. Hasilnya adalah widget yang dapat Anda lihat seperti pada gambar di atas,.atau anda bisa melihat bagaiman  effect animasi dari widget tersebut dengan cara menggerakan mouse anda ke atas objek Flash widget tersebut. Pada posting ini, saya akan menjelaskan bagaimana caranya agar anda dapat menambahkan Widget Tag Cloud Animasi  tersebut pada blog anda.

Cara untuk memasang widget ini pada template blog anda tidaklah begitu sulit yaitu dengan Cara pada menu dashboard anda klik Tata letak >> Edit Html terus anda cari kode dibawah ini pada halaman Edit Html.

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

Bila anda telah menemukankode tersebut, kemudian anda paste kan kode dibawah ini tepat dibawah kode yang anda cari tadi.

<b:widget id="Label99" locked="false" title="Labels" type="Label">

<b:includable id="main">

<b:if cond="data:title">

</b:if></b:includable></b:widget></b:section>

<h2>

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

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

</b:include></div>

Kemudian anda klik save atau simpan, setelah itu anda lihat blog anda untuk melihat bagaimana perunaham tamiplan blog anda setelah anda melakukan penambahan kode2 tersebut.

Untuk merubah tampilan widget tersebut sesuai keinginan anda anda hanya perlu merubah beberapa bagian code yang anda tambahkan tadi,karena Secara default widget ini di set dengan rincian sebagai berikut

• Lebar = 240px

• Tinggi = 300px
  

• Background = putih

• Warna Text = abu2
  

• Ukuran Text = "12"
  

Bila anda ingin merubah bentuk tampilan widget tersebut sesuai dengan selera anda,misalnya memperlebar, mempertinggi, merubah warna background, warna text serta ukuran textnya, anda cukup merubah sebagian dari code tersebut seperti pada rincian sebagai berikut :

Cari dan rubah code yg saya warnai dibawah ini sesuai dengan keinginan anda

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

• 240       = Lebar, ganti sesuai keinginan anda misalnya jadi 200

• ffffff      = Warna Background , ganti sesuai keinginan anda misalnya jadi 0000 untuk warna hitam
  

• 333333 = warna text, ganti sesuai keinginan anda misanya jadi ff000

• 300       = Tinggi, ganti sesuai keinginan anda misanya jadi 150

• ‘12’      = Ukuran text, ganti sesuai keinginan anda misanya jadi 16

• 100       = Adalah ukuran untuk kecepatan gerakan teks, silahkan anda ganti sesuai keinginan anda misalnya 150, semakin besar maka akan semakin cepat gerakan animasi teks nya.
  

Selamat mencoba dan semoga bermanfaat, salam blogger mania

Readmore

Add your Comment 0 comments

Merubah File PDF ke Doc

Mungkin sebagian dari kita telah tahu bagaimana merubah sebuah file ke bentuk file pdf, misalkan dari file microsoft word doc ke pdf, atau dari file microsoft excel xls ke bentuk pdf. Tapi bagaimana bila kita ingin melakukan hal yang sebaliknya, merubah file pdf ke format file lainnya, misalnya merubah atau mengconvert file pdf ke word .doc, dibawah ini ada beberapa solusi bila anda ingin merubah atau mengconvert file pdf entah itu meng-convert pdf ke doc, atau pdf menjadi rtf atau bahkan merubah pdf menjadi txt.

Solusi 1 : secara Online

Bila komputer anda terkoneksi ke internet mungkin solusi online akan menjadi sebuah pilihan yang bisa anda pertimbangkan, anda tidak perlu menginstal software apapun untuk bisa mulai merubah file pdf anda menjadi format lain. Beberapa alternatifnya adalah

Solusi 2 : Zamzar

Zamzar adalah salah satu website yang menyediakan proses konversi online file pdf ke bentuk file lainnya, baik meng-convert file PDF ke file word (DOC), maupun ke format lainnya seperti HTML, ODT, PCX, PNG, PS, RTF, and TXT. Anda tinggal memilih (browse) file yang akan anda rubah, setelah selesai zamzar akan mengirimkan sebuah Link ke email anda, untuk mendownload hasil konversi.

Solusi : PDF Online

Alternatif lain yang anda bisa memanfaatkan PDF Online dari BCL Technologies, setelah proses konversi selesai anda tinggal mengklik kanan pada link yang diberikan dan plih “save link as” sebagai RTF Word document.

Solusi 3 : Free PDF Converter

Solusi online lainnya untuk merubah file PDF adalah Free PDF Converter. Hampir sama dengan Zamzar tapi di Free PDF Converter, anda hanya bisa melakukan konversi setiap 30 menit. Selain itu ukuran filepun sangat terbatas. Lainnya halnya bila anda menjadi Member Free PDF Converter dengan biaya sekitar 9 dollar per bulan, anda bisa bebas merubah PDF anda tanpa dibatasi waktu dan ukuran, alias unlimited.

Solusi 4 : Menggunakan Software

Khusus bagi anda yang tidak selalu terkoneksi internet, menggunakan sebuah software untuk merubah file PDF anda mungkin akan menjadi satu-satunya solusi. Dan berikut ini beberapa software yang bisa anda gunakan.

BCL Easy Converter Desktop
Anda bisa mencoba BCL Easy Converter Desktop 1.0 untuk waktu 30 hari. Dengan BCL Easy Converter Desktop 1.0 anda bisa dengan mudah file PDF anda menjadi format RTF

DocSmartz

Kalau dengan BCL Easy Converter Desktop 1.0 anda hanya bisa merubah bentuk PDF ke bentuk RTF saja, maka DocSmartz menawarkan solusi yang lebih banyak pilihan, karena anda bisa merubah file PDF anda menjadi format lain seperti Excel, HTML, atau Postscript.

ABBYY PDF Transformer 2.0

ABBYY PDF Transformer 2.0 , mampu merubah format file PDF anda menjadi berbagai macam format seperti Word, Excel, RTF, HTML, TXT.

Semoga bermanfaat, salam blogger mania.

Readmore

Add your Comment 1 comments

Teks Area dengan Tombol Select All

Mungkin anda pernah berkunjung ke suatu blog ataupun website dimana pada halaman blog ataupun dalam postingan mereka terdapat sebuah text area dengan tombol select all. Contohnya seperti pada gambar dibawah ini.

Tulis text ataupun kode yang ingin anda tampilkan disini

Sekarang pertanyaannya adalah bagaimana kita bisa membuat kotak Teks area seperti itu, untuk membuat Teks Area dengan Tombol Select All tersebut caranya adalah seperti keterangan berikut ini.

Text area adalah sebuah perintah HTML yang berfungsi untuk membuat sebuah kotak ataupun bidang dimana dalam kotak tersebut bisa kita masukan beberapa text yang kita inginkan, contohnya seperti dibawah ini:

Tulis text ataupun kode yang ingin anda tampilkan disini

Kotak ini biasa kita gunakan untuk mengisi beberapa kata, kode-kode pada postingan maupun untuk membuat kotak link exchange. bagi anda yang ingin membuat sebuah kotak seperti tersebut caranya sangatlah mudah. Anda cukup copy kode dibawah ini lalu letakkan ke blog ataupun postingan anda.

<div style="text-align: center;"><textarea style="width: 300px; height: 40px; padding:3px">Tulis text ataupun kode yang ingin anda tampilkan disini</textarea></div>

Keterangan :

- Teks yang berwarna biru merupakan teks yang nantinya muncul pada kotak tersebut. Silahkan anda ganti dengan teks atau kode yang ingin anda tampilkankan dalam kotak tersebut.

- center yaitu menunjukkan posisi text dalam kotak tersebut di posisi tengah. Bila anda ingin meletakkan text tersebut dikanan. Anda cukup menggantinya dengan right dan Left bila anda ingin meletakkannya diposisi sebelah kiri.

- Width yaitu untuk ukuran lebar kotak dan Height untuk ukuran tinggi kotak. Silahkan anda ganti sesuai keinginan keinginan anda.

Membuat kotak teks/text area dengan tombol Select All

Tadi yang kita bahas adlah tentang cara membuat text area. Nah sekarang kita akan membahas tentang kelanjutannya yaitu text area dengan tombol select all. Tombol select all adalah sebuah tombol yang digunakan untuk menghighlight seluruh teks yang berada didalam text area tersebut, sehingga kita atau pengunjung bisa lebih mudah untuk mengcopy seluruh teks atau kode yang berada dalam text area tersebut. Contohnya seperti dibawah ini, coba anda tekan tombol select all yang ada dibawah ini.maka semua teks yang ada dalam kotak tersebut akan terhighlight atau terblok semua dengan mudah.

Tulis text ataupun kode yang ingin anda tampilkan disini

Untuk membuat teks area dengan tombol select all seperti diatas caranyan adalah seperti berikut, copy semua kode dibawah ini ke blog ataupun postingan anda.

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: Center;"><textarea style="padding: 3px; Width: 300px; Height: 50px;" name="txt">Tulis text ataupun kode yang ingin anda tampilkan disini</textarea></p></form>

Catatan :
- Teks yang dicetak tebal dan berwarna kuning adalah teks yang muncul pada tombol. Silahkan anda bisa menggantinya dengan nama lain, misalnya pilih semua, copy semua ataupun yang lainnya.
- Teks berwarna biru adalah teks muncul didalam kotak. Silahkan anda ganti dengan teks ataupun kode yang ingin anda tampilkan dalm kotak tersebut.
-  Teks yang di cetak tebal dan berwarna hitam seperti Center, Width dan Height. silahkan anda ganti juga sesuai keinginan anda.

Ok mungkin cukup sampai disini dulu postingan Blog Tips and Trick mengenai cara membuat kotak teks area dengan tombol select all ini. semoga bermanfaat dan salam blogger mania.

Readmore

Add your Comment 1 comments

Widget untuk Menampilkan IP Adress

Dengan widget gratis ini anda bisa tahu tentang IP adress, Os yang anda gunakan, negara anda , juga browser yang sedang anda gunakan, untuk memasang widget ini pada blog anda, anda harus mengunjungi situs ini lebih dulu untuk mendapatkan kode htmlnya, silahkan anda klik disini.

.

Setelah anda masuk ke situs tersebut  anda pilih bentuk widget yang anda suka untuk dipasang pada blog anda. pada situs ini anda akan diberikan dua pilihan bahasa, untuk widget yang akan anda pasang pada blog anda nantinya, yaitu bahasa belanda dan bahasa inggris.tapi saya sarankan anda memilih yang bahasa inggris, karena pada umumnya lebih banyak orang yang mengerti bahasa inggris daripada bahasa belanda.

setelah anda pilih bahasa yang anda inginkan, lalu anda copy semua kode html widget tersebut.langkah selanjutnya adalah, anda login ke blogger lalu anda klik menu layout > Page element > lalu anda klik add a gadget. mengenai letak widget tersebut akan dipasang dimana, itu semua terserah anda.

Pilih gadget Html/javascript kemudian anda paste semua kode html yang anda copy sebelumnya.seperti contoh pada gambar dibawah ini.

Setelah itu anda klik simpan kemudian anda lihat blog anda untuk melihat hasilnya. Ok saya rasa cukup sampai disini dulu postingan saya kali ini. semoga bermanfaat da salam blogger mania.

Readmore

Add your Comment 0 comments

Alert Message Plus

Tips dari Blog Tips and Trick kali ini yaitu tentang bagaimana caranya untuk membuat pesan sapaan kepada pengunjung blog anda, ditambah lagi pada pesan sapaan tersebut anda bisa meminta kepada pengunjung blog anda untuk memasukan namanya terlebih dulu sebelum mereka menjelajahi blog anda.seperti contoh pada gambar berikut ini :

 

Untuk anda yang berminat membuat pesan sapaan seperti pada contoh gambar di atas, caranya yaitu

sebagai berikut. anda login ke blogger lalu klik menu tata letak halaman kemudian anda tambah gadget baru dengan mengklik add a gadget, terus anda pilih gadget Html/java script. setelah itu anda copy dan paste semua kode dibawah ini pada gadget Html/java script tersebut.kodenya adalah :

<script type='text/javascript'>
var name = prompt("Greeting", "may I know your name ");
alert("wellcome to My Blog "+name)
alert("Thank You for Visiting My Blog")
</script>

Setelah itu anda klik simpan atau save, selesai dech. buka blog anda untuk melihat hasilnya.

Catatan : Teks yang saya beri warna biru di atas silahkan anda ganti sesuai dengan keinginan anda, misalnya pada greeting anda ganti menjadi selamat datang dan yang lainnya juga.

ok cukup sekian dulu postingan Blog Tips and Trick kali ini, semoga bermanfaat dan salam blogger mania.

Readmore

Add your Comment 0 comments