https://bl.id/kumpulink_io_art

Showing posts with label JAVASCRIPT. Show all posts
Showing posts with label JAVASCRIPT. Show all posts

Cara membuat contact us di blog

  06:19:00    

   Lama tak jumpa kawan,sudah g pernah bikin postingan lagi untuk para sahabat seoke.com.kesempatan kali ini seoke.com akan mempostingan Cara membuat contact us di blog namun seoke.com sedikit berbeda dengan postingan posting para blogging yang selalu menyajikan contact us itu di tempatkan di nav atau top nav.nah kali ini seoke.com membuat contact us tersebut dengan popup.


foto By www.perfect-web.co

mungkin sahabat semua masing bingung dengan apa yang di maksud dengan contact us popup.contact popup itu ialah suatu blog yang menyediakan contact untuk bisa mengirim keritik atau pun saran pada si pembuat blog tersebut dengan contact us melayang.
jika kalian penasanran silahkan lihat demonya di bawah ini




jika kalian tertarik dengan contoct us popup tersebut sahabat seoke.com silahkan copy paste kode kode di bawah ini dan ikutin petunjuk seoke.com cara pemasangan kode kode teersebut.


  • yang pertama kalian masuk pada blog kalian dan masuk ke template dan edit HTML.
  • silahkan cari kode ]]></b:sikin>
  • dan masukan kode di bawah ini tepat di atas kode ]]></b:skin> 

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600italic,600,700,700italic,400italic,300italic,300);
@import url(https://fonts.googleapis.com/css?family=Dosis:400,700,600,500);
.light-grey{ color:#999;}
.mid-grey{ color:#505050;}
.dark-grey{ color:#141414;}
.main-red:{color:#fe044b;}
.main-blue{ color:#00fcfa;}
.dark-blue{ color:#0f424a;}

* {
  margin:0;
  padding:0;
  outline:none;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
  color:#000;
  background: transparent;
  border:none;
}
body {
  background: #fff;
  position: relative;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
}
.wireframe {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.chat-wrap {
  position: fixed;
  width: 150px;
  height: 150px;
  bottom: 50px;
  right: 0px;
  z-index: 2;
  cursor: pointer;
  transition: .3s all ease-in-out;
  -webkit-transition: .3s all ease-in-out;
  -moz-transition: .3s all ease-in-out;
}
.chat-wrap.active {
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
}
.contact-icon img {
  position: absolute;
  top: 0;left: 0;right: 0;bottom: 0;
  margin: auto;
}
.contact-icon div {
  height: 40px;
  width: 180px;
  overflow: hidden;
  position: absolute;
  left: -130px;
  z-index: 2;
  top: 20px;
}
.contact-icon div span {
  color: #fff;
  font-size: 14px;
  text-align: center;
  position: absolute;
  left: 0;
  height: 40px;
  line-height: 40px;
  background: #fe044b;
  width: 145px;
  left: 145px;
  opacity: 0;
  transition: .3s all ease-in-out;
  -webkit-transition: .3s all ease-in-out;
  -moz-transition: .3s all ease-in-out;
}
.contact-icon div:after {
  font-size: 30px;
  background: #fe044b;
  text-align: center;
  color: #fff;
  content: "...";
  display: block;
  width: 40px;
  line-height: 25px;
  height: 40px;
  border-radius: 4px;
  position: absolute;
  right: 0;
}
.chat-wrap:hover .contact-icon span {
  display: block;
  left: -2px;
  opacity: 1;
}
.contactme {
  height: 50px;
  width: 70px;
  background: #fff;
  position: fixed;
  top:0;left:0;right: 0;bottom: 0;
  margin: auto;
  z-index: 10;
  border-radius:50%;
  box-shadow: 0 10px 40px rgba(22,20,19,0.2);
  transform:translateY(-70vh);
  -webkit-transform:translateY(-70vh);
  -moz-transform:translateY(-70vh);
  transition:0.3s all ease-out 0.1s, transform 0.2s ease-in;
  -webkit-transition:0.3s all ease-out 0.1s, transform 0.2s ease-in;
  -moz-transition:0.3s all ease-out 0.1s, transform 0.2s ease-in;
}
.contactme p {
  font-family: 'Dosis';
  color: #fe044b;
  font-size: 36px;
  margin-top: 50px;
  font-weight:600;
  text-align: center;
}
.contactme img {
  position: absolute;
  left: 0;
  top: -100px;
  right: 0;
  margin: auto;
}
.contactme.active {
  border-radius:10px;
  height: 560px;
  width: 400px;
  transform:translateY(0);
  -webkit-transform:translateY(0);
  -moz-transform:translateY(0);
}
.contactme div {
  width: 100%;
  opacity: 0;
  transform:scale(0);
  -webkit-transform:scale(0);
  -moz-transform:scale(0);
  transition:0.2s all ease-out 0s;
  -webkit-transition:0.2s all ease-out 0s;
  -moz-transition:0.2s all ease-out 0s;
}
.contactme.active div {
  opacity: 1;
  transform:scale(1);
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  transition:0.2s all ease-out 0.2s;
  -webkit-transition:0.2s all ease-out 0.2s;
  -moz-transition:0.2s all ease-out 0.2s;
}
#fancy-inputs {
  width: 320px;
  height: 520px;
  position: relative;
  margin: 0 auto;
}
#fancy-inputs label.input {
  float: left;
  width: 320px;
  height: 42px;
  margin: 50px 0 0 0;
  position: relative;
  clear: both;
}
#fancy-inputs label.input span {
  width: 100%;
  height: 40px;
  line-height: 40px;
  position: absolute;
  left: 0;
  cursor: text;
}
#fancy-inputs label.input span span {
  position: absolute;
  top: 0;
  z-index: 1;
  font-size: 18px;
  font-weight: 400;
  color: rgba(22,20,19,0.6);
  text-indent: 10px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}
#fancy-inputs .inputs {
  float: left;
  width: 320px;
  height: 40px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid rgba(22,20,19,0.3);
  background-color: transparent;
  color: rgba(22,20,19,0.7);
  font-size: 22px;
  position: relative;
  z-index: 99;
}
#fancy-inputs textarea {
  resize:none;
  min-height: 100px;
}
#fancy-inputs .inputs:focus {
  outline: 0;
}
#fancy-inputs .inputs.white {
  background: #fff;
  color:rgba(22,20,19,0.6);
  border-bottom: 2px solid rgba(22,20,19,0.6);
}
#fancy-inputs .inputs:focus + span span {
  cursor: initial;
  position: absolute;
  top: -35px;
  color: rgba(22,20,19,0.6);
  font-size: 14px;
}
#fancy-inputs span.fixed span {
  top: -35px;
}
.btn {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 18px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}
.overlay{
  z-index: 2;
  position: fixed;
  top: 0;left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(14,14,14,0.9);
  display: none;
  cursor: url(http://thomaspodgro.com/assets/img/cross.png), auto;
}
.cta {
  border-radius: 30px;
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  background: #fe044b;
  cursor: pointer;
  color:#fff;
  height: 60px;
  line-height: 60px;
  font-weight: 700;
  color: #fff;
  font-family: 'Dosis';
  font-size: 21px;
}
perhatikan jika dalam template sahabta sudah terdapat kode seperti di bawah ini kalian tidak usah memsuakannya

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600italic,600,700,700italic,400italic,300italic,300);
@import url(https://fonts.googleapis.com/css?family=Dosis:400,700,600,500);
dan jangan pula copy code seperti di bawah ini


.light-grey{ color:#999;}
.mid-grey{ color:#505050;}
.dark-grey{ color:#141414;}
.main-red:{color:#fe044b;}
.main-blue{ color:#00fcfa;}
.dark-blue{ color:#0f424a;}
* {
  margin:0;
  padding:0;
  outline:none;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
  color:#000;
  background: transparent;
  border:none;
}
body {
  background: #fff;
  position: relative;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
}
jika sudah kode dia atas tersebut copy paste sahabat cari kode  </body> biasanya kode tersebut berada paling bawah dari kode kode HTML.bingung pa ga tau tentang cara penempatan kode kode html pada template tersebut kalian silahkan baca tutorial tentang cara menginput kode CSS pada HTML atau pengertian javascript pada blog.
jika sudah ketemu kode </body> tersebut sahabat silahkan copy paste kode di  bawah ini tepat di atas kode tersebut.


// show contact seoke  $('.chat-wrap
').click(function(){
  $(this).addClass('active');
  $('.contactme').addClass('active');
  $('.overlay').fadeIn();
});
// overlay escape click
$('.overlay').click(function(){
  $('.chat-wrap').removeClass('active');
  $('.contactme').removeClass('active');
  $('.overlay').fadeOut();
});
// inputs background on blur
$('.inputs').blur(function(){
  if($(this).val().length > 0){
    $(this).addClass('white');
  } else {
    $(this).removeClass('white');
  }
});
// seoke
dan jangan lupa masukan kode tersebut harus berawalan
<script type='text/javascript'>
//<![CDATA[  KODE JAVASCRIPT  /]]></script>
setelah selesai simpan template tersebut.

dan pilih TATA LETAK pada blog TAMBAH WIDGET pilih HTML/JAVASCRIPT terserah sabahat seoke.com mau menempatkannya contact us tersebut,karena tidak berpengaruh untuk widget di karnakan ini akan muncul melayang di samping blog.
Dan masukan kode di bawah ini

<img class="wireframe" src="http://thomaspodgro.com/source/wireframeakp.jpg" alt="" />
<div class="chat-wrap">
  <div class="contact-icon">
    <div><span>seoke</span></div>
    <img src="http://thomaspodgro.com/crea/akp-demo/img/chat-girl.png" alt="Art Kids Sister">
  </div>
</div>
<span class="overlay"></span>
<section class="contactme">
  <div id="fancy-inputs">
    <form action="" method="POST">
      <img src="http://thomaspodgro.com/crea/akp-demo/img/chat-girl.png" alt="Art Kids Sister">
      <p>tinggalkan pesannya?</p>
      <label class="input">
        <input class="inputs" type="text" name="nom" required="">
        <span><span>nama</span></span>
      </label>
      <label class="input">
        <input class="inputs" type="email" name="mail" required="">
        <span><span>Email</span></span>
      </label>
      <label class="input textarea">
        <textarea class="inputs" required=""></textarea>
        <span><span> Message</span></span>
      </label>
      <input type="submit" value="kirim" class="btn cta">
    </form>
  </div>
</section>

gimana hasilnya silahkan kalian tes bekerja atau tidak.

mungkin cuma segitu yang seoke.com bisa bagika kali ini dan jika kalian buuh kode kode HTMl tentang cara membuat navigasi di blog silahkan kunjungi halam tersebut.
terima kasih telah berkunjung di blognya seoke.com yang selalu berusah untuk menyajikan kode kode html untuk di blog.kalian punya keritik dan saran silahkan tinggalkan pesanya di komentar.


   / /

  1 Comment

Form login untuk blog

  06:19:00    

     Selamat malam menjelang malam banget sahabatnya seoke.com semoga selalu di beri keshatan dan kebahagiaan untuk bisa jalain hidup ini.
nah kesempatan kali ini seoke.com akan berbagi postingan tentang cara membuat form login untuk blog.menurut seoke.com cukup menarik saat dalam blog kita terdapat form login berada di sebuah blog.bisa di lihat sangan profesional saat kita melihat blog yang terdapat form login tersebut.
nah kta langsung aja ke kode kode tersrebutnya,namun seoke.com di sini tidak akan menjelaskan bagai mana kita meletakan code code teersebut pada HTML tersebut.tapi tenang di sini seoke.com telah mempersiapkan dan pengertian CSS pada HTML dan JAVASCRIPT,silahkan kalian tinggal kunjungi artikel seoke.com sebelumnya.


foto By colorlib.com

  • CSS

@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,900);
* {
  padding: 0;
  margin: 0;
}
input {
  outline: none;
}
html,
body {
  height: 100%;
}
body {
  font-family: 'Roboto', sans-serif;
  background: -webkit-linear-gradient(45deg, rgba(4, 2, 96, 0.7), rgba(180, 49, 183, 0.9)), -webkit-linear-gradient(0deg, rgba(51, 136, 140, 0.3), rgba(87, 240, 240, 0.1));
  background: -moz-linear-gradient(45deg, rgba(4, 2, 96, 0.7), rgba(180, 49, 183, 0.9)), -moz-linear-gradient(0deg, rgba(51, 136, 140, 0.3), rgba(87, 240, 240, 0.1));
  background: -o-linear-gradient(45deg, rgba(4, 2, 96, 0.7), rgba(180, 49, 183, 0.9)), -o-linear-gradient(0deg, rgba(51, 136, 140, 0.3), rgba(87, 240, 240, 0.1));
  background: linear-gradient(45deg, rgba(4, 2, 96, 0.7), rgba(180, 49, 183, 0.9)), linear-gradient(90deg, rgba(51, 136, 140, 0.3), rgba(87, 240, 240, 0.1));
  overflow: hidden;
}
.panel {
  width: 400px;
  height: 500px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 10px black;
  -moz-box-shadow: 0 0 10px black;
  box-shadow: 0 0 10px black;
  background: #141519;
  margin: 100px auto;
  text-align: center;
}
.panel .state {
  margin-top: 5px;
  width: 100%;
  height: 155px;
  color: white;
  font-size: 20px;
}
.panel .state i.fa-ban {
  font-size: 40px;
}
.panel .state i.fa-unlock-alt {
  font-size: 25px;
  color: white;
  line-height: 33px;
  height: 30px;
  width: 30px;
  display: inline-block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 2px solid;
}
.panel .state h2 {
  font-weight: 400;
}
.panel .form {
  width: 340px;
  margin: 5px auto;
}
.panel .login {
  height: 45px;
  width: 100%;
  background-color: #8bc34a;
  -webkit-border-radius: 45px;
  -moz-border-radius: 45px;
  border-radius: 45px;
  position: relative;
  line-height: 45px;
  text-align: center;
  font-weight: bold;
  color: white;
  margin-top: 10px;
  -webkit-transition: background .2s;
  -moz-transition: background .2s;
  -o-transition: background .2s;
  transition: background .2s;
  cursor: pointer;
}
.panel .login:active {
  -webkit-transform: translateY(2px);
  -moz-transform: translateY(2px);
  -ms-transform: translateY(2px);
  -o-transform: translateY(2px);
  transform: translateY(2px);
}
.panel .login:hover {
  background-color: #599b2d;
}
.panel .login:after {
  content: "\f084";
  font-family: 'FontAwesome';
  position: absolute;
  width: 45px;
  height: 45px;
  background-color: #599b2d;
  color: #fff;
  text-shadow: 1px -1px #467a23, 2px -2px #487d24, 3px -3px #4a8025, 4px -4px #4b8326, 5px -5px #4d8627, 6px -6px #4f8928, 7px -7px #508c28, 8px -8px #528f29, 9px -9px #54922a, 10px -10px #55952b, 11px -11px #57982c;
  left: 0;
  top: 0;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  line-height: 45px;
}
.panel input[type='text'] {
  background-color: #22232a;
  -webkit-border-radius: 45px;
  -moz-border-radius: 45px;
  border-radius: 45px;
  font-size: 15px;
  height: 45px;
  border: none;
  padding-left: 15px;
  width: -webkit-calc(100% - 15px);
  width: -moz-calc(100% - 15px);
  width: calc(100% - 15px);
  margin-bottom: 10px;
}
.panel input[type='text'][placeholder] {
  color: #656d79;
  font-size: 15px;
  font-weight: 500;
}
.panel .fack {
  margin-top: 30px;
  font-size: 14px;
}
.panel .fack i.fa {
  text-decoration: none;
  color: #fff;
  vertical-align: middle;
  font-size: 20px;
  margin-right: 5px;
}
.panel .fack a:link {
  color: #616973;
}
.panel .fack a:visited {
  color: #555c65;
}


  • HTML 

<div class="panel">
<div class="state"><br><i class="fa fa-unlock-alt"></i><br><h1>Log in</h1></div>
<div class="form">
<input placeholder='Email' type="text">
<input placeholder='Password' type="text">
<div class="login">Login</div>
</div>
<div class="fack"><a href="#"><i class="fa fa-question-circle"></i>Forgot password?</a></div>
</div>

  • JAVASCRIPT 
 $(document).ready(function() {
  return $('.login').click(function(event) {
    if (false) {
    } else {
      return $('.state').html('<br><i class="fa fa-ban"></i><br><h2>Error</h2>The email or password you entered is incorrect, please try again.').css({
        color: '#eb5638'
      });
    }
  });
});

 gimana keren kan form login untuk blog dan kalian pun bisa lihat demonya klik demo tersebut di bawah ini



mungkin cuma segitu yang biusa seoke.com postingkan jika kalian punya kritik atau pun saran silahkan tingalkan pesanya di komentar,dan baca juga artikel seoke.com menarik lainya Cara bikin toggle animasi untuk blog dan Membuat demo button effek slide.
terima kasih telah berkunjung di blognya Seoke.com

   / /

  No Comments

pengertian JAVASCRIPT untuk blog

  05:43:00    

     Di sini seoke.com akan menjelah kan tentang pengertian JAVASCRIPT .untuk para pemula belum mengerti dengan pengertian javascript tersebut.
kita ingin membangun suatu WEBSITE kita juga harus sedikit mengerti dengan yang ada di dalam website tersebut semisalkan yang kita akan bahas sekarang Pengertian Java script.
JAVASCRIPT ialah baha pemograman HTML dan WEB,pemograman dalam suatu web dan melakukan apa yang kalian lakukan dalam web tersebut.


foto BY www.tutorialku.net


sebenaranya JAVASCRIP itu mudah untuk kita pelajari yang terpenting adalam mempelajari ini,kita harus rela mengirbankan watu dan pikiran untuk bisa belajar tentang Javascript tersebut.
Dan seoke.com pun akan memeberi contoh untik code java script tersebut.

<h1>Contoh javascript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>

untuk memperjelas contonya lihat contoh di bawah ini

<html>
<body>
<h1>Contoh java script</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html> 

dan hasilnya akan seperti ini



Contoh JavaScript


Dalam javascript salah satu dari  3 bahasa untuk semua pengembang web

  • HTML untuk mentukan isi dari halam web
  • CSS untuk menentukan tata letak web
  • JAVASCRIPT untuk program halaman web 
nah Dari situ kalian pun di anjurkan untuk belajar code kode sperti HTML,CSS soalnya kalau cuma JAVASCRIPT aja yang di pelajari gak bakalan bisa berkembang untuk membangun suatu web yang besar.
jika kalian pengen belajar HTML,CSS.kalian bisa baca tutorial tentang pengertian HTML yang telah saya postingkan sebelumnya.
mungkin sementara ini seoke.com cuma bisa si gini dulu pembahasan tentang JAVASCRIPT tersebut,dan seoke.com pun akan membahas lebih dalam lagi tetang javascript tersebut dalam postingan beikutnya,
Terima kasih telah berkunjung di seoke.com yang berusaha menyajika code code untuk blog.

  

  No Comments

Subscribe to: Posts (Atom)