HOSTING MURAH 2014

• Masuk Account Blogger dengan ID Kawan
• Pada Dasbor pilih Template
• Cari ]]></b:skin> 
• Copas script berikut diatasnya

.titlefield {
text-decoration: none;
color: #09F
}
.titlefield:hover {
text-decoration: none;
}
.labelfield {
color: brown;
font-size: 120%;
}
.datefield {
color: #333;
font-size: 90%;
float: right;
padding-right: 10%;
}
#data {
width: 100%;
height: 20px;
border: 3px solid #699AB8;
padding: 5px 25px;
background-color: #95CAFF;
margin: 5px auto 0;
-moz-box-shadow: inset 0 0 10px #699AB8;
-webkit-box-shadow: inset 0 0 10px #699AB8;
box-shadow: inset 0 0 10px #699AB8;
position:fixed;_position:absolute;bottom:0px; left:-5px;
overflow: hidden;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
}
#data img {
display: block;
margin: 0 auto;
text-align: center
}

• Selanjutnya Copas kode berikut diatas </head> atau dibawah ]]></b:skin> 

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script src='http://system-svn.googlecode.com/svn/trunk/gfeedfetcher.js' type='text/javascript'/>
<script src='http://system-svn.googlecode.com/svn/trunk/gajaxscroller.js' type='text/javascript'/>

• Silahkan masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Tata Letak
• Selanjutnya pilih Tambah Gadget - HTML / JavaScript 
• Copas kode berikut ke dalamnya 

<div style="overflow: hidden;width:600px;padding:5px ; margin:0; height:125px; background:transparent;border: 0px solid #95CAFF;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 10px 10px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 10px 10px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 10px 10px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 0px 0px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 0px 0px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 0px 0px;">
<script type="text/javascript">
var billboardeffects=["GradientWipe(GradientSize=1.0 Duration=0.7)", "Inset", "Iris", "Pixelate(MaxSquare=5 enabled=false)", "RadialWipe", "RandomBars", "Slide(slideStyle='push')", "Spiral", "Stretch", "Strips", "Wheel", "ZigZag"]
//var billboardeffects=["Iris"] //Uncomment this line and input one of the effects above (ie: "Iris") for single effect.
var tickspeed=5000 //ticker speed in miliseconds (2000=2 seconds)
var effectduration=500 //Transitional effect duration in miliseconds
var hidecontent_from_legacy=1 //Should content be hidden in legacy browsers- IE4/NS4 (0=no, 1=yes).
var filterid=Math.floor(Math.random()*billboardeffects.length)
document.write('<style type="text/css">\n')
if (document.getElementById)
document.write('.billcontent{display:none;\n'+'filter:progid:DXImageTransform.Microsoft.'+billboardeffects[filterid]+'}\n')
else if (hidecontent_from_legacy)
document.write('#blogbegowrapper{display:none;}')
document.write('</style>\n')
var selectedDiv=0
var totalDivs=0
function contractboard(){
var inc=0
while (document.getElementById("billboard"+inc)){
document.getElementById("billboard"+inc).style.display="none"
inc++
}
}
function expandboard(){
var selectedDivObj=document.getElementById("billboard"+selectedDiv)
contractboard()
if (selectedDivObj.filters){
if (billboardeffects.length>=2){
filterid=Math.floor(Math.random()*billboardeffects.length)
selectedDivObj.style.filter="progid:DXImageTransform.Microsoft."+billboardeffects[filterid]
}
selectedDivObj.filters[0].duration=effectduration/1000
selectedDivObj.filters[0].Apply()
}
selectedDivObj.style.display="block"
if (selectedDivObj.filters)
selectedDivObj.filters[0].Play()
selectedDiv=(selectedDiv<=totalDivs-2)? selectedDiv+1 : 0
setTimeout("expandboard()",tickspeed)
}
function startbill(){
while (document.getElementById("billboard"+totalDivs)!=null)
totalDivs++
if (document.getElementById("billboard0").filters)
tickspeed+=effectduration
expandboard()
}
if (window.addEventListener)
window.addEventListener("load", startbill, false)
else if (window.attachEvent)
window.attachEvent("onload", startbill)
else if (document.getElementById)
window.onload=startbill
</script>
<script>
function rp(json) {
document.write('<div id="blogbegowrapper">');
for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {
document.write('<div id="billboard' + i + '" class="billcontent">');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k <= entry.link.length - 1; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdday = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdyear = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</div>');
}
document.write('</div>');
}
</script>
<script>
var showpostdate = true;
var showpostsummary = true;
var numchars = 350;
</script>
<script src="http://Nama Blog Kawan.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>
</div>

