Kode Warna

Selasa, 02 Februari 2016

Berikut adalah Daftar Warna Web yang mungkin dikenal sebagai hexadecimal colour chart. Grafik di bawah ini terdiri dari 216 warna heksadesimal yang terinterpretasi dengan baik oleh semua browser dan kompatibel dalam segala hal. Anda dapat menggunakan kode warna / value heksadesimal untuk mengedit Blogspot Anda, Wordpress, atau template web. Jika Anda ingin mendapatkan colour chart atau tabel ini dan menanamkannya di website atau weblog Anda. Anda hanya perlu berlangganan blog ini dengan mengisi form Berlangganan pada sidebar kemudian beri tahu kami melalui kotak komentar.

#FFFFFF	#FFFFCC	#FFFF99	#FFFF66	#FFFF33	#FFFF00
#FFCCFF	#FFCCCC	#FFCC99	#FFCC66	#FFCC33	#FFCC00
#FF99FF	#FF99CC	#FF9999	#FF9966	#FF9933	#FF9900
#FF66FF	#FF66CC	#FF6699	#FF6666	#FF6633	#FF6600
#FF33FF	#FF33CC	#FF3399	#FF3366	#FF3333	#FF3300
#FF00FF	#FF00CC	#FF0099	#FF0066	#FF0033	#FF0000

#CCFFFF	#CCFFCC	#CCFF99	#CCFF66	#CCFF33	#CCFF00
#CCCCFF	#CCCCCC	#CCCC99	#CCCC66	#CCCC33	#CCCC00
#CC99FF	#CC99CC	#CC9999	#CC9966	#CC9933	#CC9900
#CC66FF	#CC66CC	#CC6699	#CC6666	#CC6633	#CC6600
#CC33FF	#CC33CC	#CC3399	#CC3366	#CC3333	#CC3300
#CC00FF	#CC00CC	#CC0099	#CC0066	#CC0033	#CC0000

#99FFFF	#99FFCC	#99FF99	#99FF66	#99FF33	#99FF00
#99CCFF	#99CCCC	#99CC99	#99CC66	#99CC33	#99CC00
#9999FF	#9999CC	#999999	#999966	#999933	#999900
#9966FF	#9966CC	#996699	#996666	#999933	#999900
#9933FF	#9933CC	#993399	#993366	#993333	#993300
#9900FF	#9900CC	#990099	#990066	#990033	#990000

#66FFFF	#66FFCC	#66FF99	#66FF66	#66FF33	#66FF00
#66CCFF	#66CCCC	#66CC99	#66CC66	#66CC33	#66CC00
#6699FF	#6699CC	#669999	#669966	#669933	#669900
#6666FF	#6666CC	#666699	#666666	#666633	#666600
#6633FF	#6633CC	#663399	#663366	#663333	#663300
#6600FF	#6600CC	#660099	#660066	#660033	#660000

#33FFFF	#33FFCC	#33FF99	#33FF66	#33FF33	#33FF00
#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00
#3399FF	#3399CC	#339999	#339966	#339933	#339900
#3366FF	#3366CC	#336699	#336666	#336633	#336600
#3333FF	#3333CC	#333399	#333366	#333333	#333300
#3300FF	#3300CC	#330099	#330066	#330033	#330000

#00FFFF	#00FFCC	#00FF99	#00FF66	#00FF33	#00FF00
#00CCFF	#00CCCC	#00CC99	#00CC66	#00CC33	#00CC00
#0099FF	#0099CC	#009999	#009966	#009933	#009900
#0066FF	#0066CC	#006699	#006666	#006633	#006600
#0033FF	#0033CC	#003399	#003366	#003333	#003300
#0000FF	#0000CC	#000099	#000066	#000033	#000000

Kami mohon untuk melampirkan link-back ke blog ini jika Anda ingin menampilkan colou

Cara Buat Menu Vertikal Keren di Blog

Kamis, 03 Oktober 2013

Cara Buat Menu Vertikal Keren di Blog Sobat blogger pasti sudah tahu apa yang saya maksud. Pada tutorial kali ini Saya Akan berbagi tentang cara membuat menu navigasi vertikal. Kenapa saya bilang keren?? Jawabanya adalah karena saat cusor mouse diarahkan ke menu akan berubah warna secara perlahan-lahan, di bawah ini adalah screenshotnya:

Oke Sob Berikut caranya:
Untuk membuatnya silahkan ikuti langkah-langkahnya :

1. Login ke akun Blogger sobat

2. Sekarang Klik Template

3. Klik EDIT HTML

4. Sekarang Cari Kode ]]></b:skin> agar mudah dalam pencarian tekan Ctrl+f

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

/* Menu vertikal
-----------------------------------------------
*/
.side-nav {
margin-left:0;
display: block;
}
.side-nav a {
display: block;
margin: 0 0 4px;
padding: 6px 20px 9px;
color: #fff;
font-size: 18px;
-webkit-transition: color, background-color 0.3s linear;
-moz-transition: color, background-color 0.3s linear;
-o-transition: color, background-color 0.3s linear;
transition: color, background-color 0.3s linear;
}
.side-nav a:hover {
background-color: #222;
text-decoration:none;
}
.side-nav a:hover {
color: #fff;
}
/* Warna Menu
-----------------------------------------------
*/
.pale1 { background-color: #01a279}
.pale2 { background-color: #789CB6; }
.pale3 { background-color: #48CF89; }
.pale4 { background-color: #FAB36B; }
.pale5 { background-color: #48CFB6; }
.pale6 { background-color: #F47B55; }
.pale7 { background-color: #5E839D; }
.pale8 { background-color: #3F6682; }

Catatan:
Anda Boleh Ganti tulisan Berwarna Merah dengan yang anda inginkan(fungsinya untuk Warna Background Menu)

7. Sekarang kita menuju ke layout

8. Klik Tambahkan Gadget dan pilih 'HTML/Javascript

9. Letakan script html di bawah ini di kolom yang disediakan. (Ingat, untuk kolom judul gadget tidak perlu diisi)

<div class='clear'/>
<div class='widget-content'>
<div class='side-nav'>
  <a class='pale3' href='#'>Menu 1</a>
  <a class='pale4' href='#'>Menu 2</a>
  <a class='pale1' href='#'>Menu 3</a>
  <a class='pale2' href='#'>Menu 4</a>
  <a class='pale5' href='#'>Menu 5</a>
  <a class='pale6' href='#'>Menu 6</a>
</div></div></div>

10. Klik Simpan

catatan:
ganti tanda # dengan alamat URL
ganti tulisan menu 1-6 dengan nama menu yang anda inginkan,
oke mungkin cukup sekian, Semoga Bermanfaat..!

Cara Membuat Widget Footer Di Blog

Cara Membuat Widget Footer Di Blog-mungkin dari anda ada yang tau footer dan juga ada yang tidak mengetahuinya jika anda bingung ini adalah contoh gambarnya:

Footer terletak di bawah, di bawah postingan tentunya gunanya adalah untuk meletakan widget histats maupun widget alexa dan bisa juga di gunakan untuk meletakan widget yang lain, oke langsung aja caranya

Login ke blog sobat
Pilih Template
Klik Edit HTML
Silahkan copy code di bawah ini , kemudian langsung diletakkan di atas ]]></b:skin>

#footer-coloumn-baru {clear:both;}

.footer-column {padding:10px};

Kemudian sobat blogger cari code seperti di bawah ini ( gunakan Ctrl+F atau F3 untuk mempermudah mencari )

Memang setiap template tidaklah sama, tapi sobat bisa berpatokan dari kata outer ataupun footer tersebut

Setelah ketemu sobat letakkan script di bawah ini tepat di bawah  tersebut.(menambahkan 3 column baru)

Klik Simpan Template

Perhatian:

Jika anda tidak menemukan code  carilah code yang mirip kata kuncinya adalah end

Oke cukup sekian, Semoga Bermanfaat..

Cara Membuat Teks Berjalan Di Menu Bar Edisi Terbaru

Rabu, 04 September 2013

Cara Membuat Teks Berjalan Di Menu Bar, yang di maksud dengan menu bar itu sendiri adalah bagian paling atas dari sebuah browser. Teks berjalan di blog mungkin sudah tidak asing lagi buat teman2 blogger karena kebanyakan para blogger menggunakannya pada website/blog. Tips kali saya akan berbagi kepada teman-teman pemula seperti saya cara memsang Teks Berjalan Pada menu bar agar terlihat lebih keren. Teks berjalan di atas menu bar ini biasanya menampilkan sebuah teks yang bertuliskan ucapan selamat datang atau teks pendek yang menjelaskan tentang content blog kita secara umum.

Setelah membaca dan melihat screenshotnya di atas pasti anda tertarik dengan memasangnya di web/blog anda bukan? Cara memasangnya cukup mudah, anda hanya meletakkan code yang saya akan berikan di tutorial nantinya ke dalam template anda. Bagi anda yang ingin mencobanya perhatikan cara memasangnya di bawah ini

1. Masuk ke blog anda
2. Pilih Template--EDIT HTML
3. Kemudian centang Expand Templates Widget
4. Selanjutnya cari code </head> dan letakkan code di bawah ini, tepat di atas code </head>

<script type='text/javascript'>
//<![CDATA[
msg = " -- Selamat datang di Blog Sederhana Kami ";
msg = " | http://grafisnet.blogspot.co.id -- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",170);
}
scrollMSG();
//]]>
</script>

Keterangan :
Silahkan ganti code tebal yang berwarna merah sesuai dengan teks yang akan anda tampilkan pada menu bar sedangkan code yang berwarna biru adalah kecepatan teks semakin kecil nilainya maka semakin cepat kecepatan teksnya pula.

Demikian cara membuat teks berjalan di menu ba

Cara Membuat Kotak Berlangganan Artikel di Blog

Sabtu, 18 Mei 2013

Dengan adanya berlangganan artikel ini pengunjung akan lebih mudah mendapat informasi dari blog kita langsung ke email pengunjung, sehingga pngunjung tidak bosan dengan blog kita. tentu masih banyak lagi manfaat dari berlangganan artikel ini.
bagaimana sih caranya membuat kotak berlangganan???

1. masuk ke akun blog anda
2. pilih Layout (tata letak)
3. klik "ad a gadget (tambah gadget) " >> pilih HTML/javascript

<style>
.mbt-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6aWGNi0X3fWAVStk6E-JyEz64fQlL-_GJnf3-y4B-BzR0tL9b64vSjzIiqaGWR7FofCaHhrlyu24_2x-uRWYnFS_fX1kobe5lxRD6NqAJ5_h_ycsDzGrBx7JemXEKRg9BsBAeg-_x-IKk/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}

.mbt-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.mbt-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}

</style>

<div class="mbt-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailveri" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/KamuSegalanya?uri=TntByStc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="program" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="mbt-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Klik Simpan Sebagai tambahan dalam membuat widget FeedBurner Subscription, ada beberapa hal yang harus sobat blogger ganti:

Ganti http://feedburner.google.com/fb/a/KamuSegalanya=TntByStc dengan Email Feed link sobat

Ganti program dengan Nama feed blog sobat. Untuk Mengetahui feed link dan nama feed blog sobat, sobat blogger harus login dulu di akun Google FeedBurner sobat.

semoga berhasil dan bermanfa'at

Cara Membuat Tombol Copy All Di Posting

Jumat, 17 Mei 2013

Cara membuat scroll , kali ini Saya akan membuat tombol Copy all. Tombol ini sering dipakai untuk memudahkan pengujung untuk mendrag sebuah kode html/javascript secara langsung tanpa perlu mendrag kode tersebut.

Dan ini adalah contoh tombol copy all tersebut :

Untuk caranya ikuti tutorial dibawah ini :

Log in ke Blogger Kamu
Buat sebuah entri baru Pilih mode html,
Lalu masukan kode dibawah ini :

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Copy all" type="button"> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20">Masukan teks atau kode html/javascript disini</textarea></p></form></div>

Keterangan :

Teks berwarna biru dapat Kamu ganti sesuai keinginan Kamu
Teks berwarna hijau adalah tinggi widget
Teks berwarna ungu adalah lebar widget
Teks berwarna merah adalah kode atau teks yang ingin dimasukan, Kamu hanya dapat mengganti kode tersebut di mode html

Mudahkan, Selamat Mencoba,,,

Menambahkan Wigged di Dawah Posting

Kamis, 09 Mei 2013

Teman-teman semua pasti ingin memasang iklan atau kode javascript lainnya dibawah postingan. Karena kalau dipasang di sidebar terlalu ramai maka dibawah ini saya akan memberikan cara-cara bagaimana menambah elemen di bawah postingan untuk pasang iklan atau lainnya. untuk membuatnya anda sedikit menambahkan kode CSS ke dalam tamplate. ikuti langkah-langkah di bawah ini.

Seperti biasa Log in dulu ke blogger temen.
Tata letak
Edit HTML
Download tamplate anda terlebih dahulu untuk menghindarkan hal-hal yang tidak diinginkan.
Kemudian cari kode
#main-wrapper {
width: 410px;
float:$startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Tambahkan kode berikut di bawah kode tadi
#mainbottom {
background:#ffffff;
border:1px solid #0B610B;
margin:0 0 0.5em;
padding:0.5em;
}
Sekarang kita membuat id untuk mainbottom tersebut. Cari kode ini:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
Sisipkan kode berikut di bawah </b:section>
<b:section class='main' id='mainbottom' showaddelement='yes'/>
Sehingga menjadi seperti ini
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
<b:section class='main' id='mainbottom' showaddelement='yes'/>
</div>
Sekarang simpan tamplate anda dan lihat hasilnya

Selamat mencoba.......

Cara Buat Artikel Terkait Di Bawah Posting

Selasa, 07 Mei 2013

Artikel terkait memungkinkan pengunjung untuk membaca tulisan atau artikel kita yang lainnya dan tentunya yang masih berhubungan dengan berita yang mereka baca sebelumnya,untuk saat ini saya akan memberikan cara membuat artikel terkait standar di bawah postingan,kenapa di sebut standar?karena masih ada cara-cara lain untuk membuat artikel terkait dengan model dan bentuk yang lebih menarik lagi.Untuk cara membuatnya silahkan ikuti saja langkah-langkah yang sudah saya tuliskan di bawah ini:

Pertama Kita masuk ke Menu Themplete yang ada di blogger ( backup dulu sebelum edit )
Kedua Kita Pilih Edit HTML >>Lanjutkan >>.
Ketiga Cari Kode Ini <data:post.body/> Biar lebih mudah tekan CTRL + F
Keempat Tambahkan Kode Berikut Tepat di bawah Kode ini <data:post.body/>

<b:if cond='data:blog.pageType == "item"'><div style='margin-top: 10px;'><strong>Artikel Terkait</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; 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('ardi33').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> </div> <script type='text/javascript'>RelPost();</script><div class='ycdr' style='font-family: arial, sans-serif; font-size: 9px;'><a href='http://www.reyhan82.com/2013/05/cara-buat-artikel-terkait-di-bawah.html' target='_blank' title='Cara Membuat Releated Post keren'>Cara Membuat Artikel Terkait standar</a> <a href='http://reyhan82.com/' target='_blank'>Kamu Segalanya</a></div></div> </div> </b:if>

Tapi ingat Kode <data:post.body/> ini tidak cuma satu Jadi kalo kode pertama tidak jadi..
Silahkan Tempatkan di kode berikutnya... dan seterusnya ...

Biasanya berhasil jika di pasang pada kode <data:post.body/> yang kedua atau ketiga.
SEMOGA cara membuat artikel terkait standar di bawah postingan blog ini bisa bermanfaat buat blogger yang lainnya,memang penampilannya sangat standar sekali,tapi mengingat selera orang berbeda-beda,maka meskipun standar pasti ada saja yang suka dengan artikel terkait seperti ini,termasuk artikel terkait yang sobat lihat pada blog saya ini.Mungkin itu saja dari saya,semoga bermanfaat.

Membuat Related Post Thumbnail dengan Widget LinkWithin

Senin, 06 Mei 2013

Apa itu Related Post Thumbnails? Yaitu salah satu model daftar tulisan (posting) yang berhubungan di bawah posting. Secara umum ada 2 model related post. Model pertama hanya menampilkan judul posting saja. Contohnya seperti di sebelah kiri sidebar Blog ini. Dan cara kedua menggunakan Widget LinkWithin

Disadur dari Link sumber. http://www.linkwithin.com. Adalah sebuah situs penyedia widget Blog yang diutamakan untuk mendapatkan Fitur Artikel yang saling terhubung (Related Post). Terutama yang menginginkan Posting yang berkesinambungan, dan sinkron dalam 1 link Halaman yang ditautkan ke link Halaman yang lainnya.

Cara ini lebih disukai oleh banyak blogger karena lebih bergaya dikarenakan lebih aktraktif disertai judul dan Gambar. Kekurangannya hanya bisa menampilkan paling banyak 5 related post, itupun juga harus disesuaikan dengan lebar halaman posting blog anda. Jika lebar halaman blog anda kecil bisa jadi hanya bisa memuat 3 atau 4 related post thumbnail. Jadi kesimpulannya? terserah pada anda saja

Nah, jika anda tertarik untuk menggunakan related post thumbnails ini, anda bisa ikuti langkah-langkah berikut:

Bukalah situs LinkWithin.com.
Kemudian isilah data-data yang diminta. Jangan lupa sesuaikan jenis Platformnya. Jika blog anda menggunakan blogspot, pilihlah blogger. Lalu tentukan berapa related post thumbnail yang ingin anda tampilkan pada kotak Width. Jika sudah klik tombol Get Widget.

Setelah anda dialihkan ke Tab baru pada Menu Add Page Element, Barulah pindahkan Widget tersebut di bawah Posting.

Membuat Related Post Thumbnail dengan LinkWithin

Bila ingin tidak ingin menampilkannya/tersembunyi (Visabilitas:hidden) di Halaman Utama bagi yang menggunakan Fitur auto Readmore bisa mengikuti langkah dibawah ini :

Klik Design>>Menu edit HTML dan centang Pada Expand Template Widget. Cari kode 'LinkWithin' Pada Pencarian, yang sebelumnya dengan menekan tombol; F3. kode akan terseleksi dengan warna Hijau.

Kurang lebihnya seperti dibawah inilah Source kode yang saya ambil menggunakan Blog ini:

<b:widget id='HTML6' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'><data:content/></b:includable>
</b:widget>

Sisipkan kode yang berwana merah seperti dibawah ini

<b:widget id='HTML6' locked='false' title='LinkWithin' type='HTML'>

<b:includable id='main'><b:if cond='data:blog.pageType == "item"'><data:content/></b:if></b:includable>

</b:widget>

Catatan: Kode HTML6 ini jangan dijadikan patokan pencarian, sebaiknya abaikan saja karena setiap elemen pasti berbeda-beda, cukup cari title saja.
Kode berwarna Merah tersebut berguna untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post

Cara membuat label berputar dengan WIDGET

1.Masuk ke blog anda terus pilih TATA LETAK
2.klik TAMBAH WIDGET kemudian pilih JAVA SCRIPT
3.copy dan pastekan kode di bawah ini

<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.way2blogging.org/">Way2Blogging</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
    blogurl        : "http://reyhan8.com",
    color          : "000000",
    hoverColor     : "333333",
    backgroundColor: "FFFFFF",
    size           : 14,
    speed          : 100,
    width          : 250,
    height         : 250,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-new-flash-label-cloud.js"></script>

Ganti tulisan warna MERAH dg alamat blog anda

Cara Membuat Fans Page Facebook Auto Hide

Sabtu, 20 April 2013

Apa kabar sobat? pastinya kalian semua baik-baik saja.Pada kesempatan ini saya akan posting tentang Cara Membuat fans page Facebook Auto Hide ( muncul tanpa di klik ). Pastinya sobat akan pasang widget ini pada blog ada agar telihat keren dan rapi.hehe

DEMO
Kepengen pasang widgetnya? langsung saja ikuti langkah-langkah sebagai berikut :

Langkah 1

log in ke akun Blog sobat.
Klik Rancangan --> Edit HTML --> Cari kode </head> ( gunakan Ctrl + F )
Letakkan kode berikut di atasnya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Klik Save.

Langkah 2

Klik Elemen Laman
Klik Tambah Gadget
Pilih HTML/Javascript
Kemudian copy-paste script yang dibawah ini

<script type="text/javascript">
//
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Kamu-Adalah-Segalanya/453291741392990&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://eskun.blogspot.com/2013/02/cara-membuat-fan-page-facebook-auto-hide.html" target="_blank">Tutorial Here</a></span></div></div>

Ganti warna merah dengan URL fans pages sobat.

Klik save dan lihat hasilnya apa yang terjadi!! :D

Memasang widget Alexa Rank Di Blog

Kamis, 18 April 2013

Pada posting kali ini akan menjelaskan apa yang dimaksud alexa rank dan pagerank. Yaitu suatu sistem perangkingan situs, website atau blog. Nah pada kesempatan ini saya akan membuat tutorial cara memasang widget alexa dan pagerank google di di blog kita.

Seorang blogger memasang gadget rangking diblognya ada beberapa tujuan, ada yang sekedar iseng, ada yang ingin pamer, ada juga demi tujuan bisnis. Misalnya ada seseorang yang ingin memasang iklan bisa jadi orang tersebut tertarik memasang iklan karena pagerank atau alexa rank yang bagus. Jika kita ingin mengikuti program PPC pun terkadang mereka melihat dari pagerank atau alexa rank blog kita. Yaa semua sih tergantung niat lagi. Apapun tujuannya semua terserah mereka. hehehe

A. Memasang alexa di blog.

Sebelum kita lebih jauh melangkah, ada beberapa tahapan dalam cara ini; a) membuat akun di alexa, b) mendaftarkan blog dan mengklaim blog di alexa.com, c) mengambil kode javascript widget alexa untuk dipasang di blog.

1. Membuat akun / mendaftar di Alexa.

Bisa dengan 2 cara lewat akun facebook atau via email.
Silakan masuk ke alexa.com

cara pasang widget alexa rank di blogger

Klik Create an account, di sini agar lebih mudah kita membuat akun atau login via facebook, > klik login with facebook

Akan muncul pop up / jendela / window baru > Masuk menggunakan akun facebook. akun Selesai dibuat.

2. Mendaftarkan situs / add site ke alexa.com dan klaim blog

Klik link / Masuk ke Site Tools >> Klik Edit Your Listung (link terletak di bawah)

Gambar 2. SITE TOOLS

Masukkan URL alamat lengkap blog kita, contoh disini saya masukkan http://grafisnet.blogspot.co.id lalu klik Edit site listing

Akan muncul perintah klaim blog dulu

Pilih option2 :Add your Alexa verification ID to the home page of blablabla.blogspot.com.

kode klaim meta tag alexa di template blog

Silakan copy kode yang saya kurungi pada gambar di atas pilih nomor 1 atau 2 sama saja.

sebagai contoh saya copy yang nomor 2 kodenya adalah sebagai berikut;

<meta name="alexaVerifyID" content="AcTMdvmd2aGJ3BhWxqn7Ipo_5qY" />

Kemudian masuk ke akun blogger > Dasbor > Template > Edit HTML > Lanjutkan > Centang expland template widget.

