Araf'Creativity™

Senin, 30 April 2012

Cara Membuat Group Facebook

Bagaimana cara membuat group di facebook? ini adalah salah satu keyword yang dicari oleh orang-orang yang mampir di blog ini. Sayangnnya artikel tersebut tidak akan ditemukan. Entah mengapa kok bisa sampai nyasar ke blog ini? karena itu saya ucapkan banyak-banyak terima kasih karena sudah sukarela (rela ga ya?) nambah traffic blog ini. Agar tidak ada yang nyasar lagi untuk mencari sebuah artikel seperti "membuat group di facebook", jadi saya buatkan sekarang :)

Group adalah sebuah fasilitas yang dimiliki facebook untuk para penggunanya (user) dalam membuat suatu komunitas atau kumpulan orang yang mempunyai hobi, aktivitas, atau berbagai persamaan lainnya. Dengan membuat group kita dapat membuat sebuah komunitas yang dapat berbagi informasi dan bahkan kopi darat jika memang diperlukan. Sayangnya, ada beberapa pihak yang menyalahgunakan fungsi dari group, misalnya menjadikan group sebagai ajang iklan kepada para membernya. Dan yang paling parahnya iklan itu tidak ada kaitannya dengan group tersebut.

Stop de !! udahan dulu basa-basinya :), wong sudah pada tahu apa itu group dan gunanya. Mari langsung menuju ke pembahasan cara membuat group di facebook :1. Pada halaman home facebook klik buat group/create a new group (sebelah kiri)

2. Anda akan ditampilkan sebuah kotak :

silakan isi
- Nama Grup/Group Namedengan nama yang diinginkan
- Anggota/member adalah orang-orang yang akan anda undang menjadi bagian dalam group tersebut
- Privasi/privacy grup facebook ada 3 jenis yaitu terbuka (open), tertutup (closed), dan rahasia (secret)

Perbedaan dari 3 privasi grup adalah sebagai berikut :
a) Terbuka(open) = anggota dan isi dari konten group terbuka untuk umum dalam arti bisa dilihat semua orang termasuk non anggota
b) Tertutup (closed) = anggota untuk umum dan konten hanya untuk anggota
c) Rahasia (secret) = anggota dan isi konten tidak untuk umum.

3. terakhir silakan tekan buat (create)
Mudah bukan ?
jika masih bingung silakan ditanyakan :)

Sumber....http://www.tips-fb.com

Cara Menyembunyikan Footer Pada Blog

Mendesain template blog sama halnya dengan mendesain sebuah rumah. Baik buruknya tampilan rumah dan template blog tergantung pada cita rasa seni dan selera kita masing-masing. Ada arsitek yang beranggapan rumah dengan eksterior minimalis itu bagus. Tetapi, ada juga yang tidak sependapat dan cenderung lebih suka dengan gaya modern.

Begitu juga dengan template blog. Ada blogger yang suka dengan tampilan footer pada templatenya, tetapi ada juga yang tidak suka dengan tampilan footer. Footer merupakan elemen dari sebuah template blog yang letaknya di bagian paling bawah. Biasanya terdiri dari satu, dua, tiga, hingga empat kolom.

Nah, bagi kita yang tidak suka adanya tampilan footer padahal blog kita saat ini ada tampilan footernya, kita dapat menghilangkannya dengan cara penambahan sedikit kode HTML pada edit HTML template kita.

Cara untuk menyembunyikan footer pada blog milik kita dapat kita lihat sebagai berikut:

Pertama, masuk ke dalam akun blogger kita masing-masing.
Klik rancangan.
Klik edit HTML.
Klik/centang expand template widget.
Cari kode berikut.

]]></b:skin>

Setelah itu, tambahkan kode ini tepat di atasnya.

.footer-outer{display:none;}

Klik simpan dan selesai.

Keterangan:

Tekan tombol Ctrl+F pada keyboard untuk mempermudah pencarian kode HTML yang kita inginkan.
Download template blog terlebih dahulu sebagai backup apabila kita mengalami kegagalan saat proses editing berlangsung.
Cara ini tidak menghapus kolom pada footer, tetapi menyembunyikan tampilannya pada halaman blog.

Penyebab tidak disukainya adanya tampilan kolom footer pada blog kita ada beragam. Mungkin bisa disebabkan karena selera individu itu sendiri, tampilan footer yang tidak sinkron dengan template secara keseluruhan, footer tidak lagi dibutuhkan karena semua pernak-pernik blog yang digunakan sudah ditampung dalam sidebar, dan alasan lainnya.

