[ONGOING] VocaPost Blog

Subject: [ONGOING] VocaPost Blog Fri 19 Aug 2011 - 4:42

First topic message reminder :

testing site http://vocapost-blog.vacau.com/

bagi tim penulis dll harap join ke http://vocapost-blog.vacau.com/index.php?option=com_user&view=register

alternate server wrote:: http://vocapostblog.cu.cc/

Yang mudah dilakukan sekarang adalah: "quote dari Rakuin"
- Pos pendahuluan
- Pos album kompilasi Vocalo.id
- Pos album Merah Putih Vocaloid
- Pos karya-karya yang sudah ada di sini
- Pos Weekly Vocaloid Ranking
para penulis, selamat menulis

Quote :: Ide awal

Kemaren entah kenapa tiba temen-temen member VP yang saya kenal via skype dan IRC tiba2 ngusulin soal Blog VP.

Quote :

CONTENT

VocaPost News
Review
Vocaloid News
VocaSTDUIO
VocaGallery (Dub / Sub / Pics / Draw, etc)
Tutorial
About VocaPost

Quote :

OPEN RECRUITMENT

Web Desainer
Editor
Reguler Writer
Guest Writer (contributor)
VOCAPOSTER SUPPORT

Quote :: ALUR KERJA

Writer / contributor > Translator > Editor > Publish

=======================================

Penjelasan ALUR KERJA

untuk News Internasional, karena news ini lebih cepat muncul di situs2 berbahasa inggris / bahasa Jepang jadi

Penulis / kontributor / penemu artikel memberitahukan ke translator > Translator akan mentranslate berita tersebut > posting sebagai draft > editor mengecek > kalo OK langsung publish

untuk News Lokal / tutor / Utau :

Penulis menulis posting sebagai draft > memberitahukan ke editor > kalo OK langsung publish

untuk gallery dub gambar dll :

Post karya posting sebagai draft > memberitahu ke editor > kalo OK langsung publish

==============================

oke kalo begini pasti ada pertanyaan :

Kalo saya bisa translate sendiri tentang berita dari LN gimana?
- silahkan langsung posting ke draft tanpa melalui translator

Quote :

JOB DESC

Penulis Tetap (Public Relationnya VP)

Merangkum semua even yang ada di forum VocaPost
Mereview produk yang berhubungan dengan vocaloid

Penulis Lepas (Kontributor)

Menulis Berita tentang Vocaloid
Menulis Tutorial
Memposting Gallery (dub, sub, draw, paint, etc)

Desainer (web desain)

Membangun blog VocaPost

Translator

Mengalih bahasakan postingan

Editor

Mengecek postingan para penulis
Menentukan layak ato tidaknya tulisan untuk di tayangkan

Administrator

QC terakhir blog VP

Quote :

Temen2 yang sudah daftar

tim penulis (soal reguler ato gak, entar ya, ini baru pendataan)

rito
Rakuin
Ako
crash_test
minchi
alfexfreschi
FiaXrin
greenfoliage

Tim Translator

bira
starza.shine
luzzy
Powerkid

Tim Desain

provoltion
KeiKaliandra
Indrahebat
mohax_2000
M_Fathullah

Editor :

gie
Rakuin

Project leader

rikishi

Untuk sementara seigini dulu, mari berdiskusi dan silahkan mengusulkan sesuatu

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 5:10

sekarang udah cukup seamless sama blognya Very Happy

barusan juga install plugin youtube, bisa embbed pake tag {youtube}{/youtube}
tinggal nyari cara gimana biar blogpostnya langsung update ke mainpage.

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 5:25

Karena blognya udah punya link ke forum...
Gimana kalo forumnya juga dikasi link ke Blog Yap

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 5:34

blognya dah di testrun nih,
gimana para penulis sudah siap nulis juga kah?

==================
blognya sekalian launching bareng waktu ganti url forum ini tanggal 31 juga?

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 14:23

Crash... buat galeri gambar lo bisa cari modul yang keren ga?

Biar berasa gallery beneran gituu...

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 15:50

simple :
http://extensions.joomla.org/extensions/photos-a-images/photo-gallery/11426
http://www.bretteleben.de/lang-en/joomla/css-gallery.html

