Postingan

Menampilkan postingan dengan label tutorial

Tutorial : Link Hover

Gambar
Assalamu'alaikum Hello! Apa kabar semua!  Salma punya tutorial baru. Link Hover. Hey! Jangan kira tutorial ini copy. Tutorial ini dari Salma. Okkay, mau meng-aplikasikan LINK HOVER mu?? "Please, Read Carefull!" 1. Link Hover berubah warna.   a:link, a:visited { color: #C88EFE ; -webkit-transition:1s; } a:hover { -webkit-transition:1s; color: #F4A9A9 ; cursor: url( URL Cursor ), progges; } Merah : Warna Link sebelum di Hover, dan Warna Link Sesudh di Klik. Oranye : Warna Link ketika di Hover. Fuchsia : URL Cursor ketika meng-Hover Link. 2. Link Hover tercoret. a:link, a:visited { color: #C88EFE ; text-decoration:none; -webkit-transition:1s; } a:hover { -webkit-transition:1s; cursor: crosshair ; text-decoration: line-through; }   Merah : Warna Link. Fuchsia : Model Cursor ; Auto, Move, Crosshair, dll. 3. Link Hover Tercoret & Berubah warna. a:link, a:visited { color: #C88EFE ; text-decoration:none; -webkit-transitio...

Percepat Loading Blog

Gambar
Assalamu'alaikum Jujur, Salma baru tau kalau Shadow yang Salma pakai di Sidebar & Pages itu membuat lambat proses loading. Jadi, sekarang, dah Salma singkirkan tuh Shadow . Insyaallah, blog jadi nggak lemot-lemot banget kok. Takutnya, visitors lari. Gara-gara tunggu loading sampai pusing. Dan, Salma rubah shadow itu dengan border 3 px. Alhamdulillah, setelah dirubah berat blog turun 11 second (27 - 16). Lumayan lah yaa. Tapi, Salma lupa kalau Title belum dihilangkan shadow -nya. Salma pikir, kalau tak ada shadow tak bagus. Jadi, Salma kecil kan saja. Dari 3 jadi 2. Lumayan tau, tadinya 16 second. Jadi ... 9 Second!. Kalian harus coba ya. Biar visitors juga nggak bosan & nggak malas.  Oya, mau tes berat blog?  Segera pergi SINI . Dah tau? Gimana blog-nya? berat kah? ringan kah? Sukses buat yang ringan. Yang berat, jangan pergi dulu. Salma ada sedikit tips. 1. Hilangkan shadow blog.   2. Hilangkan Gadget yang dianggap 'kurang penting' ....

Tutorial : Navigasi Bergambar, samping kiri blog.

click semua! ~(' Lomo Wave by Miraa Husrin & Amer C ')~ ~(' Simple Giveaway by Atirah Hayati & Siti Syazwani ')~ ~(' Mega Tech Giveaway By MizzsNinie, CikMun And DrFara ')~ ~(' Segmen : Bw & Follow by Iza Zaty ')~ ~(' Blog Review by Syakirah Rusli ')~ ~(' Speacial Giveaway by Aiman ')~ Assalamu'alaikum Yuhuw, Salma masih seneng nih. Blog baru .. . Nah, tutorial ini ada kaitannya dengan Design baru blog Salma. Iaitu, navigasi. Yp, Salma mau kasih tau cara buat navigasi seperti Salma. Okelah, nggak perlu panjang lebar.  1. Sign in -> Dashboard -> Template 2. Copy & Paste kode bawah ini : a.navigation { position: fixed; text-transfrom:uppercase, lowercase; padding-right:5px; padding-left:5px; } a. navigation :hover { color:#ffffff; -webkit-transition:1s; border-radius:4px; } 3. Next-> tekan CTRL+F Cari kode : <body>  atau </style>    4. Copy, lalu Paste kan Kode ini dibawah kode ...

Ruang Follow Memanjang diatas (?)

