Muh David

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Membuat Footer Berefek Gradient

Jumat, 18 Mei 2012 Unknown

Nah setelah sekian lama tidak update, sekarang ane akan postingin artikel membuat Footer dengan efek gradien. Seperti gambar disamping. Sebetulnya ini merupakan perminta'an dari sobat ane tapi ini ane postingin biar bisa bermanfa'at untuk semuanya

Pada dasarnya sama dengan kebanyakan footer ang digunakan oleh para blogger mania. Hanya saja ane menggunakan backgrund yang sudah saya buat dengan efek gradient. Sehingga akan nampak seperti hilang sebelum menyentuh bagian bawah browser. Biar ga penasaran yuk coba codingnya.......

Coding 1 :

<style type="text/css">
#navbar-footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 40px;
vertical-align: bottom;
}

#navbar-footer p {

float: left;

margin: 0px;

padding-top:4px;

padding-left:40px;

vertical-align: bottom;

line-height: 1.2;

}

#navbar-footer a {

color: #333;

}

#navbar-footer {

align: center;

position: fixed;

background: url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZzWhT8X07WZJLa_OblHDwt88kGl6bRB0FR2ug6LBwMjfIq5jCo3nEbqZV7TjYApAa9WmqoUOUfc2mqM65G7FSjB8a_b5bega73T10mIpJtoBYWyo6w6niAMrcWvxCFcXuaY4M-lVPE6-S/) repeat-x left bottom;

width: 100%;

height: 100px;

left: 0px;

text-align: left;

color: #888;

font-family: Verdana;

font-size: 11px;

z-index:10000;

filter: alpha(opacity: 90);

bottom:0;

}

#iconfooter{display:scroll;position:fixed;bottom:10px;right:20px;z-index:99}

#iconfooter a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}

#iconfooterr img{border:0}

#iconfooter a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}

</style>

<div id="navbar-footer"><div class="info"></div><div id="iconfooter"><a onmouseout="tooltip.hide()" onmouseover="tooltip.show('Reload page')" href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#">

<img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1wU0gOww522iadlhziDeE2ClTmZvx5cNzXrNrfueA2B0W5xXyaSo3ZRs6cBT1RR6eBejPxUHgmLF2DLU4yZEhDKMd-DZ_HQaD-BdZPkJ_QJUJufj3HYt6pFPyom6dm8ArkXzylII44x1x/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1wU0gOww522iadlhziDeE2ClTmZvx5cNzXrNrfueA2B0W5xXyaSo3ZRs6cBT1RR6eBejPxUHgmLF2DLU4yZEhDKMd-DZ_HQaD-BdZPkJ_QJUJufj3HYt6pFPyom6dm8ArkXzylII44x1x/"></a>

<a onmouseout="tooltip.hide()" onmouseover="tooltip.show('<div class=fs_atrbks><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaa0z8FTs-PsN6x32NPLfQUCCj-Le_edQp0brpzPN7wvNdfxhk_Qvxc_4h60fdLtObM570or4Gq4dA7jZnpYxE-nX5ccmwzEX_b45Bkxuy5Mv8wCWU1wKOyOV97udhlVavhgBfST3Pvetc/"></div>')" expr:href="data:blog.homepageUrl" href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730"><img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaa0z8FTs-PsN6x32NPLfQUCCj-Le_edQp0brpzPN7wvNdfxhk_Qvxc_4h60fdLtObM570or4Gq4dA7jZnpYxE-nX5ccmwzEX_b45Bkxuy5Mv8wCWU1wKOyOV97udhlVavhgBfST3Pvetc/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaa0z8FTs-PsN6x32NPLfQUCCj-Le_edQp0brpzPN7wvNdfxhk_Qvxc_4h60fdLtObM570or4Gq4dA7jZnpYxE-nX5ccmwzEX_b45Bkxuy5Mv8wCWU1wKOyOV97udhlVavhgBfST3Pvetc/"></a>

<a onmouseout="tooltip.hide()" onmouseover="tooltip.show('Ke Atas Halaman')" href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#"><img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ThXLUZNJvrxZHK3ABAKemmcyrPGlDn_K5iKHlaXwqOT15Oj3uve9w_9JdchiHedyMjSksdHQWn_p6B2_jk7bk8Ac8bglwLrAeauW72ePMnyCertEbMdWOcsT0bFjUTqaYltxf4RTVPWV/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ThXLUZNJvrxZHK3ABAKemmcyrPGlDn_K5iKHlaXwqOT15Oj3uve9w_9JdchiHedyMjSksdHQWn_p6B2_jk7bk8Ac8bglwLrAeauW72ePMnyCertEbMdWOcsT0bFjUTqaYltxf4RTVPWV/"></a>

<a onmouseout="tooltip.hide()" onmouseover="tooltip.show('Ke bawah halaman')" href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#footbar">

