Hidayatimur.com: HTML

Hidayatimur.com

Metaltaila.co Adalah Blog Berbagi Template Premium


Dalam sebuah dunia blogger kita tidak asing lagi jika mendengar tentang widget atau tampilan,  terlebih lagi widget popular post.

Popular post widget menjadi daya tarik dalam sebuh blog karna dapat mempermudah pengunjung yang datang ke blog.

Karna popular post ini sangat penting dan berguna salah satu nya menjadi persyaratan untuk mendaftarkan blog ke google adsense.

Google adsense akan menerima blog atau situs yang memiliki navigasi jelas dan popular post menjadi salah satunya

Selain itu popular post dapat menambah dan mempercantik tampilan blog terutama jika widget popular post ini sangat mirip web ternama yaitu jalantikus.com

Di artikel ini saya tidak akan panjang lebar dan langsung saja.

Ikuti tutorialnya dibawah ini!

1. silahkan masuk ke HTML editor di blog sobat masing-masing.
2. lalu letakan kode CSS dibawah ini, diatas kode </head>

<style type='text/css'> 
/* Popular Post */
.PopularPosts ul{list-style:none;margin:0 auto;padding:0;} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {margin:0;padding:0;list-style:none;border:none;background:none;outline:none;} .PopularPosts ul li {margin:0 0 5px;padding:0;position:relative;line-height:1.4em!important;list-style:none;text-align:left!important;font-size:15px !important;box-shadow: 0 3px 5px 0 rgba(0,0,0,0.17);border-radius: 4px;border: 1px solid #eee;} .PopularPosts ul li a:hover {color:#f80538!important} .PopularPosts li a{color:#000 !important;font-weight:500 !important;list-style:none} .PopularPosts .item-thumbnail {display: flex;align-items: center;justify-content: center;width:72px;height:66px;margin: 6px 20px 7px 3px;overflow:hidden;float:left;border-radius:4px;} .PopularPosts ul li img {width:auto;height:72px;transition:all .3s ease-in-out;border-radius:4px;overflow:hidden;display:block} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title {padding:0 0 5px} .PopularPosts .widget-content ul li:before{color: #fff;counter-increment: count;content: counter(count);position: absolute;left:57px;text-align: center;top:20px;z-index: 51;transition: all .4s;height:25px;min-width:25px;font-size: 14px;line-height:25px;background:#f80538;font-weight:600;border-radius:99em;border:2px solid #fff;text-align: center;padding:0;overflow:hidden;} .PopularPosts ul{counter-reset:count;} @media screen and (max-width:414px){ .PopularPosts ul li {font-size:15px!important} } </style>


3. jika sudah ada kode CSS popular post di template sobat, tinggal replace saja dengan yang diatas.
4. save template!

nah, sekarang lihat hasilnya, popular post ini mirip dengan jalan tikus.

Cara membuat Widget Popular Post Seperti Jalantikus.com



Tombol Contact WhatsApp di Blog - Pada sebuah blog Toko Online atau blog yang bertujuan memasarkan produk dan menawarkan jasa pasti salah satu HTML ini sangat penting bagi mereka.
Karena dengan Menggunakan HTML ini pengunjung akan mudah komunikasi dengan Admin dalam satu klik dan Admin pun juga mendapatkan kemudahan karna tidak perlu lagi meninggalkan nomor-nomor di setiap artikelnya.

Dapatkan informasi lainya di JeniceApk

Berikut adalah Cara Tombol Contact WhatsApp Melayang di Blog

1. Buka Akun Blogger >> Pilih Tema >> Pilih Edit HTML

2. Copy kode CSS dibawah ini, kemudian letakkan diatas kode ]]></b:skin>

