SAKJANESIP Posts filed under HTML
Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Minggu, 11 Desember 2016

Cara Membuat Breaking News Ticker dengan Mudah di Blogger

2 Comments
Cara Membuat Breaking News Ticker dengan Mudah di Blogger - Kejadian kemarin membuat warga sangat senang dan bahagia, dikarenakan tumbuhnya kampung blogger dan muda-mudi pecinta blogger. Hehe, ini mah text berita yiyiyi. Kini telah hadir di blogger juga fitur untuk menampilkan sebuah berita, bukan fitur sih tapi buatan sebut aja fitur.

Cara Membuat Breaking News Ticker dengan Mudah di Blogger

Widget ini bisa sobat tampilkan link, artikel news sobat dan berita dari blog lain, ya tinggal sobat ganti aja URL tujuan feed beritanya. Tentunya sobat gak usah khawatir untuk masalah load, soalnya ini ringan dan halus efeknya jadinya ya bagus banget, hehe.

Cara Membuat Breaking News Ticker dengan Mudah di Blogger


Langkah pertama, sobat masuk ke akun blogger, pilih template, Edit HTML, lanjut copas kode di bawah ini dan letakan tepat di atas </style>


Sesuaikan warna dan lainnya sesuai keinginan sobat.
Langkah kedua, salin kode di bawah ini dan taruh sebelum kode </body>



Terakhir tambahkan SC kode di bawah ini terserah sobat, dimana aja yang penting masih di kandungan Ibu, hehe. Di antara pembuka <body> dan penutup </body>


Ganti URL "https://sakjanesip.blogspot.com/" dengan URL blog sobat.

Simpan dan cek hasilnya.


Akhirnya selesai juga tutorial Cara Membuat Breaking News Ticker dengan Mudah di Blogger. Semoga bermanfaat ya sobat.

Sabtu, 10 Desember 2016

Cara Agar Semua Link Terbuka di New Tab

Comment
Cara Agar Semua Link Terbuka di New Tab - Sebuah blog pasti memiliki link baik itu in atau out, link yang terdapat di konten sangatlah penting. Karena disaat pembaca melihat sebuah link di halaman reverral dan ia menegekliknya maka akan terbuka di halaman itu juga. Tapi jika di tab baru akan bagus blognya, selain menguntungkan kita juga membuat pembaca senang.


Di postingan ini terdapat 2 style jadi silahkan sobat mau gunakan yang mana, fungsinya sama hanya berbeda cara.

Cara Agar Semua Link Terbuka di New Tab


Cara I

Masuk ke akun blogger sobat, buat widget baru "Tata Letak" lalu copy kode di bawah ini dan simpan.


Ganti URL di atas "https://sakjanesip.blogspot.com/" dengan URL sobat.
Cara II 


Cara lama ini dengan menambahkan markup ke template langsung, copy kode di bawah lalu taruh tepat di atas </head>



Simpan editor lalu cek hasilnya.

Sekian tutorial Cara Agar Semua Link Terbuka di New Tab, Semoga Bermanfaat.

Cara Membuat Daftar Isi Berdasarkan Label di Blog

2 Comments
Cara Membuat Daftar Isi Berdasarkan Label di Blog - Melihat daftar isi blog-blog lain pasti kita akan ingin, bagaimana ya membuatnya? Tenang. SAKJANESIP akan memberitahukan kepada sobat cara membuat daftar isi berdasarkan di blog. Ya, meskipun ini sangat sederhana tapi cocoklah buat blog, karena ringan, simpel, dan tidak membuat blog load lama, mantap kan? Pasti.


Kenapa saya membuat judul "berdasarkan label" ? Ya, karena widget ini mengambil datanya menurut label jadi semua artikel sobat, yang berlabel bakalan tampil di daftar isi ini. Udah gak sabar ya mau buatnya, baiklah yuk cuss.

Cara Membuat Daftar Isi Berdasarkan Label di Blog


Masuk ke akun blog sobat → Pilih menu laman→ buat sebuah postingan baru di halaman itu, dengan cara pilih tab "HTML" lalu masukan kode di bawah ini di dalamnya, selesai publikasikan dan lihat postingannya.



Gimana sobat, gampang kan? asal kita mau belajar apapun bisa. meskipun hasil tidak akan sama yang penting bisa.

