關於部落格
  • 89583

    累積人氣

  • 3

    今日人氣

    25

    追蹤人氣

美學的問題 移除廣告&橫條&補上管理連結(加強版)

自從天空把播客給強制換style之後,
我對天空只有持續的失望
這次上方捲軸真的讓我有點火了

【新上線】天空工具列  ←おいおい…!?

底下提供一些js跟css 可以恢復部份的視覺美觀
有需要的就拿去擺在自訂欄位裡吧

註:
        拆了橫軸後要怎麼登入/登出/進管理介面?
        請看完最底下說明部份
        增加懶人包,請參考文末的おまけ2
        使用時可直接拿最底下的懶人包直接貼到自訂欄位區
        會比較快

程式碼講解分成三段
每一段有不同功能,搭配起來之後效果絕倫(?)

第一段:隱藏翻頁廣告,隱藏上方工具條,移掉公告/贊助/其他/power by欄
第二段:利用樣版css直接隱藏翻頁廣告&上方工具條 (跟一的部份可並存)
第三段:自動增加增加管理介面連結&下拉選單

第一段
JS&CSS部份 請放在右方自定欄位區
(注意 編輯時請不要開啟自動換行 否則可能會無效或js error)

<script type="text/javascript">

    // 這是QME
    var xl = document.images.length
    for( var qq = 0 ; qq < xl ; qq++){
        if (document.images[qq].src == "http://pics.blog.yam.com/images/add2qme.gif"){
            document.images[qq].style.display = 'none';
        }
    }

// 這邊是 公告區 POWERBY 贊助 其他區
function dshow(){
var dpb = new Array('systemAnnouncebyyam','powerdbyBlock','sponsorAdbyyam','othermessage');
 for(var i = 0 ; i<dpb.length ; i++){
  try{
    if(document.getElementById(dpb[i])){
       var xtmpnode=document.getElementById(dpb[i]);
       xtmpnode.parentNode.removeChild(xtmpnode);
    }
  }catch(e){}
 }
}
dshow(); // 先把公告O掉
function dshow2(){
    if (navigator.appName == "Microsoft Internet Explorer" && document.readyState != "complete") {
        window.setTimeout (function () { dshow2(); } , 200); // IE Here
        return false;
    }else if(navigator.appName != "Microsoft Internet Explorer"){
        YAHOO.util.Event.onDOMReady(function(){dshow();}); // Not IE goes here
    }else{
        dshow();
    }
}
dshow2(); // 利用不同browser特性偵測是否完成 來清掉其他欄位

  try{
      // 翻頁廣告化成光
      document.getElementById('flipPageDiv').style.display = 'none';
  }catch(e){}
  try{
      // 上方橫條
      document.getElementById('navbarb').style.display = 'none';
  }catch(e){}

</script>

<!-- 這個是回復高度邊界設定 -->
<style type="text/css">
#mainFrame,#mainFrame2,#viewPicDiv{ top:0px; }
</style>



第二段

這段是CSS,請加在樣版設定裡面(可貼在最下方即可)
將 navbarb 的display設成none
因先後順序的關係也有效果

CSS語法

#navbarb{
display : none;
}
#flipPageDiv{
display : none;
}


第三段


登入 / 我的管理介面 部份

功能不見了怎辦?

呼呼...可別小看了Javascript ...
既然我們把上面的藏起來了
那我們就自己生一個出來

註:語法有用到偵測是否已登入的部份
來選擇輸出顯示 登入 或是
我的天空/控制介面
連結使用的是JS的document.links跟document.location
會自動偵測使用者ID跟位置 理論上是可以每一頁都通用

一樣放到右方的自定欄位區

(修正版,可將天空的下拉選單抓來自己用XD)