<img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv9Bczj__J3mWge_k9SsI3sKv4ne6CNpOLJkmNw7Z2uPAkCfxrNwo_r3n9lR68ZxtGxryq2uJhCukY14-43tVsFoMezoxyTRooFhc3vzotJMmxTzUky9C36gACMzRHGupQCagxy0LXUaBS/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv9Bczj__J3mWge_k9SsI3sKv4ne6CNpOLJkmNw7Z2uPAkCfxrNwo_r3n9lR68ZxtGxryq2uJhCukY14-43tVsFoMezoxyTRooFhc3vzotJMmxTzUky9C36gACMzRHGupQCagxy0LXUaBS/"></a>

</div></div>

Coding 2 :

<style type="text/css">
#navbar-footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 40px;
vertical-align: bottom;
}

#navbar-footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}

#navbar-footer a {
color: #333;
}

#navbar-footer {
align: center;
position: fixed;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZzWhT8X07WZJLa_OblHDwt88kGl6bRB0FR2ug6LBwMjfIq5jCo3nEbqZV7TjYApAa9WmqoUOUfc2mqM65G7FSjB8a_b5bega73T10mIpJtoBYWyo6w6niAMrcWvxCFcXuaY4M-lVPE6-S/) repeat-x left bottom;
width: 100%;
height: 100px;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
filter: alpha(opacity: 90);
bottom:0;
}

#iconfooter{display:scroll;position:fixed;bottom:10px;right:20px;z-index:99}
#iconfooter a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
#iconfooterr img{border:0}
#iconfooter a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}
</style>

<div id="navbar-footer">
<div class="info">
</div>
<div id="iconfooter">
<a href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#">
<img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1wU0gOww522iadlhziDeE2ClTmZvx5cNzXrNrfueA2B0W5xXyaSo3ZRs6cBT1RR6eBejPxUHgmLF2DLU4yZEhDKMd-DZ_HQaD-BdZPkJ_QJUJufj3HYt6pFPyom6dm8ArkXzylII44x1x/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1wU0gOww522iadlhziDeE2ClTmZvx5cNzXrNrfueA2B0W5xXyaSo3ZRs6cBT1RR6eBejPxUHgmLF2DLU4yZEhDKMd-DZ_HQaD-BdZPkJ_QJUJufj3HYt6pFPyom6dm8ArkXzylII44x1x/"></a>
<a expr:href="data:blog.homepageUrl" href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730"><img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaa0z8FTs-PsN6x32NPLfQUCCj-Le_edQp0brpzPN7wvNdfxhk_Qvxc_4h60fdLtObM570or4Gq4dA7jZnpYxE-nX5ccmwzEX_b45Bkxuy5Mv8wCWU1wKOyOV97udhlVavhgBfST3Pvetc/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaa0z8FTs-PsN6x32NPLfQUCCj-Le_edQp0brpzPN7wvNdfxhk_Qvxc_4h60fdLtObM570or4Gq4dA7jZnpYxE-nX5ccmwzEX_b45Bkxuy5Mv8wCWU1wKOyOV97udhlVavhgBfST3Pvetc/"></a>
<a href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#"><img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ThXLUZNJvrxZHK3ABAKemmcyrPGlDn_K5iKHlaXwqOT15Oj3uve9w_9JdchiHedyMjSksdHQWn_p6B2_jk7bk8Ac8bglwLrAeauW72ePMnyCertEbMdWOcsT0bFjUTqaYltxf4RTVPWV/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ThXLUZNJvrxZHK3ABAKemmcyrPGlDn_K5iKHlaXwqOT15Oj3uve9w_9JdchiHedyMjSksdHQWn_p6B2_jk7bk8Ac8bglwLrAeauW72ePMnyCertEbMdWOcsT0bFjUTqaYltxf4RTVPWV/"></a>
<a href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#footbar">
<img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv9Bczj__J3mWge_k9SsI3sKv4ne6CNpOLJkmNw7Z2uPAkCfxrNwo_r3n9lR68ZxtGxryq2uJhCukY14-43tVsFoMezoxyTRooFhc3vzotJMmxTzUky9C36gACMzRHGupQCagxy0LXUaBS/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv9Bczj__J3mWge_k9SsI3sKv4ne6CNpOLJkmNw7Z2uPAkCfxrNwo_r3n9lR68ZxtGxryq2uJhCukY14-43tVsFoMezoxyTRooFhc3vzotJMmxTzUky9C36gACMzRHGupQCagxy0LXUaBS/"></a>
</div>
</div>

Untuk pemasangan, sobat dapat mengikuti step-stepnya......

Login ke akun bloger sobat....
Pilih Rancangan, disini sobat bisa meletekan pada dua tempat, yang pertama pada Edit Laman dan Edit HTML terserah sobat lebih mudah yang mana.
Jika sobat pilih Edit Laman, tambah gadget pilih Html/Javascript, lalu copy pastekan kode di atas kedalamya, setelah itu simpan.
Jika sobat pilih Edit Html, cari kode </body> lalu letakan script tersebut diatasnya. setelah itu klik simpan.
Klik lihat blog untuk melihat....

Gimana, sobat tinggal menyesuaikan backgroun sesuai dengan selera sobat.
Ok teruslah berkreasi dan terus bersemangat.

Source:XxX

Free Auto Text Backlink Exchange Massal

Minggu, 22 April 2012 Unknown

Backlink atau Link Exchange adalah kegiatan yang biasanya dilakukan oleh blogger dengan tujuan menjalin pertemanan dan silaturahmi antar blogger. Backlink juga di yakini oleh kebanyakan blogger sebagai trik untuk mendapatkan traffik pengunjung yang lebih banyak. Banyak juga website yang menyediakan jasa Free Backlink Exchange dengan masing-masing fiture yang berbeda. Nah kali ini saya mau share sedikit trik bagaimana membuat Auto Text Backlink Exchange Massal secara mudah gratis dan sederhana.

Step by Step :

Saya menggunakan borowser Mozilla Firefox
Install Add Ons ReloadEvery dowload di SINI. Klik saja OK saat ada popup untuk restart Firefox, Browser akan muncul kembali dengan sendirinya.
Cari website backlink exchange.
Copy kode dari web backlink (Biasanya ada di halaman paling depan web), kemudian paste pada widget HTML/Javascript pada pengguna blogspot atau letakkan pada tag <body> kemudian save.
Maka akan muncul icon backlink pada blog di mana kamu meletakkan kode web backlink. Klik icon tersebut dan akan muncul tab baru pada browser.
Buka tab baru tersebut, jika kamu berhasil maka akan muncul link blog kamu di list web backlink tersebut.
Sekarang klik kanan pada web tersebut dan pilih Reload Every, Kemudian Enable, Kemudian pilih berapa detik sekali halaman akan di reload. ( Saya menggunakan 10 detik, Sesuaikan dengan koneksi kamu ).
Selesai, sekarang biarkan page tersebut dan kamu bisa bersantai atau melakuakn aktifitas lain selagi blog kamu terus di submit oleh web backlink tersebut.

Berikut ini adalah 5 Free Text Backlink Exchage yang sudah saya coba dengan cara di atas :

Lihat keterangan di pojok kanan atas web-web backling tersebut . Remember..!!! Your url backlinks saved in our database for unlimited time. That mean, your url backlinks permanently saved in our database. Dan itu berarti bahwa link kita akan tetap berada dalam databasenya :D .

Selesai, Semoga Berguna Dan Semoga berhasil. Maaf jika ada yang kurang jelas, Silahkan gunakan kotak komentar jika ada pertanyaan. Happy Blogging !!! :D .

Tambahan : Cara ini bukan hanya bisa dilakukan untuk auto backlink, Tapi juga bisa di lakukan untuk Auto Ping. Silahkan gunakan kreatifitas kamu :D .

Source : Maaf telat

Membuat Lagu Otomatis Play di Blog

Sabtu, 21 April 2012 Unknown

http://i1195.photobucket.com/albums/aa382/rizky1721/musik.jpg

Banyak sekali blog-blog yang ketika dibuka akan terdengar alunan musik otomatis namun player musiknya tidak kelihatan dan lagu tersebut tidak bisa dimatikan ( tidak ada tombol play/stopnya ) seperti halnya postingan saya, dulunya juga blog ini pernah memasang lagu otomatis disetiap postingan yg mana ketika anda membuka postingan yang satu dengan yang lainya, maka akan berbeda pula musik yang akan terdengar.

Saya sendiri adalah salah satu orang yang sangat senang sekali mendengar musik, sampai-sampai lebih dari 5 kali blog ini mengganti tema tetap saja blog ini saya benamkan player untuk pemutar musik, hanya saja pemutar musik di blog ini sekarang tidak lagi otomatis, karena bagi saya tiada hari tanpa musik...he..he..he...

Jika anda tertarik ingin memasang musik otomatis di blog anda, silahkan ikuti panduannya.

Cara membuatnya cukup mudah anda hanya memerlukan konsentrasi dan segelas kopi he..he..he...oke langsung saja kita menuju ke TKP.

Siapkan lagu yang akan anda pasang di blog anda.

Dikarnakan script pemutar musik otomatis yang akan saya berikan disini hanya dapat memutar lagu yang berformat SWF, jadi anda memerlukan sebuah converter untuk merubah format dari Mp3 ke Swf, anda bisa mencarinya di mbah google atau anda juga bisa mencoba converter yang saya gunakan, anda bisa mendownloadnya DISINI dan Keygennya DISINI Saya menyarankan ketika anda mengconvert lagu dari mp3 ke swf buatlah ukuran lagu yang berformat swf tersebut dibawah 1Mb, hal ini bertujuan agar loading dari blog anda tidak menjadi berat.

Setelah lagu pilihan anda tesebut di convert upload lagu tersebut kedalam hostingan anda, kemudian catat link lagu tersebut. Jika anda belum mempunyai hostingan, anda bisa mencobanya DISINI.