Sebenarnya tanpa menghapus kolom footer itu sendiri juga footer tidak akan muncul pada tampilan desain blog saat dibuka di browser asal kita tidak menempatkan widget dalam footer tersebut. Akan tetapi, kadang juga ada template yang masih meninggalkan frame dari footer meskipun sebenarnya footer tersebut tidak diisi oleh widget sama sekali.

Membuat Menu di Bawah Header pada Blogspot

Salam Blogger, kali ini saya akan membahas bagai mana cara memasang menu di bawah header dan berikut adalah langkah-langkahnya.
1. Login di blogger dengan ID blog sobat
2. Klik menu Layout
3. Klik Tab Edit HTML
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F

Anda ubah kode showaddelement='no' menjadi showaddelement='yes' , kalau sudah klik simpan ya
Setelah yang pertama sudah disimpan, sekarang klik Page elements / Elemen Laman> Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header.

<a href="http://madhigokil.blogspot.com " class="navigation">HOME</a>
<a href="http://madhigokil.blogspot.com " class="navigation">CONTACT</a>
<a href="http://madhigokil.blogspot.com " class="navigation">BUKU TAMU</a>
<a href="http://madhigokil.blogspot.com " class="navigation">FACEBOOK</a>
<a href="http://madhigokil.blogspot.com " class="navigation">TWITER</a>
<a href="http://madhigokil.blogspot.com " class="navigation">DOWNLOAD</a>
<a href="http://madhigokil.blogspot.com " class="navigation">LAIN-LAIN</a>
<a href="http://madhigokil.blogspot.com " class="navigation">CHATTING</a>

*Alamat url diatas silahkan sesuaikan dengan blog Anda.

Hal ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.

Klik Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan tombolCTRL+F
Copy kode dibawah ini dan letakan tepat diatas kode </b:skin> kemudian simpan.

a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

Perhatikan kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda.Dan yang berwarna merah adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera.

mudah bukan, selamat mencoba...
Sumber....http://www.madhi.web.id

Cara Memasang Iklan Melayang-Layang di Blog (Blogspot)

Oke sobat, langsung ke TKP aja ya...

1. Masuk ke blogger

2. Buka design/Rancangan

3. Pada Page Element, pilih tempat, lalu klik "Add A Gadget" dan pilih HTML Javascript

4. Masukkan kode berikut,

#gb{

position:fixed;

top:10px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbcontent{

float:right;

border:2px solid #ffffff;

background:#ffffff;

padding:10px;

}

</style>

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir-100;

gb.style.top = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

klik salah satu iklan untuk keluar.:[Close][Klik 1x]:.

</a>

</div>

Masukan Kode iklan Text ataupun banner sobat disini

</center>

</a>

</div>

var gb = document.getElementById("gb");

gb.style.center = (20-gb.offsetWidth).toString() + "px";

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

Ganti tulisan berwarna biru dengan kode iklan sobat.

5. Setelah itu klik save/simpan dan lihat hasilnya.
selesai, mudah bukan.. semoga bermanfaat.

Sumber...http://www.madhi.web.id

Cara Mudah Pasang Metarobot Pada blog

Oke sobat, kali ini saya akan membahas tentang metarobot, mau tau gimana cara pasang metarobot di blog? caranya sangat mudah kok. hehe

Meta adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web dan biasanya diletakan pada bagian antara <head> dan </head>. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait pada blog.

Berikut langkah-langkahnya:

Cara pemasangan :

1. Login Blogger, masuk ke Layout / Tata Letak

2. Klik Edit HTML, beri chek pada Expand Template Widget

3. Copy kode dibawah dan letakan tepat dibawah kode <head>

4. Simpan Template

<meta content='isi dengan deskripsi blog Anda' name='description'/>

<meta content='isi keyword sesuai dengan materi blog' name='keywords'/>

<meta content='INDEX,FOLLOW, all' name='robots'/>

<meta content='index, follow' name='googlebot'/>

<meta content='nama anda ' name='author'/>

Mudah kan? semoga bermanfaat..

Sumber......http://www.madhi.web.id

Cara pasang menu bar dengan drop down versi pink

