Create Fixed Widget Sponsor

Langsung aja deh Sob Berikut tips membuat widget iklan melayang,Udah lihat demonya kan? tadi waktu buka postingan ini. Widget Iklan melayang ini dilengkapi dengan tombol Close, dan akan menghilang dengan sekali klik. Bagi  sobat yang berminat berikut ini kodenya.

Kodenya

<style type="text/css"> * html #iklan{position:relative;} #iklan{position:fixed;right:23%;top:0;z-index:+1000; background:#ddd ;width:50%;height:96%;padding:5px;border:8px solid #ddd;-moz-box-shadow: 0 0 50px #000,inset 0 0 50px #000;-webkit-box-shadow: 0 0 50px #000,inset 0 0 50px #000;box-shadow: 0 0 50px #000,inset 0 0 50px #000;} </style><script type='text/javascript'> function showHideiklan(){ var iklan = document.getElementById("iklan"); var w = iklan.offsetWidth; iklan.opened ? moveiklan(0, 30-w) : moveiklan(20-w, 0); iklan.opened = !iklan.opened; } function moveiklan(x0, xf){ var iklan = document.getElementById("iklan"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir-100; iklan.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveiklan("+x+", "+xf+")", 10);} } </script> <div id='iklan'> <div style='-background:#ddd ;height:90%;padding:5px;overflow:auto;'> <center> KODE IKLAN LOE LETAKKAN DISINI SOB </center> </div> <center> <a href="javascript:void(0);" onclick="showHideiklan()"><input class="close" style="-moz-box-shadow: 0 0 50px #000,inset 0 0 50px #000; -webkit-box-shadow: 0 0 50px #000,inset 0 0 50px #000; background: #A4A4A4; border: 4px solid #ddd; box-shadow: 0 0 50px #000,inset 0 0 50px #000; color: white; font: 16px Verdana; padding: 5px; width: auto;" type="button" value="Click Here to Close" /></a> <script type="text/javascript"> var iklan = document.getElementById("iklan"); iklan.style.center = (30-iklan.offsetWidth).toString() + "px"; </script></center> </div>

Pemasanganya :

1. Login ke Blog sobat, Masuk Elemen Laman
2. Klik tambah gadget pilih HTML/javascript
3. Pastekan Kode diatas,Ganti tulisan berwarna biru dengan kode iklan sobat.
4. Lalu simpan

KODE IKLAN SOBAT LETAKKAN DISINI

CSS Red Menu Horisontal

Demo Red Menu Horisontal

• Home
• Menu 1
• Menu 2
• Menu 3
• Menu 4
• Menu 5

Kode CSSnya

<style type="text/css"> #binkbenkPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px;z-index:999; } #binkbenkHolder {position:relative; float:left; left:50%;} #binkbenk, #binkbenk ul {padding:0; margin:0; list-style:none; font: 15px Comic Sans MS, sans-serif; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); position:relative; z-index:100;} #binkbenk {height:45px; float:left; padding:0 ;-moz-border-radius: 10px 10px 10px 10px; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); border: 4px inset red; position:relative; right:50%;} #binkbenk ul {position:absolute; left:-9999px; top:-9999px;} #binkbenk table {border-collapse:collapse; margin:-1px; padding:0; width:0; height:0;} #binkbenk li {float:left;} #binkbenk li a {display:block; float:left; color:#fff; height:30px; padding:0px 10px 0px 0px; line-height:30px; text-decoration:none; -moz-border-radius: 10px 10px 10px 10px; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d); background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); border: 4px inset white; } #binkbenk li a.sub {-moz-border-radius: 10px 10px 10px 10px; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d); background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); border: 3px inset white; } #binkbenk li a b {display:block; float:left; height:40px; padding:0px 0px 0px 10px; cursor:pointer;} #binkbenk li:hover {position:relative; z-index:100;} #binkbenk a:hover {position:relative; z-index:100; color:#fc0;} #binkbenk a.sub:hover {background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d); background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); } #binkbenk li:hover > a {color:#fc0;} #binkbenk li:hover > a.sub {background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d); background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); } #binkbenk :hover ul {left:0; top:40px; z-index:300; width:130px; padding-top:4px; background:url(trans.gif);} #binkbenk :hover ul li a {height:25px; width:120px; padding:0 0 0 10px; line-height:25px; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d); background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;} #binkbenk a:hover { background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); transform:rotate(10deg); -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg); font-size: 18px;} </style> <div id="binkbenkPositioner"> <div id="binkbenkHolder"> <ul id="binkbenk"> <li><a href="http://URL BLOG SOBATl"><b>Home</b></a></li> <li><a href="http://URL BLOG SOBAT"><b>Menu 1</b></a></li> <li><a href="http://URL BLOG SOBAT"><b>Menu 2</b></a></li> <li><a href="http://URL BLOG SOBAT"><b>Menu 3</b></a></li> <li><a href="http://URL BLOG SOBAT"><b>Menu 4</b></a></li> <li><a href="http://URL BLOG SOBAT"><b>Menu 5</b></a></li> </ul> </div> </div>

Copy Kode CSS diatas dan Letakan Dalam Gadget HTML/Javascript

CSS3 Gradient Menu Buttons