Demikian saja ya tutorial Cara Membuat Daftar Isi Berdasarkan Label di Blog, Semoga bermanfaat.

Cara Membuat Reading Time di Blog

Comment
Cara Membuat Reading Time di Blog - Hari ini mendung (saat mosting), enaknya baca artikel, iya kan? sobat. Hemm, pernah denger gak? di blog ada detail lama waktu atau perkiraan lama waktu untuk membaca artikel. Kalau belum tau kali ini SAKJANESIP akan membeberkan rahasianya, cara membuat reading time di blog.

Cara Membuat Reading Time di Blog

Widget ini di publikasi sekaligus pembuatnya oleh Michael Lynch, dari namanya saja sudah bukan orang ID ya, hehe. Tentunya widget spesial ini menggunakan Font Awesome ya, jadi kalo di blog sobat belum ada silahkan tambahkan kode di bawah sub heading ini.

Cara Membuat Reading Time di Blog





Langkah pertama, sobat masuk ke akun blog sobat → Masuk ke Editor Template → Lalu salin kode di bawah ini dan letakan tepat di atas </style>

Langkah kedua, sobat tambahkan kode di bawah ini tepat di atas </body>

Langkah ketiga, salin kode di bawah ini dan letakan di mana saja, freedom asal masih di dalam markup "body". Simpan template dan cek hasilnya.



Demikian Cara Membuat Reading Time di Blog, Jika menurut Anda ini bermanfaat silahkan share, terimakasih.

Cara Membuat Breadcrumbs SEO dengan Mudah

Comment
Cara Membuat Breadcrumbs SEO dengan Mudah - Hai gengs! Apa kabar nih.. Lama tak jumpa hehe. Langsung saja ya, breadcrumbs ini adalah sebuah navigasi yang kiranya kita lihat disebuah blog/web berada di atas judul postingan. Fungsinya apa? buat mendukung artikel menuju SEO.
Cara Membuat Breadcrumbs SEO dengan Mudah
Ilustrasi | SAKJANESIP


Cara Membuat Breadcrumbs SEO dengan Mudah


 1. Masuk ke akun blogger sobat → Template → Edit HTML→ Salin SC kode CSS di bawah ini tepat di atas </style>


 2. Cari kode HTML sama persis POST  di bawah ini


 3. Lanjut, tambahkan kode di bawah ini tepat di bawah kode yang di atas


 4. Simpan kalau sudah, dan cek hasilnya. Lalu untuk mengetahui breadcrumbs terpasang dengan benar atau tidak, sobat bisa KLIK DISINI.

Mungkin cukup sekian tutorial Cara Membuat Breadcrumbs SEO dengan Mudah, Semoga Bermanfaat.

Cara Membuat Scroll Bar di Isi Post Blog

Comment
SAKJANESIP - Jumpa lagi nih gengs! Sehat wal afiat kan? Alhamdulillah. Hemm, tau gak sih? saat kita browsing cari-cari SC (Script) pas nemu di salah satu blog/web seseorang senang kan, ya? tapi pas lihat SC itu panjang jadi males. Sampek-sampek jari nye-croll aja kebawah, hhh.
Cara Membuat Scroll Bar di Isi Post Blog
Ilutrasi | SAKJANESIP
Tenang! Karena kali ini saya akan membuka rahasia cara membuat scroll bar di isi postingan blog. Gampang banget kok, sobat. SC nya juga sedikit tinggal nambahin aja di atas konten kita. Yakin deh, gak bakalan nyesel atau garing, hihi. Yuk dah simak kebawah.

Cara Membuat Scroll Bar di Isi Post Blog


 Langkah pertama, saat sobat mau membuat postingan salin dulu kode di bawah ini dan taruh pada tab html, lalu isi kontennya.


<div style="padding:2.5em;overflow:auto;width:auto;height:300px;border:1px solid green" >

Isi Konten kamu sobat!

</div>

Contohnya bisa di lihat di bawah ini sobat.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.


Demikian saja ya, Cara Membuat Scroll Bar di Isi Post Blog, Semoga bermanfaat.

Langkah Mudah Membuat Tombol DOWNLOAD FLAT UI