<span id='mycp' style='position:absolute;display:block;'>
<script type="text/javascript">
var isloggedin = false;
    var xl = document.links.length;
        // 自動偵測登入與否
    for( var qq = 0 ; qq < xl ; qq++){
        if ( document.links[qq].rel == "dropmenu4" ){
            document.writeln( '<a href="'+document.links[qq]+'" rel="dropmenu77">我的天空</a> ');
            //document.writeln( '<a href="http://adminblog.yam.com/">管理介面</a>');
            document.writeln( '<a href="http://blog.yam.com/logout.php?refer='+document.location+'">登出</a>');
            isloggedin = true;
            var herelink = document.links[qq].toString();
            break;
        }
    }
    if( !isloggedin){
        document.writeln( "<a href="http://member.yam.com/merge/index.php?cid=blog&url="+document.location+"">登入天空</a>");
        var herelink = "";
    }

YAHOO.util.Event.onDOMReady(function(){
try{
document.getElementById('mainFrame').style.position='static';}catch(e){}
});

// 自動截取使用者ID
if( herelink.lastIndexOf('/')  > 0){
    var myskyid = herelink.substring( herelink.lastIndexOf('/')+1 , herelink.length  );
}else{
    var myskyid = '';
}
</script>
</span>
<div id="dropmenu77" class="dropmenudiv" style="width: 70px;">
<a href="http://adminblog.yam.com/">管理介面</a>
<a href="http://adminblog.yam.com/blog_article.php">發表網誌</a>
<a href="http://adminblog.yam.com/diary_article.php">發表日記</a>
<script type="text/javascript">
document.writeln( '<a href="http://adminblog.yam.com/album_yuiupload.php?func=add_folder&userid='+ myskyid +'&folder=">上傳相片</a>');
</script>
<a href="http://adminblog.yam.com/media_post.php">上傳影音</a>
<a href="http://adminblog.yam.com/msg_index.php">管理留言</a>
</div>
<br />&nbsp;<br />
<script type="text/javascript">
cssdropdown.dropdownindicator = '';
cssdropdown.startchrome("mycp"); // 啟用下拉選單
</script>

<style type="text/css">
/*  下拉選單會用到的STYLE 請自行修改 */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid rgb(61, 70, 97); /* 外框色 */
font-size:12px;
line-height:18px;
z-index:100;
background-color: rgb(20, 24, 34); /* 背景色 */
width: 150px;
visibility: hidden;
}
.dropmenudiv a:hover{ /* 滑鼠移到LINK上的字色 */
color: rgb(107, 119, 153);
background-color: rgb(38, 45, 62); /* 背景色 */
border:none;
}
</style>

這些CODE都是在我個人的Blog上測試正常才釋出
若是使用上會與dom架構或css格式衝突的話 可能需要另行解決
若下拉選單顯示位置不正常的話 因各人blog排版通常都不同
所以不是很好解決 冏

若是不用下拉選單的話
將上方的 "管理介面" 那行  註解拿掉 (註解是前面的雙斜線)
然後 將 cssdropdown.startchrome("mycp");  這行註掉(前面補雙斜線 或是整行拿掉)
來停用下拉選單功能


這些是最基本管理/登出入的功能
效果可參考右上方的Mini CP欄位
想要更多更花俏也可以自行改造~


請各位低調使用

空間在yam底下,站方想改,或是做出更多限制也很簡單

不過,若是yam天空繼續這樣變本加厲下去
俗話說 此處不留爺 自有留爺處
咕狗的BLOGSPOT似乎也不錯


總之 希望站方能多多站在User觀點來做未來的決策

おまけ: 追加移除部份的詳解
http://blog.yam.com/testing321/article/18438548

おまけ2: 超級懶人包XD
        文字檔:here
        Syntax highlighter(展開後可直接點copy或plain text) [ 展開 ]


http://blog.yam.com/testing321/trackback/18367441~

再不會.....就複製下面ㄉ語法貼在css最下方就ok~~
拿掉右上角廣告的語法是:
#flipPageDiv{
display : none;}
相簿設定
標籤設定
相簿狀態