免费分享几个我原创的首页侧边栏模块 New
分享下我自己折腾的自定义模块代码供大家下载，可能某些主题不支持，具体大家自行测试侧边栏发帖按钮代码：
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'); 我要发帖
首页公告框重新美化
#notices { max-width: 800px; margin: 0 auto; padding: 0; } .alert-notice { background: #f8fdf8; border: 1px solid #e5f3e5; border-radius: 6px; padding: 16px; margin: 12px 0; border-left: 3px solid #22c55e; } .alert-notice h2 { color: #14532d; font-weight: 600; font-size: 18px; margin: 0 0 12px 0; } .alert-notice p { color: #166534; font-size: 14px; line-height: 1.5; margin: 8px 0; } .alert-notice a { color: #14532d; text-decoration: none; font-weight: 500; } .alert-notice a:hover { color: #0f3b21; text-decoration: underline; } @media (max-width: 768px) { .alert-notice { padding: 14px; margin: 10px; } } 欢迎加入 Blog do 论坛！ Blog do 论坛是博客建站爱好者的交流平台，我们致力于为大家提供一个开放的交流环境。 Blog do论坛官网：https://www.blog.do/ Blog do网址导航：https://nav.blog.do/ 站长邮箱：admin@blog.do
添加侧边栏友情链接展示框
友情链接 - 美化版 /* 友情链接容器 */ .x.cl { background: #ffffff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); overflow: hidden; margin-bottom: 20px; border: 1px solid rgba(0, 0, 0, 0.05); } /* 标题样式 */ .friendship-title { background: #f8f9fa; color: #333; padding: 12px 16px; margin: 0; font-size: 14px; font-weight: 500; display: flex; align-items: center; position: relative; border-bottom: 1px solid #e9ecef; } .friendship-title::before { content: "🔗"; margin-right: 6px; font-size: 14px; } /* 链接列表 */ .cl.mbm { list-style: none; margin: 0; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; } .cl.mbm li { position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex: 0 0 calc(50% - 3px); } .cl.mbm li a { display: block; padding: 8px 12px; color: #333; text-decoration: none; font-size: 12px; font-weight: 400; position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #f8f9fa; border-radius: 6px; text-align: center; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl.mbm li a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: rgba(0, 153, 101, 0.1); opacity: 0; border-radius: 6px; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; } /* 悬停效果 */ .cl.mbm li:hover { transform: translateY(-2px); } .cl.mbm li:hover a { color: #009965; } .cl.mbm li:hover a::before { opacity: 1; } /* 响应式设计 */ @media (max-width: 768px) { .sidebar-demo { max-width: 100%; margin: 0; } .friendship-title { padding: 10px 12px; font-size: 13px; } .cl.mbm { padding: 8px; } .cl.mbm li a { padding: 6px 8px; font-size: 11px; } } /* 加载动画 */ .x.cl { animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* 深色模式支持 */ @media (prefers-color-scheme: dark) { body { background: #1a1a1a; } .x.cl { background: #2d2d2d; border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } .cl.mbm li a { color: #e0e0e0; } .cl.mbm li:hover a { background: linear-gradient(90deg, rgba(0, 153, 101, 0.15), rgba(0, 153, 101, 0.08)); color: #009965; } .cl.mbm li:not(:last-child)::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); } } 友情链接 {title} 图呢，贴个图比较好
页:
[1]