2 Comments
SAKJANESIP - Halo sahabat ✋ apa kabar nih? baik-baik saja kan? Alhamdulillah. Hemm, bagaimana sih cara buat tombol FLAT UI seperti di blog-blog lain yang keren itu? Gampang kok sobat, kali ini saya akan beri tahu rahasianya.
Langkah Mudah Membuat Tombol DEMO dan DOWNLOAD FLAT UI
Ilustrasi | sakjanesip


Di atas adalah tampilan tombol FLAT UI buatan saya, cukup simpel dan keren kan? Baiklah silahkan sobat sikat dah ke blognya.

Langkah Mudah Membuat Tombol DOWNLOAD FLAT UI


 Style tombol ini menggunakan Font Awesome, jika di blog sobat belum ada silahkan tambahkan style CSS di bawah ini di atas </head>


Buat langkah - langkah sobat sudah mengertikan? Tinggal salin aja SC kode di bawah ini diatas </style>



Simpan, lalu untuk SC kode pemanggil di postingan silahkan simpan dan gunakan kode di bawah ini



<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

<div style="text-align: center;">

  <ul class="button2">

    <li><a class="demo" href="https://sakjanesip.blogspot.com" target="_blank">Demo</a></li>

    <li><a class="download" href="https://sakjanesip.blogspot.com" target="_blank">Download</a></li>

  </ul>

</div>

<div class="clear"></div>
Ganti kode yang saya tandai di atas dengan URL blog sobat
Mungkin cukup sekian Langkah Mudah Membuat Tombol DEMO dan DOWNLOAD FLAT UI, Jika ada masalah error silahkan sampaikan di komentar.

Jumat, 09 Desember 2016

Cara Memasang Jam Analog dengan CSS Pure di Blog

Comment
SAKJANESIP - Hokya - hokya ! Salam gengs!! Di tutorial kali ini saya akan membuka rahasia gimana sih cara membuat jam analog dengan css pure di  blog? Mudah, gampang, dan sulit bagi yang belum bisa.
Cara Membuat Jam Analog dengan CSS Pure di Blog
Contoh Jam
Jam dinding yang ada di blog akan memperindah tampilah blog. Dengan catatan tidak menggunakan flash, kenapa? karena flash akan memperlambat loading blog saat memuat halaman yang akan di buka. Kelebihan Jam Analog ini adalah terbuat dari CSS3 alias jika di taruh di blog akan aman-aman saja.

Cara Memasang Jam Analog dengan CSS Pure di Blog


Langkah pertama salin kode di bawah ini di EDIT HTML, Kreatifitaskan untuk masalah peletakan. Di taruh di widget juga bisa.


<center><h3> Created by Zhuberzhu </h3></center>

<div id="zhuberzhu">

  <div class="frame-face"></div>

  <ul class="menit-tanda">

    <li></li><li></li><li></li><li></li><li></li><li></li>

    <li></li><li></li><li></li><li></li><li></li><li></li>

    <li></li><li></li><li></li><li></li><li></li><li></li>

    <li></li><li></li><li></li><li></li><li></li><li></li>

    <li></li><li></li><li></li><li></li><li></li><li></li>

    <li></li><li></li><li></li><li></li><li></li><li></li>

    <li></li><li></li><li></li><li></li><li></li><li></li>

    <li></li><li></li><li></li><li></li><li></li><li></li>

  </ul>

  <div class="digital-wrap">

    <ul class="digit-hours">

      <li>23</li>

      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>

      <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>

      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>

      <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li>

    </ul>

    <ul class="digit-minutes">

      <li>10</li><li>11</li>

      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>

      <li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li>

      <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>

      <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>

      <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>

      <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>

      <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>

      <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>

      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>

      <li>06</li><li>07</li><li>08</li><li>09</li>

    </ul>

    <ul class="digit-seconds">

      <li>20</li><li>21</li><li>22</li><li>23</li>

      <li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>

      <li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>

      <li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>

      <li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>

      <li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>

      <li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>

      <li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>

      <li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>

      <li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>

      <li>18</li><li>19</li>

    </ul>

  </div>

  <ul class="digit">

    <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>

    <li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>

  </ul>

  <div class="hours-hand"></div>

  <div class="minutes-hand"></div>

  <div class="seconds-hand"></div>

</div>