Untuk memasang menu bar dengan drop down versi pink ,hanya ikut beberapa langkah yang di tunjukkan di bawah.

p/s: Sila save script template anda.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl+F dan taip atau paste kod ]]></b:skin> . Seterusnya, tekan Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste di atas atau sebelum kod ]]></b:skin> (rujuk langkah 2)

#pinkmenubar{
/*float: left;*/
/*width: 100%;*/
margin: 0 0 10px 0 ;
padding: 2px 2px 2px 20px;
height: 28px;

background-color: #FEE4F6;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrel17rU3rE_1pCG98jWAwdfzqX06WmMFTY-ekGZteyXu26j-gFSj0pAWqG835r3tNHIrhCOxi3TxcuYhZjizxZMVxM41ZSy8mQuiKjkXXnQBU3c0-IxcfBes0OmsocvM74qS7HT0NOP8/s400/navbg.png");
background-repeat: repeat-x;
background-position: bottom;
border-color: #E3099E;
border-width: 1px 0 1px 0;
border-style: solid;
text-transform: lowercase;
line-height: 100%;
width: auto;

}

#pinkmenubar > li{
float: left;
width: 130px;
height: 28px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

#pinkmenubar > li > a{
display: block;
width: 99px;
height: 15px;
padding: 5px 24px 8px 7px;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXvnBbJeNuUdPxUi_O1SETGIlEO2Quu-DEAQCGzYmsONGRfOfph8vr_umlpFyvqb5_hUx0VaopC0OkIiU2HKRUxX2G1BG_huigYiMkWHPlb_0KvZqNwgwcrEeFVinuOrKmtFmK-1DgB4/s400/buttonbg.png");
font-size: 13px;
color: #FA69CC;
text-decoration: none;
font-family: Trebuchet MS;

}
#pinkmenubar > li:hover > a{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6DPz-IurLwtFgbSQXylkbc37YvwgrQuw_R8Npi0AVGyHnkozKDQHQgyWO9or5DlzFnws6PYKXM5nE2MMC83VFyK50A-Mo8ug1I-d5gUzk3araIFmmb_oB7JHseq_mAJ4zGY-WiaK1U18/s400/buttonbghover.png");
color: #E3099E;

}

ul#pinkmenubar > li > ul{

/*

position: absolute;
right: 5px;
top: 4px;

*/

float: right;
width: 17px;
height: 20px;

margin-top: -24px;
margin-right: 5px;

padding: 0;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQEEFSC-iwwnqfFlPi-Fiq5X50euPUgDNgDzqCTexE74boGgyWO6hisMDfBxkqlPJpKketDHBpe2OKN50Zq4B8mR7_d3hqkgcOl61URPKZup4lSe4deVtj9ppmv_l2lfofNlqDFn43Uvw/s400/dropdown.png");
z-index: 50;

overflow: hidden;

}
ul#pinkmenubar > li > ul:hover{

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRPSMsybzTYEfAKk34IEUiItB5zcnW67vr1bJpneLpKr13BanIAa8k87iPwZWdD7MdeyZwG1V8eL1derWLxbYqNLvukdfjUZeFBQlfFPwjMa-VQUMzZZfLD0oBZU4oYBW9Y4X00cl256A/s400/dropdownhover.png");
overflow: visible;

}

ul#pinkmenubar li ul li{
position: absolute;
margin-left: -9000px;
}
ul#pinkmenubar > li > ul:hover > li{
display: block;
width: 117px;
margin: 0 0 0 -99px;
padding: 0;
position: relative;
z-index: 500;

}

ul#pinkmenubar > li > ul:hover > li:first-child{
margin-top: 18px;
padding-top:3px;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg3MtKCi6215ITbvgc7M661ObaVSeC2f0ZnPwu2YjmHjfqsfu4RsBcdasFU9UhQF_JLWBBVP4GRSNhL-TyNwroBU0jSl9aErlPwu4I4RlmKdbbKM1pLkTC8rI1b3GLl7GGqxONZINpNJk/s400/topsubmenu.png");
background-repeat: no-repeat;
background-position: 100% 0;

}
ul#pinkmenubar > li > ul:hover > li:last-child{