Setelah daftar coba klik edit sidebar, dan dikiri anda ada namanya ATTACHMENTS dan upload lagu dengan model swf anda, klik kanan pada view dan copy link location

Copy/paste script dibawah ini kedalam blog anda namun terlebih dahulu rubah tulisan yang berwarna "Biru" dengan link lagu milik anda. ingat setelah tulisan swf di link mohon dihapus.

20+ Beautiful Under Construction Blogger Templates Collection

Rabu, 18 April 2012 Unknown

WpLauncher

Wp Launcher Black

WP Blueprint

Ready2Launch

Placeholder

Changing Room

Changing Room Blue

Ice Breaker

Ice Breaker Gray

Ice Breaker Green

Ice Breaker Red

BeBack

Coming Soon

Under Construction

Workin

UnderConstruct

Under Maintenance

Work Under Progress

Launchpad

Undercon

Membuat Pesan Blog Sedang Maintenance Dengan Gambar

Unknown

No_45155 | Membuat Pesan Blog Sedang Maintenance Dengan Gambar, Nah Saya berbagi artikel tutorial Membuat Pesan Blog Sedang Maintenance Dengan Gambar yang menarik sekali yaitu, membuat halaman maintenance untuk blogspot. mungkin ini bakal berguna buat teman2 blogger saat me-maintenance blog kamu. Jadi saat kamu me-maintenance blog, pengunjung tidak dapat melihat halaman utama bahkan mungkin isi keselurahan blog kamu yang mungkin sedang berantakan saat me-maintenance blog. Jadi halaman apa yang akan ditampilkan?? Ya, halaman ini..

Untuk cara membuatnya seperti ini..

silahkan login ke account blogger kamu -> pilih Rancangan -> Edit HTML -> centang "Expand Widget Template" supaya kalau tidak salah, keselurahan script akan terlihat.

kemudian cari code ini " ]]>< /b :skin> ; " (ketik tanpa tanda kutip dan spasi) supaya mudah dalam pencarian code tersebut, tekan (Ctrl+F) -> masukan code di atas dalam kotak pencarian dan enter

kalau sudah ketemu code yang dilangkah kedua, langkah selanjutnya copy code dibawah ini kemudian letakkan tepat diatas code yang kamu cari tadi pada langkah kedua tadi.

html { height: 100%; background: url(http://www.gybizonline.com/sites/all/themes/gybiz/images/site-under-maintenance.png) no-repeat center 50%; margin: 0; } body { display: none; }

Note : code yang berwarna MERAH bisa kamu ganti dengan URL image kamu sendiri.

jika sudah selesai, silahakn SAVE TEMPLATE dan untuk sementara lihat hasilnya.
jika kamu sudah selesai mainatenance blog hapuslah script yang kamu pasang tadi, maka blog akan kembali seperti semula. semoga Tutorial Blogging Membuat Pesan Blog Sedang Maintenance Dengan Gambar dapat bermanfaat :D

Cara membuat buku tamu / chatbox melayang di blog

Selasa, 17 April 2012 Unknown

Posting tengah malam saya Gan!! *hahaha
Kali ini saya mau share cara bikin buku tamu / chatbox melayang atau menempel di samping layar.
Kalo pengen liat hasilnya liat aja punya gw di samping kanan sob. :)

Langsung aja caranya sob :

1. Masuk pada menu Tata Letak / Edit Layout
2. Klik Tambah Gadget / Add a Gadget
3. Pilih HTML/Javascript
4. Copy kode berikut dan paste pada HTML/Javascript tersebut

<style type="text/css">
.rifaldhi_fixed{
position:fixed;
top:50px; /*jarak dari atas*/
right:0px;
z-index:+1000;
}
* html .rifaldhi_fixed {position:relative;}
#hidden_rifaldhi {
display:none;
border:2px solid red; /*ketebalan dan warna kotak*/
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#000000; /*warna latar*/
padding:5px 10px 0px 10px;
}
</style>
<div class="rifaldhi_fixed">
<table id="hidden_rifaldhi" cellpadding="0" cellspacing="0">
<tr><td>

<div style="text-align:center;"><a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()" title="Close/Tutup"><img style="border:0px; width:100px; height:auto;" alt="Guestbook" src="https://lh6.googleusercontent.com/_GaKwmMcf4N4/TZF_q9zp34I/AAAAAAAAEs4/sdn4x40jLsQ/DADclose.png" /></a></div>

CODE CHATBOX (SEPERTI SHOUTMIX) SOBAT

<br/>
<script type="text/javascript" src="https://sites.google.com/site/rianbayuprakasa/home/energysaving/Rian%20Bayu%20Cbox.js?"></script>
</td></tr></table></div>

<div style="z-index:+5" class="rifaldhi_fixed">
<a href="javascript:void(0)" onclick="rifaldhi_showHiderifaldhi()">
<img style="border:0px;" src="https://lh4.googleusercontent.com/-zLl0PK2efX0/TgWyhYOla2I/AAAAAAAAARo/UQ80xw59L2M/CHATTING.png" /></a>
</div>

3. Save Template

Keterangan :

top:50px; /*jarak dari atas*/ (50px adalah jarak dari atas, jika kurang pas ditambahin atau dikurangin aja sob)
CODE CHATBOX (SEPERTI SHOUTMIX) SOBAT (Ganti dengan code chatbox sobat)
https://lh4.googleusercontent.com/-zLl0PK2efX0/TgWyhYOla2I/AAAAAAAAARo/UQ80xw59L2M/CHATTING.png (Gambar bagian samping jika menurut sobat kurang bagus silahkan diganti ama url gambar sobat)
background:#000000; /*warna latar*/ (#000000 adalah warna di sekeliling chatbox, jika merasa tidak cocok sama blog sobat silahkan diganti contoh : #FFFFFF = warna putih)
solid red; (Warna border jika ingin diganti, tinggal ganti nisa pake warna (red/white/green..,) atau menggunakan code (#FFFFFF / #000000.., )

Semoga bisa membantu sob ! Jangan lupa ya untuk memberikan kesempatan bagi kami di SINI

Membuat Spoiler Pada Blog

Sabtu, 14 April 2012 Unknown

No_45155xx | Spoiler banyak digunakan untuk menyembunyikan gambar yang beresolusi tinggi sehingga dapat mempercepat loading halaman web atau blog. Untuk membuatnya adalah dengan meletakkan script dibawah ini didalam postingan.

Script spoiler adalah sbb :

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Nama Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<img arc="http://www.cyber4rt.com/logo.gif">
atau tulisan yang akan ditambahkan
</div>
</div>
</div>

nb: ganti tulisan yang berwarna merah sesuai dengan keinginan anda.

Selamat mencoba dan semoga berhasil.

Widget Social Share Berbentuk Hati (Love)

Rabu, 11 April 2012 Unknown

Alo sobat... penasarankan dengan judulnya... apakah sobat merupakan blogger dengan tipe romantis ??? atau mempunyai blog dengan tema template romantis ???. Jika ya monggo dipasang widget share ini biar makin kontras dengan tema blog sobat.

Widget ini hampir sama dengan widget sharing social lainnya, yang berbeda hanyalah pada gambar yang digunakan yaitu gambar love. Gimana kerenkan ??? hehe :):) oke sob langsung aja kita ke TKP.

Cara Pemasangan :

Login ke blog sobat...
Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
Cari kode <data:post.body/> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di bawah kode <data:post.body/> tersebut.

<div style='clear:both; '>

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='https://lh3.googleusercontent.com/-oqKXjJnAwkg/T0O8C69sP4I/AAAAAAAABGg/_3p5uzKcs34/s800/stumble.png' style='padding:0;margin:0;border:none;'/></a>

<div style='width:65px; float:left;'>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='https://lh3.googleusercontent.com/-23DAoElhxyg/T0O8BnVxT_I/AAAAAAAABGQ/G-k0EPWquRI/s800/delicious.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://lh6.googleusercontent.com/-3VAfCezaPhE/T0O8DO0OamI/AAAAAAAABGo/uNJ2IN6qS_Q/s800/technorati.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://lh5.googleusercontent.com/-38pOCbQ8WlA/T0O8FusXCjI/AAAAAAAABHA/DM4RdZtyIuc/s800/twitter.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://lh5.googleusercontent.com/-IatzK5QjURA/T0O8B6NaEaI/AAAAAAAABGU/dOBH3SOhBQ4/s800/facebook.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Yahoo' src='https://lh4.googleusercontent.com/-bKBG49pTgQc/T0O8DfKXpXI/AAAAAAAABG8/J2746cUIXac/s800/yahoo.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://reddit.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://lh3.googleusercontent.com/-fnNmoAVErxw/T0O8B8TI9kI/AAAAAAAABGY/ibOf24CKtpY/s800/reddit.png' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='external nofollow' target='_blank'><img alt='Feed' src='https://lh6.googleusercontent.com/-dYkB6GmzFI0/T0O8CkvEIuI/AAAAAAAABGc/jhP-xrjdZ9Y/s800/rss.png' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>
- Keterangan :
- Jika postingan artikel menggunakan "Read more" maka biasanya akan terdapat 2 kode <data:post.body/> untuk pemasangan script diatas paste kode script pada kode <data:post.body/> yang kedua (yang terakhir).
Klik "Save" dan lihat hasilnya...

.: Semoga Bermanfaat :.

System Kotak komentar disqus comments

Minggu, 08 April 2012 Unknown

Tutorial membuat kotak komentar blog dengan disqus comments

Dalam masalah kotak komentar blogspot memang masih belum memiliki fitur seperti diinginkan para blogger, berbeda dengan wordpress yang memiliki sistem tracksback yang memudahkan komentator untuk saling membalas langsung komentar pengunjung.

