Mudjoko

Laki-laki, XX tahun

Kudus, Indonesia

SELAMAT DATANG DI BLOG PERJALANANKU, MY LIFE MY BLOG adalah blog yang menceritakan semua yang saya suka, Inspirasi, dan Motivasi.Selamat bergabung di blog saya, semoga bisa jadi motivasi dan inspirasi bagi anda yang membacanya Semoga Bermanfaat.

Visit My Blog :
=>tritunggaljayakudus.blogspot.com
=>tritunggaljaya-kudus.blogspot.com
=>tritunggal-jayakudus.blogspot.com
=>mudjoko.kds@gmail.com
::
Start
Mudjoko™ Kangmas Djoko
Shutdown

Navbar bawah

Cari Blog Ini

Jumat, 02 Maret 2012

Johny Darkmovie, Template for Movie Review

Sebelumnya saya ingin minta maaf dulu sama mas Andreas (Komud) dan Blogger Mobile (Wandhy) karena belum memenuhi permintaan untuk membuat tutorial navigasi menu dan membuat template gallery seperti Mas Template. Soalnya antri ya mas, hal ini juga karena template yang saya buat ini (Johny Darkmovie) juga atas permintaan seorang sahabat via email, dia meminta agar saya membuat sebuah template yang bisa dipakai untuk review atau download film. Nah, jadilah seperti template gambar di bawah ini (klik gambar untuk melihat demonya) :

johny darkmovie

Baiklah, langsung saja pada fitur-fitur yang ada pada template ini dan cara pemasangan widgetnya :
  1. Memasang Slider Image Otomatis
    Untuk mengganti image pada slider, cari kode berikut :
    numposts1 = 5;
    label1 = "best seller";
    Keterangan :
    Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera.
    best seller adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan (perhatikan besar kecil huruf yang ada pada label yang sudah Anda buat harus sama).
  2. Kategory dengan thumbnail (Box office dan action movies)
    Letaknya di sebelah kiri image slider dan di bawah widget random movies, cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
    <script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script>

    <script type="text/javascript" src="/feeds/posts/default/-/action?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
    Keterangan :
    Warna biru (action) adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
  3. Widget Random Movies (Sidebar kanan atas)
    cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
    <script type="text/javascript">
        var randarray = new Array();var l=0;var flag;
        var numofpost=7;function randomposts(json){
        var total = parseInt(json.feed.openSearch$totalResults.$t,10);
        for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
        if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
        for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
        for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
        document.write(item);}}
        }document.write('</ul>');}
        </script>
        <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
    Keterangan :
    Perhatikan angka 7 diatas, itu adalah jumlah random post yang ditampilkan pada sidebar silahkan ganti sesuai dengan keinginan Anda.
  4. Latest Movies (Di bawah navigasi menu atau news ticker)
    Untuk menggantinya dashboard >> Design >> Edit HTML jangan lupa centang expand widget templates kemudian cari dengan menggunakan control + F. Kemudian cari URL http://johny-darkmovie.blogspot.com ganti dengan URL anda.
  5. Untuk mengatur jarak antara akhir postingan dengan kotak komen, yang biasanya terlalu lebar caranya adalah klik design, biarkan pada posisi page element setelah itu anda pilih blog post (kolom paling besar) kemudian klik edit. Setelah terbuka halaman baru centang hanya tanggal, comments dan label biarkan yang lain kosong.
  6. Untuk mengganti kotak pencari (search box) yang ada di pojok atas kanan, masuk lagi ke Edit HTML cari http://johny-darkmovie.blogspot.com dan ganti dengan URL blog Anda..
  7. Untuk mengaktifkan fungsi reply pada kotak komentar, cari kode di bawah ini pada edit HTML template :
    <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=8548828380568749844&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
    Perhatikan kode yang berwarna merah, itu adalah ID blog demo template Johny Darkmovie. Anda harus ganti dengan ID blog anda yang terletak pada browser.
Template ini juga sudah ada fitur halaman statis (static page) klik sample page yang ada pada navigasi paling atas dan jika Anda download template ini, script-script untuk widget sudah saya sertakan tinggal dipasang dan ganti dengan label atau URL blog anda, jangan lupa untuk membaca instruksinya ! Saya kira hanya itu yang harus diperhatikan dalam menggunakan template ini, jika masih kurang jelas silahkan tinggalkan pesan di kotak komentar di bawah. Dan bagi Anda yang tertarik untuk mencobanya silahkan langsung saja menuju link demo dan download template ini, Sekian, selamat mencoba dan semoga bermanfaat.... happy blogging (habis pulang kantor ne belum mandi.... hehehehehehe)


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
Read More --►

Minggu, 26 Februari 2012

Johny Darkfire, Template Gratis Warna Hitam Elegan

Template ini sebenarnya pesanan teman Jogang via email yang meminta untuk memodifikasi agar template Johny Darkmatter kolom postnya di homepage dibuat seperti tampilan template Johny Darkgamer. Template ini saya beri nama Johny Darkfire karena dengan dasar warna hitam dan sedikit tambahan warna kuning menyala seperti api untuk memperindah tampilan. Fitur yang terdapat pada template ini hampir sama dengan template Johny Darkgamer hanya slider carousel saya ganti dengan otomatis slider yang memudahkan Anda untuk menampilkan post pada slider.

johny darkfire

