Yadda Ake Gina Tag Tag Yankuna Sama da Hoton Baya Ta Amfani da CSS
A zamanin Gidan Yanar Gizo 1.0, tarin hanyoyin haɗin kai ana iya gina su ta hanyar raba hotonku tare da mahaɗa akan kowane hoto, sannan ƙoƙarin dinke shi duka tare da tebur. Hakanan za'a iya aiwatar da shi ta hanyar amfani da taswirar hoto amma wannan yawanci yana buƙatar kayan aiki don gina tsarin daidaitawa.
Amfani da Cascading Style Sheets (CSS) ya sa wannan ton ya fi sauƙi… babu hotuna masu ɓoyewa kuma babu ƙoƙarin neman kayan aiki don gina tsarin haɗin gwiwar ku! Kuna kawai ƙara hoton bangon waya zuwa div sannan ku yi amfani da cikakken matsayi don tantance faɗi da tsayin kowane yanki da kuke son haɗawa.
- Gina hoton da kuke son amfani da shi. Kuna iya amfani da wannan hoton da ke ƙasa (danna dama kuma ku adana don saukewa)
- Loda hotonku zuwa kundin adireshi wanda yake da dangantaka da CSS ɗinku. A cikin WordPress, ana iya yin wannan mafi sauƙi ta hanyar sanya shi a cikin babban fayil ɗin hoto a cikin jigon takenku.
- Sanya HTML dinka. Yana da kyau kuma mai sauki… div tare da hanyoyi guda uku a ciki:
<div id="subscribe">
<a id="rss" href="[your feed link]" title="Subscribe with RSS"><span class="hide">RSS</span></a>
<a id="email" href="[your email subscribe link]" title="Subscribe with Email"><span class="hide">Email</span></a>
<a id="mobile" href="[your mobile link]" title="View Mobile Version"><span class="hide">Mobile</span></a>
</div>
- Shirya Salon Cascading ɗin ku (CSS). Za ku ƙara salo daban-daban guda 6. Salo 1 don div gabaɗaya, 1 don alamar anga don haka baya nuna kowane kayan ado na rubutu, salo 1 don ɓoye rubutun (an yi amfani da shi don samun dama), da ƙayyadaddun salon 1 don kowane mahaɗin:
#subscribe { /* background image block */
display: block;
width: 215px;
height: 60px;
background: url(https://martech.zone/wp-content/uploads/2007/10/options.png) no-repeat;
margin-top: 0px; }
#subscribe a { text-decoration:none; }
.hide { visibility:hidden; }
#rss { /* RSS Link */
float: left;
position:absolute;
width: 50px;
height: 50px;
margin-left: 20px;
margin-top: 5px; }
#email { /* Email Link */
float: left;
position:absolute;
width: 50px;
height: 50px;
margin-left: 80px;
margin-top: 5px; }
#mobile { /* Mobile Link */
float: left;
position:absolute;
width : 50px;
height: 50px;
margin-left: 150px;
margin-top: 5px; }
Matsayi mai kyau ne kuma mai sauki… kara tsayi da fadi sannan kuma saita gefen hagu daga gefen hagu na hoton, da kuma saman gefe daga saman hoton!
An sabunta 10/3/2007 don ingantacciyar hanya tare da shawarar Phil!