Membuat Sound Efek pada Blog

Kali ini kita coba untuk membuat sound efek pada blog yang sangat sederhana, jadi cara kerjanya ketika pengunjung membuka url blog/web anda secara langsung situs anda akan mengeluarkan suara, yang pastinya Sound Efek ini dapat anda sesuaikan dengan jenis situs anda sendiri tetapi ada juga yang sering membuat ke usilan dengan membuat jenis-jenis suara yang dapat mengkagetkan pengunjung situs. Alangkah baiknya suara yang anda gunakan jangan terlalu panjang karena dapat mengganggu pengunjung yang sedang menikamati artikel-artikel anda.

Sebelum ke langkah pembuatannya lebih baik dengarkan dulu demonya :

Untuk demo diatas saya menggunakan suara "amcied Logica" sebagai pemberitahuan ke pada pengunjung tentang identitas blog saya, anda juga dapat mengganti suaranya sesuai dengan identitas blog anda atau ucapan selamat datang.

Langkah Pembuatannya :

• Klik Tambah Gadget
• Pilih HTML/JavaScript
• Kemudian copy-paste script dibawah ini kedalamnya.

<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" width="1" src="http://www.swfcabin.com/swf-files/1310527623.swf" height="1" type="application/x-shockwave-flash"></embed>

• Setelah itu simpan dan lihat hasilnya.

Untuk mengganti suara yang sesuai dengan keinginan, anda dapat meng-upload di swfcabin dengan format (.swf). Cara menggantinya ubah angka format SWF yang lama dengan SWF yang baru.

Contoh :
SWF Lama : http://www.swfcabin.com/swf-files/1310527623.swf
Ubah
SWF Baru : http://www.swfcabin.com/swf-files/1252840473.swf

Selamat mencoba, semoga bermanfaat salam sukses selalu By. amcied Logica

Read More..

Membuat Kotak Like Facebook Melayang

Tutorial berikutnya bagai mana membuat kotak like facebook melayang di permukaan blog anda, mungkin anda sering mengunjungi blog atau situs-situs yang memiliki iklan melayang-layang dipermukaan blog mereka, kini kita coba mengganti iklan tersebut dengan facebook like secara konsep dan source code sama saja tetapi yang membedakannya, anda hanya tinggal mengganti objeknya saja, apa yang perlu anda pasang sesuai dengan judul maka disini saya mencoba menggunakan facebook like.

Berikut cara pembuatannya :

• Pilih Elemen Laman lalu Tambah Gadget
• Setelah itu pilih HTML/JavaScript
• Copy dan paste source code di bawah ini kedalam HTML/JavaScript

<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
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/AVvXsEgZSK1t-XFaPpNLR8ApRYZxX4-m17QQpPB58KXeqE93rdPEguyRQgm_raCxbYwjA1HBmHTVYehRo6VgQkyzeXJFjB_9T_4zyR37SgOnsdKRYEf8p5vE9Y-xt5n8GYgEgj5sc-JmYNYA4gKn/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FAmcied-Logica%2F160026084023045&amp;width=292&amp;connections=10&amp;stream=false&amp;header=false&amp;height=255" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:255px;" allowtransparency="true"></iframe>
</div>
</center>
</div>

• Ubah source code setelah <div style="background: #fff;"> sesuai keinginan anda.
• Setelah itu klik simpan dan lihat hasilnya.

Semoga bermanfaat, salam sukses selalu.

Read More..

Memasang Icon Disamping Judul Posting

Untuk kali ini kita mencoba bagaimana memperindah judul postingan pada blog kita, disini kita akan mencoba untuk memperindanya dengan cara memsang icon disamping judul posting agar terliahat lebih menarik, untuk iconnya sendiri dapat diganti atau diubah sesuai dengan selera, sebagai contoh di tutorial ini saya menggunakan icon panah sederhana, sebelum anda mencobanya alangkah baiknya lihat dulu demo tutorialnya agar tidak kecewa saat mencobanya, demo tutorialnya dapat dilihat dibawah ini.

Berikut cara membuatnya :