slideshow:
http://www.joomlahackers.net/demosite/index.php?option=com_content&view=article&id=169&Itemid=309
http://www.joomlashine.com/joomla-extensions/jsn-imageshow/jsn-imageshow-details.html
http://extensions.joomla.org/extensions/photos-a-images/images-slideshow/13119

gallery:
http://extensions.joomla.org/extensions/photos-a-images/photo-flash-gallery/4883

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 16:58

ini PHP versi berapa ya? rasanya msh blm kenceng, pake PHP accelerator ga?

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 17:12

Versi 5.2 pakde. Keknya ga pake deh.

@crash mkc. Install beberapa yah. ahahahaha Ohoho

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 17:12

Ntar klo mau pindahan saya kasih ftp nya deh.

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 17:50

Ini masih dalam tahap desain, kan? Blog sudah mulai bisa diisi konten kapan? Yang pasti sebelum diluncurkan harus sudah ada isinya, paling tidak pos pendahuluan dan halaman "Tentang Vocapost".

Ngomong-ngomong, bagaimana kalau link ke IRC dipasang di halaman depan juga?

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 18:33

nanti klo udah punya domain http://vocapost.net/ homepage bisa dibikin kayak gini Razz

http://voca-indo.to-relax.net/h1-enter-vocapost

ada yg bisa desain HTML welcome page lebih baik gak? lol!

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 18:51

mohax_2000 wrote:: nanti klo udah punya domain http://vocapost.net/ homepage bisa dibikin kayak gini

http://voca-indo.to-relax.net/h1-enter-vocapost

ada yg bisa desain HTML welcome page lebih baik gak?

brutal designnya : lol!

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 18:56

@Rakuin : IRC taruh depan = GASWAT Laugh

Subject: Re: [ONGOING] VocaPost Blog Tue 23 Aug 2011 - 21:57

HTML + CSS untuk portal VocaPost.
Aye ngebuatnya make CSS3, jadi browser jadul bakal nampilin tampilan yang berbeda.
CSS 3 baru disupport Firefox 4++ kalo ga salah.

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>index.html</title>
<style type="text/css">
body {
font: normal 12px/100% Calibri, Arial, Helvetica, sans-serif;
}

a, a:hover, a:visited {
text-decoration:none;
}

label {
position:relative;
top:100px;
}

img {
position:relative;
top:-20px;

padding-bottom:20px;
}

hr {
margin-top:-20px; margin-bottom:-19px; opacity:0.4;
}

#welcome {
position:relative;
top:20px;

font: normal 50px/100% Calibri, Arial, Helvetica, sans-serif;
color: #89c;
}

#page {
margin: 0 auto;
width:1024px;
}

#link_desc {
position:relative;
top:7px;

font: normal 12px/100% Calibri, Arial, Helvetica, sans-serif;
color:#444;
}

.link_btn {
position:relative;
top:65px;

margin:10px;
padding:20px;

font: bold 36px/100% Calibri, Arial, Helvetica, sans-serif;
text-align:center;

-moz-border-radius: 5px;
border-radius: 5px;

-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
}

.forum_btn {
display:block;

position:relative;
top:25px;

margin:10px;
padding:20px;

font: bold 36px/100% Calibri, Arial, Helvetica, sans-serif;
text-align:center;

-moz-border-radius: 5px;
border-radius: 5px;

-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);

width:450px;

color: #ad8;
}

.forum_btn:hover {
color: #FFF;
background: #ad8;
}

.blog_btn {
display:block;

position:relative;
top:25px;

margin:10px;
padding:20px;

font: bold 36px/100% Calibri, Arial, Helvetica, sans-serif;
text-align:center;

-moz-border-radius: 5px;
border-radius: 5px;

-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);

width:450px;
color: #acf;
}

.blog_btn:hover {
color: #FFF;
background: #acf;
}

#left_column {
float:left;
}

#right_column {
float:right;
}