Di atas adalah gambar screenshot dari template ini, tidak banyak perubahan memang sengaja saya minimalisir agar lodingnya tidak terlalu berat, kapasitas template ini hanya 76.0 kb. Berikut ini adalah hal-hal yang perlu diperhatikan untuk menggunakan template ini.
  1. Mengganti Slider
    Untuk meletakkan postingan kategori tertentu pada slider, cari kode berikut :
    numposts1 = 5;
    label1 = "sport";
    Keterangan :
    Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera.  
    Sport adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan.
  2. Category with thumbnail (Sidebar kanan atas)
    Seperti pada template-template saya sebelumnya, saya selalu menyertakan fitur ini, cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
    <script type='text/javascript'>var numposts = 4;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/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

    <a href="http://johny-darkfire.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</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.
  3. Untuk mengatur jarak antara akhir postingan dengan kotak komen, yang biasanya terlalu lebar caranya adalah klik design, biarkan pada posisi page element setelah itu anda pilih blog post (kolom paling besar) kemudian klik edit. Setelah terbuka halaman baru centang hanya tanggal, comments dan label biarkan yang lain kosong.
  4. Jika Anda ingin menambahkan halaman statis untuk template ini sangat mudah, baca tutorialnya disini.
Script yang perlu dipasang di sidebar dan instruksi lainnya sudah saya sertakan pada link download yang ada di bawah. Jika masih ada yang kurang jelas, silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Untuk mas Jogang semoga bisa Anda nikmati template ini walaupun ada sedikit perubahan pada header dan navigasi.


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
Read More --►

Selasa, 21 Februari 2012

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.

mas paper template

Fitur yang terdapat pada template ini antara lain :
  1. Banner atas (diatas header)
    Letaknya di bawah kode <head> pada template, silahkan diganti dengan banner anda atau hapus aja kalau tidak suka.
  2. 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.
  3. 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.
  4. Sidebar tengah atas
    Cara memasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini : 
  5. <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/-/misteri?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://crottt.blogspot.com/feeds/posts/summary/-/misteri?max-results=5&alt=json-in-script&callback=recentpostslist"></script> <a href="http://crottt.blogspot.com/search/label/misteri" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</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.
  6. 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.
  7. Untuk 2 sidebar diatas footer cara pemasangannya seperti pada tutorial Widget Template Johny Magazine. Bagi yang lupa silahkan dibaca lagi
  8. 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.
  9. 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/AVvXsEifXHwR8e-wUSeJWNWiGbVELPhEuWkZvdghgiC08E9TM9cpw0doxnjsqxm1H4giYBY1NqNdSJwKr4eIlEhDxFI7miB_e7-lCNOdogdeN0SaMnC9cZmQjlPkjNkr8SXQDoJmPVZphN_5yx8/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/AVvXsEjJte0nkcykfUmRuZ8su-siqZuLEHuEY4t4kzu02Ehe5Y8K4i_WP5VX1jJW0nwM3_ozBnHYrEwTmj0Mij45OPDXZX4NLrKFHR8Bk3UbkcKLtsuOfPAYusJyGHL7sfSabBKAc1MCrkTFHK4/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/AVvXsEiKpRRZYoov7NNNO3-uXCKjRubLlk7Id2zVCBzTuPTIT3gqcspDO_VS4zHILWTKWFxzhcWxIq-v7SeJ_cFlESzQ-xlXy7PAMhTAu2QPT7P-3bJEb2TKiTQZghLkmfp4jf5T6bcqVYt3lL0/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}
    </style>

    <!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #FFCA00;
        }
    </style>
    <![endif]-->

    <!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" > <!-- Begin Widget --> <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&amp;width=300&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23D8E6EB&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:292px;" allowtransparency="true"></iframe></div> <div class="googleplus"> <!-- Google --> <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"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
    align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
    lang=en&amp;link_color=&amp;screen_name=maskolis&amp;show_count=&amp;
    show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe"> <!-- Email 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=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)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"> <!-- 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>
    <!-- End Widget --> </div> <!--end of social widget-->
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=&quot;sidebar&quot;;
</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=&quot;sidebar&quot;;
</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.


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
Read More --►

Johny Portal 2, Elegan Template for Your Site

Template ini merupakan lanjutan dari versi pertama, Johny Portal. Seperti template terdahulu pada home page template ini dibagi menjadi 3 kolom dan 2 kolom pada post page. Template ini hanya berkapasitas 76.0 kb mungkin agak ringan menurut saya, karena tidak banyak fitur yang saya pasang kali ini. Di bawah ini screenshot dari template Johny Portal 2 :

johny portal 2

