Nofa wanna be

Rabu, 28 Agustus 2013

Membuat Text Animasi Welcome pada Blog

Minggu yang lalu, saya sempat ditanyai oleh teman saya yang baru belajar nge-blog dan dia bertanya tentang bagaimana cara membuat text animasi welcome seperti yang saya buat di blog ini. Mendapat pertanyaan yang seperti itu, ya langsung saja saya coba untuk share di blog ini. Tapi karena kesibukan kuliah, akhirnya postingan ini baru sekarang bisa saya terbitkan.
=================================================================================
1. Buka halaman sig.graphicsfactory.com atau klik disini
2. Setelah terbuka jendela ini, ketikkan welcome di kotak STEP 1. Kemudian pilih bentuk image animasi yang anda inginkan pada STEP 2, lalu klik Create My Signature

3. Sampai disini text animasi yang kita buat sudah selesai. Sekarang kita tinggal memasukkannya saja ke dalam blog.

4. Untuk menambahkannya ke dalam blog, anda copy kode html yang ada dibawahnya. Pilih yang Standard HTML. Tekan Hilghlight All, lalu tekan tombol Ctrl + C pada keyboard untuk mengcopy.

5. Login ke blog anda. Di halaman dasbor pilih rancangan. Tentukan tempat yang pas, kemudian klik tambah gadget lalu pilih HTML/JavaScript.

6. Pastekan kode tadi pada kotak konten HTML/JavaScript tadi dengan menekan Ctrl + V, kemudian simpan. Sekarang lihat lah blog anda

Tips: Sebenarnya text yang sudah anda buat seperti langkah diatas, masih mengandung link menuju website http://sig.graphicsfactory.com/. Bila anda ingin tampak lebih profesional dengan menghilangkan link tersebut, anda dapat membuka kembali HTML/JavaScript tadi dan mengeditnya dengan cara menghapus kode
<table cellspacing="1" cellpadding="1" border="0">
<tr><td>
<a href="http://sig.graphicsfactory.com/">
dan
<div align="right"><a href="http://sig.graphicsfactory.com/" title="Glitter Graphics"><font face="Verdana" size="-2">Glitter Graphics</font></a></div></td></tr></table>
kemudian simpan kembali kode tersebut, dan lihatlah tampilan blog anda sekarang......

Selamat Mencoba yaaa Sobat...^ _ ^

.:------------------------:.

By : Nofa Wariska

.: ------------------------:.

Senin, 26 Agustus 2013

Cara Membuat Satu Kolom Widget Diatas Header

Cara Membuat Satu Kolom Widget Diatas Header seperti yang terlihat pada gambar dibawah (panah merah) telah saya buat khusus untuk anda dengan cara yang mudah, anda bisa membuat satu kolom widget diatas header blog anda dengan mengikuti panduan cara membuat satu kolom widget diatas header. Dengan adanya tambahan satu kolom widget diatas header akan memberikan tambahan ruang dalam blog anda yang nantinya bisa anda gunakan untuk memasukkan konten-konten diluar topik blog anda atau dari dalam topik blog anda sendiri. Apalagi jika di area header blog ditambahkan lagi dua kolom atau tiga kolom widget maka anda akan lebih leluasa dalam memasukkan atau memasang konten-konten yang anda sukai.

-------------------------------------------------------------------------------------------------------------------------------------------------------------------
Berikut Cara Membuat Satu Kolom Widget Diatas Header

Masuk ke akun blogger anda
Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
Cari Kode ]]></b:skin>
Letakkan kode berikut diatas kode ]]></b:skin>
#oneupperheader{margin:10px 0;padding:1%;width:100%;}
Cari kode berikut ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Letakkan kode berikut ini tepat dibawah <div id='header-wrapper'>
<b:section class='header' id='oneupperheader' preferred='yes'/>
Sehingga hasilnya seperti berikut ini
<div id='header-wrapper'>
<b:section class='header' id='oneupperheader' preferred='yes'/>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Sekian, jika ada ide lain dalam membuat satu kolom widget diatas header, mari kita diskusikan bersama dengan meninggalkan komentar di artikel ini Cara Membuat Satu Kolom Widget Diatas Header

"Cara Menambahkan Gadget di Atas Hearder"

Selasa, 27 Agustus 2013

Kalian pasti cuma bisa nambah Gadget di Bawah Hearder kan??? sekarang aku mau kasih tahu cara menambahkan Gadgt di atas hearder. Tutorial ini aku dapatkan dari BLOG "Dea" dia juga Blogger. hihihi bisa dibilang sihhhh di atas aku! jauhhhh hahaha. untuk LINK Blog Dea nanti di bawah ya.... oke langsung saja deh.... (Ikuti Step)

