omagus.com http://omagus.com Need Unlimited Creativity Wed, 09 May 2012 05:44:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 http://omagus.com http://omagus.com/wp-content/uploads/2009/06/omagus.ico omagus.com Menggunakan font sendiri di website [firefox solved] http://omagus.com/menggunakan-font-sendiri-di-website-firefox-solved.php http://omagus.com/menggunakan-font-sendiri-di-website-firefox-solved.php#comments Wed, 09 May 2012 05:39:50 +0000 omagus http://omagus.com/?p=881
Ada beberapa cara untuk menggunakan custom font. Menggunakan font tertentu mungkin yang tak lazim di gunakan oleh orang lain adalah salah satu cara untuk mempercantik website kita. Kita bisa mencari macam-macam font yang bisa kita pakai di font squirel atau di direktori font google.

Saya mengasumsikan anda memakai wordpress dengan hosting sendiri. Dan kira kira begini caranya. Di sini saya menggunakan Font Bebas Neue.

1. Masukan fontkit yang akan anda gunakan pada folder theme anda, anda bisa menggunakan folder tersendiri. Biasanya file font terdiri dari beberapa format file seperti otf/ttf, eot, woff dan svg .

2. Kemudian pada file css nya masukan script embed untuk fonnya menggunakan fontface

Basic / CSS pada umumnya
CSS
1
2
3
4
5
6
7
8
9
10
11
@font-face {
font-family: 'BebasNeueRegular';
src: url('font/BebasNeue-webfont.eot');
src: url('font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('font/BebasNeue-webfont.woff') format('woff'),
url('font/BebasNeue-webfont.ttf') format('truetype'),
url('font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

 

3. Kemudian pada tentukan di mana font itu akan di gunakan

Pointing
CSS
1
2
3
4
5
h1 { color: transparent;
font-family: 'BebasNeueRegular';
font-size: 6em;
font-weight: normal;
}

Dan selesai..? Font anda berubah sesuai keingingan anda..!. Tapi coba, tidak semua browser bisa support embed font seperti ini. Salah satunya adalah firefox, Tambahkan dot slash di depan kode letak font pada css anda

CSS Crossbrowser
CSS
1
2
3
4
5
6
7
8
9
10
11
@font-face {
font-family: 'BebasNeueRegular';
src: url('./font/BebasNeue-webfont.eot');
src: url('./font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('./font/BebasNeue-webfont.woff') format('woff'),
url('./font/BebasNeue-webfont.ttf') format('truetype'),
url('./font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Simpan kemudian di reload. Kalau editing anda masih di localhost, biasanya font di browser firefox bisa terbaca. Tapi jika sudah anda upload dan ternyata tidak berjalan di beberapa browser terutama firefox. Kita dengan terpaksa memberikan akses terhadap file lewat .htaccess.

Masukan script ini di file .htaccess anda .

Masukan di .htaccess
XHTML
1
2
3
4
5
    <filesmatch "\.(ttf|ttc|otf|eot|woff)$">
   <ifmodule mod_headers.c>
   Header set Access-Control-Allow-Origin "*"
   </ifmodule>
    </filesmatch>

Artikel Terhubung

]]> http://omagus.com/menggunakan-font-sendiri-di-website-firefox-solved.php/feed 0 testing update blog http://omagus.com/testing-update-blog.php http://omagus.com/testing-update-blog.php#comments Fri, 13 Apr 2012 06:56:09 +0000 omagus http://omagus.com/?p=875

Lama sekali nggak update blog, tadinya berencana blog ini mau di komersialkan. Tapi setelah di pikir matang2 ternyata sudah membranding ke personal blog. Jadi ya sudahlah memang enaknya buat personal blog aja, walaupun udah ada satu domain lagi yang web.id. Dan domain yang itu mau di pakai buat name card online aja deh gak usah buat ngeblog.

Kesibukan akhir-akhir ini membuat blog ini terbengkalai dan akhirnya hampir vacum dari ngeblog. Bahkan sekarang hampir gak pernah blog walking mengunjungi blog-blog temen temen. Nggak kaya dulu, walaupun ngakunya bukan blogger beneran tapi dulu lumayan rajin blog walking. Dan sepertinya sekarang mulai ber semangat lagi untuk ngeblog. Dan mumpung masih bersemangat mari kita bina semangat ini biar nggak kendur :d.

Ayoo..! Kita semangat ngeblog lagi dan berkontribusi..!

Artikel Terhubung

]]> http://omagus.com/testing-update-blog.php/feed 5 memperingan jalannya firefox di windows http://omagus.com/memperingan-jalannya-firefox-di-windows.php http://omagus.com/memperingan-jalannya-firefox-di-windows.php#comments Mon, 26 Dec 2011 06:41:03 +0000 omagus http://omagus.com/?p=830 Anda pemakai windows dengan broser firefox..? Tentunya anda merasakan bahwa pemakaian firefox memakan banyak sekali memori komputer kita.  Saya ingin berbagi mana meminimalisasi kebocoran memori pada firefox.  Banyaknya memori yang di pakai firefox tentunya akan mengurangi kinerja komputer kita. Dan Jika itu memang mengganggu kinerja anda anda bisa menggunakan firemin. Saya sempat membuat screenshot sebelum dan sesudah pemakaian firemin. Selain mempercepat kinerja firefox itu sendiri firemin terbukti mengurangi pemakaian memori komputer yang berlebihan.

Ini  screenshot sebelum saya memakai firemin. ini dengan kondisi saya membuka 10 tabs browser firefox.

 

 

 

Dan ini memori setelah saya menggunakan firemin. Sunggu penghematan yang luar biasa.

 

 

 

anda tertarik..? Silahkan download dan cari infonya di webnya

 

Artikel Terhubung

]]> http://omagus.com/memperingan-jalannya-firefox-di-windows.php/feed 6 css3 usefull links and tutorial http://omagus.com/css3-usefull-links-and-tutorial.php http://omagus.com/css3-usefull-links-and-tutorial.php#comments Wed, 21 Dec 2011 17:09:52 +0000 omagus http://omagus.com/?p=808 Jika anda memiliki ketertarikan terhadap kehebatan css3 seperti saya, Saya akan berbagi kepada anda beberapa website yang perlu anda kunjungi yang mempunyai tutorial dan koleksi hebat akan css3.  Dan jika anda mempunyai web-web lain selain yang anda di sini anda bisa mensubmitnya kesaya via kolom komentar, dan saya akan memasukan ke artikel.

