Cara Membuat Simbol menggunakan tombol ‘Alt’

Berhubung banyak yang menanyakan ini ke gw, jadi kali ini gw bakal nulis tentang cara membuat simbol menggunakan tombol alt. Ok sebelumnya, yang gw maksud simbol disini kayak ™, ©®♠♥♣♦☺☻♥↨§↓ dan laen-laen.
Nah, untuk menggunakan simbol-simbol diatas, pastiin dulu NumLock nya itu ON (sampe lampu NumLock itu nyala). Kemudian, tinggal maenin deh tombol alt nya. Untuk buat simbol trademark (™), yang pertama kali anda harus tekan adalah Alt,0,1,5,3. Inget, tombol alt nya jangan dilepas saat menekan angka-angka tersebut. Jadi tekan alt (jangan dilepas) kemudian tekan 0 terus 1 lalu 5 dan terakhir 3, setelah itu baru alt nya dilepas. Untuk buat simbol copyright (©), Alt,0,1,6,9.
Simbol untuk copyright, trademark, registered, French German Spanish Aksen, dan Simbol lainnya

Copyright (©)  Alt, 0, 1, 6, 9
Trademark ( ™ )  Alt, 0, 1, 5, 3
Registered (®)  Alt, 0, 1, 7, 4
Bullet ( • )  Alt, 0, 1, 4, 9
Ellipsis (…) Alt, 0, 1, 3, 3
“EN” Dash ( – ) Alt, 0, 1, 5, 0
“EM” Dash ( — ) Alt, 0, 1, 5, 1
Paragraph (Pilcrow) ( ¶ ) Alt, 0, 1, 8, 2
Pound (£) Alt 0, 1, 6, 3
Euro ( € ) Alt, 0, 1, 2, 8
Cents (¢) Alt, 0, 1, 6, 2
One-half (½) Alt, 0, 1, 8, 9
French accent (à) Alt, 0, 2, 2, 4
French accent (ç) Alt, 0, 2, 3, 1
French accent (è) Alt, 0, 2, 3, 2
French accent (é) Alt, 0, 2, 3, 3
French accent (ê) Alt, 0, 2, 3, 4
German accent (ü) Alt, 0, 2, 5, 2
Spanish accent (ñ) Alt, 0, 2, 4, 1
¿ – 0191
À – 0192
Á – 0193
 – 0194
à – 0195
Ä – 0196
Å – 0197
Æ – 0198
Ç – 0199
È – 0200
É – 0201
Ê – 0202
Ë – 0203
Ì – 0204
Í – 0205
Î – 0206
Ï – 0207
Ð – 0208
Ñ – 0209
Ò – 0210
Ó – 0211
Ô – 0212
Õ – 0213
Ö – 0214
Ø – 0216
Ù – 0217
Ú – 0218
Û – 0219
Ü – 0220
Ý – 0221
Þ – 0222
ß – 0223
à – 0224
á – 0225
â – 0226
ã – 0227
ä – 0228
å – 0229
æ – 0230
ç – 0231
è – 0232
é – 0233
ê – 0234
ë – 0235
ì – 0236
í – 0237
î – 0238
ï – 0239
ð – 0240
ñ – 0241
ò – 0242
ó – 0243
ô – 0244
õ – 0245
ö – 0246
ù – 0249
ú – 0250
û – 0251
ü – 0252
ý – 0253
þ – 0254
ÿ – 0255
**PS: buat yang aksen german, perancis dan spanyol sengaja ga’ gw tulis alt nya. Tapi penggunaannya tetep pake alt.
☺ (Smiley Face) Alt,1
☻ (Smiley Face black vers) Alt,2
♥ (Heart) Alt,3
♦ (Diamond) Alt,4
♣ (Club) Alt,5
♠ (Spade) Alt,6
• (Bullet) Alt,7
◘ (Bullet) Alt,8
♫ (Music Notes) Alt, 1, 4
☼ (Sun) Alt, 1, 5
(Arrow) Alt, 23-29
(Greek Alphabet) Alt, 224-238
(Math Symbol) Alt, 240-253
sumber : nixfar

Read more ...

Membuat Link Sumber Otomatis Ketika Di Copy Paste