.kurachat {bottom:10px;right:10px;background-color: #e4e4e4; color: rgba(0, 0, 0, 0.6);position: fixed; z-index: 99999999;border-radius:20px;padding:5px 10px 5px 5px} .kurachat span{background:green;padding:3px 6px;border-radius:100%;color:white} .kurachat a{color: rgba(0, 0, 0, 0.6)}

3. Copy HTML dibawah ini, kemudian letakkan diatas kode </body>

<div class="kurachat"><a href="https://wa.me/628816542149?text=Saya%20tertarik%20untuk%20membeli%20jasa%20Anda" target="_blank"><span><i class="fa fa-whatsapp"></i></span> Hubungi Kami</a></div>

4. ubah angka 628816542149 Menjadi nomor WhatsApp anda

5.  Ubah Kata Saya%20tertarik%20untuk%20membeli%20jasa%20Anda sesuai keinginan anda
notice : %20 untuk memberi spasi
6. Simpan Template


Demo : Anda dapat melihatnya di bawah kanan pojok pada blog ini


Hubungi Kami
Hubungi Kami

Cara Membuat Tombol Contact WhatsApp Melayang di Blog



Postingan blog yang baik adalah yang mampu membuat para pembacanya merasa nyaman, merasa paham dengan apa yang disampaikan, serta juga merasa lebih leluasa dalam membaca postingan suatu blog.

Ada banyak fitur yang bisa anda manfaatkan untuk dapat memberikan kenyamanan kepada para pembaca, namun kebanyakan dari sekain banyak fitur yang di tempatkan dalam postingan, malah memberikan dampak negatif yang sangat mengganggu kenyaman pembaca.

Lalu bagaimana cara membuat postingan lebih menarik, lebih nyaman, dan lebih interaktif tanpa memberikan dampak negatif kepada para pengunjung?

Jika anda memang ingin memberikan kenyamanan penuh kepada para pengunjung blog anda, maka anda bisa memasang fitur Emoticon pada setiap bagian di postingan blog.

Emoticon ini tentunya akan mampu memberikan nuansa baru kepada para pembaca, serta tentunya memberikan interaksi yang baik, sebab para pengunjung bisa memberikan reaksi atau tanggapan secara cepat melalui Emoticon ini.

Kelebihan lain dari penggunaan Emoticon atau Emoji ini yaitu tidak membebani loading blog, jadi bisa dipastikan kecepatan loading blog anda akan tetap aman.

Selain itu, Emoticon ini juga bersifat responsive dan fleksibel di segala perangkat, baik Desktop maupun Mobile.

Nah, untuk anda yang berminat untuk memasang tombol reaksi berupa Emoticon, bisa mengikuti panduan berikut ini:

1. Buka situs ShareThis.
2. Kemudian buat akun baru dengan melengkapi kolom email, password dan domain yang tersedia.
3. Lalu pada dashboard pilih "Get The Code". Kemudian copy kode yang tersedia, dan pastekan di template blog anda.



4. Caranya yaitu dengan masuk ke Blogger.com>>Tema>>Edit HTML kemudian cari kode <head> dan pastekan kode tadi dibawah kode tersebut.
5. Jika sudah klik "Simpan Tema".
6. Namun jika terjadi error, silahkan tambahkan kode amp; setelah kode &. Untuk contohnya bisa anda lihat dibawah ini:

<script async='async' src='//platform-api.sharethis.com/js/sharethis.js#property=5b57a5884970c900111bb7b9&amp;product=social-analytics' type='text/javascript'/>

7.Kemudian masuk lagi ke situs ShareThis dan klik "VERIFY" untuk melakukan verifikasi situs blog.
8. Lalu aktifkan layanan "Reaction Button" dengan mengubah tombol "Off" menjadi "On".



9. Scroll kebawah sedikit, maka anda akan menemui tombol Copy, silahkan klik tombol tersebut untuk menyalin kode Emoticon.



10. Kemudian buka kembali Blogger.com dan masuk ke menu Tema>>Edit HTML, lalu pastekan kode tadi dibawah kode <data:post.body/>
11. Perlu diperhatikan, bahwa pada umumnya kode <data:post.body/> berjumlah lebih dari satu, jadi silahkan cari semua kode tersebut dan pastekan kode Emoticon dibawahnya.
12. "Simpan Tema" dan buka kembali situs ShareThis, scroll ke bagian paling bawah klik "Update".



13. Selesai.


Demikianlah panduan singkat cara memasang tombol reaksi berupa Emoticon di dalam situs blog. Emoticon ini bisa anda temukan pada semua postingan di blog anda. Dimana pada umumnya terletak pada bagian akhir postingan.

Nah, mungkin itu saja yang dapat saya sampaikan pada pembahasan kali ini, semoga artikel ini bisa memberikan faedah kepada kita semua ya. Akhir kata saya ucapkan terimakasih dan sampai jumpa di lain kesempatan.

Cara Memasang Tombol Emoji/Emoticon Responsive Pada Postingan Blog



 Efek scroll persen atau persentase scrollbar merupakan efek khusus pada scrollbar suatu situs blog, yang mana fungsinya adalah untuk memberikan keterangan berapa persen halaman blog sudah dibaca.

Disebut sebagai presentase scrollbar karena memang efek ini memberikan keterangan dalam bentuk persen, dimana efek ini akan muncul ketika seseorang melakukan scroll pada kursor/mouse komputer.

Efek ini akan dimulai dari 0% sampai 100%, dimana angka 100% menandakan bahwa anda telah berada pada halaman akhir suatu situs blog.

Untuk lebih jelasnya, silahkan perhatikan tampilan scrollbar situs blog ini. Ketika anda melakukan scroll down maka efek persentasenya akan muncul, begitupula ketika anda melakukan scroll up.

Nah, untuk cara membuat efek persen ini sendiri sangatlah mudah, anda hanya perlu mengikuti panduan dibawah ini:

1. Login ke Blogger.com>>Tema>>Edit HTML.
2. Copy atau salin kode berikut, dan pastekan diatas kode </body>


<style>
#kurascroll{padding:3px 8px;border-radius:3px;display:none;position:fixed;background-color:#007bfd;color:#fff;top:0;right:10px;z-index:500;}
#kurascroll:after{content:"";right:-7px;height:0;width:0;margin-top:-4px;position:absolute;top:50%;border:4px solid transparent;border-left-color:#007bfd;}
</style>
<script type='text/javascript'>
//<![CDATA[ var scrollTimer = null;$(window).scroll(function(){var viewportHeight = $(this).height(),scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,progress = $(this).scrollTop() / ($(document).height() - viewportHeight),distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#kurascroll').height() / 2;$('#kurascroll').css('top',distance).text(' (' + Math.round(progress * 100) + '%)').fadeIn(100);if (scrollTimer !== null){clearTimeout(scrollTimer);} scrollTimer = setTimeout(function(){$('#kurascroll').fadeOut();} ,1500);} );//]]></script> <div id='kurascroll'></div>

3. Simpan Tema, dan selesai.


Itu dia cara mudah memasang efek persen pada scrollbar blog, cara ini bisa langsung anda aplikasikan pada situs blog anda. Sedikit tambahan saja, bahwa jika anda ingin mengubah warna persentase, maka anda bisa mengubah kode warna #007bfd pada kode diatas.

Akhir kata, saya ucapkan terimakasih. Dan jangan lupa untuk terus mengunjungi situs blog ini untuk mendapatkan informasi menarik lainnya.

Html ini saya dapatkan dari pengembang aslinya : Admin Kurazone.net

Cara Membuat Efek Persen pada Scrollbar Blogspot - HTML



Cara Membuat Form Login itu mudah sobat, Form login jalantikus ini sangat mudah dibuat yang susah itu Mengimplementasikannya ke servers hosting, karena butuh keahlian Php, dan kode sejenisnya.

Tapi kali ini tidak membahas mengenai cara tersebut, admin hanya membagikan skrip atau kode Form yang digunakan oleh Jalantikus. Jika sobat adalah penulis jalantikus, Mungkin sudah tau seperti apa tampilannya.


Ada banyak kelebihan kelebihan di situs tersebut. Tidak usah panjang panjang berbicaranya, langsung check ke tutorial aja ya sob.



  1.  Login ke Blogger
  2.  Lihat tab Tema > Edit HTML
  3.  Masukkan CSS dibawah ini, Tepat diatas kode ]]></b:skin> atau </style>