padding-bottom:3px;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpc_AROOAKnJlHP_p94WCjP2SNTX9ZZiaoRd7CbsLEmaumYCNUfsfVF8OVTkoXkO4Mhu2QIMcCzySRWKaIdmXNyA9H1kJO3l6eRQLuf2fUa2F4OWyj-nDGP3LMOhbO6FN9lgvhixsnEv8/s400/bottomsubmenu.png");
background-repeat: no-repeat;
background-position: 0 100%;

}
ul#pinkmenubar > li > ul:hover > li:last-child:hover{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUc92eYRYNomdx7IovQbVrxJ9P5V22zKjBHpCw1cZnJ00LvCQSrzga6Yh51ullh3NYNLp2z7_pvCMMkti4lSz3hYJ8pCQVAf7a6TUWeECGcnwj7DX7_gxwpBPd7Nyf3xMdDu29rLt1s_E/s400/bottomsubmenuhover.png");
}

ul#pinkmenubar > li > ul:hover > li > a{
display: block;
background-color: #FFF5FC;
border-color: #E3099E;
border-width: 0 1px 0 1px;
border-style: solid;
padding: 1px 4px 1px 4px;
margin: 0;
font-family: Trebuchet MS;;
text-decoration: none;
font-size: 12px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnKL33z35tKw-BjvMH288pVkuw0U_dKZqASjkVU3zc7qC08RwzFajZnINzm8tdtjhjhgS036eova-boNPjAMZAw2jiGGiK5b4XyZM_2koe7D5-v11zzRauIFn8KdSYDZGoH8t0U4YqwQI/s400/submenubutton.png");
color: #E3099E;
}
ul#pinkmenubar > li > ul:hover > li > a:hover,
ul#pinkmenubar > li > ul:hover > li:hover > a{
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiloAKFOkkIowrAJeCkYfznZBaQS0NQs2RibB5VUEcXlbPDVYovBhxdZQRDbKbHqO8rss0u5fzzGTzQT5uYRT20-WMbXDlZrxKL0UMonEl64rhLXLUTSXMUwl1sIrxuDrG4f2i-SVGStYA/s400/submenubuttonhover.png");
}

code.pre {
white-space: pre;
background-color: #f8f8f8;
display: block;
line-height: 140%;
}

Langkah 4

Salin kod berwarna merah di bawah dan paste pada notepad. Edit kod yang di bold dengan menggantikan URL dan title anda.

<li ><a href='masukkan URL di sini'>about</a>

<ul>

<li><a href='masukkan URL di sini'>Squirrel?</a></li>

<li><a href='masukkan URL di sini'>Seamus</a></li>

<li><a href='masukkan URL di sini'>Portfolio</a></li>

<li><a href='masukkan URL di sini'>Contact</a></li>

</ul>

</li>

<li ><a href='masukkan URL di sini'>play ground</a>

<ul>

<li><a href='masukkan URL di sini'>backgrounds</a></li>

<li><a href='masukkan URL di sini'>flash</a></li>

</ul>

</li>

<li ><a href='masukkan URL di sini'>rants</a></li>

</ul>

Langkah 5

Sekali lagi, dengan menggunakan keyboard, taip atau paste kod <div id='content-wrapper'>

Langkah 6

Salin kod yang telah siap di edit pada langkah 4 tadi dan paste kod tersebut di bawah atau selepas kod <div id='content-wrapper'>

Akhir sekali klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.

p/s:

Jika kod <div id='content-wrapper'> tiada pada script template anda, gantikan dengan <div id='header-wrapper'> . Seterusnya cari penutup kod <div id='header-wrapper'> iaitu </div>

Contoh:

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='my test page (Header)' type='Header'/>
</b:section>
</div> -----> Penutup

Paste kod yang telah siap di edit pada langkah 4 tadi dan paste di bawah atau selepas </div>
sumber...http://maribinablog.blogspot.com

About Araf'Creativity™

Archive Blog Araf'Creativity™

Label Blog Araf'Creativity™

Senin, 30 April 2012

Cara Membuat Group Facebook

Cara Menyembunyikan Footer Pada Blog

Membuat Menu di Bawah Header pada Blogspot

Cara Memasang Iklan Melayang-Layang di Blog (Blogspot)

Oke sobat, langsung ke TKP aja ya...

Cara Mudah Pasang Metarobot Pada blog

Cara pasang menu bar dengan drop down versi pink

Translate Blog Araf'Creativity™

Statistik Araf'Creativity™

Recent Post Araf'Creativity™

Populer Post Blog Araf'Creativity™

Pengunjung Blog Araf'Creativity™