Searhing posting Artikel KolomBlogGRATIS.blogspot.com kali ini adalah berbagi tentang cara Membuat Link Sumber Otomatis Ketika Di Copy Paste | Tips Blogspot | Copas Link Sumber Otomatis, Membuat Link Sumber Otomatis Ketika dicopas, Memberi Link Sumber Otomatis Ketika artikel dicopas, memberi link yang tampil secara otomatis ketika artikel pada postingan blog kita di copy paste, Copy Paste Artikel blog / website menurut saya Wajar - wajar aja, saya yakin semua blogger kita pernah juga copy paste, tapi sebagai blogger sejati yang baik harusnya minta izin dulu pada pemilik artikel atau mencantumkan link sumber dari mana artikel yang sobat Mengcopy ke blog / website sobat tersebut.......

Copy paste di dunia memang sudah hal biasa bahkan karena tidak terimanya pemilik aslinya sampai berurusan ke meja hijau. saya rasa wajarlah jika si pemilik tersebut tidak terima karena si pemilik merasa susah payah membuat hasil karyanya tiba - tiba diambil orang lain tanpa izin, terkadang pembaca mengcopy paste sebuah artikel untuk pribadi dan agar apa yang sobat peroleh tidak hilang, dan caranya mereka mengcopynya pada blog / website sobat, tp alangkah baiknya minta izin pada pemilik artikel atau cantumkan link sumber dari mana artikel yang sobat copy ke blog / website sobat.

Attention buat para sobat semua, jika sobat mengcopy paste artikel dengan tujuan untuk kamu publikkan maka etika yang tepat adalah cantumkan link sumber dari artikel tersebut. karena kalau itu terjadi pada sobat sendiri pasti sobat akan jengkel, kesel, dll!!! kalau begitu langsung saja cara Membuat Link Sumber Otomatis Ketika Di Copy Paste - Copas Link Sumber Otomatis :

1. Login ke akun blogger sobat
2. Klik Rancangan
3. Klik edit HTML
4. Centang expand template widget dan kalau masih ragu - ragu simpan aja template sobat ini dan lanjut ke langkah selanjutnya.
5. Copy paste kode berikut tepat diatas kode <body>

   <script type="text/javascript"> if(document.location.protocol=='http:'){ var Tynt=Tynt||[];Tynt.push('cXIEhKYVSr4lJ5adbi-bpO');Tynt.i={"ap":"Sumber :"}; (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://my-kbgkode.googlecode.com/files/sumber-otomatis.js.txt';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})(); } </script>

6. Lalu simpan template
7. dan selesei,... 
8. Selanjutnya pengecekan

Sekarang coba Untuk mengeceknya!!! copy paste artikel sobat pada notepad atau kotak postingan, jika berhasil dan sukses maka akan ada link sumber otomatis pada artikel sobat yang di copy paste. samapi disini dulu cara Membuat Link Sumber Otomatis Ketika Di Copy Paste - Copas Link Sumber Otomatis bisa bermanfaat, jangan lupa tambahkan jaringan teman di KBG atau berikan donasi sobat dengan kerendahan dan ketulusan hati .......

Sumber : kolomgratis

Read more ...

Membuat Widget Gambar Slide Show - Javascript dan Css di Blogger

Membuat Widget Gambar Slide Show - Javascript dan Css di Blogger | Tips Blogspot | Membuat Widget Gambar Slide Show - Posting kali ini KBG akan search tentang cara membuat gambar slide di blogspot ( gambar berubah - ubah sendiri ) yang bisa membuat blog / website sobat jadi lebih indah dan menarik, script kali ini sudah saya uji dan hasilnya memang bagus karena Widget slide show ini terkesan lebih professional membuat KBG ingin membagikan informasi ini pada sobat setia KBG. salah satu penerapan bahasa jQuery pada blogger yang mana menampilkan slideshow pada gambar / image secara otomatis dan jadi tak perlu menggunakan tombol geser, Berikut langkah  - langkah dan Cara Membuat Slide Show Photo Widget for Blogspot dengan Javascript dan Css :

1. Silakan login ke blogger
2. Pilih Tata Letak
3. Klik Edit HTML
4. Contreng Expand Widget Templates
5. Cari kode <head> ( untuk mempermudah pencarian gunakan F3 )
6. Setelah menemukan kode <head> copy paste dan letakkan kode script berikut ini tepat dibawahnya - Download Kode ]>>
7. Simpan Template
8. Untuk langkah berikutnya sobat pergilah ke Dashboard
9. Pilih Tata Letak
10. Klik tulisan Add a Gadget ( tambah widget )
11. Pilih HTML/Javascript
12. Copy paste kode berikut <ul class="slideshow"><li><a href="http://kolombloggratis.blogspot.com/2012/06/donatur.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPEVyPmKaRqQ42zzwoqNkggCesThZhyphenhyphenDlWf7hb0ZrMQzcKa9JeyVonFqRLa7SHdbTm-cp6zZGmSGU1vAHUXphqlskNLUBGI_UCJ9x8Q8HDoaIsEM0ah2C5VZa1luj-9Z9HxYYU5_V5XPg/s320/donasi+trimakasih.jpg" title="BERIKAN DONASI DUKUNG KBG CERDASKAN INDONESIA" alt="Replace This Text BERIKAN DONASI DUKUNG KBG." /></a></li><li><a href="http://kolombloggratis.blogspot.com/2011/04/jasa-pembuatan-blog-pribadi-bisnis.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV4WwES2kbesEac1YHAaw1rO_Rn70X6xxhqNJZoUd0kf5LRIerCu762TUuUYzc2OP-NBC_I7STeVIqrghfWbsBDW1eMpHqIzmQnFn5py9w3iwVTop2rqY1zVbMgi9Fr6aHUyhqKoWbJOo/s320/Bikin+BlogWeb.jpg" title="JASA PEMBUATAN WEBSITE - BLOG PROFFESIONAL" alt="JASA PEMBUATAN WEBSITE - BLOG PROFFESIONAL." /></a></li><li><a href="http://kolombloggratis.blogspot.com/2011/02/pasang-iklan-premium.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr8oXY1H7uykwPMrbC8x5hw46u1m3_y3lttr1JCwOx5XiX6QfqLSFNSCFtJJZf73htFNlR88HXXH0SW48L6xnzbuJ4NS2eqZNXrE-07FQSZ0F41PJlDCUoPIkM_YwqUjIVRpq8HZHE_mE/s320/Iklan+Pasang.jpg" title="PROMO PASANG IKLAN BANNER TERMURAH MERIAH " alt="PROMO PASANG IKLAN MURAH." /></a></li><li><a href="http://kolombloggratis.blogspot.com/2012/06/donatur.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-U2ef5BlH_CTW_RW4ugxYtnfo3gzUdb9XV6hFeLS4wDpRhWE7PL0wDZLQ9X-xYjRLkIdFnSDGIcjo0WqEh1b3lVrqk_PdpGG80fWznL367T6N6UZBhOOfXKhQOonTwSFessHS6VUbWoA/s320/Domain+Murah.jpg" title="DOMAIN PROMO HARGA MURAH! PESAN SEKARANG!!!" alt="DOMAIN PROMO HARGA MURAH BANGET." /></a></li><li><a href="http://kolombloggratis.blogspot.com/2011/06/column-free-download-software-full.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG7Z00To8Y8knmQktACjPXhoSLhyphenhyphenNiY4ylJ4yaBvG-Yo58ZC4ehwYFBpxciKKAJvv-ym6CAOE1lj9Orumpg1TV4EsVzkiLiI7pG0DdgQmLJUVoaSMQfPbyB1dl-UzdF11gmeh7vrd16Ks/s320/Software+Terbaru.jpg" title="FREE DOWNLOAD SOFTWARE TERBARU FULL CRACK" alt="FREE DOWNLOAD SOFTWARE TERBARU FULL CRACK." /></a></li><li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7J2YY_4k8ner47QZ2ARkfK5oBqwnMd0tFVVbTNscJl8okUaI5ge9x8Jg_8EP1YDsRv-XdjtSTi7k5l4qHxSIW0tJzprPh_BnudCgN3wSSzdPncNpLcxQQVIBzmkpglh9yMANGfQxqz5I/s320/TipsTrik.jpg" title="MACAM - MACAM TIPS DAN TRIK TERBARU" alt="MACAM - MACAM TIPS DAN TRIK TERBARU." /></li></ul>
13. Klik Simpan dan lihat hasilnya,...

Semoga posting Membuat Widget Gambar Slide Show - Javascript dan Css di Blogger | Tips Blogspot | Membuat Widget Gambar Slide Show bisa bermanfaat untuk blog / website sobat, jangan lupa berikan donasi sobat untuk dukung KBG dan jangan lupa tambahkan jaringan teman di KBG,....

Download Kode Slide Show]>>
Download Kode Image Slide ]>>

Sumber : kolomgratis

Read more ...

Cara Mengganti Tulisan Older Post Dengan Angka

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara Mengganti Tulisan Older Post Dengan Angka di blogspot.

Cara Mengganti Tulisan Older Post Dengan Angka :

• Masuk ke desain template anda, kemudian ke "Edit HTML"
• Setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

• Setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;

</script>

<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>

</b:if> </b:if>

<!--Page Navigation Ends -->

• Jika sudah silahkan dilihat hasilnya.

sumber : blogtutorials

Read more ...

Cara Membuat Tulisan Seperti sedang di Ketik

Pada kesempatan kali ini saya akan memberikan trik tentang Cara Membuat Tulisan Seperti sedang di Ketik.

Maksudnya adalah text yang di tulis seakan-akan seperti sedang di ketik 

Contohnya seperti ini :

Komentar_

Mau seperti tulisan di atas..? Ini scriptnya :

<script language="JavaScript">
var text="*...:::http://blogtutorials-01.blogspot.com:::...*";
var delay=10;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</script>
<b><div id="textDestination" style="background-color: #ffffff; style=" font: 10px arial; color: #ff0000; margin: 0px;"></div></b>


<script language="JavaScript">
javascript:startTyping(text, 50, "textDestination");

</script>

Demikian blogger tutorial mengenai Cara Membuat Tulisan Seperti sedang di Ketik. 

Semoga bermanfaat dan semoga berhasil. 
Terima Kasih ^_^

sumber : blogtutorials

Read more ...

Cara Membuat Teks Seperti MENGETIK SENDIRI

Bagi para master mohon lewati aja........ini hanya sekedar berbagi
Sering kali kita melihat blog yang dihiasi oleh tulisan atau kata-kata yang berjalan di blog teman-teman kita seperti mengetik. mungkin sebagian besar sudah mengetahuinya. tapi disini SANTRI TULEN mencoba untuk berbagi kepada teman-teman yang belum mengetahui cara pembuatannya.
Catatan: yang akan dibahas Santri Tulen ini merupakan tulisan seperti mengetik biasa bukan tulisan berjalan yang apabila ada mouse di area tulisan itu akan berhenti.
berikut cara pembuatannya :
1.Login ke Blogger
2.Kemudian klik Tata Letak dan Elemen Halaman
3.Ketika sudah berada di Elemen Halaman klik Tambah Gadget
4.Lalu pilih HTML/JavaScript
Langkah selanjutnya masukkan kode Script  yang anda inginkan seperti contoh dibawah ini :
5. Copy Kode berikut dan Contoh teks mengetik dengan sendirinya  lihat di samping kanan

<form name="news">
<textarea cols="50" name="news2" rows="3" wrap="virtual"></textarea></form>
<script type="text/javascript">
//<![CDATA[
var newsText = new Array();
newsText[0] = "Teks Anda ";
newsText[1] = "Teks Anda";
newsText[2] = "Teks Anda";
newsText[3] = "Teks Anda";
newsText[4] = "Teks Anda";
newsText[5] = "Teks Anda";
var ttloop = 1; // diulang-ulang teksnya ganti dengan 1 (1 = True; 0 = False)
var tspeed = 250; // Typing speed in milliseconds (larger number = slower)
var tdelay = 1000; // Time delay between newsTexts in milliseconds
// ------------- NO EDITING AFTER THIS LINE -------------
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}
doNews()
//]]>
</script>



Ketereangan
cols="50" = lebar Halaman
rows=2    = tinggi halaman
Isi Teks  = Silakan isi sesuai dengan Teks yang anda inginkan

terimakasih....silahkan anda untuk mencobanya sukses milik anda..... sumber : alam-berdzikir

Read more ...

Rocking Rolling Rounded Menu dengan JQuery dan CSS3

Pertama kali melihat tampilan Rocking Rolling Rounded Menu dengan JQuery dan CSS3 ini langsung membuat saya kepincut. Pada versi awal dari menu Rocking Rolling ini hanya menggunakan efek sliding seperti yang dapat sobat lihat di http://tympanus.net/Tutorials/RockingRollingMenu/. Namun dalam versi yang saya share kali ini terdapat penambahan  efek animasi icon menu yang berputar menggunakan jquery sehingga tampilannya menjadi lebih bagus dan menarik. Selanjutnya tinggal pilih tempat terbaik untuk meletakkan menu ini, misalnya diatas header atau dibawah header. Sudah pasti tampilan blog sobat akan menjadi tambah keren dah !!

  ------------------------------VIEW DEMO HIERE------------------------

Membuat Rocking and Rolling Rounded Menu dengan Jquery dan CSS3 :

1.  Pastikan dalam template sobat sudah dilengkapi dengan JQuery 1.3.2 ya. Kalau belum pasang aja script dibawah ini dan letakkan diatas kode </head>.

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

2.  Kemudian letakkan juga kode dibawah ini sesudah atau tepat dibawah kode JQuery 1.3.2 tadi.

<script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>

<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

3.  Selanjutnya copy kode CSS dibawah ini dan paste tepat di atas kode ]]></b:skin>  dalam template.

#rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}

#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}

#rocking-rolling .item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px; height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}

#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}

#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}

#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}

#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}

#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}

#rocking-rolling .item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow:1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}

#rocking-rolling .item_content a:hover{
color:#0b965b;
}

#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}

#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

4.  Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan dimana sobat menginginkan menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'>.

<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>

<div style='clear:both;'></div>
</div>

<script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>

5.  Silahkan diedit JUDUL MENU, NAMA MENU serta Link Referensi # sesuai keinginan sobat.
6.  Save template anda.

 Selamat bereksprimen coba Membuat Rocking Rolling Rounded Menu dengan JQuery ini, kalo belum berhasil coba terus aja yaaacchh…!! Salam Blogger and happy nice blogging !

Referensi tulisan :
http://tympanus.net/codrops/2010/04/30/rocking-and-rolling-rounded-menu-with-jquery/
http://tip-triksblogger.blogspot.com/2011/03/rocking-rolling-rounded-menu-with.html
http://blogcunayz.blogspot.com/2011/12/menu-rocking-rolling-rounded-dengan.html

Read more ...

Membuat Blog Gratis di Blogspot

Langkah Mudah Membuat Blog di Blogspot

1. Buat Email di Gmail

Untuk membuat blog di blogspot anda wajib memiliki akun di Gmail, untuk membuat Gmail pendaftarannya gratis dan mudah, daftarkan akun anda di www.gmail.com dan klik create new akun pada bagian sudut atas, isikan lengkap data anda.

2. Daftar di bloger.com

Setelah anda sukses dan mendapatkan akun di gmail.com, langkah selanjutnya untuk membuat blog daftar di www.blogspot.com klik sig up atau daftar dan isikan data-data anda.

* Keterangan Pengisian Form :

• Email : isikan dengan alamat email Gmail yang baru anda daftarkan
• Pasword : Masukkan Pasword anda minimal 8 karakter
• Retype Pasword : Masukkan pasword yang sama sekali lagi, untuk memastikan anda mengingat dengan baik pasword tersebut.
• Display Name : Masukkan nama yang ingin anda tampilkan sebagai penulis di blog, misalkan anda menggunakan nama "hadhara rizka" maka di artikel yang anda posting nanti akan muncul posted by hadhara rizka
• Gender : Masukkan jenis kelamin anda, pilih Male = Jika Laki - laki, Female = Jika Perempuan, atau bisa pula memilih Other atau lainya
• Birthday : Masukkan tanggal lahir anda sesuai dengan format yang diminta misalkan 07 desember 1991 maka dibuat 07/12/1991, jika di dalam Inggris strukturnya adalah Month/Day/Year (Bulan/Tanggal/Tahun) maka anda buat 12/02/1991
• Word Verifications : Isikan dengan kode yang terdiri dari angka maupun huruf yang muncul di kotak dialog Gmail
• Centang Accept the term of service, Saran saya baca dahulu persyaratan pendaftaran dengan baik
• Klik Continue jika anda memutuskan untuk membuat blog

3. Membuat Blog

Nah, Akun blogger sobat sudah jadi, sekarang saat nya membuat blog. Klik "Blog Baru" pada bagian Kiri atas. dan akan muncul tampilan seperti di bawah ini.

Keterangan :

• Pada Kolom "Title" Isikan Judul Blog yang sobat ingin buat, misalkan My Personal Blog, My Story atau apalah yang sobat inginkan
• Pada kolom alamat isikan nama situs sobat, misalkan hadhara-personalblog.blogspot.com,  pilihlah alamat yang sesuai dengan nama dan tema blog dan cari yang simple saja agar mudah diingat 
• Pilih Template yang sederhana saja, saya rekomendasikan pilih Awesome, karena lebih sederhana.
• Blog Sobat sudah jadi, untuk mengecek coba ketikan alamat yang anda daftarkan tadi di url browser anda misalkan hadhara.blogspot.com (kalau tidak di cek juga tak masalah)

Selamat sekarang sobat sudah memiliki blog, dan sudah mulai bisa menulis apa yang ingin sahabat tulis dengan mengklik new post di halaman depan (dasbor) blog sobat.

Sumber: disini

Read more ...