OPTIMASI BLOG 3: Mas Paper, Template Bonus untuk Pengunjung Setia Creating Website

Ini sebenernya template pesenan temen saya, tapi karena dia lebih memilih pakai wordpress jadinya nganggur template ini. Yah daripada tidak kepakai mending saya share aja disini, silahkan bagi siapa saja yang suka boleh dipakai. Template ini hanya modifikasi dari template Johny Simple Magazine 2, pada bagian slidernya saya ganti memakai slider otomatis dan sidebar accordion saya ganti dengan tab view menu. Selebihnya sama paling cuma ada tambahan 3 kolom sidebar di bawah banner iklan baris yang pertama dan tambahan widget social bookmark dari Mashable.

Template ini saya share karena ada beberapa teman yang ingin memakai template Mas Paper ini. Daripada saya kirim scriptnya satu persatu lewat email mending dijadikan postingan aja biar semua bisa memakai. Saya bingung mau dikasih nama apa template ini, terserah anda lah mau dikasih nama apa, kalau saya kasih nama Mas Paper nggak boleh ada yang protes ya.

Fitur yang terdapat pada template ini antara lain :

Banner atas (diatas header)
Letaknya di bawah kode <head> pada template, silahkan diganti dengan banner anda atau hapus aja kalau tidak suka.
Headlines News
Untuk mengganti dengan headline berita dari blog Anda, Anda tinggal ganti URL nya, karena google API key sepertinya sekarang sudah ditutup, atau selengkapnya baca disini.
Slider Otomatis.
Untuk mengganti slider anda cari kode ini :
```
numposts1 = 5;
label1 = "misteri";
```
Keterangan :
Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. misteri adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan selengkapnya bisa dibaca disini.
Sidebar tengah atas
Cara memasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :

Keterangan :

biru

merah

Banner iklan di bawah sidebar
Ada dua banner iklan yang pertama terdapat di bawah content, dan satunya lagi di bawah 3 deret sidebar pada baris kedua. Silahkan diisi dengan iklan anda, dan juga twitter image bisa diganti dengan twitter dari Anda sendiri.
Untuk 2 sidebar diatas footer cara pemasangannya seperti pada tutorial Widget Template Johny Magazine. Bagi yang lupa silahkan dibaca lagi
Untuk tab view menu yang ada di sidebar kanan, bagian atas anda tinggal membuat 4 widget dan otomatis akan menjadi tab view menu. Untuk lebih lengkapnya baca tutorial disini.
Jika Anda ingin menambahkan Mashable widget, letakkan kode berikut pada kotak HTML/javascript :
<style>
/* Social Widget */
#MBT-mashable-bar {
    border: 0;
    margin-bottom: 10px;
    margin: 0 auto;
        width:300px;
}
.fb-likebox {
    background: #fff;
    padding:0;
    margin-top: 0px;
        height:290px;
}
.googleplus {
    background: #F5FCFE;
    border-top: 0px solid #FFF;
    border-bottom: 1px solid #ebebeb;
    border-right: 1px solid #D8E6EB;
    border-left: 1px solid #D8E6EB;
    border-image: initial;
    font-size: .90em;
    font-family: "Arial","Helvetica",sans-serif;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;}
.googleplus span {
    color: #000;
    font-size: 11px;
    position: absolute;
    display:inline-block;
    margin: 9px 70px;}
.g-plusone {    float: left;}
.twitter {
    background: #EEF9FD;
    padding: 10px;
    border: 1px solid #C7DBE2;
    border-top: 0;}
#mashable {
    background: #EBEBEB;
    border: 1px solid #CCC;
    border-top: 1px solid white;
    padding: 2px 8px 2px 3px;
    text-align: right;
    border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
    font-size: 10px;
    font-weight: bold;
    text-shadow: 1px 1px white;
    color: #1E598E;
    text-decoration:none;}
#email-news-subscribe .email-box{
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-right: 1px solid #C7DBE2;
    border-left: 1px solid #C7DBE2;
    border-image: initial;
   height:35px;}
#email-news-subscribe .email-box input.email{
    background:#FFFFFF;
    border: 1px solid #dedede;
    color: #999;
    padding: 7px 10px 8px 10px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border-image: initial;
    font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
    background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
    -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
    font-family: "Arial","Helvetica",sans-serif;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #cc7c00;
    color:white;
    text-shadow:#d08d00 1px 1px 0;
    padding:7px 14px;
    margin-left:3px;
    font-weight:bold;
    font-size:12px;
    cursor:pointer;
    border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
    background: #ff9b00;
    background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
    outline:0;-moz-box-shadow:0 0 3px #999;
    -webkit-box-shadow:0 0 3px #999;
    box-shadow:0 0 3px #999
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
    background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
    -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #cc7c00;
    color:#FFFFFF;
    text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
    background-color: #D8E6EB;
    box-shadow: 0 1px 1px #FFFFFF inset;
    padding: 0px;
    font-family: "Arial","Helvetica",sans-serif;
    font-weight:bold;
    overflow: hidden;
    border: 1px solid #B6D0DA;
       height:37px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
    float: left;
    color:#1E598E;
    overflow: hidden;
    height:20px;
    padding:5px;
    width: 270px;}
