部落格園主題分享-仿FANFOU-小清新主題

你的神明發表於2021-08-13

經過360多分鐘的打磨。精品仿FANFOU部落格園主題橫空出世。。。he tui

展示效果如下：

額好吧，這是一款花裡胡哨的部落格主題。純 css 實現。不外加任何圖片及 js 檔案。本來打算仿 FANFOU的模板，結果發現官方早已不讓註冊了。只能仿了首頁的佈局。效果可以看我的部落格。。。

下面進入主題：

第一步：設定部落格預設皮膚

如上圖所示：這裡預設選用模板 “SimpleMemory”，注意選擇其他模板樣式不會生效；

第二步：勾選模板預設樣式

在頁面定製css選項下勾選禁用模板預設css

第三步：設定自定義樣式

複製下面 css 程式碼，貼上到 “頁面定製輸入框選項下 ”

.navbar, #top_nav, #blogCalendar , #lnkBlogLogo, .blogStats ,#under_post_card1, #cnblogs_c2, #under_post_card2 ,#cnblogs_c1, #blogTitle h2 ,
#sidebar_search,#sidebar_recentcomments,#sidebar_topcommentedposts,.buryit ,#EntryTag,.entrylistDescription
{
    display:none;
}

*, * html * {
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
}

body {
    margin:0px;
    padding:0px;
   background: linear-gradient(40deg, #155263 9%, #155263 43%, #FF6F3C calc(43% + 1px), #FF6F3C 52%, #FF9A3C calc(52% + 1px), #FF9A3C 80%, #FFC93C calc(80% + 1px), #FFC93C 100%);
}

a {
    text-decoration:none;
}
#home {
 width:70%;
 margin:0 auto;
 display: flex;
 flex-direction:column;
}
#header {
    display: flex;
    justify-content: space-between;
    align-items:center;
}

#blogTitle h1 a {
    text-decoration:none;
     color: rgb(13, 0, 77);
    text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12px;
    font-size:30px;
    font-family:"幼圓";
    letter-spacing:8px
}

#navigator {
   background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
  padding:7px 0;
  border-radius: 8px;
  text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p;
}

#navigator ul {
    list-style:none;
    margin:0px;
    padding:0px;
    margin-right: 15px;
}

#navigator ul li {
    text-decoration:none;
    float:left;
    margin-left: 15px;
}


#navigator ul li a{
    text-decoration:none;
    color: rgb(13, 0, 77);
    text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 1
  
}
#main {
    display: flex;
    background: #ffffff;
    border-radius: 8px;
     text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p;
}

#mainContent {
    width:70%;
   padding:20px;
}

.dayTitle,.entrylistTitle,.PostListTitle {
     width:auto;
     background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
     border-radius: 8px;
     padding:5px;
     margin-bottom: 15px;
}
.dayTitle a {
color: #8590a6;
}

.postTitle {
  margin-bottom: 15px;
}

.postTitle2 span{
    color: black;
    font-size: 18px;
}

.postCon,.entrylistPostSummary {
    background:rgba(41, 41, 41, 0.4);
    border-radius: 8px;
    padding:12px;
    font-size: 13px;
}

.c_b_p_desc {
    font-weight: 600;
    color: rgb(255, 255, 255);
    text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12
}

.c_b_p_desc a {
  color: rgb(255, 255, 255);
}

.postDesc, .entrylistItemPostDesc {
    font-size: 12px;
    color: rgba(41, 41, 41, 0.4);
    margin: 10px 0px 20px 0px;
}

.postDesc a,.entrylistItemPostDesc a{
    font-size: 12px;
    color: rgba(41, 41, 41, 0.4);

}

#nav_next_page {
   background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
     font-size: 12px;
     padding:12px;
       border-radius: 8px;
}



#nav_next_page a {
    color: rgb(13, 0, 77);
   
}


#homepage_top_pager .pager a , .forFlow .pager a  {
 color: rgb(13, 0, 77);
 background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
  border:none;  
  padding:4px 10px;
    border-radius: 8px;
}

#homepage_bottom_pager .pager a {
 color: rgb(13, 0, 77);
 background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
  border:none;  
  padding:4px 10px;
    border-radius: 8px;
}

.catListTitle {
     font-size: 18px;
    
    letter-spacing: 3px;
}

#sideBar {
    width:30%;
    background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 1px solid #5EDFFF;
    padding:20px;
}

#footer {
    text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p;
    background: #fff;
    font-size: 12px;
    margin: 1.25em 0;
    padding:10px;
    border-radius: 8px;
    text-align: center;
}