Fitur-fitur yang ada pada template ini antara lain :
  1. Slider Image Otomatis
    Untuk mengganti image pada slider, cari kode berikut :
    numposts1 = 5;
    label1 = "sport";
    Keterangan :
    Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. Sport adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan.
  2. Kategory dengan thumbnail (Category with thumbnail)
    Letaknya di sidebar kiri, cara pasangnya 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/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

    <script type="text/javascript">
    function recentpostslist(json) {
     document.write('<ul>');
     for (var i = 1; i < json.feed.entry.length; i++)
     {
        for (var j = 1; 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://johnyportal2.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
    <a href="http://johnyportal2.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</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.
  3. Kotak feedburner di bawah postingan
    Cari kode script di bawah ini pada edit HTML (jangan lupa centang expand widget templates) :
    <div class='subscribe'>
    <p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'>
    <b>click here</b></a>, or subscribe to receive more great content just like it.</p>
    <p class='feed'><a href='http://johnytemplate.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='JohnyTemplate'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
    <input id='botsubbutton' type='submit' value='Submit'/><br/>
    <small>Your information will not be shared. Ever.</small>
    </form>
    </div>
    Keterangan :
    Warna biru : ganti dengan alamat feed anda.
    Warna merah : ganti dengan URL anda.
  4. Latest Post
    Untuk mengatur lates post yang ada di homepage caranya sebagai berikut :
    Di dashboard blogger pilih setting, kemudian klik formatting. Pada bagian paling atas pilih berapa posts yang ingin ditampilkan pada homepage.
  5. Untuk mengatur jarak antara akhir postingan dengan kotak komen, yang biasanya terlalu lebar caranya adalah klik design, biarkan pada posisi page element setelah itu anda pilih blog post (kolom paling besar) kemudian klik edit. Setelah terbuka halaman baru centang hanya tanggal, comments dan label biarkan yang lain kosong.
  6. Untuk membuat widget yang ada di bawah latest post, Anda tinggal memasukkan script yang sudah saya sertakan jika anda sudah mendownloadnya.
  7. Satu lagi hampir lupa, template ini tanpa disertai dengan fitur static page (halaman statis). Karena memang tidak ada script summary and thumb pada template ini.  Jika diantara Anda ada yang bisa menambahkan fitur static page pada template ini saya akan sangat berterima kasih.
  8. Satu lagi ada yang lupa, untuk mengaktifkan fungsi reply pada kotak komentar, cari kode ini pada edit HTML template :
    <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=7984474047226005820&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
    Perhatikan kode yang berwarna merah, itu adalah ID blog demo template ini. Anda harus ganti dengan ID blog anda yang terletak pada browser.
Pada dasarnya semua script yang saya jelaskan sudah ada jika anda download template ini. Anda tinggal memasukkan ke dalam kotak HTML/javascript. Jika masih ada yang kurang paham bisa ditanyakan pada kotak komentar. Dan jika ada yang tertarik untuk mencobanya silahkan klik link download  yang ada di bawah.


Updates :
Jika page navigasi dan related post di bawah postingan tidak muncul silahkan download ulang template ini disini.
Read More --►

Jumat, 10 Februari 2012

Template Creating Website 2 Kolom

Template Creating Website 2 kolom seperti yang saya pakai ternyata banyak juga yang berminat. Buat Anda yang menginginkan template ini sudah saya sediakan, Anda tinggal download, terus habis itu di upload. Template ini saya peringkas sehingga tidak seberat punya saya sendiri, karena template yang saya pakai sekarang ini memakai syntax highlighter yang banyak menggunakan kode javascript, yang mungkin untuk blog yang isinya berita tidak perlu dipasang  Tapi dari tampilan sama persis, nggak ada bedanya. Bedanya cuma mungkin fitur blockquote, sama kolom komentar yang sengaja tidak saya sembunyikan. Karena dari template Creating Website modifikasi yang terdahulu banyak juga yang meminta kotak komentarnya nggak usah di modifikasi memakai spoiler.

creating website 2 kolom

Gambar tampilannya ya seperti blog saya ini,  sama kan?

Sekarang untuk pemasangan widgetnya :
  1. Untuk memasang translate bendera, tabber sidebar dan artikel terbaru sama caranya dengan artikel  template creating website modifikasi.
  2. Memasang Artikel Terkait
    Masukkan kode di bawah ini pada kotak HTML/Javascript template Anda
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
    Untuk menampilkan Artikel Terkait ini hanya tampil pada post page baca tutorialnya disini.
  3. Mengganti URL Feedburner
    Anda tinggal mencari kode blogspot/offH pada template, setelah ketemu ganti dengan feed anda. Atau kalau kurang jelas selengkapnya bisa dibaca disini.
  4. Membuat Drop Cap atau tulisan huruf awal postingan menjadi besar.
    Sengaja template ini tidak dimasukkan fitur Drop Cap, karena selera setiap orang pasti beda.  Bagi Anda yang menginginkan setiap huruf awal pada postingan menjadi besar langsung saja baca tutorialnya disini.
  5. Mengganti kotak pencarian (search) adsense
    Anda harus membuat kotak pencarian Google Adsense terlebih dahulu di akun Adsense anda. Kemudian setelah membuatnya, cari kode di bawah ini (dibawah kode <div style='float:right;padding:1px 8px 0 0;'> )
    <form action='http://www.google.co.id/cse' id='cse-search-box' target='_blank'>
    <div>
    <input name='cx' type='hidden' value='partner-pub-960848xxxxxxxx:6v20u0t45ip'/>
    <input name='cof' type='hidden' value='forid:10'/>
    <input name='ie' type='hidden' value='iso-8859-1'/>
    <input name='q' size='26' type='text'/>

    <input name='sa' type='submit' value='Search'/>
    </div>
    </form>
    <script src='http://www.google.co.id/cse/brand?form=cse-search-box&amp;lang=in' type='text/javascript'/></script>
    Ganti dengan kotak pencarian Adsense dengan yang sudah Anda buat, jangan lupa kodenya di parse dulu.
  6. Untuk tampilan blockquote anda bisa modifikasi sendiri sesuai selera. Dan jika ada yang menginginkan kotak komentar disembunyikan menggunakan spoiler, langsung saja menuju pada tutorial Kang Damar disini.
Untuk mas Hanif bocah Tulungagung khususnya semoga terpenuhi keinginan Anda, dan buat temen-temen yang lain juga silahkan kalau mau mencoba memakai template ini. Di bawah ini sudah saya sediakan link untuk melihat demo dan downloadnya.


Read More --►

Rabu, 08 Februari 2012

Johny Simple Music, Template Mini Untuk Musik

Saya persingkat saja ya, template ini saya beri nama Johny Simple Music, anda bisa kira-kira sendiri kenapa template ini saya beri nama demikian. Tapi kalau mau digunakan untuk konten yang lain juga silahkan saja. Fitur yang ada pada template ini adalah sebagai berikut :

johny simple music

Recent Post Slider Image
Image slider otomatis, kerja slider ini adalah setiap Anda membuat postingan baru akan muncul dalam slider. Jadi tidak perlu lagi susah-susah memasukkan satu persatu keterangan gambar dan URL nya. Klik Tambah Gadget >> pilih HTML/Javascript, masukkan kode berikut pada kolom di bawah header (ada dua kolom pilih yang atas) :
<div id="slider">
<script style="text/javascript" src="http://creatingwebsite.googlecode.com/files/slidergallery.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<script src="http://johny-simplemusic.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
Ganti URL warna merah dengan URL anda, selanjutnya slider sudah bekerja secara otomatis memuat postingan terbaru Anda.

Updates :
  1. Karena tempat penyimpanan google code saya sedang bermasalah slider pada templates ini tidak berfungsi, untuk mengembalikan pada kondisi semula anda harus merubah kode yang berwarna biru di atas dengan kode di bawah ini :
    <script style="text/javascript" src="http://johnytemplate.googlecode.com/files/sliderauto.js">
  2. Pada dashboard masuk ke template >> edit HTML jangan lupa centang expand widget templates. Setelah itu cari kode di bawah ini :
    <script src='http://creatingwebsite.googlecode.com/files/readmore.js' type='text/javascript'/>
    Kemudian ganti dengan kode berikut :
    <script src='http://johnytemplate.googlecode.com/files/readmore.js' type='text/javascript'/>
Kategori dengan thumbnail
Seperti terlihat pada sidebar kanan atas, masukkan kode di bawah ini pada kolom sidebar :
<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = true;var showpostsummary = false;var numchars = 100;</script>

<script type="text/javascript" src="/feeds/posts/default/-/top music?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Ganti tulisan warna biru dengan kategori atau label yang ingin anda tampilkan di sidebar.

Kategory tanpa thumbnail
Contohnya seperti pada sidebar kanan di bawah top music. Masukkan kode ini pada kotak HTML/Javascript template anda :
<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://johny-simplemusic.blogspot.com/feeds/posts/summary/-/jazz?max-results=8&alt=json-in-script&callback=recentpostslist"></script>

<a href="http://johny-simplemusic.blogspot.com/search/label/jazz" style="float:right;font:normal 10px Arial;padding:5px 0;">More Post &#187;</a>
Keterangan :
Warna merah : URL blog
Warna biru : kategori atau label

Di bawah ini link demo dan download bagi Anda yang ingin mencoba template ini, maaf kalau bahasanya kurang enak dibaca, maklum udah ngantuk, ini juga saking penginnya selalu berbagi hehehehe besok pasti dperbaiki. Selamat malam dan selamat mimpi indah.... hooaaahhhhmmmmmmmmmm.

Ucapan terima kasih yang sebesar-besar kepada teman saya seorang blogger maker handal Irengajah dari Dhetemplate.

Updates :
Karena tempat penympanan google code saya kena banned sama google beberapa fungsi script dri template ini menjadi mati, untuk mengatasinya ikuti petunjuk di bawah ini (masuk ke edit HTML jangan lupa centang kotak expand widget templates) :
  1. Read more
    Cari URL script di bawah ini :
    http://creatingwebsite.googlecode.com/files/readmore.js
    Ganti dengan URL script berikut :
    http://johnytemplate.googlecode.com/files/readmore.js
  2. Slider image
    Cari URL script di bawah ini :
    http://creatingwebsite.googlecode.com/files/easyslider.js
    Ganti dengan URL script berikut :
    http://johnytemplate.googlecode.com/files/easyslider.js
  3. Page navigasi
    Cari URL script di bawah ini :
    http://creatingwebsite.googlecode.com/files/pagenavi-creatingwebsite.js
    Ganti dengan URL script berikut :
    http://johnytemplate.googlecode.com/files/pagenav.js.js
Kemudian save template, jika tidak mau susah-susah untuk mengganti satu per satu silahkan downloa ulang pada link downoad di bawah.

Read More --►

Senin, 06 Februari 2012

Membuat Simple Tabber di Sidebar

Tabber yang biasa kita lihat di sidebar dapat berfungsi untuk menghemat space dalam sebuah blog, sehingga blog lebih kelihatan rapi. Banyak cara dalam membuat tabber ini, sebelumnya saya juga pernah membuat tutorial membuat tab view menu ini bisa dilihat pada membuat Tab View Menu Tanpa Edit HTML dan Tab View di Blogspot. Kelemahan dari tabber sebelumnya adalah kita mesti memasukkan URL postingan satu persatu ke dalamnya sehingga tidak secara otomatis jika ada postingan baru akan muncul di tabber.

Nah kali ini saya akan memberikan satu tips untuk Anda semua dalam membuat tabber, sangat sederhana dan tidak memperberat loading blog. Tips ini saya dapat dari Pak Abu Farhan, master blogger Indonesia yang sudah malang melintang di dunia persilatan.. eh dunia perbloggeran. Sebenarnya membuat tabber atau tab view menu ini juga bisa dengan menggunakan fungsi accordion tapi terkadang scriptnya bentrok dengan script lain dengan script silder misalnya, bisa sih diatasi tapi mesti merubah jquery menjadi no conflict, ah ribet deh pokoknya.

tabber sidebar maskolis

Untuk hasil akhir tabber ini gambarnya seperti diatas, jika ingin melihat demonya disini. Baiklah, langsung saja pada cara pemasangannya :
  1. Login ke blogger dengan akun anda
  2. Di dashboard klik Tata Letak > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas kode ]]></b:skin>
    .widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:10px;
    }

    .widget-tab {
    background:#c9dbdd;
    font-family:Arial,Helvetica,sans-serif;
    padding:5px !important;
    }

    .widget-tab  ul {
    margin:0px;
    padding:0px 5px 0 5px;
    }
    .widget-tab  ul li {
    list-style:none;
    border-bottom:1px dotted #a4bddf;
    padding-top:4px;
    padding-bottom:4px;
    font-size:12px;
    }
    .widget-tab  ul li:last-child {
    border-bottom:none;
    }
    .widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
    }
    .widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
    }
    .tab-content  ul li a:hover {
    color:#a59c83;
    }
    .tab-content  ul li a:hover small {
    color:#baae8e;
    }

    .active-tab{
    background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZqjNfVAS3YpZ_SRF_4OXz1VGdf7smEaNBqDWEDIz1nU8w9lTnR9h-B9A98P2tH68K1FySSLHSV0e2xL8lmdN1M_wPG88d16cOSxA-sOeus7RKGWIIo8tnheVeyJLuqNmCYE00zPPFZ0k/s1600/sidebar.png) repeat-x scroll left bottom !important;
    color:#282E32 !important;       
    }

    ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
    }

    ul.tab-wrapper li{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZtdYmld5kGJdb2EbHRPHKq3_JIzbnk4uQ13Aa3w5MVu6a0Kg7IhSsmKWJBlJIzKFuInUpRKJFsZ9D_lT6xlDGZl0rTw7W9v6wjnFeCLI4ekjifwLFSOFpkic6db6ulgUBxZD9gujqaU/s1600/menu-m1.png) repeat-x top;
    color:#FFF;
    cursor:pointer;
    display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:9px;
    font-weight:700;
    line-height:2em;
    list-style-image:none!important;
    list-style-position:outside!important;
    list-style-type:none!important;
    margin-right:1px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    padding:8px 14px
    }
  5. Tabber ini butuh sebuah jquery.min.js untuk bisa bekerja dengan baik, anda harus menambahkan kode di bawah ini diatas </head> (jika pada template anda sudah terinstall, langkah ini dilewati saja) :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
  6. Setelah itu, tambahkan kode berikut ini di bawah script jquery diatas
    <script type='text/javascript'>
    var starttab=0;
    var endtab=3;
    var sidebarname=&quot;sidebar&quot;;
    </script>
    <script src='http://yourjavascript.com/229125112341/tabber.js' type='text/javascript'/>
    Keterangan :
    var starttab=0;
    var endtab=3;
    var sidebarname="sidebar";
    Starttab adalah nomor awal untuk widget yang Anda pilih, mulai menghitung dari 0. Endtab adalah jumlah untuk widget terakhir yang ingin ditampilkan dalam tabber. Endtab=3 berarti widget yang ditampilkan dalam tabber ada 4 (0, 1, 2, 3 empat kan jumlahnya).

    Sidebarname adalah id sidebar letak tabber nantinya, bisa anda letakkan di kiri menggantinya dengan sidebarleft atau bisa juga diletakkan di tengah, yang perlu diperhatikan Anda harus mencari id dimana tabber ini akan diletakkan, biasanya tempatnya seperti kode di bawah ini (perhatikan yang warna kuning) :
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
  7. Setelah itu Save/Simpan template, sudah selesai.