•  Silahkan kawan menyesesuaikan teks yang saya beri warna merah dengan kondisi Blog kepunyaan kawan, karena disini saya berikan ukuran lebar 600px dan ketinggian 125px :r;
• Sedangkan untuk teks 

1. var showpostdate = true; [untuk menampilkan tanggal] 
2. var showpostsummary = true; [untuk menampilkan isi]
3. var numchars = 350; [untuk jumlah huruf yang akan tampil] 
4. Sedangkan untuk tidak menampilkan, kawan cukup mengganti true menjadi false 

• Kalau kawan ingin menaruh scriptnya di Template silahkan di Parse dulu dan simpan diatas </body> maka hasilnya seperti pada Blog Demo saya itu :z; 

Sekarang saya akan berbagi dengan kawan tentang mempercantik Blog khususnya pada halaman Postingan dengan background yang berbeda-beda baik pada setiap postingan yang kita publish maupun pada satu Artikel :o;
Memang sih sedikit merepotkan kita setiap mau posting Artikel, apalagi setiap alenia baru dengan warna latar [background] yang berbeda-beda atau warna background di tengah warna background utama, asal kita mau mencoba berkreasi sudah pasti ada jalan untuk mencapai tujuan  :s;

Kawan kan tahu, pada umumnya warna latar [background] Blog / Site menoton alias itu - itu saja dan menjenuhkan, untuk menghilangkan rasa jenuh para pengunjung yang ingin membaca makanya saya secara pribadi mencoba ber-Kreasi agar tampil beda. :y
Sebagai Demo :  Artikel yang kawan baca sekarang ini........... Bagaimana KEREN KAN, 

Kalau kita perhatikan icon pada post editor, saya rasa semuanya sudah tersedia seperti contoh icon Huruf A untuk warna teks dan disampingnya ada text background color dan lain sebagainya, cuma hasilnya tidak seperti yang kita harapkan :x;

Caranya sebagai berikut :

• Setiap kawan mau posting pada editor post pilih HTML 
• Sebelum kawan menulis pada post editor tambahkan  <div style="background: KODE WARNA;"> ISI ARTIKEL KAWAN -diakhiri dengan </div> ini adalah cara paling dasar yang bisa kawan terapkan dan selanjutnya bisa dikembangkan lagi seperti postingan saya yang penting  <div> ditutup </div> <br />
• Tujuan dari <br /> dibelakang </div> supaya kawan bisa menulis lagi [buat alenia baru] 
• Sabagai contoh yang saya terapkan pada Artikel ini

Untuk tampilan supaya kelihatan rapi tambahkan padding [untuk jarak pada sisi Artikel] seperti tampilan diatas, kode-kode yang saya tambahkan sebagai berikut :
<div style="background: [warna gardient]; [padding]; [border];[text-align]; ">
<div style="background: [warna hitam]; [padding]; [border];[color:white];[text-align];"></div>
<div style="background: [warna biru]; [padding]; [border];[text-align];"></div>
</div><br />

• Dengan Nama Warna seperti : black, white, yellow, blue dan seterusnya 
• Dengan Kode warna seperti : #000000; [warna hitam] atau  rgb(255, 255, 255); [warna putih]
• Khusus untuk background bisa memakai Gradient [penggabungan 2 warna atau lebih] 
• Padding: 10px [artinya jarak antara sisi / tepi / border dengan huruf]
• Border : garis sisi yang mengelilingi Obyek / Artikel, misalnya 1px, 2px dan seterusnya
• text-align: untuk mengatur kalimat [align left / Align center / Align right / justify]
• yang kalah penting kawan bisa menambahkan shadow

• Masuk dulu ke FaceBook kawan
• Pilih https://developers.facebook.com/setup
• Pilih Create New App kalau kawan belum pernah buat App
• Kalau kawan sudah pernah buat App maka akan langsung muncul Form, kawan tinggal memasukkan datanya saja sebagai contoh BLOG CREATION – Lanjutkan
• Berikutnya akan muncul verifikasi teks yang harus kawan masukkan – Kirim
• Kalau tidak ada kesalahan berarti kawan sudah berhasil membuat Aplikasi
• Copy ID App kawan dan simpan [Notepad] 

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor Pilih Template – Edit HTML
• Cari <html... simpan disini>  kalau pada Template saya letaknya baris ke tiga dari atas atau simpan diatas <head> sebelum tanda penutup
• Sisipkan script ini xmlns:fb='http://www.facebook.com/2008/fbml' sebelum tanda penutup [simpan disini]  hasilnya kurang lebih seperti ini

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>  <head>