Karena blogspot belum memiliki fitur seperti wordpress, tapi kita bisa menggunakan layanan dari disqus comment yang terbukti mempermudah siapapun untuk meninggalkan komentar dan saling membalas komentar mereka termasuk pengguna-pengguna akun lain, karena disqus terhubung dengan facebook, twitter, yahoo dan lainnya.

Tertarik membuat? panduannya dibawah ini :

Pertama Login ke blogger
Tata letak>> edit HTML >> Download template lengkap
Simpan template yang kamu download di hard drive dulu. berikutnya

1. Pergi ke disqus.com/comments/
2. Klik tombol SignUp Free
3. Isi data-data yang di minta disqus dan klik continue

4. Next pilih bahasa blog kamu dan pilih akun-akun yang akan di tautkan dengan memberi tanda cek dan klik kontinue

*Ket :

Untuk kode Api key facebook bisa kamu dapatkan setelah membuat applikasi jika belum membuatnya silahkan atur aplikasi dahulu di http://www.facebook.com/developers/
Untuk twitter masukkan user ID twitter kamu

5. Pilih platform klik saja blogger

6. Pada bagian ini upload teplate yang kamu download dari blogger tadi, dan Pilih �Use disquss comment on all blog entries. Any existing comments can be imported in� Kemudian klik Upload and Continue

Jika sudah berhasil anda upload akan ada komentar �Your Blog Template has successfully patched�

7. Disitu akan ada kode template kamu yang sudah disisipi dengan kode disqus comments copy kode tersebut dan upload ke blogger caranya :

- Pergi ke tata letak >> edit HTML - hapus seluruh kode template dan paste dengan kode yang kamu copy dari disqus comment kemudian klik save template

8. sampai disini kamu sudah berhasil coba lihat blog kamu

Selamat mencoba....!!!

Cara Membuat Fans page kita melayang-layang Di blog

Senin, 02 April 2012 Unknown

1.Login ke blogger anda

2.Masuk ke elemen halaman

3.Tambahkan gadjet

4.pilih html javascript

5.masuk kan code berikut

<style type="text/css">

#topbar{

position:absolute;

padding-left:-100px;

background-color: transparancy;

width: 300px;

visibility: hidden;

z-index: 100;

}

</style>

<script type="text/javascript">

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session

var startX = 30 //set x offset of bar in pixels

var startY = 5 //set y offset of bar in pixels

var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

function get_cookie(Name) {

var search = Name + "="

var returnvalue = "";

if (document.cookie.length > 0) {

offset = document.cookie.indexOf(search)

if (offset != -1) {

offset += search.length

end = document.cookie.indexOf(";", offset);

if (end == -1) end = document.cookie.length;

returnvalue=unescape(document.cookie.substring(offset, end))

}

}

return returnvalue;

}

function closebar(){

if (persistclose)

document.cookie="remainclosed=1"

document.getElementById("topbar").style.visibility="hidden"

}

function staticbar(){

barheight=document.getElementById("topbar").offsetHeight

var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;

var d = document;

function ml(id){

var el=d.getElementById(id);

if (!persistclose || persistclose && get_cookie("remainclosed")=="")

el.style.visibility="visible"

if(d.layers)el.style=el;

el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};

el.x = startX;

if (verticalpos=="fromtop")

el.y = startY;

else{

el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;

el.y -= startY;

}

return el;

}

window.stayTopLeft=function(){

if (verticalpos=="fromtop"){

var pY = ns ? pageYOffset : iecompattest().scrollTop;

ftlObj.y += (pY + startY - ftlObj.y)/8;

}

else{

var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;

ftlObj.y += (pY - startY - ftlObj.y)/8;

}

ftlObj.sP(ftlObj.x, ftlObj.y);

setTimeout("stayTopLeft()", 10);

}

ftlObj = ml("topbar");

stayTopLeft();

}

if (window.addEventListener)

window.addEventListener("load", staticbar, false)

else if (window.attachEvent)

window.attachEvent("onload", staticbar)

else if (document.getElementById)

window.onload=staticbar

</script>

<br />

<div class="clear">

</div>

<div id="topbar">

<div style="text-align: right;">

<a  href="" onclick="closebar(); return false"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVUPFcivBXB3JSlvpewweKJRU1_1Rmpc8vCIV6fQwbkXszqSH5U4C44QdWoR8ropeyMu4-0kajN1Yuj7wHd4nuS5M4BqT2vyLvWfJ2wgyIwSXi7lHL6OKaoXbt-1LypromJNG-hRp3D_fm/s1600/close3.png"  /></a></div>

<center>

<div style="background: #fff;">

Ganti dengan Kode fans page kamu

<span  >Widget by: <a style=" font-weight:bold"  href="http://blogtrikdantips.blogspot.com/">Indra</a></span>

</div>

</center>

</div>

6.Ganti kode yang berwarna merah dengan kode fanspage kamu.

7.Kemudian Save Lalu lihat hasil nya.

COPAS GAPAPA ASAL SERTAKAN JUGA NARA SUMBER NYA

Source: http://madura-cheater.blogspot.com/