Setelah itu anda tinggal membuat 4 widget yang akan ditampilkan dalam tabber, ingat dikasih judul semua ya widgetnya. Itu tadi tutorial dasar dari saya untuk membuat tabber sederhana dengan jquery, silahkan dimodifikasi sendiri warna serta tampilan lainnya. Sesuaikan dengan komposisi warna blog Anda sehingga tabber ini semakin memperindah tampilan blog dan pengunjung semakin betah berlama-lama di blog Anda. Selamat mencoba dan semoga bermanfaat.....


Script source by : Abu Farhan
Read More --►

Sabtu, 04 Februari 2012

Membuat Image Slider Berdasarkan Kategori Tertentu

Gambar slideshow yang sering kita lihat di bawah header atau sering disebut sebagai image slider banyak sekali menghiasi halaman pada sebuah blog. Sekarang ini banyak sekali template blogger yang bagus dan dihiasi dengan berbagai macam slider yang tujuannya untuk memperindah tampilan. Permasalahan yang timbul sekarang adalah kita terkadang malas atau kurang teliti dalam memasukkan satu persatu keterangan dalam slider tersebut, baik itu URL gambar maupun URL post yang dituju. Seperti pada tutorial saya sebelumnya mengenai cara membuat slider gambar ala Yahoo, disitu anda harus memasukkan URL dan keterangan slider satu persatu.

