Menampilkan Static Page Sporty Magazine 2 Template

Menampilkan Static Page / Halaman pada Sporty Magazine 2 Template. Sporty Magazine 2 karya Herdiansyah Hamzah, merupakan salah satu template yang banyak digunakan baik di dalam maupun luar negeri. Tampilan template ini memang sangat sporty dan hampir menyerupai tampilan nbcsport.msnbc.com.

Akantetapi banyak keluhan pengguna template ini, bahwa halaman / static page tidak tampil pada template Sporty Magazine 2 ini, yang muncul hanya judul dan widget pinggir dan bawah.

Bagi Anda yang sudah menggunakan template ini, dan ingin menampilkan static page, silahkan ikuti langkah-langkah di bawah ini. Memang sedikit ribet sob, tapi hasilnya Insya Allah memuaskan.

DEMO PAGE


Menampilkan Static Page pada Sporty Magazine 2

1. Pastikan backup dulu template anda, takut terjadi kesalahan
2. Centang Expand Template Widget
3. Temukan kode dibawah ini
Spoiler Kode:
<b:includable id='post' var='post'>
  <div class='post hentry'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='post-timestamp'><data:post.timestamp/></span>
</b:if>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

    <div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:8px 0px;margin:4px 0px;width:100%;float:left;height:20px;border-bottom:2px solid #D8B60A;'>
<div style='float:right;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='borneotemplates' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:right;padding:1px 0 0 10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:right;padding:3px 0;font:normal 12px Arial;'>
Share this Article on :
</div><div style='clear: both;'/>
</div>
</b:if>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
            </b:if>
          </b:if>
        </b:if>
      </span> <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> </div>

      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

      <div class='post-footer-line post-footer-line-3'><span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>
    </div>
  </div>

ganti dengan
Spoiler Kode:
<b:includable id='post' var='post'>
  <div class='post hentry'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<span class='post-timestamp'><data:post.timestamp/></span>
</b:if>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

    <div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

<b:if cond='data:post.dateHeader'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<h2 class='date-header'><data:post.dateHeader/></h2>
<b:else/>
<h2 class='date-header'>
<script>document.write(ultimaFecha);</script>
</h2>
</b:if>

    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
     <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:8px 0px;margin:4px 0px;width:100%;float:left;height:20px;border-bottom:2px solid #D8B60A;'>
<div style='float:right;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='kangismetdotnet' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:right;padding:1px 0 0 10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:right;padding:3px 0;font:normal 12px Arial;'>
Share this Article on :
</div><div style='clear: both;'/>
</div>
</b:if>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span> <span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
            </b:if>
          </b:if>
        </b:if>
      </span> <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> </div>

      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

      <div class='post-footer-line post-footer-line-3'><span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>
    </div>
  </div>


4. Tambahkan kode ini sebelum </head>
Spoiler Kode:
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#main2-wrapper,#main3-wrapper, .post-timestamp, .date-header {display:none;}
#main-wrapper,#main-page{width: 620px; float:left ; margin: 0 auto;}
.post{border:1px solid $bordercolor;margin:.1em 0em;padding:10px 0}
.post h3{font-family:Arial, sans-serif;font-size:200%;font-weight:normal;line-height:1.2em;color:$titlecolor;margin:.25em 0 0;padding:0 0 4px}
.post h3 a,.post h3 a:visited,.post h3 strong{display:block;text-decoration:none;color:$titlecolor;font-weight:700}
.post h3 strong,.post h3 a:hover{color:$textcolor}
.post-body{border-top:2px solid #D8B60A;padding-top:12px;line-height:1.4em;margin:1em 0 .75em}
.post-footer{display:none}
#featured{display:none}
</style>
</b:if>

5. temukan kode dibawah ini (di bawah ]]></b:skin>)
Spoiler Kode:
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-wrapper{width:310px;padding-left:0px;}
h2.date-header, .post-body, .post-footer, .feed-links {display:none}
.post h3 {font-size:13px;margin:0 0 0 90px;padding:2px 10px 2px 0px;font-weight:bold;line-height:1.3em;position:relative;}
.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold}
.post h3 strong, .post h3 a:hover {color:#FF8000;}
.post {margin:0px;border-bottom:1px dotted #ccc;padding:0px;}
#blog-pager {text-align: left;margin:0px;padding:5px 1px 8px 1px;line-height:1.4em;}
.post-timestamp{float:left;width:70px;padding:3px 10px 3px 5px;font:bold 12px Arial;color:#888;}
</b:if>
</style>

ganti dengan
Spoiler Kode:
<style type='text/css'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-wrapper{width:310px;padding-left:0px;}
h2.date-header,.post-footer, .feed-links {display:none}
.post-body {display:none}
.post h3 {font-size:13px;margin:0 0 0 90px;padding:2px 10px 2px 0px;font-weight:bold;line-height:1.3em;position:relative;}
.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold}
.post h3 strong, .post h3 a:hover {color:#FF8000;}
.post {margin:0px;border-bottom:1px dotted #ccc;padding:0px;}
#blog-pager {text-align: left;margin:0px;padding:5px 1px 8px 1px;line-height:1.4em;}
.post-timestamp{float:left;width:70px;padding:3px 10px 3px 5px;font:bold 12px Arial;color:#888;}
</b:if>
</b:if>
</style>

Download Sporty Magazine 2 Modifikasi

Bagi rekan-rekan yang malas edit template, saya sudah sediakan template Sporty Magazine 2 Modified, yakni sudah saya modifikasi di beberapa tempat, diantaranya

1. Halaman Statis
2. Slider otomatis, tidak pasang satu per satu
3. Penambahan Threaded Comments
4. Perubahan Judul Sidebar
5. Pemangkasan snippet pada Popular Posts
6. Sedikit perubahan ukuran huruf

sporty magazine 2


Tutorial Instalasi

Untuk installasi, sebenarnya tidak jauh berbeda dengan tutorial di BorneoTemplates. Hanya saja pengaturan pada slider yang berbeda

Slider

Untuk memasang slider, tambahkan Gadget HTM/JavaScript dan masukan kode ini
<div id='featured'>
<div id='featured'>
<ul class="ui-tabs-nav">
<script>
document.write("<script src=\"/feeds/posts/default/-/featured?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/featured?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</div>
ganti teks yang berwarna merah dengan label yang akan dimunculkan di slider

Label Terpilih

Untuk memunculkan laber terpilih seperti Moto GP News, Football News dll, tambahkan kode dibawah ini pada widget HTML/JavaScript
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Borneo?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

ganti kode yang berwarna biru (3) dengan jumlah postingan yang dikehendaki, ganti warna merah (60) untuk merubah jumlah karakter.

Kalau masih ada pertanyaan seputar Sporty Magazine 2 silahkan share sob...

Disqus Comments