Halluw semua... piye punya kabar... Pada baik semua kan???

Langsung aja yach ke pembahasan, hmmm kali ini Kun akan kasih tuto tentang cara membuat menu yang melayang di samping (halaman)

Ini menu kalo kursor kita pindah ke bawah pun, menu bakalan tetep mejeng disitu alias gak pindah2.

Bisa langsung praktek dach, ben pada tau, itu ntar menu wujudnya kek gimana, Oke...

Cekidot ....

1.  Klik Dashboard
2.  Design > Page element > Add gadget > Edit Html/javascript
3. Lalu copas code dibawah ni :

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
</style>


<div style='display:scroll; position:fixed; top:240px; left:25px;'>

<a class='linkopacity' href='URL BLOG' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="URL Image" /></a>

<a class='linkopacity' href='URL Page 1' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="URL Image" /></a>
<a class='linkopacity' href='URL Page 2' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="URL Image" /></a>
<a class='linkopacity' href='URL Page 3' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="URL Image" /></a>
</div>

4. Kalo sudah, itu kalian ganti yang warna Merah dengan URL page kalian , dan yang warna Pink ganti dengan URL gambar yang kalian ingin.

5. Save.

Liat hasilnya, gimana???? Oke kan??? Ntar hasilnya kek gini, menu akan muncul di kiri halaman.

kek gini hasil e .

Read More >>

Aku mencintaimu...

Aku mengharapkan Mu lebih dari ini

Aku ingin Kau jadi pendamping Hidupku

Menemani Hari2 ku

Menghabiskan sisa umur yang tak tau kapan akan berakhir

Menjalani hidup Bersama

Hingga maut memisahkan kita

Tiant'09

Read More >>

Ketika Cinta menyapa , Hati berbunga di buatnya

Read More >>

gbr. gak ada kaitannya

Selamat sore sobat... gimana punya kabar???

kali ini aku kan membahas tentan Readmore egend, yang kemarinkan aku sudah ajari cara memindah readmore ke kanan, nah kalo sekarang aku kan ajari buat auto readmmore.

Auto readmore disini maksudnya?

Kan kita biasanya kadang memposting dengan isi yang buanyak, nah daripada pusing pengen potongnya dimana, ya mending pake ini aja.

Kalo pengen liat hasilnya, ntar kek gini

Gimana??? jadi rapi kan blog kita...

Okey, langsung aja yach kalo gitu, cekidot n langsung praktek yuks...

Read More >>

✿ Newer Post

Newer post ini kalo pake icon panah, itu menunjuk ke arah kiri  , disini aku pake icon hasil karya ku sendiri *photoshop*
Cara menggantinnya :
1. Dashboard / Design >> Rancangan >> Edit HTML >> centang Expand Template Widget
2. Tekan ctrl+f dan cari kode <data:newerPageTitle/>
3. Ganti kode yang kita cari tadi dengan kode di bawah ini :

<img src='url icon / gambar kalian' />

Ganti tulisan yang berwarna oranye, sesuai keinginan. Or paling mudah Copas aja yang dibawah ini. ^^

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7jLwKt2tkpSq2Hd6EQrTPFBeEvO5bX4_Q_mO9TL1J2XIg9jUmFKSN2O7lv_ULLXQluhcxlDStOUhhsItbUMauuzQvT1uD94INgJ8WpuqLUdBfqHycCEbwWrOjAc2kNb7bXf6KYV9qqzE/s1600/back.gif

✿ Home

Home, biasanya icon ini disymbolkan dengan gambar rumah  

Cara menggantinya :

1. Dashboard / Design >> Rancangan >> Edit HTML >> centang Expand Template Widget

2. Tekan ctrl+f dan cari kode <data:homemsg/>

3. Ganti kode yang kita cari tadi dengan kode di bawah ini :

 <img src='url icon / gambar kalian' />

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6gojbhZaGINqy1kd23M7w7sQkHd7a-uDZHd3lRDk8aMib6rdyNtVDHCJf4hhfn_a0s75cBFIUES1rt48oWOFsm5otXijR2DD0kgfNQLez-q-wQSPQzcy3PKf_wuoRZUeOxa94697nxc/s1600/home.gif

Read More >>

Kali ini aku akan berbagi cara tentang readmore, bagi yang tidak suka posisi readmore berada di seblah kiri, nach ini aku ada cara untuk memindah readmore agar posisi berada di tepi kanan.

Ikuti langkah2 berikut ini:

