Me Galaxy

Cara Membuat Template Blog Sendiri Mulai Dari Nol Sampai Jadi Master

noreply@blogger.com (Unknown) — Sun, 08 Feb 2015 12:22:00 +0000

Begini Cara Membuat Template Blogspot Sendiri dengan mudah dan cepat menggunakan Notepad - Dalam mendesign atau membuat template berpaltfone blogger tidaklah begitu sulit , anda hanya perlu sedikit menguasi CSS dan HTML dan Java Script , Bahkan dengan menguasai CSS dan HTML saja anda sudah bisa membuat template blogger sendiri yang keren , Template yang saya pakai ini pun juga template hasil buatan saya sendiri , meskipun hasilnya tidak begitu baik , tapi saya puas , karena itu hasil karya saya sendiri

Perlu waktu yang tidak singkat , untuk membuat template blog sendiri , butuh waktu berjam -jam , berhari-hari bahkan sampai berminggu - minggu untuk menghasilkan template yang berkwalitas , oleh sebab itulah mengapa para pembuat template tidak senang kalau link crdit hasil jerih payahnya di hapus oleh si pemakai , jadi ketika anda memakai template unduhan entah itu gratisan atau premium , maka jangan hapuslah link credit si pembuat template tersebut , hargailah karya orang lain jika anda ingin di hargai

Cara Membuat Template Blog Sendiri
Kali ini kita akan membuat template blogspot sendiri dengan structure , header , content , sidebar dan footer
Berikut layout template yang akan kita buat

Berikut langkah - langkah membuat template blogspot sendiri

1. Pertama anda masuk dulu ke editor Template Blogger

Hapus semua kode yang ada di dalam editor template tersebut ( ctrl + a => delete ) , kemudian copy dan pastekan semua kode dibawah ini didalam kolom editor template tersebut :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
   <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
   <meta content='noindex,nofollow' name='robots'/>
    </b:if>
<b:include data='blog' name='all-head-content'/>
<meta content='####################' name='google-site-verification'/>
<meta content='####################' name='msvalidate.01'/>
<meta content='####################' name='alexaVerifyID'/>
<meta content='index, follow, noodp, noydir' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='Mas Yadi' name='author'/>
<meta content='1 days' name='revisit-after'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='index, follow, snipet' name='googlebot'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <meta content='website' property='og:type'/>
 <meta expr:content='data:blog.title' property='og:site_name'/>
 <meta content='id_id' property='og:locale'/>
 <meta expr:content='data:blog.pageTitle' property='og:title'/>
 <meta expr:content='data:blog.metaDescription' property='og:description'/>
 <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
 <title><data:blog.pageTitle/></title>
 <meta content='KEYWORD+BLOG_ANDA' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <meta content='article' property='og:type'/>
 <meta expr:content='data:blog.title' property='og:site_name'/>
 <meta content='id_id' property='og:locale'/>
 <meta expr:content='data:blog.pageName' property='og:title'/>
 <meta expr:content='data:blog.metaDescription' property='og:description'/>
 <b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
 </b:if>
 <title><data:blog.pageName/> - <data:blog.title/></title>
 <meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
&lt;!-- /*<b:skin><![CDATA[*/]]
<style type='text/css'>
Bagi anda yang mengerti dan blogger profesional pastinya tidak akan menghapus link ini. Membuat template ini tidak cukup 1 jam bro!
Blogger Template Style
Name       : Nama Template Anda
Date       : Tanggal Pembuatan Template Ini
Updated by : Mas Yadi/Namamu
*/
#navbar-iframe{height:0;visibility:hidden;display:none}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}
body{background:#fff;color:#000;margin: 0 auto;font-family:Arial, sans-serif;font-size: .8em;word-wrap: break-word;}
a:link,a : visited{color:#3384cc;text-decoration:none;margin-left:0px;margin-right:0px;}
a:hover,#nav a:hover,#header a:hover,.post h2 a:hover,.footer a:hover,#nav h1 a:hover,#nav h2 a:hover {color:rgba(255, 2, 2, 0.85); -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out}
a img{border-width:0}
img{max-width:100%;width:auto\9;height:auto;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;}
.quickedit{display:none;}
.clear{clear:both;}

*/ ]]></b:skin>

</head>
<body>

<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>

</body>
</HTML>

Membuat wrapper pada Template
Setelah anda mengcopas semua kode dasar template tersebut , kini saatnya kita membuat wrapper paling luarnya, misal kita akan buat ukuran 1024px ( ukuran bisa diubah )

1.caranya yaitu Pasang Css berikut diatas kode */ ]]></b:skin>

#wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
}

2. Kemudian supaya css tadi berfungsi kita panggil dengan memasang htmlnya , caranya kita cari kode <body> kemudian letakan kode dibawah ini tepat , dibawah kode <body> tersebut

<div id='wrapper'>

3.Kemudian kita tutup kode wrapper diatas dengan memasang kode penutup div dibawah ini diatas kode </body>

</div>

4.Nah sekarang coba anda simpan template dan lihat hasilnya , sampai disini anda sudah bisa membuat template sederhana , tetapi hanya ada widget postingan saja ( Baca cara selanjutnya )

Cara membuat Header dan Header Ads

Setelah anda membuat wrapper sebagai pembungkus , kini kita akan buat header dan header ads ( header untuk iklan ) caranya yaitu :

1.Pasang Css Header berikut diatas kode */ ]]></b:skin>

#header-wrapper{width:100%;overflow:hidden;}
#header{width:262px;overflow:hidden;float:left;}
#header-ads{width:728px;overflow:hidden;float:right;}
.header .widget{padding:10px;}

2.Pasang HTML berikut dan letakan dibawah

<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Mas Yadi Blogger Template (Header)' type='Header'></b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
<div class='clear'/>
</header>

Cara Membuat Post dan sidebar di Blog

Langkah selanjutnya yaitu kita buat sidebar dan postingan , kali ini postingan dan sidebar yang kita buat , letak sidebarnya berada sebelah kiri float:left dan artikel berada disebelah kanan Float:right caranya yaitu :

1. Pasang Css Postingan dan Sidebar berikut diatas kode */ ]]></b:skin>

#artikel-wrapper{float:right;width:724px;overflow:hidden}
#sidebar-wrapper{float:left;width:300px;overflow:hidden}
#sidebar{padding:5px}
.sidebar h2,.sidebar h3{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}

2.Pasang HTML Sidebar berikut dan letakan di atas <b:section class='main' id='main'>

<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>

3.Pasang HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>

<aside id='artikel-wrapper'>

4.Tutup HTML artikel tadi dengan meletakan kode penutup berikut tepat di bawah </b:section> yang terakhir (widget posting blog) atau di atas </div> terakhir

</aside>

Membuat Footer 3 Kolom di Blog

Langkah yang terakhir adalah kita membuat footer 3 kolom , yang letaknya paling bawah , langsung aja berikut cara membuat footer

1.Pasang Css Footer berikut diatas kode */ ]]></b:skin>

#footer-wrapper{width:100%;clear:both}
.footer h3,.footer h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}
.footer{width:32%;padding:5px}
#footer-1{float:left}
#footer-2{float:left}
#footer-3{float:right}

Pasang HTML Footer berikut dan Letakkan tepat di atas </div> yang terkahir

<div class='clear'/>
<footer id='footer-wrapper'>
<b:section class='footer' id='footer-1' showaddelement='yes'/>
<b:section class='footer' id='footer-2' showaddelement='yes'/>
<b:section class='footer' id='footer-3' showaddelement='yes'/>
</footer>

Nah jika langkah diatas telah selesai silahkan simpan template dan lihat hasilnya ,, selamat ya anda kini sudah bisa membuat template blog sendiri , BTW gimana nih , pusing atau nggak dengan tutorial diatas , kalau masih baru pertama kali membuat template mungkin anda pusing , tapi lama-kelamaan kalau udah terbiasa anda akan biasa saja , Oh ya template di atas tadi masih dasar , nanti kita akan membuat menu navigasi , auto readmore , breadcrumbs , related post , share artikel dan design Responsive

Sumber : Masyadi

Creadit By : Apriady

Css3 Button Download

noreply@blogger.com (Unknown) — Fri, 25 Oct 2013 11:56:00 +0000

Demo

Sisipkan Di CSS

