Membuat artikel translate dengan CSS. pada postingan sebelumnya HAPIA Mesir memberikan contoh simple mentranslate artikel atau post dengan menggunakan <span>. berikut adalah tutorial membuat artikel translate dengan CSS sehingga membuat tampilan translate tersebut lebih atraktif.
HAPIA Mesir memohon maaf jika pada tutorial sebelumnya dirasa belum terlalu jelas. sekedar untuk memperjelas kembali apa itu yang dimaksud artikel translate ala HAPIA Mesir, arahkan mouse anda ke hadist Nabi -sholallahu 'alaihi wasallam- yang berbahasa arab berikut maka akan muncul artinya dengan bahasa indonesia:
HAPIA Mesir memohon maaf jika pada tutorial sebelumnya dirasa belum terlalu jelas. sekedar untuk memperjelas kembali apa itu yang dimaksud artikel translate ala HAPIA Mesir, arahkan mouse anda ke hadist Nabi -sholallahu 'alaihi wasallam- yang berbahasa arab berikut maka akan muncul artinya dengan bahasa indonesia:
لَا يَدْخُلُ الْجَنَّةَ مَنْ كَانَ فِي قَلْبِهِ مِثْقَالُ ذَرَّةٍ مِنْ كِبْرٍ قَالَ رَجُلٌ إِنَّ الرَّجُلَ يُحِبُّ أَنْ يَكُونَ ثَوْبُهُ حَسَنًا وَنَعْلُهُ حَسَنَةً قَالَ إِنَّ اللَّهَ جَمِيلٌ يُحِبُّ الْجَمَالَ الْكِبْرُ بَطَرُ الْحَقِّ وَغَمْطُ النَّاسِ
artinya : "Tidak akan masuk surga orang yang terdapat dalam hatinya kesombongan (walau) sebesar biji sawi. seseorang berkata : sesungguhnya seorang menyukai untuk memakai pakaian yang bagus dan alas kaki yang bagus. Rosulullah menjawab: sesungguhnya Allah itu indah dan menyukai keindahan. (yang disebut) kesombongan adalah menolak kebenaran dan merendahkan manusia (yang lain)" (HR Muslim)
Cara membuatnya adalah sebagai berikut :
- Login keBlogger dengan account anda.
- Masuk ke "Tata Letak - Edit HTML" kemudian copy paste code CSS berikut diatas ]]></b:skin> :
- Login keBlogger dengan account anda.
- Masuk ke "Tata Letak - Edit HTML" kemudian copy paste code CSS berikut diatas ]]></b:skin> :
#translate ul {
float: center;
list-style: none;
margin: 0;
padding: 0;
}
#translate li {
list-style: none;
margin: 0;
padding: 0;
}
#translate li p, #translate li p:visited {
color: #333;
display: block;
text-transform: uppercase;
margin: 0;
padding: 9px 15px 8px;
background:#f0f0f0;
width:560px;
font: bold 13px tahoma, Times New Roman;
border-left:3px solid #000;
}
#translate li li p,#translate li li p:visited {
background:#000;
color: #fff;
text-transform: lowercase;
float: left;
margin: 5px 0 0 0;
padding: 7px 10px;
border: 1px solid #f0f0f0;
-moz-border-radius: 10px;
font: normal 14px tahoma, Times New Roman;
}
#translate li ul {
z-index: 9999;
position: absolute;
height: auto;
left: -999em;
margin: 0;
padding: 0;
}
#translate li:hover ul ul,#translate li.sfhover ul ul, {
left: -999em;
}
#translate li:hover ul, #translate li li:hover ul, #translate li.sfhover ul,#translate li li.sfhover ul{
left: auto;
}
float: center;
list-style: none;
margin: 0;
padding: 0;
}
#translate li {
list-style: none;
margin: 0;
padding: 0;
}
#translate li p, #translate li p:visited {
color: #333;
display: block;
text-transform: uppercase;
margin: 0;
padding: 9px 15px 8px;
background:#f0f0f0;
width:560px;
font: bold 13px tahoma, Times New Roman;
border-left:3px solid #000;
}
#translate li li p,#translate li li p:visited {
background:#000;
color: #fff;
text-transform: lowercase;
float: left;
margin: 5px 0 0 0;
padding: 7px 10px;
border: 1px solid #f0f0f0;
-moz-border-radius: 10px;
font: normal 14px tahoma, Times New Roman;
}
#translate li ul {
z-index: 9999;
position: absolute;
height: auto;
left: -999em;
margin: 0;
padding: 0;
}
#translate li:hover ul ul,#translate li.sfhover ul ul, {
left: -999em;
}
#translate li:hover ul, #translate li li:hover ul, #translate li.sfhover ul,#translate li li.sfhover ul{
left: auto;
}
- Simpan.
- Pada kata-kata dalam postingan yang ingin anda translate gunakanlah format berikut :
- Pada kata-kata dalam postingan yang ingin anda translate gunakanlah format berikut :
<ul id="translate" style="width:550px;text-align:center;"><li><p> TULISAN YANG NAMPAK PADA POSTINGAN </p><ul><li><p> ARTI YANG AKAN KELUAR KETIKA MOUSE DIARAHKAN KETULISAN </p></li></ul></li></ul>
Selamat mencoba dan happy blogging.
* Metode ini support dengan semua browser kecuali Internet Explorer.
Wahhh... bagus ya...
assalamu'alaikum, semakin jelas teman..:)
aq test dulu gimana hasilnya aq bisa apa g yah, maksih
Wah Keren HAPIAH... Tx yaw
aryadevi@ waalaikum salam...
ALL@ selamat mencoba ya..
Subhanaallah...semoga kecemerlangan itu bisa menitis ke hambamu...
KEREN mas..kemarin memang g begitu jelas tapi yang ini mantabbb
cantiknya tampilan itu
mantap infonya sobat..............
yang ini lebih atraktif :) CSS memang fleksibel ya, saya baru tau bisa dibuat kayak gini juga.
thanks infonya mas!
mantebs sob...keren neh..artikelnya...
Translate yang bermanfaat sekali, jadi enak translatenya satu kesatuan!
Hadir di blog yang penuh ide dan islami ini, kutinggalkan jejak disini!
bagus mas
sekarang sudah pada lari ke css semua ya
lebih enteng soalnyaaa
Akan kucoba di Nuances Pen, trims telah berbagi tips yang bermanfaat bagi kehidupan dunia akhirat!
salam sobat
trims tutorialnya,,
bisa dicoba nich,,mas
tapi sekedar nambah ilmu saja ya,,
mantap tutornya,,, tu buatan mu sendiri sib?
makasih infonya
keren nuy dan patut untuk dicoba heheh
elfaridi@ iya sob.. silahkan dicoba semoga bermanfaat...
Aku akan gunakan sobat,dan terima kasih atas dukungannya...
wiw.
manteb banget nih postingan :D
Keren tuh translatenya. Thank's ya
wah bisa juga yah
makasih sob informasinya...
membantu banget...
Artikel yang bermanfaat.
Saya bisa jelaskan kenapa tidak jalan di IE. Memang atribut li:hover tidak didukung IE.
Rizki@ terima kasih banyak atas penjelasannya mas...
asalamualikum....wah sakit lagi y sobat?
semoga saja dalam keadaan sehat walafiat sob...
semakin hari semakin bermakna dan lebih sedap2 artikelnya
sukses slalu!
berkunjung ajah... :-)
Anas udah nyoba dan emang jalan menggunakann Mozilla Firefox, hasilnya pun menarik.. makasi mas..
salam kenal. mampir balik yach
OUHH BEGITUU MAKSUDNYA....OKE LAH KALO BEGITU BISA DI COBA NIH KALAU BEGINI KHAN JELAS
tHANKS YAHHH SOBB ATAS ILMU YG DI BERIKANNYA
mampir siang sahabat
artikel yang bermanfaat kawan,jadi lebih tahu banyak soal CSS..
wah,tambah banah lagi buat otak-atik blogspot...
terimakasih sahabat,sudah berbagi info yang menarik ini..
Hebat.. hebat... ilmu dari sini benar-2 top deh..!
Apa juga berlaku utk bahasa inggris ?
Tapi membuatnya harus lewat edit HTML ya..?
the others@ berlaku semua bahasa sobat. n iya pengeditannya melalui "edit HTML".
weleh, ternyata ini tutornya tohh...wekekekekekke
assalamualaikum
keren sobat...
sangat membantu dalam pemahaman sebuah ulasan dengan bahasa yang berbeda-beda tentunya...
bagus juga tutorialnya. menurut saya tutorial ini cocok juga untuk mendeskripsikan ketika kita mempromosikan refferal. karena pembaca bisa langsung saja melihat penjelsan tentang refferal itu.
Salam kenal !
dengan cara begini saya bisa menjelaskan pengertian secara langsung pada suatu kata . maksih sebelumnya, telah membuat tutorial sebagus ini.
Makasih HAPIA atas infonya, mantap tuk dicoba..*_*
good!