Tombol-tombol Menu Gradient ini terlihat menarik terlihat seperti tombol yang terbuat dari gambar, Namun sebenarnya hanya menggunakan kode CSS3. Untuk Lebih jelasnya Lihat Demonya dibawah dan Bagi Sobat Yang mau memasangnya Silahkan Pilih ada beberapa pilihan Warna 
Cara pemasanganya sebagai berikut

1. Masuk ke Blog Sobat
2. Klik Rancangan pilih tambah Gadget HTML/Javascript
3. Copy kode CSS nya Rubah nama menunya dan Alamat URLnya
4. Biar Tambah Cantik Utak-atik Pada Font teksnya juga Kode Warnanya
5. Untuk membuat miring kekiri saat dicursor Rubah kode (5deg) menjadi (-5deg)
6. Lalu simpan dan letakan dibagian atas Blog Sobat atau diatas genteng rumah Sobat hehehe...bercanda Sob   

• Home
• Game
• Facebook
• Tips
• Chat Box
• Forums

Kode CSS nya

<style type="text/css"> /* ======================= Salam hangat & happy Blogging ======================= */ .gradientbuttons ul{ padding: 3px 0; margin-left: 0; margin-top: 1px; margin-bottom: 0; font: bold 13px Verdana; list-style-type: none; text-align: center; /*set to left, center, or right to align the menu as desired*/ } .gradientbuttons li{ display: inline; margin: 0; } .gradientbuttons li a{ text-decoration: none; padding: 5px 7px; margin-right: 5px; border: 1px solid #778; color: white; border:1px solid gray; background: #3282c2; -moz-border-radius: 8px; /*w3c border radius*/ box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */ -moz-border-radius: 8px; /* mozilla border radius */ -moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */ background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */ -webkit-border-radius: 8px; /* webkit border radius */ -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */ background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */ } .gradientbuttons li a:hover{ color: lightyellow; } .gradientbuttons ul a:hover { background: #FF0000; transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); font-size: 18px;font-family: Viner Hand ITC; }</style> <div class="gradientbuttons"> <ul> <li><a href="http://blogsobat.com/">Home</a></li> <li><a href="http://blogsobat.com/">Game</a></li> <li><a href="http://blogsobat.com/">Facebook</a></li> <li><a href="http://blogsobat.com/">Tips</a></li> <li><a href="http://blogsobat.com/">Chat Box</a></li> <li><a href="http://blogsobat.com/">Forums</a></li> </ul> </div>

• Home
• Game
• Facebook
• Tips
• Chat Box
• Forums

Kode CSS nya

<style type="text/css"> /* ====================== Salam hangat & happy Blogging =======================*/ .gradientbuttons ul{ padding: 3px 0; margin-left: 0; margin-top: 1px; margin-bottom: 0; font: bold 13px Verdana; list-style-type: none; text-align: center; /*set to left, center, or right to align the menu as desired*/ } .gradientbuttons li{ display: inline; margin: 0; } .redtheme li a{ font-size:18px; background: darkred; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d); background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); } .gradientbuttons ul a:hover { background: #FF0000; transform:rotate(5deg); -moz-transform:rotate(5deg); -webkit-transform:rotate(5deg); -o-transform:rotate(5deg); font-size: 18px;font-family: Viner Hand ITC; }</style> <div class="gradientbuttons orangetheme redtheme"> <ul> <li><a href="http://blogsobat.com/">Home</a></li> <li><a href="http://blogsobat.com/">Game</a></li> <li><a href="http://blogsobat.com/">Facebook</a></li> <li><a href="http://blogsobat.com/">Tips</a></li> <li><a href="http://blogsobat.com/">Chat Box</a></li> <li><a href="http://blogsobat.com/">Forums</a></li> </ul> </div>

CSS Menu Pull Up Multi Sub Menu

Masih Tentang CSS yang saya share kali ini Sobat..Coba arahkan cursor Sobat pada demo dibawah.Nah itulah yang saya Share kali ini Cara membuat CSS Menu Pull Up Multi Sub Menu,Untuk Menu ini kelihatan Begitu atraktif dan menarik Dengan menu utama yang memuat beberapa sub-sub menu diatasnya .Bagi Sobat yang berminat untuk mencoba yup.. Langsung aja Kita Menuju TKP.

Berikut Langkah-langkahnya Sobat:

1. Login ke Blog Sobat
2. Masuk Rancangan Pilih tambah gadget HTML/javascript
3. Copy Kode dibawah ini
4. Rubah nama menu-menunya dan Alamt URLnya
5. Untuk membuat posisinya pas sesuaikan kode berwarna merah margin: 0 20px ;
6. Dan Biar lebih menarik Utak-atik pada kode-kode lainnya Sobat
7. Lalu Simpan dan letakkan dibagian Bawah/footter Blog Sobat Atau bisa juga letakkan dibawah kolong tempat tidur... he..he..he..he...becanda Sob  

 Demo CSS Menu Pull Up

• Home
• Menu
  • Cameras
    • Nikon
    • Minolta
    • Pentax
  • Lenses
    • Wide Angle
    • Standard
    • Telephoto
    • Zoom
      • standart
      • large
      • x-large
    • Mirror
    • Non standard
      • Bayonet mount
      • Screw mount
  • Flash Guns
  • Tripods & Monopods
  • Filters
• Services
  • Printing
  • Photo Framing
  • Retouching & Renovation
  • Archiving
• Contacts
  • Support
  • Sales
    • USA
    • Canadian
    • South American
    • European
      • British
        • London
        • Liverpool
        • Glasgow
        • Bristol
          • Redland
          • Hanham
          • Eastville
        • Cardiff
        • Belfast
      • French
      • German
      • Spanish
    • Australian
    • Asian
  • Buying
  • Photographers
  • Stockist
  • General
• Tips n Triks
  • Merayu Cewek
  • Meperkosa Cewek
  • Bercinta
  • Playboy
• Chat Box

Selamat Mencoba Semoga Bermanfaat

<style type="text/css"> /* ================================ Originals Version: http://www.stunicholls.com./ Salam Hangat & Happy Blogging Don't Remove this Code ================================ */ #binkbenks {padding:0; margin:0 ; list-style:none; height:36px;-moz-border-radius: 5px 5px 20px 20px ;;-webkit-border-radius: 5px 5px 20px 20px ;-o-border-radius: 5px 5px 20px 20px ; border:4px inset red; background: black; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); position:relative; z-index:500; font-family:Comic Sans MS;} #binkbenks li.top {display:block; float:left; padding-top:5px;} #binkbenks li a.top_link {display:block; float:left; height:37px; line-height:24px; color:#ddd; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;} #binkbenks li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;} #binkbenks li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:none;} #binkbenks li a.top_link:hover {color:none; background: url(blank_over.gif) no-repeat;} #binkbenks li a.top_link:hover span {background:none; line-height:29px;} #binkbenks li a.top_link:hover span.down {background:none; line-height:20px;} #binkbenks li:hover > a.top_link {color: grey;} #binkbenks li:hover > a.top_link span {background:none; line-height:24px;} #binkbenks li:hover > a.top_link span.down {background:none) ; line-height:29px;} #binkbenks li:hover {position:relative; -moz-border-radius: 5px 5px 10px 10px;-webkit-border-radius: 5px 5px 10px 10px; ;-o-border-radius: 5px 5px 10px 10px; border:3px inset #fff;background: darkred; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d); background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); } #binkbenks ul, #binkbenks li:hover ul ul, #binkbenks li:hover ul li:hover ul ul, #binkbenks li:hover ul li:hover ul li:hover ul ul, #binkbenks li:hover ul li:hover ul li:hover ul li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:5px; padding:0; list-style:none;} #binkbenks li:hover ul {left:0; bottom:40px; top:auto; padding:2px;-moz-border-radius: 5px;-webkit-border-radius: 5px ;-o-border-radius: 5px; border:2px inset red;background:background: black; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); ; white-space:nowrap; width:auto; height:auto; z-index:300;} * html #binkbenks li:hover ul {width:0;} #binkbenks li:hover ul li {display:block; position:relative; float:left; font-weight:normal; clear:left;} #binkbenks li:hover ul li a {display:block; font-size:12px; height:20px; line-height:20px; padding:0 5px; color:#fff; text-decoration:none;} #binkbenks li ul li a.fly {color:#fff; font-weight:bold;} #binkbenks li:hover ul li:hover.fly > a.fly {color:#fff;} #binkbenks li:hover ul li:hover ul, #binkbenks li:hover ul li:hover ul li:hover ul, #binkbenks li:hover ul li:hover ul li:hover ul li:hover ul, #binkbenks li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {left:-5px; margin-left:100%; bottom:-4px; top:auto; padding:3px;-moz-border-radius: 5px ;-webkit-border-radius: 5px ;-o-border-radius: 5px ; border:3px inset red; white-space:nowrap; width:auto; z-index:500; height:auto;} </style> <ul id="binkbenks"> <li class="top"><a href="URL BLOG SOBAT" class="top_link"><span>Home</span></a></li> <li class="top"><a id="menu" href="URL BLOG SOBAT" class="top_link"><span class="down">Menu</span></a> <ul class="sub"> <li class="fly"><a href="URL BLOG SOBAT" class="fly">Cameras</a> <ul> <li><a href="URL BLOG SOBAT">Nikon</a></li> <li><a href="URL BLOG SOBAT">Minolta</a></li> <li><a href="URL BLOG SOBAT">Pentax</a></li> </ul> </li> <li class="fly"><a href="URL BLOG SOBAT" class="fly">Lenses</a> <ul> <li><a href="URL BLOG SOBAT">Wide Angle</a></li> <li><a href="URL BLOG SOBAT">Standard</a></li> <li><a href="URL BLOG SOBAT">Telephoto</a></li> <li class="fly"><a href="URL BLOG SOBAT" class="fly">Zoom</a> <ul> <li><a href="URL BLOG SOBAT">standart</a></li> <li><a href="URL BLOG SOBAT">large</a></li> <li><a href="URL BLOG SOBAT">x-large</a></li> </ul> </li> <li><a href="URL BLOG SOBAT">Mirror</a></li> <li class="fly"><a href="URL BLOG SOBAT" class="fly">Non standard</a> <ul> <li><a href="URL BLOG SOBAT">Bayonet mount</a></li> <li><a href="URL BLOG SOBAT">Screw mount</a></li> </ul> </li> </ul> </li> <li><a href="URL BLOG SOBAT">Flash Guns</a></li> <li><a href="URL BLOG SOBAT">Tripods & Monopods</a></li> <li><a href="URL BLOG SOBAT">Filters</a></li> </ul> </li> <li class="top"><a id="services" href="URL BLOG SOBAT" class="top_link"><span class="down">Services</span></a> <ul class="sub"> <li><a href="URL BLOG SOBAT">Printing</a></li> <li><a href="URL BLOG SOBAT">Photo Framing</a></li> <li><a href="URL BLOG SOBAT">Retouching & Renovation</a></li> <li><a href="URL BLOG SOBAT">Archiving</a></li> </ul> </li> <li class="top"><a id="contacts" href="URL BLOG SOBAT" class="top_link"><span class="down">Contacts</span></a> <ul class="sub"> <li><a href=""url blog sobat>Support</a></li> <li class="fly"><a href="URL BLOG SOBAT" class="fly">Sales</a> <ul> <li><a href="URL BLOG SOBAT">USA</a></li> <li><a href="URL BLOG SOBAT">Canadian</a></li> <li><a href="URL BLOG SOBAT">South American</a></li> <li class="fly"><a href="URL BLOG SOBAT" class="fly">European</a> <ul> <li class="fly"><a href="URL BLOG SOBAT" class="fly">British</a> <ul> <li><a href="URL BLOG SOBAT">London</a></li> <li><a href="URL BLOG SOBAT">Liverpool</a></li> <li><a href="URL BLOG SOBAT">Glasgow</a></li> <li class="fly"><a href="URL BLOG SOBAT" class="fly">Bristol</a> <ul> <li><a href="URL BLOG SOBAT">Redland</a></li> <li><a href="URL BLOG SOBAT">Hanham</a></li> <li><a href="URL BLOG SOBAT">Eastville</a></li> </ul> </li> <li><a href="URL BLOG SOBAT">Cardiff</a></li> <li><a href="URL BLOG SOBAT">Belfast</a></li> </ul> </li> <li><a href=""url blog sobat>French</a></li> <li><a href="URL BLOG SOBAT">German</a></li> <li><a href="URL BLOG SOBAT">Spanish</a></li> </ul> </li> <li><a href="URL BLOG SOBAT">Australian</a></li> <li><a href="URL BLOG SOBAT">Asian</a></li> </ul> </li> <li><a href="URL BLOG SOBAT">Buying</a></li> <li><a href="URL BLOG SOBAT">Photographers</a></li> <li><a href="URL BLOG SOBAT">Stockist</a></li> <li><a href="URL BLOG SOBAT">General</a></li> </ul> </li> <li class="top"><a id="shop" href="URL BLOG SOBAT" class="top_link"><span class="down">Tips n Triks</span></a> <ul class="sub"> <li><a href="URL BLOG SOBAT">Merayu Cewek</a></li> <li><a href="URL BLOG SOBAT">Meperkosa Cewek</a></li> <li><a href="URL BLOG SOBAT">Bercinta</a></li> <li><a href="URL BLOG SOBAT">Playboy</a></li> </ul> </li> <li class="top"><a id="chatbox" href="URL BLOG SOBAT" class="top_link"><span>Chat Box</span></a></li> </ul>

Auto Image Zoom With CSS Ease-Out

Demonya

Langsung aja Sobat berikut Langkah2 nya ;

COPAS CODE NYA

.post-body img { padding: 8px;-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition:all 2s ease-out;-moz-transition:all 2s ease-out;-o-transition:all 2s ;opacity:0.4;margin:0 10px 5px 0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border:2px inset #424242;box-shadow:0px 0px 30px #fff;-webkit-box-shadow:0px 0px 30px #fff;-moz-box-shadow:0px 0px 30px #fff; } .post-body img:hover{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border:2px dotted #FF0000;box-shadow:0px 0px 30px #F80505;-webkit-box-shadow:0px 0px 30px #F80505;-moz-box-shadow:0px 0px 30px #F80505;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);opacity:1; }

Berikut Cara pemasangannya : Login ke Blog Sobat Pilih Rancangan Lalu Klik Edit HTML Cari kode .post-body img Lalu ganti dengan Kode diatas Bila kode .post-body img tidak ada, Letakkan saja Kodenya, diatas kode ]]></b:skin>