/* Button Download Css3 Name: DHF BUTTON Designer: Dharla Ferdana URL: http://www.dhf.web.id */ .button { display: inline-block; vertical-align: top; height: 48px; line-height: 46px; padding: 0 25px; font-family: inherit; font-size: 15px; color: #bbb; text-align: center; text-decoration: none; text-shadow: 0 0 2px rgba(0, 0, 0, 0.7); background-color: #303030; background-clip: padding-box; border: 1px solid; border-color: #202020 #1a1a1a #111; border-radius: 25px; background-image: -webkit-linear-gradient(top, #3d3d3d, #272727); background-image: -moz-linear-gradient(top, #3d3d3d, #272727); background-image: -o-linear-gradient(top, #3d3d3d, #272727); background-image: linear-gradient(to bottom, #3d3d3d, #272727); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 1px 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 1px 3px rgba(0, 0, 0, 0.3); } .button:hover { background-color: #363636; background-image: -webkit-linear-gradient(top, #404040, #2a2a2a); background-image: -moz-linear-gradient(top, #404040, #2a2a2a); background-image: -o-linear-gradient(top, #404040, #2a2a2a); background-image: linear-gradient(to bottom, #404040, #2a2a2a); } .button:active, .button.active { line-height: 48px; color: #ccc; background-color: #b42f32; border-color: #1c1c1c #202020 #222; background-image: -webkit-linear-gradient(top, #a3161a, #b63335 60%, #bf4749); background-image: -moz-linear-gradient(top, #a3161a, #b63335 60%, #bf4749); background-image: -o-linear-gradient(top, #a3161a, #b63335 60%, #bf4749); background-image: linear-gradient(to bottom, #a3161a, #b63335 60%, #bf4749); -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.09); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.09); } .button-check { position: relative; width: 48px; padding: 0; font: 0/0 serif; text-shadow: none; color: transparent; } .button-check:before { content: ''; position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -10px; height: 5px; width: 16px; border: solid #bbb; border-width: 0 0 5px 5px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4); } .button-check:active:before, .button-check.active:before { margin-top: -6px; border-color: #ccc; -webkit-box-shadow: -1px 1px rgba(0, 0, 0, 0.3); box-shadow: -1px 1px rgba(0, 0, 0, 0.3); } /* a.k.a. the Unicode version */ .lt-ie9 .button {line-height: 46px;} .lt-ie9 .button-check:before {content: none;} .lt-ie9 .button-check:after { content: '\2713'; font-size: 24px; font-weight: bold; color: #bbb; }

Dan untuk cara menggunakannya berikut caranya

Edit HTML Dan Masukin Kode dibawah ke HTML

<a class="button" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ZALLGrXahXIRj4KLWgsdWHI0PYHYb-TwyDFvX_4Jf0MMEDX7tw6Jw8mByVr6di5_44bVgyxhVkvhd1d5lBwzUwV-p6v60EUauZi8KpY-YgvGGfvfsx9SofoxhIZvb8s3l22Dm0Sv_GM/s320/Me+Galaxy.png">Button Download</a>
<a class="button active" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ZALLGrXahXIRj4KLWgsdWHI0PYHYb-TwyDFvX_4Jf0MMEDX7tw6Jw8mByVr6di5_44bVgyxhVkvhd1d5lBwzUwV-p6v60EUauZi8KpY-YgvGGfvfsx9SofoxhIZvb8s3l22Dm0Sv_GM/s320/Me+Galaxy.png">Button Download</a>
<a class="button button-check" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ZALLGrXahXIRj4KLWgsdWHI0PYHYb-TwyDFvX_4Jf0MMEDX7tw6Jw8mByVr6di5_44bVgyxhVkvhd1d5lBwzUwV-p6v60EUauZi8KpY-YgvGGfvfsx9SofoxhIZvb8s3l22Dm0Sv_GM/s320/Me+Galaxy.png">OK</a>
<a class="button button-check active" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ZALLGrXahXIRj4KLWgsdWHI0PYHYb-TwyDFvX_4Jf0MMEDX7tw6Jw8mByVr6di5_44bVgyxhVkvhd1d5lBwzUwV-p6v60EUauZi8KpY-YgvGGfvfsx9SofoxhIZvb8s3l22Dm0Sv_GM/s320/Me+Galaxy.png">OK</a><br />

Keterangan : Ubah Tanda Hendak yang mau didownload

Sumber : Dhf

By : Me Galaxy

Cara Menampilkan Jumlah Posting Dan Jumlah Komentar Pada Blogger

noreply@blogger.com (Unknown) — Thu, 24 Oct 2013 12:44:00 +0000

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian letakkan kode ini di dalam formulirnya:

<script type="text/javascript"> function showPostCount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t, 10)); } </script> <p><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showPostCount"></script> Posting & <script src="/feeds/comments/summary?max-results=0&alt=json-in-script&callback=showPostCount"></script> Komentar</p>

Demo

Sumber : Dte

By : Me Galaxy

Textarea On Click/On Mouse Over Select

noreply@blogger.com (Unknown) — Sun, 20 Oct 2013 10:03:00 +0000

On Click

<textarea rows="5" cols="35" onclick="javascript:this.focus();this.select();" readonly="readonly"> "Kenapa kameranya?" tanyanya. "Rusak ya?" Bingung tak tahu mau mengatakan apa. Aku hanya mengangguk - angguk tak jelas. Si cowok mengambil kamera dari tanganku, memencet - mencet tombolnya, dan mengambil foto ku dari berbagai sisi.
"Bagus kok," katanya. "Kelihatannya masih baru. Nih," dia mengembalikan kamera malang tersebut. Aku hanya diam, masih bingung bagaimana mengoperasikannya. "Kok belum mulai motret?" tanyanya. "Padahal, banyak banget objek menarik lho. Lihat. Langitnya bagus banget. Dengan siluet pohon, bakal jadi poto sempurna." </textarea>

On Mouse Over

<textarea rows="5" cols="35" onmouseover="javascript:this.focus();this.select();" readonly="readonly"> "Kenapa kameranya?" tanyanya. "Rusak ya?" Bingung tak tahu mau mengatakan apa. Aku hanya mengangguk - angguk tak jelas. Si cowok mengambil kamera dari tanganku, memencet - mencet tombolnya, dan mengambil foto ku dari berbagai sisi.
"Bagus kok," katanya. "Kelihatannya masih baru. Nih," dia mengembalikan kamera malang tersebut. Aku hanya diam, masih bingung bagaimana mengoperasikannya. "Kok belum mulai motret?" tanyanya. "Padahal, banyak banget objek menarik lho. Lihat. Langitnya bagus banget. Dengan siluet pohon, bakal jadi poto sempurna." </textarea>

Demo

Sumber : Dte

By : Me Galaxy

JavaScript Bubble Cursor

noreply@blogger.com (Unknown) — Sun, 20 Oct 2013 09:46:00 +0000

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian letakkan script ini di dalamnya:

<script type="text/javascript"> var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung var bubbles=100; // jumlah maksmal gelembung var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array(); window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden"; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px"; div.left="0px"; div.bottom="1px"; div.right="0px"; div.borderLeft="1px solid "+colours[3]; div.borderRight="1px solid "+colours[1]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="0px"; div.left="1px"; div.right="1px"; div.bottom="0px" div.borderTop="1px solid "+colours[0]; div.borderBottom="1px solid "+colours[2]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.left="1px"; div.right="1px"; div.bottom="1px"; div.top="1px"; div.backgroundColor=colours[4]; div.opacity=0.5; if (document.all) div.filter="alpha(opacity=50)"; document.body.appendChild(rats); bubb[i]=rats.style; } set_scroll(); set_width(); bubble(); }} function bubble() { var c; if (x!=ox || y!=oy){ ox=x; oy=y; for (c=0; c<bubbles; c++) if (!bubby[c]) { bubb[c].left=(bubbx[c]=x)+"px"; bubb[c].top=(bubby[c]=y)+"px"; bubb[c].width="3px"; bubb[c].height="3px" bubb[c].visibility="visible"; bubbs[c]=3; break; } } for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c); setTimeout("bubble()", 40); } function update_bubb(i) { if (bubby[i]) { bubby[i]-=bubbs[i]/2+i%2; bubbx[i]+=(i%5-2)/5; if (bubby[i]>sdown && bubbx[i]>0) { if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) { bubb[i].width=bubbs[i]+"px"; bubb[i].height=bubbs[i]+"px"; } bubb[i].top=bubby[i]+"px"; bubb[i].left=bubbx[i]+"px"; } else { bubb[i].visibility="hidden"; bubby[i]=0; return; } } } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sleft; x=(e)?e.pageX:event.x+sdown; } window.onresize=set_width; function set_width() { if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (typeof(self.innerHeight)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } } window.onscroll=set_scroll; function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height; div.style.width=width; div.style.overflow="hidden"; return (div); } </script>

Atau kamu juga bisa meletakkannya di atas kode </head>
Simpan Pengaturan dan lihat hasilnya:

Demo

Sumber : Dte

By : Me Galaxy

Efek Daun Berguguran Dengan JavaScript

noreply@blogger.com (Unknown) — Sun, 20 Oct 2013 09:35:00 +0000

Sebenarnya JavaScript ini tidak digunakan untuk menciptakan efek daun berguguran, melainkan untuk menciptakan efek salju. Versi asli dari script ini bisa kamu pelajari di sini. Saya hanya mengganti gambar saljunya dengan gambar daun.
Tambahkan sebuah elemen halaman HTML/JavaScript kemudian salin kode ini dan letakkan di dalam formulirnya:

<script type="text/javascript"> var snowsrc = "http://2.bp.blogspot.com/-6yjsKoliL_Q/TwlTuQtV3WI/AAAAAAAAB6k/VyKxfGKFBpM/s1600/daun-kecil.png"; // Tentukan URL gambar daun/salju var no = 15; // Tentukan jumlah daun/salju var hidesnowtime = 0; // Menentukan apakah daun/salju harus menghilang setelah x detik (0 = tidak pernah) var snowdistance = "pageheight"; // Menentukan berapa banyak daun/salju yang harus jatuh sebelum akhirnya menghilang ("windowheight" atau "pageheight") </script> <script type="text/javascript" src="http://hompimpa.googlecode.com/files/snow.js"></script>

Demo

Atau Liat Disini

Sumber : Dte

By : Me Galaxy

Widget Posting Terbaru/Recent Post Dengan Gambar Thumbnail Dan Tooltip

noreply@blogger.com (Unknown) — Sun, 20 Oct 2013 09:18:00 +0000

Widget recent post dengan gambar mini mungkin sudah biasa Anda temukan. Tapi mungkin Anda mau mencoba yang satu ini. Widget recent post dengan thumbnail dan tooltip.

Untuk membuatnya, pertama-tama masuk ke halaman tata letak dengan mengeklik menu Tata Letak:

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style scoped="scoped" type="text/css">
#mini-gallery {
width:380px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
margin:0 auto;
font:normal normal 11px Verdana,Arial,Sans-Serif;
color:#666;
padding:8px;
background-color:#222;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);
box-shadow:0 1px 3px rgba(0,0,0,0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#mini-gallery h2 {
font:normal normal 14px Impact,"Arial Narrow",Arial,Sans-Serif;
color:#999;
text-shadow:0 1px 0 black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#3c3c3c;
}
#mini-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0 0;
background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#mini-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0 0 !important;
padding:0 0 !important;
background:transparent !important;
display:none;
}
#mini-gallery .rp-item .rp-child {
position:absolute;
top:95%;
left:95%;
z-index:1000;
width:200px;
background-color:white;
border-top:4px solid #3399ff;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.7);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.7);
box-shadow:0 0 3px rgba(0,0,0,0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
}
#mini-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0 0 5px;
color:#2473A8;
}
#mini-gallery .rp-item:hover .hidden {display:block}
</style>
<script type="text/javascript">
var rpTitle = "New Artikel", // Tentukan judul widget
numposts = 30, // Tentukan jumlah thumbnail/posting
numchar = 1500, // Tentukan jumlah karakter pada deskripsi tooltip
rcFadeSpeed = 600, // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
pBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv0zHwnYqJ4DkoX6LXY2aU1i_dRkseUmAx1myQFPF8fCrxUBKuffn0qLxtol4zAzZeMrWkiKTJiA7FokFZHhZGT4KLZgt_gJbF7m8mfv0j3cyIZx8s1JGtQ6f_ODEBPoxU5YxjVOBL-4TX/s1600/U+Stars.gif", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
blogURL = "http://U-Stars.blogspot.com"; // Alamat blogmu
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/rp-mini-gallery.js" type="text/javascript"></script>

