Home Info

Tampilkan postingan dengan label Info Desain Blog. Tampilkan semua postingan

Selasa, 08 Oktober 2013

Kode Warna

Kamis, 03 Oktober 2013

Cara membuat buku tamu melayang di blog

Cara membuat buku tamu auto hide di blog - Baiklah sekarang saya akan memberikan cara untuk membuat buku tamu melayang di blog, buku tamu berguna untuk tempat memberikan comment atau untuk meninggalkan jejak bagi pengunjung yang telah mengunjungi blog kalian, dan juga munkin dapat mempercantik tampilan blog kalian, baiklah langsung saja ikuti tutorialnya :

1. Login ke akun blog kalian
2. Masuk ke Tata letak --> Tambah gadget --> HTML/javascript
3. Kemudian kalian Copy kode di bawah ini

5. Simpan

Catatan : Jika kalian masih belum mempunyai akun cbox dapat membuatnya di situs cbox.ws

Terima kasih
Semoga bermanfaat

Senin, 16 September 2013

Cara memasang game online di blog

Cara memasang game online di blog - Sekarang saya akan membahas tentang cara memasang game online di blog, karena dengan kita memasang game online di blog kita mungkin saja para pengunjung blog kalian akan betah berlama - lama di blog kalian,walau mungkin akan membuat loading blog kalian lama tetapi jika kalian tertarik berikut tutorialnya.

1. Kalian kunjungi situs http://www.khemer.com

2. Pilih game yang kalian inginkan

3. Kemudian kalian ambil kode embednya

Sekarang cara memasang di Postingan blog

1. Login ke akun blog kalian
2. Klik entri baru, kemudian masuk ke html
3. Masukan embed kode game yang kalian pilih
4. Publikasikan

Sekarang cara memasang di sidebar blog

1. Login ke akun blog kalian
2. Masuk ke Tata letak --> Tambah gadget --> Html/Javascript
3. Kemudian masukan kode embed game yang kalian pilih
4. Simpan

Selesai.

Berikut Contohya

Senin, 09 September 2013

Cara membuat headline news di blog

Cara membuat headline news di blog – Bagaimana cara membuar headline news di blog ??? Sekarang saya akan memberikan cara untuk membuat headline news di blog, karena dengan memasang headline news di blog mungkin dapat mempercatik tampilan blog kalian juga dapat memacu pageview blog kalian karena memungkinkan pengunjung tidak hanya singgah pada satu postingan saja. Nah jika kalian penasaran cara membuatnya langsung simak tutorialnya.

1. Login ke akun blog kalian

2. Masuk ke Template --> Edit Html, kemudian kalian copy kode dibawah ini lalu letakan di atas
kode ]]></b:skin>.