Rubah Variabel2nya dan kode2 warnanya biar lebih menarik Lalu Simpan

Cara Membuat Share Button Yang Bisa di Putar

Masuk ke dalam Login Blog Sobat
Pilih TataLetak > Layout > HTML / Java Script

Masukan Code Widget Berikut Ini ;

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href=" http://feeds.feedburner.com/PhotographyGalleryEphphathaIndonesia " target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSsDPI_7_erNI1ge1hWLukHVy53I01pZysBm6hgbXb97BbBqC6kTWThMQ82qJjDrSzhNJ_unRyKKK4PEdALM5CFUGzzEGU8tPMUGQ43EjPk3nwnGBPX7KTXsQkH-qeq8cqXTFJEtov8_3P/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="http://feeds.feedburner.com/PhotographyGalleryEphphathaIndonesia" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilFKxQt69rBoagQUEZOux1bqkL26RUJvCVtQ_iww_SAQg0RYP_l16Tc3Saz2iRWzFLbRkpHmos5dKExTM-tFoUyGZ3EDDQ4b73ZDfEF9AdUA0Gy11U0A7RIUtP2Zs9J8xvHwNhY36zZbWG/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="https://www.facebook.com/franky.raymond.jacob" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYWmV89Kzg91pMwanKOAuwV3tdcQvzMYArz4R9rxxSbH-4RWHkMomIn1blDxdwyj2JDVOAByO8lcKVPgW9GEb4P2kMxQE7rJhYQxjzTrPBVzMvNnD0pbLEaaZB7m-gpK_pHImBbNS8AYDm/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="http://twitter.com/RaYMonD_QT " target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9a1dHUJT-WdJaeIdhIm7L7Zrytz0GQc6kF4BRJZYtwSidcQM9mMQkSBxpgrrCiPG00zNG0VXXoasYGD-vTTrrGdHxFhpZ6N91xjg_Tnr0bdNjOlczUPrSJK0yanaFJ4JxCgofFg3FlSXc/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/113739160431780404177 " target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLGeYKUjjJXtbs93juBvIvD79cUnEcZuWsE87L-BaKKrJjzk47kdcq9iHRkY2LAyqzvyt4rqEyDn477YhgdoU1cMkXOZ1bdFo_NUYpNluwqFJf3l4XXw8n8_0tRiuCAlim2CbeBFOralGX/s1600/GOOGLE-PLUS-48x48.png"/></a></div></center>

