ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಚಿತ್ರ ನಕ್ಷೆಯನ್ನು ಹೇಗೆ ನಿರ್ಮಿಸುವುದು

ಆಯ್ಕೆಗಳನ್ನು

ನಾನು 'ಗೀಕಿ' ಏನನ್ನಾದರೂ ಬಯಸಿದ್ದೇನೆ ಆದ್ದರಿಂದ ನನ್ನ ಬ್ಲಾಗ್‌ನ ಎಲ್ಲಾ ಚಂದಾದಾರಿಕೆ ವಿಧಾನಗಳನ್ನು ಹೊಂದಿರುವ 'ಪಾಕೆಟ್' ಗ್ರಾಫಿಕ್ ಅನ್ನು ನಾನು ನಿರ್ಧರಿಸಿದೆ.

ವೆಬ್ 1.0 ರ ದಿನಗಳಲ್ಲಿ, ಪ್ರತಿ ಗ್ರಾಫಿಕ್‌ನಲ್ಲಿನ ಲಿಂಕ್‌ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಚಿತ್ರವನ್ನು ವಿಭಜಿಸುವ ಮೂಲಕ ಈ ರೀತಿಯ ಲಿಂಕ್‌ಗಳ ಸಂಗ್ರಹವನ್ನು ನಿರ್ಮಿಸಬಹುದು, ನಂತರ ಅದನ್ನು ಟೇಬಲ್‌ನೊಂದಿಗೆ ಒಟ್ಟಿಗೆ ಹೊಲಿಯಲು ಪ್ರಯತ್ನಿಸಬಹುದು. ಇದನ್ನು ಬಳಸುವುದರ ಮೂಲಕವೂ ಸಾಧಿಸಬಹುದು ಚಿತ್ರ ನಕ್ಷೆ ಆದರೆ ಅದಕ್ಕೆ ಸಾಮಾನ್ಯವಾಗಿ ನಿರ್ದೇಶಾಂಕ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸುವ ಸಾಧನ ಬೇಕಾಗುತ್ತದೆ. ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳನ್ನು ಬಳಸುವುದರಿಂದ ಇದು ಒಂದು ಟನ್ ಸುಲಭವಾಗುತ್ತದೆ… ಯಾವುದೇ ವಿಭಜಿಸುವ ಚಿತ್ರಗಳಿಲ್ಲ ಮತ್ತು ನಿಮ್ಮ ನಿರ್ದೇಶಾಂಕ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ಮಿಸಲು ಸಾಧನವನ್ನು ಹುಡುಕುವ ಪ್ರಯತ್ನವಿಲ್ಲ!

  1. ನೀವು ಬಳಸಲು ಬಯಸುವ ನಿಮ್ಮ ಚಿತ್ರವನ್ನು ನಿರ್ಮಿಸಿ. ನೀವು ಈ ಗ್ರಾಫಿಕ್ ಅನ್ನು ಕೆಳಗೆ ಬಳಸಿಕೊಳ್ಳಬಹುದು (ಬಲ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಉಳಿಸಿ):
    ಆಯ್ಕೆಗಳು
  2. ನಿಮ್ಮ ಚಿತ್ರವನ್ನು ನಿಮ್ಮ ಸಿಎಸ್‌ಎಸ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಡೈರೆಕ್ಟರಿಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಿ. ವರ್ಡ್ಪ್ರೆಸ್ನಲ್ಲಿ, ನಿಮ್ಮ ಥೀಮ್ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಇಮೇಜ್ ಫೋಲ್ಡರ್ನಲ್ಲಿ ಇರಿಸುವ ಮೂಲಕ ಇದನ್ನು ಸುಲಭವಾಗಿ ಮಾಡಬಹುದು.
  3. ನಿಮ್ಮ HTML ಅನ್ನು ಸೇರಿಸಿ. ಇದು ಒಳ್ಳೆಯದು ಮತ್ತು ಸರಳವಾಗಿದೆ… ಅದರಲ್ಲಿ ಮೂರು ಲಿಂಕ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಡಿವ್:
    > div id = "subscribe" >> a id = "rss" href = "[ನಿಮ್ಮ ಫೀಡ್ ಲಿಂಕ್]" title = "RSS ನೊಂದಿಗೆ ಚಂದಾದಾರರಾಗಿ" >> span class = "hide"> RSS> / span >> / a >> a id = "email" href = "[ನಿಮ್ಮ ಇಮೇಲ್ ಚಂದಾದಾರರಾಗಿ ಲಿಂಕ್]" title = "ಇಮೇಲ್‌ನೊಂದಿಗೆ ಚಂದಾದಾರರಾಗಿ" >> span class = "hide"> ಇಮೇಲ್> / span >> / a >> ಒಂದು ಐಡಿ = "ಮೊಬೈಲ್" href = "[ನಿಮ್ಮ ಮೊಬೈಲ್ ಲಿಂಕ್]" title = "ಮೊಬೈಲ್ ಆವೃತ್ತಿಯನ್ನು ವೀಕ್ಷಿಸಿ" >> span class = "hide"> ಮೊಬೈಲ್> / span >> / a >> / div>
    
  4. ನಿಮ್ಮ ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ ಅನ್ನು ಸಂಪಾದಿಸಿ. ನೀವು 6 ವಿಭಿನ್ನ ಶೈಲಿಗಳನ್ನು ಸೇರಿಸುತ್ತೀರಿ. ಒಟ್ಟಾರೆ ಡಿವಿಗೆ 1 ಶೈಲಿ, ಟ್ಯಾಗ್‌ಗೆ 1 ಆದ್ದರಿಂದ ಯಾವುದೇ ಪಠ್ಯ ಅಲಂಕಾರವನ್ನು ಪ್ರದರ್ಶಿಸುವುದಿಲ್ಲ, ಪಠ್ಯವನ್ನು ಮರೆಮಾಡಲು 1 ಶೈಲಿ (ಪ್ರವೇಶಕ್ಕಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ) ಮತ್ತು ಪ್ರತಿಯೊಂದು ಲಿಂಕ್‌ಗಳಿಗೆ 1 ಶೈಲಿಯ ವಿವರಣೆ:
    # ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಿ {/ * ಹಿನ್ನೆಲೆ ಇಮೇಜ್ ಬ್ಲಾಕ್ * / ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್; ಅಗಲ: 215px; ಎತ್ತರ: 60 ಪಿಕ್ಸ್; ಹಿನ್ನೆಲೆ: url (images / options.png) ಪುನರಾವರ್ತನೆ ಇಲ್ಲ; ಅಂಚು-ಮೇಲ್ಭಾಗ: 0px; } # ಒಂದು {ಪಠ್ಯ-ಅಲಂಕಾರವನ್ನು ಚಂದಾದಾರರಾಗಿ: ಯಾವುದೂ ಇಲ್ಲ; }. ಮರೆ {ಗೋಚರತೆ: ಮರೆಮಾಡಲಾಗಿದೆ; } #rss {/ * RSS ಲಿಂಕ್ * / ಫ್ಲೋಟ್: ಎಡ; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಅಗಲ: 50 ಪಿಕ್ಸ್; ಎತ್ತರ: 50 ಪಿಕ್ಸ್; ಅಂಚು-ಎಡ: 20 ಪಿಕ್ಸ್; ಅಂಚು-ಮೇಲ್ಭಾಗ: 5 ಪಿಕ್ಸ್; } # ಇಮೇಲ್ {/ * ಇಮೇಲ್ ಲಿಂಕ್ * / ಫ್ಲೋಟ್: ಎಡ; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಅಗಲ: 50 ಪಿಕ್ಸ್; ಎತ್ತರ: 50 ಪಿಕ್ಸ್; ಅಂಚು-ಎಡ: 70 ಪಿಕ್ಸ್; ಅಂಚು-ಮೇಲ್ಭಾಗ: 5 ಪಿಕ್ಸ್; } # ಮೊಬೈಲ್ {/ * ಮೊಬೈಲ್ ಲಿಂಕ್ * / ಫ್ಲೋಟ್: ಎಡ; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಅಗಲ: 50 ಪಿಕ್ಸ್; ಎತ್ತರ: 50 ಪಿಕ್ಸ್; ಅಂಚು-ಎಡ: 130px; ಅಂಚು-ಮೇಲ್ಭಾಗ: 5 ಪಿಕ್ಸ್; }