Gambar
*Promote Giveaway Like, Share, and Win Contest Lomo Wave by Miraa Hussin & Amer C Simple Giveaway by Atirah Hayati & Siti Syazwani Happy Birthday & Mother's Day Giveaway  1st Giveaway by Syakilla Syed Alwi Assalamu'aalaikum Maaf, mungkin Judul membingungkan. Sebab, Salma sendiri juga ikut bingung mau kasih judul apa. Jadi, bagi kamu yang klik ini, beruntung deh. Beruntungnya, kamu jadi tau. Tapi, kalau udah tau .. . Ya, pergi juga gapapa.  Jadi, yang aku maksud adalah membuat .... 1. Sign in -> Dashboard -> Template 2. Tekan CTRL+F .  Lalu, Copy & Paste kode bawah ini di ruang itu. <head> 3. Lalu, letakkan kode ini di BAWAH kode <head> tadi. <div style='position: static; width:100%; position:fixed; padding:3px; background-image:url( http://2.bp.blogspot.com/-w55aEa7ZrtU/TaCfgxaYFgI/AAAAAAAABX0/x7CcO9PfDAM/s0/11111111111111111111111111111111111.png ); opacity:0.8 ; border:1px #888888 solid ; color:#1c1c1c ; font-size:11p...

Tutorial : Cute STATUS BOX

Gambar
(aih, bonekanya comelll) \ Bismillahirahmanirrahim /  Assalamualaikum ! Ada teman Salma yang pernah tanya tentang cara buat status box seperti Salma. And .., sekarang Salma mau kasih tau caranya. Maaf ya, baru sempet posting sekarang. F OR   T EMPLATE  1 .   LOG IN -> DASBOARD  -> DESIGN -> HTML/JAVA SCRIPT   2 . Next! >> COPAS CODE STATUS BAWAH INI, PILIH SESUAI KEINGINAN .               1 .   FUCHSIA <embed allowscriptaccess="never"  src=" http://i245.photobucket.com/albums/gg78/looma001/micovoice1.swf " width="160" height="150" wmode="transparent" type="application/x-shockwave-flash" flashvars="MyTxt= KATA-KATAMU " wmode="Window"/>                  2 .   PINK <embed allowscriptaccess="never"  src=" http://i245.photobucket.com/albums/gg78/looma001/micovoice2.swf " width="160" height="150" wmode="transparent" type="applica...

Tutorial : Scrollbar style

Gambar
  \ Bismillahirahmanirrahim /  Assalamualaikum ! Luangkan sedikit waktu untuk berbagi ILMU. \peace V /. Sekarang, Salma mau bagi cara buat scrollbar. Dah tau, apa itu scrollbar? Scrollbar ialah, ....hmmm... bingung jelasinnya nih. Langsung kasih gambaran aja ya ....  Nah, itu tuh scrollbar. Yang gunanya buat naik turunin post, kalo kita lagi baca \apa deh ni anak :P/. Nah, sekarang, lihat scrollbar saya. Lucu kan?  Nah, scrollbar itu style nya beraneka macam. Sekarang, aku kasih tau STYLE-STYLE Scrollbar ya! Rapatkan barisan. Baca dengan seksama \=='/ S TYLE 1 Style satu ini, modelnya border-radius. Jadi scroll nya melengkung gitu. TAMPANG : Nah, itu scroll model ke 1. Lengkung kan? Mau? Kodenya :               ::-webkit-scrollbar {               height: 10px;               width: 10px;               background: # ffffff ; ...

Tutorial : Buat huruf awal beda dengan huruf sudah (blogskin)