KETERANGAN ;

Ubah Rss Feed : http://feeds.feedburner.com/PhotographyGalleryEphphathaIndonesia 

Ubah ID FB : https://www.facebook.com/franky.raymond.jacob

Ubah ID Twitter : http://twitter.com/RaYMonD_QT

Ubah ID Google+ : https://plus.google.com/113739160431780404177

 Save Widget Dan Lihat Hasil Nya ^_^

DEMO SHARE BUTTON

Cara Memberi Lagu di Blog Dengan Format SWF

Mhhh. Penasaran kan kenapa disetiap blog yang kita kunjungi ada music yang berputar sendiri. Padahal kita cari dimana asal music itu malah tidak ada. Mauu trik-y seperti apa ?? Ayoo kita next az ke TKP.

Langkah-langkahnya :
1. Pilih lagu kesukaan kalian dalam bentuk format Mp3 dan convert menjadi format Swf. Musik tidak akan berputar di blog secara otomatis jika format musik yang digunakan adalah dalam bentuk format mp3.
Download aplikasi convert mp3 to swf portablenya disini

2. Jika sudah di download solahkan jalankan aplikasi tersebut dan convert musiknya. Jangan lupa untuk mengupload music yang tadi kita convert menjadi swf ke 4shared atau link apa saja yang bisa menyimpan data atau musik kita.  Klik disini jika kalian belum join di 4shared. 