.login-root .login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.login {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-width: 100%;
    background-image: url(https://jalantikus.com/assets/a74bdef3.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}.login-root .login {
    left: auto;
    top: auto;
    margin-left: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}.login-container {
    position: absolute;
    width: 360px;
    left: 50%;
    top: 50%;
    margin-left: -180px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}.login-body {
    position: relative;
    background-color: #322b36;
    border-radius: 8px;
    margin-bottom: 40px;
    -webkit-box-shadow: 0 20px 60px 10px rgba(0,0,0,.3);
    box-shadow: 0 20px 60px 10px rgba(0,0,0,.3);
}.login-body .login-back, .login-body .title {
    top: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}.login-body .title {
    position: relative;
    left: 0;
    height: 66px;
    width: 100%;
    padding: 0 24px;
    font-family: Museo,sans-serif;
    font-size: 21px;
    line-height: 66px;
    border-radius: 6px 6px 0 0;
    background: -webkit-linear-gradient(left,#ed6a63,#f6a684);
    background: -o-linear-gradient(right,#ed6a63,#f6a684);
    background: -webkit-gradient(linear,left top,right top,from(#ed6a63-#f6a684));
    background: -webkit-linear-gradient(left,#ed6a63-#f6a684);
    background: -o-linear-gradient(left,#ed6a63-#f6a684);
    background: linear-gradient(90deg,#ed6a63-#f6a684);
    z-index: 1;
}.login form {
    width: 100%;
    padding: 20px;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}.login form .form-title {
    font-family: arial;
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 20px;
    text-align: center;
}
.color.white {
    color: #fff;
}.login .input-group {
    margin-bottom: 20px;
}
.input-group {
    width: 100%;
    margin-bottom: 10px;
}.box-1:first-child, .box-2:first-child, .box-3:first-child, .box-4:first-child, .box-5:first-child, .box-6:first-child, .box-7:first-child, .box-8:first-child, .box-9:first-child, .box-10:first-child, .box-11:first-child, .box-12:first-child {
    float: left;
}.box-12 {
    width: 100%;
}.box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10, .box-11, .box-12 {
    position: relative;
    display: inline-block;
    float: left;
}form .box-6:nth-child(odd) {
    padding-right: 10px;
}form .box-6 {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.box-merge, .box-merge * {
    padding: 0!important;
    margin: 0!important;
}
.box-6 {
    width: 50%;
}.login .button.facebook {
    border-radius: 30px 0 0 30px;
    background-color: #3d5c9c;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
  }
  .login .button.facebook:hover{background:#506ca5}
.login .box-merge .button {
    height: 35px;
    font-family: Museo,sans-serif;
    line-height: 35px;
}.login .button {
    width: 100%;
    border-radius: 30px;
    line-height: 36px;
    -webkit-transition: .3s!important;
    -o-transition: .3s!important;
    transition: .3s!important;
}.login .button.facebook:before, .login .button.google:before {
    position: absolute;
    font-size: 18px;
    line-height: 35px;
    left: 28px;
}.icon-fb:before {
    content: "\E005";
}[class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before {
    font-family: untitled-font-2!important;
    font-style: normal!important;
    font-weight: 400!important;
    font-variant: normal!important;
    text-transform: none!important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-g:before {
    content: "\E006";
}
.link-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    cursor: pointer;
}form .box-6:nth-child(2n) {
    padding-left: 10px;
}.login .button.google {
    border-radius: 0 30px 30px 0;
    background-color: #e04a32;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
}
.login .button.google:hover{background:#de5e49}
.login .box-merge .button {
    height: 35px;
    font-family: Museo,sans-serif;
    line-height: 35px;
}.login .button {
    width: 100%;
    border-radius: 30px;
    line-height: 36px;
    -webkit-transition: .3s!important;
    -o-transition: .3s!important;
    transition: .3s!important;
}.login .button.facebook:before, .login .button.google:before {
    position: absolute;
    font-size: 18px;
    line-height: 35px;
    left: 28px;
}[class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before {
    font-family: untitled-font-2!important;
    font-style: normal!important;
    font-weight: 400!important;
    font-variant: normal!important;
    text-transform: none!important;
    speak: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}.login .input-group {
    margin-bottom: 20px;
}.input-group {
    width: 100%;
    margin-bottom: 10px;
}.login input {
    width: 100%;
    background-color: #3c3940;
    border-radius: 30px;
    border: 0 solid hsla(0,0%,100%,0);
    text-align: center;
    color: #fff;
    font-size: 14px;
    -webkit-transition: .4s!important;
    -o-transition: .4s!important;
    transition: .4s!important;
}.input-group input, .input-group select, .input-group textarea {
    position: relative;
    width: 100%;
    padding: 0 10px;
    border-radius: 50px;
    height: 40px;
    font-family: Roboto,Open Sans;
    font-weight: 400;
    line-height: 38px;
margin-top:20px;
  outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.login .input-group:last-child {
    margin-bottom: 0;
}.login .input-group {
    margin-bottom: 20px;
}.input-group {
    width: 100%;
    margin-bottom: 10.login .button {
    width: 100%;
    border-radius: 30px;
    line-height: 36px;
    -webkit-transition: .3s!important;
    -o-transition: .3s!important;
    transition: .3s!important;
}px;
}.login .button {
    width: 100%;
    border-radius: 30px;
    line-height: 36px;
    -webkit-transition: .3s!important;
    -o-transition: .3s!important;
    transition: .3s!important;
}.button-magenta {
    background-color: #ce0a46;
    border: 1px solid #9c153e;
}
.button-magenta:hover {
    background-color: #b7033b;
}
.button {
    position: relative;
    width: 150px;
    height: 40px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    border-radius: 4px;
    overflow: hidden;
    font-family: Open Sans;
    line-height: 38px;
    text-align: center;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}.to-register {
    padding-bottom: 17px;
    font-family: Open Sans;
    font-size: 15px;
    line-height: 18px;
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}
#enterblogger{color:#fff;text-align:center;width:50%;background:#00000061;
padding:10px 15px;margin:5px;box-shadow:0 5px 20px rgba(32, 33, 36, 0.19);cursor:pointer;font-weight:bold;}


Jika sudah, Masukkan kode HTML berikut ini, Pada Tampilan situs yang ingin Menampilkan form.



<div class="login"><div class="login-container"><div class="login-body"><div class="title color white text-left">MASUK</div><div class="content"><form><div class="form-title color white">Silahkan masukan alamat email anda untuk Login</div><div class="input-group"><div class="box-12"><div class="box-6 box-merge"><div class="button facebook "><!-- react-text: 14 --><i class="fa fa-facebook" aria-hidden="true"></i> Facebook<!-- /react-text --><a href="/login/facebook/" class="link-overlay" style="cursor: pointer;"> </a></div></div><div class="box-6 box-merge"><div class="button google"><!-- react-text: 18 --><i class="fa fa-google" aria-hidden="true"></i> Google<!-- /react-text --><a href="/login/google/" class="link-overlay" style="cursor: pointer;"> </a></div></div><div class="clear"></div></div><div class="clear"></div></div><div class="input-group"><input type="text" placeholder="Email atau Username" value=""></div><div class="input-group"><div class="box-12"><button type="submit" class="button button-magenta" id="login-submit">SELANJUTNYA</button></div><div class="clear"></div></div></form></div><div class="to-register color white"><!-- react-text: 29 -->Belum punya akun? <!-- /react-text --><strong><a href="/register/" class="color white">Daftar sekarang </a></strong></div></div></div>
  <center>
<div id="enterblogger">
 SOURCE BY ENTERBLOGGER
  </div>
  </center>
     <div class="footer--floating"><div class="select-tabs"><ul class="select-tab-list"></div></div><div class="popup" id="login-popup" style="display: none;"><div class="popup-overlay"></div><div class="popup-login-content popup-content text-center"><img src="../../assets/images/login/log-failed.png" class="login-fail" alt=""><div class="title color white">LOGIN GAGAL</div><div class="subtitle color white">Alamat email yang anda masukkan belum terdaftar. Silahkan daftar sekarang dengan menekan tombol di bawah ini.</div><div class="button button-magenta"><!-- react-text: 56 -->DAFTAR SEKARANG<!-- /react-text --><a href="/register/" class="link-overlay"> </a></div><div class="popup-close"></div></div></div><div class="popup" id="password-popup" style="display: none;"><div class="popup-overlay"></div><div class="popup-login-content popup-content text-center"><img src="../../assets/images/login/log-failed.png" class="login-fail" alt=""><div class="title color white">LOGIN GAGAL</div><div class="subtitle color white">Password yang anda gunakan salah. Silahkan memasukkan password yang benar, atau tekan tombol di bawah untuk reset password.</div><div class="button button-magenta"><!-- react-text: 66 -->Reset Password<!-- /react-text --><a href="/reset" class="link-overlay"> </a></div><div class="popup-close"></div></div></div></div>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>


Sekian artikel , Singkat padat & jelas. Semoga bisa bermanfaat, sampai berjumpa lagi di artikel selanjutnya ya sob.




Membuat Form Login Seperti JalanTikus.com - HTML

Subscribe Our Newsletter