/* Headline */
.newspic {background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK7M-8IQhBzYdkhY_pGjB6bYYF4dlC2fBk0BLqi_0bmwtRqyyNnUyP0BkrqYkcTuybCua7-hutjKaebGIKSgBXxNCqr7Z5WSatyU_vp6CmUxqPQTmTizwEh_Kn0Tpl4WuyC-lr4TGJ23Y/s1600/headline_news.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:840px;margin:0 auto;padding:0 auto;height:23px;color:#000;}
.news {width: 850px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000;text-decoration:none;}
.news a:hover {color:#0099cc;text-decoration:underline;}

Catatan :
- Tulisan warna biru adalah url gambar, bisa kalian ganti dengan gambar sendiri
- Tulisan warna merah adalah lebar headline news, dapat kalian ganti sesuai template masing-masing

3. Sekarang kalian cari kode </head>, kemudian letakan kode ini di atas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#0099cc;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 12px courier;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 960px;
height: 13px;
border: 0px solid #cdcdcd;
padding: 0px;
font:bold 13px courier;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #0099CC;}
#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}
#example1 a:hover {color:#111;text-decoration:none;}
</style>

4. Kemudian kalian cari kode <div id='outer-wrapper'>, lalu letakan kode berikut diatas kode
<div id='outer-wrapper'>

<div style='clear:both;'/>
<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://www.whomeinfoblogger.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

Catatan :
- 125px: Jarak judul konten dari sebelah kiri gambar.
- http://homeinfoblogger.blogspot.com : ubah menjadi url blog kalian
- 10 : adalah jumlah postingan jang akan ditampilkan

Demikian tutorial
Semoga berhasil

Sabtu, 07 September 2013

Cara membuat burung twitter berterbangan di blog

Cara membuat burung twitter berterbangan di blog - Kali ini saya akan memberikan tutorial cara membuat burung twiter berterbangan di blog, twitter adalah salah satu jejaring sosial yang paling banyak diminati, karena hampir semua orang di dunia pasti mempunyai akun twitter, nah jika kalian yang mempunyai akun twitter pasti ingin mendapatkan follower yang banyak, mungkin salah satunya dengan promosi di blog kalian masing-masing, maka jika kalian memasang burung twitter ini di blog kalian mungkin bisa menarik perhatian pengunjung untuk memfollow akun twitter kalian, jika kalian penasaran bagaimana cara membuatnya ikuti tutotrial saya berikut.

1. Masuk ke akun blog kalian
2. Masuk ke Tata letak --> tambah gadget --> Html/javascript, kemudian copy kode di bawah ini

<script type="text/javascript" src="http://script-seo.googlecode.com/files/tweet.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgVXILvoFHQ5JyAPrRpPFYuZ-lf_O9tkxkEAiEdY27yJQeKouI-e5zOvs43h94pGW13lEPj18RnZI-tFQkXgCfIw4xsvZ36ts8WzN9zMAHiwjqjDTh5-D3KPzdxgzr-cLhC80K4iv8fL8/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/rifkysaputra";
tripleflapInit();
</script>

3. Simpan

Catatan :
- Ganti tulisan warna merah dengan id twitter kalian
- Ganti kode warna biru dengan kode di bawah ini untuk mengganti warna burung twitter

Burung warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUA5-jpoU_Pd11M9V_A032okGLM_XTbdyCRr7yPYlXbv16eJJ11KtWBY1dMd32VZT-yrESgJZCBrWb6Lqzsaf7QzfQTUNaXW5Kp-J8q6CdlxxKAIUc4oFprkcKSy1ImoqqifXkhCB0Y2g/s1600/Green+bird.png

Burung warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsm2F4Nt4PQXYmSFV0hHjn4vWjNc3TJA__iRR0AJMGqZnNsCuhnVkaKi3AkQeINa3t79fQT6RQE8jTQvHvce3tH42LTAhdS2xemBNqBh8hKAUmkiAvikBv4VQJ8OhN_UenZwMSGSN2Nxo/s1600/red+bird.png

Burung warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghlV0x0f1Cue_4OY6zrV_Str-3_WCqQHd7G8weygy0A9MmLwpBXChLS1ne_TQZiofZHKauJ-VCW6zLfgIa0oj0loEWDtzW_q1vNBi8q2IVwr2RbrJZDAE_IeYcu9TemPW33fGE8Hbyk3Q/s1600/purple+bird.png

Burung warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFRh2sH1MvKuzSHD0KZ1DE7BCb6ABcsYSJXKcGoxPPI0mFR96zBplBdxY6I9YDKcYPL6McguJqkSybfN4u_lBT0t7As3eCLVeG1irZ2PLus0gvbh69INuhIEYNYItoQo1Zk2p3hD7q1ts/s1600/yellow+bird.png

Burung warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZYdsjQIwgmXUqpuUCiCxVgZzXVqgZLVRZZi8hcNCwIvhOo-fUyj_j2sfoDJGC5WIQx3pCUS4EYK5i6-r2PWHFtGEp04XEBqsT_5y2bMTgQlCmlZPk1_sYYpVBeRyOJM8W3uEb7OeDwI/s1600/white+bird.png

Burung warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjogE9TN_prTj1Hh-RP-IIDc2Cw2Xqgi_uesG7PB_bz30fhRjnI5Pjo5TSD4_j2ximZQwqXShIzdpkhDOrX0zUDICy8GYwz9yru6HMAdFZT-ihg9_2_EgkURCzHXpeTUEWVZOrgAXsTWiY/s1600/brown+bird.png

Burung warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuP7wAJOmkl3U0TsFQr4Km_A6YueK-8hJ2-oen-eXpvrh15gjd-dwivbmn5D6_xiDKwhy7GkivNStxLN3w67HINV8Fhi2UYwhvKKl-C6oI1RTMp0If4VxY-fy9pVRSqKiaywBxkJ9u4Kk/s1600/black+bird.png

Burung warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifSwKmGTzoUQpr3kqr1jzpOWvDAo3P-0jAdMrwp_zoJViWcZl0uPinyHcHSucNXzgnJG3Fp5KX-lNxbKHq6zzCUG4X0DGKyN1AQSqT9sEFbaUa0euFH-UBf64caXy53C1exhAk5ZWrU_M/s1600/Blue+bird.png

Demikian tutorial dari saya
Semoga berhasil

Sabtu, 31 Agustus 2013

Cara membuat tulisan dengan efek diketik

Cara membuat tulisan dengan efek diketik – Seperti yang kita ketahui jika kalian sedang mengunjungi sebuath situs atau blog-blog orang pasti kalian banyak menemui berbagai macam efek tulisan, efek tulisan ada berbagai macam efeknya anara lain tulisan berkedip, tulisan bergoyang , dan yang kita bahas sekarang tulisan dengan efek diketik, saya sih sudah lumayan sering melihat tulisan efek seperti diketik di blog tetangga, lalu saya searching di google bagaimana cara membuatnya, eeh ketemu jadi saya langsung saja ingin berbagi dengan kalian cara membuatnya, langsung saja kita masuk ke pembahasan berikut silahan kalian simak tutorial cara membuat/memasangnya.

1. Login ke akun blog kalian

2. Masuk ke Tata Letak -- > Tambah gadget -- > Html/javascript, kemudian kalian copy kode di bawah ini

3. Simpan dan hasilnya kira-kira seperti di bawah ini

Catatan:

- Tulisan yang berwarna merah adalah untuk mengganti textnya

Kamis, 08 Agustus 2013

Cara membuat permalink di blog

CARA MEMBUAR PERMALIK DI BLOG - Akhirnya ada waktu lagi nih posting, permbahasan kali ini adalah cara membuat permalink. Permalink ( Permanen link ) berguna untuk memberi kemudahan bagi blog/website lain untuk memberi tautan/link back ke satu halaman poting milik kita. mungkin sekian pernjelasannya berikut tutorialnya :

berikut gambarnya :

1. Login ke akun blog kalian
2. Masuk ke Rancangan --> Edit HTML
3. Kemudian Copy kode di bawah ini tepat di atas kode ]]></b:skin>

.admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

4. Lalu cari kode <data:post.body/>, kemudian kalian letakan kode berikut ini tepat dibawah kode <data:post.body/>, letakan di <data:post.body/> yang kedua.

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tips dan Trik Blogspot</h4>
<div class='kontainer'>
<img alt='M.Rifky saputra' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB04A8JGu0oN3lGrSoLcaRj7xxKGMUoFUHqP8tlNVqQsis_2qUS043_Mf8KG9DuzYh1GJulcygcUNGZOBvHUGyP9LR_cbnMMxHzAlc3u59hm7npfZZwBvpdUK4w1FXenWytQG_ZPiV3NI/s1600/kmkl.png'/>
Kalian sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>. Saya memperbolehkan kalian untuk mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'><a href="<data:post.url/>" target="_blank"><data:blog.pageName/></a></textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://homeinfoblogger.blogspot.com/2013/08/cara-membuat-permalink-di-blog.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

5. Save dan lihat hasilnya

Ganti kode yang berwarna orange dengan Url foto / gambar milik sobat
Sesuaikan angka yang berwarna merah dengan ukuran template blog sobat ( ukuran textarea )

Kamis, 01 Agustus 2013

Cara membuat kolom scroll pada arsip blog

CARA MEMBUAT KOLOM SCROLL PADA ARSIP BLOG (BLOG ARCHIEV) – Arsip blog adalah salah satu widget yang sangat penting untuk blog, namun karena tampilannya terlalu panjang banyak blogger – blogger yang tidak menggunakan widget dari blogspot ini, karena itu saya memposting cara membuat kolom scroll pada arsip blog dengan membuat tampilannya menjadi lebih pendek tetapi tidak merubah subtansinya, baiklah daripada belama-lama langsung saja, berikut tutorialnya.