.notice {
    font-size:12px;
    border-radius: 3px;
     
    padding: 13px;
    letter-spacing: 3px;
      background: #8590a6;
    color: rgb(255, 255, 255);
    box-shadow: 5px 1px 5px #888888;
  
}


#profile_block {
    margin-top:15px;
    display: flex;
    flex-wrap:wrap;
    font-size: 11px;
    justify-content:center;
   background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%); background-blend-mode: normal, normal, screen, overlay, normal;
    color: rgb(255, 255, 255);
    text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p;
    padding-top: 80px;
     border-radius: 3px;

}

#profile_block br {
    display: none;
}

#profile_block a {
    margin-right: 10px;
     color: rgb(255, 255, 255);
}

.catListLink ul {
    list-style:none;
    margin:0px;
    padding:0px;
    
    font-size: 12px;
    padding:10px;
    border-radius: 3px;
        letter-spacing: 3px;
  background: linear-gradient(55deg, #212121 0%, #212121 40%, #323232 calc(40% + 1px), #323232 60%, #008F95 calc(60% + 1px), #008F95 70%, #14FFEC calc(70% + 1px), #14FFEC 100%);
   
}

.catListLink ul li a {
    color: #ffffff;a
}

#sidebar_categories ul , #sidebar_toptags ul{
    margin:0px;
    padding:0px;
}

#sidebar_categories ul li , #sidebar_toptags ul li{
background: linear-gradient(65deg, rgb(7, 26, 82) 3%, rgb(7, 26, 82) 40%, rgb(8, 105, 114) calc(40% + 1px), rgb(8, 105, 114) 60%, rgb(23, 185, 120) calc(60% + 1px), rgb(23, 185, 120) 68%, rgb(167, 255, 131) calc(68% + 1px), rgb(167, 255, 131) 100%);
padding:5px;
  border-radius: 3px;
  text-shadow: rgb(13 0 77 / 8%) 0px 1px 2px, rgb(13 0 77 / 8%) 0px 2px 4px, rgb(13 0 77 / 8%) 0px 4px 8px, rgb(13 0 77 / 6%) 0px 6px 12p;
  margin-bottom: 4px;
  list-style-type:none;
}

#sidebar_categories ul li a ,#sidebar_toptags ul li a{
 color: #ffffff;
 font-size: 12px;
}

.post >.postTitle {
    background: linear-gradient(125deg, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
    font-size: 12px;
    padding:12px;
    border-radius: 8px;
}

#green_channel {
    font-size: 12px;
    text-align: right;
        background: #f1f1f1;
    padding:12px;
       border-radius: 8px;
       border:0px;
       width: auto;
}

.blogpost-body-html {
     letter-spacing: 2px;
}


#green_channel #green_channel_digg,#green_channel #green_channel_follow,#green_channel #green_channel_favorite { 
    background:none;
    box-shadow: none;
    border: none;
    color: #323232;
}

#green_channel a:link, #green_channel a:visited, #green_channel a:active {
    color: #515879 !important;
    border: none !important;
    text-shadow: none !important;
    font-weight:400 !important;
}

#BlogPostCategory {
    position: relative;
    top:46px;
    left: 20px;
    width: 200px;
    font-size: 13px;
    color: #515879 ;
}

#BlogPostCategory  a {
 color: #515879 ;
}

#author_profile {
    background: linear-gradient(123deg, #2E99B0 0%, #2E99B0 40%, #FCD77F calc(40% + 1px), #FCD77F 60%, #FF2E4C calc(60% + 1px), #FF2E4C 75%, #1E1548 calc(75% + 1px), #1E1548 100%);
    border-radius: 8px;
    padding: 12px;
    width: auto;
    float: none;
}

.author_avatar {
    border-radius: 20px;
    border: 1px solid #ffffff;
    text-shadow: #14FFEC;
}

.author_profile_info a {
    color: #fff;
}

#div_digg {
    position: relative;
    top:-87px;
    width: auto;
    margin-right: 15px;
    margin-bottom: 0px;
}

.diggit {
    border-radius: 3px;
    text-shadow: #14FFEC;
}

#comment_nav  {
    background: #f1f1f1;
    padding: 12px;
    border-radius: 8px; 
    margin-bottom: 15px;
}

#comment_nav a {
  color: #515879;
  font-size: 10px;
}

#blog-comments-placeholder {
    font-size: 13px;
     color: #515879;
     margin: 10px 0;
      letter-spacing: 2px;

}

#blog-comments-placeholder a{
         color: #515879;
}

