Template Magazine Blogspot

Magazine Blogspot Template dinamakan oleh pembuatnya dengan Mas Paper dengan desain Magazine yang cukup bagus. Pada template ini tidak ada fitur static page (halaman statis) karena script summary and thumb dihilangkan agar tidak memperberat loading blog.

DEMO :::: DOWNLOAD

Berikut fitur yang terdapat pada tempate tersebut :

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 :

<script type='text/javascript'> var numposts = 1;
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/-/Panduan?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json)
{
document.write('<ul>');
     for (var i = 0; i < json.feed.entry.length; i++)
    {
           for (var j = 0; j < json.feed.entry[i].link.length; j++)
          {
                if (json.feed.entry[i].link[j].rel == 'alternate')
               {
                  break;
                }
         }
        var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs var entryTitle = json.feed.entry[i].title.$t; var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item);
    }
    document.write('</ul>');
}
</script>

<script src="http://hanyapanduan.blogspot.com/feeds/posts/summary/-/Panduan?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://hanyapanduan.blogspot.com/search/label/Panduan" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>

Keterangan : Warna biru : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan. Warna merah : Ganti URL dengan URL blog anda.

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.
2 sidebar diatas footer
Untuk tab view menu yang ada di sidebar kanan, bagian atas anda tinggal membuat 4 widget dan otomatis akan menjadi tab view menu.
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/AVvXsEgRV2M3eT8efXdDpdCFqr6mz5bNPTZ49wnICUPs28d-w1M1REG8RGrEwLRfv-bRGNxb9V4MMHv3VbXRPeWP8xRDnrfM9xFzLwbEEoCtITy7Z_fp72pAWy3xhfc-4M8PTXv_YJEfeQvenqI/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/AVvXsEgeyf6qd1TI708g1sNlAdswBwJDqRgGc_xo7UJV1oQEEHp_XKbkuuZ0N3EQwluR-2oVLwuiaP7J58LmwIKG5P3VqbJusxp04Rj8HHx8s87vU9537GSTCq5zAlKEI6P_U0I5Tg3xwWLIR2U/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/AVvXsEg-5Q2sAQ9P7VhUDu4pEvlbEcOBhv2lQ6s1Bk7r3pPr246UCN7iI7Ava_2J7Ss6P23w6gf9tBmsuvy27JVrq8gcFavAftNNPaMurAf6lizLUVtGLTnP7ONoowGHUzUEb4IqyCu_knUx-k0/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>

Selamat mencoba dan semoga bermanfaat.

Upates Dari si pembuat template:

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.

sumber : creatingwebsite-maskolis.blogspot.com

Template Magazine Blogspot - Mas Paper

{ 0 komentar... read them below or add one }

Posting Komentar

BANYAK DILIHAT

CARI ARTIKEL LAIN

KATEGORI