Cara yang pertama:
1. Login ke akun blog kalian
2. Kalian masuk ke Tata Letak --> Template --> Edit HTML, kemudian kalian cari kode dibawah ini (gunakan Ctrl + F untuk mempermudah)

<b:widget id=’BlogArchive1’loked=’false’title=’arsip blog’ type=’BlogArchive’>

    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:200px;'>
    <div expr:id='data:widget.instanceId + "_ArchiveList"'>
    <b:if cond='data:style == "HIERARCHY"'>
    <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == "FLAT"'>
    <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == "MENU"'>
    <b:include data='data' name='menu'/>
    </b:if>
    </div>
    </div></div>
    <b:include name='quickedit'/>
    </div>
    </b:includable

5. Simpan Template
Catatan : Kode warna biru dan merah dalah kode yang harus kalian tambahkan
Kode Warna biru adalah tinggi, bias kalian ubah sesuai kebutuhan

Cara yang kedua :
1. Login kea kun blog kalian

2. Kalian masuk ke Tata Letak --> Template --> Edit HTML, kemudian kalian cari kode
<div id=’ArchiveList’> atau ArchiveList (gunakan Ctrl + F untuk mempermudah).

3. Kemudian kalian terapkan kodisi di bawah ini

4. Simpan Template.

Catatan :
- Supaya kalian bisa menemukan kode <div id=’ArchiveList’> atau ArchiveList , Kalian harus
memasang Arsip blognya terlebih dahulu dengan cara : masuk ke Tata Letak --> Tambah HTML
--> Arsip blog --> Save. Jika sudah selesai silahkan coba cara yang di atas
- 200px : Adalah Untuk merubah tinggi kolom scrollnya, selahkan kalian sesuakan dengan
kebutuhan
- Harap disesuaikan saja kodenya, karena tidak semua templates sama,

Silahkan Mencoba
Semoga Berhasil

Sabtu, 27 Juli 2013

Cara membuat widget tab view 3 kolom

CARA MEMBUAT TAB VIEW 3 KOLOM DI BLOGSPOT - Widget yang satu ini sangat berguna karena sangat menghemat tempat juga mempunyai penampilan yang sangat menarik, baiklah dari pada bikin penasaran berikut tutorialnya.

1. Login ke akun blog kalian
2. Kalian masuk ke Tata Letak
3. Pilih Tambah Gadget --> Html/Javascript, kemudian masukan kode di bawah ini.

4. Save

catatan:
Ganti Teks Yang Berwarna Merah Dengan Judul Anda
Ganti Teks Yang Berwarna Biru Dengan Teks Atau Kode isi tab anda

Ganti ukuran sesuai selera:
width:150px = Lebar
height:600px = Tinggi

Semoga berhasil

Selasa, 16 Juli 2013

Cara membuat energi saving mode di blogspot

Sekarang saya akan memposting cara membuat energi saving mode di blogspot, walaupun tidak terlalu penting memasang energi saving mode di blogspot, mungkin kalian bisa mencoba menerapkannya di blog kalian untuk mempercantik blog kalian , langsung saja ikuti tutorialnya.

1. Login ke akun blog kalian klik di sini

2. Klik Template -->Edit Html, kemudian cari kode </head> , setelah ketemu masukan kode di bawah ini tepat di atas kode </head>

3. Simpan Template

4. Setelah disimpan, kembali ke Tata letak kemudian Tambah gadget - HTML/Javascript, lalu copy kode di bawah ini.

5.Simpan setelan, selesai

