Tutorial Magazine Sporty2

Sahabat pucanglaban, pada tutorial kali ini kami akan mencoba berbagi tips untuk mengatur template magazin sporty2. Sahabat ingin menggunakan template ini tapi belum tahu cara mengaturnya? tenang, di sini  kami akan berbagi dengan Sahabat semuanya bagainama cara me-manage template tersebut. Ok, langsung saja ke TKP Tutorial Magazine Sporty2.

Pertama, Sahabat harus download dulu template Sporty Magazine2. Setelah itu, Sahabat ikuti Kami berikut.

Menu Navigation Dropdown

Untuk mengatur menu ini, Sahabat harus masuk ke halaman edit HTML(cekist di kotak ekspand widget), kemudian cari kode: <div id='menuwrapperpic'> (Nota : untuk pencarian cepat, gunakan keyword F3 atau tombol ctrl + f, kemudian tulis kode dan klik enter. Setelah kode tersebut, Sahabat akan menemukan kode menu drop down seperti ini:

<div id='menuwrapperpic'>

<div id='menuwrapper'>

<ul id='menubar'>

<li class='selected'><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnTPa08GwzdoePMqzBK0CFOzv9LBu_bZWTCawDyCevTYcc3uhXxbuZTyGzUkRFAiU4zrzwyk4cULDRgtvYBkVFinJvDlrrrwyuM_jDC2gHkBBTN13V2bWcmOg3WQUj8_kLVLobS7grpRY/s1600/home_white.png' style='padding:0px;'/></a></li>

<li class='selected'><a href='#'>About Us</a></li>

<li><a class='trigger' href='#'>Contact Us</a>

<ul>

<li><a href='#'>Herdiansyah Blog</a></li>

<li class='hr'/>

<li><a href='#'>Contact on Facebook</a></li>

<li><a href='#'>Contact on Twitter</a></li>

<li class='hr'/>

<li><a href='#'>Free Template Design</a></li>

</ul>

</li>

<li><a href='#'>Moto GP</a></li>

<li><a href='#'>Football</a></li>

<li><a href='#'>Formula 1</a></li>

<li><a href='#'>Web Design</a></li>

<li><a href='#'>Free Template</a></li>

<li><a href='#'>Videos</a></li>

<li><a href='#'>Image</a></li>

<li><a href='#'>Download</a></li>

<li><a class='trigger' href='#'>More</a>

<ul>

<li><a href='#'>Editorial</a></li>

<li class='hr'/>

<li><a href='#'>Off Topic</a></li>

</ul>

</li>

</ul>

<br class='clearit'/>

</div>

<div style='clear:both;'/>

</div>

Nota : ganti kode # dengan link url Sahabat, dan nama label dengan label Sahabat.

News Ticker

masih pada halaman edit HTML.
Langkah pertama, daftarkan blog sahabat ke API Google Code dan sahabat akan lihat kode google API. Seteleh itu, cari kode ini kemudiannya Sahabat edit:

<!-- News Ticker -->

<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw'/>

Nota : kemudian ganti kode yang berwarna ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw dengan kode Sahabat.

Langkah selanjutnya, Sahabat bisa mengganti link url untuk bisa tampil di news ticker Sahabat dengan postingan terbaru blog Sahabat. Cari kode berikut dan kemudian Sahabat bisa meng-editnya.

<div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'>

<script type='text/javascript'>

var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)