• Login kedalam akun blog anda.
• Pilih Rancangan dan Edit HTML
• Jangan lupa centang Expand Widget Template.
• Cari code <a expr:href='data:post.url'> kemudian letakkan code dibawah ini setelah code tadi.

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gcLcpBh8qIHWTOJDnMGF6oyDzCCQKvG8R5nhjl4DGPuMXbgMdOEtJv7TfCwJ9oR6XNE38KDg0KpdGRApa6oNvPs02Aj74Zi1WAIZRx35Dwr_2N8wwIIwDC9j217NLcZ6x7J4QHUpGLTL/'/>

• Kemudian simpan dan lihat hasilnya.

Selamat mencoba, salam sukses dan semoga bermanfaat tutorial sederhana ini.

Read More..

Mempercantik Social Bookmarks

Social Bookmarks adalah sebuah metode untuk pengguna internet yang berfungsi mengatur, menyimpan, mengelola dan mencari sumber-sumber melalui online. Deskripsi dapat ditambahkan ke bookmark tersebut dalam bentuk meta data , sehingga pengguna dapat memahami isi dari sumber. Dalam sistem bookmark sosial, pengguna menyimpan link ke halaman web yang ingin mereka ingat atau berbagi. Penandaan ini biasanya publik, dan dapat disimpan secara pribadi atau berbagi dengan orang-orang tertentu atau kelompok dan berbagi di dalam jaringan tertentu.

Langsung ke inti dari pembahasan Mempercantik Social Bookmarks, anda dapat melakukan copas script dibawah ini dan letakkan di blog anda.

• Login ke account blogger Anda
• Lanjut ke -> Elemen Halaman -> Tambah Gadget
• Pilih "HTML / Java Script"
  
• Kemudian tambahkan kode di bawah ini, jangan lupa untuk menyesuaikan link.
  

<div id="Layer3">
<ul id="menu">
<li>
<a href="#"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/delicious_48.png" alt="Delicious" width="60" height="60" title="Delicious" />
<span><br />
<b class="h2">Delicious</b><br />
Add to delicious
</span>
</a>
</li>
<li>
<a href="#"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/twitter_icons_48.png" alt="Twitter" width="60" height="60" title="Twitter" />
<span>
<br />
<b class="h2">Twitter</b><br />
Retweet the Article
</span>
</a>
</li>
<li>
<a href="#"><img src="http://www.bbcaudiobooksamerica.com/Portals/0/facebook_48.png" alt="Facebook" width="60" height="60" title="Facebook" />
<span><br />
<b class="h2">Facebook</b><br />
Add to Facebook
</span>
</a>
</li>
<li>
<a href="#"><img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/rss-icon.png" alt="RSS" width="60" height="60" title="RSS" />
<span><br />
<b class="h2">Dreamcss </b><br />
Subscribe Us
</span>
</a>
</li>
<li>
<a href="#">
<img src="http://twitter.richardebyrd.com/xhtml/assets/images/social/Google.png" alt="Google" width="60" height="60" title="Google" />
<span><br />
<b class="h2">Google</b><br />
Bookmark the Article
</span>
</a>
</li>
</ul>
</div>
<style text-type="CSS">
/*
amcied Logica
http://amcied-logica.blogspot.com */
#menu {
margin:0;
padding:0;
width: 50em;
height: 4.5em;
overflow:hidden;
}
#menu li {
display:inline;
list-style-type:none;
}
#menu li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#menu li a img {
opacity:0.7;
margin:0.5em;
border:0;
float:left;
}
#menu li a span {
display:none;
}
#menu li a:hover {
background:transparent;
}
#menu li a:hover span {
width:10em;
color:#aaa;
display:block;
cursor:pointer;
float:left;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1.25em;
border:0;
}
</style>

• Simpan template >> liat hasilnya.

Hanya untuk referensi bila ingin mengubah gambar Social Bookmarks sesuai keinginan, anda dapat mengunjungi situs Icons Pedia. Semoga bermanfaat.

Read More..

Membuat Multiple Target Link