</style>
</head>
<body>
<center>
<div id="page">
   <div id="welcome">
      Selamat Datang di
   </div>
   <img src="http://i64.servimg.com/u/f64/15/34/27/76/mainpi11.png"/><br><hr noshade size=5px color='#999'>
   <div id="left_column"><a class="forum_btn" href="http://voca-indo.to-relax.net/">Forum</a><br><label id="link_desc">http://voca-indo.to-relax.net/</label></div>
   <div id="right_column"><a class="blog_btn" href="http://vocapost-blog.vacau.com/">Blog</a><br><label id="link_desc">http://vocapost-blog.vacau.com/</label></div>
   
</div>
</center>
</body>
</html>

Kalo di kompi aye tampilannya kayak gini :
[ONGOING] VocaPost Blog - Page 5 J73ywy

Kalo ada masukan bilang aja... nanti saya coba improve.

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 1:32

^wuah cantik banget Lover High

keren mastah Nice Job

desain favorit saya

http://voca-indo.to-relax.net/h2-by-provoltion

also tested on operamini jalan cheers

- - -

ndra crash & temen2 sorry saya ngacak2 blognya malem2 gak bilang2 Razz

btw ini template asik bgt, coba ada yg free mobel begini ya...
http://demo.joomlamini.com/index.php?option=com_content&view=category&layout=blog&id=2&Itemid=3

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 3:57

Prov : manteb kk, cuman entar alamatnya dirubah ya, ke www.vocapost.net Blush

PS : sesepuh2 VP ada yang mau nulils soal TENTANG VOCAPOST kah, sebagai postingan pertama di blog

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 9:44

Wah, makasih kk-kk sekalian Blush

@mohax_2000
Di Opera Mini jalan?! Sip~lah! xD
Opera Mini tu yang buat HP kan? xD

@rikishi
Pastilah~ Nice Job

Perlu digantinya kapan nih? waktu mau ganti domain atau sekarang aja?
Emang portalnya tu blom dipublish ke public yak? Confused

kalo belum sih, langsung ganti aja sebenernya. Hahaha

----------------------------------------------
Barusan iseng-iseng lagi. Blush

Ngebagusin tampilannya sedikit (waktu hover).
Sama ngerapihin codenya biar kalo mau nambahin link gampang. (hanya terasa untuk developer) Hahaha

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>VOCAPOST</title>
<style type="text/css">
body {
font: normal 12px/100% Calibri, Arial, Helvetica, sans-serif;
}

a, a:hover, a:visited {
text-decoration:none;
}

img {
position:relative;
top:-20px;

padding-bottom:20px;
}

hr {
margin-top:-20px; margin-bottom:-19px; opacity:0.4;
}

/*************************** ID ***************************/

#page {
margin: 0 auto;
width:1024px;
}

#header {
position:fixed;
width:1024px;
top:0;
background:#fff;
}

#welcome {
position:relative;
top:20px;

font: normal 50px/100% Calibri, Arial, Helvetica, sans-serif;
color: #89c;
}

#content {
margin:0 10px 30px 10px;
}

#left_column {
float:left;
margin-top:40px;
height:75px;
}

#right_column {
float:right;
margin-top:40px;
height:75px;
}

#left_column:hover .link_desc, #right_column:hover .link_desc {
visibility:visible;
}

#left_column .hide:hover .link_desc, #right_column .hide:hover .link_desc{
visibility:hidden;
}

/*************************** Class ***************************/

.temp_btn {
display:block;

position:relative;
z-index:5;

padding:20px;
width:350px;

font: bold 36px/100% Calibri, Arial, Helvetica, sans-serif;
text-align:center;

background:#fff;

/**** CSS 3 features ****/
border-radius: 5px;       /* WC3 */
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Chrome, Safari */
-o-border-radius: 5px;    /* Opera */

box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);       /* WC3 */
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4); /* Firefox */
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4); /* Chrome, Safari */
-o-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);    /* Opera */
/************************/
}

.temp_btn:hover {
color: #FFF;
}

.forum_btn {
color: #ad8;
}

.forum_btn:hover {
background: #ad8;
}

.blog_btn {
color: #acf;
}

.blog_btn:hover {
background: #acf;
}