Langkah Kedua, copas kode di bawah ini taruh di CSS blog kamu. save dan cek hasilnya.



/***



Ini adalah sebuah jam murni-CSS3. Menggunakan CSS animasi dan bentuk, tanpa gambar atau JavaScript.



***/

body { font-size:62.5%; margin:1em; background:#232425 }

ul { list-style:none; margin:0; padding:0 }

#zhuberzhu { font-size:1em; position:relative }

#zhuberzhu .frame-face {

  position:relative;

  width:30em;

  height:30em;

  margin:2em auto;

  border-radius:15em;

  background:-webkit-linear-gradient(top, #f9f9f9,#666);

  background:-moz-linear-gradient(top, #f9f9f9,#666);

  background:linear-gradient(to bottom, #f9f9f9,#666);

  box-shadow:rgba(0,0,0,.8) .5em .5em 4em;

}

#zhuberzhu .frame-face:before {

  content:'';

  width:29.4em;

  height:29.4em;

  border-radius:14.7em;

  position:absolute;

  top:.3em; left:.3em;

  background:

    -webkit-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),

    -webkit-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);

  background:

    -moz-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),

    -moz-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);

  background:

    linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),

    radial-gradient(ellipse at center, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);

}

#zhuberzhu .frame-face:after {

  content:'';

  width:28em;

  height:28em;

  border-radius:14.2em;

  position:absolute;

  top:.9em; left:.9em;

  box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;

  border:.1em solid rgba(0,0,0,.2);

  background:-webkit-linear-gradient(top, #fff, #ccc);

  background:-moz-linear-gradient(top, #fff, #ccc);

  background:linear-gradient(to bottom, #fff, #ccc);

}

#zhuberzhu .menit-tanda li {

  display:block;

  width:.2em;

  height:.6em;

  background:#929394;

  position:absolute;

  top:50%; left:50%;

  margin:-.4em 0 0 -.1em;

}

#zhuberzhu .menit-tanda li:first-child {transform:rotate(6deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}

#zhuberzhu .menit-tanda li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}

#zhuberzhu .digit {

  width:30em;

  height:30em;

  border-radius:15em;

  position:absolute;

  top:0; left:50%;

  margin-left:-15em;

}

#zhuberzhu .digit li {

  font-size:1.6em;

  display:block;

  width:1.6em;

  height:1.6em;

  position:absolute;

  top:50%; left:50%;

  line-height:1.6em;

  text-align:center;

  margin:-.8em 0 0 -.8em;

  font-weight:bold;

}

#zhuberzhu .digit li:nth-child(1) { transform:translate(3.9em, -6.9em) }

#zhuberzhu .digit li:nth-child(2) { transform:translate(6.9em, -4em) }

#zhuberzhu .digit li:nth-child(3) { transform:translate(8em, 0) }

#zhuberzhu .digit li:nth-child(4) { transform:translate(6.8em, 4em) }

#zhuberzhu .digit li:nth-child(5) { transform:translate(3.9em, 6.9em) }

#zhuberzhu .digit li:nth-child(6) { transform:translate(0, 8em) }

#zhuberzhu .digit li:nth-child(7) { transform:translate(-3.9em, 6.9em) }

#zhuberzhu .digit li:nth-child(8) { transform:translate(-6.8em, 4em) }

#zhuberzhu .digit li:nth-child(9) { transform:translate(-8em, 0) }

#zhuberzhu .digit li:nth-child(10) { transform:translate(-6.9em, -4em) }

#zhuberzhu .digit li:nth-child(11) { transform:translate(-3.9em, -6.9em) }

#zhuberzhu .digit li:nth-child(12) { transform:translate(0, -8em) }

#zhuberzhu .digit:before {

  content:'';

  width:1.6em;

  height:1.6em;

  border-radius:.8em;

  position:absolute;

  top:50%; left:50%;

  margin:-.8em 0 0 -.8em;

  background:#121314;

}

#zhuberzhu .digit:after {

  content:'';

  width:4em;

  height:4em;

  border-radius:2.2em;

  position:absolute;

  top:50%; left:50%;

  margin:-2.1em 0 0 -2.1em;

  border:.1em solid #c6c6c6;

  background:-webkit-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);

  background:-moz-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);

  background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);

}