1. Cari kode 

<div class='jump-link'>

2. Setelah ketemu, pastekan kode dibawah ini tepat dibawah kode yang sudah kita cari tadi; 

<div style='float:right;padding:10px 0px 5px 0px'>

3. Dan jangan lupa sebelum di save tambahkan ini kode </div> sebelum kode </b:if>

nanti hasilnya jadi kek gini urutannya :

<b:if cond='data:post.hasJumpLink'><div class='Jump-Link'><div style='float:right;padding:10px 0px 5px 0px'><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></div></div></b:if>

Gimana??? gampangkan???
Kalo berhasil tinggalin Comment yach... Good Luck PLend...

Read More >>

 

Sebelumnya aku kan sudah kasih tutorial cara membagi isi posting jadi dua kolom ya... ini sekarang aku dapat lagi tuto yang lebih mudah penggunaannya. Contoh e ya kek Postingan ku sekarang ini. *tuh balance kan antara yang kanan n kiri...

Yang dulukan kita perlu isi bagian 1 n bagian yang 1e, yang ini kita tinggal ketik biasa, nanti secara otomatis bila ketikan kita udah puanjang??? Bakalan kepotong sendiri.

Nach enakkan ini, gak ribet???

Langsung aja yach...

1. Klik posting

2. Klik Edit HTML

3. Letakkan kode ini :

<style type="text/css">#twocolom{-moz-column-count:2;-moz-column-gap: 2em;-webkit-column-count: 2;-webkit-column-gap: 2em;}</style><div id="twocolom"> LETAKKAN POSTINGAN DISINI</div>

4. Terus.... ya tinggal ketikkan aja isi postingan kalian di yang berwarna oranye itu.

 Liat hasilnya... Gimana? Jadi rapi kan ketikan kita.

God Luck Plend...

Read More >>

dari pada pening mikirin ini itu... mending buat es teh ae... seger  kayak e,,, ma posting cara buat es teh , upst salah,,, hehehehe. just kidding, maksud ane cara buat ini posting yang bisa jadi 2 kolom : Nich carae : 1. copy kode dibawah ini di posting temen2 : <table Cellpadding="10" Cellspacing="10"><tbody> <tr> <td align="justify" valign="top" Width="300"> Artikel di bagian kiri</td><td align="justify" valign="top" Width="300"> Artikel di bagian kanan</td> </tr> </tbody></table>

2. keterangan : * cellpadding="10" : adalah jarak antara tepi kolom dengan tulisan; * cellspacing="10" : adalah jarak antara dua kolom; * width="300" : adalah lebar masing-masing kolom; * align="justify" : adalah perataan teks; ** justify : rata kanan kiri ** left : rata kiri ** right : rata kanan ** center : rata tengah; * valign="top" : adalah perataan vertikal; ** top : rata atas ** bottom : rata bawah ** middle : rata tengah; 3. Temen2 bisa merubah sesuai keinginan... 4. Selamat mencoba... Gud Luck...

Read More >>

Nach kali ini aku kan membahas tentang "READ MORE"

** cara memindah ReadMore ke tepi kanan

1. Login ke Blog
2. Design > Rancangan > Edit HTML > centang Expand Widget
3. Cari kode <div class='jump link'>
4. Lalu tambahkan kode dibawah ini tepat di bawah kode yang kita cari tadi,
   <div style='float:right;padding:10px 0px 5px 0px>
5. Lalu tambahkan juga kode </div> sebelum kode </b:if>
6. Lalu Save.

Jadi hasilnya ntar kek gini urutannya :

<div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div></div>
    </b:if>

Read More >>

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8-7g8Jy7Ymbz8K9UcPvv-gi9bDkQf42ar3D3EeZnfA3YrqA-6HeIsnDM5hXxcG8kLGG9Jludo5In35EE6XI6el7_FWy-OYY_JGgq5CwiugYifIrUXl_kNKWbMi1v50T4GSlqibqzEmGSf/s1600/original.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisRPFTvqRlvYJqsO0PMB_A1O1H9TExDFZDfbIrEN0aLReMTWU2AObVl0hVp2mD8a_9dLS80g7ilp3O9rUKCKTnh6TlvRijcYFTX2VVDtTA0YCBDjWJZayaxy8zTHD6y8XyjMJTYO3biEjb/s1600/green.png

Read More >>

 

1. Masuk ke Blog kalian

2. Klik Design > Rancangan > Element laman

3. Lalu klik tambah Gadget

4. Pilih HTML/JavaScript

5. Lalu copy & paste kan code di bawah ini:

Read More >>

Cara membuat energy save widget mudah banget kok, ikuti saja langkah2 berikut ini :

1. Klik Design >  Edit html
2. Centang template widget (oea untuk berjaga2 takutnya ada yang error nanti setelah di save, lebih baik sebelum di edit kalian "backup template" aja dulu. Ok)
3. Lalu cari kode </head> , agar lebih mudah mencarinya gunakan fungsi Find (ctrl + f).
Gimana sudah ketemukan??? Kalo sudah lanjut ke langkah berikutnya
4. Copy kode di bawah ini dan pastekan sebelum kode &lt;/head&gt; tadi,

<script language='javascript' src='https://sites.google.com/site/unwanted86/javascript/savetheenvironment.js' type='text/javascript'/>

5. Kalo sudah, jangan lupa di save ya...

Mudahkan pasang Energy Save Widgetnya...  Good Luck teman... ^_^

Read More >>

ikh ane yang mau buat blockquote imut kok gak berhasil2 ya??? ada yang salahkah code nya??

MUMET SANGAT
MIKIR
BLOCKQUOTE INI ANE

Read More >>

Read More >>

Nich boneka terbuat dari bahan flanel. Sangar ya rek... Hehehe... Sapa mau???

Read More >>

Cara membuat navbar menjadi hilang tapi kalo mouse lewat dia muncul itulah yang namanya AutoHide Navbar. Mau tau kan cara membuatnya. Ikuti langkah2nya berikut ini :

1. Login Ke blogger kalian
2. masuk ke Rancangan / tata letak
3. Masuk ke bagian EDIT HTML ( jangan lupa centang box Expand Widget Templatenya )
4. Kalian cari kode ]]></b:skin>
5. Simpan kode berikut diatas kode tadi :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Wes, gitu tok teman2, mudah sangat kan???

Read More >>

Ini pict ku ambil saat ku jalan2 ke selecta bulan february kemarin. Lucu2kan. Hihihi capa mau??? Mau? Beli dumz coz itu dagangan orang. Hehehe

Read More >>

TULISAN KALIAN

untuk membuat tooltip seperti diatas, silahkan ikuti langkah-langkah pembuatannya di bawah ini, okey:

1. Login ke blogger kalian
2. Pilih Rancangan
3. Pilih EDIT HTML (centang expand template widget)
4. Simpan CSS berikut diatas kode ]]></b:skin>

#easyTooltip{ padding:5px; border:1px solid #000;color: #fff;background:#000;}

5. Sekarang simpan script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <!-- begin Tooltips --> <script type='text/javascript'> $(document).ready(function(){ $("a.tooltip").easyTooltip(); }); </script>< <script type='text/javascript'> //<![CDATA[ (function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery); //]]> </script>

6. Simpan Template kalian

Untuk menggunakannya silahkan kalian gunakan kode berikut:

<a class="tooltip" href="http://www.blogger.com/LINK%20URL" title="PESAN DALAM TOOLTIP">TULISAN KALIAN</a>

Mudahkan??? aku aja bisa, masa kalian tak bisa .... hehehe, SEmoga Berhasil yaks...

Read More >>

Text yang mengikuti arah lajunya kursor ini bisa kita rubah dengan text sesuai keinginan kita. Dengan bantuan java script ini akan bisa kita buat pada kursor blog. Untuk pembuatannya pun sangat simple karena kalian tidak akan pusing dihadapkan banyak Kode-kode.

Sebelum saya menjelaskan cara pembuatannya, silahkan kalian lihat Hasilnya Disini terlebih dahulu. Gimana??? Cakepkan??? hehehe kayak yang punya Blog Nich * agagagagagag Narcis Sitik tak apalah...

Untuk detail pembuatannya silahkan baca tahap-tahapnya dibawah ini :

Read More >>

Sekarang saya akan menjelaskan cara memberi effect light pada gambar. Untuk lebih jelasnya silahkan kalian perhatikan gambar berikut :

Lightbox untuk gambar ini mempunyai kelengkapan dengan adanya fitur sebagai berikut :

1. Tampil berdiri sendiri, Kalo dalam bahasa VB sering disebut ALways ON TOP
2. Adanya Button Next dan Prev untuk gambar lebih dari satu
3. Adanya Button CLOSE untuk menutup gambar

Untuk Membuatnya silahkan kalian ikuti tahap-tahap dibawah ini :