.link_desc {
display:block;
visibility:hidden;

position:relative;
top:-14px;
z-index:4;

padding:5px;
width:350px;

background: #777;

font: normal 12px/100% Calibri, Arial, Helvetica, sans-serif;
color:#fff;

/**** CSS 3 features ****/
border-radius: 0 0 10px 10px;          /* WC3 */
-moz-border-radius: 0 0 10px 10px;       /* Firefox */
-webkit-border-radius: 0 0 10px 10px;    /* Chrome, Safari */
-o-border-radius: 0 0 10px 10px;       /* Opera */
/************************/
}

.hide {
position:relative;
height:0;
background:#f00;
}

</style>
</head>
<body>
<center>
<div id="page">
   
      <div id="welcome">
         Selamat Datang di
      </div>
      <img src="http://i64.servimg.com/u/f64/15/34/27/76/mainpi11.png"/><br><hr noshade size=5px color='#999'>
   
   <div id="content">
      <div id="left_column"><a class="temp_btn forum_btn" href="http://voca-indo.to-relax.net/">Forum</a><br><div class="hide"><label class="link_desc">http://voca-indo.to-relax.net/</label></div></div>
      <div id="right_column"><a class="temp_btn blog_btn" href="http://vocapost-blog.vacau.com/">Blog</a><br><div class="hide"><label class="link_desc">http://vocapost-blog.vacau.com/</label></div></div>
   </div>
</div>
</center>
</body>
</html>

Tapi tadi saya sempet explorasi lebih lanjut tentang CSS3.
Dan saya ngebuat lagi versi yang memaksimalkan fitur CSS3 (pake animasi. Laugh

)
Effectnya 2x lebih berat (beratnya waktu ngejalanin animasinya, bukan waktu page load)
Yang jelas, animasi ini bisa ke semua browser yang punya CSS3(yang versi paling baru kalo mau aman.) SELAIN SANG IE walopun sama IE yang udah punya CSS3!! Rage Frown

Tanpa animasi, waktu ngehover makan 15% CPU usage,
kalo pake animasi, makan ampe 27% CPU usage Sweat

Selama ngga dimainin(dihover-hover ampe gila. Hahaha

) sih nyante2 aja sebenernya.

Ini codenya:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>VOCAPOST</title>
<style type="text/css">
body {
font: normal 12px/100% Calibri, Arial, Helvetica, sans-serif;
}

a, a:hover, a:visited {
text-decoration:none;
}

img {
position:relative;
top:-20px;

padding-bottom:20px;
}

hr {
margin-top:-20px; margin-bottom:-19px; opacity:0.4;
}

/*************************** ID ***************************/

#page {
margin: 0 auto;
width:1024px;
}

#header {
position:fixed;
width:1024px;
top:0;
background:#fff;
}

#welcome {
position:relative;
top:20px;

font: normal 50px/100% Calibri, Arial, Helvetica, sans-serif;
color: #89c;
}

#content {
margin:0 10px 30px 10px;
}

#left_column {
float:left;
margin-top:40px;
height:75px;
}

#right_column {
float:right;
margin-top:40px;
height:75px;
}

#left_column:hover .link_desc, #right_column:hover .link_desc {
visibility:visible;
}

#left_column .hide:hover .link_desc, #right_column .hide:hover .link_desc{
visibility:hidden;
}

/*************************** Class ***************************/

.temp_btn {
display:block;

position:relative;
z-index:5;

padding:20px;
width:450px;

font: bold 36px/100% Calibri, Arial, Helvetica, sans-serif;
text-align:center;

background:#fff;

/**** CSS 3 features ****/
border-radius: 5px;       /* WC3 */
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Chrome, Safari */
-o-border-radius: 5px;    /* Opera */

box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);       /* WC3 */
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4); /* Firefox */
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4); /* Chrome, Safari */
-o-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);    /* Opera */
/************************/
}

.temp_btn:hover {
color: #FFF;
}

.forum_btn {
color: #ad8;
}

.forum_btn:hover {
background: #ad8;
}

.blog_btn {
color: #acf;
}

.blog_btn:hover {
background: #acf;
}