Mungkin teman-teman sudah pasti mengenal script (Target="_Blank") yang berfungsi sebagai pembuka Tab baru, untuk kali ini kita coba membuat Multiple Target Link atau sering di sebut link yang membuka banyak tab, biasanya link ini di gunakan untuk membuka artikel-artikel yang terkait selain itu multiple target link juga dapat membantu sebagai peningkatan traffic bila teman-memiliki lebih dari satu web/blog, oke sekarang kita langsung ke intinya, untuk melihat contohnya dan script yang di gunakan lihat di bawah ini.

Klik Link ini : Multiple Target Link
Bila teman-teman tertarik berikut scriptnya :

<a href="javascript:(function() {window.open(' #');})() ; javascript:(function() {window.open (' #');}) (); javascript:(function() {window.open(' #');})() ; "> Multiple Target Link</a>

• Ganti simbol # dengan link yang teman-teman inginkan.
• Biala ingin lebih banyak tab teman-teman bisa copas script javascript:(function() {window.open(' #');})() ;
  

Penting...!!! Jangan terlalu banyak menambahkan target link, karena bisa saja terjadi Crash pada browser.
Semoga bermanfaat...!!!

Read More..

Membuat Buku Tamu/Space Iklan Melayang Di Blog

Kali ini kita coba bersama-sama bagi mana membuat buku tamu atau space iklan yang dapat melayang-layang di area blog, mungkin teman-teman sering melihanya ketika berkunjung ke situs-situ yang berjenis bisnis online, bagi teman-teman yang ingin mencoba membuatnya tetapi belum menemukan tutorialnya mungkin dengan postingan saya yang sederhana ini semoga dapat membantu teman-teman semua. Bagi yang berminat mencobanya saya sarankan untuk melihat demonya dulu agar tidak menyesal di kemudian hari :).

Berikut cara pembuatanya :

• Tambah Gadget
• Pilih HTML/JAVA SCRIPT
• Kemudian Copas Script dibawah ini.
  

<style type="text/css">
#topbar{
position:absolute;
border:;
padding: 2px;
background-color:;
width: 390px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* http://amcied-logica.blogspot.com/
***********************************************/
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>

<div id="topbar">
<a href="" onclick="closebar(); return false"><span style="float:left">[X]close</span></a>

<div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input value="OPEN" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background:BLUE; color:white; border:1px dashes yellow; -moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px; " onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;TUTUP&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;OPEN&#39;; }" type="button" /></div><div class="alt2"><div style="display: none;">

<div style="border: 2px dashes white; color:blue;background-color:NONE; text-align: justify; padding:10px; ">Pasang Buku Tamu/Iklan Disini</div>

</div></div></div></div>

• Simpan, dan lihat hasilnya.

Selamat mencoba dan semoga bermanfaat...!!!

Read More..

Cara Membuat Menu dTree

Menu dTree adalah menu yang mirip menu explore dan menu ini dapat kita tampilkan ke dalam web/blog. Teman-teman pasti sudah pada tahukan bagaimana bentuknya menu explore itu. Untuk penampilan menu dTree sendiri, daripada teman-teman ntarnya bingung di bawah ini ada demonya sebelum teman-teman ingin mencoba membuatnya bisa di lihat dulu. Oh ya...sebenarnya trik ini sudah lama sekali dibahas. dan trik ini bersumber dari Destroydrop.com, maklumlah saya juga masih belajar,, jadi harus memiliki referensi sebanyak-banyaknya. Ok, lanjuuut...

Untuk memulai memasang menu tersebut, seperti biasa login dulu ke akun blogger. Lalu klik Rancangan >> Klik Edit HTML

• cari script </head> kemudian letakkan script-script di bawah ini di atas script tadi.

<link rel="StyleSheet" href="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/dtree.css" type="text/css" />
<script type="text/javascript" src="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/createdtree.js"></script>

• Kemudian simpan template
• Selanjutnya kunjungi Elemen Laman >> Tambah gadget >> HTML/JavaScript >> copas script berikut ini.

<div class="dtree">

<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'amcied Logica');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' #.html');
d.add(4,0,'Folder 02',' #.html');
d.add(5,4,'Sub Folder 02',' #.html');
d.add(6,5,'Sub/file Sub folder 02',' #.html');
d.add(7,0,'Folder 03',' #.html');
d.add(8,7,'Sub Folder 03',' #.html');
d.add(9,8,'Sub/file Sub folder 03',' #.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' #.html');
d.add(11,0,'File[non-folder]',' #.html');
d.add(12,0,'File Single',' #.html','','','img/trash.gif');

document.write(d);

//-->
</script>

</div>

Selesai deh, gampangkan ;).. Semoga Bermanfaat...!!!

