EDHO-XP: Tutorial Blogger - Free Download All

Home » Posts filed under Tutorial Blogger

Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Widget Berlangganan Dengan Background Melebar Pada Hover

aduh udah lama gak share tutorial blogger heheheh,. Widget CSS3 ini seperti sebuah daftar link berwarna dan dapat memperlebarkan background ketika mouse berada diatasnya. Widget ini tersedia untuk ditambahkan 4 social link termasuk: Facebook, Twitter, Google+, dan Pinterest serta 1 link berlangganan untuk RSS. kalo mau tinggal pasang ok!

Lihat Demo

Cara menambahkan:

1. Masuk ke Dasbor Blogger - Tata letak - Tambah gadget - Html/Javascript.

2. Kemudian masukkan kode dibawah ini:

<style>
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Pew6XyKZ2XGV1_ZzT597o5JEraaxh7OWXUCZ9cXBPdPamdGEarl-qvPw4bSORcyhwL0ggTph9fbJZpJieEWBqihKn2rFAam4AMbWPppF4B5lG7JbWoIgk0l-ELs7sTZJFYM4sjEufhI/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/halaman fan page facebook/">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="http://twitter.com/username/">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/u/0/alamat profil google+/">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="Alamat profil Pinterest">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/alamat feed rss">Subscribe with RSS</a></li>
</ul>

3. Sebelum menyimpan widget, ubahlah warna merah menjadi url.
4: Simpan widget ini dan nikmati...

Sumber : http://gemarhtml.blogspot.com/2012/10/widget-berlangganan-dengan-efek-melebar.html

5 Comments

Tutorial Blogger

Cara Membuat Tombol Chatbox Melayang

Halo Sobat apa kabar pasti baek kan ? gue mau ngasih tutor yah punya ku sendiri maaf gue jarang update tentang blog lagian maubanyak gue share tpi gue sibuk dengan kegiatan sekolah dan itu sangan penting laksanakan. aku sebagai KETUA majalah milik sekolah. jadi yah sibuk gitu. apalagi diselingin dengan aku sebagainya SEKRETARIS PIK-R. waduh banyak banget kegiatan ku langsung aja yah !

Demonya Di pojok kanan atas atau bisa liat gambar XD

Langsung Bor !

1. Login Ke Blogger
2. Pilih Template
3. Lalu Edit HTML
4. Lalu Cari Kode </head>
5. Lalu COPAS ( Copy Paste ) Kode Di Bawah Ini dan letakan di atas kode </head>

<style type='text/css'>
#DHOchat{position:fixed; _position:absolute; top:150px; right:0; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth-offsetWidth)}
</style>

Selanjutnya ..

1. Login Ke Blogger
2. Pilih Tata Letak Atau Layout
3. Lalu Tambahkan Gadget Atau Add Gadget
4. Lalu Tekan HTML/JavaScript
5. Lalu COPAS ( Copy Paste ) Kode Di Bawah Ini

<div id='DHOchat'><a href='http://edho-xp.blogspot.com/2012/11/chatbox.html'><img alt='Click Here to Chat' height='134' src='http://i1239.photobucket.com/albums/ff513/Ramapoetra24/CHATTT_zpsf9bf8955.png' width='43'/></a>
</div>

Keterangan :

http://edho-xp.blogspot.com/2012/11/chatbox.html diganti dengan URL link chatbox anda
http://i1239.photobucket.com/albums/ff513/Ramapoetra24/CHATTT_zpsf9bf8955.png adalah url gambar nya bisa di ganti sesuka kalian
134 adalah jumlah panjangan nya gambar bisa di ganti sesuka kalian misal 140 (jangan terlalu panjang nanti burem)
43 adalah jumlah lebar gambar bisa di ganti sesuka kalian misal 50 (jangan terlalu lebar nanti burem)

Semoga Bermanfaat !

COPAS SERTAKAN SUMBER NYA !

(ARTIKEL ORIGINAL)

3 Comments

Tutorial Blogger

Pasang Anti CTRL + U Ala EDHO-XP

Memang orang banyak plagiat melalui CTRL + U. Yaitu cara pintas untuk menembus hanya untuk melihat Source blog kita. Yah memang benar orang gak kreatif gitu deh selalu mengintip. Namun anti CTRL + U saya sangat berbeda dengan scipt biasa. Ini scrip jika plagiat menekan CTRL + U maka dia akan diahlikan ke blog/url. Mau tau cara Buat Nya ? yok ! langsung !

Fitur-Fitur :

Tidak bisa CTRL+U
Tidak bisa CTRL+S
Tidak bisa Ctrl+Shift+I
Tidak bisa F12

Cara Memasang Anti CTRL + U Ala EDHO-XP

1. Masuk ke Dashboard Blogger kamu.
2. Lalu ke Rancangan > Edit HTML.
3. Carilah dengan CTRL+F <head>
4. Lalu masukan kode berikut dibawah <head>