3. Setelah terdaftra upload atau unggah musik format .swf nya, nanti akan muncul notifikasi dan kamu tinggal copas saja link alamat musiknya, kemudian edit kode tersebut, misalnya kode yang kamu dapat yaitu :

http://www.4shared.com/document/cHgCV_kz/Aviation_You_Were_My_Everyth.html
Note : Ganti "document" dengan "embed". dan "html" dengan "swf".
Sehingga hasilnya akan tampak seperti di bawah ini :
http://www.4shared.com/embed/cHgCV_kz/Aviation_You_Were_My_Everyth.swf

4. Setelah mendapatkan URL yang sudah di edit di atas, copas kedalam kode dibawah ini gantikan kode yang berwarna biru dengan url yang tadi jamu dapat dan rubah.

<embed
scr="http://www.4shared.com/embed/cHgCV_kz/Aviation_You_Were_My_Everyth.swf"
autostart="true" loop="true" width="0" heigh="0"/><embed>

Kemudian masukan kedalam blog yang sudah kalian punya, Langkah-langkahnya :
1. Masuk ke Rancangan baru dan pilih HTML
2. Copas link yang sudah kalian rubah tadi ke box rancangan HTML

<embed
scr="http://www.4shared.com/embed/cHgCV_kz/Aviation_You_Were_My_Everyth.swf"
autostart="true" loop="true" width="0" heigh="0"/><embed>

3. Looping boleh true untuk ulang lagu saat selesai dan harap autostart di true saja, agar musiknya langsung play mode.
4. Save dan lakukan peninjauan untuk melihat hasilnya.

Note : Bila lagu tidak muncul mungkin flash bermasalah atau coba main-mainkan width dan heighnya, misalnya angkanya di rubah menjadi 3 dll. Bila masih tidak bisa mungkin bisa restart broowsernya atau restart komputer kalian.

Selesai..
Silahkan selamat mencoba ..... ^_^

Cara Membuat ChatBox Keren

COPY SOURCE CODE DI BAWAH INI

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzODAxMzAzOTc*NTkmcHQ9MTM4MDEzMDU*MjE2MiZwPTUzMTUxJmQ9Jmc9MiZvPTE4NzQyZDU2NmQ2YzQ3MWJhMDk2/Y2RmMzE1Y2EwNmEyJm9mPTA=.gif" /><embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000" width="540" height="405" name="chat" FlashVars="id=201194552" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://xat.com/web_gear/chat/go_large.php?id=201194552">Go Large!</a></small><br>

DEMO CHATBOX

Get your own Chat Box! Go Large!

Cara Membuat Like Fanpage Beda Dari Yang Lain Nya

Berikut Cara Membuat Like Fanpage Beda Dari Yang Lain Nya

1. Pertama - tama yang harus anda lakukan adalah login ke account blogger
2. Kemudian masuk ke Dashboard lalu pergi ke Layout/Tata letak
3. Klik Add a Gadget => HTML/JavaScript.

COPY CODE HERE

<!-- FB melayang tombol close --!> <style type='text/css'> #kotak-facebook { position:fixed !important; position:absolute; /* IE6 */ bottom:-1000px; right:10%; margin:0px 0px 0px -182px; width:300px; height:auto; padding:16px; -webkit-box-shadow: 0px 0px 7px #00FF00; -moz-box-shadow: 0px 0px 7px #00FF00; box-shadow: 0px 0px 7px #00FF00; background-color:#000000; font:normal 1em Cambria,Georgia,Serif; color:#00FF00; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomright: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px;} #kotak-facebook a.close { position:absolute; top:-10px; right:-10px; background:#333; font:bold 16px Arial,Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#00FF00; border:2px solid #00FF00; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; cursor:pointer; } </style> <script type='text/javascript'> $(window).bind("load", function() { // animasikan nilai top saat halaman telah selesai dimuat $('#kotak-facebook').animate({bottom:"50px"}, 1000); // hilangkan kotak pesan saat tombol (x) di klik $('a.close').click(function() { $(this).parent().fadeOut(); return false; }); }); </script> <div id='kotak-facebook'> <center><a href="http://archive-doc.blogspot.com/" target="_blank"><img src="http://i838.photobucket.com/albums/zz302/raymond_085/d_group_zpsdb0d0b12.gif" /></a></center> <center>LIKE FANPAGE DIBAWAH INI UNTUK MENDAPATKAN ARTIKEL TERBARU VIA FACEBOOK</center> <br/> <!-- Mulai --!> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fsyber.hacker.net&amp;width=290&amp;height=258&amp;colorscheme=dark&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=223426824353309" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:258px;" allowtransparency="true"></iframe><!-- Selesai --!> <a class='close' href='#'>&times;</a> </div>

"SAVE WIDGET DAN LIHAT HASIL NYA,,, "

KETERANGAN :
Warna Merah yang di Blok di ubah ke alamat Link Sobat
Warna Kuning yang di Blok di ubah ke Alamat Link IMG Sobat
Ubah Color Code Yang Di "Garis Bawahi" di Atas Dengan Color Code Sobat Sukai
Untuk Background Color dan Font Text Color dapat Sobat Ganti "Color Code" nya Dengan Cara Click Here

Cara Membuat Link Banner Gambar

COPY CODE HERE

<a href="http://doc-ephphatha.blogspot.com/" target="_blank"><img src="http://i838.photobucket.com/albums/zz302/raymond_085/hacker_editing_community_logo_png_by_najib_by_najib0-d4k5k8l_zpsa80e7cb9.png" /></a>

Keterangan : Ganti Alamat Link di Atas dengan Alamat "Link Blog" dan Alamat "Link Banner"

LIKE FANPAGE DIBAWAH INI UNTUK MENDAPATKAN ARTIKEL TERBARU VIA FACEBOOK
×

Cara Membuat One Click Text Area

COPY CODE

<code><span ><div><form name="copy"><div align="center"><input value="CLICK" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"> </div><div align="center"></div><p align="center"><textarea rows="3" cols="30" style="border: 8px inset rgb(104, 104, 204); padding: 0pt 1px; background: rgb(100, 100, 200) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(255, 255, 255); line-height: 1.5em; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;" name="txt" wrap="VIRTUAL"> &lt;a href=&quot;http://archive-doc.blogspot.com/&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://i838.photobucket.com/albums/zz302/raymond_085/d_group_zpsdb0d0b12.gif&quot; /&gt;&lt;/a&gt; </textarea></form></div></span></code>

Demo One Click Text Area

<a href="http://archive-doc.blogspot.com/" target="_blank"><img src="http://i838.photobucket.com/albums/zz302/raymond_085/d_group_zpsdb0d0b12.gif" /></a>

KETERANGAN :

Warna Merah dapat di rubah sesuka hati sobat :) contoh "One Click" "Select All" "Block All" etc
Warna Biru Sobat Isikan TEXT yang ingin Sobat Taruh ::D

Cara Membuat 9 Macam Text Area Elegant

Pada kesempatan kali ini saya akan share lagi ke anda tentang cara membuat 9 macam textarea super elegant di blog. Saya kasih judul demikin karena 9 textarea ini benar-benar elegan, mempesona, keren, cantik, menarik dsb. hehe..:D

Cara menerapkannya di blog cukup simple, bagi anda yang berminat dan mencobanya di blog silahkan ikuti langkah - langkah berikut ini :

• Masuk ke akun blogger anda
• Kemudian klik Template -> Edit HTML (CTRL + F)
• Cari kode/tag ]]></b:skin>
• Kemudian letakan kode CCS berikut tepat di atas tag ]]></b:skin>

  KODE CSS

