• Sitemap
  • About Me
  • Contact Me
  • Privacy Policy
  • Blog Tools ▼
    • Kode Warna
    • Parse HTML
    • Check Pagerank
    • Check Speed Blog
  • Mobile
Ghiyats Blogs
  • Home
  • Blogger
  • Widget
  • SEO
  • Template
  • CSS
  • Menu Bar
  • JQuery
Home » Archive for February 2014

Tuesday, February 18, 2014

Membuat Menu Drop Down Dengan Animasi Di Blog

Membuat Menu Drop Down Dengan Animasi Di Blog | Ghiyats Blogs - Hai, Pada artikel yang akan saya bagikan kali ini, akan saya bagikan menu drop down keren dengan bentuk dan tampilan yang keren dan menarik

Membuat Menu Drop Down Dengan Animasi Di Blog

Menu ini dengan CSS Dan Tampilan Gambar pada bagikan menunya, Menu ini tampilan animasi keren yang sangat elegan dan indah, Langsung saya kita coba membuat menu ini dan tutorialnya seperti ini :

  • Login ke Blogger
  • Pergi ke menu ''Template'' >> Edit HTML
  • Setelah itu cari kode ]]></b:skin dan kalau sudah ketemu, copy kode dibawah ini, dan masukan di atas atau sebelum kode tadi
#mbt_menu {
    background: #656870;
    width: 100%;
    margin: 0px;
    height: 60px;
    padding: 0px;
    font-size: 13px;
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: normal;
    word-spacing: 2;
    -webkit-font-smoothing: antialiased;
}

#mbt_menu li.home a {
    padding: 0px 30px;
}

#mbt_menu li.home img {
    vertical-align: middle;
}

#mbt_menu ul {
    height: 60px;
    list-style: none;
    margin: 0;
    padding: 0px;
}

#mbt_menu li {
    float: left;
    padding: 0px;
}

#mbt_menu li a {
    background: #656870;
    color: #CCC;
    display: block;
    font-weight: bold;
    line-height: 60px;
    margin: 0px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

#mbt_menu li a:hover, #mbt_menu ul li:hover a {
    background: #46484E;
    color: #FFFFFF;
    text-decoration: none;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

#mbt_menu li ul {
    background: #656870;
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    position: absolute;
    width: 225px;
    z-index: 200;
/*top:1em;
/*left:0;*/;
}

#mbt_menu li:hover ul {
    display: block;
}

#mbt_menu li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 225px;
}

#mbt_menu li:hover li a {
    background: none;
    color: #979EAF;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

#mbt_menu li ul a {
    display: block;
    height: 60px;
    font-size: 13px;
    font-style: normal;
    margin: 0px;
    padding: 0px 10px 0px 15px;
    text-align: left;
}

#mbt_menu> ul > li ul li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-transition: color ease 0.3s;
    -moz-transition: color ease 0.3s;
    -ms-transition: color ease 0.3s;
    -o-transition: color ease 0.3s;
}

#mbt_menu li ul a:hover, #mbt_menu li ul li:hover a {
    background: #46484E;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #FFF;
    text-decoration: none;
    padding: 0px 10px 0px 15px;
}
  •  Setelah itu klik simpan
SETELAH ITU
  • Kita Pergi ke Tata Letak
  • Klik Tambah Gadget >> Cari gadget HTML/JavaScript
  • Setelah ketemu, Copy dan Paste di dalam gadget Tadi
<div id="MBT_menu">
<ul>

<li class="home"><a href="http://nama blog anda/" title="Home Page"><img alt="Home" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYZaAKgJAW9Cnw2oBMFpfdd7xzHyiaxwBIseBEaqw8Qbtkvzx4I-SLcAV0rD6efHQIdfUt35QvgiqZaze06ybzuD-UI9h0ZmQLbKvqzWE9-ji2Cwz6o9uEr23gf0dvgNzhy6QgUCOnGx7/s1600/Very- Basic-Home-icon.png"/></a></li>

<li class="sub "><a href="#"><span>Blogger</span></a>

<ul>

<li><a href="#"><span>SEO</span></a></li>

<li><a href="#"><span>Template</span></a></li>

<li><a href="#"><span>Widgets</span></a></li>

<li><a href="#"><span>Plugins</span></a></li>

</ul>

</li>

<li><a href="#"><span>Applicatoin</span></a>

<ul>

<li><a href="#"><span>HTML Encoder</span></a></li>

<li><a href="#"><span>HTML Editor</span></a></li>

</ul></li>

<li><a href="#"><span>Tools &#187</span></a>

<ul>

<li><a href="#"><span>Online HTML Editor</span></a></li>

<li><a href="#"><span>Color Code</span></a></li>

<li><a href="#"><span>Page Rank Checker</span></a></li>

</ul>

</li>

<li><a href="#"><span>Faqs</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>

</ul>

 </div>

  • Ganti http://nama blog anda/ Dengan Url blog anda
  • Ganti # dengan url yang inngin di tuju
  • Ganti Blogger, Contact us dan lainnya dengan nama menu yang anda inginkan
  • Setelah semua di ganti sesuai kemauan anda, Sekarang klik simpan

Demikianlah artikel ini semoga apa yang saya bagikan ini bermanfaat dan mudah untuk di pratekkan, Silakan beri pendapat anda di kolom komentar di bawah ini, Terima Kasih..

Via : MyBlogger - Tricks

Keep Blogging
Unknown Waktu 11:42 2 comments:

Sunday, February 9, 2014

Membuat Widget Social Media Dengan Tooltip Di Blog

Membuat Widget Social Media Dengan Tooltip Di Blog | Ghiyats Blogs - Halo, Pada Kesempatan Hari ini akan saya bagikan Sebuah sosial media Dengan efek Tooltip, Widget ini dengan gambar icon sosial tersebut dan tampilan keren dan menarik.
Membuat Widget Social Media Dengan Tooltip Di Blog