Ganti URL http://U-Stars.blogspot.com dengan alamat blog Anda. Tentukan judul widget pada variabel rpTitle, tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numposts, tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numchar.
Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, buang kode itu dari widget.
Klik Simpan dan lihat hasilnya.

Demo

Sumber : Dte

By : Me Galaxy

Slideshow Otomatis Blogger Dengan Imageflow 1.3.0

noreply@blogger.com (Unknown) — Sun, 20 Oct 2013 08:55:00 +0000

Hal yang paling sulit adalah tentang bagaimana caranya menyisipkan URL posting ke dalam Imageflow, karena saat gambar diklik, yang terakses bukannya URL halaman, melainkan URL gambar itu sendiri. Meskipun Saya telah berhasil memanipulasinya menggunakan JQuery, yaitu dengan cara menyimpan URL posting ke dalam atribut rel pada gambar, sehingga Saya bisa mengakses URL tersebut dan menyisipkannya ke dalam perintah window.open() seperti ini:

onclick = function() { window.open($(this).attr('rel')); }

Tapi Saya pikir, menggunakan JQuery pada Imageflow merupakan sebuah pemborosan besar. Tidak efisien. Bahkan Imageflow bisa bekerja tanpa JQuery! Jadi Saya memutuskan untuk menggunakan ilmu sihir terakhir: Menyisipkan elemen <a> ke dalam atribut rel gambar (karena caption setiap slide diproduksi dari atribut alt pada gambar) seperti ini:
Dan berhasil!

Tahap 1: Mengedit Template
Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:
]]></b:skin>
Salin kode di bawah ini, kemudian letakkan di atasnya:

@charset "utf-8"; /* Auto Content 4 Imageflow 1.3.0 by Taufik Nurrohman URL: https://plus.google.com/108949996304093815163/about */ @media screen, projection { .imageflow { width:600px; /* Lebar Slideshow */ position:relative; text-align:left; visibility:hidden; margin:0 auto; font:normal normal 12px/1.4 Verdana,Tahoma,Arial,Sans-Serif; } .imageflow img { border:none; padding:0; margin:0; background:transparent; position:absolute; top:0; visibility:hidden; /* Enables bicubic image resampling for the IE7 */ -ms-interpolation-mode:bicubic; /* Uncomment this declaration to enable shadow around images -webkit-box-shadow:0 1px 10px black; -moz-box-shadow:0 1px 10px black; box-shadow:0 1px 10px black; */ } .imageflow p { margin:0 auto; text-align:center; } .imageflow .loading { border:1px solid white; height:15px; left:50%; margin-top:4px; margin-left:-106px; padding:5px; position:relative; visibility:visible; width:200px; } .imageflow .loading_bar { background:#fff; height:15px; visibility:visible; width:1%; } .imageflow .navigation { z-index:10000; margin-top:60px; /* Jarak atas slider terhadap daftar gambar */ } .imageflow .caption { font-weight:bold; position:relative; text-align:center; z-index:10001; text-shadow:0 1px 3px black; } .imageflow .caption a { text-decoration:none; color:white; } .imageflow .caption a:hover { text-decoration:underline; color:#8CD0D3; } .imageflow .scrollbar { border-bottom:1px solid #b3b3b3; position:relative; visibility:hidden; z-index:10002; height:1px; } .imageflow .slider { background:transparent url('http://1.bp.blogspot.com/-4lzSM34zaOA/T01-W0Mb1kI/AAAAAAAACQU/5w3WsezYvRY/s1600/slider.png') no-repeat 50% 50%; height:14px; margin:-6px 0 0 -7px; position:absolute; width:14px; z-index:10003; } .imageflow .slideshow { cursor:pointer; height:14px; margin:20px 0 0 20px; position:absolute; width:14px; z-index:10003; } .imageflow .slideshow.pause {background:transparent url('http://2.bp.blogspot.com/-yt4eRgtDd6I/T01wsFn-e4I/AAAAAAAACPM/pdr8ljnrM9o/s1600/button_pause.png') no-repeat 50% 50%} .imageflow .slideshow.play {background:transparent url('http://3.bp.blogspot.com/-H5F2nAmaVBA/T01wx0hM8oI/AAAAAAAACPc/OpMSLH-WaO8/s1600/button_play.png') no-repeat 50% 50%} .imageflow .images { overflow:hidden; white-space:nowrap; } .imageflow .button { cursor:pointer; height:17px; position:relative; width:17px; } .imageflow .previous { background:transparent url('http://4.bp.blogspot.com/-Eq4y210bsdE/T01wpORgybI/AAAAAAAACPE/AwOmlS5OrpU/s1600/button_left.png') no-repeat 0 0; float:left; margin:-7px 0 0 -30px; } .imageflow .next { background:transparent url('http://2.bp.blogspot.com/-VwvDUzRpSOo/T01wuzhWf-I/AAAAAAAACPU/K4NQIxxIm7U/s1600/button_right.png') no-repeat 0 0; float:right; margin:-7px -30px 0 30px; } }

Kemudian temukan kode ini:
</head>
Salin kode di bawah ini kemudian letakkan di atasnya:

<script type='text/javascript'> //<![CDATA[ var loadingText = "Memuat gambar", animationSpeed = 50, aspectRatio = 1.964, circular = true, imageCursor = 'default', opacity = false, opacityArray = [10,8,5,3], imagesHeight = 0.5, imageScaling = true, percentLandscape = 200, percentOther = 100, preloadImages = true, slider = true, sliderCursor = 'e-resize', sliderWidth = 14, scrollbarP = 0.7, onClick = function() {}, startID = 1, slideshow = true, slideshowSpeed = 1500, slideshowAutoplay = false, startAnimation = false, xStep = 200; //]]> </script> <script src='http://reader-download.googlecode.com/svn/trunk/imageflow-custom.js' type='text/javascript'></script>

Klik Simpan Template.

Tahap 2: Meletakkan Slideshow
Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script type="text/javascript"> var showPostDate_g = false, showComm_g = false, slideOpenNewTab = true, idMode = true, slidebyLabels = false, slideLabelName = "Mengenai", pBlank = "http://2.bp.blogspot.com/-RdWht36FTLI/TrsqFbSraFI/AAAAAAAABO4/rTjPm97uO34/s1600/dte-darkblue.png", text = "Komentar", numposts_g = 100, home_page = "http://U-Stars.blogspot.com"; </script> <script src="http://reader-download.googlecode.com/svn/trunk/autoContent4Imageflow.1.3.js" type="text/javascript"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu simpan.

Sumber : Dte

Demo

By : Me Galaxy

Galleria V2 - Widget Masonry Untuk Blogger

noreply@blogger.com (Unknown) — Sun, 20 Oct 2013 08:22:00 +0000

Sebelum ini Saya telah membuat widget Galleria versi pertama, kali ini Saya membuat versi yang ke dua dengan dua macam pilihan layout dan konfigurasi yang lebih lengkap.
Masalah besar yang terjadi pada versi pertama adalah dia menampilkan semua feed begitu saja sehingga proses muat widget menjadi begitu lama. Kita tidak memiliki kemampuan untuk memotong proses pemuatan feed kecuali dengan cara menambahkan fitur navigasi. Inilah kabar baiknya:

Integrasi Widget ke Blogger
Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<link rel="stylesheet" type="text/css" href="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/theme/light.min.css"/> <div id="dte-masonry-container"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js" type="text/javascript"></script> <script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/post.brick.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $('#dte-masonry-container').bloggerMasonry({ // JSON Configuration viewMode: "summary", // Widget mode? "summary" || "thumbnail" homePage: "http://nama_blog.blogspot.com", // Your blog homepage numPosts: 10, // Number of posts to display per request numChars: 270, // Length of summary post squareImage: false, // Set thumbnail mode to square newTabLink: false, // Auto open links in new window/tab? columnWidth: 200, // Width of the image (also will resize the brick item width) subHeaderText: ["Diposting oleh ", "<br>pada "], // `Diposkan oleh FOO pada BAR` monthNames: [ // Month array "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], commentLabel: " ", // Label text after total comments navText: { prev: "Sebelumnya", // Previous navigation label next: "Berikutnya", // Next navigation label disabled: "×", // Disabled navigation label data: ["Halaman ", " dari "] // `Halaman # dari #` }, postCategory: null, // Change to a label name to sort posts by specific label fallbackThumb: "http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/img/meee.png", // Fallback thumbnail for posts without images loadingText: "Loading...", // `Loading...` text for loading indicator loadedText: "Loaded.", // `Loaded.` text for loading indicator infiniteScroll: false, // Enable infinite scroll? bottomTolerance: 30, // Bottom tolerance for the end of page indicator in infinite scroll // Shortcuts for Masonry Plugin Configuration (And Some Local Configuration) masonryConfig: { itemSelector: '.json_post', fadeSpeed: 400, // Speed of thumbnail fading effect resizeSpeed: 1000, // Speed of thumbnail resizing effect isAnimated: false, animateWithTransition: true, // Animate each brick with CSS transition instead of JQuery `.animate()`? animationOptions: { queue: false, duration: 1000, easing: null }, isFitWidth: true, gutterWidth: 0, isRTL: false } }); //]]> </script>

anti kode yang Saya beri tanda dengan URL blog Anda. Klik Simpan dan Terbitkan.

Perigatan : Kode yang Saya garis bawahi adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Demo

Sumber : Dte

By : Me Galaxy

Widget Translator Halaman - Versi 2

noreply@blogger.com (Unknown) — Sun, 20 Oct 2013 07:56:00 +0000

Widget ini dibuat sebagai pengganti aplikasi Google Translate yang berat. Murni, dibuat dari kode HTML dan JavaScript, sehingga Anda bisa terbebas dari permintaan HTTP yang biasanya datang dari JavaScript bawaan widget Google Translate. Di sini JavaScript berfungsi untuk melakukan pemformatan URL translasi berdasarkan pola query string dari Google Translate yang berbentuk seperti ini agar kita bisa menuju ke halaman Google Translate tanpa harus terlibat dengannya pada saat awal kunjungan:

http://translate.google.com/translate?u=http://www.nama-situs.com&langpair=from|to&hl=en

from ⇒ Bahasa Asal
to ⇒ Bahasa Tujuan

Kode Widget<style type="text/css"> #translator-wrapper { display:block; width:200px; border:1px solid #0A340A; background-color:white; overflow:hidden; position:relative; } #translator-wrapper select { border:none; background:transparent; font:normal normal 11px Tahoma,Verdana,Arial,Sans-Serif; width:100%; color:black; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-appearance:none; cursor:text; padding:5px 10px; } #translator-wrapper a, #translator-wrapper a:hover { display:block; background-color:#0A340A; border:none; color:white; margin:0 0; text-decoration:none; position:absolute; top:0; right:0; bottom:0; cursor:pointer; width:30px; } #translator-wrapper a:before { content:""; display:block; width:0; height:0; border:5px solid transparent; border-left-color:white; position:absolute; top:50%; left:13px; margin-top:-5px; } #translator-wrapper a:hover {background-color:#0A2C0A} #translator-wrapper a:active {background-color:#082408} #translator-wrapper select:focus, #translator-wrapper a:focus, #translator-wrapper select:active, #translator-wrapper a:active { border:none; outline:none; cursor:pointer; } </style> <h3>Translate this page to:</h3> <div id="translator-wrapper"> <select id="translate-language"> <option value="en" selected="selected">English</option> <option value="id">Indonesian</option> <option value="af">Afrikaans</option> <option value="sq">Albanian</option> <option value="ar">Arabic</option> <option value="hy">Armenian</option> <option value="az">Azerbaijani</option> <option value="eu">Basque</option> <option value="be">Belarusian</option> <option value="bn">Bengali</option> <option value="bg">Bulgarian</option> <option value="ca">Catalan</option> <option value="zh-CN">Chinese</option> <option value="hr">Croatian</option> <option value="cs">Czech</option> <option value="da">Danish</option> <option value="nl">Dutch</option> <option value="en">English</option> <option value="eo">Esperanto</option> <option value="et">Estonian</option> <option value="tl">Filipino</option> <option value="fi">Finnish</option> <option value="fr">French</option> <option value="gl">Galician</option> <option value="ka">Georgian</option> <option value="de">German</option> <option value="el">Greek</option> <option value="gu">Gujarati</option> <option value="ht">Haitian Creole</option> <option value="iw">Hebrew</option> <option value="hi">Hindi</option> <option value="hu">Hungarian</option> <option value="is">Icelandic</option> <option value="id">Indonesian</option> <option value="ga">Irish</option> <option value="it">Italian</option> <option value="ja">Japanese</option> <option value="kn">Kannada</option> <option value="ko">Korean</option> <option value="la">Latin</option> <option value="lv">Latvian</option> <option value="lt">Lithuanian</option> <option value="mk">Macedonian</option> <option value="ms">Malay</option> <option value="mt">Maltese</option> <option value="no">Norwegian</option> <option value="fa">Persian</option> <option value="pl">Polish</option> <option value="pt">Portuguese</option> <option value="ro">Romanian</option> <option value="ru">Russian</option> <option value="sr">Serbian</option> <option value="sk">Slovak</option> <option value="sl">Slovenian</option> <option value="es">Spanish</option> <option value="sw">Swahili</option> <option value="sv">Swedish</option> <option value="ta">Tamil</option> <option value="te">Telugu</option> <option value="th">Thai</option> <option value="tr">Turkish</option> <option value="uk">Ukrainian</option> <option value="ur">Urdu</option> <option value="vi">Vietnamese</option> <option value="cy">Welsh</option> <option value="yi">Yiddish</option> </select><a id="translate-me" href="#" title="Translate!"></a> </div> <script type="text/javascript"> (function() { var mylang = "id", // Your website language anchor = document.getElementById('translate-me'); anchor.onclick = function() { window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en'); return false; }; })(); </script>

Demo

Sumber : Dte

By : Me-Galaxy

Widget Recent Post Dengan Preloader

noreply@blogger.com (Unknown) — Sun, 20 Oct 2013 07:38:00 +0000

Memperkenalkan widget recent post dengan konsep preloader untuk menangani proses pemuatan halaman yang terlalu berat. Secara teknis, widget ini hanya akan memulai pemuatan konten setelah mencapai waktu yang telah ditentukan.
Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya:

<style type="text/css">
#dte_recent-post {
margin:0 0;
padding:0 0;
font:normal 11px Arial,Sans-Serif;
color:#333;
margin:0 auto;
min-height:100px;
background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
}
#dte_recent-post li {
list-style:none;
margin:0 0;
padding:7px 7px;
background-color:white;
border-bottom:1px solid #ddd;
}
#dte_recent-post li a img {
float:left;
margin:0 10px 0 0;
padding:0 0;
border:none;
background:transparent;
outline:none;
}
#dte_recent-post li a.title {
display:block;
font-size:12px;
text-decoration:none;
color:#1155CC;
}
#dte_recent-post li a.title:hover {
text-decoration:underline;
}
#dte_recent-post li span.foot {
clear:both;
display:block;
color:#ccc;
margin-top:7px;
font-size:10px;
}
</style>
<br />
<ul id="dte_recent-post"></ul>
<script type="text/javascript">
//<![CDATA[
var rp_homePage = "http://U-Stars.blogspot.com", // Your blog homepage
rp_numPosts = 5, // How many posts?
rp_thumbWidth = 72, // Thumbnail width. Change to 0 if you want to disable the post thumbnail
rp_numChars = 100, // Number of posts summary
rp_sortByLabel = false, // Replace false with your specific label name to display posts by specific label
// Example: rp_sortByLabel = "JQuery", to sort posts by label "JQuery"
rp_noImage = "http://reader-download.googlecode.com/svn/trunk/images/meee-44x44.png", // A 'no-image' image
rp_monthNames = [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
rp_newTabLink = true, // If true, then all the widget links will automatically opens in new window/new tab
rp_loadTimer = "onload"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...)
//]]>
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js" type="text/javascript"></script>