cari kode <head> lalu masukkan kode tadi dibawahnya sehingga ;

<head>
<meta name="alexaVerifyID" content="AcTMdvmd2aGJ3BhWxqn7Ipo_5qY" />

atau bisa juga masukkan tepat di atasnya kode <b:skin><![CDATA[/*

Lalu Simpan Template

Kembali ke Alexa tadi Klik Verify My ID, tunggu sebentar, jika sobat tadi sudah menyimpan meta tag klaim blog di alexa, maka akan muncul your site is succesfully claimed.

verifikasi kode meta tag dan content alexa rank

Klik continue (di pojok kanan bawah)

Saatnya memasukkan nama blog, deskripsi blog, Pilih negara (bagian kanan) Boleh juga masukkan nama pemilik blog, alamat dll. Jika selesai Klik Save and Continue Skip

akan muncul

Congratulations! You have claimed http://blogkamu.blogspot.com/

3. Mengcopy kode widget alexa untuk blog

Kembali ke Site Tools (lihat gambar 2 diatas)

Klik alexa site widgets

Masukkan kembali URL blog kita, Kemudian Klik Build Widget

copy kode yang ada, silahkan pilih tampilan preview di samping, sebaiknya yang ukuran kecil saja

Masuk Kembali ke akun blogger

Dasbor > Tata Letak > Tambahkan gadget> HTML/Javascript > paste kode yang diberikan tadi > Simpan.

Selesai dan widget alexa rank sudah terpasang di blog sobat.

B. Memasang gadget pagerank Google di blog

Sebetulnya banyak situs penyedia widget pagerank namun sebagai contoh di sini saya akan membuat widget di prchecker.info karena menurut saya proses nya cukup mudah. Oh ya sebelum mengambil kodenya bisa juga sobat cek dulu pagerank google sobat. Caranya masukkan url lalu klik Check PR.

Silakan masuk ke www.prchecker.info

Klik salah satu gambar tampilan pagerank yang diinginkan

Kemudian masukkan Anti bot code di samping kiri > Klik Generate Now.

kode gadget dan widget pagerank google untuk blog

Setelah sobat mencopy kode tadi:
Masuk ke akun blogger > Tata Letak > Tambahkan Gadget > HTML/javascript > pastekan code yang di dapat > Simpan > simpan setelan.

Cara Buat Burung Twitter Terbang di Blog

Minggu, 31 Maret 2013

Udah tiga hari nich saya enggak nengok blog

Tapi pada hari yang baik ini saya akan posting bagaiman membuat burung terbang twitter di blog.

Jejaring sosial ini sangat tepat untuk promosi blog jika follower kita banyak maka tifdak menutup kemungkinan blog kita banyak di kunjungi

dengan widget ini kita bisa membuat follower di twitter kita bisa bertambah dengan cepat

Lalu bagaiman membuatnya, oke saya akan tunjukan caranya simak baik-baik

1. Pertama yang mesti dilakukan adalah masuk akun blogger kalian masing-masing, iya lah masak masuk akun saya heheheheh

2. Pilih Rancangan >> klik Tambah Gadget >> HTML/javascript

3. copy script dibawah ini

!– floating twitter Bird –>
<script type=”text/javascript” src=”http://bloggerpeer.googlecode.com/files/tripleflap.js”></script>
<script type=”text/javascript”>
var birdSprite=”http://warna burung.png“;
var targetElems=new Array(“img”,”hr”,”table”,”td”,”div”,”input”,”textarea”,”button”,”select”,”ul”,”ol”,”li”,”h1″,”h2″,”h3″,”h4″,”p”,”code”,”object”,”a”,”b”,”strong”,”span”);
var twitterAccount = “http://twitter.com/kamu_segalanya“;
var tweetThisText = “Twitter – UserID http:.reyhan82.com/“;
tripleflapInit();
</script>

Keterangan:
Ganti tulisan yang berwarna biru
http://twitter.com/kamu_segalanya ganti denga username kalian
http:reyhan82.com/ ganti dengan blog sobat masing-masing
dan ganti tulisan warna burung.png dengan warna yang kalian inginkan

Warna Kuning
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1njE-4UUvU1wwW19hdYnM4MUeVGkSoSqPd4IwGpd2lDlWRBg41zt3owcJIa8CMgw6jec8jOgiQmqNASo2O1wrnkJUI_00qsDhKZBTu6QoJS3AnhCZkCJCjskU7wDZi3Za69DrYpYXdkA/s1600/yellow+bird.png
Warna Hitam
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpQHIJK1mBXmtSGm5JExoecLrHyoLxZu3jYZpVGb6qwkS6-1DNBOKj8mLe1x1ryDYzOFqvivSKx03VzNDh_lWUQNdP_hX0kowoQTNgLfLervxlSvSh1kROVaWw7gBvIRAkMndKQTESkOM/s1600/black+bird.png
Warna Biru
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit71L_5tYUxiGpqDGw3j6gLnQRo1XPsm-Ez_z12bUopGSxz2rLM7uxCNhsv2K31FX6f9SlMfnI2cMmTsVrRP74nsFxFGkYM_GL62EC1OVp174e-0OFqD5Z97MxMJgEQIEU5xVM4cGayS4/s1600/Blue+bird.png
Warna Coklat
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUtgtFslC6cw7uuNDzM1W6gPp7bMA-mbebxZagVHdbgpKf_ROnN0NI2QYKqG8Cz_Q__duhbkQO0I_Z_wiIfwUk9vHTQMC-_iGmJrNnArutkGPnwHRzxFiCLImDT1VzuWUpvbgFhOrjaA/s1600/brown+bird.png
Warna Hijau
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIzJvF-gf1UKebk4khgtjcRHTVz188DmlQj4cgVR66Nc5Xln7-f01VCf2YczQwDpoKyA55lJip_XyICXhGQHLaefXsY-jWxKjCgZ-SY3zv5aAR0lTGdLcR9vnfvZuHzkyTWtXhfw730hA/s1600/Green+bird.png
Warna Ungu
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivngYe6cC0O7SmBV49JmvV13Wkc4kx3eYMjHNqLIM7WNZ39rGkaJFQ5I9vC-vxbHs8sb9IfhiVeRf3VdDWUtuJO1rR-vI2tOmOnNuRCPwUUz2f6Gc2kfa6MF9zl8uGaQEyNSUIWSDpjL4/s1600/purple+bird.png
Warna Putih
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNLEavuOsPwknM47upigNHKi1lX3VSocwpBuuB2kM2t9eIW5DeN2Pb4Re_B12NxS1DZ-5GsxmU-i7MfMK7J7NUt7CS0Zn8co88OroqyE2RV0etsD7ebiSf5MT5v043pkY2x-LQzKfIrkM/s1600/white+bird.png
Warna Merah
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz0Ot8fXfLaHAyG9fFHchQZppD_7QcHvarrpCpxs7RdAi0lXfbS_dBbGp8TpOFSgj07guW14MYmM3HoVxiEAEjSu28qjmu83XLRaOdI8eLM8s3_Ls8fPyxXaE6Jyr73qqUJwEwfhEWCqc/s1600/red+bird.png

4. Lalu paste dan SIMPAN

Cara Membuat Menu Bar Rangkap 2 Di Blog

Rabu, 27 Maret 2013

Tutorial | Cara Membuat Menu Bar Rangkap 2 Di Blog | Menubar merupakan sarana navigasi pada blog/web, yang berisi daftar tautan/link, Menubar sendiri biasanya berada di bawah header atau diatas header pada posisi horizontal atau mendatar, dalam variasinya menubar bisa di kostum sedemikian rupa, ada dalam satu web menubarnya terdapat lebih dari satu, kadang itu berada diatas header dan dibawah header, dan terkadang dirangkap dua dan diletakan dibawah header, termasuk blog ini sendiri menggunakan menubar rangkap dua. sebagai contoh menubar rangkap seperti gambar dibawah ini.

Preview :

Sebelum melakukan Pengeditan, alangkah baiknya backup terlebih dahulu template lama anda.

Log in ke akun blogger dengan menggunakan akun anda.
Pilih menu Template, Klik tombol Edit HTML.
Centang Expand Template Widget,
Cari kode ]]></b:skin>, gunakan CTRL + F untuk mempercepat pencarian, kemudian pastekan kode dibawah ini tepat diatas kode ]]></b:skin> tadi

#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXfEWHQMMn5XULeoUYqdhU2l6341VNcd-WXEtW1sa4L0F422ZEIWT-jl43WIbInniY4g9U8FatHHssHiyz5io5YoZpE-yz71_sRi8KN2BC-i0j9sB4fNACAzIas2KWYs8WsnMkwDCzKtc/s1600/menuwrap.png) repeat-x top;border-top:5px solid #26231c;border-bottom:5px solid #26231c;width:100%;margin:0 auto;padding:0 auto;height:37px}
#menuwrapper{width:980px;height:37px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:none;color:#ddd;padding:11px 12px 11px;border-right:1px solid #6c6250;border-left:1px solid #373123}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0JGGVhQf219BXC8ENSI4z89jpKTKACw9A0b3qRuw9f8UI_4djodmtPtJyAwUUM8ieNEOVK65OflnWK9LwTY0AlV67iJqxWadscK8GLtuae-kkBWug-SRR1tG7Mi-4xZP9Wcl62YVmhh4/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:11px 24px 11px 12px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#26231c;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#26231c;color:#fff}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #433e31;border-top:1px solid #11100d;display:block;font-size:1px;height:0;line-height:0;}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#nav-wrapper{background:#ebe8e1;height:30px;font-family:Arial;overflow:hidden;width:100%}
#nav{margin:0 auto;width:980px;height:30px;padding:0auto}
#nav ul{float:left;width:auto;height:30px;margin:0;padding:0;list-style-type:none}
#nav ul li{float:left;height:30px}
#nav ul li a,#nav ul li a:visited{float:left;height:30px;padding:7px 10px;color:#000;font:bold 12px Arial;text-transform:none}
#nav ul li a:hover,#nav .selected{color:#626262;text-decoration:none;}
#search{float:right;width:180px;height:20px;margin-top:3px;margin-right:5px}
#search form{float:left}
#search input[type="text"]{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQFcRuChbdJXKoYW5H_Shj7bhoPEJaNtowX8QTxnWtj2sWE36kdObYJCLdgrgJ2hT4LUrMRBHoYCmlxixhMJNI50BqXTWkYX8h7jW0TlXGiO1dGejMbURVyKuLvUZHcTLUEYMogZ3c30/s1600/search_button.png) no-repeat scroll 4px center;float:left;border:1px solid #999;width:146px;margin-top:1px;padding:3px 15px;font-size:12px;text-align:right}
#search input[type="text"]:focus{background:#fff}
#search input[type="submit"]{display:none}
Kode diatas ada tiga bagian, Menubar Horizontal Atas, Menubar Horizontal Bawah, dan Kolom Pencarian/Search. Sesuaikan dengan selera anda pakah mau dipakai tiga-tiganya atau hanya pilih salah satu. Setelah itu kemudian temukan kode
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’false’ title=’Beautiful Beta (Header)’ type=’Header’/>
</b:section>
</div>
Dikarenakan setiap template berbeda-beda, mungkin kode yang akan anda temukan lebih panjang, pastikan setelah kode <div id='header wrapper'> anda telusuri sampai kode penutup </div>. Kemudian pastekan kode dibawah ini setelah kode diatas.

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnp0090MSVDOlehpxi57wmQNHiSVsVwdYeMuaEGt8xFg_rOSfKxJCGLbhgTaGRDEExZhhwyLBezT97kct35ANvy_xFm3BQG9cs9VTyVafSqkARzWBhspcaLBErl6jgc527ILKHXDXR3bQP/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='masukkan link disini'>Menu 1</a></li>
<li><a href='masukkan link disini'>Menu 2</a></li>
<li><a class='trigger' href='#'>Menu 3</a>
<ul>
<li><a href='masukkan link disini'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='masukkan link disini'>Menu 4</a></li>
<li><a class='trigger' href='#'>Menu 5</a>
<ul>
<li><a href='masukkan link disini'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='masukkan link disini'>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
<div id='nav-wrapper'>
<div id='nav'>
<b:section class='page' id='page' showaddelement='no'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
<div id='search'>
<form action='/search' class='search' id='searchform' method='get'>
<div>
<input name='q' onblur='if (this.value == "") {this.value = "Type and Enter";}' onfocus='if (this.value == "Type and Enter") {this.value ="";}' size='30' type='text' value='Type and Enter'/>
</div>
</form>
</div>
</div>
</div>
- Setelah selesai klik tombol Pratinjau jika sudah Fix dan OK baru klik tombol Simpan Template.
Tulisan yang berwarna Merah ganti dengan URL tujuan, dan tulisan yang berwarna Biru Ganti dengan Judul URL tadi, Contoh:
<li><a href='http://reyhan82.com'>HOME</a></li>
Sedangkan untuk menu horizontal bagian bawah, anda dapat mengedit, menambah, mengurangi link dan sebagainya, anda tinggal menuju ke layout dan klik pada Menu Laman.