Keterangan:
Ganti yang ditandai biru yaitu ?time=60 dengan waktu yang sesuai dengan keinginan anda, 60 berarti setelah 60 seconds atau 1 menit, tanpa aktivitas di blog anda, Energy saving mode akan bekerja.
Menarik bukan? Bagaimana dengan blog anda? Sudah terpasang Energy Saving Mode?

Jumat, 05 Juli 2013

Cara membuat Popular Post warna-warni

Setelah kemarin saya memposting tentang cara membuat efek scroll pada Popular Post, sekaran postingan saya kali ini tetap berhubungan Popular Post, yaitu Tentang bagaimana membuat widget Popular Post warna, langsung saja berikut tutorialnya.

1. Login ke akun blog kalian

2. Klik Tata Letak --> Tambah Gadget --> Entri Populer, Silahkan kalian atur Tamplan Entri Populer
    hanya menampilkan judul saja, jangan memakai gambar dan cupilkan. Atur jumlah Popular Post
    yang ingin kalian tampilkan, bisa 1,2,3,4,5,6....10, sesuai keinginan kalian.

3. Simpan Setelan.

4. Kemudian kalian Klik Template -->Edit Html, lalu kalian cari kode ]]></b:skin>, Kemudian
    kalian copy kode di bawah ini tepat di atas kode ]]></b:skin>1. Login ke akun blog kalian

/* Rainbow Popular Post by http://homeinfoblogger.blogspot.com*/

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

5. Simpan Template

Sekian Tutorial dari saya semoga bermanfaat
Good Luck

Cara membuat blog anti klik kanan dan Ctrl+U

Malam ini saya akan ngeshare cara membuat blog anti klik kanan dan Control+C, Jika kalian gak mau postingan di dalam blog kalian di copy atau disebarluaskan mungkin postingan saya kali ini akan membantu, walaupun saya tidak menggunakan cara ini tetapi kalau kalian ingin menggunakan berikut demonya :

keterangan:
Merah : Gambar anti klik kanannya, bisa kalian ubah dengan gambar kalian
Dark : adalah pilihan latar belakang gelap bro, jika lo ingin yg latar belakang terang bro, silahkan ganti dengan tulisan Light oke bro

cara pengunaannya ada dua cara

pertama

1. Buka Dasbor blog kalian
2. menuju ke tata letak
3. tambah gadget
4. pilih HTML/Javascript
5. masukan script yg tadi

kedua

1. Buka Dasbor Blog kalian
2. pilih temlpate
3. edit HTML
4. cari script </body> , taruh script tadi DIATAS </body>

Alhamdullilah akhirnya selesai semoga bermanfaat

Cara membuat Related Post

Dalam postingan kali ini saya akan membahas tentang cara membuat Related Post, Postigan ini adalah permintaan dari teman, baiklah langsung saja ini dia tutorialnya.

1. Login ke akun blog kalian Klik disini
2. Klik rancangan --> Template --> Edit HTML
3.Kemudian cari kode </head>, untuk mempermudah mencari kode gunakan CRT+F
4. Letakan kode dibawah ini tepat diatas kode </head>

//<![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 0;

var relatedUrls = new Array();

function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}}

function removeRelatedDuplicates() {

var tmp = new Array(0);

var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) {

if(!contains(tmp, relatedUrls[i])) {

tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;}

function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;}

function printRelatedLabels() {

var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) {

document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; }

else { r = 0;} i++;} document.write('</ul>');}

//]]>

</script>

5. Lalu kalian cari kode <data:post.body/>
6. Letakan kode di bawah ini, tepat di bawah kode <data:post.body/>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=15"' type='text/javascript'/> </b:if>

</b:loop>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<h4>Artikel Terkait <b:loop values='data:post.labels' var='label'><data:label.name/>

<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></h4>

</script>

</b:if>

7. Simpan tempelate

Cara membuat tanda tanda tangan di bawah postingan blog