Demo

Sumber : Dte

By : Me Galaxy

JavaScript Popup Copy Code

noreply@blogger.com (Unknown) — Sun, 20 Oct 2013 07:16:00 +0000

Letakkan kode ini di atas </body>

<script type="text/javascript"> //<![CDATA[ function copy_code(id) { var ref = document.getElementById(id), code = ref.getElementsByTagName('code')[0].innerHTML, w_w = window.innerWidth, w_h = window.innerHeight, win = window.open('', '', 'left=' + ((w_w/2)-250) + ',top=' + ((w_h/2)-150) + ',width=500,height=300,scrollbars=0'); win.document.write('<!DOCTYPE html><html><head><title>Source Code</title><style type="text/css">*{margin:0;padding:0}body{padding:10px;text-aign:center}textarea{display:block;width:98%;height:270px;padding:1px 1px;margin:0 auto;text-align:left;overflow:auto}</style></head><body><textarea>' + code.replace(/<(.*?)>/g, "") + '</textarea><scr' + 'ipt type="text/javascript">var a=document.getElementsByTagName(\'textarea\')[0];a.focus();a.select();</scr' + 'ipt></body></html>'); } function add_copy_button() { var pre = document.getElementsByTagName('pre'); for (var i = 0; i < pre.length; i++) { pre[i].id = 'code-' + i; pre[i].className += ' quick-copy'; pre[i].innerHTML += '<a class="c_b" href="javascript:copy_code(\'code-' + i + '\');">Copy</a>'; } } add_copy_button(); //]]> </script>

Lalu tambahkan kode CSS ini di atas ]]></b:skin> atau </style>

pre {position:relative} pre .c_b { display:block; position:absolute; top:0; right:0; padding:2px 5px; }

Markup HTML

<pre><code> ... </code></pre>

Demo

By : Me Galaxy

Menonaktifkan Klik-Kanan Mouse Dengan Alert

noreply@blogger.com (Unknown) — Sat, 12 Oct 2013 09:02:00 +0000

Itu adalah pesan yang akan muncul jika kamu melakukan klik-kanan pada halaman yang telah dilengkapi script ini. Fungsinya tentu saja, untuk membuat seorang pengunjung menjadi sedikit kerepotan ketika hendak menyalin sesuatu di blog kita. Dan secara otomatis, jendela peringatan ini akan mencegah para pengunjung untuk menyalin sesuatu di halamanmu. Meskipun sebenarnya kita juga bisa menggunakan perintah Edit » Copy atau cukup menekan tombol CTRL+C di papan kunci, tapi paling tidak cara ini bisa sedikit memberi peringatan bahwa di sini ada monster berbahaya (???)

Salin kode ini kemudian letakkan dalam sebuah elemen halaman HTML/JavaScript, kemudian simpan:

<script type="text/Javascript">
// Sumber: http://dynamicdrive.com
var message="Eat Gak Boleh Copy-Paste ^_^ Hee!!!!!";
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

Ganti teks yang berwarna Biru dengan kata-kata dahsyatmu.

Demo

Sumber : DTE

By : Me Galaxy

Cara Buat Hidden Chatbox

noreply@blogger.com (Unknown) — Fri, 11 Oct 2013 10:12:00 +0000

Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox
"Shoutmix, Shoutbox, dll" yang bisa bersembunyi. tapi sengaja kita sembunyikan untuk menghemat ruang blog. Sudah hampir sebulan saya tidak memasang widget shoutmix, itu karena banyak widget lain yang lebih penting darinya untuk ditampilkan. Tapi setelah belajar dan paham, saya menggunakan trik Hidden Chatbox ini untuk memasang shoutmix sehingga blog saya tidak terlihat sesak lagi. Anda juga mau memasang shoutmix dengan trik ini! Baca baik-baik ya. Trik Hidden Chatbox ini terbagi menjadi 2 pilihan,
yaitu LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox. Kalau yang saya pakai di blog ini adalah RIGHT-Hidden Chatbox. Berikut kodenya:

LEFT-Hidden Chatbox

<style>
#hcl {
position:fixed;
top:100px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhazvmycmAfiNaelhFwQPM5ZIuxz0DQTQc2qLfgfhtf6ouMDCnxf9ojZkVLmHRCzt5-9wldiEpMujSv938j-INwE_uTzsIyMPi-o1yo1njqkNbndLAmEHgabFQQuueJU21hc0U_RZFnlBs/s400/cbred-LEFT.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

<br />
<div class="hc-credit">
<span style="float:left">