Dan berikut adalah rekomendasi saya website yang perlu anda kunjungi :

w3schools.com/css3/


css3.info/

wearekiss

daneden.me

ecsspert

dochub.io/#css/

nicolasgallagher

robertnyman

tiamceege.com/pure-css3-content-slider/

tml5rocks.com

 

Lihat Juga Yang ini

]]> http://omagus.com/css3-usefull-links-and-tutorial.php/feed 2 Creakuno http://omagus.com/creakuno.php http://omagus.com/creakuno.php#comments Tue, 13 Dec 2011 06:32:27 +0000 omagus http://omagus.com/?p=796 WordPress theme with a selection of slides option, social networks, Featured post option with the slide.

Menu option to displays the category. Very suitable for portfolio themes. Designed by creakuno design, and already in use by creakuno.

Developed in alurkria  multimedia by omagus.

See the demo by clicking the link below

Artikel Terhubung

]]> http://omagus.com/creakuno.php/feed 0 Update wordpress 3.3 http://omagus.com/update-wordpress-3-3.php http://omagus.com/update-wordpress-3-3.php#comments Tue, 13 Dec 2011 03:20:47 +0000 omagus http://omagus.com/?p=780 Saat buka dashboard pagi ini, ternyata sudah rilis wp.3.3. Tanpa banyak basa basi langsung klik update now.  Lumayan tambah keren aja nih wordpress. Mulai dari penambahan .  Diantaranya :

File type detections
Lebih mudah dan efisien untuk mendeteksi file yang kita upload.

Drag and drop media Uploader

Anda tinggal menarik file dari desktop ke uploader. bisa satu atau banyak sekaligus.
More file format
Menambahkan file jenis rar dan 7z untuk bisa di upload

 

