Kembali HAPIA Mesir masih ingin berbagi tentang tutorial blog. dan sekarang HAPIA Mesir membuat widget Jam Digital dengan menggunakan JQuery untuk lebih mempercantik tampilan jam digital.
Banyak yang beranggapan dengan menanamkan JQuery diblog akan memperlambat loading blog tersebut. sebenarnya JQuery adalah script seperti script-script yang lain, jika blog anda menggunakan script terlalu banyak maka akan membuat loading blog lebih lama. tapi dengan menggunakan secukupnya maka itu tidak mengapa untuk mendukung tampilan agar lebih baik.
Berikut adalah contoh Jam Digital menggunakan JQuery :
Berikut adalah cara membuat jam digital dengan JQuery :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
- Selanjutnya cari code <head> dan letakkan script berikut dibawahnya :
<script src='http://hapiajavascript.googlecode.com/files/jquery.tzineClock.js' type='text/javascript'/>
<script src='http://hapiajavascript.googlecode.com/files/timescript.js' type='text/javascript'/>
<script src='http://hapiajavascript.googlecode.com/files/timescript.js' type='text/javascript'/>
- Selanjutnya untuk bagian CSS, silahkan cari code ]]></b:skin> dan letakkan code CSS berikut diatasnya :
#fancyClock{
margin:30px auto;
height:100px;
border:1px solid #111111;
width:300px;
}
.clock{
/* The .clock div. Created dynamically by jQuery */
background-color:#252525;
height:100px;
width:100px;
position:relative;
overflow:hidden;
float:left;
}
.clock .rotate{
/* There are two .rotate divs - one for each half of the background */
position:absolute;
width:100px;
height:100px;
top:0;
left:0;
}
.rotate.right{
display:none;
z-index:11;
}
.clock .bg, .clock .front{
width:50px;
height:100px;
background-color:#252525;
position:absolute;
top:0;
}
.clock .display{
/* Holds the number of seconds, minutes or hours respectfully */
position:absolute;
width:100px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
z-index:20;
color:#F5F5F5;
font-size:30px;
text-align:center;
top:40px;
left:0;
/* CSS3 text shadow: */
text-shadow:4px 4px 5px #333333;
}
/* The left part of the background: */
.clock .bg.left{ left:0; }
/* Individual styles for each color: */
.orange .bg.left{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiPtAAXPnueoFbyDWD1ssdDoht1dxrGjaIubqi2x4yRg0Nk6vlG4dsiajUogrLSQTzWkxOW05MmI-WdCZqbr0-KITb-dh1izxOm8kQfn-iiAt78Bs2b93oq3yS9rilDV5Rh0SF7kBSxI/s320/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidG2CuWbqx-U6i9OzeQTkZ2OHrl4A5pxrE68nmb_w7oaSqdp9UR3JxV2u-ABKWKEaSa0HLxiF3NoSZr_0am7OBxkiJZWAZq6U512OZIBdMoFOzmGkKe9vde1eVR6V0UGHheZb-L8ik_LM/s320/bg_green.png) no-repeat left top; }
.blue .bg.left{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Ud17RrYEX1RS6_fQvcdKXuBLxaEQ4uiVCYvKu1RL74SV7aaDfiLiVuSaPEp1fKsAmAWAEU6sBH8v7d69ox0FzPmeDDJxde_LmpNUnflWvnn99PvWafnzuryeDZ8HimuPjh62fT09qvc/s320/bg_blue.png) no-repeat left top; }
/* The right part of the background: */
.clock .bg.right{ left:50px; }
.orange .bg.right{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiPtAAXPnueoFbyDWD1ssdDoht1dxrGjaIubqi2x4yRg0Nk6vlG4dsiajUogrLSQTzWkxOW05MmI-WdCZqbr0-KITb-dh1izxOm8kQfn-iiAt78Bs2b93oq3yS9rilDV5Rh0SF7kBSxI/s320/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidG2CuWbqx-U6i9OzeQTkZ2OHrl4A5pxrE68nmb_w7oaSqdp9UR3JxV2u-ABKWKEaSa0HLxiF3NoSZr_0am7OBxkiJZWAZq6U512OZIBdMoFOzmGkKe9vde1eVR6V0UGHheZb-L8ik_LM/s320/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Ud17RrYEX1RS6_fQvcdKXuBLxaEQ4uiVCYvKu1RL74SV7aaDfiLiVuSaPEp1fKsAmAWAEU6sBH8v7d69ox0FzPmeDDJxde_LmpNUnflWvnn99PvWafnzuryeDZ8HimuPjh62fT09qvc/s320/bg_blue.png) no-repeat right top; }
.clock .front.left{
left:0;
z-index:10;
}
margin:30px auto;
height:100px;
border:1px solid #111111;
width:300px;
}
.clock{
/* The .clock div. Created dynamically by jQuery */
background-color:#252525;
height:100px;
width:100px;
position:relative;
overflow:hidden;
float:left;
}
.clock .rotate{
/* There are two .rotate divs - one for each half of the background */
position:absolute;
width:100px;
height:100px;
top:0;
left:0;
}
.rotate.right{
display:none;
z-index:11;
}
.clock .bg, .clock .front{
width:50px;
height:100px;
background-color:#252525;
position:absolute;
top:0;
}
.clock .display{
/* Holds the number of seconds, minutes or hours respectfully */
position:absolute;
width:100px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
z-index:20;
color:#F5F5F5;
font-size:30px;
text-align:center;
top:40px;
left:0;
/* CSS3 text shadow: */
text-shadow:4px 4px 5px #333333;
}
/* The left part of the background: */
.clock .bg.left{ left:0; }
/* Individual styles for each color: */
.orange .bg.left{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiPtAAXPnueoFbyDWD1ssdDoht1dxrGjaIubqi2x4yRg0Nk6vlG4dsiajUogrLSQTzWkxOW05MmI-WdCZqbr0-KITb-dh1izxOm8kQfn-iiAt78Bs2b93oq3yS9rilDV5Rh0SF7kBSxI/s320/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidG2CuWbqx-U6i9OzeQTkZ2OHrl4A5pxrE68nmb_w7oaSqdp9UR3JxV2u-ABKWKEaSa0HLxiF3NoSZr_0am7OBxkiJZWAZq6U512OZIBdMoFOzmGkKe9vde1eVR6V0UGHheZb-L8ik_LM/s320/bg_green.png) no-repeat left top; }
.blue .bg.left{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Ud17RrYEX1RS6_fQvcdKXuBLxaEQ4uiVCYvKu1RL74SV7aaDfiLiVuSaPEp1fKsAmAWAEU6sBH8v7d69ox0FzPmeDDJxde_LmpNUnflWvnn99PvWafnzuryeDZ8HimuPjh62fT09qvc/s320/bg_blue.png) no-repeat left top; }
/* The right part of the background: */
.clock .bg.right{ left:50px; }
.orange .bg.right{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiPtAAXPnueoFbyDWD1ssdDoht1dxrGjaIubqi2x4yRg0Nk6vlG4dsiajUogrLSQTzWkxOW05MmI-WdCZqbr0-KITb-dh1izxOm8kQfn-iiAt78Bs2b93oq3yS9rilDV5Rh0SF7kBSxI/s320/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidG2CuWbqx-U6i9OzeQTkZ2OHrl4A5pxrE68nmb_w7oaSqdp9UR3JxV2u-ABKWKEaSa0HLxiF3NoSZr_0am7OBxkiJZWAZq6U512OZIBdMoFOzmGkKe9vde1eVR6V0UGHheZb-L8ik_LM/s320/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Ud17RrYEX1RS6_fQvcdKXuBLxaEQ4uiVCYvKu1RL74SV7aaDfiLiVuSaPEp1fKsAmAWAEU6sBH8v7d69ox0FzPmeDDJxde_LmpNUnflWvnn99PvWafnzuryeDZ8HimuPjh62fT09qvc/s320/bg_blue.png) no-repeat right top; }
.clock .front.left{
left:0;
z-index:10;
}
- Simpan Template.
Langkah selanjutnya adalah menambah Gadget pada sidebar.
- Pergi ke "Elemen Laman".
- Klik "Tambah Gadget" pada sidebar, pilih "HTML/JavaScript".
- Letakkan code berikut didalamnya :
Langkah selanjutnya adalah menambah Gadget pada sidebar.
- Pergi ke "Elemen Laman".
- Klik "Tambah Gadget" pada sidebar, pilih "HTML/JavaScript".
- Letakkan code berikut didalamnya :
<div id="fancyClock"></div>
- Simpan.
# Widget Jam Digital ini telah HAPIA Mesir atur untuk dipasang di sidebar dengan ukuran lebar 300 pixel. untuk ukuran yang lain, silahkan atur pada bagian code CSS widget ini. jika anda ingin melihat tutorial aslinya silahkan cek di A Colorful Clock With CSS & jQuery.
Selamat mencoba dan happy blogging.
# Widget Jam Digital ini telah HAPIA Mesir atur untuk dipasang di sidebar dengan ukuran lebar 300 pixel. untuk ukuran yang lain, silahkan atur pada bagian code CSS widget ini. jika anda ingin melihat tutorial aslinya silahkan cek di A Colorful Clock With CSS & jQuery.
Selamat mencoba dan happy blogging.
ijinkan mengamankan pertamax. semakin mantap aja tutorialnya sobat
Ternyata masih banyak sekali ilmu yg aku tak tahu nih ttg otak-atik blog.
Makasih bgt infonya..
Kemarin aku barusan bersih2 blog, dan beberapa widget barusan aku hilangkan.
Soalnya blogku loadingnya agak berat gitu sih.
tambah lagi nih acecoris blog
Wahhh... keren ya sob...
Aku simpan dulu ya... kapan2 aku coba...
selalu ada yang baru disini ...
wah..kelihatannya keren nih..saya simpan dulu ya sob..
sip.. ijin di save tutornya ya...
ok kawan, memang begitu ya, seperlunya aja.
ok sobat keren dan unik widgetnya....
hehehe...nih jam bikin berat nih...hauhauhauha
keren euy...sip sip sip
Beben@ wkwkwkwkwk...asalkan masangnya jangan disemua tempat...atau seblog penuh dengan jam2....
waah yang dicari cari tuh ternyata ada disini oke sob ijin copas dulu nanti saya praktekan
bagus jam nya sob..
sekedar balasan dari komentar mu di blogku...
kan sudah di jelaskan di akhir postingan bahwa apabila sobat memakai script membuat readmore baik itu secara otomatis maupun tidak maka fitur insert jump break ini tidak akan berfungsi.. jadi terlebih dahulu harus di hapus script readmore tersebut.
Terima Kasih Atas Kunjugnannya.
nice sharing.... gud information~ i like
Wih kerennn... Memang Bagus bner kalo pake Jquery...
jquery oh jquery..
nice share.. q bookmark dulu y..
happy blogging..
wih mantab.... lagi seneng dengan jquery ya?
Yupz emang benar2 ringan nih widget.Thax sob utk infonya
Gratis link ke 2 bh PR 4 , Mau ?
salam kenal
hebat sobat, ijin copy kodenya nanti kapan2 dipraktekin ya mas
oya silahkan ambil penghargaannya di blog saya buat mas, trimakasih mas..
wah jQuery ndak hanya support di blogger aja kan mas.. namun support juga di plafont lain juga kan..
LHOOO,,,,,,,,,,,
bisa thooo
hihi blogpot makin mantap aja.... gak mau kalah dengan wordpret dengan plug pluginnya
sipz kak hapiaa
makasih yah
wow keren, tak coba dulu, masih bingun mau aq tempatkan di sebelah mana gt, terima kasih master, ada post baru d blog aq
Kereeen ... , Kepingin Si Nyoba tapi takut Makan Beban loading'a .. :D
Nice Info aja deh :D
alooo soooob?