<a href="http://me-galaxy.blogspot.com/2013/10/cara-buat-hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>
</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>

RIGHT-Hidden Chatbox

<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXfvjo8JrQSluoGqxAS2z6swFe_yMCAdROz8oGv2VTI62_mJFzXuHx9VvuBmAHN-WkrQ3GLljSUQz5i96ejrCg0cZyqgYDp0sCgPWhQtV1Qwc1-LxF85ZKLXG_58QiHsEppV3ijFyNcLw/s400/cbblue.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

<br />
<div class="hc-credit">
<span style="float:left">

<a href="http://me-galaxy.blogspot.com/2013/10/cara-buat-hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>

Keterangan:

#hcr {
position:fixed;
top:150px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 105px. Bisa anda ganti dengan bottom:105px yang berarti jarak tab dari bawah menjadi sejauh 105px */
z-index:+1000;
}

.hcrtab {
height:1500px; /* tinggi tab pembuka hidden chatbox */
width:50px; /* tinggi tab pembuka hidden chatbox */
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXfvjo8JrQSluoGqxAS2z6swFe_yMCAdROz8oGv2VTI62_mJFzXuHx9VvuBmAHN-WkrQ3GLljSUQz5i96ejrCg0cZyqgYDp0sCgPWhQtV1Qwc1-LxF85ZKLXG_58QiHsEppV3ijFyNcLw/s400/cbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}

.hcrcontent {
float:left;
border:3px solid #003e82; /* warna dan ukuran border hidden chatbox */
background:#aa3667; /* warna background hidden chatbox (tidak perlu diganti jika anda mengedit kode lain pada style) */
padding:10px;
}

Berikut beberapa gambar tab pembuka hidden chatbox dan kode warna html untuk border yang serasi:

Kode warna border: #790909

Kode warna border: #aca500

Kode warna border: #008232

Kode warna border: #003e82

Kode warna border: #0079a0

Nha, sekarang kit pasang kode itu di blog. Udah tahu caranya kan? Itu, pilih Layout > Page Elements > HTML/Javascript, lalu masukkan kode Hidden Chatbox disana.

Klik disini untuk melihat demo LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox.

Note: Trik hidden ini bisa juga anda gunakan untuk memasang widget lain, jadi trik ini tidak khusus untuk memasang shoutmix. Anda tinggal berkreasi dengan kode-kode yang bisa bikin kepala jadi botak itu, hahahahahaha...!
Selamat mencoba....

By : Me Galaxy

Memasang Widget Contact Form Di Halaman Statis Blog

noreply@blogger.com (Unknown) — Thu, 10 Oct 2013 09:09:00 +0000

Memasang Widget Contact Form di Halaman Statis Blog – Seperti Yang kita tahu bahwa widget contact form memanglah penting untuk sebuah blog sebagai piranti komunikasi yang bersifat privat. Kaitannya dengan widget contact form pada beberapa waktu lalu juga sudah pernah kita bahas dimana pada tutorial tersebut terdapat bermacam widget contact form blogger official yang sudah di modifikasi juga.
ara penerapannya kedalam halaman statis blog langkah-langkahnya sama seperti pada tutorial sebelumnya, untuk membuat widget contact form supaya bisa berfungsi dengan baik harus terlebih dahulu menambahkan contact widget yang asli (default widget contact form blogger) kemudian kita bisa menyembunyikan atau tidak menampilkan widget contact tersebut dengan menambahkan kode CSS lalu kemudian kita bisa merubahnya menjadi tampilan contact widget yang lebih menarik. Berikut langkah-langkah dibawah ini:

1. Login akun blogger.
2. Masuk Tata Letak - Tambah widget - Gadget Lainnya - Formulir Kontak, Lalu Klik Simpan.
3. Lalu Edit HTML Untuk Menyembunyikan Widget Lama Dan Mengganti Dengan Tampilan Widget Baru.
4. Copy Code Berikut Ini lLalu Paste Tepat Diatas Code ]]></b:skin> Kemudian Simpan Template.

#formcontact { margin:0 auto; width:390px; height: 380px; background:#222222; position:relative; border:1px solid #262626; }
#formcontact h3 { color:#ffffff; font:bold 20px verdana; text-transform:uppercase; text-align: center; padding:5px 0 5px 15px; background:#222; border-bottom: 1px double #333; border-top: 1px double #111; margin:10px 0px; }
#ContactForm1_contact-form-name { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email { margin:0px 10px 10px 10px; padding:10px 10px; width:350px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; color:#ffffff; }
#ContactForm1_contact-form-email-message{ margin:0px 10px 10px 10px; padding:7px 7px; width:355px; background:#262626; border-bottom: 1px double #171717; border-top: 1px double #171717; border-left:1px double #333333; border-right:1px double #333333; overflow:hidden; height:150px; color:#ffffff; }
#ContactForm1_contact-form-submit{ margin:0px 10px 10px 10px; padding:4px 7px; background:#CC0000; position: relative; cursor:pointer; float:right; width:100px; border-bottom: 1px double #660000; border-top: 1px double #660000; border-left:1px double #FF0033; border-right:1px double #FF0033; }
#ContactForm1_contact-form-submit:hover { background:#ff0000; }
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 250px; margin-top:10px; }
#ContactForm1 {display:none}

5. Copy Code Berikut Ini Lalu Klik Laman - Laman Baru - Laman Kosong Kemudian Paste Code Tersebut Pada Halaman Statis HTML.

<div id="formcontact">
<h3>Contact Form</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 250px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

6. Langkah Terakhir Klik Publish, Dan Liat Hasilnya.

Demo

By : Me Galaxy

Membuat Thumbnail Gallery Photo CSS3 Di Blog

noreply@blogger.com (Unknown) — Thu, 10 Oct 2013 07:55:00 +0000

Pada Posting Sebelumnya Saya Juga Sudah Pernah Membahas Tentang Simple Gallery Photo Di Blog Dengan Cara Yang Simple Nnamun Pada Gallery Photo Tersebut Tidak Terdapat Efek Zoom Hover. Maka Pada Tutorial Ini Saya Akan Kembali Membahas Tentang Bagaimana Cara Membuat Suatu Gambar Pada Posting Blog Yang Berjumlah Banyak Namun Tidak Membutuhkan Banyak Ruang Posting Dan Sekaligus Terdapat Efek Zoom Pada Gambar Tersebut. Pada Gallery Ini Default Layout Gambar Hanya Akan Berbentuk Thumbnail Yang Tampil Didalam Posting Blog Namun Nampak Akan Membesar Jika Pada Gambar Tersebut Tersentuh Oleh Mouse. Tentu Sangat Efisien Dan Minimalis Namun Akan Tetap Terlihat Elegant. Untuk Mengetahui Hasil Dari Tutorial Ini Bisa Langsung Dilihat Pada Demo Yang Saya Sertakan Dibagian Bawah. Apabila Ingin Menerapkan Kedalam Blog, Berikut Adalah Tutorial Cara Membuat Thumbnail Gallery Photo CSS3 Di Blog.

1. Login ke akun blogger.
2. Lalu Copy Code Dibawah Ini.