ಸ್ಥಾನೀಕರಣವು ಉತ್ತಮ ಮತ್ತು ಸರಳವಾಗಿದೆ… ಎತ್ತರ ಮತ್ತು ಅಗಲವನ್ನು ಸೇರಿಸಿ ತದನಂತರ ಚಿತ್ರದ ಎಡಭಾಗದಿಂದ ಎಡ ಅಂಚನ್ನು ಮತ್ತು ಚಿತ್ರದ ಮೇಲಿನ ಬದಿಯಿಂದ ಮೇಲಿನ ಅಂಚನ್ನು ಹೊಂದಿಸಿ!

ಈ “ಹೇಗೆ” ಪೋಸ್ಟ್ ಪ್ರವೇಶಕ್ಕಾಗಿ ಗೀಕ್ಸ್ ಸೆಕ್ಸಿ ಅಂತಿಮ “ಹೇಗೆ” ಸ್ಪರ್ಧೆ! ಒಂದು ಟಿಪ್ಪಣಿ, ಚಿತ್ರ ನಕ್ಷೆಯು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ಬಹುಭುಜಾಕೃತಿಗಳನ್ನು ಹೊಂದಿರಬಹುದು ಎಂಬುದು ನಿಜ, ಆದರೆ ನಾನು ಹೊಂದಿರಬೇಕಾದ ಹಲವಾರು ಸ್ಥಳಗಳನ್ನು ನಾನು ನಿಜವಾಗಿಯೂ ನೋಡಿಲ್ಲ. ಗೀಕ್ಸ್‌ನಲ್ಲಿನ ದೊಡ್ಡ ಓಲ್ ಆರ್ಎಸ್ಎಸ್ ಚಿತ್ರವು ಸೆಕ್ಸಿ ಸೈಡ್‌ಬಾರ್ ಎಂದು ನಾನು ಗಮನಿಸಿದ್ದೇನೆ… ಅದು ಲಿಂಕ್‌ಗೆ ಉತ್ತಮ ಸ್ಥಳವಾಗಿದೆ. 😉

ಸಲಹೆಯೊಂದಿಗೆ ಉತ್ತಮ ಪ್ರವೇಶಕ್ಕಾಗಿ 10/3/2007 ನವೀಕರಿಸಲಾಗಿದೆ ಫಿಲ್!

ಪ್ರಾಯೋಜಕ: ನೀವು ವೆಬ್ ವಿನ್ಯಾಸಕ್ಕೆ ಹೊಸಬರಾಗಿದ್ದರೆ, ನಿಮ್ಮ ಸ್ವಂತ ವೆಬ್ ಸೈಟ್ ಅನ್ನು ಎಚ್ಟಿಎಮ್ಎಲ್ ಮತ್ತು ಸಿಎಸ್ಎಸ್ ಬಳಸಿ ಸರಿಯಾದ ರೀತಿಯಲ್ಲಿ ನಿರ್ಮಿಸಿ, 2 ನೇ ಆವೃತ್ತಿ ಹೊಂದಿರಬೇಕು. ಅನುಸರಿಸಲು ಸುಲಭವಾದ ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ನೀವು ವೆಬ್ ಸೈಟ್ ಅನ್ನು ಹೇಗೆ ಉತ್ತಮ ರೀತಿಯಲ್ಲಿ ನಿರ್ಮಿಸುವುದು ಎಂದು ಕಲಿಯುವಿರಿ - ಅದನ್ನು ನೀವೇ ಮಾಡುವ ಮೂಲಕ!