1. Buka Blogger.

2. Klik Template.

3. Edit HTML.

4. Klik Lanjutkan.

5. Klik "Expand Template".

6. Cari Tulisan Ini.

<b:section class=

7. Jika Udah ketemu!!! Kamu tambahin lagi jadi gini....

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

8. Lalu jika sudahhhh Kamu Ubah lagi dan dihapus!!! jadinya gini....

<b:section class='header' id='header1' preferred='yes'>

9. Simpan Perubahan/Simpan.

10. Tutup.

"Lihat Hasilnyaaaa" gimana???? chek ke tata letak!! oke semoga berhasil... Bye

Post By : Nofa ---------------------------

Cara Menambahkan Widget Melukis Doodle ke Dalam Blog

"Cara Menambahkan Widget Melukis Doodle ke Dalam Blog"

Minggu, 27 Agustus 2013

Kalian pasti mau kan!! (mungkin ada yang gak mau), nambahkin Widget Melukis doodle di blog? heheh aku sih pengen2 aja! tapi di blog satunya. mmmm mau gak nih? mau kan ditambahin ke Blognya!! ok Langsooooooooong (Ikuti Step)

1 Kalian Copast Code Ini.

<object data="http://img0.liveinternet.ru/images/attach/c/0//3768/3768733_paint_www.swf" height="340" type="application/x-shockwave-flash" width="480"> </object>

2. Kalian pilih di "Laman/Post/Widget Sidebar" terserah mau pilih diletakan yang mana.
----------------------------------------------------------------------------------------------------------------------------------------------------

A. di tambahkan di Laman.

1. Buka Blogger.

2. Sign In ke Dashboardnya... Klik Laman.

3. Pilih Tambah Laman (Laman Kosong).

4. Copast aja kode yang tadi.

5. klik Simpan/Publikasikan.

----------------------------------------------------------------------------------------------------------------------------------------------------
B. Ditambahkan di Post.

1. Buka Blogger.

2. Sign In ke Dashboardnya... Klik Post/Klik di Gambar Pensil itu.

3. Copast aja kode yang tadi.

5. klik Simpan/Publikasikan.
----------------------------------------------------------------------------------------------------------------------------------------------------

C. Ditambahkan di Widget Sidebar.

1. Buka Blogger.

2. Sign In ke Dashboardnya... Klik Tata Letak.

3. Tambah Gadget.

4. Pilih HTML/Java Script.

5. Copast aja kode yang tadi.

6. klik Simpan ==> Simpan Perubahan.

Selesai!!!!!!!!!!!!!!

Jumat, 23 Agustus 2013

"Cara Membuat Bingkai CBOX di Blog"

Hai Semua.... aku liburan lho!!! yeeey! aku bisa bikin Tutorial :D Heheh. mmmmm sebenarnya ini sama dengan Tutorial yang terdahulu, tapi lebih aku perjelas.. mengapa? karena katanya masih banyak yang bingung... langsung aja deh....(Ikuti Step)

1. Kalian Pilih Salah Satu Desain Bingkai CBOX Yang kalian suka... yang aku punya baru segini.

<div style="background:url(http://i804.photobucket.com/albums/yy321/anik93/chatbox-animation-1-1.gif) no-repeat;padding-right:8px;padding-left:1px;padding-top:130px;padding-bottom:35px;">

Setting Kode Chatbox :

Width : 170 px || Height : 152 px (bagian awal)

Width : 170 px || Height : 75 px (bagian akhir)

Text-align: Left

__________

<div style="background:url(http://i804.photobucket.com/albums/yy321/anik93/yellow-girl-chatbox.gif) no-repeat;padding-right:3px;padding-left:17px;padding-top:140px;padding-bottom:80px;">

Setting Kode Chatbox :

Width : 170 px || Height : 190 px (bagian awal)

Width : 170 px || Height : 75 px (bagian akhir)

Text-align: Left

__________

<div style="background:url(http://i804.photobucket.com/albums/yy321/anik93/strawberry.gif) no-repeat;padding-right:1px;padding-left:25px;padding-top:145px;padding-bottom:70px;">

Setting Kode Chatbox :

Width : 155 px || Height : 210 px (bagian awal)

Width : 155 px || Height : 75 px (bagian akhir)

Text-align: Left

