▲PAGE TOP

2014年5月15日木曜日

ページリンク(前の投稿、ホームなど)の表示を文字/画像に変更または非表示にする

ページリンク(前の投稿、ホームなど)の表示を変更または非表示にする
  • Bloggerダッシュボード > テンプレート > HTMLの編集  > ウィジェットのテンプレートを展開 
  • "Newer Post"と"Older Post"の位置を左右逆する


下のコードになるように変更する

#blog-pager-newer-link {
float: right;
}
#blog-pager-older-link {
float: left;
}
さらに細かい設定をする場合は、http://www.techieblogger.com/2009/06/customize-blogger-navigation-scrip.html (英語サイト)で紹介されています。



■ページリンク(前の投稿、ホームなど)の表示を変更または非表示にする

Bloggerダッシュボード > テンプレート > HTMLの編集 > ”ウィジェットのテンプレートを展開”にチェック

下のコードの赤部分を、表示したい文字(表示したい画像)に変更する
  • newerPagetitle ”次のページに進む”リンクです
  • OlderPageTitle ”前のページに戻る”リンクです
  • homeMsg    ”トップページに戻る”リンクです





  • ←のような画像で表示したい場合は、それぞれのタグ(img src="画像のURL")を入力する。
  • 非表示にしたい場合は、ミドリ文字をすべて消去にする。
  • ///////////////////////////////////////////////////////////////////////
    <div class='blog-pager' id='blog-pager'>
        <b:if cond='data:newerPageUrl'>
          <span id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
          </span>
        </b:if>

        <b:if cond='data:olderPageUrl'>
          <span id='blog-pager-older-link'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
          </span>
        </b:if>

        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

        <b:if cond='data:mobileLinkUrl'>
          <div class='blog-mobile-link'>
            <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
          </div>
        </b:if>

      </div>

    ///////////////////////////////////////////////////////////////////////

    ページナビゲーターの位置を変更する



    1. テンプレート>HTML編集をクリックする
    2. テンプレート内の <b:include name='nextprev'/> を検索して、消去する
    3. 表示させたい場所(以下参照)にタグ(1)を入力して、テンプレートを保存する


    参照元: http://websilog.blogspot.co.il/2011/07/move-older-and-newer-posts-on-blogger.html


    タグ(1)

    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:include name='nextprev'/></b:if>

    表示させたい場所について


    タイトルの上に表示させたい場合は?
    <b:includable id='post' var='post'> の下にタグ(1)を入力する

    タイトルの下に表示させたい場合は?
    <div class='post-header'> の上にタグ(1)を入力する

    投稿記事の下に表示させたい場合は?
    <div class='post-footer'> の上にタグ(1)を入力する

    投稿記事フッター部分に表示させたい場合は?
    <div class='post-footer'> の下にタグ(1)を入力する

    コメントの上に表示させたい場合は?
    <b:includable id='comments' var='post'> の下にタグ(1)を入力する






    2014年5月8日木曜日

    入力フォームで日付をカレンダーで入力する



    1. BLOGGERダッシュボード>テンプレート>HTML編集をクリックする
    2. ]]></b:skin> の下にタグ(1)を入力して保存する
    3. フォーム入力タグ<input type="text" .... >に  id="datepicker"を挿入する(例1)
    4. フォームタグと一緒にスクリプト(1)を入力する
    5. 保存して終了
    さらにカスタマイズする場合の参考サイト> http://jqueryui.com/datepicker/#date-formats

    複数の日付入力フォームを設置する場合は、datepickerに番号つけて重複しないようにする


    タグ(1)
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery.ui.datepicker-ja.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css"/>


    例(1)
    <input maxlength="100" name="ご来店希望日(1)" size="25" type="text" id="datepicker" />
    <input maxlength="100" name="ご来店希望日(2)" size="25" type="text" id="datepicker2" />
    <input maxlength="100" name="ご来店希望日(3)" size="25" type="text" id="datepicker3" />


    スクリプト(1)
     <script>
      $(function() {
        $( "#datepicker" ).datepicker();
      });
      </script>
     <script>
      $(function() {
        $( "#datepicker2" ).datepicker();
      });
      </script>
     <script>
      $(function() {
        $( "#datepicker3" ).datepicker();
      });
      </script>





    2014年5月3日土曜日

    記事一覧をサムネイルとタイトルのみでグリッド表示する



    1. テンプレート>HTML編集をクリックする
    2. テンプレート内の</head>直前にタグ(1)を挿入する
    3. 保存して終了


    青数字でサムネイル写真の大きさを変更できます。
    記事に画像がない場合は、赤文字で指定されたNo-image画像が表示されます。

    参照元: http://helplogger.blogspot.co.il/2014/05/display-blogger-posts-in-grid-view-with-thumbnails.html


    タグ(1)
     <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>//<![CDATA[
    $(document).ready(function() {
        var width         = 200;
        var height        = 170;
        var placeholder    = 'http://3.bp.blogspot.com/-7Ie-cUwxWB4/U2KIRWgvpNI/AAAAAAAAIfU/Mj6qpg5S2fk/s1600/no-thumb.png';
        var margins     = "0px 0px 10px 10px";
        var fitThumb                 = 1;
        var titleTopPadding            = 5;
        var titleBottomPadding        = 8;
        var titleLeftRightPadding    = 5;  
        var titlePadding = titleTopPadding + 'px ' + titleLeftRightPadding + 'px ' + titleBottomPadding + 'px ' + titleLeftRightPadding + 'px';
        $('.post-body').each(function(n, wrapper){
            var wrapper         = $(wrapper);
            var image         = $(wrapper).find('img').first();
            var link         = wrapper.parent().find('h3 a');
            var linkURL         = link.attr('href');
            var linkTitle        = link.text();
            $(link).remove();
            wrapper.empty();
            if (image.attr('src')) {
                var thumbHeight = image.attr('height');
                var thumbWidth = image.attr('width');  
                var thumbParent = $(image).parent();
                wrapper.append(thumbParent);
                if (fitThumb) {
                    image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width + '-c')});
                    image.attr('width',width).attr('height',height);
                } else {
                    image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width)});
                    image.attr('width',width);
                    var changeHeight = (thumbHeight/thumbWidth * width).toFixed(0);
                    image.attr('height',changeHeight);
                }
             
            } else {
                var image = $('<img>').attr('src',placeholder).attr('height',height).attr('width',width);
                var thumbParent = $('<a>').append(image).appendTo(wrapper);
            }
            thumbParent.attr('href',linkURL).css('clear','none').css('margin-left','0').css('margin-right','0').addClass('postThumbnail');
         
            var thumbTitle = $('<div>').prepend(linkTitle).css('padding',titlePadding).css('opacity','0.9').css('filter','alpha(opacity=0.9)').css('width',width).appendTo(thumbParent);
            var ptitleHeight = thumbTitle.height();
            var summary = parseInt(ptitleHeight) + parseInt(titleTopPadding) + parseInt(titleBottomPadding);
            thumbTitle.css('margin-top','-'+summary+'px');            wrapper.css('float','left').css('height',height).css('width',width).css('margin',margins).css('overflow','hidden');
        });
        $('#blog-pager').css('clear','both');
    });
    function hideLightbox() {
        var images = document.getElementsByTagName('img');
        for (var i = 0 ; i < images.length ; ++i) {
            images[i].onmouseover=function() {
                var html = this.parentNode.innerHTML;
                this.parentNode.innerHTML = html;
                this.onmouseover = null;
            };
        }
    }
    if (window.addEventListener) {
        window.addEventListener('load',hideLightbox,undefined);
    } else {
        window.attachEvent('onload',hideLightbox);
    }
    //]]></script>
    <style>
    .post {
    border-bottom: 0 dotted #E6E6E6;
    margin-bottom: 0;
    padding-bottom: 0;
    }
    h2,.post-footer {
    display:none;
    }
    a.postThumbnail div {
    text-decoration: none; color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
    background: rgb(125,126,125); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#7d7e7d&#39;, endColorstr=&#39;#0e0e0e&#39;,GradientType=0 );
    }
    a.postThumbnail:hover div {
    display: block;
    }
    .post-body img {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    }
    .post-body img:hover {
    -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=70)&quot;;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    }
    </style>
    </b:if>

    2014年5月1日木曜日

    画像を使わずに自動的に選んだアイコンが表示されるメニューを作る



    1. HTMLテンプレートの<heaer>....</header>の間にタグ(1)を挿入する
    2. アイコンを表示させる場所に<i class="fa ★★★ fa-fw"></i>を挿入する
    3. ★★★部分を表示させたいアイコンNo.に変更する(サンプルタグ参照)
    4. 保存して終了
    情報元サイト:http://fortawesome.github.io/Font-Awesome/

    アイコンとアイコンNo.の一覧
    http://fortawesome.github.io/Font-Awesome/icons/

    アイコンをカズタマイズ例(大きさや回転など)
    http://fortawesome.github.io/Font-Awesome/examples/

    CSSでアイコン色を変更する
    <style>
    #任意のdiv要素 {
    color: 任意の色 ;
    }
    </style>


    タグ(1)
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">


    サンプルタグA

    <style>
    #google-gadgets a {
    font-size: 14px ;
    color: #ffffff ;
    text-decoration: none ;
    }
    #table-google{
    width: 100% ;
    background-color: #cc3732 ;
    }
    #td-google{
    width: 100% ;
    background-color: #ffffff ;
    }
    </style>
    <p></p>
    <div id="google-gadgets">
    <table id="table-google" cellpadding=1 cellspacing=1>
    <!-- ▼▼ Gmail ▼▼ -->
    <tr><td id="td-google"><table id="table-google" cellpadding=5px><tr><td>
    <a href="https://mail.google.com" target="_blank">
    <i class="fa fa-envelope fa-fw"></i>GMAIL メールを確認する
    </a>
    </td></tr></table></td></tr>
    <!-- ▲▲ Gmail ▲▲ -->
    <!-- ▼▼ Calendar ▼▼ -->
    <tr><td id="td-google"><table id="table-google" cellpadding=5px><tr><td>
    <a href="https://www.google.com/calendar" target="_blank">
    <i class="fa fa-calendar fa-fw"></i>Googleカレンダー
    </a>
    </td></tr></table></td></tr>
    <!-- ▲▲ Calendar ▲▲ -->
    <!-- ▼▼ maps ▼▼ -->
    <tr><td id="td-google"><table id="table-google" cellpadding=5px><tr><td>
    <a href="https://maps.google.co.jp/" target="_blank">
    <i class="fa fa-map-marker fa-fw"></i>Googleマップ
    </a>
    </td></tr></table></td></tr>
    <!-- ▲▲ maps ▲▲ -->
    <!-- ▼▼ drive ▼▼ -->
    <tr><td id="td-google"><table id="table-google" cellpadding=5px><tr><td>
    <a href="https://drive.google.com/" target="_blank">
    <i class="fa fa-cloud-upload fa-fw"></i>Googleドライブ
    </a>
    </td></tr></table></td></tr>
    <!-- ▲▲ drive ▲▲ -->
    </table>
    </div>

    サンプルタグB
    <style>
    #staffsite-gadgets a {
    font-size: 14px ;
    color: #ffffff ;
    text-decoration: none ;
    }
    #table-staffsite{
    width: 100% ;
    background-color: #0078ff ;
    }
    #td-staffsite{
    width: 100% ;
    background-color: #ffffff ;
    }
    #tr-staffsite-title {
    width: 100% ;
    background-color: #1260b7 ;
    }
    #font-staffsite-li {
    font-size: 12px ;
    }
    #table-staffsite-li{
    width: 100% ;
    margin-left: 5px ;
    }
    </style>
    <p></p>
    <div id="staffsite-gadgets">
    <table id="table-staffsite" cellpadding=1 cellspacing=1>
    <tr><td id="td-staffsite">
    <table id="table-staffsite" cellpadding=5px>
    <!-- ▼▼ Website name ▼▼ -->
    <tr id="tr-staffsite-title"><td>
    <a href="http://staffonly.★★★★★★.com">
    <i class="fa fa-bookmark fa-fw"></i>スタッフ専用サイト
    </a>
    </td></tr>
    <!-- ▲▲ Website Name ▲▲ -->
    <tr><td>
    <table id="table-staffsite-li" cellpadding=2>
    <!-- ▼▼ Post new article ▼▼ -->
    <tr><td>
    <a href="https://www.blogger.com/blogger.g?blogID=★★★★★★#editor" target="_blank">
    <i class="fa fa-pencil fa-fw"></i><font id="font-staffsite-li">新しい記事を投稿する</font>
    </a>
    </td></tr>
    <!-- ▲▲ Post new article ▲▲ -->
    <!-- ▼▼ List of all articles ▼▼ -->
    <tr><td>
    <a href="https://www.blogger.com/blogger.g?blogID=★★★★★★#allposts" target="_blank">
    <i class="fa fa-list fa-fw"></i><font id="font-staffsite-li">投稿した記事の一覧を見る</font>
    </a>
    </td></tr>
    <!-- ▲▲ List of all articles ▲▲ -->
    <!-- ▼▼ Add entering staffs ▼▼ -->
    <tr><td>
    <a href="https://www.blogger.com/blogger.g?blogID=★★★★★★#basicsettings" target="_blank">
    <i class="fa fa-user fa-fw"></i><font id="font-staffsite-li">閲覧スタッフを追加/削除する</font>
    </a>
    </td></tr>
    <!-- ▲▲ Add entering staffs ▲▲ -->
    <!-- ▼▼ Setting ▼▼ -->
    <tr><td>
    <a href="https://www.blogger.com/blogger.g?blogID=
    ★★★★★★#overview" target="_blank">
    <i class="fa fa-gear fa-fw"></i><font id="font-staffsite-li">管理ページ</font>
    </a>
    </td></tr>
    <!-- ▲▲ Setting ▲▲ -->
    </table>
    </td></tr>
    </table></td></tr>
    </table>
    </div>











    COMMENT 投稿した内容は「 掲示板 」に掲載されます。
    ペンネーム(必須)

    タイトル

    メールアドレス

    話題にするページ/ウェブサイトのURL
    メッセージ(必須)
    アップロードする画像
    パスワード(必須)