TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä työkaluvinkki Weebly -sivustoon?

4

Weebly tarjoaa paitsi mahdollisuuden rakentaa sivustosi muutamassa minuutissa, mutta tarjoaa myös lukuisia räätälöintimahdollisuuksia haluamiesi lisäominaisuuksien lisäämiseksi. Pääsy Weeblyn menestykseen on se, että ilmaiset käyttäjät voivat muokata lähde -CSS- ja HTML -koodia. Olemme jo kirjoittaneet paljon vinkkejä ja temppuja sekä widgettejä Weebly -sivustosi ammattimaisuuden parantamiseksi. Ja tässä artikkelissa jatkamme widget -sarjaa työkaluvihje -widgetillä.

Kuinka lisätä työkaluvinkki Weebly -sivustoon?

Työkaluvihje on ponnahdusikkuna, joka tulee näkyviin, kun hiiri on kohdistettuna tietyn termin tai ohjekuvakkeen päälle. Mobiililaitteessa ulkonäkö ja työkaluvihjeen katoaminen ovat kosketustapahtumia tai ne voidaan poistaa kokonaan käytöstä. Työkaluvihjeitä voidaan käyttää monilla hyödyllisillä tavoilla:

  • Lisää lyhenne, synonyymit ja akronyymit.
  • Esittele yksi tuotteistasi ja linkitä työkaluvihje termisivulle.
  • Sijoita mainos tai kumppanilinkit työkaluvihjeen sisälle.
  • Näytä linkitetylle termille liittyvä kuva.
  • Aseta käännetty sana toiselle kielelle.
  • Anna lisätietoja termistä.

Työkaluvihje on yksi niistä ominaisuuksista, joita useimmat halusit lisätä Weebly -sivustoosi tarjotaksesi lisätietoja tietystä sisällöstä. Voit lisätä työkaluvihjeitä sisältöösi monilla tavoilla:

  • HTML -otsikkotunnisteen käyttäminen.
  • Yksinkertaisen CSS: n käyttäminen.
  • Edistyneen CSS: n käyttäminen.

Tässä artikkelissa kerromme, kuinka työkaluvinkki lisätään Weebly -sivustoon yksinkertaisella HTML- ja CSS -koodilla. On myös mahdollista lisätä työkaluvihjeitä käyttämällä komentosarjoja, joita emme käsittele tässä opetusohjelmassa.

Työkaluvihjeen lisääminen HTML -otsikkotunnisteella

Yksinkertaisin tapa lisätä työkaluvinkki mihin tahansa sisältösi termiin on käyttää otsikkotunnistetta. Työkaluvihjeen laatikko perustuu selaimen oletustyyliin, eikä sinun tarvitse lisätä CSS: ää tähän. Alla on esimerkki työkaluvihjeen lisäämisestä Otsikkotunnisteella. Siirrä hiiri korostetun sisällön päälle nähdäksesi työkaluvihjeen.

siirrä hiiri tänne

Käytä Weebly -editorissa Upota koodi -elementtiä lisätäksesi sisällön otsikkotunnisteen kanssa työkaluvihjeen lisäämiseksi. Alla on esimerkki Otsikkotunnisteen käyttämisestä Span -elementin sisällä:

This is a simple tooltip and <span title="Tooltip with Title tag">move your mouse over here </span>to see it in action.

Työkaluvihjeiden laatikon mukauttaminen CSS: n avulla

Yllä oleva menetelmä on hyvin yksinkertainen eikä tarpeeksi houkutteleva. Voit lisätä mukautetun työkaluvinkkiruudun CSS: n avulla varmistaaksesi, että se näyttää houkuttelevammalta.

Vie tämä hiiren osoitin nähdäksesi tämän työkaluvihjeen mukautetulla CSS -koodilla

Yllä olevan työkaluvihjeen HTML -koodi on seuraava:

<p class="demo" data-tool-tip="Tooltip with custom CSS">Move your mouse over to see this tooltip with custom CSS code</p>

Ja CSS on seuraavanlainen:

