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...

48 komentar

wew kang,ini yang mungkin bawah gue cari2 nih..

support lewat komentar kang,

sukses terus kang, salam persahabatan !

:D

Balas

ahai,,dulu pernah pakek template ini kang, masih banyak yang perlu di benerin akhirnya saya ganti aja, eh ini malah udah ada tutorial benerinya,,hhuuh

Balas

thanks supportnya sob... :)

Balas

tutorialnya lambat ya....
ini juga ada request soalnya :)

Balas

Keren banget kang template na setelah di modif.
Kolom komennya kayk punya akang gini gak setelah di modif?
Jadi pengen ganti nih :)

Balas

Beda sedikit sob, ga disamain :)
liat aja demonya

Balas

Thanks Mas, saya menemukan solusinya disini, sayang skali mas herdiansyah gak mereplay kita-2 pengguna tamplatenya...
Oya mas, saya mau menambahkan kolom lagi dibawah postingan yang bisa untuk iklan ukuran 728x90 bagaimana caranya ya. Memang ada di atas footer tapi saya mau tambah satu lagi diatasnya. kolom-kolom rubrikasi itu...mhn dijawab geh blog saya : www.tabayyunews.com

Balas

Kalau via Tambah gadget gimana? kan bisa...

Balas

kang izin pake ah,, kayanya mantap, soalnya ada pembing2 nya.. mhon pencerahan kang kalau ada jaln sesat, hehehe..

Balas

kang kodenya koq ga bisa ya muncul keterangan begini :

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "b:includable" must be terminated by the matching end-tag "".
Error 500

maklum newbi

Balas

Kan saya sedang nyoba neh tampilkan slider otomatisnya kok gak bisa muncul slider contentnya ya? akang bisa liatin saya www.tabayyunews.com. Itu sudah pake Tamplate Modified di web ini

Balas

Saya liat sudah muncul sob, untuk slider sudah saya edit.. lihat tutorial di atas

Balas

Gak bisa kang, saya coba disini www.mediatabayyun.blogspot.com : konten kecilnya aja yang bisa slider besar gak bisa.

Balas

Kang Ismet, boleh minta tolong gak?.
Tolong editin templte ini jadi 2 kolom, buat jadi halaman post dan sidebar kanan aja. Kalo footernya biarin gitu aja...
Kirim ke email aja kang edzar.alhamdany@gmail.com.

Balas

Wah, trims sudah membantu. Maklum lama ngk wara-wiri di dunia blogging. Jadi ngk sempat update.

Balas

tak apa kang,,untuk yang sedang memakaitemplate ini pasti bermanfaat banget ini

Balas

Bookmark dulu kang.. besok di oprek :D

Balas

Wah, empu-nya template muncul nih... membantu yang lain aja sob

Balas

Nanti kalau sempet sob.. :)

Balas

Coba silahkan ulangi lagi...

Balas

Mantep kang dah di coba.
tapi Saya ganti tempate lagi kang :D
Soalnya berat banget template ini.. hehheee..
Saya pake yang simple aja deh ;D

Balas

klo mau ngerubah news update gmn kang ??

Balas

Template nya keren Kang..
cuma di aku kok gak keluar gambar di slider nya yah? (gambar gede yg sebelah kiri kang, kalo gambar2 di kanannya bisa, alhamdulillah)
trus label terpilihnya kok gak mau keluar juga kang ?
kira2 salah nya dimana ya kang? mohon pencerahaannya..
:)

Balas

kang cara menghilangkan thumbnail post menjadi full page post di bawah slider gimana cara nya bantu donkkkkkkk

Balas

satu algi bang slider picture koq ndak bisa jalan..?? yang jalan hanya yang gambar yang kecil?? solusi nya kang thanks u

Balas

Iya Mas .... tolong donk slidernya dibenerin, gak bisa jalan nih. Padahal demen banget sama template ini :(

Balas

untuk menambah Sub menu tingkat gmna gan? tolong htmlnya dishare dunk..?

Balas

mohon bantuannya kang, gambar slider yang besar kok gak keluar ya kang? tolong bantu dong

Balas

kang kalo mau pake slider otomatisnya aja gmn kang, uda ane coba bwt widgetnya tapi koq ga nongol? ane pake template yg lama bukan yang editan akang

Balas

keren sih, tapi loadingnya berat

Balas

background headernya bisa di ganti warnanya gak kang? caranya gmn ya...

Balas

saya sedang mencoba templatenya tapi kenapa gambar besarnya tidak muncul ya?

Balas

di cari2 tutornya ada di sini...waah hatur tq gan..mnta ijin donlot :D

Balas

keren juga ya, gimana sih kang bikin templete? hee

Balas

waduh... kepanjangan kalau dijelasin :)

Balas

Wah kaya nya yang ini ada slider di template yah @Kang..? tapi di atas tuh kode2 css emng di dalam tmplate nya gak ada @Kang.? kaya nya agak rumit bagi saya yg masih blm mengenal banyak ttg templt
from ; Karrysta http://karristaent.blogspot.com

Balas

Bener kata teman2 di atas Kang Slider Gambar yang di Kiri nya gak Muncul stelah
saya otak atik juga.. yang muncul hanya bagian kanan saja. mungkin ada yang salah
Saya memasang nya Kang..? mohon pencerahan nya Kang...?

Balas

kemungkinan JSnya yang ga aktif sob

Balas

cara mengganti atau menghilangkan link news updates gmna kang ismet , terima kasih

Balas

hapus saja kode
<div class='newspic'>
.......
</div>

Balas

apa efek mengganti Design by dan Published by untuk template pengaruh pada seo ngga kang ismet . terimakasih

Balas

sangat bermanfaat kang :) main dong ke blog saya

Balas

Wah wah kang ismet makin hari banyak ide cemerlang nih. template blognya keren kang. salam blogger kang ismet.

Balas

kang ismet saya nyoba templte ini tapi pas ngerubah daftar postingan berdasarkan label tidak berhasil... mohon pencerahannya

Balas

Permisi Izin Pake template Ya kang, Trimakasih.. hehheheheh

Balas

Poskan Komentar


×
Chat