.link_desc {
display:block;
visibility:hidden;

position:relative;
top:-14px;
z-index:4;

padding:5px;
width:350px;

background: #777;

font: normal 12px/100% Calibri, Arial, Helvetica, sans-serif;
color:#fff;

/**** CSS 3 features ****/
border-radius: 0 0 10px 10px;          /* WC3 */
-moz-border-radius: 0 0 10px 10px;       /* Firefox */
-webkit-border-radius: 0 0 10px 10px;    /* Chrome, Safari */
-o-border-radius: 0 0 10px 10px;       /* Opera */
/************************/
}

.hide {
position:relative;
height:0;
background:#f00;
}

</style>
</head>
<body>
<center>
<div id="page">
   
      <div id="welcome">
         Selamat Datang di
      </div>
      <img src="http://i64.servimg.com/u/f64/15/34/27/76/mainpi11.png"/><br><hr noshade size=5px color='#999'>
   
   <div id="content">
      <div id="left_column"><a class="temp_btn forum_btn" href="http://voca-indo.to-relax.net/">Forum</a><br><div class="hide"><label class="link_desc">http://voca-indo.to-relax.net/</label></div></div>
      <div id="right_column"><a class="temp_btn blog_btn" href="http://vocapost-blog.vacau.com/">Blog</a><br><div class="hide"><label class="link_desc">http://vocapost-blog.vacau.com/</label></div></div>
   </div>
</div>
</center>
</body>
</html>

Saya serahkan kepada bang mohax_2000, untuk milih mau pake yang mana...

-------------------------------------
Informasi lebih lanjut, tadi saya sempet buka HTMLnya pake IE8 yang blom punya CSS3
Dan tampilannya... ya... begitulah Sweat

Perlu dibuat kompatibilitas buat browser-browser jadul(baca: IE!!) tidak nih?
Soalnya jujur aja, saya rada males ngurusin IE, dunianya lain sendiri sih. Laugh

Tapi kalo maunya dibuat kompatibel juga ama IE ya, saya coba. Nice Job

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 10:34

lol saya coba test di IE jadinya berantakan Wha..!?

tapi gpp lah.. hari gini masih pake IE..?! lol

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 15:28

^minchi pake IE berapa? Confused

di saya masih rapi IE 8
makin kompatibel makin bagus, apalagi sekarang banyak gadget mobile Razz

http://voca-indo.to-relax.net/h3-by-provoltion-2
http://voca-indo.to-relax.net/h4-by-provoltion-3

saya lebih fav yang pertama Very Happy

http://voca-indo.to-relax.net/h2-by-provoltion

oya udah coba di resolusi 1024 x 768?

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 16:17

@mohax_2000
Fix tampilan untuk resolusi 1024x768. >.<
Ngga saya cek soalnya udah yakin ama itung-itungannya.
Dan begitu dicek, ternyata itungannya salah. Desperate

Berhubung bang mohax lebih tertarik sama yang pertama, jadi yang pertama aja yah kodenya... (biar ga menuh2in Sweat

)
Yang desain keduakan intinya cuma beda waktu hover aja.

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>VOCAPOST</title>
<style type="text/css">
body {
font: normal 12px/100% Calibri, Arial, Helvetica, sans-serif;
}

a, a:hover, a:visited {
text-decoration:none;
}

label {
position:relative;
top:100px;
}

img {
position:relative;
top:-20px;

padding-bottom:20px;
}

hr {
margin-top:-20px; margin-bottom:-19px; opacity:0.4;
}

#welcome {
position:relative;
top:20px;

font: normal 50px/100% Calibri, Arial, Helvetica, sans-serif;
color: #89c;
}

#page {
margin: 0 auto;
width:950px;
}

#link_desc {
position:relative;
top:7px;

font: normal 12px/100% Calibri, Arial, Helvetica, sans-serif;
color:#444;
}

.link_btn {
position:relative;
top:65px;

margin:10px;
padding:20px;

font: bold 36px/100% Calibri, Arial, Helvetica, sans-serif;
text-align:center;

-moz-border-radius: 5px;
border-radius: 5px;

-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
}

.forum_btn {
display:block;

position:relative;
top:25px;

margin:10px;
padding:20px;

font: bold 36px/100% Calibri, Arial, Helvetica, sans-serif;
text-align:center;

-moz-border-radius: 5px;
border-radius: 5px;

-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);

width:450px;

color: #ad8;
}