__________

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2oQmyfEqQPuZqGYxS25Gx-WFI8lhw9q1KxlY9DARQqnuCXA1Xea2bs99r2_rYLqHe5ue1NUMGhX7ObuG2UDkt_1hjb0Znm3CqF2ptZ3xPg5JIo3ck63cU1C8L7RNTuDplfkgW76rH7Mzm/s1600/cboxqs7.gif) no-repeat;padding-right:20px;padding-left:13px;padding-top:110px;padding-bottom:90px;">

Setting Kode Chatbox :

Width : 175 px || Height : 190 px (bagian awal)

Width : 175 px || Height : 75 px (bagian akhir)

Text-align: Left

__________

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-vK5PoAqTouhiM7NJCzABBbAA21Lwfj07oEB5DduojMFcTLP-MojpgWDxrwz-6KzQOBZnAnHOpnC3Jm06eO4BPlt1M4jvAe6_gG0KhTEqNVF0rH9D-2hJoCm7OcyMefDU9etHXBJTiNf8/s1600/cbox1fv2.gif) no-repeat;padding-right:25px;padding-left:10px;padding-top:100px;padding-bottom:40px;">

Setting Kode Chatbox :

Width : 175 px || Height : 160 px (bagian awal)

Width : 175 px || Height : 75 px (bagian akhir)

Text-align: Left

__________

2. Berikutnya..... kalian Buka Blogger

3. Klik Tata Letak.

4. Klik di tempat kita menyimpan cbox simple dulu.

5. klik edit.

6. taruh salah satu kode linknya, (kalian lihat gak baris ke dua yang ada tulisan <Div nah sepanjangan 1 baris itu sampai Tulisan 0"> dihapus... dan diganti dengan LINK Kode Bingkai CBOXnya.

7. kalian memilih LINK Bingkainya juga harus sesuai dengan LINK Angka Width n Height .... untuk mengukur luasnya... jika tidak diatur. maka akan kacau.

8. Klik Simpan ==> Simpan perubahan.

Kamis, 22 Agustus 2013

Cara membuat judul blog bergerak-gerak

Cara membuat judul blog bergerak-gerak rasanya hal ini akan menarik perhatian para pengunjung agar betah berlama-lama tinggal di blog kita karena hal ini merupakan salah satu dari kian banyak cara untuk mempercantik blog yang kita sayangi. Postingan ini ane khususkan untuk kalangan nawbi saja ya..karena untuk para mastah sepertinya hal ini sudah tidak asing lagi yang mana sebelumnya juga ane udah mencoba berbagi tentang cara membuat space iklan di blog khusus nawbi.

Untuk mempercantik blog dengan cara membuat judul blog bergerak-gerak rasanya menurut ane tidak begitu sulit, karena disini agan hanya perlu sedikit mengotak-atik kode HTML yang nantinya akan ane berikan kode HTML tambahan. Baiklan dari pada lama-lama dan agan pun semakin penasaran, maka untuk mempersingkat waktu silahkan coba perhatikan tutorial dibawah ini.

Berikut adalah cara membuat judul blog bergerak-gerak

Hal pertama untuk membuat judul blog bergerak-gerak silahkan backup template agan terlebih dahulu untuk berjaga-jaga jikalau terjadi hal-hal yang tidak di inginkan.

1. Masuk ke akun Blogger.

2. Klik "Tata Letak" -> "Edit HTML".

3. Silahkan agan cari kode <title><data:blog.pageTitle/></title> ( untuk lebih mudah dalam mencari silahkan gunakan Ctrl + F )

4. Terus hapus kode tersebut dan ganti dengan kode dibawah ini.

<b:include data='blog' name='all-head-content'/>

<script language='JavaScript'>

var txt="<data:blog.pageTitle/>";

var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

segarkan=setTimeout("bergerak()",kecepatan);}bergerak();

</script>

Note: Untuk angka 100 yang berwarna biru, agan bisa menggantinya sesuai dengan selera agan. Angka tersebut merupakan kecepatan gerak judul blog agan.

5. Simpan dan lihat hasilnya.

- See more at: http://langkah2membuatblog.blogspot.com/2012/12/cara-membuat-judul-blog-bergerak-gerak.html#sthash.40ADwxwj.dpuf

Tombol Back To Top untuk Blog Yang lucu

Posted by : Nofa

biasanya kalau postingan blog kalian terlalu panjang..
pengunjung blog kalian akan kewalahan untuk mensecrool ke atas.
jadi untuk memudahkan pengunjung..
di buatlah tombol back to top.
hanya sekali klik.
bisa langsung loncat keatas.. sangat mudah kan?

login > dasbor > tata letak > add gadget > html/javascript

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar button"></a>