• Selanjutnya kawan scroll kebawah [masih pada Template letaknya paling atas] sampai pada <b:skin><![CDATA[/*
• Simpan Script berikut tepat diatasnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='BLOG NAME' property='og:site_name'/>
<meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/>
<meta content='YOUR APP ID ' property='fb:app_id'/>
<meta content='YOUR ID FB PROFILE' property='fb:admins'/>
<meta content='article' property='og:type'/>

• Ganti semua teks yang berwarna merah dengan Nama Blog Kawan dan ID App yang disimpan pada Notepad tadi, sedangkan untuk Your ID FB Profile bisa didapat dengan Klik kanan pada Photo Profile FB kawan atau pada browse [jendela pencarian] ketik :  https://graph.facebook.com/ Nama FB kawan maka akan muncul kode sebagai berikut:

{
"id": "10000063xxxxxxx",
"name": "Putu Blogbego",
"first_name": "Putu",
"last_name": "Blogbego",
"link": "http://www.facebook.com/Nama FB kawan",
"username": "Nama FB kawan",
"gender": "male",
"locale": "id_ID"
}

• Selanjutnya Cari tag </head> 
• Kalau sudah ketemu Copas script berikut tepat diatasnya

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR ID FB PROFIL' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

• Selanjutnya cari tag <body>
• Copas kode berikut dibawahnya

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
<fb:comments/>
</script>

• Sekarang mari mulai lagi berpusing-ria, beri tanda centang disamping Expand Template Widget
• Cari kode <div class='comments' id='comments'> pada Template saya ada 2[dua] dan saya pakai yang pertama
• Copas kode berikut tepat dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxx&amp;xfbml=1"></script><fb:comments expr:href='data:post.url' numposts='5' width='550'/></b:if>

• Simpan kembali Template kawan dan sampai disini berarti sudah selesai, selanjutnya silahkan kawan lihat hasilnya :y; 

• Pertama yang perlu kawan siapkan 2 Gambar / Image dengan ukuran kurang lebih  500x500px dan simpan di Hosting penyimpanan atau bisa dimana saja untuk kawan ambil nanti Link Gambar kawan tersebut 

Gambar - 1

Gambar - 2

• Copas URL / Link js yang saya beri warna biru pada browse pencarian, untuk kawan simpan pada Notepad atau tempat lainnya dengan Nama yang sesuai 
• Edit file js tersebut yang isinya sebagai berikut :

var jaaspeel = new Object();
jaaspeel.ad_url = escape(untuk);
jaaspeel.small_path = 'http://www.digie.co.id/peel/small.swf';
jaaspeel.small_image = escape('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLZr-jKFJpamsloTCSxZdOWzMde1p4MAKMZQ8j6VeIs_TwWeO4n6klC0gLO6hTIsIcuH3t74t5lMV0eIfiuw3x9RuRrMMG6JxHJRHx07KYG3ieUFA1nbAU605rFjYD9xD4BYroMRGE8ZQ/s1600/bali-.gif');
jaaspeel.small_width = '100';
jaaspeel.small_height = '100';
jaaspeel.small_params = 'ico=' + jaaspeel.small_image;
jaaspeel.big_path = 'http://www.digie.co.id/peel/large.swf';
jaaspeel.big_image = escape('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUKypLlZK0_D0iJfjPLZmLeWd-zjAAZ3DPzaHGzrdGyhJUnOrlWevaM2HS5HqlTu8RjZjjlyBZvELCiDepPK29mNGPhHRPv_BNIsGYci2B6YLBsyuQPZkVzbzd8sUQD6Bggm4HPDrPUNc/s1600/BBC.png');
jaaspeel.big_width = '550';
jaaspeel.big_height = '550';
jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;
function sizeup987(){
document.getElementById('jcornerBig').style.top = '150px';
document.getElementById('jcornerSmall').style.top = '-1000px';
}
function sizedown987(){
document.getElementById("jcornerSmall").style.top = "150px";
document.getElementById("jcornerBig").style.top = "-1000px";
}
jaaspeel.putObjects = function () {
// <jcornerSmall>
document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:150px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerSmallObject" width="'+jaaspeel.small_width+'" height="'+jaaspeel.small_height+'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.small_path +'?'+ jaaspeel.small_params +'"/>');
document.write(' <param name="wmode" value="transparent" />');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+jaaspeel.small_params+'"/>');
// embed
document.write('<embed src="'+ jaaspeel.small_path + '?' + jaaspeel.small_params +'" name="jcornerSmallObject" wmode="transparent" quality="high" width="'+ jaaspeel.small_width +'" height="'+ jaaspeel.small_height +'" flashvars="'+ jaaspeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
document.write('</script>');
// </jcornerSmall>
// <jcornerBig>
document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:150px;">');
// object
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');
document.write(' id="jcornerBigObject" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'">');
// object params
document.write(' <param name="allowScriptAccess" value="always"/> ');
document.write(' <param name="movie" value="'+ jaaspeel.big_path +'?'+ jaaspeel.big_params +'"/>');
document.write(' <param name="wmode" value="transparent"/>');
document.write(' <param name="quality" value="high" /> ');
document.write(' <param name="FlashVars" value="'+ jaaspeel.big_params +'"/>');
// embed
document.write('<embed src="'+ jaaspeel.big_path + '?' + jaaspeel.big_params +'" id="jcornerBigEmbed" name="jcornerBigObject" wmode="transparent" quality="high" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'" flashvars="'+ jaaspeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
document.write('</object></div>');
// </jcornerBig>
setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000);
}
jaaspeel.putObjects();

• Masuk ke Account Blogger dengan ID kawan
• Pada Dasbor pilih Template
• Cari Tag ]]></b:skin>
• Copas Script berikut dibawah ]]></b:skin>

screenshot

• Sekarang buka Blog kawan untuk melihat hasilnya :y 
• Kalau tak ada masalah hasilnya seperti pada Blog Demo saya itu

Karena sekarang saya sedikit ada kesibukan untuk peng-Editan lebih lanjut tunggu postingan saya berikutnya, tapi jangan lupa berikan Pendapat / Komentar / Saran kawan :r;

Tempo hari ada kawan Blogger menanyakan cara menampilkan Slide / Animasi pada background Blog, karena kesibukan saya yang paling senang utak-utik Template makanya kelupaan [kejelekan saya sering ganti Template untuk kawan jangan diikuti, karena sangat jelek search engine] :w  hehehe lupa nggak nyambung ya............!!!

• Siapkan Image / Gambar dengan ukuran minimal 1020px x 700px paling sedikit 2 Gambar untuk dijadikan Slide [atau dengan kata lain siapkan sebuah slide width=1020px; height=700px;]
• Copy Link Slide kawan pada tempat penyimpanan 
• Masuk Account Blogger ID kawan
• Pada Dasbor pilih Template - Edit HTML - lanjutkan
• Simpan Template kawan dulu untuk jaga-jaga
• Scroll kebawah pelan-pelan sampai pada  »  body {  
• Kawan bisa menempatkan Link Slide yang sudah dipersiapkan tadi pada background.

Slide Daftar Isi Plus Summary yang  akan saya bahas sekarang hampir sama dengan yang sebelumnya, cuma yang ini punya kelebihan ada Summary [beberapa suku kata isi] :o; Berjalan , sekarang saya akan lanjutkan lagi berbagi dengan Artikel yang hampir sama, cuma bedanya kalau yang ini model slide :y;
Model ini di publish oleh System of Blog  dan sekarang saya akan publish di Blog ini dengan sedikit pengeditan tentunya.
Okey cukup sekian ceritanya, mari kita lanjutkan ke &#187;

• Pilih Tambah Gadget
• Pilih tanda Plus [+] pada HTML / JavaScript
• Copas Script berikut kedalamnya

Sebelumnya saya berbagi dengan kawan Cara Membuat Daftar Isi Plus Komentar Berjalan, sekarang saya akan lanjutkan lagi berbagi dengan Artikel yang hampir sama, cuma bedanya kalau yang ini model slide :y
Model ini di publish oleh System of Blog  dan sekarang saya akan publish di Blog ini dengan sedikit pengeditan tentunya.
Okey cukup sekian ceritanya, mari kita lanjutkan ke »

• Pilih Tambah Gadget
• Pilih tanda Plus [+] pada HTML / JavaScript
• Copas Script berikut kedalamnya