cssfeed.addFeed(&quot;News Update&quot;, &quot;http://sportymagazine2.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed

cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields

cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag

cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date

cssfeed.entries_per_page(1)

cssfeed.init()

</script>

</div>

</div><div style='clear:both;'/>

</div>

Nota : gantikan kode yang berwarna http://sportymagazine2.blogspot.com dengan link url blog sahabat.

Kemudian save template.

Selanjutnya, untuk mengatur tampilan tampilan yang lainnya, Sahabat harus masuk ke halaman HTML/java script.


Featured Slideshow Content

Tambahkan widget html/java script. Kopi kode ini dan kemudian pastekan:

<div class='newspic'>

<div class='news'>

<div style='float:left;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'>News Update :</div>

<div id='featured'>

<ul class='ui-tabs-nav'>

<!-- 1st Small Image -->

<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt="" src="#" /><span>Post Title</span></a></li>

<!-- 2st Small Image -->

<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt="" src="#" /><span>Post Title</span></a></li>

<!-- 3st Small Image -->

<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt="" src="#" /><span>Post Title</span></a></li>

<!-- 4st Small Image -->

<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt="" src="#" /><span>Post Title</span></a></li>

</ul>

<!-- First Content -->

<div class='ui-tabs-panel' id='fragment-1' style=''>

<img alt="" src="#" />

<div class='info'>

<h2><a href=' your-url-link '>Post Title</a></h2>

</div></div>

<!-- Second Content -->

<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>

<img alt="" src="#" />

<div class='info'>

<h2><a href=' your-url-link '>Post Title</a></h2>

</div></div>

<!-- Third Content -->

<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>

<img alt="" src="#" />

<div class='info'>

<h2><a href=' your-url-link '>Post Title</a></h2>

</div></div>

<!-- Fourth Content -->

<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>

<img alt="" src="#" />

<div class='info'>

<h2><a href=' your-url-link '>Post Title</a></h2>

</div></div>

</div>

Nota : gantikan kode # dengan link url image sahabat, gantikan post Title dengan judul post sahabat, dan ganti juga your-url-link dengan link url post sahabat.

Featured Label Categories

Masih pada halaman HTML/java script,  kopi dan pastekan kode berikut:

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

Nota : ganti angka 3 dengan nomor post yang ingin ditampilkan, dan Borneo dengan label atau kategori sahabat.

Twitter Widget (Live Updates)

Masih dalam halaman HTML/Java Script, kopi dan pastekan kode berikut:

<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNBHYRHAgZuL1Q_Jl_XXSqoZipO8nO1zaoRfPvP6ZUEjIH94uRe_vqNqoVB5-E12eBzpNhxTceAOYSzKWSD10-tUG67JQ4OhPZK_ahByTPzoauOw0Yx9-MJ_wG588rJ4Dln4vMn0uLVV8/s1600/bg_twitter.gif) no-repeat;padding-top:40px;padding-left:5px">

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

version: 2,

type: 'profile',

rpp: 10,

interval: 3000,

width: 285,

height: 118,

theme: {

shell: {

background: 'transparent',

color: '#000000'

},

tweets: {

background: 'transparent',

color: '#000000',

links: '#B45F04'

}

},

features: {

scrollbar: true,

loop: true,

live: true,

hashtags: true,

timestamp: true,

avatars: false,

behavior: 'default'

}

}).render().setUser('borneotemplates').start();

</script>

</div>

Nota : ganti tulisan borneotemplates dengan username twitter sahabat.

Search Widget

Masih dalam halaman HTML/Java Script, kopi dan pastekan kode berikut:

<form name="jksearch" action="http://www.google.com/search" method="get" onsubmit="jksitesearch(this)" target="_blank">

<input id="hiddenquery" type="hidden" name="q" />

<input name="qfront" onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" value="Search on this site..." type="text" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" style="width: 240px;border:none;padding:8px 10px; font:normal 11px arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdDtz48yqkbMt8oDHAUspQYTPN3CSZIBOUAm-FoLkyP89blWQTP-1lj71aRCRlQe4wEDsUyfmrMqKw5sSfGlEC5L0zCFmLOxyqIQsnhBTI-t6K7YpUOlhp10bJhT-ya5g-YsWeyupCy1Q/s1600/search_field.jpg) no-repeat;" /><input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaedx_EN8yt4w-BetdlRPNk_7KKp49ys6bwXjcP-dTfQoS9diFJGw908anyH9w0Yx_HdjHPf5KQ6G5B_K65cm14QyxCPjAEw-783XOEeJMohIjohK6H7ALrGZFaiahjy_epcoBY2ymJoE/s1600/search_button.jpg" align="top" value="Search"/>

<div style="font: normal 11px Arial;color:#666;padding:2px 0;">

<input name="se" type="radio" checked /> Google

<input name="se" type="radio" /> Yahoo

<input name="se" type="radio" /> Msn

</div>

<script type="text/javascript">

// All-in-one Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)

// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/

// This notice must stay intact for use

//Enter domain of site to search.

var domainroot=" www.borneotemplates.com"

var searchaction=[ //form action for the 3 search engines

"http://www.google.com/search",

"http://search.yahoo.com/search",

"http://search.msn.com/results.aspx"

]

var queryfieldname=["q","p","q"] //name of hidden query form for the 3 search engines

function switchaction(cur, index){

cur.form.action=searchaction[index]

document.getElementById("hiddenquery").name=queryfieldname[index]

}

function jksitesearch(curobj){

for (i=0; i< document.jksearch.se.length; i++){ //loop through radio to see which is checked

if (document.jksearch.se[i].checked==true)

switchaction(document.jksearch.se[i], i)

}

document.getElementById("hiddenquery").value="site:"+domainroot+" "+curobj.qfront.value

}

</script>

</form>..

Nota : ganti tulisan www.borneotemplates.com dengan username twitter sahabat.

Selamat mencoba dan semoga bermanfaat. Pucanglaban.com informatif, kompetitif dan kreatif. bersama berbagi ilmu dan pengetahuan. apabila sahabat merasa tutorial ini bermanfaat, silahkan tinggalkan komentar. terimakasih.