<style>
#thumbgallery { overflow: visible; }
#thumbgallery ul li { list-style:none; display:inline-table; padding:5px; }
#thumbgallery ul li .pic{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
opacity:0; visibility:hidden; position:absolute; border:1px solid #52e052;
-webkit-box-shadow:#272229 2px 2px 10px;
-moz-box-shadow:#272229 2px 2px 10px;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
box-shadow:#272229 2px 2px 10px;}
#thumbgallery ul li .mini:hover { cursor:pointer; }
#thumbgallery ul li:hover .pic { width:550px; height:350px; opacity:1; visibility:visible; float:right; }
</style>
<div id="thumbgallery">
<ul><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqPSbhy9DSlhrXAeYdWGpoKFqtMFVS-EfEkgBtTLa7tNgVaAtHYDUnjfpASeUq6gP20yUoiC_CqUsa-xQJ77nrcK2QNZrui1sRZtGklvmSxTTpWJoULCCwYpWXnlJvHUczqundp_9_I3Sb/s100-no/Gallery+Faceblog+Evolutions+%25281%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiktfJX9CDXPa6oFr1DvETTaPEbgxpQQfJNOA01utcZCDGubTkruUPVICwsIVvdhr4kh_wj4oNeQb7GEutOMjjbXclVlLzO7_GCa3uTh7IiLsOptPjNcg5brnyYqpYNWJbIw1A3N-TpnFCg/w552-h367-no/Faceblog+Evolutions+%25281%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-nX7i0QFy3UMqxbwB8AfK8b1qk1kbabJYwSFrfal2HMILKxCx0yxg60dtAu9_n15ZqUB4YQ03RvVOjhBbfU-vGzn8aKYQPdoRyCuSjzOLTcEhHz3_DY7wEv91gHXgsHsNd_IGU7_IvCTB/s100-no/Gallery+Faceblog+Evolutions+%25282%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN-sk073ve7MuorbPlFhmBn403VQuEACiMnCktx2MZA6jJEb2-9c49hzI-mjmUWOIzauIXPRVP2yGzAl2KCAWZY4ebd6N90idCngbQglR9kGyhDqdlaAxM4hagB41FqXo7HgX3d8ZnNbhU/w552-h367-no/Faceblog+Evolutions+%25282%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizC6VF9-XWafMmhDPMUQqXYD3gvAb7gc8jDVGJNlwlxxp5lESgiMoTKXqTmFxcmBuPx_2tuNCHAa_2SYzEXmpH19neJfDEVZKyYsHrTl1Y9dmNHJPEDIutrsYCmeyyJhVf1ch4B2zR3dwK/s100-no/Gallery+Faceblog+Evolutions+%25283%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiZBZtRlUeSoSruAsNo9PX1PwwztDY7ZNxr1RBPAC3wUpFLXtprKh-ZLuWj5O5bECNbcZ7MjKcgx9_gdSGLBwvpapZHkS5IgudS_DZNsZ3niyX8iEmpBWdssMH4fpDe35LRont-EHD3y5V/w552-h367-no/Faceblog+Evolutions+%25283%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglsHdS6RswsmSp-sw4VC-yf9hnvSRpGZuhyphenhyphensAOsgGmGdqLXrs-tdL8vUFUHecFIO2hwn0xGjcmBDnUj9wEN98xWMmimqPTOO2KvcIuQEucRiGQcrL_PCikgxd982DgVWPiOvQNmO2NQ2Xi/s100-no/Gallery+Faceblog+Evolutions+%25284%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCGLgFIsqDn8Ub5G30RGuojqDA7V_NSgJlYvCGkjuJVB1ax63wkV-dVoaNhfGjAN8mn0Gl5Qy8XjCH6FDMYyihqHNOVgn6vER6QSZYUCzRST_voymZjC8HCy6H_zzrtLe2j9EhW-8PxKir/w552-h367-no/Faceblog+Evolutions+%25284%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTJuRBOf4oQ2HC83taK8ji5yY40rjwP1WdsrT-08qeogiNTq6LqrJ7zpr5vdunxJLsLdK5P-DJH8rZJm_nbF_phsYqPrwJjVXJfftgWrqbHg9_6SKGtzu-ZrbL_kQHrbkxeQkIdlfUL_f/s100-no/Gallery+Faceblog+Evolutions+%25285%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2NT_EZQJ7NdmI8ir2bDFNCnvhyphenhyphenB15Y1E3Q0LVUsmuuMhUIg6cRW2WmOBgHRP-TEb_lavJxL2u5w3CaK7mMMKYPlmwhrWxgCTu2-870PBvGO8aAEzy7y2tor6OulcBNO452q9SHotWPzK/w552-h367-no/Faceblog+Evolutions+%25285%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0XrMEJNyfkwQZ511pO4Zd-JFdTZwCCDwSRR8TPaivhxmUeuS7lCLmlMAvl-Ua2WsIFIBGuQIclX0B1TP_cRdW1mtMUEwiio9lepG2ZqMAXEQp-L7IAl0cwGiScZifKcY7DmFOhKOqcTWD/s100-no/Gallery+Faceblog+Evolutions+%25286%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1yZfQQdkyhiX6IPl8xBqJicV47IZ6eKABHrGu09Mpeo6LLIEQ3PratRmSzJQE2uABsa00Q10uIYgN-woBvYwkJcFZ0aYAKRFlDCuciPIVTrd-CxbIyKVn6RIaGmntASl1QlQDmRuN-67o/w552-h367-no/Faceblog+Evolutions+%25286%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR8PV2wSdl1JuVZjkGmkxSjYoVFVuNSZDcLl3PK36ejhKv9I37k1o-OhsMtd_PW9uoicMcyDmsyhXsLk_0hRsLYj6za9m9sSIEqKEzLmENkD2HF0vBAJzvJEFguxSdmPVcvhGg0qlZJ5bP/s100-no/Gallery+Faceblog+Evolutions+%25287%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPYD7NE2EmcR_OyRpKhWuldvtCByB1_JCfDCNdz4XW9cUaw0oLI9QXDYWZakw45kw73NJYcpDVnCr4F9CZKhJFQmI7MQOZ3_-GTOa2l9JFtfT_RUwuDOSw8N-_oJLg3WR1edkviLAS2MoO/w552-h367-no/Faceblog+Evolutions+%25287%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPhhiFqMvwgFfD0kejB71qzElpSgp_q1ayjaSmGVv_cBj5FqmzPLrOBfql2_oLVkzklEGkVwVqQC8mwYBNirlOI039hgVp65EpCXlKO-Rgo0GfuB7fJw_aTx6lj0r_oZNhzmiEQShK9YEQ/s100-no/Gallery+Faceblog+Evolutions+%25288%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZPPcI7JcltfblR5AI1KdxIhW1vFPH1rWbLRXozQe35AGNZU2dvPLo8bLKl3jMCqLWov2YhUWZ-XVfvPkQUq8DZhyphenhyphenOoh2NI6iHXrEoDLlPKw7xXySpojk24FHGmoDY2lbOYzxsBohNWuW/w552-h367-no/Faceblog+Evolutions+%25288%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjomPBOaob3WjMwhS16uSvfhSG0or4ATuCcEq3YZUawnzpGgC68mhzHLgYZ8bMPqmxEeSx77hDjWdM8D7Sy50otDt4_nvHu5NWXCbv_EpkFFa85QUybFchbHeWwq3Y66rSv1-MCQVJKcVG_/s100-no/Gallery+Faceblog+Evolutions+%25289%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmRGLlGBAxM3P67gcyu-Kn3u5Hdp5OozVRrUvHkm7aqXCqttc6xUbK20vrtJZYH9wsgwvfsaMt5l62FtvUvmFux7R3sAGm7DrR-uN77lnFapg0C-xokYLhEooZfooQI77vfuemVgDzLS8S/w552-h367-no/Faceblog+Evolutions+%25289%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXMAD_8gjHG_uCN1330glQmxK2Ix7N6ZoapDNtEmLMf5puXq9THw-zFZYlrR5Mubt1w6cnrwVJHTBlv36Mw1nCbWMW73Ey-g9tJhJjQ8DeM3uiAKggnjUzg8oURRHyw6KFIBxAyifsU_B7/s100-no/Gallery+Faceblog+Evolutions+%252810%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpSStYxLPDmZK3Jd-qmQHELn2rC8mB16gFDU7WmWEQc-kF1CsEDw4yRugvoWkml1GElzDik_Q7W7af8_hRwS9ILbMg2GdedawIKXl1KVP2Z3NGKmfHx85LEU9AVh_l3zVo0MIL0U4dPqCN/w552-h367-no/Faceblog+Evolutions+%252810%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix_d6GEEFGiCvO61gpb8C2Zf5eVKj1IrofUWOnyaGREhG_1SnJKDOS6EJSIv5xRkACmw1XZePujq_yQjARqBH0V-115jcTd3wXCagZ03fNv04AdH6rZnPcH-YPp-vrRP7_7NTDgYvlrcCw/s100-no/Gallery+Faceblog+Evolutions+%252811%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnmvs_hEgWJ6JuVO39e-kyLhAU8UuOMqiEFRT0lfbcymKB6WN6kJJGuFBEkbO9LVX0gcIGVrHUKWHbDsVYfDMAeSdLHYCmaQ9KEtRdO8fpo3znIEeN0WMTwK7KlnaMTgkv02TKxzybxhDU/w552-h367-no/Faceblog+Evolutions+%252811%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWNOiu2Vy8N5b57i98KXksOiAXar1E9ep_rFQrET9esH-t9DvkGaCxLm7sG8jVKt1olcIHi3OYcta6KvqvEx8MFS_BRbuNo5ZR_YjL5JDL1bVdUDbf4EjyRT9UEECE84sL-MArT1wuuRaw/s100-no/Gallery+Faceblog+Evolutions+%252812%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZwhqWKa1aQkitjuXOcPHythL_06Gtb91pQ57ZWXHlUCk0aOx8-tZv6_El3RjJPFGeVQOZYyHF1G2Y__v2gZvetbLZdcTvRyy36poCQZjt0XbDX-LHk32AP7CKvHYRSRxoNApM-1VrbBQ/w552-h367-no/Faceblog+Evolutions+%252812%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY2asYEi12XQ_wWj_TCQeMnbvDJtcbG6jU5RZjWnOu9um3JgF5lnHA7e55srV8QwaYBi5Icc18_E42FEMiuUtfvMpZDxhIVcy9LuimLr3D-k8yBK7Kzz_RXnQfnOc4QJ43-gmp-hz9DGgd/s100-no/Gallery+Faceblog+Evolutions+%252813%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho4z7pVzQHWnBdX-EZcRDy4PSSgA0YQ6SzPIOAMnoEr4tiBu_V1xVvUP6g19IIRrfAs4jz2ZZ6mH9rlkSfK9vpE3TTjx8ZH-xLWzIMT3hBCHDuLqkXpaPtdeQM2hgNW_cVhHVCySAqij13/w552-h367-no/Faceblog+Evolutions+%252813%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicvsY87bs8mMuhQC1nlz0bjXCBD1TaEpELQnfbN0UXVfex45qSQsJf3F_m4YmNfIyeHjQJmAEV6mnT1MNPGdHzP7brkAJh5sn-9LZ56T1mnEQ13N75x8_VVBZ5y2CYJPFxu0NGImV35Wmj/s100-no/Gallery+Faceblog+Evolutions+%252814%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9WbXHc6soZaj7BIgHcl0ZENETQU0Vv5NMejp29Q0mtaW71SrFMHcEFcqAaDwuwS8DEoz2DkshQrLJELmB5B9eJbA1WKyh7rMyHZGHMyG6pfeP1-ju9CT7rAEm9DdRGDVE8_FHtuta9EXh/w552-h367-no/Faceblog+Evolutions+%252814%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7WxUaZXqtGqRx2XFSTDhdl3U1vSolDqOfpOPJm5z8Fd5l5vY2CURTKxJBdENtuih24I3qsYqWiseYuY_f9n6KKzj2ESlTxz0sfEmFWfvVNoD7NoStRDXGWXJ3krHYxD9apq-nSWaRyEtC/s100-no/Gallery+Faceblog+Evolutions+%252815%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbI8fOWfhtoZMto05ELhuDBpWyBZoFa4wE21nrGr9HGaLpVOJbeOn78Z8rK1cdIVyPGHC5jyfRTqwqVd615QwxFzhv9CEKho_h6VcQOnJwvS2VX-fAect4OYbdS9CDxAnVpYQwCx1Kz2Mu/w552-h367-no/Faceblog+Evolutions+%252815%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuL0Jg_NB20uU0chadmwFHm_X3VRaCZKTC1Ki65ytJsi2pJfgjua6D5M141Q_F6zWDemG8JroqmGsH89StGfuYhRGYYj2IJOiGGhOXLbOhrGQ73wJQ_Bq7a9rbSvzhxKWLrYpn9kMrfYSO/s100-no/Gallery+Faceblog+Evolutions+%252816%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGpuv9vTzTNG5nnFVu_YhQm6AdUoEfyLAj8c2FfvL5Pd8FfHX9Zwifn_oIZ-lEfhFchcvGCUB7S-J-jw_9eiNv6xlCTgrY5IkysMVbfaHs5lxL3Et1pfQ5nzP4uw1Zd0aNjXL7FGeC_bYz/w552-h367-no/Faceblog+Evolutions+%252816%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8y_OLtWMZLeAzpS5Yg0-EgmZBC-f1vNMqRomu2xVJB00mK8nxSXueLWXsRCa2jZcZDZGSy_cEci7DKCvXt-0kPQWL4i-ZtIqZiobNcLRb1Q_pmuUCLW75tcAYv8Ddg6JwhOsdXjqfgDQP/s100-no/Gallery+Faceblog+Evolutions+%252817%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9coLBRjdyUrl_lwPC6fdwZxXOSWacR9zqh-Mstp6jZxShGXgCAMNlQ6ZkECWaWLqvVKuZgQnNCVrYRm7HyDa0zaRiqVxYbbkIkVf4HCvN9CTmCZu8TC-pp-oebCWCkapFEouZc5uhKJAb/w552-h367-no/Faceblog+Evolutions+%252817%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipp1vidmse4x_R4wsieyLphoNe9EvLiz3OatlDUYkJW1sn5FqunJ93HD1yQ2EsFyualHhjKnH7S5-SNXKTXWhzMxt5Rpq9DgzsZmN53InHP2jPjwj_TyYM14JE7_HAvspwZsnvENi4rG_h/s100-no/Gallery+Faceblog+Evolutions+%252818%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_R_zVmTWIBzaIlB-Kep9toqE7uqK7NbTt-oFCNqmT3XV8Jn5OFHq4ANyjn7HtVZXcOsz2ztdJ4NpxdfVD0g0maOBjOxz-1HaW0OwXhOcQ-c6uwuyAWTaKAJxYIFAYTaCUWgxQBtltz5nX/w552-h367-no/Faceblog+Evolutions+%252818%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFk6XLeG6rsImqi_JTCXzqJEwQjUtOm7uM6hHGvd88GiV6Ys6DTzWF2T5og6OW-icF3WsqyegegZyiJfd_sFtLM8DZEGRAjhGkbAvr34e-hQY8xir6DLvNDBoM4KbNMfHcOBH2HjvaZqmq/s100-no/Gallery+Faceblog+Evolutions+%252819%2529.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggj4pET4HHFSewzzRiYKkCDxKKtcyefELvSslh36wZJGvFFvZ4bLx_9hykc7XpQM08wwm88MSdzf0LorzofezuuEb4VDqbNRLRV1PI5mmJCshJP6xzu9FlwmbLs2L1qqNicVdxcyThyphenhyphenfNM/w552-h367-no/Faceblog+Evolutions+%252819%2529.jpg" class="pic" alt="" />
</li><li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZVPQRKvtg_UIOMKxY0-lGBO4Z05mN1ZHxOe0Rxq5fQNvv9FwgtGH_NPxVzoIjrCAIBFmLxelcY-HIATUwYKh1TrZB1SJ4Cx42eGlKbK-Zyv3lqhuN06CzrQzxGvfygkAuqifaozUr7tFJ/s100-no/Faceblog+Evolutions.jpg" class="mini" width="100" height="100" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMLoOpun0phxTfq9sgfdEbywGDSEz7EMMGnHiEfZi6wT1uJXLPr2iXC9c94zkch19ehf4U3_a4U2LyJOSYDhWqYt1Vb9vI5O_5bedKH5E7rVTnfulgKFOn9CQISsspnrLdyA6IbAJY-DXm/w500-h390-no/Gallery+Faceblog+Evolutions.jpg" class="pic" alt="" />
</li></ul>
</div>