1. Login ke blogger kalian
2. Pilih Rancangan ---> EDIT HTML (centang expand template widget)
3. Sekarang simpan CSS berikut diatas kode  ]]></b:skin>

<!-- Start light effect by azis lamayuda--><br /> #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}<br /> #lightbox img{ width: auto; height: auto;}<br /> #lightbox a img{ border: none; }<br /> #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }<br /> #imageContainer{ padding: 10px; }<br /> #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }<br /> #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }<br /> #imageContainer>#hoverNav{ left: 0;}<br /> #hoverNav a{ outline: none;}<br /> #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }<br /> #prevLink { left: 0; float: left;}<br /> #nextLink { right: 0; float: right;}<br /> #prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_Fm7TiIAusXk/TKAzmLsMrVI/AAAAAAAAABI/Xwqjr2RAwhs/prevlabel.gif) left 15% no-repeat; }<br /> #nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_Fm7TiIAusXk/TKAzmPM14CI/AAAAAAAAABE/MQlpAGatXcg/nextlabel.gif) right 15% no-repeat; }<br /> #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }<br /> #imageData{ padding:0 10px; color: #666; }<br /> #imageData #imageDetails{ width: 70%; float: left; text-align: left; }<br /> #imageData #caption{ font-weight: bold; }<br /> #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } <br /> #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} <br /> #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }<br /> <!-- End of light effect by azis lamayuda-->

4. Kemudian simpan script berikut diatas kode </head>

<script src='http://milikazis.googlecode.com/files/prototype.js' type='text/javascript'/><br /> <script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/><br /> <script src='http://milikazis.googlecode.com/files/lightbox.js' type='text/javascript'/></code>

5. Simpan Template kalian

Nah... setelah kita berhasil menambahkan kode dalam template kita, sekarang waktunya untuk memasangkannya pada gambar. Untuk pemasangannya ada 2 cara yaitu:

1. Untuk Hanya 1 gambar silahkan tambahkan kode berikut :

rel="lightbox"

contoh :
<a href="URL GAMBAR" rel="lightbox"><img src="URL GAMBAR" /></a>

Nich ntar jadie kayak gini :



2. Untuk Gambar lebih dari 1 silahkan tambahkan kode berikut

rel="lightbox[roadtrip]"

contoh :

<a href="URL GAMBA" rel="lightbox[roadtrip]"><img src="URL GAMBAR"<a href="URL GAMBAR" rel="lightbox[roadtrip]"><img src="URL GAMBAR"</a>

Semoga berhasil ...





Sumber dari sini

Read More >>

Ayo2... Kita mulai berkreasi egend, ku ini dapet lagi tutOrial yang bisa buat blog kita tambah cakep, yaitu menambah emoticon di kotak Comment blog kita.


Ok ini cara memasangnya..Sebelum tu Download Full Template untuk langkah berjaga2.

1. Loggin => Layout => Edit HTML. Tandakan pada kotak Expand Widget Template.

2. Tambahkan kod berikut dibawah kod </body>. Di bahagian paling bawah.


<script src='http://www.geocities.com/almansuqie/emo2.js' type='text/javascript'/>

3. Lalu cari kod berikut.. 

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p> 

4. Klao dah jumpa, letakkan kod dibawah selepas kod <p class='comment-footer'> 

<b><img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/21.gif'/><br /> :))<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/39.gif'/><br /> :)]<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/28.gif'/><br /> ;))<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/5.gif'/><br /> ;;)<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/4.gif'/><br /> :D<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/3.gif'/><br /> ;)<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/10.gif'/><br /> :p<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/20.gif'/><br /> :((<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/1.gif'/><br /> :)<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/2.gif'/><br /> :(<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/8.gif'/><br /> :X<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/12.gif'/><br /> =((<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/13.gif'/><br /> :-o<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/7.gif'/><br /> :-/<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/11.gif'/><br /> :-*<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/22.gif'/><br /> :|<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/35.gif'/><br /> 8-}<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/32.gif'/><br /> ~x(<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/33.gif'/><br /> :-t<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/37.gif'/><br /> b-(<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/40.gif'/><br /> :-L<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/14.gif'/><br /> x(<br /> <img border='0' src='http://i302.photobucket.com/albums/nn113/aburifaie/smiley/24.gif'/><br /> =))<br /> </b>

5. Ok selesai, klik save template dan coba lihat hasilnya. Gimana??? bisakan????


Semoga bErhasil...

Read More >>