Membuat Artikel Translate Dengan CSS

Diposkan oleh Hery Prasetyo Sunday, March 14, 2010
بسم الله الرحمن الرحيم

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.

Membuat Artikel Translate Dengan CSS
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> :

#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;
}

- Simpan.

- 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.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

43 Responses to Membuat Artikel Translate Dengan CSS

  1. Rock Says:
  2. Wahhh... bagus ya...

     
  3. aryadevi Says:
  4. assalamu'alaikum, semakin jelas teman..:)

     
  5. aq test dulu gimana hasilnya aq bisa apa g yah, maksih

     
  6. akhatam Says:
  7. Wah Keren HAPIAH... Tx yaw

     
  8. HAPIA Mesir Says:
  9. aryadevi@ waalaikum salam...
    ALL@ selamat mencoba ya..

     
  10. Subhanaallah...semoga kecemerlangan itu bisa menitis ke hambamu...

     
  11. kang tejo Says:
  12. KEREN mas..kemarin memang g begitu jelas tapi yang ini mantabbb

     
  13. munir ardi Says:
  14. cantiknya tampilan itu

     
  15. iswady Says:
  16. mantap infonya sobat..............

     
  17. Darin Says:
  18. yang ini lebih atraktif :) CSS memang fleksibel ya, saya baru tau bisa dibuat kayak gini juga.
    thanks infonya mas!

     
  19. tukang edit Says:
  20. mantebs sob...keren neh..artikelnya...

     
  21. nuansa pena Says:
  22. Translate yang bermanfaat sekali, jadi enak translatenya satu kesatuan!

     
  23. Hadir di blog yang penuh ide dan islami ini, kutinggalkan jejak disini!

     
  24. mas doyok Says:
  25. bagus mas
    sekarang sudah pada lari ke css semua ya
    lebih enteng soalnyaaa

     
  26. nuances pen Says:
  27. Akan kucoba di Nuances Pen, trims telah berbagi tips yang bermanfaat bagi kehidupan dunia akhirat!

     
  28. NURA Says:
  29. salam sobat
    trims tutorialnya,,
    bisa dicoba nich,,mas
    tapi sekedar nambah ilmu saja ya,,

     
  30. elfaridi Says:
  31. mantap tutornya,,, tu buatan mu sendiri sib?

     
  32. darahbiroe Says:
  33. makasih infonya
    keren nuy dan patut untuk dicoba heheh

     
  34. HAPIA Mesir Says:
  35. elfaridi@ iya sob.. silahkan dicoba semoga bermanfaat...

     
  36. Si adul Says:
  37. Aku akan gunakan sobat,dan terima kasih atas dukungannya...

     
  38. wiw.
    manteb banget nih postingan :D

     
  39. Parenting Says:
  40. Keren tuh translatenya. Thank's ya

     
  41. Jaka Utama Says:
  42. wah bisa juga yah

     
  43. Imoel Says:
  44. makasih sob informasinya...
    membantu banget...

     
  45. Rizki Says:
  46. Artikel yang bermanfaat.

    Saya bisa jelaskan kenapa tidak jalan di IE. Memang atribut li:hover tidak didukung IE.

     
  47. HAPIA Mesir Says:
  48. Rizki@ terima kasih banyak atas penjelasannya mas...

     
  49. Bunglon Blog Says:
  50. asalamualikum....wah sakit lagi y sobat?
    semoga saja dalam keadaan sehat walafiat sob...
    semakin hari semakin bermakna dan lebih sedap2 artikelnya
    sukses slalu!

     
  51. buwel Says:
  52. berkunjung ajah... :-)

     
  53. Anas Says:
  54. Anas udah nyoba dan emang jalan menggunakann Mozilla Firefox, hasilnya pun menarik.. makasi mas..

     
  55. allisa Says:
  56. salam kenal. mampir balik yach

     
  57. Ipin Says:
  58. OUHH BEGITUU MAKSUDNYA....OKE LAH KALO BEGITU BISA DI COBA NIH KALAU BEGINI KHAN JELAS
    tHANKS YAHHH SOBB ATAS ILMU YG DI BERIKANNYA

     
  59. Munir Ardi Says:
  60. mampir siang sahabat

     
  61. artikel yang bermanfaat kawan,jadi lebih tahu banyak soal CSS..

     
  62. wah,tambah banah lagi buat otak-atik blogspot...
    terimakasih sahabat,sudah berbagi info yang menarik ini..

     
  63. Hebat.. hebat... ilmu dari sini benar-2 top deh..!

     
  64. Apa juga berlaku utk bahasa inggris ?
    Tapi membuatnya harus lewat edit HTML ya..?

     
  65. HAPIA Mesir Says:
  66. the others@ berlaku semua bahasa sobat. n iya pengeditannya melalui "edit HTML".

     
  67. Beben Says:
  68. weleh, ternyata ini tutornya tohh...wekekekekekke

     
  69. riz Says:
  70. assalamualaikum
    keren sobat...
    sangat membantu dalam pemahaman sebuah ulasan dengan bahasa yang berbeda-beda tentunya...

     
  71. 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 !

     
  72. make smart Says:
  73. dengan cara begini saya bisa menjelaskan pengertian secara langsung pada suatu kata . maksih sebelumnya, telah membuat tutorial sebagus ini.

     
  74. Ibnu Radinas Says:
  75. Makasih HAPIA atas infonya, mantap tuk dicoba..*_*

     
  76. good!

     

Post a Comment