Gambar
\ Bismillahirahmanirrahim /  Assalamualaikum ! Siang ini, Salma ada kesempatan ON-LINE. Sudah sejak tadi sih. Tapi, Salma buat skin dulu. Dan, alhamdulillah, sudah selesai. Barusan Salma invite. Download ya! Okay, siang yang terik ini. Salma buat Tutorial baru. Kode ini bukan Salma yang buat. Salma tau kode ini belum lama ini. Jadi, mungkin ada yg belum mengerti. Tak salah kan, Salma bagi tau? Jadi, sekarang kita akan bahas cara buat ....  s eperti ini Nah, sudah faham? Tulisan SEPERTI INI diatas sedikit aneh kan? *apanyayanganeh* itu loh..., huruf awal lebih besar. Font pun beda warna. Bagaimana cara buat seperti itu? 1. Pergi ke : DASBOARD -> TEMPLATE  2. Lalu, cari kode :  .title2 {   atau : .main-title { bisa juga : .post-title { mungkin .... :  .h1{ 3. Next! bawah kode itu ..., beri kode : KODE MERAH :first-letter { color:# ffffff ; font-size: 20 px; font-weight: bold/ italic / underline ; Tugasmu, adalah merubah kode yg diberi warna : K...

Tutorial : Alert Message (welcome to my blog)

Gambar
\ Bismillahirahmanirrahim /  Assalamualaikum ! Sekarang ini, Salma mau kasih tau cara tambah gadget button 'Welcome to My Blog'.  contoh :  Nah, itu contohnya. Jadi, button itu nanti akan muncul bila masuk blog kamu. Mau? tambah gadget itu.  Cara : 1. LOG IN -> DESIGN -> ADD GADGET -> HTML/JAVA SCRIPT   2. Paste kode ini : <script> function MYALERT() { alert(" >> Selamat Datang << Jangan lupa Follow okey?! "); } MYALERT() </script> 3. Ubah kode merah itu dengan perkataanmu sendiri.  4. Save!  Selesai dah, coba cek. Refresh blog mu. Insyaallah berhasil deh. :D Jumpa esok ya .. Credit's

Tutorial + Freebies : Assalamu'alaikum setiap Entry

Gambar
\ Bismillahirahmanirrahim /  Assalamualaikum ! Bagi-bagi Freebies lagi! Yeah, memang tak pernah lelah ya Salma ini. Sekarang, Salma mau bagi-bagi Freebies ASSALAMU'ALAIKUM. Tapi, maaf cuma sedikit saja. Hanya4 buah Freebies. Sibuk lah Salma ini. Sudah mending bisa bagi-bagi, walawpun sedikit. \:P/ Sebelumnya, kita bahas cara gunanya ya! CREDIT's 4 the tutorial. 1. Log In -> Settings -> Formatting 2. Scroll ke bawah lalu cari TEMPLATE ENRY . Copy code bawah ini di kotak kosong itu. <a href="www. ID BLOG KAMU .blogspot.com" target="_blank"><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsHPqnY7231-uTPFWM3L8s5P3jBbW-QJeW0rMuPkUIntFDpQXBDOvAi-djM84TaZIhcFrbdM9_a9HwsBtGjDASa_hyphenhyphenvEEWhygyWyYq97R5hnzE9VXekrrBMiIGd8GjYGRNOlMQU8dvig/s1600/greet.png " border="0" alt="Assalamu'alaikum"></a>  KET : Ubah kode warna hijau dengan ID Blog kamu sendiri.          Ganti kode warna merah ...

Tutorial + Freebies : Scroll Back to TOP (Fly Up)

Gambar
\ Bismillahirahmanirrahim /  Assalamualaikum ! Salma sedang bagi-bagi Freebies. Sekarang FLY UP yang sedang Salma bagi. Mari rapatkan barisan, tengok Freebies Salma. Simple saja. Harap comment kalau mau pakai. Tapi, sebelumnya Salma mau kasih tau dulu cara tambahkan GADGET ini.  CREDIT's 4 the tutorial.  1. Log In -> Dasboard -> Design -> EDIT HTML -> Expand Widget Template 2. Tekan CTRL + F. Lalu, cari kode ini. </body>   3. Paste kode bawah ini SEBELUM kode </body> tadi.  <a href='#' id='Fly UP'><img src=' URL GAMBAR ?t=1292762029' style='border:0;'/></a> 4. Cari kode bawah ini di kotak CTRL + F ]]></b:skin>   5. Pastekan kode bawah ini SEBELUM kode ]]></b:skin>   /* to top */#toTop { width:100px;background:none;border:0px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px; right :10px;cursor:pointer;color:#666;text-decoration:none; }   6. Terakhir, cari kode : </...

Tutorial : Macam-Macam Border

Gambar
\ Bismillahirahmanirrahim /  Assalamualaikum ! Sekarang, bahas border ya! Friend (s)! Tau border kan? Border itu bingkai disekeliling kita gambar. Ngga harus gambar juga sih. Jadi border itu garis yang ada diluar BARANG. \:P/  Contoh nih,  Nah, sekarang tau kan? Garis PINK itu yang disebut border. Sekarang, gimana caranya buat border? Kamu hanya perlu menambahkan kode :  Border : 1 px solid # ff6699 Sekarang, kamu hanya perlu mengganti kode yang diberi warna.                                                                                                 Hijau   : Ketebalan border kamu. Semakin besar angkanya, maka semakin tebal bordernya. Biru      : Model border mu, kamu suka yang garis putus-putus atau...