<style> .demo, .demo p { margin: 4em 0; text-align: center; } [data-tool-tip] { position: relative; z-index: 2; cursor: pointer; } [data-tool-tip]:before, [data-tool-tip]:after { visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; pointer-events: none; } [data-tool-tip]:before { position: absolute; bottom: 150%; left: 50%; margin-bottom: 5px; margin-left: -80px; padding: 7px; width: 160px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #000; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tool-tip); text-align: center; font-size: 14px; line-height: 1.2; } [data-tool-tip]:after { position: absolute; bottom: 150%; left: 50%; margin-left: -5px; width: 0; border-top: 5px solid #000; border-top: 5px solid hsla(0, 0%, 20%, 0.9); border-right: 5px solid transparent; border-left: 5px solid transparent; content: " "; font-size: 0; line-height: 0; } [data-tool-tip]:hover:before, [data-tool-tip]:hover:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } </style>

Työkaluvinkit Advanced CSS: n avulla

Työkaluvihjeen lisääminen tiettyyn termiin ei aina ole välttämätöntä; suurimman osan ajasta voit luoda lisäohjeen (yleensä kysymysmerkkisymbolin), joka antaa lisää selitystä. Tämä edellyttää edistyneen CSS: n käyttöä työkaluvinkkiruudun mukauttamiseen, ja tässä tarjoamme kolme tapaa luoda tällainen työkaluvinkki, joka sisältää yksinkertaista tekstiä, HTML -sisältöä ja kuvan.

Työkaluvihjeen lisääminen yksinkertaisella tekstillä

Alla on yksinkertainen työkaluvihje, joka näkyy hiiren kohdistimessa ja katoaa, kun hiiri siirretään pois. Tämä sisältää vain tekstin ja laatikko on mukautettu CSS -koodilla.

Työkaluvinkki HTML -sisällöllä

Entä jos haluat lisätä linkkejä tai muuta HTML -sisältöä työkaluvihjeeseen? Katso alla oleva esittely ja voit lisätä työkaluvihjeeseen HTML -tunnisteita, kuten linkin, lihavoidun jne.

Kuva työkaluvihjeen sisällä

Kolmas tapaus on lisätä kuva työkaluvihjeeseen ja tarkistaa alla oleva demo, joka näyttää kuvan työkaluvinkkiruudussa.

Kaikkien edellä mainittujen työkaluvinkkien CSS on sama kuin alla:

<style> /* content box */ #tool_tip{ background-color: rgba(128, 128, 128, 0.07); border-radius: 4px; padding: 40px 40px 10px 30px; max-width: 600px; position: relative; margin: 0 auto; /* font-size: 18px; - use only if required /* line-height: 28px; - use only if required */ } /* Tooltip */ .help-tip{ position: absolute; top: 18px; right: 18px; text-align: center; background-color: #4F798E; border-radius: 50%; width: 24px; height: 24px; line-height: 26px; cursor: default; } .help-tip:before{ content:'?'; font-weight: bold; color:#fff; } .help-tip:hover p{ display:block; transform-origin: 100% 0%; -webkit-animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out; } .help-tip p{ display: none; text-align: left; background-color: #1E2021; padding: 20px; width: 300px; position: absolute; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); right: -4px; color: #FFF; font-size: 13px; /* Change the font size inside tooltip */ line-height: 1.4; } .help-tip p:before{ position: absolute; content: ''; width:0; height: 0; border:6px solid transparent; border-bottom-color:#1E2021; right:10px; top:-12px; } .help-tip p:after{ width:100%; height:40px; content:''; position: absolute; top:-40px; left:0; } @-webkit-keyframes fadeIn { 0% { opacity:0; transform: scale(0.6); } 100% { opacity:100%; transform: scale(1); } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:100%; } } /* Adjust tooltip size on mobile devices */ @media screen and (max-width: 480px) { .help-tip p{ width: 200px; } } </style>

HTML -koodin kaikki kolme työkaluvinkkiä ovat alla:

<!-- HTML Code for Tooltip --> <!-- Text Tooltip--> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip appears on mouse hovering.</p> </div> <p>This is a simple tooltip with just text display on hovering. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with HTML Content --> <div id="tool_tip"> <div class="help-tip"> <p>This is a tooltip with <b>HTML tags!</b> inside. <a href="https://www.webnots.com/">Here is a link!</a> You can insert any <i>HTML tag!</i></p> </div> <p>This tooltip has HTML tags inside. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div> <!-- Tooltip with Image inside --> <div id="tool_tip"> <div class="help-tip"> <p>This tooltip has a picture too! < /br>< /br></p><p><img data-src="https://img.webnots.com/2015/06/Weebly-Site-Building.png" width="300" /></p> </div> <p>Also include a showcasing image inside the tooltip. Check it!</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius.</p> </div>

Voit kopioida / liittää tähän esittelyyn käytetyn CSS- ja HTML -sisällön ja muokata tarpeidesi mukaan. Korvaa linkki ja kuvan URL -osoite omalla.

CSS: n ja HTML: n lisääminen Weebly -sivustoon

CSS: n voi lisätä Weeblyyn kahdella tavalla :

  • Lisää se kohtaan "main.less", niin voit käyttää tyylejä koko sivustossasi.
  • Lisää se tietyn sivun Otsikkokoodi -osioon, jotta CSS toimii vain kyseisellä sivulla.

Kuinka lisätä työkaluvinkki Weebly -sivustoon?

Lisää otsikkokoodi sivulle

Mukautetun HTML -koodin lisääminen

Työkaluvihjeen HTML -osa on sijoitettava sisältöalueellesi, johon haluat lisätä työkaluvinkin käyttämällä Upota koodi -elementtiä.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja