mutiaraizzati.

Hai teman semuanya :) kali ini aku mau post tutorial membuat note di bawah postingan . Tutorial ini di rikues sama Fathima. Kalian tau maksudnya? Itu tuh, yang ada di bawah postingan aku. Tulisannya thanks for reading blablabla dan berwarna biru, hehe :D oke, simak tutorial ini ya, bagi yang penasaran, perlu dicoba nih, ehehe :D Oke, thanks for Kak Cindy 1. Masuk ke akun bloggermu 2. Ke dasbor > template > edit HTML 3. Cari kode ini <data:post.body/> 4. Kalo udah,  copas kode di bawah ini setelah kode no. 3. Kalo kode data post body lebih dari satu, coba dulu satu-satu ya. Pasti bisaa! <hr color="# ADDFFF "/> <center>PESAN KALIAN DISINI</center><hr color="# ADDFFF "/>    5. Kalo udah diedit, save, ok? Kalo mau note nya muncul setelah di read more, harus betah nyimak lagi, nih. Ini juga berguna buat linkwithin. Sering kali aku lihat, banyak yang pasang linkwithin yang muncul sebelum di read more, hehe :D 6. Kalo mau...

Muthia request, nih! Kali ini, Muthia tanya, cara membuat live preview di blog. Nah, penasaran gimana cara buatnya? Yuk, simak tutorial menarik aku ini, yak~~ Nah, yuk kita buat! Paling utama, buat blog baru dulu dong. Gimana caranya? Gampang, nih, kalo udah punya akunnya, kita tinggal klik 'Blog Baru' yang letaknya berada di sebelah kiri list atau daftar-daftar blog kita, yaak!  Tulis url live preview blog kamu.  Kalo udah, pilih template terserah kamu dulu, yaa! Naahh, sekarang kita ubah templatenya menjadi template klasik atau semacam blogskins gitu, okay? Klik tutorialnya di sini , yaak! (Tapi jangan download kode blogskins) Kalo udah pake template klasik, copy kode live previewnya. Kode ini bisa kamu dapatkan dengan klik ini . Edit-edit sendiri, yaa, mulai dari background, warna, dll, oke? Kalo udah diedit dan dicopy, paste pada kolom kode template klasik tadi. Kode yang sebelumnya, hapus dulu! Save! Gimana cara pakenya? Seperti biasanya kamu nulis post...

Thanks for Rida Rida nanya, cara menginstall font ^^ Sebelumnya, Tiara jelasin juga ya, cara download font, hehe ^^ Oke, situs untuk download font, bisa klik di sini . Kalo udah, kalian bisa pilih font yang kalian suka, atau kalo kalian hafal nama fontnya, bisa dicari lewat kolom pencarian ^^  Setelah itu, klik download dan nanti filenya akan keluar dalam bentuk zip. Lalu, buka file hasil download-an font kalian tadi. Kalo udah di extract all atau extract here, cari file hasil ekstraknya, lalu double klik file fontnya. Lalu, lihat gambar di bawah ini yaa ^^ Setelah itu, klik kanan fontnya dan hover open with, lalu klik itu, aku lupa namanya ._. kalo udah, nanti muncul gambar di bawah ini dan install! ^^  Semoga membantu yaa :)

Inilah yang dimaksud Sasya tentang request-annya, hehe.. Yuk, kita buat! I dunno untuk blogskins atau classic template . This is my own coding. Repost? Full credit to me!! ^^ Dasbor > Template > Edit HTML Cari kode .sidebar .widget { Kalo gak ada, aku gak bisa bantu, nih. Karena untuk tutorial ini, sidebar kamu harus berborder, hehe ^^ Udah ketemu? Copy kode ini  .sidebar .widget:hover { -webkit-box-shadow: 0px 0px 8px 3px #99C7FF; -moz-box-shadow:    0px 0px 8px 3px #99C7FF; box-shadow:         0px 0px 8px 3px #99C7FF; -webkit-transition-duration: 4s; border-top: 2px dashed #A8CFFF; border-bottom: 2px dashed #D0E6FF; border-left: 2px dashed #D0E6FF; border-right: 2px dashed #A8CFFF; border-radius: 40px 0px 40px 0px; -moz-border-radius: 40px 0px 40px 0px; -webkit-border-radius: 40px 0px 40px 0px; } Lalu, pastekan di bawah kode sidebar widget yang paling bawah. Lihat capture di bawah ini.  Seperti itu l...

your own words Nah, maksud dari tutorial ini, adalah kayak di atas. Kalo kursor kalian di arahkan ke gambar itu, maka akan muncul kata-kata. Yuk, kita buat! Thanks for Jesslyn ^^ Design Templ. Dasbor > Tata Letak > Add A Gadget > HTML/Javascript Copy kode ini <style>#ck{background:#BBEBFF;color:#000;width:252px;height:142px;padding-left:0.5px;margin-top:-150px;padding-right:0.5px;padding-bottom:0.5px;padding-top:5px;opacity:.0;-webkit-transition:all .5s ease-in-out; }#ck:hover{opacity:.7}</style><div style="text-align:center;"><center><img height="152";width="252" src="your image" width="250" /><br /><div id="ck"><br /><div style="text-align:center">your words</center></div> Paste dan Save!  Classic Templ. Dasbor > Template > Edit HTML  Pastekan kode hover imagenya di sidebar kamu! ^^ Save! Semoga berma...

Happy Sunday, guys! Kali ini, aku mau bagi-bagi tutorial hover image rainbow. Untuk live preview, coba kalian hover image di atas. Arahkan kursor kalian ke image tersebut :) Gimana? Rainbow kaann? Pelangi-pelangi gitu, hihi.. Thanks for Kak Atiqah ^^ Desgin Templ. (ini caraku sendiri ^^) Dasbor > Template > Edit HTML Cari kode img { Kalau tidak ada, tambahkan saja kodenya di img nya di atas kode di bawah ini. Copy kode ini filter: hue-rotate(360deg); -webkit-filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg); -webkit-filter;(1); -webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear; transition: all 0.7s linear; } img:hover { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); -moz-filter: hue-rotate(0deg); -webkit-filter;(0); } Pastekan di atas kode ]]></b:skin> Save! Classic Templ. Dasbor > Template > Edit HTML Caranya hampir sama, namun pastekan di atas kode </style> Save...

Lihat? Linkwithinnya jadi bulet, kan? Semalem, Kak Cindy nanya, hehe... Ya udah, simak aja yuk! ^^ Oh ya, tentunya ini hanya berguna untuk yang pakai linkwithin aja, yaa! Hehehe.. Langsung aja, ya! Dasbor > Template > Edit HTML Cari kode ini ]]></b:skin> Kalo udah ketemu, copy kode ini   .linkwithin_div { background: #EEEEEE; /* Background color for the related posts container */ padding: 0 10px; border-top: 1px solid #DBDBDB;  /* Top border for the related posts container */ border-bottom: 1px solid #DBDBDB;  /* Bottom border for the related posts container */ } .linkwithin_text { font-family: short stack; font-size:14px; /* Size for the related posts title */ color:#000; /* Color for the related posts title */ } a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithi...

Apa kabar hari ini, teman-teman? Kalo aku baik-baik saja, hehe... Rida tanya, gimana ya, cara mengatur ukuran atau size sidebar blog kita? Hm, let's follow step by step, guys ! ^^ Design Templ. (picture window, etc. except denim) Dasbor > Template > Sesuaikan > Sesuaikan Lebar Lalu, kalian bisa atur sendiri dan kalau sudah selesai, terapkan ke blog! ^^ Lihat capture di bawah ini. Ini contoh dari blognya Kinanti karena blognya Kinanti pakai picture window, hehe.. ^^ Image From Kinanti Denim Template Nah, aku jelasin dulu ya, soal template ini. Denim itu nggak bisa ngedit di sesuaikan. Denim harus pakai kode-kode kalau edit -edit blog ^^ Seperti blogku. Lihat, mau mengatur size sidebar maupun post tidak bisa. Harus pakai kode ^^ Jadi, untuk denim template, caranya seperti ini. Dasbor > Template > Edit HTML Cari kode ini #sidebar-wrapper { Kalau sudah ketemu, coba cari kode width di sidebar wrapper tadi. Lalu, atur sizenya.. Bisa lihat...

Halo, temen-temen! Jesslyn tanya, cara mengganti kursor kita di blog dengan kursor sesuai kemauan kita, lho! ^^ Mau tahu caranya? Yuk, simaakk! Design Templ. (denim, simple, picture window, etc.) Dasbor > Template > Edit HTML Expand Widget Template (ctrl a, ctrl c, ctrl v) Cari kode body { Sudah ketemu? Kalo tidak ada kode di bawah ini, kasih kode ini dan pastekan tepat di bawah kode body, tadi. cursor: url(your cursor url), progress;  Kalian bisa paste seperti aku caranya. Lihat capture di atas? Jangan lupa setelah kode kursor beri kode {, lihat nggak tuh, kayak capture aku di atas? Kalo udah ada, tidak usah ditambahkan ^^ Untuk korsor hovernya. Cari kode a:hover { Kalau tidak ada, Beri saja kode tersebut. Boleh taruh kode a:hovernya di bawah kode cursor kamu ^^ kalau bingung, lihat saja capture di atas, hehe... Sudah? Beri kode ini cursor: url(your cursor url), progress; } Sama kan, seperti capture di atas? Kalo udah SAVE! ^^ Cla...

Hai, teman-teman! Hari ini, aku mau bagi tutorial tentang secret box, hehe... Tapi, kali ini sedikit berbeda karena ini adalah hasil modifikasi owner alias aku alias Tiara XD Mau lihat seperti apa? Klik di sini ! Gimana, keren nggak? XD Kalo tertarik, silahkan simak langkah-langkahnya dengan cermat, yaak! Design Templ. (Denim, Simple, Picture Window, etc.) Dasbor > Tata Letak > Add A Gadget > HTML/Javascript Pastekan di kolom HTML tersebut dan save! Classic Templ. (Blogskins) Dasbor > Template Pastekan kode secret box pada sidebar blog kamu. Copy this codes <style> .adv2 ul{background:url(http://i.imgur.com/LsUfp.png);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555} a.adv2 p{padding:5px;text-align:left;width:250px;color:#555;} a.navi{ display:inline-block; -webkit-transition:All 0.8s ease ; -moz-transition:All 0.84s ease ; -o-transition:All 0.8s ease ; padding:5px; width:20px; text-decoration:none; ...

Hai, temen-temen. Kali ini, mau share  tutorial. Tapi, nggak pake video tutor, hehe.. Soalnya simpel, kok! ^^ Mudah aja, deh! Nah, kali ini, Wafia nanya cara membuat efek kembang api pada kursor. Sedikit koreksi, bagi yang belum tahu, itu namanya "Clickplosion Cursor Effect" Masih belum paham? Live preview here ! Klik di mana-mana, deh, di blog tersebut, hehehe... Gimana, tertarik untuk membuatnya? Yuk, kita buat sama-sama! Thanks for Kak Ezah !  Design Templ.  Dasbor > Template > Edit HTML Paste kode cursor effectnya sebelum kode <head> atau bisa juga dengan cara  Dasbor > Tata Letak > Add A Gadget > HTML/Javascript (ini caraku sendiri bukan Kak Ezah) Classic Templ. / Blogskins Dasbor > Template > Edit HTML Paste kode cursor effectnya setelah <html> atau <head> Copy kode ini <script type="text/javascript"> // <![CDATA[ var sparks=75; // how many sparks per clicksplosion var speed=33; ...

Halo, teman-teman! Kali ini, aku mau share  cara membuat blogskins! Tapi, jangan disangka blogku ini pake blogskins, yaa! Blogku pake denim, hehe... Tau blogskins kan? Ah, itu lho, yang kode-kodenya lebih sedikit dari template blogger, terus tampilannya bagus-bagus.. Kalian bisa ke situs blogskins, yaa! Klik di sini . Tapi, kan lebih asyik kita buat blogskins sendiri, ya? Hm, caranya sih memang agak rumit. Tapi, ikutin pelan-pelan, yaakk! Cara membuat blogskins ada dua. Yaitu basecode dan membuat dengan kode sendiri. Basecode itu apa sih? Coba di-translate. Base = dasar, code = kode. Jadi, dasar kode. Maksudnya? Misalnya, ada satu blogskins, dan blogskins tersebut aku pakai untuk membuat blogskins. Nah, blogskins yang aku buat itu namanya basecode. Jadi, pake kode skins orang. Untuk cara basecode, gampang banget. Kamu tinggal pilih skins di situs blogskins dan download kodenya. Bisa klik di sini . Terus, kalian bisa live preview di sini . Kalo udah, kode blogskins di notep...

Halo, temen-temen! Kali ini, aku mau share  cara membuat navigatable box alis secret box. Kenapa bisa dibilang secret box? Itu karena ketika di klik, muncul kata-kata atau sesuatu yang owner inginkan. Want to live preview? Click here ! Sudah lihat previewnya, kaan? Yuk, kita buat! Design Templ Dasbor > Tata Letak > Add A Gadget > Paste di HTML/Javascript Classic Templ. / Blogskins Dasbor > Edit HTML > Paste di kode sidebar kamu Copy kode ini <style> .adv2 ul{background:url(http://i.imgur.com/LsUfp.png);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555} .adv2 p{padding:5px;text-align:left;width:250px;color:#555;} a.tablo{-webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor:pointer;background:#fff; width:20px; text-decoration:none; border:1px das...

Image from Kinanti Kalian tahu sidebar title? Itu artinya judul sidebar. Sidebar itu apa, ya? Coba deh kamu lihat. Pasti di blog kalian ada postingan dan di sebelahnya ada widget-widget gitu, kan? Itu namanya sidebar. Langsung aja ya! Dasbor > Template > Edit HTML Cari kode sidebar title kamu. Biasanya, beda template beda kode juga, hehe... Untuk denim, bisa cari kode  .sidebar h2 { Untuk yang template picture window, cari kode ini h2 { Kalo udah ketemu, copy kode ini background:url(http://i1074.photobucket.com/albums/w419/amaninaonly/polkadotbiru.gif#sthash.W6R7mm1S.dpuf); border: 2px solid #FFFFFF; -moz-box-shadow: 0 0 3px 3px #DBEDFF; -webkit-box-shadow: 0 0 3px 3px #DBEDFF; box-shadow: 0 0 2px 2px #DBEDFF; color:#FFFFFF; text-shadow:0 0 6px #ccc; font family: Normal 12px Short Stack; text-align:center; } Cr : Arin & Nanda

Image from Kinanti Halo teman-teman. Tadi di sekolah, temenku Frida nanya, cara buat 'back to top' itu gimana sih? Nah, yuk, kita bikin! Oh ya, jquery itu maksudnya setelah di scroll baru muncul. Kan ada yang back to top, tapi sebelum di scroll udah muncul duluan, hehe... Langsung aja, yaaa! Design Templ. Dasbor > Tata Letak > Tambahkan Gadget > HTML/Javascript Copy kode ini <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> <script type='text/javascript' language='Javascript'> var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '...

Image from Kinanti Hai semua! Tutorial kali ini, aku mau kasih tau caranya biar font blog kita itu berubah gitu pakai google font, hehe... Font blogku ini short stack dan kuambil dari google font. Untuk mengunjunginya, kalian bisa klik di sini . Terus, gimana sih cara pakenya? Check it out ! Kalian udah buka situs google font kan? Langsung aja yaa! Kalo udah buka, pasti tampilannya gini kan? Habis itu, langsung cari dan tulis font yang kamu mau di kolom pencarian dan klik 'add to collection' Lihat gambar di bawah ini. Contoh fontnya, misalnya short stack, delius swash caps, delius, pacifico, dan lainnya masih banyak yang pasti. Kalo udah di klik 'add to collection' pasti, muncul font family koleksimu. Oh ya, kalian bisa langsung menambahkannya dua font sekaligus, loh! Selanjutnya, pilih 'use' Setelah klik 'use' pasti muncul seperti gambar di bawah ini. Di scroll down dulu untuk lihat kode link google fontnya. Tau scroll k...