Kalau begitu langsung, saja kita coba dan membuat widget ini, Tutorial Seperti di bawah ini :

Membuat Widget Social Media Dengan Tooltip Di Blog :
  • Login ke Blogger.com
  • Terus, Kita ke menu ''Template'' >> Edit HTML
  • Dan cari kode ]]></b:skin> , Setelah itu Copy kode dibawah ini dan taruhlah di atas kode Tadi
#social_profiles-wrap{
    width: 450px;
  height: 80px;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzYQtxjmwJr3hMCmc00qoRkaYNRhnR9XRjv4ijWq3ijmpePFikq-OkZXi4t3so-mjqml4UiRCo1TFwo5Iv9VHPT6RWE6Wh7aknNEY6HOJ6t89BlPEmMop9S0OSqPuCJ_rgOmIaqI0q4qx/s1600/Bg.png") no-repeat 15px 10px;
  padding:22px 0px 15px 100px;
  margin: 14px auto;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
  -moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
  box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
.social_profiles{
  height: auto;
  margin: 0 auto; 
}
.social_profiles li{
  float: left;
  list-style: none;
}
.social_profiles li a {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  margin-top: 20px;
  outline: none;
  position: relative;
  z-index: 2;
  text-indent: -9000px;
  text-decoration: none;
}
.social_profiles li .facebook {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat;
}
.social_profiles li .twitter {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -45px;
}
.social_profiles li .gplus {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -90px;
}
.social_profiles li .pinterest {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -135px;
}
.social_profiles li .rss {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -180px;
}
.social_profiles li .linkedin {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -225px;
}
.social_profiles li .tumblr {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -270px;
}
.social_profiles li .youtube {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -315px;
}
.social_profiles li .mail {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -360px;
}
.social_profiles li a span {
  width: 80px;
  height: 20px;
  line-height: 20px;
  padding: 5px;
  left: 50%;
  margin-left: -52px;
  font-family: 'Alegreya SC', Georgia, serif;
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 5px solid #446cb3;
  background: #446cb3;
  text-indent: 0px;
  position: absolute;
  pointer-events: none;
  border-radius: 5%;
  opacity: 0;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-webkit-transform: translate(35px) rotate(25deg) scale(1.5);
  -moz-transform: translate(35px) rotate(25deg) scale(1.5);
  -o-transform: translate(35px) rotate(25deg) scale(1.5);
  -ms-transform: translate(35px) rotate(25deg) scale(1.5);
  transform: translate(35px) rotate(25deg) scale(1.5);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;

}
.social_profiles li a span:before,
.social_profiles li a span:after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 11px solid rgba(0,0,0,0.1);
}
.social_profiles li a span:after {
  bottom: -15px;
  margin-top: 6px;
  margin-left: -12px;
  border-top: 10px solid #446cb3;
}
.social_profiles li a:hover span {
  opacity: 0.9;
  bottom: 50px;
  -webkit-transform: translate(0px) rotate(0deg) scale(1);
  -moz-transform: translate(0px) rotate(0deg) scale(1);
  -o-transform: translate(0px) rotate(0deg) scale(1);
  -ms-transform: translate(0px) rotate(0deg) scale(1);
  transform: translate(0px) rotate(0deg) scale(1);
}

  • Setelah selesai, Klik Simpan
Selanjutnya..

  • Sekarang ke menu ''Tata letak'' >> ''Tambah Gagdet'' >> ''HTML/JavaScript''
  • Setelah itu, Masukan kode di bawah ini, di dalamnya
  • Atau.. Dengan Cara Kedua, ''Template'' >> ''Edit HTML'' 
  • Terus cari kode <data:post.body> Setelah ketemu masukan kode dibawah ini, di dalamnya

<div id="social_profiles-wrap"> 
<ul class="social_profiles"> 
<li><a class="facebook" href=http://www.facebook.com/Usernametarget="_blank"><span>Facebook</span></a></li> 
<li><a class="twitter" href=http://twitter.com/Username target="_blank"><span>Twitter</span></a></li> 
<li><a class="gplus" href=https://plus.google.com/b/Usernametarget="_blank"><span>Google Plus</span></a></li> 
<li><a class="pinterest" href=http://www.pinterest.com/Usernametarget="_blank"><span>Pinterest</span></a></li> 
<li><a class="rss" href=http://feeds.feedburner.com/Usernametarget="_blank"><span>RSS</span></a></li> 
<li><a class="linkedin"href=http://www.linkedin.com/in/Usernametarget="_blank"><span>LinkedIn</span></a></li> 
<li><a class="tumblr" href=http://www.thumblr.comUsernametarget="_blank"><span>Tumblr</span></a></li> 
<li><a class="youtube" href=http://www.youtube.com/Usernametarget="_blank"><span>Youtube</span></a></li> 
<li><a class="mail" href=Mailto: target="_blank"><span>Mail</span></a></li> 
</ul></div>

  •  Ganti Username Dengan Id dari masing masing Sosial media tersebut.
  • Setelah selesai, Klik Simpan

Demikianlah artikel ini semoga artikel yang saya bagikan ini bermanfaat dan mudah untuk di pratekkan, Beri pendapat tentang artikel ini dan kalau sobat masih bingung silakan kasih pertanyaan anda, di kolom komentar di bawah ini, Terima Kasih..

Via : MyBlogger-Tricks

Keep Blogging
Unknown Waktu 12:47 4 comments:
‹
›
Home
View web version
Find Us :
Powered by Blogger.
Copyright 2013 Ghiyats Blogs - All Rights Reserved
Template by Mas Sugeng | Blogger