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

Rabu, 29 Agustus 2012

Membuat Tab View Widget Kategori Mantab Banget

Kali ini saya akan membuat satu lagi tutorial mengenai salah satu fitur yang ada pada template Johny Sompret Banget, yaitu membuat tab view widget per kategori. Sebelumnya saya juga pernah membahas cara membuat simple tabber pada sidebar. Ya rencananya saya nanti akan membuat semua tutorial tentang berbagai fitur yang ada pada template-template buatan saya. Tidak ada yang mesti dirahasiakan, semua fitur akan saya jelaskan satu persatu cara pembuatannya, sehingga ke depannya diharapkan Anda mampu membuat template sendiri, syukur bisa dibagikan kepada teman-teman blogger yang lain atau minimal dipakai sendiri. Dan siapa tahu setelah itu ada yang mau menjadi partner saya dalam membuat template blogger atau paling tidak membuat sebuah tutorial baru untuk bisa dibagikan kepada pengguna blogger, karena selama ini saya bekerja sendirian, bikin tutorial sendiri, bikin template juga sendiri, jadi kalau ada yang mau bantu, silahkan saya sangat berterima kasih sekali.

Kembali ke tutorial tab view widget per kategori, widget ini menampilkan 4 post dengan thumbnail dalam tiap satu label atau kategori, untuk lebih jelasnya silahkan lihat gambar di bawah, dan klik demo biar lebih jelas.



Langsung saja pada cara membuatnya :
  1. Pertama Anda meesti login ke blogger dengan akun Anda
  2. Kedua pilih blog yang ingin anda tambahkan slider ini.
  3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    #tabber-wrapper{width:640px;float:left;word-wrap:break-word;overflow:hidden}
    ul.tab-view{float:left;list-style:none;height:32px;border-bottom:1px solid #aaa;border-left:1px solid #aaa;width:638px;margin:0;padding:0}
    ul.tab-view li{float:left;height:31px;line-height:31px;border:1px solid #aaa;border-left:none;overflow:hidden;position:relative;background:#eee;margin:0 0 -1px;padding:0}
    ul.tab-view li a{text-decoration:none;color:#26231c;display:block;border:1px solid #eee;outline:none;font-weight:700;padding:0 15px}
    html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{background:#eee;color:#026ab5;border-bottom:1px solid #eee}
    .tab-wrapper{border:1px solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:638px;background:#eee;margin-bottom:15px}
    .tabber{padding:10px 0}
    .tabber .column{float:left;display:inline;width:146px;margin:0 0 0 11px}
    .tabber h2{font:bold 12px Arial;line-height:15px;margin:7px 0 5px}
    .tabber h2 a{color:#222}
    .tabber h2 a:hover{color:#026ab5}
    Karena pada blog demo yang saya gunakan lebar main-wrapper (kolom postingan) adalah 640px maka untuk membungkus tab view widget lebarnya harus sama, yaitu 640px. Anda bisa sesuaikan dengan lebar main-wrapper pada template yang Anda gunakan.
    Dan untuk tab viewnya sendiri lebarnya harus dikurangi 2px (1px kanan dan kiri), karena tab ini dibungkus dengan border setebal 1px, sehingga lebarnya menjadi 638px. Lebar tiap satu post disini 146px, jika pada template yang Anda gunakan lebar main-wrapper lebih kecil, maka lebar untuk satu post ini pun juga harus diperkecil sehingga jarak antara bagian sisi kanan dan kiri sama.
  6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    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=80;numposts=4;Title1="Norah Jones";Title2="Diana Krall";Title3="Sting";Title4="Basia";Title5="Sade";Title6="Jamie Cullum";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 showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;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=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];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="column"><a href="'+posturl+'"><img width="146" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}}
    //]]>
    </script>
    Keterangan :
    Perhatikan URL script warna biru diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat tab view widget. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna biru diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Tulisan warna merah : Norah Jones, Diana Krall dan seterusnya adalah judul untuk tab view widget, anda bisa ganti sesuai katehori yang ingin ditampilkan pada widget tersebut. Warna biru (146 dan 95) diatas adalah ukuran lebar dan tinggi thumbnail pada satu post kategori, silahkan ukurannya disesuaikan.
  7. Kemudian masukkan kode berikut sebelum kode </body> :
    <script type='text/javascript'>
     //<![CDATA[
    jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false})});
     //]]>
    </script>
  8. Langkah selanjutnya adalah bagaimana cara menempatkan tab view widget tersebut pada blog kita. Jika Anda ingin meletakkan pada bagian atas sebelum post seperti pada demo, cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :
    <div id='tabber-wrapper'>
    <ul class='tab-view'>
    <li><a href='#tab1'><script>document.write(Title1);</script></a></li>
    <li><a href='#tab2'><script>document.write(Title2);</script></a></li>
    <li><a href='#tab3'><script>document.write(Title3);</script></a></li>
    <li><a href='#tab4'><script>document.write(Title4);</script></a></li>
    <li><a href='#tab5'><script>document.write(Title5);</script></a></li>
    <li><a href='#tab6'><script>document.write(Title6);</script></a></li>
    </ul><div class='clear'/>
    <div class='tab-wrapper'>
    <div class='tabber' id='tab1'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Norah Jones Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab2'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Diana Krall?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab3'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sting?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab4'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Basia?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab5'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sade Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab6'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Jamie Cullum Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='clear'/>
    </div></div>
    Tulisan warna merah pada kode diatas adalah label atau kategori yang saya tampilkan pada tab view widget, silahkan ganti dengan label Anda sendiri dan sesuaikan dengan judul tab view pada langkah nomer 6 diatas. Dan jika Anda ingin menampilkan widget ini di bawah postingan, letakkan kode tersebut diatas kode berikut ini (jika tidak ada cari yang mirip) :
    <!-- spacer for skins that want sidebar and main to be the same height-->
    <div class='clear'>&#160;</div>

    </div> <!-- end content-wrapper -->
  9. Terakhir, save templates dan lihat hasilnya. 
Nah itu tadi tutorial membuat tab view widget yang banyak ditanyakan oleh teman-teman blogger pada artikel sebelumnya. Silahkan dicoba, jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.
Read More --►

Sabtu, 25 Agustus 2012

2 Template Kurang Kerjaan

Malam ini saya akan bagi lagi dua buah template untuk teman-teman blogger semua. Template ini sudah lama saya buat, waktu bulan puasa kemarin, pas waktu itu lagi sibuk ngurus kerjaan ya jadinya baru sekarang sempat di publish. Sudah agak lama, ya kira-kira satu bulan kalau tidak salah saya tidak berbagi template untuk teman-teman blogger. Saya rencana mau membuat template blogger sampai jumlahnya sekitar seratus, setelah itu saya berpikir untuk memutuskan mencoba membuat theme untuk Wordpress, ya itu sih hanya rencana saja realisasinya tergantung bagaimana nanti, karena membuat theme untuk Wordpress di samping butuh pengetahuan tentang kode script yang lebih, juga dibutuhkan banyak biaya, seperti mesti punya domain dan hosting sendiri dengan kapasitas yang besar.

Kedua template ini mempunyai header dan navigasi yang sama hanya berbeda warna, untuk template yang satu bertipe magazine dan satunya lagi template dua kolom, lebih sederhana dan tidak terlalu sulit untuk memasangnya. Baiklah langsung saja, berikut ini kedua template tersebut :

Johny Sompret Banget

banget


Jika Anda ingin menyimpan semua javascript yang ada pada template ini silahkan klik link download di bawah ini :


Template ini bertipe magazine, banyak sekali fitur yang saya pasang pada template ini. Tidak terlalu susah untuk memasangnya, apalagi jika Anda sudah tebiasa dengan template buatan saya akan sangat mudah untuk memahaminya. Untuk lebih memudahkan dalam pemasangan widget pada template ini perhatikan screenshot layout di bawah ini :


Saya sengaja menggunakan layout Old Blogger Interface untuk memudahkan semua tampilan, soalnya kalau layout blogger baru ada fitur scroll-nya jadi tidak bisa sampai ke bawah. Berikut ini cara pemasangan fitur-fitur yang ada pada template ini :
  1. Slider
    Slider pada template ini bekerja otomatis menampilkan postingan terbaru, Cara memasangnya, perhatikan kolom pada layout diatas yang sudah saya beri tulisan slider. Setelah itu masukkan kode berikut ini ke dalamnya :
    <div id='featuredContent'>
    <div id='slideshow'>
    <div id='slideshowThumbs'>
    <ul><script>    
    document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
    </script> </ul>
    </div>
    <div class='post' id='slideshowContent'>
    <script>    
    document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
    </script></div>
    </div>
    <script type='text/javascript'>
    $(function() {
    $("#slideshowThumbs ul").tabs("#slideshowContent > div", {
    effect: 'fade',
    fadeOutSpeed: 1000,
    rotate: true
    }).slideshow({
    clickable: true,
    autoplay: true,
    interval: 3000
    });
    });
    </script>
    <div class='clear'>
    </div>
    </div>
  2. Tab View Widget per Label


    Perhatikan gambar diatas, untuk merubah judul tab (diary, jazz dan sebagainya) cari kode berikut ini di Edit HTML :
    Title1="DIARY";Title2="JAZZ";Title3="HEALTH";Title4="SPORT";Title5="COMEDY"
    Setelah ketemu ganti tulisan berwarna biru diatas dengan judul yang ingin Anda tampilkan pada tab view widget kategori.

    Sedangkan untuk mengisi widget tersebut dengan label, masih pada Edit HTML cari kode berikut ini (jangan lupa untuk mencentang expand widget template) :
    <div class='tabber' id='tab1'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab2'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/lifestyle?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab3'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/economics?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab4'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/diary?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='tabber' id='tab5'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/health?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
    </script></div>
    <div class='clear'>
    </div>
    Tulisan warna merah diatas adalah kelima label yang saya masukkan pada widget tabber kategori ini, silahkan Anda ganti dengan label Anda dan sesuaikan dengan judul tab view yang sudah dibuat.
  3. Widget Label
    Yang termasuk dalam widget label pada layout template ini adalah : Label 1, Label 2, Label 4, Label 4, Label 5 dan Video Category. Anda tinggal memasukkan atau ketik nama label yang sudah Anda buat pada kotak tersebut. Seperti contoh gambar di bawah :
    maskolis
  4. Widget Subscribe me
    Letaknya pada sidebar sebelah kanan paling atas, masih di layout kemudian pilih kotak HTML/Javascript kemudian masukkan kode berikut ini di dalamnya :
    <style type='text/css'>
    .social a{color: #6e6e6e;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
    .social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
    .social a:active{color:#000;border-color: #444;}
    .sub-box{width:300px;background:();padding: 2px 5px 7px 2px;font-family:Droid Sans,Helvetica,Arial;}
    .emailform{margin:16px 0 0; display:block; clear:both;}
    .emailtext{margin:10px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgJgghtNGnqVDQs-MA0BMCiRRMME-l2wgZ8Sk3npvP5laR1F_r_LMjMrk_UwIhGLqj5QxmgxgD-OB7uUDVWPwOyuMALdTR0ReXDigvW9NOfB8mF3dUYJUIUC9zuGP1G3ShHbL4rvKgMEs/s1600/email.png) no-repeat scroll 4px center;padding:6px 5px 6px 34px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:175px;}
    .emailtext:hover{background: #f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgJgghtNGnqVDQs-MA0BMCiRRMME-l2wgZ8Sk3npvP5laR1F_r_LMjMrk_UwIhGLqj5QxmgxgD-OB7uUDVWPwOyuMALdTR0ReXDigvW9NOfB8mF3dUYJUIUC9zuGP1G3ShHbL4rvKgMEs/s1600/email.png) no-repeat scroll 4px center;border-color:#999;}
    .emailtext:focus{outline:none;}
    .sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:5px 10px; border:1px solid #666;cursor:pointer;background:#999}
    .sub-button:hover{color:#444;border-color: #999;background:#ccc}
    </style>
    <center><div class="social" style="padding: 0pt 0pt 0pt 5px;">
    <table><tbody><tr><td>
    <a href='http://feedburner.google.com/fb/a/mailverify?uri=maskolis' target='_blank'><img alt='newsletters' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBYS6mDWVsW97MSgIYEvcTPLPrqQwiF9FPtOGMeoYzdwbaOSwoSTCwgvFvPuLLnJq9MEsf0FgEOoMGpRDDLU8_8ufNiY7l7Clb8kBV3U_7XO5_9PAV3z01tONS7MttvfZzPDRFpb7A54/s1600/mail.png" border="0" title='newsletters'/></a> </td>
    <td> <a href='http://feeds.feedburner.com/maskolis' target='_blank'><img alt='rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ75V-OOXvq2bcDkwSDSHdUYSGxelVez6WKMDxFxMhzfgesAhzNi0FK6Dn-YPHbPAHUA_NTL8DI0CemueIwnVbCMYrC5esPZxMonBwcIkwQV39CUinXmB_Wvjs8DizXuoxklT45626WcE/s1600/rss.png" border="0" title='rss'/></a> </td>
    <td> <a href='http://twitter.com/maskolis' target='_blank'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH4vP5eiqSP5UkGXClY6tfPl5KTymBsuQxagobE_ZadG5UwU0pizDppUn9Z60azE1H4zN9TKgulTQ_WyOypqzxYUyX6NOGmKGCyjpUuyZEP57JfWFrlWroQ6vVOM4SlFr1S0uROYMX_Ck/s1600/twitter.png"  border="0" title='twitter'/></a> </td>
    <td> <a href='http://www.facebook.com/maskolis' target='_blank'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3HlpBtqtJ8h0uBqoESfSLsK60LrEWAuvbG2zrVquwbHEDdgCwLtr9YVom8lc6fHxlP5Bw92Q6N2p9hYIKy2ZWy1SJ48MlLNABGrKbuusn8Gcwthn7WI2IaBCkgVk2e3qjHw6-ch-MxU4/s1600/facebook.png"  border="0" title='facebook'/></a> </td>
    <td> <a href='http://www.youtube.com/maskoli' target='_blank'><img alt=' youtube' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv5DctkwS9v_v6go39z58vlx6lPunz3Z0u73qEapwrsH0fDdpM0DEiGZI-a-FuwFrDoEPw5wfLrwTBLwDordOL2EpS43DZcG-rXrA4M5z77U3FbSurte7I8ecmm-qSfsH7Hx2SCK6nX10/s1600/youtube.png"  border="0" title='youtube'/></a>
    </td></tr></tbody></table> </div></center>
    <center>
    <div class='sub-box'>
    <div style="text-align: left; display: inline-block;">
    <h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8>
    <small><i>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.</i></small>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=maskolis', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input type="hidden" value="maskolis" name="uri"/>
    <input type="hidden" name="loc" value="fr_FR" />
    <input type="text" 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;}" value="Enter your email..." name="email" class="emailtext" />
    <input type="submit" class="sub-button" value="Enter" title='' alt='' />
    </form></div></div></center>
  5. Reply Comment
    Untuk mengaktifkan fungsi reply pada komantar pada template ini, ganti Blog ID pada template ini pada Edit HTML (jangan lupa centang expand widget template) : 6056708173853814595 setelah ketemu ganti dengan blog ID anda
Johny Ganteng Banget

Johny Ganteng Banget



Bagi Anda yang menginginkan tampilan seperti template Johny Sompret Banget tapi dengan bentuk lebih sederhana dan lebih ringan yang pasti, saya juga menyiapkan satu lagi template yang bisa anda gunakan. Template ini dinamakan demikian karena disesuaikan dengan yang bikin.... hehehehehe. Pada template ini hanya ada dua fitur yang Anda perlu diperhatikan, yaitu :
  1. Recent Post
    Terdapat pada sidebar kanan paling atas, cara pasanganya, masuk ke layout kemudian pilih HTML/Javascript kemudian masukkan kode berikut ini ke dalamnya :
    <style type='text/css'>
    #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
    #terbaru{margin:0px}
    .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
    .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
    .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
    .mas-elemen:hover{background-color:#c3c3c3}
    .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
    #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6hiSL8iRx5Dr52DYjJHh473lzkoHauJyPWz0AlCZ1xz8pmjPHzbHhMMBXjXgle2nS5Yxc7iV05NtEtGl05r9TahJSGCU9XuGqiQ-LcGm_ApBq6pQWVowR9uIkuKWQ-rGmrUc7Brq5hsE/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
    #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
    #mas-navigasifeed:hover{background-color:#c3c3c3}
    #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
    #mas-navigasifeed span{padding:5px 10px}
    #mas-navigasifeed .next{float:right}
    #mas-navigasifeed .previous{float:left}
    #mas-navigasifeed .home{text-align:center}
    #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://johny-gantengbanget.blogspot.com/";
    var charac = 100;
    var urlprevious, urlnext;

    function maskolisfeed(johny,banget){
    var showfeed = johny.split("<");
    for(var i=0;i<showfeed.length;i++){
    if(showfeed[i].indexOf(">")!=-1){
    showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
    }
    }
    showfeed =  showfeed.join("");
    showfeed = showfeed.substring(0,banget-1);
    return showfeed;
    }
    function showterbaru(json) {
    var entry, posttitle, posturl, postimg, postcontent;
    var showblogfeed = "";
    urlprevious = "";
    urlnext = "";
    for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
    urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
    urlnext = json.feed.link[k].href;
    }
    }
    for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }
    if ("content" in entry) {
    postcontent = entry.content.$t;
    } else if ("summary" in entry) {
    postcontent = entry.summary.$t;
    } else {
    postcontent = "";
    }
    if ("media$thumbnail" in entry) {
    postimg = entry.media$thumbnail.url;
    } else {
    postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbOTj_AA-lZKYQn_3wqqo5n0E_kMgTO7FgPTcl52UI4mmUhhBDJWf6yhHQ5HnC5AEoNgaU2IJmg1jOC_Trauusr8EGWMUTe-hcHMZtvCqxC2meaUeOkUu3EFmAPE94EFtbW6Y-6-hE-Q/s1600/no+image.jpg";
    }
    showblogfeed += "<div class='mas-elemen'>";
    showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
    showblogfeed += "</div>";
    }
    document.getElementById("terbaru").innerHTML = showblogfeed;
    showblogfeed = "";
    if(urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
    } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
    }
    if(urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
    } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
    }
    showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
    document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
    }

    function navigasifeed(url){
    var p, parameter;
    if(url==-1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
    } else if (url==1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
    } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
    }
    parameter += "&callback=showterbaru";
    incluirscript(parameter);
    }
    function incluirscript(parameter) {
    if(startfeed==1) {removerscript();}
    document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
    document.getElementById("mas-navigasifeed").innerHTML = "";
    var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
    var terbaru = document.createElement('script');
    terbaru.setAttribute('type', 'text/javascript');
    terbaru.setAttribute('src', archievefeed);
    terbaru.setAttribute('id', 'MASLABEL');
    document.getElementsByTagName('head')[0].appendChild(terbaru);
    startfeed = 1;
    }
    function removerscript() {
    var elemen = document.getElementById("MASLABEL");
    var parent = elemen.parentNode;
    parent.removeChild(elemen);
    }
    onload=function() { navigasifeed(0); }
    //]]>
    </script>
    <div id="terbaru"></div>
    <div id="mas-navigasifeed"></div>
  2. Reply Comment
    Untuk mengaktifkan fungsi reply pada komantar pada template ini, ganti Blog ID pada template ini pada Edit HTML (jangan lupa centang expand widget template) : 149656394876047094 setelah ketemu ganti dengan blog ID anda.
Itu tadi dua template kurang kerjaan yang saya bagikan malam ini sambil sesekali ngantuk, saya bagikan kepada semua teman blogger di seluruh dunia secara gratis, silahkan dipakai atau di download jika Anda berminat. Jika ada hal lain tentang kedua template diatas yang kurang jelas, silahkan tinggalkan komentar, saya berusaha sebisa mungkin untuk menjawab. Akhir kata selamat mencoba semoga bermanfaat 
Read More --►

Jumat, 24 Agustus 2012

Pengumuman untuk Pengguna Template (Lagi)

Sebelumnya saya ucapkan selamat Idul Fitri 1433 H. Mohon Maaf Lahir dan Batin bagi teman-teman blogger yang merayakan. Kesibukan menjelang dan sesudah lebaran membuat aktivitas blogging saya jadi mandeg, tradisi Lebaran di Indonesia memang menyita waktu, meskipun saya bukan termasuk aktivis mudik tapi gara-gara banyak orang mudik saya pun ikut super sibuk, entah itu kegiatan Halal Bihalal antar keluarga, silaturrahmi ketemu teman-teman waktu sekolah dulu, sungguh "mengharuskan" kita untuk sedikit meluangkan waktu bagi mereka.

google code banned maskolis

5 hari menjelang Lebaran saya sudah tidak aktif lagi nge-blog, baru dua hari kemarin saya mencoba untuk membuka blog ini dan ternyata dari 150-an komentar yang masuk banyak yang mengatakan bahwa semua javascript yang saya pasang pada template buatan saya sudah tidak bisa dipakai lagi. Ya bener, ini untuk ketiga kalinya Akun Google Code tempat penyimpanan semua Javascript  saya kena Banned sama empunya, entah apa sebabnya sampai sekarang saya tidak tahu. Lebih parah lagi bukan cuma satu, tapi semua akun Google Code, termasuk akun yang baru saya buat, jika ada di antara teman-teman blogger yang pernah mengalami nasib serupa dan bisa mengatasinya saya sangat berterima kasih sekali jika Anda mau berbagi disini, meskipun paling tidak hanya mengetahui sebab kenapa akun Google Code di-banned. Kalau memang menyalahi aturan, aturan seperti apa yang sudah dilanggar sehingga sebuah akun kena blokir berkali-kali.

Dan kembali saya tegaskan disini, semua itu bukan karena faktor kesengajaan, saya sendiripun juga tidak mengharapkan akun saya kena banned. Karena di samping merugikan para pengguna template, juga membuat saya mesti kerja ulang untuk kembali menyimpan semua javascript tersebut pada akun Google Code yang baru..... somprett nggak sih!!!. Dan kali ini untuk kedua kalinya, saya sengaja menulis artikel ini untuk memberitahukan kepada teman-teman blogger pengguna template buatan saya, pertama saya minta maaf atas ketidaknyamanan ini, kedua, semua javascript yang saya simpan pada akun Google Code yang kena banned sudah saya pindah ke akun yang baru. Jadi silahkan Anda download ulang template yang Anda pakai, atau langsung menuju ke artikel template yang Anda pakai, disitu sudah ada sub judul "Update Templates" (warna merah) di bagian bawah artikel. Jika anda sudah terlanjur memodifikasi template, Anda tinggal ganti URL javascript yang sudah saya update-an terbaru.

Sebagai informasi tambahan, semua javascript yang sudah saya pindah ke akun baru memang masih menggunakan Google Code sebagai hosting, bedanya kali ini saya menggunakan sistem penyimpanan Subversion dengan bantuan software TortoiseSVN sebagai mediasi. Ya banyak yang bilang sistem ini lebih aman karena semua data file yang kita simpan di Google Code terintegrasi melalui TortoiseSVN, sehingga jika Google Code nya kena banned, file yang disimpan masih bisa digunakan. Untuk pengertian subversion sendiri, dan bagaimana subversioning file ke Google Code nanti akan saya bahas pada artikel yang lain. Tapi jika Anda ingin lebih aman lagi dalam menggunakan Javascript, Anda bisa simpan sendiri semua javascript  pada template yang anda pakai di tempat penyimpanan Google Code anda sendiri, bagi yang belum mengetahui cara membuat akun di Google Code dan bagaimana cara menyimpan sebuah file di Google Code, silahkan baca artikel ini.

Demikain tadi pemberitahuhan kali kedua bagi teman-teman blogger pengguna template dari Creating Website. Mohon dimaklumi, saya sendiri tidak menginginkan hal seperti ini terjadi, semua di luar kehendak saya. Jika Anda ingin mengganti URL script yang mati, silahkan langsung menuju ke artikel template yang Anda pakai. Dan terakhir saya mohon maaf belum bisa menjawab semua pertanyaan yang masuk di blog ini maupun di blog Mas Template, karena masih agak sibuk dengan suasana Lebaran. Maaf saya tidak bisa berlama-lama di depan komputer soalnya masih ada "acara" Lebaran lagi yang menunggu. Selamat menikmati liburan dan semoga bermanfaat

Woooyyy... Mbah Google kasih alasan dong kalau mau nge-banned.... somprettt
Read More --►

Jumat, 03 Agustus 2012

Membuat Slider Image Otomatis Joss Banget

Tutorial ini menjawab pertanyaan dari teman debbie irlando manurung alias Zondim, meminta untuk dibuatkan tutorial slider yang ada di Johny Ganteng Banget. Template yang dipakai di blog itu nantinya juga akan saya share, cuma sekarang lagi massa sibuk nguli jadi nanti aja kalau sudah luang waktunya. Ada beberapa template yang nantinya akan saya share tapi kali ini saya buat sederhana, dengan sedikit menggunakan javascript, ya yang pasti lebih enteng dari biasanya. Oke kembali ke tutorial yang akan saya buat, kali ini saya akan membahas tentang cara membuat slider image otomatis sederhana yang akan menampilkan postingan terbaru Anda.

image slider otomatis


Slider ini hanya memakai innerfade jquery dan cycle jquery plugin untuk melembutkan perpindahan content slider (bener nggak ya...?), pengertian Innerfade jquery kira-kira seperti ini :
InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.
Wah malah bingung sendiri saya mas/mbak maklum Inggris saya dapat 6 dulu waktu sekolah, langsung saja pada cara pembuatannya :
  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    #featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
    #featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
    #featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
    .featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
    .featuredTitle a{color:#f7441a}
    .featuredTitle a:hover{color:#000}
    .navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
    ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
    ul.pagination a { float:left; margin:0 5px; display:inline; }
    ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzs6NrFq-ntBYYifmsTzBawjXBIOCIxejrNbZeGCPKe86jLnMFNrV3z-6ncLQb24sQ8tnqSL_hho60QfnkrFahEwqemLKx_z8XmGJqR5lc3SJWyomfhAJJpRTeqvhQKlO-i9QHbUIypgY/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
    ul.pagination a:hover { background-position:0 -12px; }
    ul.pagination a:hover { background-position:0 -12px; }
    ul.pagination a.activeSlide { background-position:0 -12px }
    a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCNFAooYl5Qcso15b-CDd81xs4EUphm7PMMoNiN918AY0U9rD46KLmuktkHxyIeF6IqdgfUUI3tneajKadIikDBytdNCJTA3JnBsSeuGtVzCw9xeHmU25a715n2FMF_gp80A9_eRXSWMs/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
    border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
    a.readmore:hover {color:#ff0}
    Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
  6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    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 = 150;
    summaryTitle = 25;
    numposts  = 7;

    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 showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
        document.write('<div class="slides">')
    if (numposts <= json.feed.entry.length) {
    maxpost = numposts;
    }
    else
           {
      maxpost=json.feed.entry.length;
      }
      for (var i = 0; i < maxpost; 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;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
    document.write(trtd);


    j++;
    }
        document.write('</div>')
    }

    //]]>
    </script>
    Keterangan :
    Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Kode warna biru : 7 adalah jumlah slider yang ditampilkan. Sedangkan angka 340 dan 212 adalah panjang dan lebar image yang ada di slider.
  7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='featuredSlider'>
    <div class='container'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    <div class='navigation'>
    <ul class='pagination'/>     <script>
    $(&#39;.slides&#39;).cycle({
    fx:     &#39;fade&#39;,
    speed:  &#39;slow&#39;,
    timeout: 3000,
    pager:  &#39;.pagination&#39;
    });
    </script>
    </div> </div> <!--end .container-->
    </div>
    </b:if>
    Jika Anda ingin menampilkan slider per kategori atau label tinggal ditambahkan saja kode diatas :
    /feeds/posts/default?max-results
    Menjadi :
    /feeds/posts/default/-/your label?max-results
    Silahkan ganti "your label" dengan kategori yang ingin Anda tampilkan pada slider.
  8. Terakhir, save templates dan lihat hasilnya. 
Itu tadi tutorial membuat Slider image otomatis joss banget yang ada pada Johny Ganteng Banget, jika masih kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat sahur dan semoga bermanfaat.
Read More --►

Kamis, 02 Agustus 2012

Membuat Widget Artikel Terbaru Joss Banget

Tutorial kali ini menjawab pertanyaan dari teman blogger Haz Issac pada artikel membuat widget label tertentu dengan thumbnail satu, mengenai membuat recent Post atau artikel terbaru dengan fungsi Previous dan next seperti yang Anda lihat di single post blog Johny Template. Langsung saja karena hari sudah malam dan besok pagi mesti sahur, bisa-bisa nggak bisa bangun. Dibawah ini screenshotnya dan silahkan klik demo untuk melihat lebih jelas.

recent post maskolis


  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
    #terbaru{margin:0px}
    .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
    .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
    .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
    .mas-elemen:hover{background-color:#c3c3c3}
    .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
    #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6hiSL8iRx5Dr52DYjJHh473lzkoHauJyPWz0AlCZ1xz8pmjPHzbHhMMBXjXgle2nS5Yxc7iV05NtEtGl05r9TahJSGCU9XuGqiQ-LcGm_ApBq6pQWVowR9uIkuKWQ-rGmrUc7Brq5hsE/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
    #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
    #mas-navigasifeed:hover{background-color:#c3c3c3}
    #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
    #mas-navigasifeed span{padding:5px 10px}
    #mas-navigasifeed .next{float:right}
    #mas-navigasifeed .previous{float:left}
    #mas-navigasifeed .home{text-align:center}
    #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
    Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
  6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://johny-gantengbanget.blogspot.com/";
    var charac = 100;
    var urlprevious, urlnext;

    function maskolisfeed(johny,banget){
    var showfeed = johny.split("<");
    for(var i=0;i<showfeed.length;i++){
    if(showfeed[i].indexOf(">")!=-1){
    showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
    }
    }
    showfeed =  showfeed.join("");
    showfeed = showfeed.substring(0,banget-1);
    return showfeed;
    }
    function showterbaru(json) {
    var entry, posttitle, posturl, postimg, postcontent;
    var showblogfeed = "";
    urlprevious = "";
    urlnext = "";
    for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
    urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
    urlnext = json.feed.link[k].href;
    }
    }
    for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }
    if ("content" in entry) {
    postcontent = entry.content.$t;
    } else if ("summary" in entry) {
    postcontent = entry.summary.$t;
    } else {
    postcontent = "";
    }
    if ("media$thumbnail" in entry) {
    postimg = entry.media$thumbnail.url;
    } else {
    postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbOTj_AA-lZKYQn_3wqqo5n0E_kMgTO7FgPTcl52UI4mmUhhBDJWf6yhHQ5HnC5AEoNgaU2IJmg1jOC_Trauusr8EGWMUTe-hcHMZtvCqxC2meaUeOkUu3EFmAPE94EFtbW6Y-6-hE-Q/s1600/no+image.jpg";
    }
    showblogfeed += "<div class='mas-elemen'>";
    showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
    showblogfeed += "</div>";
    }
    document.getElementById("terbaru").innerHTML = showblogfeed;
    showblogfeed = "";
    if(urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
    } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
    }
    if(urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
    } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
    }
    showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
    document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
    }

    function navigasifeed(url){
    var p, parameter;
    if(url==-1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
    } else if (url==1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
    } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
    }
    parameter += "&callback=showterbaru";
    incluirscript(parameter);
    }
    function incluirscript(parameter) {
    if(startfeed==1) {removerscript();}
    document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
    document.getElementById("mas-navigasifeed").innerHTML = "";
    var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
    var terbaru = document.createElement('script');
    terbaru.setAttribute('type', 'text/javascript');
    terbaru.setAttribute('src', archievefeed);
    terbaru.setAttribute('id', 'MASLABEL');
    document.getElementsByTagName('head')[0].appendChild(terbaru);
    startfeed = 1;
    }
    function removerscript() {
    var elemen = document.getElementById("MASLABEL");
    var parent = elemen.parentNode;
    parent.removeChild(elemen);
    }
    onload=function() { navigasifeed(0); }
    //]]>
    </script>
    Keterangan :
    var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
    var urlblog = "http://johny-gantengbanget.blogspot.com/"; >> ganti dengan URL blog Anda
    var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
  7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
    <div id="terbaru"></div>
    <div id="mas-navigasifeed"></div>
    Terakhir save dan lihat hasilnya.
Sekian tutorial membuat widget artikel terbaru dengan fungsi previous dan next kali ini, jika masih ada yang kurang jelas silahkan tinggalkan komentar di bawah. Selamat mencoba dan semoga bermanfaat..... zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
Read More --►

Rabu, 01 Agustus 2012

Pengumuman Penting Bagi Pengguna Template

Kurang lebih pukul 9 malam lewat 15 menit saya baru sampai di rumah, sambil menunggu tukang nasi goreng lewat saya buka blog yang praktis selama bulan puasa dan menjelang Lebaran jarang sekali saya buka, paling sekedar approve komen yang masuk dan dijawab kalau memang perlu. Saya kaget ketika salah satu teman blogger Jeha komentar di salah satu artikel, memberitahukan kalau banyak javascript yang tidak berfungsi pada banyak template yang saya buat. Langsung saya menuju ke akun Google Code... dan ternyata akun Google Code saya kena banned ... nasib.

google code maskolis

Ini untuk kedua kalinya akun Google Code saya kena banned, waktu saya cek di email hanya ada pemberitahuan bahwa saya menyalahi aturan yang sudah ditetapkan pihak developer. Selama ini saya merasa hanya menggunakan situs tersebut untuk menyimpan Javascript untuk membuat template dan tidak pernah disalahgunakan untuk hal lain yang merugikan. Tapi sudahlah, untung semua javascript yang saya simpan disana sudah saya backup di komputer, jadi tinggal bikin akun baru terus upload lagi semua Javascript yang dipakai.

Untuk itu pada kesempatan ini, saya sebagai pengelola blog Creating Website menyampaikan permintaan maaf yang sebesar-besarnya atas ketidaknyamanan ini. Bagi teman-teman blogger pengguna template hasil kreasi saya, silahkan untuk men-download ulang template yang dipakai. Semua template sudah saya renovasi, dan semua Javascript lama yang saya pakai sudah saya migrasikan ke akun Google Code yang baru. Jika Anda sudah terlanjur memodifikasi template tersebut dan keberatan jika harus upload ulang, silahkan dicari saja URL Javascript yang berawalan seperti dibawah ini :
http://kauman.googlecode.com/files/......................... js
Setelah ketemu Anda download template yang dipakai, kemudian ganti semua URL Javascript seperti diatas (ganti semua, jika ada 2 atau 3) dengan URL script yang sudah saya perbaharui, contohnya seperti ini :
http://kauman.googlecode.com/files/jcarousellite.js
Kemudian cari kode URL script dengan akhiran jcarousellite.js Anda ganti dengan URL script yang baru dengan akhiran yang sama, yaitu :
http://johny-template.googlecode.com/files/jcarousellite.js
Demikian juga dengan URL script yang lain. Jika Anda ingin lebih aman saya sarankan untuk menyimpan semua URL javascript yang ada pada template yang Anda pakai di tempat penyimpanan Google Code Anda sendiri, jika ada yang belum jelas bagaimana cara menyimpan script di Google Code Anda bisa baca tutorialnya disini tentang mengatasi masalah loading blog.

Yang kedua saya juga mohon maaf jika banyak pertanyaan yang masuk dan belum sempat terbalas, seperti yang sudah saya ceritakan di awal artikel ini, setiap hari saya seperti itu berangkat pagi pulang malam, jadi tidak sempat untuk mengurusi blog seperti bulan-bulan sebelumnya, maklum saya hanya pegawai rendahan di kantor jadi menjelang Lebaran ngejar setoran yang pasti. Insya Allah setelah kesibukan di dunia nyata sudah kembali normal, saya akan berikan semua yang terbaik untuk teman-teman blogger semua terutama pengunjung setia blog ini.

Demikian pengumuman untuk pengguna template Creating Website yang baik, semoga dapat dimengerti. Semua yang terjadi bukan karena kesengajaan, dan saya terus berupaya agar para pengguna nyaman dan tidak terjadi sesuatu yang fatal dalam penggunaan template. Jika di antara teman-teman ada yang menemukan Javascript yang mati atau tidak bisa dipakai silahkan lakukan pemberitahuan secepatnya  ke saya di kotak komentar, sekian selamat malam dan selamat menjalankan ibadah puasa.

Langsung saja menuju artikel template yang dipakai, perhatikan "update templates" yang telah saya tambahkan pada bagian bawah artikel.

ATTENTION :
There's an update in all of my templates, just re-download your template that you used if you have any problem in some features.

Langsung saja menuju artikel template yang dimaksud sudah ada updates terbaru untuk semua javascript, sekarang saya simpan di Google code menggunakan sistem Subversion dengan software TortoiseSVN, lebih aman

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