.forum_btn:hover {
color: #FFF;
background: #ad8;
}

.blog_btn {
display:block;

position:relative;
top:25px;

margin:10px;
padding:20px;

font: bold 36px/100% Calibri, Arial, Helvetica, sans-serif;
text-align:center;

-moz-border-radius: 5px;
border-radius: 5px;

-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);
box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);

width:450px;
color: #acf;
}

.blog_btn:hover {
color: #FFF;
background: #acf;
}

#left_column {
float:left;
}

#right_column {
float:right;
}

</style>
</head>
<body>
<center>
<div id="page">
<div id="welcome">
Selamat Datang di
</div>

<img src="http://i64.servimg.com/u/f64/15/34/27/76/mainpi11.png"/><br><hr noshade size=5px color='#999'>
<div id="left_column"><a class="forum_btn" href="http://voca-indo.to-relax.net/">Forum</a><br><label id="link_desc">http://voca-indo.to-relax.net/</label></div>
<div id="right_column"><a class="blog_btn" href="http://vocapost-blog.vacau.com/">Blog</a><br><label id="link_desc">http://vocapost-blog.vacau.com/</label></div>

</div>
</center>
</body>
</html>

-------------------------------------
Btw,
Abis saya cek tadi... LOH KOK ANIMASINYA GA ADA?!?!?
Dan abis saya periksa, ternyata salah paste code, bang. Maap!! Bloody

Mustinya yang animasi tuh yang ini

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>VOCAPOST (CSS3)</title>
<style type="text/css">
body {
font: normal 12px/100% Calibri, Arial, Helvetica, sans-serif;
}

a, a:hover, a:visited {
text-decoration:none;
}

img {
position:relative;
top:-20px;

padding-bottom:20px;
}

hr {
margin-top:-20px; margin-bottom:-19px; opacity:0.4;
}

/*************************** ID ***************************/

#page {
margin: 0 auto;
width:950px;
}

#header {
position:fixed;
width:1024px;
top:0;
background:#fff;
}

#welcome {
position:relative;
top:20px;

font: normal 50px/100% Calibri, Arial, Helvetica, sans-serif;
color: #89c;
}

#content {
margin:0 10px 30px 10px;
}

#left_column {
float:left;
margin-top:40px;
height:75px;
}

#right_column {
float:right;
margin-top:40px;
height:75px;
}

#left_column:hover .link_desc, #right_column:hover .link_desc {
visibility:visible;

top:-14px;
}

#left_column .hide:hover .link_desc, #right_column .hide:hover .link_desc{
top:-50px;
}

/*************************** Class ***************************/

.temp_btn {
display:block;

position:relative;
z-index:5;

padding:20px;
width:350px;

font: bold 36px/100% Calibri, Arial, Helvetica, sans-serif;
text-align:center;

background:#fff;

/**** CSS 3 features ****/
border-radius: 5px;       /* WC3 */
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Chrome, Safari */
-o-border-radius: 5px;    /* Opera */

box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);       /* WC3 */
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4); /* Firefox */
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4); /* Chrome, Safari */
-o-box-shadow: 0 0 5px rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.4);    /* Opera */

transition:width 0.5s, color 0.5s, background 0.5s;       /* WC3 */
-moz-transition:width 0.5s, color 0.5s, background 0.5s;    /* Firefox */
-webkit-transition:width 0.5s, color 0.5s, background 0.5s; /* Chrome, Safari */
-o-transition:width 0.5s, color 0.5s, background 0.5s;    /* Opera */
/************************/
}

.temp_btn:hover {
width:450px;
color: #FFF;
}

.forum_btn {
color: #ad8;
}

.forum_btn:hover {
background: #ad8;
}

.blog_btn {
color: #acf;
}

.blog_btn:hover {
background: #acf;
}

.link_desc {
display:block;

position:relative;
top:-50px;
z-index:4;

padding:5px;
width:350px;

background: #777;

font: normal 12px/100% Calibri, Arial, Helvetica, sans-serif;
color:#fff;

/**** CSS 3 features ****/
border-radius: 0 0 10px 10px;          /* WC3 */
-moz-border-radius: 0 0 10px 10px;       /* Firefox */
-webkit-border-radius: 0 0 10px 10px;    /* Chrome, Safari */
-o-border-radius: 0 0 10px 10px;       /* Opera */

transition:top 0.5s;       /* WC3 */
-moz-transition:top 0.5s;    /* Firefox */
-webkit-transition:top 0.5s; /* Chrome, Safari */
-o-transition:top 0.5s;    /* Opera */
/************************/
}