Cara Pasang Background Berubah-ubah

Sabtu, 24 Maret 2012 Unknown

oke kita lanjutkan tutorial memasang background berubah-ubah.

Langkah 1

1. Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.
2. Copy dan paste kod di bawah pada content HTML/Javascript.

3. Copy kod di bawah ini dan pastekan di dalam content html:

<div class="widget-content">

<center><blink style="color: rgb(0, 102, 0);"><span style="font-weight: bold; color: rgb(0, 153, 0);">Change Background of This Blog!</span></blink><br /><br />

<center><select onchange="document.body.style.background = this.value;this.style.background = this.value;" name="DADcbgc" title="Change Background Image" width="185" height="30">

<option value="url() repeat center center fixed" />None

<option value="url(http://cdn.indowebster.com/www42.indowebster.com/7dd2ae51f4b0cb792d3a435dc953f5cc_thumbnail.gif) repeat center center fixed" />Red Matrix

<option value="url(http://yahyarezpectors.files.wordpress.com/2011/01/sharingan_wheel_by_neronin2.gif) repeat center center fixed" />Sharingan

<option value="url(http://data0.eklablog.fr/hinata/mod_article214242.gif) repeat center center fixed" />Sharingan 2

<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeI9r0l_MTPjQ2U1bQGIKK9LA-q0lixDxciOD5l-fBlUAzHlolSFuUP3PxhRlTCOX0_IChYfZZTihRQn7vazlrQCBFn9kbctpUn7UxIWrKaRBcG2vIJSltRXywhkl0CTejzrG50g_jrxcK/s1600/death-note%25284%2529.jpg) repeat center center fixed" />Death Note 1

<option value="url(http://i469.photobucket.com/albums/rr57/dragonknight0000039/ae/death20note20L.jpg) repeat center center fixed" />L Lawliet 1

<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZF_GOqPR_I/AAAAAAAAEsY/iGS-uTIVDs8/DADbg.JPG) repeat center center fixed" />Hidden Leaf

<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC4NlmmMI/AAAAAAAAEvk/cma5mtW-beU/DADbg2.JPG) repeat center center fixed" />Rikimaru

<option value="url(http://lh6.googleusercontent.com/_GaKwmMcf4N4/TZGC24bJuCI/AAAAAAAAEvg/O1mDH3LU91w/DADbg0.jpg) repeat center center fixed" />Yu-Gi-Oh!

<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGDGbOqsnI/AAAAAAAAEwI/FWAbOOZu2go/DAD1.jpg) repeat center center fixed" />Deidara

<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC7eK9TtI/AAAAAAAAEvw/Ly5L0UA3D4s/DADcloud.gif) repeat center center fixed" />Akatsuki Cloud

<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif) repeat center center fixed" />Blue Matrix

<option value="url(http://lh3.googleusercontent.com/_GaKwmMcf4N4/TZGC9O9ZNUI/AAAAAAAAEv8/Idjb8xIrw60/DADgreenmatrix.gif) repeat center center fixed" />Green Matrix

</select></center></center>

</div><br/><center><a href=" http://ryan-rbp.blogspot.com/2012/03/cara-pasang-background-berubah-ubah.html " target="_blank">Mau Pasang Seperti Ini? klik ini</a></center>

4. klik Save.

tereng!!! sekarang blog agan uda bisa dipilih-pilih background nya, untuk judul nya boleh kosong atau boleh juga di isi, saya sarankan di simpan di bawah header halaman. jadi pengunjung bisa memilih nya.

Tengkorak Fleksibel Yang Mengikuti Kursor - Lately Skull

Jumat, 23 Maret 2012 Unknown

Satu lagi script yang saya anggap menarik. Script ini menampilkan tengkorak yang fleksibel bergerak mengikuti kursor kita. Ada beberapa option yang bisa memberikan tampilan berbeda pada sang tengkorak. Mungkin kamu masih bingung dan penasaran seperti apa bentuk nya :D . Untuk menjawab pertanyaan kamu silahkan lihat pada screenshot dan demo yang saya sediakan berikut.

Screen Shoot For Lately Skull | Tengkorak Fleksibel Yang Mengikuti Kursor

DEMO | MIRROR

DOWNLOAD | MIRROR
File : Zip | Size : 74 Kb

Bagaimana ? Apakah screenshot beserta demo yang saya sediakan di atas sudah menjawab pertanyaan kamu :D. Jika tertarik silahkan download script nya dan lakukan explorasi sesuai keinginan kamu :D.

Ok, sampai jumpa di postingan berikut nya ;)

Cara Membuat Sudut Blog Terlipat Seperti Menggulung

Rabu, 21 Maret 2012 Unknown

Assalamualaikum...!! Sobat blogger yang lagi menemukan post ini, selamat datang dan salam kompak aja. Kali ini saya akan membahas tentang "Cara Membuat Sudut Blog Terlipat Seperti Menggulung", mungkin sobat pernah menemukan blog seperti yang saya ceritakan. Jika sobat tertarik dan ingin membuat blog sobat seperti itu, berikut caranya...!!!

