◄ Min  Size Fonts: + | - | ± Color: Max ►

Make Clickable Menu Google Search Engine

Setelah menghilangkan beberapa fitur dari tampilan yang ada pada google search engine bersamaan dengan itu hadir juga fitur baru. Contoh fitur yg dihilangkan antara lain screenshoot website, google plus share, link cached, similar and etc. Fitur baru pengganti hadir dengan membawa clickable menu yg isinya terdiri dari link cached, similar and share (yg terlihat cuma itu :d) Link navigasi dipindahkan ke bagian atas tepat di bawah kotak pencarian dan tentunya main navigasi yg selalu ada dimanapun produk google berada :))
Koben mau berbagi cara membuat clickable menu google full memakai CSS. Bila masih belum ngeuh dengan clickcable menu, perhatikan!!!
Before the clickclickable-menuAfter the clickclickable-menuItulah yg akan kita buat sekarang bos :d Gue hanya membuatkan versi default, jika mau keren silahkan kalian tambahkan variabel CSS sendiri!
DEMO
.contshare {
  display: none;
}
.contshare a {
  color: #343434;
  text-align: center;
  text-decoration: none;
}
.wrapshare:active .contshare {
  display: block;
}
.wrapshare {
  position: relative;
}
.contshare:hover {
  display: block;
}
.parrow {
  width: 0px;
  height: 0px;
  cursor: pointer;
  border-style: solid;
  border-width: 8px 8px 0 8px;
  border-color: #060 transparent transparent transparent;
}
.contshare {
  width: auto;
  position: absolute;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}
.contshare li {
  color: #343434;
  background: #FFF;
  padding: 5px 10px;
  text-align: center;
  list-style-type: none;
}
.contshare li:hover {
  background: #EEE;
}
Planning HTML<div class="wrapshare">
<div class="contshare">
<li><a href="#">Cached</a></li>
<li><a href="#">Similar</a></li>
<li><a href="https://plus.google.com/u/0/_/sharebox/dialog" target="_blank">Share</a></li>
</div>
<div class="parrow"></div>
</div>
Aurlah sendiri nominal yg ada, itu hanya kode CSS dasar yang perlu penambahan disana-sini.
Semoga bermanfaat :)
Happy blogging \m/
Loading...
XMake Clickable Menu Google Search Engine
Membuat menu clickable google yang ada persis di google search engine.
Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE