分類
標籤
.env AI Arc Arm Astro BigQuery btop Certbot Chrome CICD Cookie CORS CSS cURL DataTables defineExpose DevOps Docker Draggable Fetch API Gamania Git GitLab Google Calendar Google Cloud Summit Google Tag Manager GSAP HTML iCal inject JavaScript Laravel Less LINE Llama 3 Masonry Meta Nginx Nginx UI O(log n) Ollama OpenSSL Oracle OrbStack PHP Pinia Pixel Postman provide Proxyman Raycast requestAnimationFrame script setup Server Session Sitemap Socialite SSL TablePlus Termius Valet Vertex AI Visual Studio Code Vite Vue 3 Vue2 Vue3 Vuex Warp Webpack Yahoo Calendar Zeabur 二分搜尋 元件溝通 前端開發 動畫效果 峰值體驗 廣告 性能優化 打包 推薦系統 搜尋 時間複雜度 演算法 瀑布流排版 父子元件 環境變數 程式碼複製按鈕 系統監控 網站地圖 網頁開發 自動化部署 螢幕刷新率 語言模型 資訊檢索 跨域請求 轉化率 開發工具 陣列 電商 電子商務
380 字
2 分鐘
網頁內文中嵌入廣告的功能
個人開發的 InnerAd,在網頁中嵌入內文廣告的功能。
InnerAd 通常被稱為「飛天魔毯」的廣告樣式,它可以在使用者瀏覽文章時,切開文章顯示出來廣告的效果,並支持響應式網頁設計(RWD)。
使用 InnerAd
首先,在網頁想置入廣告的位置中添加 InnerAd 的 HTML 元素,這是定位用的。元素的 id 屬性應該設置為 “innerAd”,並包含你想要顯示的廣告內容(圖片)。目前限制每個頁面只能有一個 InnerAd 元素。
以下是一個範例程式碼,使用一個包含圖片的連結作為廣告內容:
<div id="innerAd">
<a href="https://laplusda.com" target="_blank" rel="noopener">
<img src="https://fakeimg.pl/300x600/?retina=1&text=300x600&font=noto" />
</a>
</div>
你可以根據你的需求自定義廣告內容。
接下來,你需要在你的網頁中引入 InnerAd 的 JavaScript 檔案。你可以將以下程式碼放在你的網頁中,以引入 InnerAd 的 JavaScript 檔案:
<script type="text/javascript" rel="preload" as="script" src="https://scripts.laplusda.com/js/innerAd.js"></script>
這樣,就完成了 InnerAd 的設置。當使用者瀏覽網頁時,InnerAd 將根據程式碼的位置切開文章進行顯示。它會在瀏覽器視窗大小改變時自動調整大小和位置,以確保畫面正常。如果有任何其他問題,請隨時告訴我。
請注意,本文章僅用於展示 InnerAd 的功能,如果你想要實際使用 InnerAd,請聯繫我以獲取授權和相關資訊。