1. Sediakan Url Gambar untuk dijadikan background
2. Sediakan Url Gambar untuk dijadikan logo/icon
3. Cupy code javascript berikut berikut

var jaaspeel = new Object();

jaaspeel.ad_url = escape(tujuan);

jaaspeel.small_path = 'http://www.digie.co.id/peel/small.swf';

jaaspeel.small_image = escape('http://exlorer-amran91.googlecode.com/files/anak-indonezia.png');

jaaspeel.small_width = '100';

jaaspeel.small_height = '100';

jaaspeel.small_params = 'ico=' + jaaspeel.small_image;

jaaspeel.big_path = 'http://www.digie.co.id/peel/large.swf';

jaaspeel.big_image = escape('http://exlorer-amran91.googlecode.com/files/feelhtc.png');

jaaspeel.big_width = '650';

jaaspeel.big_height = '650';

jaaspeel.big_params = 'big=' + jaaspeel.big_image + '&ad_url=' + jaaspeel.ad_url;

function sizeup987(){

document.getElementById('jcornerBig').style.top = '0px';

document.getElementById('jcornerSmall').style.top = '-1000px';

}

function sizedown987(){

document.getElementById("jcornerSmall").style.top = "0px";

document.getElementById("jcornerBig").style.top = "-1000px";

}

jaaspeel.putObjects = function () {

// <jcornerSmall>

document.write('<div id="jcornerSmall" style="position:absolute;width:'+ jaaspeel.small_width +'px;height:'+ jaaspeel.small_height +'px;z-index:9999;right:0px;top:0px;">');

// object

document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');

document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');

document.write(' id="jcornerSmallObject" width="'+jaaspeel.small_width+'" height="'+jaaspeel.small_height+'">');

// object params

document.write(' <param name="allowScriptAccess" value="always"/> ');

document.write(' <param name="movie" value="'+ jaaspeel.small_path +'?'+ jaaspeel.small_params +'"/>');

document.write(' <param name="wmode" value="transparent" />');

document.write(' <param name="quality" value="high" /> ');

document.write(' <param name="FlashVars" value="'+jaaspeel.small_params+'"/>');

// embed

document.write('<embed src="'+ jaaspeel.small_path + '?' + jaaspeel.small_params +'" name="jcornerSmallObject" wmode="transparent" quality="high" width="'+ jaaspeel.small_width +'" height="'+ jaaspeel.small_height +'" flashvars="'+ jaaspeel.small_params +'" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');

document.write('</object></div>');

document.write('</script>');

// </jcornerSmall>

// <jcornerBig>

document.write('<div id="jcornerBig" style="position:absolute;width:'+ jaaspeel.big_width +'px;height:'+ jaaspeel.big_height +'px;z-index:9999;right:0px;top:0px;">');

// object

document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');

document.write(' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"');

document.write(' id="jcornerBigObject" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'">');

// object params

document.write(' <param name="allowScriptAccess" value="always"/> ');

document.write(' <param name="movie" value="'+ jaaspeel.big_path +'?'+ jaaspeel.big_params +'"/>');

document.write(' <param name="wmode" value="transparent"/>');

document.write(' <param name="quality" value="high" /> ');

document.write(' <param name="FlashVars" value="'+ jaaspeel.big_params +'"/>');

// embed

document.write('<embed src="'+ jaaspeel.big_path + '?' + jaaspeel.big_params +'" id="jcornerBigEmbed" name="jcornerBigObject" wmode="transparent" quality="high" width="'+ jaaspeel.big_width +'" height="'+ jaaspeel.big_height +'" flashvars="'+ jaaspeel.big_params +'" swliveconnect="true" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');

document.write('</object></div>');

// </jcornerBig>

setTimeout('document.getElementById("jcornerBig").style.top = "-1000px";',1000);

}

jaaspeel.putObjects();

4. Pastekan pada Notepad kemudian ganti url warna biru dengan url logo yang telah disediakan tadi dan ganti url yang berwarna hijau dengan url background yang telah di sediakan tadi
5. Simpan dengan Extensi *.js (namafile.js)
6. Upload file yang telah di tempat hosting atau di google code (Untuk Caranya klik disini) kalau belum punya akun bisa daftar disini
7. Setelah upload ambil urlya
contohnya saya upload di google code maka urlnya seperti ini : http://exlorer-amran91.googlecode.com/files/bergulung91.js

8. Copy lagi script berikut ini

9. Ganti yang text yang berwarna biru dengan url tujuan kemudian ganti text yang berwarna hijau dengan url file yang telah di upload tadi maka hasilnya kurang lebih akan seperti ini

10. Sekarang buka akun bloggger sobat kemudian masu Rancangan ==> Edit HTML
dan pastekan pas di bawah kode <head> kemudian simpan.

Demikianlah Tutorial kali ini Semoga bermanfaat untuk Sobat...!!!