ganti tulisan berwarna merah dengan url gambar back to top yang kalian inginkan..
berikut. contoh contoh yang saya punya

http://img205.imageshack.us/img205/7824/74211510.gif

http://img196.imageshack.us/img196/6670/49238758.png

http://img266.imageshack.us/img266/3325/81258407.png

http://img13.imageshack.us/img13/5533/20610818.png

http://img543.imageshack.us/img543/5941/62667078.png

http://i1139.photobucket.com/albums/n554/nurbariah1/blogger-Copy-Copy.png

http://i1139.photobucket.com/albums/n554/nurbariah1/blogger-Copy-Copy2-1.png

http://i1139.photobucket.com/albums/n554/nurbariah1/blogger-Copy-1.png

bisa request. di facebook saya. ^_^

kreasi admin : (anime series)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk2StRDOo4jMctIlhiHNzzQ-3IUcnlN8Mp39tPhVQ10WNu4pGycJw3F19EfGxZ8vtJc2YMmU203F1GotiDoeFqjEgqlvFTEtTEzI1Sh0_JIPBAFmN8qzMZcnoS0mGMCpfSsz2_lOcsHB6c/s1600/1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL3BPth1eqUQY9l7urrhWhFM9-A80nPR6banxAAu1QX5X7Kpc3Ieqiouf6xqd-b4AJ1sDt1vQoo0p_7qtf3_EFMIcUZOMD9E16irKuQEko4cdQrN9G8VeZ7tC_xjvGJXnSJj4OrhsFS-o4/s1600/2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH87_74zW27bMpoYXQ_SyGFaMvddp30JBv5I8NBocNAIPkpVAvB9XKQQ-ZlPaV0wRIAToqGYqlAVLbvC5su4zCwvgOUDrIPDSetxO5eYEdvWLSJ8hdbwOLQavxH58-4iDgmF4X0Xahe0U3/s1600/3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMlb1atSqTmKQxTj6oGcIm42j1FVFEGuti4IxxH_6RO2H_GQEvm0Q7Xiupj_uysUETLu-YSWLCPPQlPR4a8ilZg4r1ZwJzZ5s2KjQlHx5zla_91f6RkaLp73011xtbEm63Mu8XotOpIEYj/s1600/4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK9ew1cojroPX8NY8fv1vJu7kQ98Zds24MRWckFLT5Ghr-8NZeiP6fIeexEobHb05SzVVWtIDg1ig1O6-65DKZefeXgi32NjC2Mnxt0ET1ChO5klovWEuqXyjGXtTMTFuIdpGMCWLj_ztm/s1600/5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxKEmXLume_BR6sA38rBJ7tMWNnGe4HXS4Ov4ZuhmtUo9HZqwEZKGV-OiMehoUtAEsVEVj5uJgqn6pG0FTCB1U8s1FHuoBTCR04cJjrWXraikjyhyphenhyphenRAJGf9DubChGZQ49hN4j2ryl1VDkZ/s1600/chibi_commission___finnian_by_meguja-d4qwodc.png

selamat mencoba ya sobat.....good luck yaaah ^ _ ^

"Cara Menambahkan Back To Top Button Pada Blog

hai kembali lagi sengan tutorial!! kali ini judulnya Cara Menambahkan Back To Top Button Pada Blog, Manfaatnya sih..... mmmm supaya bisa kembali pada tampilan layar atas. oke! contohnya kalian bisa lihat blogku! sudut kanan bawah ada kan? nah ada juga gambar selain itu! mau gak?? ok!! beneran mau? ok! (Ikuti Step).

1) Sign in Account blogger

2) Dashboard > Design > Add A Gadget > Html /Javascript

3) Copy paste kode di bawah pada ruang Html /Javascript tadi

<a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar button"></a>

4) Ganti tulisan URL Gambar Button itu dengan Gambar Button yang kalian mau! pilih ya...

http://img205.imageshack.us/img205/7824/74211510.gif

http://img196.imageshack.us/img196/6670/49238758.png

http://img266.imageshack.us/img266/3325/81258407.png

http://img13.imageshack.us/img13/5533/20610818.png

http://img543.imageshack.us/img543/5941/62667078.png

http://img267.imageshack.us/img267/7242/36935517.png

http://img857.imageshack.us/img857/4428/12543870.png

http://img17.imageshack.us/img17/3190/51122514.png

http://img31.imageshack.us/img31/9105/57461251.png

http://img811.imageshack.us/img811/5130/38543106.png

http://img26.imageshack.us/img26/2135/83340054.png