.blog_comment_body  {
     background: #f1f1f1;
        padding: 5px 20px;
        margin: 10px;
    border-radius: 8px;
}

.feedbackManage {
    margin-bottom: 10px;
    margin-left: 0px;
}
.feedback_area_title {
    font-size: 18px;
    color: #000;
}

.comment_btn {
    color: rgb(13, 0, 77);
    background: linear-gradient(
125deg
, #ECFCFF 0%, #ECFCFF 40%, #B2FCFF calc(40% + 1px), #B2FCFF 60%, #5EDFFF calc(60% + 1px), #5EDFFF 72%, #3E64FF calc(72% + 1px), #3E64FF 100%);
    border: none;
    padding: 4px 10px;
    border-radius: 8px;
}

.entrylist > .entrylistTitle {
    display: none;
}

.entrylistItemTitle span{
    color: black;
    font-size: 18px;
}

.entrylistPosttitle {
 margin-bottom: 20px;
}

#myposts .postTitl2  {
      margin-bottom: 15px;
}

#myposts .postTitl2 a {
      color: black;
      font-size: 18px;
      margin-bottom: 15px;
}


#myposts .postDesc2 {
    background: #f1f1f1;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
}

第四步：設定公告

<div class="notice"> 網站重構中，若出現樣式問題，請忽略。湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數</div>

複製上述程式碼，到如下圖所示的文字框中。

注意這裡必須加上

<div class="notice">1111</div>

這部分標籤。當然大家也可以取 css 裡自定義想要的樣式。

最後點選 “儲存” 就完成了。

主題比較粗造，趕工出來的，輕噴謝謝！

部落格園主題修改分享 - 過年篇
2023-01-10
部落格園主題&美化
2024-04-05
部落格園SimpleMemory主題美化
2020-08-01
部落格園 SimpleMemory 主題美化
2020-11-29
自定義部落格園主題
2022-06-15
部落格園主題折騰記
2024-03-09
部落格園自用主題美化 - Light
2020-06-12
你要的部落格園主題都有！！！
2020-05-19
部落格園主題美化（僅相容 Markdown）
2022-07-11
部落格園主題樣式更改總結
2022-03-24
部落格園主題美化中BUG修復方法
2022-03-27
部落格園主題——atum2.0升級釋出啦
2021-03-16
高自定義的部落格園主題 Lite v1.4.7
2023-02-27
Go 部落格平臺 Pipe 1.8.1 釋出，新主題 Fara
2018-09-12
Go
仿盧鬆鬆WordPress個人部落格主題Luss V1.22
2022-02-19
VuePress部落格美化之reco主題
2020-07-28
Vue
一款好看的部落格園主題皮膚-Rebuild From Silence Theme
2022-05-31
Rebuild
解決部落格園md格式部落格的下載與上傳問題
2024-03-10
GithubPages+Hexo部落格主題Yilia
2019-02-19
GithubHexo
WordPress主題 Hankin v2.0.1部落格主題模板
2022-02-20
使用next主題配置部落格基本資訊
2018-03-05
部落格園背景-主頁banner圖片，已設定好卻載入不出來問題
2022-03-17
部落格園的部落格中插入公式
2018-01-20
公式
還在美化部落格嗎？試試一鍵更換部落格主題吧！
2019-07-22
ElasticSearch 【仿】部落格園找找看頁面搜尋實現
2017-02-22
Elasticsearch
【hexo】一個好看的個人部落格主題
2018-12-20
Hexo
hexo主題更換以及怎麼寫部落格
2018-07-23
Hexo
用Hexo主題next做了一個部落格！
2020-12-15
Hexo
如何處理CSDN部落格主頁404問題
2020-10-21
Hexo部落格（Snail主題）搭建回顧概覽
2022-01-29
HexoAI
初入部落格園
2024-04-09
部落格園美化教程
2024-04-10
新主題-songup
2019-05-11
一款完美版niRvana 4.5.3輕擬物部落格主題 WordPress主題
2020-10-14
部落格園皮膚-我的部落格園皮膚設定教程
2019-05-09
自定義部落格園部落格的背景圖片
2021-02-18
初學者如何在部落格園釋出部落格
2016-03-04
GitHub + Hexo搭建自己部落格(二) Next主題配置
2019-02-20
GithubHexo

部落格園主題分享-仿FANFOU-小清新主題

第一步：設定 部落格預設 皮膚

第二步：勾選模板預設樣式

第四步：設定公告

相關文章

第一步：設定部落格預設皮膚