SAKJANESIP Posts filed under CSS
Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. 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 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.

Rabu, 07 Desember 2016

CSS Anti Copy Paste Kecuali di Bagian Tertentu

Comment
SAKJANESIP - Jumpa lagi gengs ! Cerita dulu nih ya, saat itu ketika saya masih di bangku SMK kan ada UKK tuh ya, buat program kredit motor 3 bulan full buat sampek flu, demam dan gak karuan pokoknya hanya demi satu website itu gengs. Selesai error sudah fix ada temen bro liat website mu dong.. ane bolehin pas adi tinggal ke kamar mandi udah ada Flashdisk yang nancap, ue kirain sih ngopy film atau apalah eh gak taunya ! website gue di embat dasar tukang copas 😁.

CSS Anti Copy Paste Kecuali di Bagian Tertentu
Ilustrasi | RAISA SAKJANESIP

 Siapa yang kecewa coba? ya saya hehe, tapi tenang karena di topik kali ini saya akan membuka rahasia agar blog nya tidak bisa di copas yaitu dengan memasang CSS anti copy paste kecuali di bagian tertentu. Maksudnya di bagian tertentu adalah sobat bisa kasih atau kecualikan post untuk bisa di copy dan yang lain tidak. Baiklah kita langsung saja ke action ya.

CSS Anti Copy Paste Kecuali di Bagian Tertentu


 Masuk ke blog sobat ⇏ Template ⇏ EDIT HTML ⇏ Salin kode di bawah taruh di atas ]]></b:skin>  atau </style>


/* Kode tidak bisa di copy */

.post-outer {

-webkit-touch-callout:none;

-khtml-user-select:none;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

}

Simpan dan cek hasilnya, mudah bukan ? kalau blog tidak bisa di copy data yang di post serasa kurang bagus lho ya sobat, tapi tenang silahkan salin kode di bawah ini dan letakan seperti cara di atas.


/*Kode Bagian tertentu Bisa Di Copy Paste*/

.post blockquote,.post pre,.post code{

  -webkit-touch-callout:text;

  -khtml-user-select:text;

  -webkit-user-select:text;

  -moz-user-select:text;

  -ms-user-select:text;

}

Fungsi dari CSS di atas sobat bisa menambahkan tag mana yang bisa di copas jadi artikel akan tetap normal khusus yang menuju ke tips & trik iya kan ? Contoh penambahan tag silahkan liat di bawah ini :


/* Kode Bagian tertentu Bisa Di Copy */

.post_body p, .post blockquote,.post pre,.post code{

  -webkit-touch-callout:text;

  -khtml-user-select:text;

  -webkit-user-select:text;

  -moz-user-select:text;

  -ms-user-select:text;

}

Cukup Tambahkan saja lokasi mana yang sobat boleh di copas.
Demikian saja ya tutorial pasang CSS Anti Copy Paste Kecuali di Bagian Tertentu, Jika ini bermanfaat silahkan share terimakasih.

Membuat Heading dengan Line Flat UI di Blog

Comment
SAKJANESIP - Hallo gengs ! Buat postingan hari kedua saya yang akan di bahas adalah cara membuat heading dengan line FLAT UI, jika blog sobat nih di heading nya belum ada line nya seperti ada yang kurang gitu, hehe. Ya tergantung selera sih ya, iya kan ?
Membuat Heading dengan Line Flat UI di Blog
Ilustrasi | SAKJANESIP

 Langkah membuatnya cukup mudah, tingal garis aja pake pemes di blog jadi, hehe, memangnya kertas apa ya? Baiklah fungsi dari line ini hanya memperindah penampilan heading di blog, untuk warna dan lainya silahkan kreasikan dengan favorit sobat.

Membuat Heading dengan Line Flat UI di Blog


 Masuk ke blogger ⇏ Template ⇏ EDIT HTML ⇏ Tambahkan kode di bawah ini di atas </style>


/* CSS HEADING LINE by Zhuberzhu */

<style type='text/css'>

.post-body h3{font-size:140%;}.post-body h4{font-size:120%;}.post-body h5{font-size:100%;}.post-body h6{font-size:80%;}

.post-body h3, .post-body h4, .post-body h5, .post-body h6 {

    position: relative;

    margin: 0 0 10px;

    padding: 10px 0;

    border-bottom: 2px solid #e0e0e0;

    font-weight: 500;

    letter-spacing: 1px;

}

h4 {

    display: block;

    -webkit-margin-before: 1.33em;

    -webkit-margin-after: 1.33em;

    -webkit-margin-start: 0px;

    -webkit-margin-end: 0px;

    font-weight: bold;

}

.post-body h3:before, .post-body h4:before, .post-body h5:before, .post-body h6:before {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 0;

    right: 0;

    background: #fc4f69;

    width: 7%;

    height: 2px;

}

</style>

Jika sudah klik simpan dan lanjut ke POS buat sebuah postingan dengan tag H3,H4, dkk. Demo nya bisa cek di atas postingan ini yang ada garis merah.
Contoh Heading dengan Line CSS

 Cukup sekian tutorial cara Membuat Heading dengan Line Flat UI di Blog, Silahkan share jika ini bermanfaat. Maturnuwun ya sobat.
Langganan: Postingan (Atom)