.hide {
position:relative;
height:0;
background:#f00;

/**** CSS 3 features ****/
transition:top 0.5s;       /* WC3 */
-moz-transition:top 0.5s;    /* Firefox */
-webkit-transition:top 0.5s; /* Chrome, Safari */
-o-transition:top 0.5s;    /* Opera */
/************************/
}

</style>
</head>
<body>
<center>
<div id="page">
   
      <div id="welcome">
         Selamat Datang di
      </div>
      <img src="http://i64.servimg.com/u/f64/15/34/27/76/mainpi11.png"/><br><hr noshade size=5px color='#999'>
   
   <div id="content">
      <div id="left_column"><a class="temp_btn forum_btn" href="http://voca-indo.to-relax.net/">Forum</a><br><div class="hide"><label class="link_desc">http://voca-indo.to-relax.net/</label></div></div>
      <div id="right_column"><a class="temp_btn blog_btn" href="http://vocapost-blog.vacau.com/">Blog</a><br><div class="hide"><label class="link_desc">http://vocapost-blog.vacau.com/</label></div></div>
   </div>
</div>
</center>
</body>
</html>

Ampunilah hamba. Desperate

Ok, untuk naikin kompatibilitas, saya coba kerjakan. ^^
----------------------------
@minchi
Iya... begitulah IE. Sweat

Pusat permasalahan bagi web developer. Ngebuat orang musti bikin dua versi...
Versi untuk semua browser, ama versi untuk IE. Sweat

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 16:27

saya idem sama om mohax, lebih suka yang pertama,
ganti domainnya kalo jadi bakal di eksekusi tanggal 31 entar,
jadi mumpung ganti domain sekalian lah ngelaunch blog juga,

ayo mas mas dan mbak mbak penulis diatas, silahkan menyiapkan artikel ya Blush

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 16:32

http://voca-indo.to-relax.net/h4-by-provoltion-3

wah bagus yg animated Surprised

- - -

oya blog-nya belum siap buat launching tanggal 31 Razz

coba semua contributor dan staff mulai register :

http://vocapost-blog.vacau.com/index.php?option=com_user&view=register

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 16:39

oh blom siap ya, oke deh, nunggu siap aja dah

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 16:45

@prov: mau tanya gimana sih cara bikin menu yang statik/stack overflow/body only to scroll kayak gini:

http://demo.joomlamini.com/index.php?option=com_content&view=category&layout=blog&id=2&Itemid=3

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 17:03

Itu bisa pake CSS,
si sidebar yang kiri dikasih position ama left di dalem cssnya.

Misalnya sidebar itu make class namanya 'sidebar', maka :

Code:: .sidebar {
...
position:fixed;
left:0;
...
}

*maksudnya '...' tu ntah isinya apa ya, jangan ditulis beneran. Very Happy

Tapi nanti page yang dikanan bakal mojok ke kiri juga gara2 dia udah ngga nganggep si sidebar itu ada.
Jadi page yang kanan musti di kasih padding-left yang gede(kurang lebih segede widthnya sidebar) ampe tampilannya pas.
Ato bisa juga pake position:relative; ama left:*sekian*px;
terserah mau make yang mana. Very Happy

Sori kalo penjelasan aye kurang jelas Desperate

Subject: Re: [ONGOING] VocaPost Blog Wed 24 Aug 2011 - 17:09

^ya udah deh Razz

join aja jd desainer di mari...
http://vocapost-blog.vacau.com/index.php?option=com_user&view=register

» [ONGOING] VOCAPOST Blog Open Journalism
» [ONGOING] Vocapost Uta-Challenge
» [ONGOING] VOCAPOST Mascot Design
» [ONGOING] Project Band VP
» [ONGOING]Thread Pemesanan V.I.P Artbook "COSMITTO"