<script src='http://goo.gl/2ejf7' type='text/javascript'></script>

5. Simpan template

Coba Buka / Refres blog kamu coba tekan CTRL + U / CTRL + S / CTRL + SHIFT + I / F12 pasti di ahlikan ke blog lain.

Semoga Bermanfaat !

14 Comments

Tutorial Blogger

Cara Membuat 404 Erorr Blog Ala EDHO-XP

DEMO :

Coba buka http://edho-xp.blogspot.com/OppaGangnamStyle pasti muncul pesan
dan coba sembarang huruf http://edho-xp.blogspot.com/CiyusMiapahEnelan Pasti muncun pesan eror juga mengapa ini yang dinamakan 404 . Anda bisa lihat pengertian 404 eror di sini : http://edho-xp.blogspot.com/2012/11/jenis-jenis-kode-error.html

Tutornya Langsung Ajah

Login Ke Blogger
Masuk Ke Dasbor
Klik Nama Blog Kamu
Pilih Template Pilih Button Edit HTM > Lanjutkan
Cari Kode </body> (Biar Mudah Tekan CTRL + F)
Masukan Kode Dibawah Ini

<b:if cond='data:blog.pageType == "error_page"'>
<style>
html {
height: 100%;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeuQ9hmauZK_oF6M_43tdZod8hxBn-d1Y03gxQgqYxAEH33-3TCQ4PaOs9lAgkTyMlxAM2Q4EiOWcb1pske1APXBJaE2Qm597hgeAWqzotAvhpVkEBamqmBBSKenFoQs4wguPHmcSZ_rAs/s1600/DAFUQ.png) no-repeat center 50%;
margin: 0;
}
body {
display: none;
}
</style>
</b:if>

NB : Kode Yang Berwarna Merah Bisa Diganti Dengan Gambar Kamu

Simpan

Semoga Bermanfaat

4 Comments

Tutorial Blogger

Cara Memasang Tombol Like Facebook Mengikuti Cursor

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </body> ( Gunakan Ctrl + f Untuk memudahkan )
6. Jika sudah ketemu taruh kode berikut di atasnya :

<script language='javascript' src='http://vicahya.googlecode.com/files/like.js'/>

4. Save template Anda
5. Masuk Ke Bagian Layout > Tambah Gadget > HTML/JavaScript. Pastekan kode ini kedalamnya,!

<script language='javascript'>var fan_page_url = 'http://www.facebook.com/edhoxp'
var opacity = 0.5;
var time = 50000;</script>

6. Lalu Save

NB : Ganti text yang berwarna merah yaitu http://www.facebook.com/edhoxp dengan URL fanspage kalian

Add Comment

Tutorial Blogger

Akibat Gonta Ganti Template Blog

Bercerita tentang template saya punya pengalaman yang membuat saya sedikit kecewa. Suatu waktu saya pernah mengganti template blog ini hingga belasan kali dalam satu hari. Memang banyak himbauan agar kita tidak perlu menggonta-ganti template blog yang kita punyai karena berdampak buruk pada SEO. Namun, apa yang saya lakukan hanya melakukan sedikit eksperimen dan pembuktian saja. Pembaca, yang baru memulai aktivitas blogging sebaiknya perlu memperhatikan efek dari gonta ganti tamplate.

"Menggont-ganti template memang membuat blog kita semakin menarik tapi..... ada efeknya juga"

Kenapa ada efeknya?
Efek tesebut terjadi karena kita akan menambahkan beberapa link dan mengganti beberapa link diblog sehingga terjadi crawled error pada blog semakin bertambah.

Saya akan bercerita pengalaman saya tentang gonta ganti tamplate. Tetapi, saya ringkas menjadi point-point yang mungkin bisa menjadi referensi buat pembaca sebelum mengganti template blog pembaca. Efek samping gonta-ganti template adalah sebagai berikut :

Banyak broken link
Broken link atau link yang rusak menjadi faktor utama kenapa gonta-ganti template itu tidak baik bagi blog kita. Admin blog sering mendapati di webmaster bahwa blog ini semakin banyak broken linknya setelah gonta-ganti tamplate.
Turunnya trafficking visitor ke blog kita

Screenshot pengunjung blog

Lihat di periode 16 Juli 2012 hingga ke 21 Juli 2012, anjlognya trafficking ke blog begitu terasa. Saya juga sempat ketar-ketir. kok bisa turun drastis, padahal kala itu sedang naik-naiknya. tapi, Alhamdulillah sudah naik lagi bahkan lebih tinggi dari semula
Robot pencari, akan mengalami "kebingungan" dan susah terindex
Template ibarat sebuah rumah, jika dirubah-rubah efeknya dapat membuat robot pencari susah meng index situs kita. Karena si robot akan membaca ulang susuan situs kita. Kalau dibahasa kerenkan SE mengalami crawl (aktifitas dimana search engine melakukan pengumpulan data pada blog atau lebih singkatnya melakukan pengindexan terhadap blog dan memberikan peringkat serta menyusun dan menata halaman dalam bentuk index terstruktur agar lebih mudah dicari dalam waktu singkat)
Alexa Rank Blog bisa terjun bebas
Ini momok yang tidak kalah penting. Alexa sebagai indikator kualitas situs kita terjun bebas gan dari posisi sebelumnya, tetapi sekarang Alhamdulillah mulai bangkit lagi, semoga saja bisa ke level terbaiknya.
Membuang-buang waktu
Secara nyata mengganti tamplate membuat waktu ideal kita untuk mempostingkan sebuah artikel jadi terbuang sia-sia karena kita sibuk melakukan setting awal, seperti kala kita memulai blogging diawal kita menjadi blogger dulu.
Pengunjung menjadi sering menemukan blog kita dalam kondisi yang tidak sedapIni adalah imbas dari kita yang sedang melakukan perbaikan di blog kita. Pengunjung akan mendapati blog kita dalam kondisi yang kadang bisa dikatakan Error. Parahnya lagi pengunjung akan mengalami kebingungan dengan blog kita.
Loading Blog menjadi lebih lama
Momok ini lah yang kadang menjadi menakutkan karena pada dasarnya kita menginginkan blog kita selain sedap dipandang mata juga memiliki loading yang singkat (syukur-syukur baru klik langsung buka)
Widget yang susah dibuang kadang ikut terbawa
Widget bawaan tamplate yang mungkin saja susah dibuang seperti widget ads atau yang lainnya biasa saja ikut terbawa dan membuat kita harus mengedit blog lebih lama lagi
Widget yang sudah tertanam menjadi kacau
Inilah efek umum yang sering dialami. widget di template lama sering menjadi kacau akibat susunan dari template baru yang tidak sesuai dengan susunan di template lama

Itulah konsekuensi yang harus kita tanggung ketika kita menggonta-ganti tamplate blog dan itu pun sudah pernah saya lakukan. mungkin bagi pengunjung yang baru berkunjung di blog ini meresa biasa saja.Tetapi, bagi pengunjung yang sering menemukan blog ini pasti akan sedikit mengalami kebingungan.

=====Saran======
Bagi pembaca yang ingin mengganti template bisa memperhatikan saran berikut ini :

Backup template lama
Coba dulu di blog percobaan sebelum mengganti tamplate
Pelajari terlebih dahulu template baru yang mau mengganti template lama

Sekian dari saya, terimakasih.

By : http://candrajunie.blogspot.com/2012/07/efek-gonta-ganti-template-blog.html

5 Comments

Tutorial Blogger

Cara Membuat Label Blog Menjadi Dua Kolom

EDHO-XP - Kali ini EDHO-XP akan share Cara Membuat Label Blog Menjadi Dua Kolom. Munkin kalian tau blog itu bisa di edit.Kalian sudah bosan melihat Posting Menjadi 2 Kolom.Coba kita Buat Label Blog Menjadi 2 kolom.

Mau Tau Caranya ?

Yuk Mari ...

Buka menu Template (Untuk blogger new interface/Tampilan baru blogger)
Klik tombol Edit HTML
Tekan tombol Lanjutkan
Cari kode ]]></b:skin> (Biar mudah tekan CTRL + F)
Copy kode dibawah ini dan letakkan di atas ]]></b:skin>

#Label1 ul li{
float: left;
width: 45%;
}

Simpan Template

NB : Kode Yang Berwarna Biru / 45% itu adalah besaran kolomnya yaitu 45%

Add Comment

Tutorial Blogger

Slide Out Navigation

DEMO

Cara Pemasangan:

Login ke Blogger
Klik Tata Letak
Klik "Tambah Gadget" pilih "HTML/JavaScript
Copy kode Di Bawah ini

<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -50px;
width: 100px;
height: 55px;
background-color:#141414;
background-repeat:no-repeat;
background-position:48px center;
border:1px solid #cfcfcf;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#navigation .home a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaBfhOhI/AAAAAAAAD_0/nV3ITEV9d3M/d/nav_home.png);
}
ul#navigation .about a{
background-image: url(http://lh4.ggpht.com/_xcD4JK_dIjU/S9BJaX0yaqI/AAAAAAAAD_4/GZhfUKvK588/d/nav_info.png);
}
ul#navigation .search a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJejnwlAI/AAAAAAAAEAE/B_LZd63vGeI/d/nav_search.png);
}
ul#navigation .comment a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaFyqDGI/AAAAAAAAD_w/pNO6TUSigBg/d/nav_comment.png);
}
ul#navigation .rssfeed a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJaabJhzI/AAAAAAAAEAA/Oo4mhwCwzbI/d/nav_rss.png);
}
ul#navigation .tool a{
background-image: url(http://lh3.ggpht.com/_xcD4JK_dIjU/S9BJelocqyI/AAAAAAAAEAI/6SmP-UHv-eg/d/nav_tools.png);
}
ul#navigation .contact a{
background-image: url(http://lh6.ggpht.com/_xcD4JK_dIjU/S9BJaVZkksI/AAAAAAAAD_8/g5fo6OKT5wE/d/nav_mail.png);
}
</style>

<ul id='navigation'>
<li class='home'><a href='LINKSOBAT' title='Home'></a></li>
<li class='about'><a href='LINKSOBAT' title='About'></a></li>
<li class='search'><a href='LINKSOBAT' title='Search'></a></li>
<li class='comment'><a href='LINKSOBAT' title='Comment'></a></li>
<li class='rssfeed'><a href='LINKSOBAT' title='RSS Feed'></a></li>
<li class='tool'><a href='LINKANDA' title='Tool'></a></li>
<li class='contact'><a href='LINKSOBAT' title='Contact'></a></li>
</ul>

Save Widget
Langkah selanjutnya cari kode seperti ini </head> di template Sobat
Copy kode di bawah ini dan letakkan tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-50px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-50px'},200);
}
);
});
</script>

PERHATIAN!!

Jika di template Sobat sudah pernah dipasang kode
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
sebaiknya kode tersebut tidak usah dipasang

Save Template

Sumber : http://art-preview.blogspot.com/2012/06/slide-out-navigation.html

Add Comment

Tutorial Blogger

Antarmuka Blogger Lama Masih Bisa

Gaknyangkan Antarmuka Blogger Lama Masih Bisa Dibuka Hehehhe... . Penampakannya bisa diliat di gambar tersebut dan untuk memperbesar gambar klik aja gambar nya. Caranya Cukupmudah Bro Ikuti Carahnya Dibawah Ini.

Copy URL Berikut Dan Pastekan Di Address Bar Dan Tekan Enter

http://www.blogger.com/rearrange?blogID=IDBLOGKAMU

Ganti Tulisan IDBLOGKAMU Dengan ID Blog KAMU Sendiri .

Hingga Menjadi Seperti Ini

http://www.blogger.com/rearrange?blogID=2152703832305478530

NB : Kelehaman Dari URL Tersebut adalah nggak bisa buka yang lainnya dan hanya bisa di bagian tata letak saja comba anda klik menu navigasi lain nya psaati ada tulisan dan gambar berikut ini

Link : http://www.blogger.com/no-more-old-ui.g

Antarmuka Blogger yang lama tidak digunakan lagi. Anda dapat menemukan antarmuka Blogger baru di sini. Pelajari lebih lanjut

Sayang Sekali Bro T.T

Tapi ...Semoga Bermanfaat Yah XD

Add Comment

Tutorial Blogger

Cara Membuat Related Post

Ada Yang Request Si Ｆ'ｉｋｒｉＤｈｉ'ｙａＵ'ｌｈａｑ Cara Membuat Related Post/Artikel Terkait Seperti Blogku.Contoh Nya Bisah Liat Di Bawah Backlink Atau Gambar Di Atas.Langsudang Aja Dengan Mudah Tutornya. Cekidoit ...

Login ke blogger dengan id anda
Klik Rancangan
Pada tab menu, pilih Edit HTML
Centang kotak kecil Expand Template Widget
Cari kode <p><data:post.body/></p> atau <data:post.body/> Untuk Lebih Muda tekan CTRL + F
Letakkan kode berikut di bawah kode tadi :

<b:if cond='data:blog.pageType == "item"'>
<H2>Related Post:</H2>
<div class='DHOrelatedpost'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='DHOrelpost'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('DHOrelpost').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
<small><p>Create Your Own! [ <a href='http://edho-xp.blogspot.com' target='new'>EDHO-XP</a> ]</p></small>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

Kode Yang Warna Merah Related Post Diganti Sesuai Kesukaan Mu Misal Artikel Menarik Lainnya

Jika sudah, sekarang cari kode ]]></b:skin>
Letakkan kode berikut di atas kode tadi :