1. Kunjungi situs http://www.mylivesignature.com
2. Kemudian kalian Pilih Menu "Star Now"
3. Klik "Using the signature creation wizard"
4. Pada Step 1, masukan Nama tanda tangan yang nanti akan ditampilkan
5. Kemudian Step 2, Pilih jenis font atau huruf yang kalian inginkan
6. Step 3, Pilih ukuran font yang sobat inginkan
7. Step 4, Pilih warna backround dan warna font
8. Step 5, atur kemiringan sesuai pilihan yang kalian mau kalian mau
9. Kemudian muncul 3 pertannyaan yaitu:
- Want us to animate this signature?

- Want to download this signature?

- Want to use this signature?

10. Kalian pilih Want to use this signature?

11. Kemudian muncul halaman baru, pilih Generate HTML code

12. Copy kodenya

13. Login ke akun blogger kalian

14. Pilih Template, Edit HTML, Ceklist "Expand Template Widget"

15. Pastekan kodenya tepan dibawah kode <data:post.body/>

16. Simpan template, dan hasilnya seperti di bawah ini.

Cara membuat Receent Post berjalan di blog

Sekarang saya akan memberikan cara untuk membuat Recent Post yang bisa kalian pasang di blog kalian dengan tujuan untuk mepermudah pengunjung mencari artikel, kalau kalian berminat silahkan ikuti demonya :

1. Login dulu ke akun blog kalian
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Copy kode di bawah ini

4. Simpan dan kalian lihat hasilnya di bloog kalian

Cara membuat text area dengan efek scroll

Kali ini saya akan memposting tentang cara membuat scroll coding, scrolll ini sangant penting saat kalian sedang ingin memposting sesuatu yang panjang, sehingga jika kalian memakai scroll ini akan mempersingkat tulisan agar tidak panjang berikut ini infonya :

Contoh :

Taruh Scrip Kalian

berikut coddinya :

Cara memasang :
1. Buat entri baru
2. Klik HTML
3. Masukan codding nya
4. Selesai

Catatan : - Angka yang berwarna merah adalah tinggi kotaknya bisa kalian ganti sesuai kebutuhan
- Angka yang berwarna biru adalah lebar bisa kalian ganti sesuai kebutuhan

Cara membuat ucapan selamat datang di blog

Selamat malam sobat blogger, dalam malam yang sedang hujan gerimis ini saya akan membahas tentang cara membuat ucapan selamat datang di blog, memang seharusnya jika ada tamu atau seseorang yang sedang berkunjung tentunya harus di jamu dengan baik salah satunya dengan memberikan ucapan selamat datang, ngomong-ngomong soal ucapan selamat datang sekarang saya akan memposting bagaimana cara nya membuat ucapan selamat datang di blog, berikut langkah-langkahnya saya berikan :

1. Kalian buka situs http://www.widgeo.net/?ref=geo
2. Klik "Flash Message"
3. Kalian isi data yang telah disediakan

Your message: "Selamat Datang" Atau kalimat lain yang kalian inginkan kalau saya memgunakan
kata WELCOME TO MY BLOG.
Multi color 1: Pilih warna text sesuai dengan selera kalian
Choose size : Pilih big (ukuran panjang) atau small (ukuran pendek)
Category : Pilih sesuai dengan kategoi blog yang kalian punya
Do you have an adult containt: pilih no jika tidak ada konten dewasa

4. Centang kotak " I accept term and condition"
5. Klik Get Widget
6. Copy kode html yang muncul
7. Kemudian kalian login ke akun kalian disini
8. Klik rancangan --> Tata letak
9. Add Widget >> HTML/JavaScript
10. Kemudian kalian masukan kode yang tadi di copy
11. Save dan selesai

Demikian semoga bermanfaat

Cara membuat efek scroll pada Popular Post

Sekarang saya akan membahas tentang bagaimana cara membuat sih cara membuat Popular Post jadi scroll, karena masih banyak yang belum tahu cara membuatnya, maka saya akan Share bagaimana caranya.

1. Login ke akun blog kalian disini

2. Klik rancangan --> Template --> Edit HTM

3. Kalian cari kode ]]></b:skin>

4. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>

#PopularPosts1 .widget-content{
height:200px;
overflow:auto;
}

5. Ganti angka 200 (tingginya) sesuai keinginan kalian
6. Simpan