@keyframes hours { to {transform:rotate(335deg)} }

#zhuberzhu .hours-hand {

  width:.8em;

  height:7em;

  border-radius:0 0 .9em .9em;

  background:#232425;

  position:absolute;

  bottom:50%; left:50%;

  margin:0 0 -.8em -.4em;

  box-shadow:#232425 0 0 2px;

  transform-origin:0.4em 6.2em;

  transform:rotate(-25deg);

  animation:hours 43200s linear 0s infinite;

}

#zhuberzhu .hours-hand:before {

  content:'';

  background:inherit;

  width:1.8em;

  height:.8em;

  border-radius:0 0 .8em .8em;

  box-shadow:#232425 0 0 1px;

  position:absolute;

  top:-.7em; left:-.5em;

}

#zhuberzhu .hours-hand:after {

  content:'';

  width:0; height:0;

  border:.9em solid #232425;

  border-width:0 .9em 2.4em .9em;

  border-left-color:transparent;

  border-right-color:transparent;

  position:absolute;

  top:-3.1em; left:-.5em;

}

@keyframes menits { to {transform:rotate(422deg)} }

#zhuberzhu .menits-hand {

  width:.8em;

  height:12.5em;

  border-radius:.5em;

  background:#343536;

  position:absolute;

  bottom:50%; left:50%;

  margin:0 0 -1.5em -.4em;

  box-shadow:#343536 0 0 2px;

  transform-origin:0.4em 11em;

  transform:rotate(62deg);

  animation:menits 3600s linear 0s infinite;

}

@keyframes seconds { to {transform:rotate(480deg)} }

#zhuberzhu .seconds-hand {

  width:.2em;

  height:14em;

  border-radius:.1em .1em 0 0/10em 10em 0 0;

  background:#c00;

  position:absolute;

  bottom:50%; left:50%;

  margin:0 0 -2em -.1em;

  box-shadow:rgba(0,0,0,.8) 0 0 .2em;

  transform-origin:0.1em 12em;

  transform:rotate(120deg);

  animation:seconds 60s steps(60, end) 0s infinite;

}

/*jangan pernah hapus credit ini by Ilham Ali Z */

#zhuberzhu .seconds-hand:after {

  content:'';

  width:1.4em;

  height:1.4em;

  border-radius:.7em;

  background:inherit;

  position:absolute;

  left:-.65em; bottom:1.35em;

}

#zhuberzhu .seconds-hand:before {

  content:'';

  width:.8em;

  height:3em;

  border-radius:.2em .2em .4em .4em/.2em .2em 2em 2em;

  box-shadow:rgba(0,0,0,.8) 0 0 .2em;

  background:inherit;

  position:absolute;

  left:-.35em; bottom:-3em;

}

#zhuberzhu .digital-wrap {

  width:9em;

  height:3em;

  border:.1em solid #222;

  border-radius:.2em;

  position:absolute;

  top:50%; left:50%;

  margin:3em 0 0 -4.5em;

  overflow:hidden;

  background:#4c4c4c;

  background:-webkit-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);

  background:-moz-linear-gradient(top, #4c4c4c 0%, #0f0f0f 100%);

  background:-ms-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);

  background:-o-linear-gradient(top, #4c4c4c 0%,#0f0f0f 100%);

  background:linear-gradient(to bottom, #4c4c4c 0%,#0f0f0f 100%);

}

#zhuberzhu .digital-wrap ul {

  float:left;

  width:2.85em;

  height:3em;

  border-right:.1em solid #000;

  color:#ddd;

  font-family:Consolas, monaco, monospace;

}

#zhuberzhu .digital-wrap ul:last-child { border:none }

#zhuberzhu .digital-wrap li {

  font-size:1.5em;

  line-height:2;

  letter-spacing:2px;

  text-align:center;

  position:relative;

  left:1px;

}

#zhuberzhu .digit-menits li {

  animation:dsm 3600s steps(60, end) 0s infinite;

}

#zhuberzhu .digit-seconds li {

  animation:dsm 60s steps(60, end) 0s infinite;

}

@keyframes dsm {

  to { transform:translateY(-120em) }

}


Demikian Tutorial Cara Memasang Jam Analog dengan CSS Pure di Blog, Semoga bermanfaat.
Langganan: Postingan (Atom)