/*-- Related Post/Artikel Terkait By http://edho-xp.blogspot.com/ --*/
.DHOrelatedpost{border: 1px solid #D8D8D8;padding: 5px;
background-color: #E0F8E0;-moz-border-radius:5px; margin:5px;}
.DHOrelatedpost:hover{background-color: #EFFBEF;}

Klik SIMPAN TEMPLATE
Selesai

Semoga Bermanfaat !

2 Comments

Tutorial Blogger

Mengatasi Masalah Halaman Statis Karena READMORE Otomatis

Karena banyaknya terjadi kesalahan error pada saat pemasangan readmore otomatis berfungsi dan ternyata pada halaman statis readmore yang tidak berfungsi, jadi dari pada sobat bingung-bingung memikirkannya mending saya sekalian aja langsung posting solusinya.

Berikut Solusi Mengatasi Masalah Halaman Statis Karena Readmore Otomatis :

1. Login ke account blogger dengan id dan username anda.

2. Masuk ke halaman Editor HTML blogger dan jangan lupa centangan pada tulisan Expand Template Widget

3. Cari kode yang mirip seperti kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

4. Tambahkan kode dibawah ini diatas kode berwarna merah

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

5. Tambah kode dibawah ini di bawah kode yang berwarna biru

</b:if>

6. Simpan Template

Semoga dengan Tips Mengatasi Masalah Halaman Statis Karena READMORE Otomatis bisa membantu sobat dan bermanfaat untuk kita semua.

Sumber : http://yhudiyuba.blogspot.com/2012/08/promosikan-usaha-anda-melalui-direktori.html

Add Comment

Tutorial Blogger

Cara Cepat Mendapatkan Sitelink Google

Nah,Saya Mau Share Nih Cara Cepat Mendapatkan Sitelink Google!. Apa Itu Site Link ? Nih Saya Jelaskan Sedikit Dna Cara Mendapatkan Nya

Sitelinks are links to other pages on your site that may appear under the search result for your site. Google generates these links automatically, and not all sites have sitelinks.

Berikut Cara Mendapatkannya

1. Membuat Blog Lebih SEO Friendly
Sebisa mungkin kita membuat blog kita dipandang lebih oleh google, pastilah sobat sudah tahu apa itu SEO, banyak website-website yang sudah share cara membuat blog lebih SEO Friendly. Dengan mempertajam SEO di blog kita otomatis blog kita akan semakin berkualitas dan friendly dengan search engine google tentunya.

2. Daftarkan Blog Kita ke Google Webmaster Tools (wajib hukumnya).
Ini merupakan tahap yang wajib kita perhatikan, dengan google webmaster kita akan lebih mudah mengontrol perkembangan blog kita. Banyak fasilitas/tools yang tersedia disana, Misal :
Site configuration menyakup Sitemaps, Crawler Acces, Sitelink dll.
Usahakan jangan ada duplikat konten atau duplikat lainnya, karna itu berpengaruh untuk mendapatkan taut situs/sitelink.

3. Gunakan juga Google Analytics
Dengan Google Analytics, kita akan lebih terbantu untuk memonitoring perkembangan blog kita,kita akan lebih mudah melihat naik atau turunya trafik blog kita. karana trafik blog sangat berpengaruh dalam Google memberikan Sitelink. Dan tentunya trafik blog kita selalu dipantau oleh Google Analytics, jadi ini jelas mempermudah kita dalam mendapatkan sitelink dari google.

4. Tingkatkan Trafik Blog
Banyak yang bilang Trafik (jumlah pengunjung blog) merupakan hal yang sangat berpengaruh dalam mendapatkan sitelink. Tapi.. untuk saya tidak begitu percaya :D
Buktinya blog saya juga gak rame-rame amat, tapi tetap dapet sitelink, khususnya untuk blog saya yang satunya viyanpradita.com, jadi kenapa kalian tidak :)

5. Pertahankan Keyword Konten Blog
Minimal kita punya salah satu postingan yang berdiri tegak diatas (peringkat pertama di search engine). Dengan ini google tidak memandang sebelah mata blog kita, dan pastinya akan menarik banyak pengunjung/meningkatkan trafik. Bila perlu ikutilah kontes-kontes SEO (saran)

6. Keep Posting
Nah ini jg masalah saya sendiri, sekarang jarang posting :D
Blog ini "kode blogger" dulunya sering/rajin posting, mungkin karna hal itu jadi cepat mendapat sitelink. Tujuannya yaitu untuk menjaga kualitas SEO blog kita dan tentunya Google melihat blog kita itu rajin posting, pastinya lebih disayank oleh google dunk :D

7. Sabar dan tetap Berdoa
Hehehee... banyak anggapan dan persepti pastinya. Karna tidak diketahui secara pasti bagaimana cara tercepat mendapat sitelink dari google, (tapi para master-master SEO pasti ada yg bisa). Tapi paling tidak dengan pengalamanlah kita bisa lebih tahu dan bisa.

Sumber : Haikal Maybe | DeezClan

2 Comments

Tutorial Blogger

3 Widget Animasi Twitter Follow Untuk Blog

Kali ini EDHO-XP Akan Share 3 Widget Animas i Twitter Follow Untuk Blog. Widget Ini Sangatlah Simple dan tidak perluh script tambahan. widget ini tidak membuat blog berat karena widget tersebut menggunakan sistem flash atau SWF !

Berikut Code Dan Sample Nya !

Style 1 :

Script/Code :

<object data="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" height="80" type="application/x-shockwave-flash" width="180"><param name="movie"
value="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" />
<param name="allowscriptaccess" value="always"/><param name="menu" value="false"/><param name="wmode" value="transparent"/>
<param name="flashvars" value="username=Dhoooes"/><a href="http://www.gamblinginsider.ca" title="gambling">gambling</a><embed src="http://www.buzzbuttons.com/BUTTON6/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="80" menu="false" wmode="transparent" flashvars="username=Dhoooes"></embed></object>

Style 2 :

Script/Code :

<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf" width="100" height="100"><param name="movie" value="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=Dhoooes"></param><a href="http://www.gamblinginsider.ca" title="online gambling insider.ca">online gambling insider.ca</a><embed src="http://www.buzzbuttons.com/BUTTON3/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="100" height="100" menu="false" wmode="transparent" flashvars="username= Dhoooes"></embed></object>

Style 3 :

Script/Code :

<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" width="200" height="200"><param name="movie" value="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=Dhoooes"></param><a href="http://www.dreambingo.co.uk/" title="http://www.dreambingo.co.uk/">http://www.dreambingo.co.uk/</a><embed src="http://www.buzzbuttons.com/BUTTON8/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=Dhoooes"></embed></object>

Cara memasang Widget Flash Animated Follow Me Twitter Bird:

Masuk ke dashboard > Design/Rancangan > Add/tambah gadget > Pilih HTML/Javascript.
Copy salah satu script di atas. Ganti Dhoooes dengan nama account twitter-mu.
Paste ke dalam kotak HTML/Javascript dan save. Posisikan (drag and drop) gadget ke posisi yang diinginkan lalu save lagi.
Done!

Add Comment

Tutorial Blogger

Cara Membuat Syntax Highlighter Pada Blog

Kalo dalam blogspot kita biasa menampilkan kode supaya lebih menarik dengan adanya Blockquote. Sebenarnya hampir sama dengan Blockquote, Teks area atau lainnya, Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namuan Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. Dari segi tampilan juga menurut saya lebih rapi dan menarik kaya yang di pake di blog ini nich...Ok sobat blogger gak usah panjang lebar deh basa basinya..mari kita langsung ke pokok pembahasan...eng ing eng.....

Caranya :

Login Blogger => Rancangan => Edit HTML
Download Template Lengkap=>centang pada kotak Expand Template Widget
Cari kode berikut : </head> gunakan aja [CTRL]+[F] biar cepat. . .
Setelah ketemu copy kode dibawah ini lalu pastekan diatas kode tersebut

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript">
</script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript">
</script>

Setelah bagian itu sudah lalu
Cari lagi kode berikut : </b:skin> gunakan aja [CTRL]+[F] biar cepat. . .
lalu pastekan kode dibawah ini diatasnya. .

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

Setelah itu cari lagi kode yang seperti ini dan letakkan kode dibawah ini diatas kode tersebut

<script language="javascript">

dp.SyntaxHighlighter.BloggerMode();

dp.SyntaxHighlighter.HighlightAll('code');

</script>

Save template

Untuk pemanggilan nya di edit htlm postingan gunakan kode ini:

UNTUK CODE CSS:
<pre class="css" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>

UNTUK CODE HTML:
<pre class="html" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>

UNTUK CODE JAVASCRIPT:
<pre class="java" name="code">TULIS DISINI YANG MAU LOE TARUH
</pre>

Add Comment

Tutorial Blogger

Pasang Widget HUT RI 67

Pasang Widget HUT RI 67 Yuk Untuk Meriahkan 17 Agustus 2012 Ini ! Widgetnya Tidak Berat Kok. Ini Hanya Image Gif/Animasi Dapet Dari Kaskus
Langsung Aja Yah Soalnya Udah Magrib

Demonya Bisa Di Liat Sudut Pojok Kiri Bawah Blog Saya

Posisi Sudut Pojok Kiri Atas

<script type="text/javascript" src="http://edhoo-xp.googlecode.com/files/hutri67topleft.js"></script>

Posisi Sudut Pojok Kiri Bawah

<script type="text/javascript" src="http://edhoo-xp.googlecode.com/files/hutri67bottomleft.js"></script>

Posisi Sudut Pojok Kanan Atas

<script type="text/javascript" src="http://edhoo-xp.googlecode.com/files/hutri67topright.js"></script>

Posisi Sudut Pojok Kanan Bawah

<script type="text/javascript" src="http://edhoo-xp.googlecode.com/files/hutri67bottomright.js"></script>

NB :Kalo Widgetnya Tidak Muncul/Error Mohon Komentarnya Dan Widget Ini Asli Coding By EDHO-XP

Add Comment

Tutorial Blogger

Color Full Ads Image 468 X 60

Nah, Kali Ini Saya akan share yaitu Color Full Ads Image 468 X 60. Nih Image Simple banget gak banyak warna,pernak-pernik,dan gambar campuran lain nya.Nah, Untuk Itu nih gambar Original By EDHO-XP yang PLAGIAT itu nggak bisa di andalin. Betul Gak ? Oke langsung aja yah !

1. Simple Grey Ads

Code:

<a href="http://edho-xp.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgox5RBai15L6u-eknYXj6P7p5Rg6_Bx2teemkmRPwIa8vKbrw-Wvaa42naKKorzLpExp4AD7bgKx57xtjmIuxHFT4YOspAGJ64HCw7eTU1PUjr5ECP8a3L8fzl57Dgl5S06KP0ykgVqQAI/s1600/greyads.png" /></a>

2. Simple Cyan Ads

Code:

<a href="http://edho-xp.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37T4NEEKyRGlH7mdGc-QQdrVbTavSt4zVh3bljVEoF0DIaLUI4d1XCzS-nwQ49jbOvNfJaCfcl5m8TMEjATpWq1uSbGpbLmPXCInYpCDLKe_ocnKXKF8dsSSMlzffobXi_CZXv_YL9OpD/s1600/blueads.png" /></a>

3. Simple Red Ads

Code:

<a href="http://edho-xp.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju7dqsAEuHu7qeT6SKhPWutUOSyFSJaCPsFXYpfpySBBX4-7jjEHZ5iVn21Jl7YzcVDZcKtu4WCO9wFYTznmk-bSIqvFxbdcd0Zc5meBxkoq7BMKW1c6kQwQTcuooM5-88w14sco_GbGFq/s1600/redads.png" /></a>

4. Simple Yellow Ads

Code:

<a href="http://edho-xp.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip4U2Zn2gTQ-Z_Ur6fjs_Ds8fu-vxaHDv-buG4xxmeTVDYV19BIX0jWAS2qe7KK8bxNHEVSBK9u4GEeN7D58dMAH9gVJXumZvjdbFTwxqfvM7KZiMD6q5JHKHZsBqpSGj3SqDmfdReGAk3/s1600/yellowads.png" /></a>

5. Simple Purple Ads

Code:

<a href="http://edho-xp.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOttemQ1dIDDndw1ZsFUm8u5FccbFKlFjtNSd_0BG0B3igbq_0RRUGCF_6fosoS2_Gvs1kyBNNhS_93keRbIpvd_APQ5x_Sln-prFQDAv94pZo6b6VUNPcOfBtOLFPdZnum4Xb7Gfzw10/s1600/purpleads.png" /></a>

Nah, Cuma Segitu aja yah. kalo mau request comment aja / contact . nanti saya posting yang ukuran 88 X 31 Dan 125 X 125 . Semoga Bermanfaat !

Rating 4.5

Add Comment

Tutorial Blogger

CSS3 Danboard

Hallo ketemulagi ini,Semoga Gue Harep Gak Ada Plagiat Lagi ==".Kok perginya keplagiat ya ? Emang akhir-akhir ini EDHO-XP ada yang niru Style EDHO-XP.Ya, Udah nggak usah di urus nanti mati juga dia wakakakaka :V .

Kali ini EDHO-XP akan bahas Tentang CSS3 Danboard
Preview :

CSS Danboard - EDHO-XP

▲

amazon.co.jp

▒

▧

amazon.co.jp

Gimana Keren Kan ?
Mau tau cara buat nya ?
Cekidoit !

Login Ke Blogger.com buka sebagaimana mengedit Template / HTML
kemudian klik template >> jangan lupa "Download Template Lengkap" untuk melakukan proses BACK-UP Template, untuk jaga-jaga.
setelah selesai klik Edit HTML >> lanjutkan >> centang Expand Template Widget.
Cari kode ]]</b:skin>. Gunakan Ctrl+F untuk memudahkan pencarian kode, kemudian simpan kode CSS dibawah ini tepat diatas kode ]]</b:skin> tersebut.

.Canvas {
position:relative;
width:172px;
z-index:-111;
margin:0 auto;
}
.Head {
border:1px solid #960;
border-radius:5px;
width:170px;
height:100px;
background:#BC9864;
position:relative;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
z-index:3;
display:block;
}
.eyeL {
border:0;
border-radius:100px;
width:18px;
height:18px;
background:#FC0;
position:absolute;
left:28%;
top:25px;
-webkit-box-shadow: 0px 0px 4px #FFC;
-moz-box-shadow: 0px 0px 4px #FFC;
box-shadow: 0px 0px 4px #FFC;
}
.eyeR {
border:0;
border-radius:100px;
width:18px;
height:18px;
background:#FC0;
position:absolute;
right:28%;
top:25px;
-webkit-box-shadow: 0px 0px 4px #FFC;
-moz-box-shadow: 0px 0px 4px #FFC;
box-shadow: 0px 0px 4px #FFC;
}
.eyeLtop {
border:0;
border-radius:100px;
width:16px;
height:16px;
background:#FFC;
position:absolute;
left:48px;
top:26px;
z-index:2;
}
.eyeRtop {
border:0;
border-radius:100px;
width:16px;
height:16px;
background:#FFC;
position:absolute;
right:48px;
top:26px;
z-index:2;
}
.mouth {
color:#500;
font-size:25px;
font-family:verdana;
text-align:center;
margin-top:50px;
text-shadow: 0px 0px 4px #930;
}
.logo {
color:#222;
font-size:8px;
font-family:arial;
position:absolute;
top:3px;
left:5px;
text-shadow: 0px 0px 4px #CEC292;
}
.barcode {
color:#222;
font-size:18px;
position:absolute;
bottom:3px;
left:5px;
text-shadow: 0px 0px 4px #CEC292;
}
.sign {
color:#222;
font-size:18px;
position:absolute;
bottom:2px;
right:5px;
text-shadow: 0px 0px 4px #CEC292;
}
.ears {
width:8px;
height:5px;
background:#960;
position:absolute;
left:-8px;
bottom:27px;
border-radius:20px 0 0 20px;
-webkit-box-shadow: -1px 0px 2px #630;
-moz-box-shadow: -1px 0px 2px #630;
box-shadow: -1px 0px 2px #630;
}
.neckL1 {
width:16px;
height:8px;
background:#960;
border-radius:4px 0 0 20px;
position:absolute;
left:25px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
z-index:-3;
}
.neckR1 {
width:16px;
height:8px;
background:#960;
border-radius:0 4px 20px 0;
position:absolute;
right:25px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
z-index:-3;
}
.neckL2 {
width:15px;
height:15px;
border-radius:30px;
background:#300;
position:absolute;
z-index:-4;
left:20px;
top:98px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.neckR2 {
width:15px;
height:15px;
border-radius:30px;
background:#300;
position:absolute;
z-index:-4;
right:20px;
top:98px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.bodyMain {
width:90px;
height:100px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-2;
left:40px;
top:101px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.bodyLogo {
color:#222;
font-size:8px;
font-family:arial;
border:0px solid red;
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
text-indent:5px;
margin-left:33px;
text-shadow: 0px 0px 4px #CEC292;
}
.circle {
width:10px;
height:10px;
border-radius:30px;
background:#ddd;
position:absolute;
right:8px;
top:6px;
border: 1px solid #930;
-webkit-box-shadow: 0px 0px 2px #630;
-moz-box-shadow: 0px 0px 2px #630;
box-shadow: 0px 0px 2px #630;
}
.strikeLine {
width:8px;
height:2px;
background:#333;
margin-top:4px;
margin-left:1px;
position:absolute;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.armLeft {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
width:24px;
height:80px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:2;
top:111px;
left:6px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.armRight {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
width:24px;
height:80px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:2;
top:111px;
right:6px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.skirtLeft {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
width:3px;
height:30px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-2;
top:200px;
left:32px;
border-radius:100px 0 0 0;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.skirtRight {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
width:3px;
height:30px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-2;
top:200px;
right:32px;
border-radius:0 100px 0 0;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.skirtCenter {
width:90px;
height:30px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-2;
top:201px;
left:40px;
-webkit-box-shadow: 0px 3px 5px #630;
-moz-box-shadow: 0px 3px 5px #630;
box-shadow: 0px 3px 5px #630;
}
.legLeft {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg);
width:24px;
height:50px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-3;
top:231px;
left:50px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.legRight {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
transform: rotate(-3deg);
width:24px;
height:50px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-3;
top:231px;
right:50px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.title {
font-family:Times;
font-size:28px;
font-style:italic;
color:#630;
margin:20px auto;
text-align:center;
text-shadow: 0px 0px 4px #FFF;
}
.title span {
font-size:18px;
}

Setelah Disimpan Buka Rancangan > Tata Letak > Tambah Gadget > HTML/JavaScript > Masukan Kode Dibawah Ini Kemudian Simpan.

<div class="title">CSS Danboard</div>
<div class="Canvas">
<div class="Head">
<div class="eyeL"></div>
<div class="eyeR"></div>
<div class="eyeLtop"></div>
<div class="eyeRtop"></div>
<div class="mouth">▲</div>
<div class="logo"><strong>amazon</strong>.co.jp</div>
<div class="barcode">▒</div>
<div class="sign">▧</div>
<div class="ears"></div>
</div>
<div class="neckL1"></div>
<div class="neckR1"></div>
<div class="neckL2"></div>
<div class="neckR2"></div>
<div class="bodyMain">
<div class="bodyLogo"><strong>amazon</strong>.co.jp</div>
<div class="circle"><div class="strikeLine"></div></div>
</div>
<div class="armLeft"></div>
<div class="armRight"></div>
<div class="skirtLeft"></div>
<div class="skirtRight"></div>
<div class="skirtCenter"></div>
<div class="legLeft"></div>
<div class="legRight"></div>
</div>