#other-social-bar .other-follow ul {
    list-style: none outside none;
    padding-left: 4px;}
#other-social-bar .other-follow ul li {
    font-size: 12px;
    font-weight: bold;
    display:inline;
    border:0;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a {
    font-size: 12px;
    color:#1E598E;
    font-weight: bold;
    display:inline;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
    font-size: 12px;
    font-weight: bold;
    display:inline;
    border:0;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
    font-size: 12px;
    color:#1E598E;
    font-weight: bold;
    display:inline;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ0lfziyr7q_raVulpUAdGWoIni2pT0IX0aGpNOpLtsp-c4qgk0oBJQQfpj8J2jkCFaUa0QgDRIt2optZ29jMXotcgoOGUpJMqB9M-Veaz6dAVakSBjxZY5YPgBdiap7g0KU7qyMgHplI/s400/rss-16x16.png') no-repeat transparent;
    line-height: 1;
    padding: 0px 3px 1px 20px;
    width: 60px;
    margin-bottom:0px;
        margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-linkedin {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0iSWFJoyLpbGneOA_KbpCYIKjm5EWYU-jz6y26LXFJer1pN9ducfy2b_FQ3ALMpMB6IQ-wZk4hJaeeb1ljr0BhFX_W8b8PVU499dLXiVhihYaewodM60wRK0sBsSuyrtv9bLHWkH0IA4/s400/linkedin-16x16.png') no-repeat transparent;
    line-height: 1;
    padding: 0px 3px 1px 20px;
    width: 60px;
    margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJdSoJhUN5VKp1uyTfRjQM6hw6yBNp50YppM8UuWJ2_ko2iHwWZN8_qW_hv-dmqYPGuCMzA8-YaQCBoksHMWjqGpj074Rrc_MGMAIMrC0I1EsT1TlfenEwEmVwSu3WL_ZAvyjqk72FQRA/s400/gplus-16x16.png) no-repeat transparent;
    line-height: 1;
    width: 60px;
    padding: 0px 3px 1px 20px;
    margin-bottom:0px;}
</style>



 <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" >  <div class="fb-likebox"><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FInformasi-Dunia-Maya-Terkini%2F144185582349542&width=300&height=290&colorscheme=light&show_faces=true&border_color=%23D8E6EB&stream=false&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:292px;" allowtransparency="true"></iframe></div> <div class="googleplus">  <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="twitter">  <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&
align=&button=blue&id=twitter_tweet_button_0&
lang=en&link_color=&screen_name=maskolis&show_count=&
show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe">  <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER_URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
        <input type="hidden" value="FEEDBURNER_URL" name="uri" />
        <input type="hidden" name="loc" value="en_US" />
        <input class="subscribe" name="commit" type="submit" value="Subscribe" />
    </form>
</div> </div> <div id="other-social-bar">  <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/tntbystc" target="_blank">RSS Feed</a> </li> <li class="my-linkedin"> <a rel="nofollow" title="linkedin" rel="author" href="LINKEDIN PROFILE LINK" target="_blank">linkedin</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="http://plus.google.com/44448117245314564536" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://creatingwebsite-maskolis.blogspot.com/" target="_blank" >Creating Website »</a></span></div></div>
 </div>

Apa lagi ini yang belum ya, sepertinya sudah semua, seperti juga pada template Johny Simple Magazine 2, template ini tidak ada fitur static page (halaman statis) karena script summary and thumb saya hilangkan agar tidak memperberat loading blog. Di bawah ini link untuk melihat demonya dan link download bagi anda yang berminat untuk mencoba memakai template ini. Selamat mencoba dan semoga bermanfaat.

Upates :

Karena tempat penyimpanan google code sedang bermasalah tabber menu pada sidebar tidak jalan, untuk mengatasinya anda cari dan ganti kode berikut ini pada posisi edit HTML :

<script src='http://creatingwebsite.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var starttab=0;
var endtab=3;
var sidebarname="sidebar";
</script>
<script src='http://creatingwebsite.googlecode.com/files/tabber.js' type='text/javascript'/>

Ganti dengan kode di bawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var starttab=0;
var endtab=3;
var sidebarname="sidebar";
</script>
<script src='http://johnytemplate.googlecode.com/files/tabber.js' type='text/javascript'/>

Dan jika headline news juga tidak bisa berjalan, untuk mengatasinya Anda harus mengganti kode berikut ini pada posisi edit HTML, kemudian cari kode di bawah ini :

<script src='http://maskolis.googlecode.com/files/ticker.js' type='text/javascript'/>

dan Anda ganti dengan kode berikut :

<script src='http://johnytemplate.googlecode.com/files/newsticker.js' type='text/javascript'/>

Jika slidernya tidak muncul lagi ganti kode ini :

<script src='http://creatingwebsite.googlecode.com/files/contentslider.js'/>

dengan kode berikut :

<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>

Terakhir save templates, atau kalau Anda nggak mau repot-repot cari kode diatas untuk menggantinya satu persatu di download ulang aja, yang lama sudah saya updates, mohon maaf sebelumnya.

Demo | Download

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript