Februari 2013 | irhat3

Template Blogger Super Genit

Posted by as Posted on 12.49 with No comments

Johny Prett

Template ini mempunyai tampilan post di halaman muka yang hampir sama dengan Johny Jijay, bisa dibilang template ini adalah versi light dari Johny Jijay. Bedanya hanya pada slider dan sidebar yang saya munculkan di homepage. Template ini saya buat khusus untuk blog yang mempunyai konten gallery, tapi terserah Anda mau pakai untuk apa.

Demo | Download

SLIDER

Seperti juga Johny Jijay template, Johny Prett juga mempunyai dua buah slider. Untuk memasang slider yang ada di Homepage, cari kode berikut di Edit HTML (jangan lupa centang expand widget templates) :

Kode warna biru adalah judul bar pada slider timer, dan warna merah adalah label atau kategori yang ditampilkan pada slider. Silahkan ganti dengan judul dan label yang Anda inginkan.

Johny Genit

Template responsif ini saya buat khusus untuk blogger cewek karena tampilannya yang terkesan feminim, tapi kalau ada blogger cowok mau pakai ini template, ya silahkan aja. Template ini hanya modifikasi dari template saya sebelumnya yaitu Johny Prett, bedanya pada Johny Genit di post page hanya terdapat 2 kolom, yaitu kolom postingan dan sidebar kanan, untuk lebih jelasnya silahkan lihat screenshot di bawah :

Demo | Download

SLIDER
Slider yang saya pasang pada template ini adalah Camera Slider (klik untuk melihat slider asli) buatan Manuel Masia dari www.pixedelic.com. Sebenarnya banyak pilihan warna pagination pada slider ini, karena jika dipasang semua akan memberatkan loading, saya hanya memilih warna hijau saja dan menghilangkan pilihan untuk warna yang lain. Cara pasang slider ini sangat mudah, cari kode ini di Edit HTML :

blogURL:'http://johny-genit.blogspot.com/',

Ganti URL warna kuning diatas, dengan URL blog Anda.

Author Box
Template ini saya lengkapi dengan Author Box yang terdapat di bawah setiap postingan, untuk mengganti dengan data-data Anda, silahkan cari kode ini di Edit HTML (jangan lupa centang expand widget templates) :

Keterangan :

Warna Hijau : URL photo profile blogger, silahkan menuju profile blogger Anda, dan ganti dengan URL image profile blogger Anda.

Warna Pink : Silahkan isi ID Facebook, twitter dan G+ Anda

Warna yang lain saya kira mudah untuk dimengerti, jadi silahkan isi dengan data-data Anda sendiri.

Widget Comment :
Masuk ke Layout >> add a gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0;padding:5px 0 2px!important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #eee;display: block;font:11px Arial;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 40,
characters = 50,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://www.maskolis.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

Ganti URL warna biru diatas dengan URL blog Anda

Itu tadi dua template yang saya bagikan siang ini, yang perlu diperhatikan adalah, Anda harus menyimpan semua gambar postingan pada hosting blogger atau upload gambar waktu bikin postingan. Jika Anda menyimpan gambar selain di blogger, gambar thumbnail di halaman muka tidak akan muncul. Bagi yang tertarik silahkan dipakai dan jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar yang ada di bawah, selamat mencoba dan semoga bermanfaat.

Sumber Artikel Asli

{[['

']]}

Cara Membuat Slideshow Gambar Ala Yahoo

Posted by as Posted on 13.02 with No comments

Cara membuat slide gambar seperti yang biasa kita lihat di id.yahoo.com. Sebelumnya saya sudah pernah membahas tentang memasang gambar slide ala drakon template dan zinmag primus, bagi yang belum menyimak bisa dilihat kembali.

Banyak saya temui blog yang sudah memakai animasi image slider dengan berbagai macam variasi. Blog akan semakin menarik dan lebih hidup dengan tampilan silih berganti dari text dan image yang disetting pada slider. Penempatan animasi slider Yahoo ini biasanya diletakkan tepat di bawah header tengah. Namun, Anda pun bisa menyesuaikannya pada desain template blog masing-masing.

Gambarnya kira-kira seperti diatas, jika anda ingin melihat demonya bisa dilihat disini. Bagaimana? Jika temen-temen tertarik untuk memasang slideshow ala Yahoo di blog masing-masing, maka bersiaplah dipusingkan dengan begitu banyaknya kode CSS dan setting gambar, link serta setting teks yang lumayan membingungkan. Kalau sudah terbiasa sih, pasti gampang. Paling tidak patut dan layak untuk dicoba.

Langkah Pertama

Login ke blogger dengan akun anda
Kemudian klik Tata Letak > pilih Edit HTML
Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>
/* Yahoo Slider Wrapper
----------------------------------------------- */
div.jqans-wrapper {-x-system-font:none;font-family:arial,helvetica,clean,sans-serif;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:1.231;color:#666666;}
div.jqans-wrapper img {border: 0;}
div.jqans-wrapper ul,div.jqans-wrapper li,div.jqans-wrapper h1,div.jqans-wrapper p {list-style:none;margin: 0;padding: 0;}
div.jqans-wrapper {list-style:none;position: relative;overflow: hidden;}
div.jqans-wrapper ul {position: relative;left: 0;width: auto;list-style-type: none;overflow: hidden;z-index: 1;}
div.jqans-wrapper li {list-style:none;float: left;display: inline;}
/* Yahoo Slider Content
----------------------------------------------- */
div.jqans-wrapper.default .jqans-stories ul, div.jqans-wrapper.default .jqans-stories li {height: 110px;}
div.jqans-wrapper.default .jqans-stories-selector ul, div.jqans-wrapper.default .jqans-stories-selector li {height: 10px;}
div.jqans-wrapper.default, div.jqans-wrapper.default .jqans-container {width: 458px;background:#fff;}
div.jqans-wrapper.default li {width: 115px;}
div.jqans-wrapper.default a {text-decoration: none;font-weight: normal;color: #363636;outline: none;}
div.jqans-wrapper.default strong {color: #000;}
/* wrapper */
div.jqans-wrapper.default {border: 1px solid #ccc;border-width: 1px 1px 0 1px;margin: 0 0 0.5em;}
/* container */
div.jqans-wrapper.default .jqans-container {min-height: 270px;text-align: center;padding-top: 4px;}
div.jqans-wrapper.default .jqans-container a {font-weight: bold;color:#000;}
div.jqans-wrapper.default .jqans-container img {width:438px;height:210px;}
/* headline */
div.jqans-wrapper.default .jqans-headline {text-align: left;margin-left:10px;margin-bottom: 4px;font:normal 13px Arial;}
div.jqans-wrapper.default .jqans-content h1 {text-align:left;color:#16387c;margin: 1px 9px;font:bold 18px Arial;letter-spacing:-.0001em;line-height:1.1em; height:22px;overflow:hidden;}
div.jqans-wrapper.default .jqans-content p {text-align: left;color: #333;margin: 1px 9px;font:normal 12px Arial;line-height:1.3em;height:30px;overflow:hidden;}
/* stories */
div.jqans-wrapper.default .jqans-stories {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgppRfKtXV9lNKju9Dc0ZndjjaH4ankLd1rn5rSJH3D4qsZy0D2LBOE7fsaYnoiwOUQXxnzwLygGFFggPK4vSiVgCD2g448FS7yVsDeSpbYtKwgqNyOVhSGo5efeo77R2q4GasYitrInj8/s1600/bg_stories.gif);background-repeat: repeat-x;background-position: top left;}
div.jqans-wrapper.default .jqans-stories li {overflow: hidden;text-align: center;font-size: 11px;color: #fff;line-height:1.2em;}
div.jqans-wrapper.default .jqans-stories li.selected {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3qEVpiYMKBIE0nOzWhBr1hXGQoIyDhWaGSvKdB4CeUwoCEmKgwdblVbywvNutL4pIFuARmhyphenhyphenEESQn_rz2vG4FP_rSv9OpMhH8hHG5qneZGm-mTpEzVRbfihJp5kkm10JToJnNvJdpmZg/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;}
div.jqans-wrapper.default .jqans-stories li.selected a {color:#fff;}
div.jqans-wrapper.default .jqans-stories li img {margin-top: 22px;width:100px; height:52px;border-right:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #555;border-top:1px solid #555;}
div.jqans-wrapper.default .jqans-stories li p {display: none;}
div.jqans-wrapper.default .jqans-stories li h3 {margin:0;padding:1px 10px;color:#000;
font-size:11px;font-weight:normal;font-family:Arial;height:28px;overflow:hidden;line-height:1.2em;}
div.jqans-wrapper.default .jqans-stories-selector li.selected div {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3qEVpiYMKBIE0nOzWhBr1hXGQoIyDhWaGSvKdB4CeUwoCEmKgwdblVbywvNutL4pIFuARmhyphenhyphenEESQn_rz2vG4FP_rSv9OpMhH8hHG5qneZGm-mTpEzVRbfihJp5kkm10JToJnNvJdpmZg/s1600/bg_selected.gif);background-repeat: no-repeat;background-position: top center;}
/* pagination */
div.jqans-wrapper.default .jqans-pagination {border: 1px solid #ccc;border-width: 1px 0;margin: 0;padding: 4px 4px 4px 4px;background: #f2f2f2;text-align: left;clear: both;width: 448px;overflow: hidden;}
div.jqans-wrapper.default .jqans-pagination-count {float: left;font:normal 11px Arial;color:#666;}
div.jqans-wrapper.default .jqans-pagination-controls {float: right;}
div.jqans-wrapper.default .jqans-pagination-controls a {display: inline-block;width: 22px;height: 13px;text-indent: -9999px;background: no-repeat bottom center;*float:left;}
div.jqans-wrapper.default .jqans-pagination-controls-back a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiegXnBysOBYksiY3zyvBdKLtycEWZg1WgFGcWf7O7Aw0l6JrLdPqXyvbIapaRNgrFZJfGIIk3x5Ox02AIDGeZOPka8t9gujYe9HTjmdYjPjTRkAMpSNkdNLvfP9tu89ikzwxvxuecnfpU/s1600/previous.gif);}
div.jqans-wrapper.default .jqans-pagination-controls-next a {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPy86XlfsU35uJZKGbUN3y7ZuvYeashe6s8zmkJ8Aa-fLYwO_X0CexWoCoNzYad9Rt_bk0lg0Ekbi5_QdN1z-CNc6NOTxgQQfmDQau_Ny3R29DM0YZdsBV5GG69jyCrTlEOclMu121uU/s1600/next.gif);}

Langkah Kedua

Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.accessNews=function(b){var c={title:"HARI INI -",subtitle:"<span id='clock'/>",slideBy:4,speed:"normal",slideShowInterval:3000,slideShowDelay:3000,theme:"default",continuousPaging:true,contentTitle:"h3",contentSubTitle:"abbr",contentDescription:"p",onLoad:null,onComplete:null};return this.each(function(){b=jQuery.extend(c,b);var k=jQuery(this);var h=k.children();var i;var j;var f;var e={_wrapper:'<div class="jqans-wrapper '+b.theme+'"></div>',_container:'<div class="jqans-container"></div>',_headline:jQuery("<div class='jqans-headline'></div>").html(["<p><strong>",b.title,"</strong> ",b.subtitle,"</p>"].join("")),_content:jQuery("<div class='jqans-content'></div>"),_stories:'<div class="jqans-stories"></div>',_first:jQuery(h[0]),init:function(){if(b.onLoad){b.onLoad.call(a(this))}k.wrap(this._wrapper);k.before(this._container);var l=(h.length*this._first.outerWidth(true));k.css("width",l);if(b.title.length){this.append(this._headline)}this.append(this._content);this.selector(l);this.set(0);d.init();g.init();k.wrap(this._stories);if(b.onComplete){b.onComplete.call(a(this))}},selector:function(n){var m="";for(var l=1;l<=h.length;l++){m+="<li><div/></li>"}var p=jQuery('<div class="jqans-stories-selector"></div>');p.append("<ul>"+m+"</ul>");j=jQuery(p.find("ul"));f=j.children();p.css("width",n);k.before(p)},append:function(l){this.get().append(l)},get:function(){return k.parents("div.jqans-wrapper").find("div.jqans-container")},set:function(n){var o=this.get();var r=jQuery(h[n]);var m=jQuery(f[n]);var q=jQuery("div.jqans-content",o);var p=jQuery("<img></img>");var l=jQuery("<div></div>");var s=jQuery(b.contentTitle+" a",r).attr("title")||jQuery(b.contentTitle,r).text();p.attr("src",jQuery("img",r).attr("longdesc")||jQuery("img",r).attr("src"));l.html("<h1>"+s+"</h1><p>"+jQuery(b.contentDescription,r).html()+"</p>");q.empty();q.append(p);q.append(l);h.removeClass("selected");r.addClass("selected");f.removeClass("selected");m.addClass("selected")}};var d={loaded:false,_animating:false,_totalPages:0,_currentPage:1,_storyWidth:0,_slideByWidth:0,init:function(){if(h.length>b.slideBy){this._totalPages=Math.ceil(h.length/b.slideBy);this._storyWidth=jQuery(h[0]).outerWidth(true);this._slideByWidth=this._storyWidth*b.slideBy;this.draw();this.loaded=true}},draw:function(){var n=jQuery('<div class="jqans-pagination"></div>').html(['<div class="jqans-pagination-count"><span class="jqans-pagination-count-start">1</span> - <span class="jqans-pagination-count-end">',b.slideBy,'</span> of <span class="jqans-pagination-count-total">',h.length,'</span> <strong>News Pagination</strong></div><div class="jqans-pagination-controls"><span class="jqans-pagination-controls-back"><a href="#" title="Back"><< Back</a></span><span class="jqans-pagination-controls-next"><a href="#" title="Next">Next >></a></span></div>'].join(""));k.after(n);var m=jQuery(".jqans-pagination-controls-next > a",n);var l=jQuery(".jqans-pagination-controls-back > a",n);m.click(function(){var o=d._currentPage+1;d.to(o);return false});l.click(function(){var o=d._currentPage-1;d.to(o);return false})},to:function(p){if(this._animating){return}this._animating=true;var q=k.parent("div").next(".jqans-pagination");var l=jQuery(".jqans-pagination-count-start",q);var s=jQuery(".jqans-pagination-count-end",q);if(p>this._totalPages){p=b.continuousPaging?1:this._totalPages}if(p<1){p=b.continuousPaging?this._totalPages:1}var r=(p*b.slideBy)-b.slideBy;var n=(p*b.slideBy);if(n>h.length){n=h.length}var o=parseInt(k.css("left"));var m=(p*this._slideByWidth)-this._slideByWidth;l.html(r+1);s.html(n);o=(m*-1);k.animate({left:o},b.speed);j.animate({left:o},b.speed);e.set(r);this._currentPage=p;this._animating=false}};var g={init:function(){this.attach();this.off();i=setTimeout(function(){g.on()},b.slideShowDelay)},on:function(){this.off();i=setInterval(function(){g.slide()},b.slideShowInterval)},off:function(){clearInterval(i)},slide:function(){var o=jQuery("li.selected",k);var m=o.next("li");var n=0;if(!m.length){m=jQuery(h[0]);n=1}var p=h.index(m);if(d.loaded){var l=(p)%b.slideBy;if(l===0){n=(Math.ceil(p/b.slideBy))+1}if(n>0){d.to(n)}}e.set(p)},attach:function(){var l=jQuery(k).parent("div.jqans-wrapper");l.hover(function(){g.off()},function(){g.on()})}};e.init();h.hover(function(){e.set(h.index(this))},function(){})})}})(jQuery);
//]]>
</script>
<script type='text/javascript'>
// when the DOM is ready, convert the feed anchors into feed content
jQuery(document).ready(function() {

   jQuery('#newsslider').accessNews({

   });

   jQuery('#newsslider2').accessNews({
       title : "BREAKING NEWS:",
       subtitle:"stories from the internet",
       speed : "slow",
       slideBy : 4,
       slideShowInterval: 100000,
       slideShowDelay: 100000
   });

});
</script>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();jQuery(function(){jQuery("ul.menu-primary").superfish({animation:{opacity:"show"},autoArrows:true,dropShadows:false,speed:200,delay:800})});jQuery(function(){jQuery("ul.menu-secondary").superfish({animation:{opacity:"show"},autoArrows:true,dropShadows:false,speed:200,delay:800})});jQuery(document).ready(function(){jQuery(".fp-slides").cycle({fx:"fade",timeout:4000,delay:0,speed:400,next:".fp-next",prev:".fp-prev",pager:".fp-pager",continuous:0,sync:1,pause:1,pauseOnPagerHover:1,cleartype:true,cleartypeNoBg:true})});
/* ]]> */
</script>
Sampai disini masih mudah kan? Oya jika anda ingin meletakkan hari, tanggal dan bulan serta tahun seperti yang ada di demo, letakkan kode berikut di bawah kode diatas :
<script type='text/javascript'>
//<![CDATA[
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December");function getthedate(){var a=new Date();var g=a.getYear();if(g<1000){g+=1900}var h=a.getDay();var e=a.getMonth();var b=a.getDate();if(b<10){b="0"+b}var i=a.getHours();var c=a.getMinutes();var j=a.getSeconds();var d="AM";if(i>=12){d="PM"}if(i>12){i=i-12}if(i==0){i=12}if(c<=9){c="0"+c}if(j<=9){j="0"+j}var f="<font color='666666' face='Arial'>"+dayarray[h]+", "+montharray[e]+" "+b+", "+g+" "+i+":"+c+":"+j+" "+d+"</font>";if(document.all){document.all.clock.innerHTML=f}else{if(document.getElementById){document.getElementById("clock").innerHTML=f}else{document.write(f)}}}if(!document.all&&!document.getElementById){getthedate()}function goforit(){if(document.all||document.getElementById){setInterval("getthedate()",1000)}};
//]]>
</script>
Jangan lupa, jika anda sudah memasang kode javascript untuk waktu diatas, kode <body> pada template harus diganti dengan :
```
  <body onLoad='goforit()'>
```
Save/simpan template terlebih dahulu sambil sejenak istirahat, sabar ya siapkan secangkir kopi atau teh biar agak adem sambil mendengarkan musik kesukaan anda. Masih ada satu langkah lagi

Langkah Ketiga

Sekarang anda harus membuat satu kolom di atas postingan untuk meletakkan kode slide nantinya. Langsung saja letakkan kode berikut di atas kode ]]></b:skin>

/* Slide Content
----------------------------------------------- */
.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;} 
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}
.slide .widget {margin:0px 0px 6px 0px;}

Kemudian untuk memunculkannya pada template (diatas postingan), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
      </div>
</b:if>

Setelah anda membuat satu kolom diatas postingan, klik menu Tata Letak >> Elemen Laman
Klik Tambah Gadget >> pilih HTML/Javascript
Copy kode di bawah dan letakkan di kotak HTML/Javascript
<ul id="newsslider">

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlSBmazSustTNZ4_lPpxYTpZj1Pmdv3CviCFiUvilvEux89mW20QeiPwJVlSu7-08ojNeWyMgXQ7l8pWJ6jrellbkY0PXW8T4a0-RxQ_P9eLgUXy3l_TYhy-MZi6vd6ZXLPOMbWY5I5CZ2/s1600/emak.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-dalam-bimbang-kunikmati.html">(Sad Romance) Dalam Bimbang, Kunikmati dirimu</a></h3>
<p>Wepe sangat terpukul setelah putus cinta dengan Herry seseorang yang sangat mempesonanya... <a href="#"> more » </a></p>
</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis6zhs_Caf_ewzDAXMkOGYpE2xFSevtPR7wWd1xp9M4S6l1w6TPxLd9JnKr1WsNs8gguZXo6ACRuMwdQAsMyoyE2OD6oL7qWP0OjG8Xl2G2uMVo9HgS2FBUhXRzhqyhoQKbfC4eZFT9w56/s1600/hawa.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>

<p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more »</a></p>
</li>

<li>
<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggXW5o9hiOeb8_8BjMFUP4cwHT8u5QdxcVsHPb1hT1YO3KHpIdhyphenhyphenzlQpWw_I_-7E4C6Qcfq8KP-cAQSFZ_njTTucg9iOsOc-K9n0EupsQDUuEsSxiaJIsUfv5Z_EGvyY0C-bodEtkcGTie/s1600/hawa+2.jpg" /></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
<p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more »</a></p>

</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgAj2BxUBT2rNoJz4VOLvEGl0O7dYQ_NyCYaKjWRvE2T3g4RStpj5jnrIOQs9VMo5HcHf6li40Lgzpgbtg0NQaUUlIbD_X0E6ibwKghMmzFc-x_vPz5_4uf_sqMipVFk32mzT_H0zKvTR6/s1600/youly+chang.jpg"/></a>

<h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay… </a></h3>
<p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more » </a></p>
</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlSBmazSustTNZ4_lPpxYTpZj1Pmdv3CviCFiUvilvEux89mW20QeiPwJVlSu7-08ojNeWyMgXQ7l8pWJ6jrellbkY0PXW8T4a0-RxQ_P9eLgUXy3l_TYhy-MZi6vd6ZXLPOMbWY5I5CZ2/s1600/emak.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-dalam-bimbang-kunikmati.html">(Sad Romance) Dalam Bimbang, Kunikmati dirimu</a></h3>
<p>Wepe sangat terpukul setelah putus cinta dengan Herry seseorang yang sangat mempesonanya... <a href="#"> more » </a></p>

</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis6zhs_Caf_ewzDAXMkOGYpE2xFSevtPR7wWd1xp9M4S6l1w6TPxLd9JnKr1WsNs8gguZXo6ACRuMwdQAsMyoyE2OD6oL7qWP0OjG8Xl2G2uMVo9HgS2FBUhXRzhqyhoQKbfC4eZFT9w56/s1600/hawa.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>
<p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more »</a></p>
</li>

<li>
<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggXW5o9hiOeb8_8BjMFUP4cwHT8u5QdxcVsHPb1hT1YO3KHpIdhyphenhyphenzlQpWw_I_-7E4C6Qcfq8KP-cAQSFZ_njTTucg9iOsOc-K9n0EupsQDUuEsSxiaJIsUfv5Z_EGvyY0C-bodEtkcGTie/s1600/hawa+2.jpg" /></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
<p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more »</a></p>

</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgAj2BxUBT2rNoJz4VOLvEGl0O7dYQ_NyCYaKjWRvE2T3g4RStpj5jnrIOQs9VMo5HcHf6li40Lgzpgbtg0NQaUUlIbD_X0E6ibwKghMmzFc-x_vPz5_4uf_sqMipVFk32mzT_H0zKvTR6/s1600/youly+chang.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay… </a></h3>
<p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more » </a></p>
</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih00BRhbFBmE1XRUI4DW1KdamRut7VSKLYfEnmYFq73_DZVzqkGI7hI0sd6EbIsJhr7LCyuM-T2XkPDEO7kYbRtCbcU_WvJEjCURdAJYX66oO22joavqScLnSeXwibR_KliFrG3uUGxbU8/s1600/emak.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/oh-emak-oh-ibu.html">Oh Emak Oh Ibu</a></h3>

<p>5 tahun yang lalu waktu emak mengantarku ke terminal bus antar provinsi guna merantau dan berangkat kuliah ke Jakarta... <a href="#"> more » </a></p>
</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis6zhs_Caf_ewzDAXMkOGYpE2xFSevtPR7wWd1xp9M4S6l1w6TPxLd9JnKr1WsNs8gguZXo6ACRuMwdQAsMyoyE2OD6oL7qWP0OjG8Xl2G2uMVo9HgS2FBUhXRzhqyhoQKbfC4eZFT9w56/s1600/hawa.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/diary-sang-penggoda-kekasihmu-merayuku.html">[Diary Sang Penggoda] Kekasihmu Merayuku</a></h3>
<p>Wanita itu datang padaku, dengan langkah anggun terkesan tergesa-gesa, wajah ayunya..... <a href="#">more »</a></p>
</li>

<li>

<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggXW5o9hiOeb8_8BjMFUP4cwHT8u5QdxcVsHPb1hT1YO3KHpIdhyphenhyphenzlQpWw_I_-7E4C6Qcfq8KP-cAQSFZ_njTTucg9iOsOc-K9n0EupsQDUuEsSxiaJIsUfv5Z_EGvyY0C-bodEtkcGTie/s1600/hawa+2.jpg" /></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/sad-romance-di-pantai-itu-mereka.html">[Sad Romance] Di Pantai Itu Mereka</a></h3>
<p>Semilir angin laut menghempas bibir pantai, pasir bergerak perlahan tersapu lembut air laut, sepasang kekasih ada disana.... <a href="#">more »</a></p>

</li>

<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgAj2BxUBT2rNoJz4VOLvEGl0O7dYQ_NyCYaKjWRvE2T3g4RStpj5jnrIOQs9VMo5HcHf6li40Lgzpgbtg0NQaUUlIbD_X0E6ibwKghMmzFc-x_vPz5_4uf_sqMipVFk32mzT_H0zKvTR6/s1600/youly+chang.jpg"/></a>
<h3><a href="http://violetcafe5.blogspot.com/2011/11/catatan-seorang-gay.html">Catatan Seorang Gay… </a></h3>
<p>Samar-samar herry menatap bayangan dirinya pada sebuah cermin. Siapa yang harus kupersalahkan? sebagai manusia.... <a href="#">more » </a></p>

</li>

</ul>
Keterangan :
- Warna biru : URL image
- Warna merah : URL post
- Warna kuning : Ringkasan post
- Warna hijau : judul post
Jika layout pada template Anda sudah terdapat satu kolom kosong di atas post, langkah ini tidak perlu. Langsung saja add gadget kemudian letakkan kode script diatas.
Kemudian save/simpan template selesai sudah

Ribet banget ya, kalau ribet nggak usah dipasang masih banyak slider lain yang lebih gampang cara memasangnya dan tidak kalah menarik dengan slider Yahoo ini. Saya hanya memberikan alternatif lain untuk menghias blog agar tampak lebih menarik. Jika teman-teman sering meringkas kode javascript yang terlalu panjang di googlecode, sebaiknya diringkas saja selain terlalu panjang juga akan meringankan loading blog anda. Selamat mencoba dan berpusing ria jika ada yang mau ditanyakan isi kotak komentar yang ada di bawah. Jika ada waktu senggang Insya Allah saya jawab.

* Slider source by Borneo Template and plugin Yslider for Wordpress by Andrea Ferracani

Sumber

{[['

']]}

Cara Gampang Modifikasi Template Maskolis

Posted by as Posted on 06.24 with No comments

Pengantar Maskolis ...

Di artikel ini saya bukan mau memberikan tutorial cara modifikasi template, tapi saya mau bagi-bagi template gratis. Judul diatas memiliki artikulasi yang berbeda, karena cara gampang disini bukan diartikan sebagai suatu metode yang mudah atau gampang, tapi sebuah situs punya teman saya AA Sholah yaitu caragampang.com yang memodifikasi template dari Creating Website. Buat pembaca yang sering kesini pasti sudah tidak heran dengan judul-judul artikel yang saya buat, selalu ambigu dan yang pasti menikung jauh dari topik yang dibahas... bodo amat.

Template yang dimodifikasi kali ini dasarnya dari Johny Wuss, ini kali kedua AA Sholah memberikan kontribusinya ke blog ini, setelah sebelumnya dia juga memodifikasi sebuah template dari creating website menjadi template cara gampang yang versi lama. Bagi teman-teman lain, yang ingin mengikuti jejak caragampang.com silahkan, ambil salah satu atau beberapa template dari sini, silahkan dimodifikasi sesuai daya imajinasi dan kreasi Anda. Syaratnya hanya satu template dasar harus dari Creating Website, karena jika Anda mengambil dasar template dari orang lain belum tentu si pembuat kasih ijin templatenya dimodifikasi dan dipublikasikan disini.

Tambahkan fitur-fitur baru yang menurut Anda menarik, setelah Anda merasa template hasil modifikasi itu sudah bagus, beri tahu ke saya di kotak komentar atau di forum blog ini. Jika saya bilang oke, kirimkan xml template beserta tutorial cara pemasangannya ke email saya disini ncmajid@gmail.com, jangan lupa tambahkan kredit link blog Anda di bagian footer. Saya sangat mengapresiasi semua hasil modifikasi template yang Anda buat, tapi semua harus diseleksi, jangan sampai pengguna nantinya kecewa karena gambaran template yang dilihat tidak sesuai dengan keinginannya. Dan terus terang saya sangat berharap banyak dari teman-teman blogger disini agar mau berpartisipasi seperti mas AA Sholah, karena kalau saya terus yang buat, saya yakin lama-lama juga banyak orang yang bosan dengan tampilan yang melulu itu-itu saja dari dulu tidak ada perubahan.

Ini dia template hasil modifikasi dari caragampang.com

Demo | Download

Pasang Slider
Pasang Wigdet Kategori

Untuk memaasang Slider Carousel tinggal cari kode

label1 = "news";

Ganti news dengan kategori atau label yg ingin ditampilkan

Nih saya bagi satu lagi template gratis, kemarin ada yang minta tampilan seperti Johny Wuss tapi yang responsif. Dasar template ini juga dari Johny Wuss, tampilannya sama, cuma bedanya template ini mempunyai kolom postingan yang lebih lebar. Skor SEO nya juga tidak beda jauh dengan Johny Wuss, menurut http://chkme.com/ cuma beda 2%. Jika Johny Wuss 93% template ini mempunyai skor SEO 91%.

Demo | Download

Cek Responsive

Sumber Artikel Asli

{[['

']]}

Cara Membuat Burung Twitter Terbang Pada Blog

Posted by as Posted on 00.51 with No comments

Hai sobat Blogger!. Tips blogger kali ini adalah untuk membuat burung Twitter terbang pada tampilan blog. Tentunya anda sudah tahu jaringan sosial Twitter. Twitter adalah jaringan sosial yang terkenal setelah jaringan sosial Facebook. Twitter adalah sebuah web pada sebuah internet, Twitter bentuknya sangat mirip seperti sebuah blog, karena web Twitter terlalu enteng dan tampilan-nya

{[['

']]}

Cara Mengetahui Postingan Masuk Google Sandbox Atau Tidak

Posted by as Posted on 05.15 with No comments

Hai sobat Blogger. Kali ini saya akan memberitahu kepada anda bagaimana Cara Untuk Mengetahui Postingan Masuk Sandbox atau Tidak. Seperti yang anda tahu "Sandbox" atau bisa diartikan ke Bahasa Indonesia menjadi kotak pasir adalah daftar penampungan postingan yang tidak akan di-indeks oleh Google. SandBox hampir mirip dengan daftar blacklist atau bisa diartikan ke bahasa indonesia menjadi daftar

{[['

']]}

Template Seperti Ini Belum Pernah Saya Bikin ( 3 Kolom )

Posted by as Posted on 10.12 with No comments

Model template 3 kolom dengan 2 sidebar di kanan dan kiri memang belum pernah saya buat sebelumnya. Template ini hanya memenuhi permintaan mbak-mbak dan mas-mas yang komentar kemarin, katanya sih minta dibuatkan template 3 kolom, dia bilang sudah 1 tahun permintaannya tapi belum dikabulkan juga. Lain kali jangan minta sama saya, gosok panci di rumah, kalau nanti keluar jin minta aja ke dia ya. Terus kemarin ada lagi yang minta dibuatkan template 3 kolom yang keren dan simple, nih sudah yang buatkan tapi nggak tau cocok apa enggak.

Kalau menurut saya sih template ini simple, kalau masalah keren itu relatif.

Ini lagi ngomong soal keren, nah sekarang waktunya bagi-bagi template.

Johny Super Crott

Demo | Download

Cek Responsive

Johny Super Prett

Demo | Download

Cek Responsive

Nah itu sudah saya buatkan template yang tiga kolom, kalau cocok silahkan dipakai, kalau nggak cocok yang silahkan dipakai juga mungkin buat bungkus kacang atau bungkus nasi goreng juga bisa, caranya di print dulu habis itu kertasnya buat bungkus kacang.

Kok nggak ada penghargaan dari Google sebagai pembuat template blogger abal-abal terbanyak ya? Harusnya Google kasih penghargaan ke saya (dikasih permen kek), kalau gini kan pengguna blogger jadi banyak, semula yang pakai platform lain jadi pindah ke Blogger karena alternatif pilihan template semakin banyak. Boro-boro dikasih penghargan imbalannya malah dibanned akun Adsense sama Google Code... dasar nggak tau terima kasih.

Untuk hasil yang optimal silahkan baca di artikel ini.

Sumber Artikel Asli

{[['

']]}

Template Responsif dan Bukan Responsif

Posted by as Posted on 09.56 with No comments

Di samping keuntungan yang kita peroleh dengan memakai design responsif, tentu ada juga kerugiannya, yaitu berupa penambahan kode-kode tertentu pada template yang Anda pakai. Jika Anda menggunakan template responsif sederhana dua kolom, mungkin penambahan kodenya tidak terlalu banyak dan pengaruh buat loading juga tidak begitu berarti. Lain halnya jika anda menggunakan template tipe magazine, dimana banyak sekali fitur yang dipasang, tentu saja penambahan kodenya juga menyesuaikan setiap fitur yang ada sehingga bisa support untuk diakses melalui semua mobile device sampai ukuran terkecil. Dengan penambahan kode tersebut merupakan beban tersendiri sehingga akan berpengaruh pada loading sebuah blog.

Jika penambahan itu hanya berupa kode-kode CSS mungkin tidak terlalu signifikan dan pengaruh bagi loading juga kecil, terkadang sebuah fitur tidak hanya cukup ditambahkan kode CSS agar support untuk semua ukuran mobile device, tetapi juga penambahan javascript dan HTML sebagai penunjang. Tentu saja hal itu akan semakin memperbesar kapasitas template dan menambah beban loading blog itu sendiri. Memang semuanya bisa diringkas, baik CSS maupun kode-kode scriptnya, tapi tidak bisa disangkal bahwa Google sendiri tidak begitu menyukai setiap kode script yang ada pada template blogger, sehingga dengan semakin banyak penggunaan script pada sebuah template akan semakin jauh pula template itu dari kriteria SEO friendly.

Tapi apakah dengan begitu jumlah pengunjung akan semakin banyak jika kita mempunyai tampilan blog yang responsif? Pertanyaan yang sering kali muncul di benak saya. Kadang saya berpikir dengan menggunakan tampilan responsif kita hanya memanjakan seorang pengunjung yang mengakses blog dengan menggunakan mobile. Seorang pengguna mobile akan dengan nyaman membaca semua artikel tanpa harus tangannya pegel. Mungkin jawabannya iya, karena merasa nyaman suatu saat dia akan berkunjung lagi ke blog kita. Tapi bisa saja jawabannya tidak, karena dengan banyaknya penambahan kode-kode pada template yang Anda pakai, justru membuat loading blog menjadi lamban sehingga banyak pengguna lama yang mengakses dari desktop lari dan tidak mau lagi berkunjung ke blog yang kita kelola.

Tapi di luar semua itu konten atau artikel sebuah blog adalah segalanya atau istilah kerennya Content is the king, Anda bisa saja memakai template paling responsif atau paling cepat loadingnya di muka bumi ini. Tapi jika artikel yang Anda tawarkan isinya itu-situ saja, tidak ada informasi baru atau unik yang bisa pembaca peroleh dari artikel yang Anda tawarkan, tetap saja blog Anda susah untuk berkembang. Seperti pernah saya tulis sebelumnya, selain membuat artikel yang unik, Anda harus mampu menciptakan branding agar blog yang Anda kelola bisa berkembang, salah satunya dengan memberikan pelayanan yang baik kepada semua pengunjung tanpa adanya diskriminasi. Ciptakan suasana yang kondusif, membuat interaksi lebih hidup, sehingga pengujung betah dan kepingin lagi untuk kembali ke blog yang Anda kelola.

Nah, sekarang waktunya saya akan bagikan dua template gratis, satu responsif dan satu lagi bukan responsif. Silahkan Anda temukan sendiri dimana letak perbedaannya. Tampilannya sama, hanya ada penambahan slider pada template yang bukan responsif.

Template Responsif

Demo | Download

Cek Responsive

Template Non Responsif

Demo | Download

Pasang Slider

Ganti Feddburner

Yang perlu saya tekankan disini adalah, saya membuat template bukan karena lagi ngejar setoran, tapi hanya sebatas untuk mengisi postingan di blog ini. Silahkan dipakai bagi yang berminat, kesimpulan saya dari artikel di atas hanya satu, tampilan responsif pada template yang Anda pakai tidak mutlak menjamin blog Anda semakin ramai dikunjungi orang. Bagi Anda yang mempunyai blog dengan tampilan biasa bukan responsif, jangan terlalu berkecil hati, saya yakin suatu saat dengan semakin berkembangnya teknologi gadget, di masa yang akan datang semua moble device mampu mengakses blog meskipun tidak menggunakan responsif design.

Penting untuk diperhatikan :

Bagi pengguna template responsif, jika ingin tampil maksimal perhatikan point-pont berikut ini :

Upload sendiri gambar waktu buat postingan, jangan disimpan di host selain blogger apalagi copy URL gambar dari blog lain.
Hapus kode merah di gambar pada posisi HTML (bukan compose), contohnya seperti ini :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgbj7f3MxdWYKMKJSsMsdN2yQHF8bAVIsK42m4BY7nZRaa5C3czUgv54Z5Ku87Omz4Zpmo_Gl_FwF9wOBZ65rQrHE5R-2adkW7L-hOLMTLHySCbBbU9Kf7T9m23OJXAKzh6TxOY4CK7g/s1600/Johny+Darkmag.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBgbj7f3MxdWYKMKJSsMsdN2yQHF8bAVIsK42m4BY7nZRaa5C3czUgv54Z5Ku87Omz4Zpmo_Gl_FwF9wOBZ65rQrHE5R-2adkW7L-hOLMTLHySCbBbU9Kf7T9m23OJXAKzh6TxOY4CK7g/s1600/Johny+Darkmag.jpg" /></a>

Sumber Artikel Asli

{[['

']]}

Johny Jijay, Simple Template Blogger Gallery Movie

Posted by as Posted on 02.19 with No comments

Pengantar

Sebenarnya template ini bukan murni buatan saya, saya hanya membuat dasarnya saja, yaitu pada Johny Prett template. Kemudian saya serahkan ke teman saya untuk memodifikasi agar lebih menarik, sebenarnya template ini saya suruh dibuat responsif sekalian, tapi karena seperti juga saya dia belum paham betul struktur layout template responsif, yah jadinya seperti screenshot di bawah ini. Pada template-template gallery untuk movie sebelumnya, saya banyak sekali melihat penggunaan template dengan judul yang panjang sehingga dengan panjang post di homepage yang terlalu kecil, membuat judulnya meluber ke bawah.

Demo | Download

Untuk mengantisipasi hal itu, saya menyembunyikan judul post di homepage di belakang gambar, Anda hanya akan melihat judul dan snippet atau summary pendek bawaan dari popular post, jika cursor diarahkan ke gambar. Pada template ini terdapat 2 slider, yaitu lofslidernews modifikasi di halaman utama dan simpel slider untuk recent post pada halaman postingan.

Template untuk gallery movie kali ini lebih sederhana karena sudah terlau banyak javascript yang saya pasang, jika ada penambahan fitur di halaman utama hanya akan memperberat loading. Di homepage Anda hanya akan melihat tampilan slider dan gallery tanpa sidebar, sidebar hanya tampil di halaman postingan saja. Slider yang saya pasang pada template ini, sama persis dengan yang ada pada template Bukan Johny. Saya akan ulangi lagi disini cara memasang slider pada template ini :

Untuk mengaktifkan slider yang ada di homepage pada template ini, masukkan kode berikut pada kolom kosong paanjang di bawah header. Masuk ke Layout/Tata Letak >> Add a Gadget pilih HTML/Javascript :

<div class='lof-main-wapper' id='slider'>
<div class='slider-main-outer'>
<ul class='slider-main-wapper'>
<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='slider-navigator-outer'>
<ul class='slider-navigator'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts0\"><\/script>");
</script>
</ul>
</div>
</div>

Jika Anda memsukkan kode script diatas maka slider akan bekerja berdasarkan artikel terbaru, jika Anda ingin menampilkan label atau kategori tertentu baca postingan saya tentang Modifikasi Slider Lofslidernews Maknyus.

Untuk slider yang ada di halaman postingan menampilkan artikel terbaru Anda, tutorial slider ini sudah saya bahas sebelumnya pada artikel simple slider untuk image vertikal. Mungkin hanya itu yang harus diperhatikan jika Anda ingin menggunakan template ini. Bagi yang tertarik silahkan dicoba dan jika masih kurang jelas silahkan tinggalkan pesan di kolom komentar di bawah. Selamat malama dan selamat beristirahat.

Javascript yang harus Anda dimpan sendiri di Google Code :
<script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/>
<script src='http://yourjavascript.com/218437119/halamanav.js' type='text/javascript'/>

Sumber Asli

{[['

']]}

Template Ini Responsif Bukan ya?

Posted by as Posted on 02.17 with No comments

Di copas langsung dari sumber aslinya :

Pengantar dari empunya Maskolis

" Mumpung pulang agak siang kali ini saya mau bagi satu lagi template sederhana dua kolom, tapi sebelum menuju ke inti artikel, saya mau cerita dulu sebuah kisah yang sangat menggelikan. Begini ceritanya, setelah kemarin saya dibuat kaget dengan ranking Alexa template Johny Wuss, kali ini lebih menggelikan lagi, yah antara geli dan nggak percaya. Gimana nggak geli coba, barusan saya baca artikel di blog Mas Adhy pemilik Kompi Ajaib tentang hadiah pagerank 4 dari Google, terus iseng-iseng saya cek juga blog saya satu persatu, tidak ketinggalan saya cek template kesayangan saya Johny Wuss, dan seperti tak percaya dengan apa yang saya lihat, saya langsung tertawa ngakak sambil ngangkang sampai tetangga marah-marah sampai mau nimpuk pakai sendal. Berita ini lebih heboh dari berita petinggi PKS yang ketangkap basah lagi indehoi sama ABG, coba Anda perhatikan baik-baik gambar dibawah ini " :

Jujur sejak awal ngeblog sampai sekarang saya tidak begitu peduli dengan statistik blog, entah itu pagerank ataupun rangking Alexa. Mau nggak mau kali ini saya mesti mikir dan bertanya-tanya apa sebenarnya pertimbangan Google dalam memberikan hadiah pagerank sebuah blog. Seperti teman-teman disini semua ketahui. Johny Wuss hanyalah sebuah blog demo untuk template yang saya bagikan gratis ke pengguna blogger disini. Umur blog baru 3 minggu, artikelnya jumlahnya hanya 12 biji kalau nggak salah, dan itu semua copy paste dari lorem ipsum, terus prestasi apalagi yang dibuat si Johny Wuss sehingga dia layak dihadiahi pagerank yang begitu tinggi?

Sudah banyak saya baca artikel yang membahas tentang pagerank, tapi tak satupun mampu memberikan jawaban yang akurat untuk kasus blog saya yang satu ini. Seperti seorang taruna yang baru masuk akademi kemiliteran langsung mendapat pangkat bintang 4. Memang pagerank sifatnya fluktuatif, bisa naik dan suatu saat juga bisa turun, tapi ini sungguh fantastis baru nongol langsung diberikan jabatan yang strategis sama Google.

Sudah banyak template yang saya buat, tapi satu template ini yang paling saya sayangi. Meskipun ini hanyalah sebuah template sederhana, tak ayal Google pun sampai bertekuk lutut memberikan hadiah yang indah. Template ini yang membuat saya sampai sekarang tidak habis pikir, kemarin baru satu minggu rangking Alexanya udah 500 ribuan sekarang umurnya 3 minggu dikasih hadiah pagerank 4 dari Google... alamak

Demo | Download

Tapi bukan template diatas yang mau saya bagikan kali ini, yang mau saya bagikan ini template yang ada dibawah, gambarnya sih responsif tapi nggak tau ini template responsif apa bukan. Soalnya baru kali ini saya mencoba membuat template blogger responsif. Ternyata memang susah juga, pantas saja banyak designer template handal yang menjual template-template blogger responsif.

Demo | Download

Cek Responsive

Template sederhana dua kolom, iya karena saya belum bisa membuat yang lebih bagus lagi karena memang kemampuan saya baru segitu. Tidak ada fitur khusus yang saya pasang, slider juga nggak ada. Tadi saya coba pasang slider, tapi nggak jadi responsif ya saya copot lagi. Dasar template ini dari Johny Wuss, cuma kok skore SEO nya kecil, saya ngak tahu kenapa.

Silahkan dipakai bagi yang suka dan berminat, dimodifikasi warnanya atau ditambahkan fitur baru biar lebih menarik. Nanti kalau ada diantara teman-teman disini blognya tambah ramai pengunjung gara-gara pakai template responsif, kasih tau saya ya? Saya juga akan rubah template creating website ini biar responsif juga. Oke, itu dulu artikel kali ini, silahkan dicoba dan selamat berakhir pekan bersama keluarga.

NB :
Keliatannya lucu juga, kalau saya bagikan template responsif tapi blog yang saya pakai ini belum responsif ya.

Sumber Artikel

{[['

']]}

Cara Melaporkan/Mengadukan Blog yang Copy Paste Artikel Anda ke DMCA

Posted by as Posted on 20.27 with No comments

Hai sobat blogger, Tutorial kali ini berhubungan dengan kata "MELAPORKAN". Seperti yang anda tahu melaporkan atau mengadukan adalah tindakan yang bisa semua orang pakai untuk memberi sanksi untuk pihak yang melakukan tindakan yang tidak benar. Pengaduan bisa dilakukan di dunia nyata dan dunia maya. Walaupun lebih berat melakukan pengaduan di dunia nyata, namun lebih cepat pengaduan di dunia nyata

{[['

']]}

Transcript v1.6 Gabfire Premium WordPress Theme

Posted by as Posted on 06.47 with No comments

Transcript is a multi-purpose and stylish news / magazine theme which includes an eye-catching slider and a built-in advertisement management module. With Transcript you will realize newspaper blogging can also be lots of fun. It incorporates some of the best features tailor made for newspaper sites, plus a user friendly and appealing design, with different color combinations.

Transcript theme has the following features:

Translation template which makes it possible to translate into any language easily.
Theme Settings page
Automatic image resizer, which is auto generates main page thumbnails.
Unique layout
6 color schemes
A nice ajax support for featured entries
Built in Banner Management
Built in Media Gallery Module
Dynamic Ajax Tab
Search engine optimized
Fully widgetized mainpage, sidebar and footer (27 widgetized sections)
Seven different ad spots

GabFire themes are designed by Mehmet Ozekinci with focus on clean design and layout with excellent support. GabFire is currently having a promotional sale. Buy one if you want to get this theme completly, and you will get another theme absolutely FREE! Click here for the details. Or you can still download it the Transcript old version in this link below.

Demo | Download

Sumber

{[['

']]}

Free Revolution Church Blogger Templates : Updated Versions

Posted by as Posted on 06.45 with No comments

Revolution Church was one of the successful WordPress Converted Blogger Template of Bloganol which is able to gain more than 2000 download from Bloganol and thousands from other linked sites.Although it was good but it has also got some drawbacks which must be maintained.So to overcome with these problems we have updated the previous version of Revolution Church Blogger Template.

These Updated versions are able to overcome some of the drawbacks of the previous versions and also has got more features than the previous versions which tries to give the Template the real look of original wordpress theme.

Updated Version simple V1

Demo | Download

Updated Version advance V2

Demo | Download

Template Featured

Revolution church has 3 Column template and fixed width at right column
This template is optimized to Advertising
This template has date at header left.
Has got two CSS Menu
This template is Magazine style and has a profesional look...

Sumber

{[['

']]}

Studiopress Church Theme

Posted by as Posted on 06.42 with No comments

Studiopress Church 4.0 WordPress Theme. Studiopress aka Revolution themes by Brian Gardner. Church is one of most used wordpress magazine theme in recent times. Now Church is professionally optimized by Joost de Valk, who is on our development team. Because of the amount of optimizations/changes to the theme files, it will require you to load the new version.

Description : Studiopress/Revolution Church is a three-columns, fixed-width, threaded-comments theme by Brain Gardner. Studipress is a premium magazine style wordpress theme with a latest updated features.

Compatibility : Latest WordPress Version 2.8

Updated Features :

Auto-Sized Thumbnails

Another awesome feature with this version of Church is the ability to now display automatically generated thumbnails on the homepage. You can see that the sizes of your thumbnails can be configured on the options page.

Support For Localization

Another awesome feature that is included with the Church theme is support for localization. We have been asked numerous times if our themes can be localized, and we are going to make sure that all of them can be internationalized into different languages.

Sidebar eNews & Updates

In previous versions of the Church theme, we required the use of a text widget to display the Google/Feedburner eNews & Updates section. We felt that was a bit clunky, so we’ve now included the ability to enable/disable that section from within the dashboard, and provide a box for you to place your Feed ID.

Features :

Drop down category menus and page menus
Rotating featured article section on homepage
Widget ready
Google AdSense integration
Section, Archive, Blog page templates
Theme options panel
and many more….

Demo | Download

Sumber

{[['

']]}

Elegant Blogger Templates for Movie Review

Posted by as Posted on 06.40 with No comments

There's 3 styles color, they are black, white and green, easy to navigated. Just download it, open xml template with wordpad and then copy into your Edit HTML. This templates suitable for gallery movie content blog with daily updates. But you can use it for any gallery images content for your blog.

Features :

5 column blogger
Easy loading with elegant looks,
Automatic slider Carousel for your recent post
1 right sidebar
3 columns footer
Navigation drop down menu
Grid and list style
Pagination for blogger ready
Clean design template, and many more.

Johny Joss Banget

Demo | Download

Johny Ember

Demo | Download

Johny Light Banget

Demo | Download

And for cuztomisation this templates, visit this link for more detail :

Cuztomisation Template Blogger for Movie Review

Are you looking some templates for gallery content, especially for your template or theme collection? So you should go to visit this following link :

2 Templates Blogger for Gallery Theme

Sumber

{[['

']]}

Huruf Postingan Blog

Posted by as Posted on 02.22 with No comments

Hai sobat blogger sudah lama ya tidak bertemu. Kali ini saya akan menunjukan huruf-huruf yang bisa dilakukan oleh komputer dan juga bisa pada postingan blogger. Seperti yang anda tahu huruf adalah tulisan yang berupa petunjuk untuk membaca. Ada bermacam-macam huruf yang ada di dunia ini, salah satu yang kita kenal adalah huruf "ALFABET". Huruf alfabet berupa huruf yang mempunyai 26 macam

{[['

']]}

Cara Membuat 3 Kolom di Bawah Header Blogspot

Posted by as Posted on 04.02 with No comments

Widget 3 kolom dibawah header ini sebenarnya bisa Anda tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin andaperlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header.

Baiklah langsung menuju lokasi pengeditan template-nya.

Silahkan login ke blogger.
Tuju Tata Letak.
Pilih tab Edit HML.
Jangan di klik Expand Template Widget, karena akan memusingkan anda.
Letakkan kode css berikut ini diatas kode ]]></b:skin>
/* –- Top --*/
#top {
background:#fff;
margin-top:10px auto;
width:960px;
overflow:hidden;
font-size:12px;
padding:10px;
}
#top h2 {
background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;
font-size:14pt;
font-weight:400;
text-align:center;
font-style:normal;
line-height:1.3em;
color:#fff;
padding:5px;
margin-top:-10px;
margin-left:-10px;
margin-right:-10px;
}
#top ul {
color:#333;
margin:0;
padding:0;
}
#top ul li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVIs9PywjKeMTUJd9sg1yuTCGZWsbl-pJD1UNiSzItFbmMjEkGLhMU-otywjVU96uYSiMOlanwDh4BvInjLSI6Sx-5AmypEYTrfWwGO_XSSn3iBmwYiR1TT1uEosy2avKvobbcvj_ddY94/s320/b3.gif) no-repeat;
list-style-type:none;
border-bottom:1px dashed #CCC;
margin:0 0 10px;
padding:0 0 5px 20px;
}
#top ul li a:hover {
margin:0px 0px 5px;
padding:0px;
}
#topcenter {
width:300px;
float:left;
margin-left:10px;
background:#fff;
padding:10px
}
#topleft {
width:280px;
float:left;
margin-left:10px;
background:#fff;
padding:10px;
}
#topright {
width:280px;
float:right;
margin-left:10px;
background:#fff;
padding:10px;
}
Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='JUDUL BLOG ANDA (Header)' type='Header'/>
</b:section>
</div>
Kemudian letakkan kode berikut ini tepat setelah kode diatas :
<div id='top'>
<b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
</b:section>
</div>
Simpan Template.

Sumber Artikel

{[['

']]}

irhat3

Template Blogger Super Genit

Cara Membuat Slideshow Gambar Ala Yahoo

Cara Gampang Modifikasi Template Maskolis

Cara Membuat Burung Twitter Terbang Pada Blog

Cara Mengetahui Postingan Masuk Google Sandbox Atau Tidak

Template Seperti Ini Belum Pernah Saya Bikin ( 3 Kolom )

Demo | Download

Demo | Download

Template Responsif dan Bukan Responsif

Demo | Download

Demo | Download

Johny Jijay, Simple Template Blogger Gallery Movie

Demo | Download

Template Ini Responsif Bukan ya?

Demo | Download

Cara Melaporkan/Mengadukan Blog yang Copy Paste Artikel Anda ke DMCA

Transcript v1.6 Gabfire Premium WordPress Theme

Demo | Download

Free Revolution Church Blogger Templates : Updated Versions

Updated Version simple V1

Updated Version advance V2

Demo | Download

Studiopress Church Theme

Demo | Download

Elegant Blogger Templates for Movie Review

Johny Joss Banget

Johny Ember

Johny Light Banget

Huruf Postingan Blog

Cara Membuat 3 Kolom di Bawah Header Blogspot

Popular Post

Labels

Blog Archive