Read More..

Membuat Efek Zoom Sederhana Pada Gambar

Bagaimana cara membuat suatu effect pada gambar atau image yang kita pasang, yaitu effect yang membuat besar image atau gambar ketika mouse diletakkan tepat di atasnya atau di sorot. Banyak sekali web yang telah menjelaskan cara menggunakan aplikasi effect seperti ini, biasanya web yang menampilkan galeri gambar. disini saya akan mencoba berbagi membuat efek zoom yang sangat sederhana mungkin tidak sebagus bila menggunakan script-script JQuery. Sebelum mencobanya saya sarankan untuk melihat demonya dulu.

Langsung aja ya...!!!

• Cari script ]]></b:skin> kemudian letakkan script di bawah ini tepat di atasnya.

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
font: arial black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}

• Kemudian Simpan...!!!
• Setelah itu copy-paste script brikut, letakkan di mana saja sesuai keinginan anda.

<a class="thumbnail" href="#thumb"><img src="Url Gambar" width="100px" height="66px" border="0" /><span><img src="Url Gambar" /><br />keterangan Gambar</span></a>

Semoga Bermanfaat...!!!

Read More..

Menonaktifkan Klik Kanan Pada Blog

Klik kanan pada mouse pada browser merupakan cara terbaik yang dilakukan untuk melihat, mencopy, menyimpan file teks, image/gambar dan kode-kode tertentu pada suatu halaman website . Terlebih untuk webmaster yang senang mencari-cari bahan untuk membuat websitenya. copy paste, image dan teks lebih mudah dilakukan dengan klik kanan mouse pada halaman browser, dan simpan atau lihat. Tetapi beberapa orang mungkin menggunakannya dalam cara yang buruk atau tindakan ilegal bahkan tanpa ijin mempublikasikan ulang tanpa meninggalkan info sumber data.

Sebagai pemilik website/blog Anda mungkin tidak ingin ada beberapa konten web atau blog anda di copy tanpa ijin, karena itu anda bisa menggunakan opsi disable klik kanan atau menonaktifkan klik kanan pada blog anda untuk melindungi postingan Anda.

Untuk demonya silahkan dilihat pada link berikut :

Ikuti langkah-langkah dibawah, cara pembuatannya :

• Seperti biasa masuk dulu ke akun blogger
  
• Pilih Tata Letak
  
• Kemudian Elemen Laman
• Klik Tambah Gadget
• Pilih HTML/Javascript
• Copy kode dibawah ini lalu Paste di dalamnya HTML/Javascript.

<script language="JavaScript">
var message="Maaf Klik Kanan Di Sini Tidak Berfungsi...!!!";
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>

• Simpan
• Gampangkan...!!! hehee...

Semoga Bermanfaat...!!!

Read More..

Pasang Yahoo ! Messenger Status

Sekarang kita coba membuat ID YM dengan memasang Offline/Online Yahoo Messenger status, pengunjung dapat dimudahkan untuk melihat apakah pemilik blog sedang online atau tidak dengan Yahoo Messenger. Biasanya tutorial ini digunakan pada situs-situs e-ecommerce khusus bagian customer. Untuk memasang status Yahoo Messenger caranya sangat mudah, anda tinggal memasang saja kode dibawah ini, Jangan lupa juga menggantikan ID YM dengan identitas milik yahoo kamu (ID merupakan nama depan email yahoo anda). setelah menyalin kode dibawah ini lalu letakkan di bagian mana saja yang anda sukai.

<a href="ymsgr:sendim?muied_desain">
<img src="http://opi.yahoo.com/online?u=muied_desain&amp;m=g&amp;t=0&amp;l=us" border="0" /></a>

Icon Yahoo status online:

Untuk menganti status icon YM anda dapat mengubah angka diatas, Angka Icon yang bisa digunakan mulai dari 0-9.

Read More..