image slider maskolis

Kali ini saya akan memberikan satu solusi berupa tutorial membuat image slider berdasarkan kategori tertentu, dimana Anda tidak perlu lagi memasukkan satu persatu keterangan dalam slider, jadi Anda tinggal mengganti dengan kategori atau label yang ingin ditampilkan dalam slider, gambarnya seperti diatas dan demonya seperti slider yang ada disini. Baik langsung saja pada cara pemasangannya :

Langkah Pertama
  1. Login ke blogger dengan akun anda
  2. Kemudian klik Tata Letak > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas kode ]]></b:skin>
    #featured{margin-bottom:8px}
    .sliderwrapper{position: relative;overflow: hidden;height: 240px}
    .sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
    .pagination{text-align: left;padding:8px 0px}
    .pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
    .pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
    .featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
    .featuredPost a{color:#fff}
    .featuredPost a:hover{color:#dedde5}
    .featuredPost h2{margin:0;font-size:12px;line-height:1}
    .featuredPost span{font-size:10px}
    .featuredPost p{font-size:11px}
Langkah Kedua
  1. Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>
    <script>
    //<![CDATA[
    /* Script from:http://simplexdesign.blogspot.com/ */
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbOTj_AA-lZKYQn_3wqqo5n0E_kMgTO7FgPTcl52UI4mmUhhBDJWf6yhHQ5HnC5AEoNgaU2IJmg1jOC_Trauusr8EGWMUTe-hcHMZtvCqxC2meaUeOkUu3EFmAPE94EFtbW6Y-6-hE-Q/s1600/no+image.jpg";
    showRandomImg = true;
    aBold = true;
    summaryPost = 100;

    numposts1 = 5;
    label1 = "misteri";

    function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

    function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}
          
    if ("content" in entry) {
    var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
    var postcontent = entry.summary.$t;}
    else var postcontent = "";
    postdate = entry.published.$t;
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
    }}

    var daystr = day+ ' ' + m + ' ' + y ;
    var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="370" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';    
    document.write(trtd);     
    j++;
    }}
    //]]>
    </script>
  2. Perhatikan kode yang saya beri huruf tebal label1 = "misteri"; itu adalah label atau kategori yang akan ditampilkan di slider, disini saya memilih label misteri. Anda nanti tinggal mengganti dengan label yang diinginkan. Perhatikan juga kode img width="370" height="240"  itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan  template Anda.
  3. Setelah itu, letakkan kode di bawah ini sebelum kode </body> (letakkan diatasnya saja)
    <script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>
    <script>
    //<![CDATA[
    featuredcontentslider.init({
    id: "slider1", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
    enablefade: [true, 0.5], //[true/false, fadedegree]
    autorotate: [true, 6000], //[true/false, pausetime]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    })
    //]]>
    </script>
  4. Langkah terakhir, yaitu untuk memanggil agar slider tersebut tampil di halaman depan anda cari kode <div id='main-wrapper'> jika anda ingin slider tampil di atas main-wrapper seperti pada demo, dan letakkan kode berikut di bawahnya  :
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div id='featured'>
    <div class='sliderwrapper' id='slider1'>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    </div>
    <div class='pagination' id='paginate-slider1'>
    </div>
    </div>
    </b:if>
  5. Langkah terakhir Save/simpan template, membuat slider image berdasarkan kategori tertentu sudah selesai.
Yang perlu diperhatikan disini adalah kode label1 = "misteri" pada langkah kedua point pertama, misteri adalah label yang ditampilkan dalam slider. Anda bisa menggantinya dengan label atau kategori yang diinginkan. Bagi pengguna template Johny Simple Magazine atau Creating Website Modifikasi, bisa langsung dipraktekkan. Sekian tutorial kali ini jika masih ada yang kurang jelas bisa ditanyakan lewat kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Slider script source : simplex design
Read More --►

Senin, 30 Januari 2012

Johny Darkgamer, Template Untuk Gamer Mania

Bagi teman-teman yang suka dengan game, kali ini saya menyediakan satu lagi template untuk para gamer mania. Template ini saya beri nama Johny Darkgamer, sesuai dengan warnanya yang hitam dan hanya sedikit warna kuning orange sekedar memperindah tampilan. Fitur template ini sangat sederhana, di bawah header saya meletakkan slider carousel dan di sidebar terdapat tabber yang tinggal memasang empat widget yang ingin ditampilkan disana.

Berikut ini screenshot tampilan dari template Johny Darkgamer (klik untuk memperbesar gambar) :
Home Page

johny darkgamer

Postpage

johny darkgamer

Fitur yang terdapat pada template ini  :
  1. Slider Carousel, untuk mengganti dengan gambar dan URL anda tinggal cari kode di bawah ini :
    <a href="http://creatingwebsite-maskolis.blogspot.com/" title="God of War: Ghost of Sparta Review"><img alt="God of War: Ghost of Sparta Review" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipopFNJt_UABbd-Xy4tdrqmdKmO-ukYxDgmnDjAakvQuwS7aZFd9aFtYScK0KJDz6MFi4tp_w47XOg-o_1IxD1q8Aw1N8JYyH4lcsnOUrV5nYA9Khv-PfwhHOOIpmtU4qfx-pyaok4jpQ/s1600/index8.jpg" width="143" /></a>
    <h2 class="titleg"><a href="http://creatingwebsite-maskolis.blogspot.com/" rel="bookmark" title="Permanent Link to God of War: Ghost of Sparta Review">God of War: Ghost of Sparta Review</a></h2>
    Keterangan :
    -  Warna merah : URL post
    -  Warna kuning : URL gambar
    -  Warna biru : Keterangan dan judul gambar
  2. SEO friendly, Anda tinggal memasukkan meta tag yang sudah saya sediakan di bawah kode<head>
  3. Tabber sidebar, Anda tinggal memasukkan empat widget yang otomatis akan menjadi tabber sidebar
  4. Menu navigasi dropdown dengan sub menu transparan
  5. Breadcrumb ready
  6. Sharing artikel via FB, twitter dan Google+ yang juga sudah ada di bawah tiap postingan
  7. Twitter follower count di bawah navigasi kedua
  8. Dan tentunya kolom untuk pemasangan iklan bagi Anda yang ingin memonetisasi blog
Template ini tidak hanya untuk kontent game saja, tetapi juga dapat Anda isi dengan kontent lainnya, seperti berita, tutorial, atupun untuk toko online juga bisa terserah Anda mau diisi apa. Di bawah ini sudah saya siapkan link demo bagi yang ingin melihat secara langsung, juga tidak lupa link download bagi Anda yang mau mencobanya. Jika masih ada yang mau ditanyakan, isi kotak komentar yang ada di bawah, sekian dan semoga bermanfaat. Happy blogging...... untuk membuat slider otomatis baca Membuat Image Slider Berdasarkan Kategori Tertentu

UPDATE TEMPLATE :
Karena tempat penyimpanan google code saya kena banned sama google, kode script yang disimpan disitu tidak bisa dibuka semua sehingga slider carousel Johny Dargamer template tidak jalan, untuk mengatasinya cari kode di bawah ini pada posisi Edit HTML (diatas </head>) :
<script src='http://creatingwebsite.googlecode.com/files/ikansuper.js' type='text/javascript'/>
<script src='http://creatingwebsite.googlecode.com/files/muter-muter.js' type='text/javascript'/>
Setelah ketemu ganti kode tersebut dengan kode script di bawah ini :
<script src='http://jamu-martin.googlecode.com/files/jfish.js' type='text/javascript'/>
<script src='http://jamu-martin.googlecode.com/files/superfish.js' type='text/javascript'/>
Kemudian save templates
, jika ada yang kesulitan dalam memasang template silhkan di download ulang sudah saya perbaiki templatesnya.

Baca juga :


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
Read More --►

Kamis, 26 Januari 2012

MEMBANGUN MOTIVASI DALAM DIRI


Cita-cita atau tujuan hidup ini hanya bisa diraih jika Anda memiliki motivasi yang kuat dalam diri Anda. Tanpa motivasi apa pun, sulit sekali Anda menggapai apa yang Anda cita-citakan. Tapi tak dapat dipungkiri, memang cukup sulit membangun motivasi di dalam diri sendiri. Bahkan, mungkin Anda tidak tahu pasti bagaimana cara membangun motivasi di dalam diri sendiri. Padahal, sesungguhnya banyak hal yang dapat dilakukan untuk menumbuhkan motivasi tersebut. Caranya…? coba simak kiat berikut ini:


Ciptakan Sensasi
Ciptakan sesuatu yang dapat “membangunkan” dan membangkitkan gairah Anda saat pagi menjelang. Misalnya, Anda berpikir esok hari harus mendapatkan keuntungan 1 milyar rupiah. Walau kedengarannya mustahil, tapi sensasi ini kadang memang semangat Anda untuk berkarya lebih baik lagi melebihi apa yang sudah Anda lakukan kemarin.


Kembangkan Terus Tujuan Anda
Jangan pernah terpaku pada satu tujuan yang sederhana. Tujuan hidup yang terlalu sederhana membuat Anda tidak memiliki kekuatan lebih. Padahal, guna meraih sesuatu Anda memerlukan tantangan yang lebih besar untuk mengerahkan kekuatan Anda yang sebenarnya. Tujuan hidup yang besar akan membangkitkan motivasi dan kekuatan tersendiri dalam hidup Anda.


Tetapkan Saat Kematian
Anda perlu memikirkan saat kematian meskipun gejala ke arah itu tidak dapat diprediksikan. Membayangkan saat-saat terakhir dalam hidup ini sesungguhnya merupakan saat-saat yang sangat sensasional. Anda dapat membayangkan ‘flash back’ dalam kehidupan Anda. Sejak Anda menjalani masa kanak-kanak, remaja, hingga tampil sebagai pribadi yang dewasa dan mandiri. Jika Anda membayangkan ‘ajal’ Anda sudah dekat, maka akan memotivasi Anda untuk berbuat lebih banyak lagi selama hidup Anda.


Tinggalkan Teman yang Tidak Perlu
Jangan ragu untuk meninggalkan teman-teman yang tidak dapat mendorong Anda mencapai tujuan. Sebab, siapa pun teman Anda, seharusnya mampu membawa Anda pada perubahan yang lebih baik. Ketahuilah, bergaul dengan orang-orang yang optimis akan membuat Anda berpikir optimis pula. Bersama mereka, hidup ini terasa lebih menyenangkan dan penuh motivasi.


Hampiri Bayangan Ketakutan
Saat Anda dibayang-bayangi kecemasan dan ketakutan, jangan melarikan diri dari bayangan tersebut. Misalnya, selama ini Anda takut akan menghadapi masa depan yang buruk. Datang dan nikmati rasa takut Anda dengan mencoba mengatasinya. Saat Anda berhasil mengatasi rasa takut, saat itu Anda telah berhasil meningkatkan keyakinan diri bahwa Anda mampu mencapai hidup yang lebih baik.


Ucapkan “Selamat Datang” pada Setiap Masalah
Jalan untuk mencapai tujuan tidak selamanya semulus jalan tol. Suatu saat, Anda akan menghadapi jalan terjal, menanjak, dan penuh bebatuan. Jangan memutar arah untuk mengambil jalan pintas. Hadapi terus jalan tersebut dan pikirkan cara terbaik untuk bisa melewatinya. Jika Anda memandang masalah sebagai sesuatu yang mengerikan, Anda akan semakin sulit termotivasi. Sebaliknya, bila Anda selalu siap menghadapi setiap masalah, maka Anda seakan memiliki energi dan semangat berlebih untuk mencapai tujuan Anda.


Mulailah dengan Rasa Senang
Jangan pernah merasa terbebani dengan tujuan hidup Anda. Coba nikmati hidup dan jalan yang Anda tempuh. Jika sejak awal Anda sudah merasa ‘tidak suka’, maka rasanya, motivasi hidup tidak akan pernah Anda miliki.


Berlatih dengan Keras
Tidak bisa tidak, Anda harus berlatih terus bila ingin mendapatkan hasil terbaik. Pada dasarnya, tidak ada yang tidak dapat Anda raih jika Anda terus berusaha keras. Semakin giat berlatih, semakin mudah pula mengatasi setiap
kesulitan.

Kesimpulan: motivasi adalah ‘sesuatu’ yang dapat menumbuhkan semangat Anda dalam rangka mencapai tujuan. Dengan motivasi yang kuat di dalam diri sendiri, Anda akan memiliki apresiasi dan penghargaan yang tinggi terhadap diri dan hidup ini. Sehingga Andapun tidak ragu lagi melangkah mencapai tujuan dan cita-cita hidup Anda..!
Read More --►

Rabu, 25 Januari 2012

Johny Magazine 2, Darkmatter Template For Your Site

Karena keterbatasan koneksi internet saya akan persingkat saja artikel kali ini. Bagi yang suka dengan warna gelap terutama hitam, saya menyediakan satu lagi template untuk anda. Template ini saya kasih nama Johny Magazine 2, Darkmatter Template For Your Site. Sesuai dengan namanya template ini lanjutan dari versi pertama Johny Magzine pada versi sebelumnya hanya bagian header dan footer saja yang hitam, tapi yang versi kali ini bagian post body semua hitam (siapa takut....?)

Template ini dibuat terinspirasi dari template Joomla Darkmatter dari RocketTheme, langsung saja di bawah ini screenshotnya, lebih lengkapnya Anda bisa langsung klik Demo yang ada di bagian bawah.

johny magazine 2

Jika Anda tertarik menggunakan template ini, semuanya sudah saya sertakan pada file zip yang akan Anda download, mulai dari slider, sidebar accordion, kotak advertise dan label atau category semua sudah ada. Anda tinggal memasukkan ke dalam widget tapi jangan lupa ganti semua URL-nya dengan URL anda sendiri.

Untuk Flash News yang terdapat pada navigasi atas silahkan membuat sendiri, yaitu masuk ke http://www.rsspump.com/ masukkan URL feed blog anda, setelah itu copy kodenya letakkan di bawah kode ini (letakkan pada titik-titik) :
<div class='toppic'>
<div class='topnav'>
<div style='float:left;padding:9px 0px;'>
...........................................................
...........................................................
Oiya satu lagi hampir lupa, template ini sengaja tidak saya tambahkan kotak pencari. Jadi Anda mesti membuat sendiri terserah mau diletakkan dimana atau bisa juga ambil dari bawaan blogspot, saya kira itu sangat mudah. Dan bagi yang masih sering menggunakan static page template ini sudah saya modifikasi sehingga static page dapat muncul seperti post page (klik sample page yang ada di navigasi).

Lebih lengkapnya silahkan langsung saja lihat demonya. Bagi yang tertarik silahkan download template ini yang sudah saya sertakan kode script yang harus dipasang di sidebar tengah maupun sidebar kanan. Sekian dulu ya, sudah mulai lemot ini jaringan gara-gara anginnya kenceng banget mas/mbak yang baik-baik, selamat mencoba dan semoga bermanfaat.

NB :
Saya sebenernya juga membuat Johny Magazine 2 ini dalam versi light tanpa static page dengan menambahkan slider Yahoo dan sharing social bookmark dari Mashable. Yah ini hanya sekedar sharing template saja ya daripada tidak terpakai, kalau ada yang tertarik silahkan lihat demonya disini dan kalau ada yang mau memakai template ini silahkan download disini. (Jika ada yang ditanyakan khusus untuk Johny Magazine 2 Light tinggalkan email anda, nanti akan saya kirim script lengkap untuk pemasangan widgetnya)

Wah ternyata banyak juga yang berminat dengan template Johny Magazine 2 versi light ini, baiklah daripada saya kirim ke email teman-teman satu per satu berikut ini saya kasih link untuk download langsung script untuk pemasangan widgetnya. Jangan lupa jika anda sudah download ganti URL nya dengan URL Anda sendiri. Ini link downloadnya Script Widget

johny magazine 2 light

Updates :
Karena sesuatu hal, tempat penyimpanan saya di google code tidak bisa dibuka. Oleh karena itu news ticker (Johny Magazine 2 Light) dan sidebar accordion (johny Magazine 2) tidak bisa berjalan seperti semula. Untuk mengatasinya Anda harus mengganti kode berikut ini pada posisi edit HTML :
  1. Sidebar accordion
    Cari kode di bawah ini :
    <script src='http://maskolis.googlecode.com/files/johny-manis.js' type='text/javascript'/>
    Ganti dengan kode berikut :
    <script src='http://johnytemplate.googlecode.com/files/johnysimple.js' type='text/javascript'/>
  2. News ticker
    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'/>
  3. Khusus untuk pengguna Johny Magazine 2 Light jika slider Yahoo tidak bisa jalan anda cari URL javascript berikut ini pada posisi Edit HTML :
    http://maskolis.googlecode.com/files/jquery.min.js
    Dan Anda harus menggantinya dengan URL di bawah ini
    http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
Terakhir save templates

Read this : Johny Darkgamer, Template Gamer Mania

Read More --►
Energy Saving Mode
Gunakan Mouse untuk Keluar Mode Energy Saving