部落格園主題分享-仿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
部落格園主題美化
2024-08-28
修改部落格園主題
2024-10-28
仿寫部落格園主頁
2020-07-15
部落格園SimpleMemory主題美化
2020-08-01
部落格園主題設定
2024-08-07
部落格園主題美化教程
2024-06-08
部落格園美化-Awescnb主題
2024-11-03
自定義部落格園主題
2022-06-15
部落格園 SimpleMemory 主題美化
2020-11-29
部落格園主題折騰記
2024-03-09
部落格園自用主題美化 - Light
2020-06-12
部落格園 geek 主題備份
2024-11-26
你要的部落格園主題都有！！！
2020-05-19
部落格園主題美化（僅相容 Markdown）
2022-07-11
部落格園主題樣式更改總結
2022-03-24
部落格園主題美化中BUG修復方法
2022-03-27
高自定義的部落格園主題 Lite v1.4.7
2023-02-27
部落格園主題——atum2.0升級釋出啦
2021-03-16
Go 部落格平臺 Pipe 1.8.1 釋出，新主題 Fara
2018-09-12
Go
仿盧鬆鬆WordPress個人部落格主題Luss V1.22
2022-02-19
部落格園使用小技巧
2024-05-03
Less is richness，基於less is more的部落格園寬屏主題魔改
2024-08-12
一款好看的部落格園主題皮膚-Rebuild From Silence Theme
2022-05-31
Rebuild
VuePress部落格美化之reco主題
2020-07-28
Vue
GithubPages+Hexo部落格主題Yilia
2019-02-19
GithubHexo
WordPress主題 Hankin v2.0.1部落格主題模板
2022-02-20
搭建部落格 (Hexo + github + butterfly主題)
2024-06-09
HexoGithub
解決部落格園md格式部落格的下載與上傳問題
2024-03-10
精神股東淺談部落格園盈利的問題
2024-10-23
使用next主題配置部落格基本資訊
2018-03-05
關於 CLOI 頭像&部落格主題徵集
2024-07-17
用Hexo主題next做了一個部落格！
2020-12-15
Hexo
部落格園背景-主頁banner圖片，已設定好卻載入不出來問題
2022-03-17
ESP8266 部落格園小電視
2021-09-18
新主題-songup
2019-05-11
部落格園，部落格園，念念不忘，必有迴響
2024-07-29

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

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

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

第四步：設定公告

相關文章

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