Selain itu ada beberapa perubahan pada desain dasrboard yang menurut saya lebih fresh. Juga beberapa fitur penambahan lainya. untuk lebih lengkap dan jelasnya. silahkan update wordpess anda untuk melihat beberapa perubahannya.

referensi untuk wordpress 3.3 :

wp codex

WordPress news

 

Artikel Terhubung

]]> http://omagus.com/update-wordpress-3-3.php/feed 3 css3 transition http://omagus.com/css3-transition.php http://omagus.com/css3-transition.php#comments Thu, 01 Dec 2011 21:03:41 +0000 omagus http://omagus.com/?p=732 Untuk mendapatkan efek hover pada suatu objek biasanya kita menggunakan javascript atau memakai flash. tapi dengan cs3 kita bisa mendapatkan hal tersebut. Kita bisa membuat efek berputar, di zoom atau di geser. Dengan efek easing yang biasanya memakai jquery.

XHTML
1
2
3
&lt;div id="tran"&gt;
&lt;a href="index.html"&gt;&lt;h1&gt;Your Logo&lt;/h1&gt;&lt;/a&gt;
&lt;/div&gt;

CSS :

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#tran h1 { width:  290px;
margin: 0 auto;
background: #000;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
height: 100px;  }
&nbsp;
#tran h1:hover {background: #333;
-webkit-transform: rotate(5deg) scale(1.05);
-moz-transform: rotate(5deg) scale(1.05);
-o-transform: rotate(5deg) scale(1.05);
-ms-transform: rotate(5deg) scale(1.05); }

Penjelasannya :

Tekhnik css di atas di gunakan untuk menampilkan animasi ease in out logo tag <h1>, dan saat posisi hover (mouse di atas object). maka akan di putar 5derajad

CSS
1
rotate(5deg)
. Dan akan di perbesar skalanya
CSS
1
scale(1.05)
.

Dengan tekhnik ini anda bisa membuat efek memutar text bisa sampai 360 derajad sserta bisa di zoom atau di perbesar. untuk kecepatan efectnya bisa anda sesuaikan sendiri pada bagian ini

CSS
1
all 1s ease-in-out;
. Anda bisa merubah 1s sesuai dengan yang anda inginkan.

untuk  previewnya silahkan lihat di website alurkria.com

Sekian selamat mencoba…!

 

Lihat Juga Yang ini

]]> http://omagus.com/css3-transition.php/feed 3 sebuai wordpress theme http://omagus.com/sebuai-wordpress-theme.php http://omagus.com/sebuai-wordpress-theme.php#comments Wed, 30 Nov 2011 12:15:44 +0000 omagus http://omagus.com/?p=751 Sebuai memakai wordpress untuk webnya. Memakai animasi jquery. Alurkria membuat theme wordpress ini khusus untuk sebuai. di desain oleh creakuno.

Artikel Terhubung

]]> http://omagus.com/sebuai-wordpress-theme.php/feed 0 dotgrey template lokomedia http://omagus.com/dotgrey-template-lokomedia.php http://omagus.com/dotgrey-template-lokomedia.php#comments Mon, 24 Oct 2011 23:56:22 +0000 omagus http://omagus.com/?p=706 Saat buka-buka file semalam saya menemukan data-data hostingan saya yang dulu. Dan yang menarik, saya menemikan kembali template lokomedia yang dulu pernah saya pakai untuk ngeblog. template ini saya namain dorgrey waktu itu. Template lokomedia dotgrey ini hasil redesign dari template buatan saya  sebelumnya, offlimits.

Dari segi tampilan berwarna abu-abu, dan beberapa fitur yang saya tambahkan adalah

  1. adsense (anda bisa merubah sendiri code-nya dengan adsense anda)
  2. Social media icon. di sidebar kanan ada icon social media yang bisa anda rubah dengan id akun anda.
  3. untuk block sekilas info saya letakkan di kanan atas.
  4. Ada tooltips di setiap link yang akan menampilkan keterangan link.
Silahkan anda download template lokomedia dotgrey  ini di dan berikan feedback bila ada eror untuk di perbaiki

-

