WordpressのページのHTMLコードはそれほどGoogleカスタム検索ボックスには、私は私が得ることができ、以下ください</p> <p>1）Googleのカスタム検索ボックスを（行うためにhtmlコードを置くことができますワードプレスのページを作成したい

-2

画像の上にありますグーグルのGCSコード）、それはイメージ以上でなければなりません。画像の上下ではありません。画像は私のサイトのメディアライブラリでホストされますWordpressのページのHTMLコードはそれほどGoogleカスタム検索ボックスには、私は私が得ることができ、以下ください</p> <p>1）Googleのカスタム検索ボックスを（行うためにhtmlコードを置くことができますワードプレスのページを作成したい

2）丸いアイコンボタンは、マウスの上にマウスを置いたときにバウンスするような、検索ボックスの下に丸いアイコンがあります（これらのアイコンの画像は変更でき、宛先URLは私によって割り当てられます）

添付の例は、Firefox用の新しいYahooの拡張子です。

何か助けていただければ幸いです。サンプルページイメージとそのページのビューソースコードを添付して、自分の状況を理解するのに役立ちます。違いは、検索ではなく、ヤフー

enter image description here

グーグルによるであろうということであるあなたの友人に感謝！その私をさせないよう、以下の

ビューコードを使用すると、他の画像にinputタグや画像を表示が必要な場合

<html> 
<head> 
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
    <meta content="utf-8" http-equiv="encoding"> 
    <link rel="stylesheet" type="text/css" href="newtab.css"> 
    <link rel="stylesheet" type="text/css" href="brand.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bootstrap.min.css"> 
    <script src="jquery.min.js"></script> 
    <script src="bootstrap.min.js"></script> 
</head> 
<body id="bg" class="flexContainer bgImage"> 
<div id="bookmarksAbsolute"> 
    <div id="bookmarksFlex" class="uiBG"></div> 
</div> 

<div id="searchTrendingNowContainer"></div> 

<div id="mainContainer"> 
    <div id="uiBlur"></div> 
    <div id="uiContainer"> 
     <form id="submitSearchNew"> 
      <img id="magnifierNew" src="icons/mag3.svg"> 
      <input type="text" id="searchBoxNew" autocomplete="off" name="p" tabindex="1"> 
     </form> 
     <div id="searchSuggestContainerNew" class="searchSuggestContainerNew displayNone"></div> 
    </div> 
    <div id="urlHidden"><span id="urlContent"></span></div> 
</div> 

<div id="darkOverlay"></div> 
<div id="pageFooter"> 
    <div id="ownerContainer"> 
     <a id="ownerName" class="credit"></a> 
     <a id="onFlickr" class="credit flickr"></a> 
    </div> 

    <div class="newTopSitesContainer" id="topSites"></div> 

    <div id="urlInfo"></div> 
</div> 

<div class="dropup" id="dropupMenu"> 
     <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 
     </button> 
     <ul class="dropdown-menu options-list"> 
      <li><a id="toggleViewText" class="toggleText unselectable"> </a></li> 
      <li class="divider"></li> 
      <li id="tnDiv" class="displayNone"><a id="toggleTN" class="unselectable"> </a></li> 
      <li id="tnDivider" class="divider displayNone"></li> 
      <li><a id="editButton" class="unselectable"> </a></li> 
      <li class="divider"></li> 
      <li><a id="feedBack" class="feedBackLink unselectable"> </a></li> 
     </ul> 
    </div> 

</body> 
<script src='newtab.js'></script> 
</html>

出典

2016-08-22 Cynthia1992

私は、あなたを理解していないドキュメント添付しますか？それであれば

はそう、例えば画像のためのzインデックスのCSSを使用します。

<div class="base"> <!-- z-index = 1 --> 
<input type="search" class="search" /> <!-- z-index = 2 --> 

<div class="buttons_footer"> <!-- z-index = 2 --> 
<button></button> 
<button></button> 
<button></button> 
..... 
</div> 
</div>

私はノートの

出典

2016-08-22 16:57:57

ハイテクダニエルのおかげを助けるために願っています。 1）あなたが私の添付画像を見ると、（[1]：http://i.stack.imgur.com/MCgmT.jpg）基本的に私はコードGをポップして私のWordpressページにGoogleカスタム検索ボックスを作成することができます私を与える。しかし、私が必要とする画像上でこの検索ボックスをオーバーレイしたいのであれば、私は把握しようとしているトリッキーな部分です。 2）また、マウスに跳ね返るものの下にある丸いボタン（これはオプションのハハです）。最初の要件の任意のアイデアをしてください？ – Cynthia1992

この例のように、画像内にGoogleカスタム検索ボックスを使用して、背景画像ごとに別のページを作成する必要があります。（Googleカスタム検索エンジンでHTMLにポップアップするコードが与えられますが、画像にオーバーレイする方法はどうですか？） – Cynthia1992

画像にz-index 1を追加し、z-index 2を追加するとCSS z-indexを要素に追加します入力要素とボタン、入力とボタン要素が画像上に現れます。 –

答えて

関連する問題