.md1{overflow:auto;width:503px;height:200px;font-family:"Consolas","Courier New",Courier,mono,serif;color:#848176;margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;list-style-type:none;background:#000 url(http://1.bp.blogspot.com/-GYEvx8OT5-k/Tv1otrpKJ-I/AAAAAAAACE8/2ZNywOeZfLQ/s1600/2.JPG) repeat-y top left;border:1px solid #000;border-left:20px solid #ccc;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px} .md1:hover{background:#000 url(http://3.bp.blogspot.com/-nu-RARdmdqk/Tv1sXuE8gtI/AAAAAAAACFQ/mzYPiiWEaK0/s1600/1.jpg) repeat-y top left;color:#fef9bf;border:1px solid #000;border-left:20px solid #ccc;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:10px 10px 5px #888} .md2{overflow:auto;width:400px;height:auto;font-family:"Consolas","Courier New",Courier,mono,serif;color:#7a6417;margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;list-style-type:none;background:#000 url(http://1.bp.blogspot.com/-GYYwrX408NQ/Tv7JAIEwfMI/AAAAAAAACHc/w8IcSIvTsmc/s1600/000.JPG) repeat-y top left;border:1px solid #d8c37d;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px} .md2:hover{border:1px solid #d8c37d;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3);-moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px} .md3{overflow:auto;width:250px;height:260px;font-family:"Consolas","Courier New",Courier,mono,serif;color:#000;margin:15px 35px 15px 15px;padding:15px 5px 10px 165px;clear:both;list-style-type:none;background:#fff url(http://3.bp.blogspot.com/-3q8oheHzWaA/Tv7a1NqKabI/AAAAAAAACIA/gsSIuJClU3c/s1600/special-offer-01.jpg) repeat-y top left;border:1px solid #fff;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px} .md3:hover{background:#fff url(http://1.bp.blogspot.com/-fM6WEgLBjuc/Tv7crtRj1ZI/AAAAAAAACIM/EQUh2LH3ecM/s1600/%255Bwww.gj37765.blogspot.com%255Dmd3.jpg) repeat-y top left;color:#000;border:1px solid #fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)} .md4{overflow:auto;width:450px;height:153px;font-family:"Consolas","Courier New",Courier,mono,serif;color:#848176;margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;list-style-type:none;background:#000 repeat-y top left;border:1px solid #000;border-left:20px solid #ccc;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px} .md4:hover{overflow:auto;width:450px;height:153px;background:#000 url(http://1.bp.blogspot.com/-6DJrGfUAwYE/TwA0s105QdI/AAAAAAAACKQ/8D6UBp5JMsY/s1600/1.JPG) repeat-y top left;color:#eee;text-shadow:1px 1px 1px #000;text-transform:capitalize;border:1px solid #000;border-left:20px solid #CCC;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)} .md5{overflow:auto;width:400px;height:auto;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 35px 15px 15px;padding:10px 10px 10px 60px;clear:both;color:#000;list-style-type:none;background:#f5f3f3 url(http://1.bp.blogspot.com/-2ZYI5ROjqm0/TwGVjrytNjI/AAAAAAAACLs/AzzX67VYjCw/s1600/1.JPG) repeat-y top left;border:1px solid #ccc;border-right:15px solid rgba(0,0,0,.100);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)} .md5:hover{overflow:auto;width:400px;height:auto;background:#f5f3f3 url(http://1.bp.blogspot.com/-2ZYI5ROjqm0/TwGVjrytNjI/AAAAAAAACLs/AzzX67VYjCw/s1600/1.JPG) repeat-y top left;border:1px solid #ccc;border-right:15px solid rgba(0,0,0,.100);-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)} .md6{overflow:auto;width:400px;height:auto;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;color:#000:list-style-type:none;background:#6d6c6a;border:1px solid #eee;border-left:20px solid #000;border-right:20px solid #000;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-moz-border--moz-border-radius:23px 20px 20px 20px;border-radius:23px 20px 20px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)} .md6:hover{background:#000;color:#fff;border:1px solid #eee;border-left:20px solid #6d6c6a;border-right:20px solid #6d6c6a;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)} .md7{color:#848176;overflow:hidden;width:200px;height:300px;background:black;margin:15px 35px 15px 15px;padding:10px 10px 10px 35px;clear:both;border:1px solid #000;border-left:10px solid #ccc;border-right:10px solid #ccc;list-style-type:none;transition:width 2s;text-position:fixed;-moz-transition:width 2s;-webkit-transition:width 2s;-o-transition:width 2s;box-shadow:10px 10px 5px #888} .md7:hover{width:300px;color:#fff;box-shadow:0 0 10px rgba(0,0,0,.3)} .md8{margin:15px 35px 15px 15px;padding:20px 10px 10px 35px;background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYuV7DXETO2WV1cZX7tkxF21Dc5RgogiPUyx-f_JtUK2H0YnP3Ydi3YB1fHBcdTx-S79BCqyjW9b0aI0MrAGqydZCxkGQXe62eiLXoTrCZ1NtTEQPtpfCBfm4_G5Ngs0yKsqVAqn8aAGDS/s1600/code+%2528gj37765.blogspot.com.gif) repeat-y top left;border-top:1px solid #aaa;border-right:1px solid #aaa;border-bottom:1px solid #aaa;border-left:1px solid #aaa} .md9{overflow:auto;width:570px;height:310px;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 15px 15px 15px;padding:20px 10px 0 35px;clear:both;color:#fff;list-style-type:none;background:#f7f7f7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8X4MWYPs9tHk6Kc8mBrEzLsliimbpqkUOCtNyA8xK3U6lowAdBwr6SrTiOfwqoguo3o4Vkfs8Dchcb7csbTDS-ArloSGdzu_rPhw3cib3jxttvRaa8ZHRPQ7KqwaPe136u06oofThUzjJ/s1600/copy-to-clipboard-cmd-3.png) repeat-y top left;border:1px solid #eee;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px} .md9:hover{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8X4MWYPs9tHk6Kc8mBrEzLsliimbpqkUOCtNyA8xK3U6lowAdBwr6SrTiOfwqoguo3o4Vkfs8Dchcb7csbTDS-ArloSGdzu_rPhw3cib3jxttvRaa8ZHRPQ7KqwaPe136u06oofThUzjJ/s1600/copy-to-clipboard-cmd-3.png) repeat-y top left;border:1px solid #eee;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)} .md-9{overflow:auto;width:542px;height:230px;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 15px 15px 15px;padding:20px 10px 0 0;clear:both;color:#96948a;list-style-type:none;background:#000;border:1px solid #000;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}

Save template anda..

Untuk menampilkan textarea super elegant di postingan HTML gunakan kode-kode di bawah ini.

<div class="md1">TEKS ANDA DI SINI</div> <div class="md2">TEKS ANDA DI SINI</div> <div class="md3">TEKS ANDA DI SINI</div> <div class="md4">TEKS ANDA DI SINI</div> <div class="md5">TEKS ANDA DI SINI</div> <div class="md6">TEKS ANDA DI SINI</div> <div class="md7">TEKS ANDA DI SINI</div> <div class="md8">TEKS ANDA DI SINI</div> <div class="md9">TEKS ANDA DI SINI</div>

<div class="md1">TEKS ANDA DI SINI</div>

<div class="md2">TEKS ANDA DI SINI</div>

<div class="md3">TEKS ANDA DI SINI</div>

<div class="md4">TEKS ANDA DI SINI</div>

<div class="md5">TEKS ANDA DI SINI</div>

<div class="md6">TEKS ANDA DI SINI</div>

<div class="md7">TEKS ANDA DI SINI</div>

<div class="md8">TEKS ANDA DI SINI</div>

Ini adalah contoh dari 9 macam text area,,,Ini adalah contoh dari 9 macam text area,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,Ini adalah contoh dari 9 macam text area,,,,     Copy Code   ==> <div class="md9">TEKS ANDA DI SINI</div> <==

Selesai....happy blogging !

Macam-Macam Bentuk Style Border Pada Blog

CONTOH 1 :

<div style="border: 10px double blue;">Tester 123</div>

CONTOH 2 :

<div style="border: 10px groove red;">Tester 123</div>

CONTOH 3 :

<div style="border: 10px ridge green;">Tester 123</div>

CONTOH 4:

<div style="border: 5px dotted #009900; width: 250px; height: 50px;">Element atau Obeject</div>

CONTOH 5:

<p style="border:3px dashed; #000000; padding: 20px;"> Mendefinisikan perbatasan garis putus-putus.</p>

CONTOH 6:

<p style="border: 10px groove; #000000; padding: 20px;"> Mendefinisikan perbatasan garis berlekuk 3D.</p>

CONTOH 7:

<p style="border: 10px ridge; #000000; padding: 20px;"> Mendefinisikan perbatasan garis bergerigi 3D.</p>

CONTOH 8:

<p style="border: 10px outset; #FF3300; padding: 20px;"> Mendefinisikan perbatasan garis outset 3D.</p>

Cara Membuat Fan Page Melayang di Blog

Hello Sobat blogger, bicara tentang Kotak FanPage atau Like Box pastinya Sobat blogger sudah tidak asing lagi. Like Box berfungsi sebagai tempat Fans Blog Sobat di Facebook dan tempatnya ada di Blog Sobat. Contohnya seperti pada blog ini,,,

Nah, nggak kalah keren kan?
Sekarang tinggal cara membuatnya, bagi Sobat yang tertarik dan ingin membuat FanPage Kayak diatas itu, caranya gampang banget, sobat tinggal ikuti langkah-langkah berikut.

Cara Membuat Kotak FanPage Melayang Versi 2
1. Buka dulu akun blogger Sobat.
2. Masuk ke bagian Tata Letak.
3. Klik Tambahkan Gadget.
4. Pilih HTML/JavaScript.
5. Kemudian Copy dan Pastekan kode dibawah ini ke Halaman HTML gadget yang baru saja sobat tambahkan tadi.

 COPY CODE

<style type='text/css'> /* Message Box */ #box-message { position:fixed !important; position:absolute; top:-1000px; left:50%; margin:0px 0px 0px -182px; width:300px; height:auto; padding:16px; background:#fff; font:normal Dosis, Georgia, Serif; color:#111; border:2px solid #333; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } #box-message a.close { position:absolute; top:-10px; right:-10px; background:#fff; font:bold 16px Arial, Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#111; border:2px solid #333; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:22px; -moz-border-radius:22px; border-radius:22px; cursor:pointer; } #twitterx { background: #EEF9FD; padding: 10px; text-align:center; border: 1px solid #C7DBE2; border-top: 0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type='text/javascript'> $(window).bind("load", function() { // Animate Top Value When Page Loaded Completed $('#box-message').animate({top:"50px"}, 1000); // Remove Mailbox When Close Button On Click $('a.close').click(function() { $(this).parent().fadeOut(); return false; }); }); </script> <div id='box-message'> <!-- HTML Start --> <center><a class="murub">Suka dengan artikel di blog ini? like FanPage dibawah ini untuk mendapatkan artikel terbaru via FACEBOOK</a></center> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/syber.hacker.net&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe> </center> <!-- HTML End --> <br/> <a class='close' href='#'>&times;</a> </div>

Suka dengan artikel di blog ini? like FanPage dibawah ini untuk mendapatkan artikel terbaru via FACEBOOK
×