Artikel Terhubung

]]> http://omagus.com/dotgrey-template-lokomedia.php/feed 5 membuat text 3d dengan css http://omagus.com/membuat-text-3d-dengan-css.php http://omagus.com/membuat-text-3d-dengan-css.php#comments Thu, 13 Oct 2011 20:14:29 +0000 omagus http://omagus.com/?p=687 Ada banyak cara untuk mempercantik penampilan blog atu web kita. Salah satunya adalah menggunakan teks 3 dimensi yang akan saya bahas kali ini. Kalau biasanya untuk menampilkan teks yang berupa 3d, menggunakan image atau gambar. Tapi dengan css saja kita juga bisa koq. mari kita mulai.

untuk sampel teksnya   nanti kira kira jadinya seperti ini.

lalu kita tulis kode htmlnya dengan id atau class tertentu.

[codesyntax lang="php"]

1
&lt;h1 class="inset"&gt; B.REG.P60. &lt;strong style="color:#CC0000"&gt;021&lt;/strong&gt;.BC7305. &lt;strong style="color:#CC0000"&gt;014&lt;/strong&gt;.no-rek-anda &lt;/h1&gt;

[/codesyntax]
An error has occurred. Please try again later.

nah dari class inset inilah yang akan kita masukan cssnya

masukan kode css seperti ini pada file css anda.

An error has occurred. Please try again later.

 

[codesyntax lang="css" capitalize="lower"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.inset {
font-size: 33px;
color:     #0099FF;
text-shadow:     0 1px 0 #bbb,
        0 2px 0 #bbb,
        0 3px 0 #aaa,
        0 4px 0 #aaa,
        0 5px 0 #999,
        0 6px 1px #000,
        0 0px 3px #000,
        0 1px 3px #000,
        0 3px 5px #000,
        0 5px 10px #000,
        0 5px 20px #000;}

[/codesyntax] 

An error has occurred. Please try again later.

Pembahasannya:

inti dari text 3d ini adalah kita membuat beberapa lapis shadow atau bayangan di bawah text, formatnya seperti ini :

1
[codesyntax lang="css" capitalize="lower"]

1
.inset { text-shadow: [X-offset] [Y-offset] [Blur size] [Colour]; }

1
[/codesyntax]

X-offset : jarak horisontal shadow dari text

Y-offset : jarak vertical dari text

Blur size : jarak ketebalan efek blur dari shadow itu sendiri

colour : warna dari shadow text yang anda inginkan, anda bisa memakai rgb atau memakai kode hex colour

.inset : nama class (terserah anda)

jadi untuk membuat efek 3 dimensinya anda bisa membuat beberapa lapis shadownya yang anda atur jarak dan warnanya seperti ini.

1
[codesyntax lang="css" capitalize="lower"]

1
text-shadow: 0 1px 0 #bbb, 0 2px 0 #bbb, 0 3px 0 #aaa, 0 4px 0 #aaa, 0 5px 0 #999, 0 6px 1px #000, 0 0px 3px #000, 0 1px 3px #000, 0 3px 5px #000, 0 5px 10px #000, 0 5px 20px #000;

1
[/codesyntax]

setiap satu rangkaian shadow di pisah koma(,)

Jadi bagaimana ..? mudah bukan..?

nah selamat mencoba dan sampai ketemu di trik berikutnya.

 

Artikel Terhubung

]]> http://omagus.com/membuat-text-3d-dengan-css.php/feed 7 Mohon Maaf Lahir dan Batin http://omagus.com/mohon-maaf-lahir-dan-batin.php http://omagus.com/mohon-maaf-lahir-dan-batin.php#comments Tue, 06 Sep 2011 05:53:42 +0000 omagus http://omagus.com/?p=671 mungkin agak telat, tapi kan ini masih syawal baru tanggal muda.

Saya ucapkan Selamat Hari Raya Idul Fitri, Mohon maaf lahir dan batin.

Bagi yang mau bersilaturahmi, kemaren saya sempet buat aplikasi website dengan jquery untuk idul fitri silahkan kunjungi

http://omagus.com/idul-fitri

Artikel Terhubung

]]> http://omagus.com/mohon-maaf-lahir-dan-batin.php/feed 3