Keterangan:
Ganti URL Gambar Di atas Dengan Photo Yang Di Inginkan.
3. Selanjutnya Paste kode Tersebut Kedalam Area Posting Mode HTML, Lalu Klik Publikasikan.

Demo :

By : Me Galaxy

Cara Membuat Efek Zoom Pada Gambar Postingan Di Blog

noreply@blogger.com (Unknown) — Thu, 10 Oct 2013 07:41:00 +0000

Tujuan Membuat Efek Zoom Pada Gambar Postingan Di Blog Adalah Untuk Membuat Gambar Yang Ada Dipostingan Blog Kamu Akan Secara Otomatis Memberikan Efek Zoom "gambar membesar" Jika Gambar Tersebut Di Sorot Mouse. Untuk Membuat Efek Zoom Pada Gambar Postingan Di Blog Tidaklah Susah. Kamu Hanya Perlu Mengedit Template Blog Anda Untuk Menambahkan Sedikit Code Saja.
Ayo Kita Simak Cara2 Buat Efek Zoom Dibawah Ini:
1. Login Ke Blogger.
2. Klik Template Lalu Pilih Edit HTML.
3. Cari kode ]]></b:skin> "Gunakan Ctrl + F", Lalu Letakkan Code Berikut Ini Tepat Diatasnya.

.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }

4. Simpan Template.

Catatan : Jika Pada Template Anda Sudah Ada Code .post img:hover Alangkah Baiknya Jika Anda Hapus Terlebih Dahulu Code Tersebut Sebelum Anda Menaruh Code Diatasnya.

By : Me Galaxy

Simple Gallery Photo Di Blog

noreply@blogger.com (Unknown) — Thu, 10 Oct 2013 07:39:00 +0000

Banyak Dari Blogger Apabila Membuat Efek Pada Blog Mereka Takut Kalau Blognya Berpengaruh Pada Loading Blog Yang Berubah Menjadi Lambat. Pertanyaan Tersebut Seringkali Muncul Atau Bisa Di Jumpai Pada Konten Posting Yang Khususnya Mengupas Tutorial Blog Entah Itu Pada Jenis CSS Maupun jQuery Dan Lain sebagainya. Namun Apa Jadinya Saat Akan Memposting Konten Namun Pada Konten Tersebut Membutuhkan Photo Dan Berjumlah Banyak, Apabila Hanya Photo Tersusun Secara Vertikal Pasti Tentunya Akan Memakan Banyak Ruang Konten Dan Terlalu Panjang Kebawah Untuk Memasukkan Photo-Photo Tersebut. Maka Dari Itu Untuk Meminimalisirkan Ruang Posting Dan Untuk Membuat Konten Walaupun Banyak Photo namun Hasilnya Agar Tetap Terlihat Sejajar Dan Rapi Maka Perlu Untuk Mengatur Photo Tersebut Supaya Tidak Terlihat Berantakan Saat Terposting Di Blog.
Berikut Adalah Tutorial Membuat Simple Gallery Photo Di Blog Secara Mudah Dan Singkat:

1. Login Ke Akun Blogger.
2. Lalu Klik Entri Baru, Kemudian Copy Code Berikut Ini Lalu Paste Di Kolom Posting Mode HTML.

<style type="text/css">
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 0px;
text-align: center;
width: 50%; }
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
</style>
<br />
<div class="gallery snap_nopreview">

<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<br style="clear: both;" />
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
</div>

Keterangan:

Ganti Tulisan Warna Merah Dengan URL Gambar Yang Di Inginkan.
Height Dan Width Silahkan Sesuaikan Dengan Yang Di Inginkan.
Jika Ingin Menambah Gambar Lebih Banyak Lagi, Copy Code Berikut Ini Kemudian Taruh Sebelum Kode </div> .

<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<br style="clear: both;" />
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon">
<img class="attachment-thumbnail" height="250" src="URL GAMBAR" width="230" />
</dt>
</dl>

By : Me Galaxy

6 Web Sedia AJAX Loading Gif Image Generator

noreply@blogger.com (Unknown) — Fri, 30 Aug 2013 16:40:00 +0000

AJAX Loading Gif Image - Ketika akan menerapkan efek load pada blog ini, saya agak kesulitan untuk membuat efek gambar loading dengan gif animated. Waktu itu saya hanya berfikir menggunakan Macromedia Flash. Ternyata banyak web generator Ajax Loding GIF Animated.
Bagi sahabat yang membutuhkan gambar efek loading, dibawah ini saya tulis 6 website Ajax loading generator online. Untuk mengunjungi tautannya silahkan klik pada gambar.

Preloaders.net

Ajaxload.info

Chimply

Web Script Lab

Load Info

Xeosoft

Untuk cara pembuatannya mudah kok... silahkan sobat Cari n Diacak2 sendiri heehee... ^_^

By : Me Galaxy

Template Keren Alias Website Premium

noreply@blogger.com (Unknown) — Thu, 29 Aug 2013 16:44:00 +0000

Sekedar info buat teman teman yang suka berburu template ala wabsite premium
Tapi gratis sobat bisa kunjungi

Template Modify by Creating Website berikut contoh contoh templatenya :

Creating Website 2

Download

Gamer Darkpaper

Download

Johny Darkgamer 2

Download

Johny Darkmusic

Download

Johny Blackstore

Download

Jika temen temen ingin mengetahui screenshot template nya secara lengkap segera kunjugi situs aslinya di sini secara lengkap oke selamat berburu Template keren alias premium

By : Me Galaxy

Cara Pasang Burung Terbang Di Blog

noreply@blogger.com (Unknown) — Thu, 29 Aug 2013 16:19:00 +0000

Cara Pasang Burung Terbang, Kita Langsung Simax Ya Broo...

cara pasang widget burung terbang di blog sebagai contoh coba lihat gambar di postingan ini.

Nah untuk cara membuatnya. . .

masukkan kode di bawah ini di HTML Java script /Postingan berikut kode nya:

<div style="position: fixed; bottom: 200px; left: 300px;width:120px;height:160px;"><a href="#" target="_blank"><img src="http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/burungterbang.gif" title="Click to get more." border="0" /></a></div>

Catatan : Ganti Warna Biru Sesuai Letak Keinginan Sobat.

Sumber : Full Desins

By : Me Galaxy

Cara Pasang Widget Semut Diblog

noreply@blogger.com (Unknown) — Thu, 29 Aug 2013 16:10:00 +0000

Sebenarnya Me Galaxy pasang widget ini hanya buat lucu lucuan saja tetapi ada temen yang pingin tahu cara membuat Widget semut di blog nah tanpa panjang lebar karena postingan ini ngak panjang berikut cara buat nya :

<div style="position: fixed; bottom: 200px; left: 300px;width:120px;height:160px;"><a href="#" target="_blank"><img src="http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/semutfuny.gif" title="Click to get more." border="0" /></a></div>

Lalu simpan

Liat Warna Text Biru Ganti Sesuai Keinginan Kamu

By : Me Galaxy

Blogger Terbaik Indonesia Saat Ini

noreply@blogger.com (Unknown) — Mon, 26 Aug 2013 16:38:00 +0000

Blogger Terbaik Indonesia Saat Ini

Kali ini saya akan Share kepada sahabat Blogger Tentang Blogger Terbaik Indonesia saat ini.
Indonesia telah mempunyai Ribuan bahkan Jutaan Pengguna Blogger di seluruh Nusantara, dari yang Masih Pelajar Seperti saya, sampai Dewasa.. Blogger Indonesia Berkembang sangat pesat, tiap tahunnya, hampir ada Ribuan pengguna Baru Blogger di Indonesia, ada yang memanfaatkannya sebagai Penghasil Uang dan ada juga yang menjadikannya sebagai Blog Personal, tetapi dibalik semua itu pasti ada yang terbaik, Tentunya.
Ok, Berikut adalah Blogger Terbaik Indonesia Saat Ini, ini semua menurut saya, bukan menurut PR Alexa.

1. DTE
Setelah ada sobat saya yang komplain karena nama DTE tidak masuk, akhirnya saya masukan Nama ini, memang sebenarnya blog DTE ini memang pantas masuk dalam Blogger terbaik Indonesia, karena sobat bisa lihat saja blognya, blog ini sudah mencerminkan betapa profesionalnya mas Taufik Nurohman sebagai seorang blogger, sampai-sampai ada satu Blogger yang dengan berani meniru desain dan gaya Blog ini, dari Header sampai footer dan Domainnya juga pun hampir sama DHF (sobat sudah tahukan).
Selain desain, DTE juga mempunyai konten-konten yang berkualitas, seperti Tutorial Jquery, Javascript, CSS, dll, karena jarang sekali ada orang yang mengerti betul tentang Jquery ataupun Javascript, kita sangat beruntung mempunyai Blogger Indonesia seperti ini. .

2. Blog Kang Ismet
Kang Ismet adalah pemilik dari Blog Kang Ismet net, walaupun saya baru mengenal blog ini, tetapi saya sudah sangat terbantu oleh Kang Ismet, banyak Tutorial yang saya dapatkan dari sana, entah itu melalui Google dan melalui Kompi Ajaib, Tutorial yang Kang Ismet sangat lengkap sekali, jadi saya sangat merekomendasikan kepada sahabat Blogger Newbie untuk berkunjung Kesana.

3. Kompi Ajaib
Blog milik Mas Adhi Suryadi ini juga adalah Inspirasi saya, karena, Mas Kompi Ajaib selalu memberikan Tutorial yang dibutuhkan pengunjung, dan ia juga selalu membantu Blogger yang Kesulitan dengan secepatnya membalas pertanyaan Blogger di kotak komentar
Saya juga merekomendasikan para Blogger untuk belajar dan bagi yang kesulitan dengan Template blognya terutama Template Maskolis, bisa ditanyakan kepada Mas Kompi ajaib.

4. Maskolis
Ini dia pemilik dari blog Mastemplate, salah satu Blogger terbaik di Indonesia, dan juga katanya, Maskolis adalah salah satu Blogger yang belum diketahui namanya oleh sebagian blogger, walaupun Misterius, tetapi saya mengetahui nama Aslinya, saya hanya tidak ingin memberitahu namanya, saya takut Maskolis marah, walaupun dia sudah tidak aktif lagi didunia Blogger.
Demikian dari Artikel saya yang berjudul "Blogger terbaik di Indonesia Saat ini".

By : Me Galaxy

Ganti Warna Background Template Secara Otomatis

noreply@blogger.com (Unknown) — Mon, 26 Aug 2013 15:25:00 +0000

Hallo Broo blogger jumpa lagi maklum liburan masih 3 hari lagi nah aku sempetin nich untuk membuat sebuah tutorial tentang cara Ganti warna background template secara otomatis seperti Me-Galaxy ini coba lihat di setiap postingan selalu tampak widget kotak warna warni yang apabila di klik maka background template aka berubah sesuai keinginan Broo...

Login dulu ke blogger
masuk rancangan
tambah gadget lalu pilih HTML java script dan masukkan kode script di bawah ini ke dalam nya

<center><div style="overflow:auto; width:100%; height:100%;margin-top:16px"> <script type="text/javascript"> function bgChange(bg) { document.body.style.background=bg; } </script> klik background warna yang kamu suka <table border="1" width="300" height="20"> <tr> <td onclick="bgChange('')" bgcolor="white"> <td onclick="bgChange('#FAFAD2')" bgcolor="#FAFAD2"> <td onclick="bgChange('#F0E68C')" bgcolor="#F0E68C"> <td onclick="bgChange('#E0FFFF')" bgcolor="#E0FFFF"> <td onclick="bgChange('#98FB98')" bgcolor="#98FB98"> <td onclick="bgChange('#B0E0E6')" bgcolor="#B0E0E6"> <td onclick="bgChange('#87CEFA')" bgcolor="#87CEFA"> <td onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9"> <td onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB"> <td onclick="bgChange('#E6E6FA')" bgcolor="#E6E6FA"> <td onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3"> </td onclick="bgchange('#d3d3d3')"></td onclick="bgchange('#e6e6fa')"></td onclick="bgchange('#ffc0cb')"></td onclick="bgchange('#ffdab9')"></td onclick="bgchange('#87cefa')"></td onclick="bgchange('#b0e0e6')"></td onclick="bgchange('#98fb98')"></td onclick="bgchange('#e0ffff')"></td onclick="bgchange('#f0e68c')"></td onclick="bgchange('#fafad2')"></td onclick="bgchange('')"></tr> </table> </div></center>

Terus Save Dan Lihat Hasil Nya

By : Me Galaxy

klik background warna yang kamu suka

Trik Ganti Background Blog Otomatis

noreply@blogger.com (Unknown) — Mon, 26 Aug 2013 08:41:00 +0000

Salam Satu jiwa ...!!!!! nah untuk pertemuan kali ini Tip dan Trik yang akan me-galaxy perkenal kan buat sobat blogger semua yaitu tentang Trik Ganti background blog otomatis sobat bisa pasang di mana saja scripts nya di side bar ataupun di postingan ,setelah beberapa waktu lalu juga me-galaxy pernah posting tentang Ganti warna background template secara otomatis akan tetapi tutorial yang akan Me-Galaxy share kali ini dalam bentuk berbeda ,mengapa di bilang berbeda karena tutorial kali ini background yang akan Me-Galaxy tampilkan dalam bentuk GiF /animated jadi background yang akan di tampilkan akan nampak lebih Keren ,untuk melihat contoh demonya silahkan lakukan percobaan di bawah ini :

Nah Sudah lihat contoh demonya kan...? gimana masih ingintahu cara membuatnya ....? oke ikuti terus Tip Dan Trik yang akan Me-Galaxy sampaikan Secara lengkap :

Login ke blogger
setelah masuk ke dasboard pilih tata letak lalu tambah Gadget lalu pilih HTML Java Script masukkan kode script di bawah ini ke dalam nya .

<div class="widget-content"> <center><button text-decoration="blink">Cari Background sesukamu disini</button><br /> <center><select onchange="document.body.style.background = this.value;this.style.background = this.value;" name="DADcbgc" title="Change Background Image" width="185" height="30"> <option value="url(http://karinafotocollection-com.googlecode.com/files/gray_background_1.gif) repeat center center fixed" />None <option value="url(https://karinafotocollection-project.googlecode.com/files/back2.gif) repeat center center fixed" />Backgroun keren <option value="url(http://karinafotocollection-com.googlecode.com/files/Yellow%20Flowers.jpg) repeat center center fixed" />Yellow Natural <option value="url(http://lukisan-kaligrafi.com/wp-content/uploads/2011/12/kaligrafi16.jpg) repeat center center fixed" />Kali Grafi <option value="url(http://images.freshnessmag.com/wp-content/uploads/2010/05/lady-gaga-1.jpg) repeat center center fixed" />Lady Gaga <option value="url(http://i469.photobucket.com/albums/rr57/dragonknight0000039/ae/death20note20L.jpg) repeat center center fixed" />L Lawliet 1 <option value="url(http://karinafotocollection-com.googlecode.com/files/ungu.jpg) repeat center center fixed" />Ungu <option value="url(http://karinafotocollection-com.googlecode.com/files/Star%20Green.gif) repeat center center fixed" />Star Green <option value="url(http://karinafotocollection-com.googlecode.com/files/Star%20Blue.gif) repeat center center fixed" />Star Blue <option value="url(http://karinafotocollection-com.googlecode.com/files/Spider.gif) repeat center center fixed" />Spider <option value="url(http://karinafotocollection-com.googlecode.com/files/Salju.gif) repeat center center fixed" />Salju <option value="url(http://karinafotocollection-com.googlecode.com/files/rose.jpg) repeat center center fixed" />Rose <option value="url(http://karinafotocollection-com.googlecode.com/files/Planet.jpg) repeat center center fixed" />Planet <option value="url(http://karinafotocollection-com.googlecode.com/files/Natural.jpg) repeat center center fixed" />Natural <option value="url(http://karinafotocollection-com.googlecode.com/files/matrix%20angka.gif) repeat center center fixed" />Matrix <option value="url(http://karinafotocollection-com.googlecode.com/files/kupu%20kupu.gif) repeat center center fixed" />Kupu kupu <option value="url(http://i354.photobucket.com/albums/r409/zulqi/animasi/2748793811a3546012338b327107314l.gif) repeat center center fixed" />Sasuke Chidori <option value="url(http://karinafotocollection-com.googlecode.com/files/Horor.gif) repeat center center fixed" />Horor <option value="url(http://karinafotocollection-com.googlecode.com/files/Gajah.gif) repeat center center fixed" />Gajah <option value="url(http://karinafotocollection-com.googlecode.com/files/gajah%20hijau.gif) repeat center center fixed" />Gajah Hijau <option value="url(http://karinafotocollection-com.googlecode.com/files/doremon.gif) repeat center center fixed" />Doraemon <option value="url(http://karinafotocollection-com.googlecode.com/files/Cantik.gif) repeat center center fixed" />Cantik <option value="url(http://karinafotocollection-com.googlecode.com/files/Bintang%20Jatuh.gif) repeat center center fixed" />bintang Jatuh <option value="url(http://i303.photobucket.com/albums/nn129/nancyhalo/LavenderBackground.jpg) repeat center center fixed" />VIOLET </select></center></center> </div><center><a href="http:karinafotocollection.blogspot.com"><small>Get widget<small></a></center>

Lalu Save Thanks..

By : Me Galaxy