mutiaraizzati.

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! Aku mau bagi-bagi image back to top button, nih! Yuk, lihat-lihat! Siapa tahu, cocok untuk blog kalian lah, pastinya. Untuk tutorial cara pasangnya, klik di sini . Tunggu freebies back to top yang kedua yaaa! Cr : Kak Novita Lesyani

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; ...

Hai temen-temen.. Dulu, pernah ada yang request buat header nihh.. Namanya Ayesha ! Nah, Ayesha, semoga tutorial ini membantu kamu yaa ^^ Nah, tutorial ini pake video, hehe.. Soalnya kalo dijelasin satu-satu ntar kemungkinan bisa nggak paham, lagi. Jadi, alternatifnya pake video tutor. Makasih untuk yang udah mau nonton, yaakk!! Nggak usah jauh-jauh ke youtube untuk cari vidtutorku (?) kalian tinggal lihat videonya di bawah ini! Selamat mencoba dan menyaksikan! ^^ #emangnya #pertunjukan? XD Jeng jeng jeng!! XD Ini dia hasil headernyaaa! ^^ Gimana temen-temen? Semoga berhasil, yaa ^^

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 teman-teman! Ada yang tanya, gimana ya, cara membuat banner bergerak? Hm, kali ini, aku akan jawab pertanyaan kamu, yaa! Aku hanya tau membuat banner di aplikasi photoscape. Sebenarnya di photshop bisa, tapi, aku nggak pintar photoshop, jadinya kali ini pake photoscape dulu, yaa! Kalo nggak punya, bisa klik di sini untuk download. Ikuti saja perintah-perintahnya, ok? Kalo udah ke download, silahkan lihat video tutorku ini, yep! ^^ Part 1 Ini yang Part 2 Taraaa..!! Ini dia banner yang tadi kubuat. Ini buatanku. Mana buatan kalian? ^^

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...