Terima kasih telah berkunjung, jangan lupa kunjungi agungar.
Tampilkan postingan dengan label Cara - Cara Edit HTML. Tampilkan semua postingan
Tampilkan postingan dengan label Cara - Cara Edit HTML. Tampilkan semua postingan

Rabu, 01 Januari 2014

template blogger polos

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:skin><![CDATA[/* ----------------------------------------------- ////////////////////////CLEAN HTML THEME//////////////////////// ///////////////////CODED BY : Riza-problogiz.blogspot.com/////////////////// ///////////////////DOWNLOAD FROM: http://problogiz.blogspot.com /////////// ----------------------------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none } body { font: $(body.font); color: $(body.text.color); background: $(body.background); padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread); $(body.background.override) margin: 0; padding: 0; } ]]></b:skin> </head> <body> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/> </b:section> <div style='margin-top:400px; '> <!--Please keep the Credits intact--> <center><p><a href='http://problogiz.blogspot.com'>proBlogiz Clean HTML </a>&#169; 2012.</p></center> </div> </body> </html>
kami kopas untuk memudahkan saya merujuk

Kamis, 14 Februari 2013

Gebyar Melayang

Gebyar melayang


<div style="position: fixed; bottom: 0px; right: 2px;"><br /><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="160" height="600" title="grab this widget @ widgetindex.blogspot" src="https://2713604333882420535-a-1802744773732722657-s-sites.googlegroups.com/site/widgetindex11/fireworks.swf" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed></div>



Selasa, 12 Februari 2013

Cara Membuat Link Text Melayang


Langkah Cara Membuat Link Text Melayang dengan Tombol Close [Tutup]

Pertama,pergi ke Dashboard lalu pilih Tata Letak / Rancangan / Design [1] lalu pilih Add a Gadget[2] kemudian pilihlah Html/Javascript [3],lihat gambar:

Membuat Widget Melayang / Cara Buat Obyek Melayang saat Loading
[1]


Cara Membuat Link Tulisan Melayang
[2]


membuat floating text blogger
[3]


Dan letakkan kode berikut disana:
<style type="text/css">
#topbar{
position:absolute;
padding-left:0px;
padding-top:130px;
up:100px;
background-color: transparancy;
width: 200px;
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="http://2.bp.blogspot.com/-B0EZO_0NcVo/T3bH1dJkQ8I/AAAAAAAABdA/o3IxlpRnRqE/s1600/pelajaran%2Bblog%2Bclose%2Bbutton.png" /></a></div>
<center>
<div style="background: #fff;">

<table width="200" height="130" border="0"><tr><td align="center">
<a href="http://beritamuslimsahih-ahlussunnah.blogspot.com/"><img src="http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg" alt="Pelajaran Blog - Ahlussunnah wa Al Jama'ah." width="180" height="120" /></a><br/><br/>
<small><strong>Masih belum mengenal Islam yang Murni?</strong></small>
</td></tr></table>


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

Lalu Simpan dan lihat hasilnya.

**Ket:
1.Untuk kode yang berwarna merah gantilah sesuai dengan keinginan sampai sobat mendapat posisi yang diinginkan.

2.Untuk kode yang berwarna biru sobat dapat ganti dengan [x],jika sobat tidak menginginkan tombol close.

3.Untuk kode warna hijau gantilah dengan widget HTML yang sobat inginkan,bisa meletakkan HTML widget Facebook Page,Status Twitter,Iklan Text,Gambar / Foto,Info dan lain sebagainya.

Selamat mencoba ya
SUMBER
http://pelajaran-blog.blogspot.com/2012/03/membuat-widget-melayang-cara-buat-obyek.html

Cara menghilangkan navbar di blogspot


Cara menghilangkan navbar di blogspot
Pertama biasa sobat masuk ke akuun blogspot sobat.
kedua sobat masuk kepengaturan dan pilih template.
ketiga sobat pilih edit html dan jangan lupa centang :

 
Keempat sobat kopas kode di bawah :
#navbar-iframe {
display: none !important;
}
Simpanlah kode diatas tepat di bawah  
-----------------------------------------------
Sagoeba Template Style
Name:     Simple
Designer: Sagoeba
URL:      http://sagoeba.blogspot.com/
----------------------------------------------- */
CONTOH
-----------------------------------------------
Sagoeba Template Style
Name:     Simple
Designer: Sagoeba
URL:      http://sagoeba.blogspot.com/
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}
/* Variable definitions

   ====================


Sumber: http://sagoeba.blogspot.com/ : http://sagoeba.blogspot.com/2012/05/cara-menghilangkan-navbar-di-blogspot.html#ixzz2KpJa1lD0

Cara Memasang Float Navbar di blog

"float Navbar adalah ( navbar melayang) maksudnya navbar ini tidak menempel pada element blog, sehingga jika scroll Up/Down, maka navbar ini akan tetap berada di bagian bawah blog anda.
contohnya lihat di bawah blog,lihat cara juga(Cara Membuat navbar Autohide di Blog)
bila agan tertarik membuat float navbar berikut langkah-langkahnya ;

"loggin ke blogger >> Layout  >>HTML/Javascript (jangan lupa click "Expand Widget Template")nda cari coke ini: ]]></b:skin> (untuk menghemat waktu guanakan pencarian cepat dengan menekan CTRL=F di keyboard


/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.3;
height: 100%;
vertical-align: bottom;
}

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

#navbar-bawah a {
color:#FFFFFF;
text-decoration:none;
}
#navbar-bawah a:hover{
color: #FF8000;
}
#navbar-bawah {
align: center;
position: fixed;
border-top: 1px transparent #ddd;
border-bottom: 1px transparent #FF8000;
background-color:#0B0B0B;
width: 100%;
left: 0px;
text-align: left;
color: #DF7401;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}

nb; 
ganti kode warna merah dengan warna yang di inginkan pilih Kode warna


  • Selanjutnya cari kode: </body> , kemudian anda letakan kode dibawah ini, tepat diatas kode: </body>

<div id='navbar-bawah'>
<p><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbnvr3aVyzZBPsWxPEmwxfsVhaS5khyphenhyphenXagKYT3DbeYCMaOT8u-LZPeur2P7XCtnkT8gI-lC3xPp_rE09rbrDPVRgdpWNGrCACHdsp3G4NQxcRdMXuv4al9PG71pCeJmVho8dUW-Cr2CT5l/s1600/picasion.com_865cb7427999081da0060200a3c92041.gif'/>&#160;&#160;&#160;

<a href='http://www.blogger.com/profile/04152305721712953170' target='_blank'>Js.Agunggrup</a>
&#160;&#160;&#160;<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXAdjV9AiRURaPSNtoBfzNjdAopjvgr1wOvqJkM85HjPm_h4IQmgopZ_fsM9oq_fAsFt2EDn7HzIAtPceRlRNcHR92vpCUgHRH33Jz9s1j8VY3jO96qfKBFbWusFrWtlwSvTB6U-SMal3V/s1600/picasion.com_c940f0fb3c42775daff4999d851c8632.gif'/></p>

<p class='info'><a href='ymsgr:sendim?agungaryono'><img border='0' height='16' src='http://opi.yahoo.com/online?u=agungaryono&amp;m=g&amp;t=2' style='padding-top:3px' width='64'/></a> </p>

<p class='info'>TEMUKAN Di <a href='http://www.blogger.com'>Religi</a> |<a href='http://www.blogger.com'>Perilaku</a> |<a href='http://www.blogger.com'>Artikel</a> |<a href='http://www.blogger.com'>Sosial dan Alam</a> |<a href='http://www.blogger.com'>Panduan Wirausaha</a> |<a href='http://www.blogger.com'>Bobol Wifi</a> |<a href='http://www.blogger.com'>Setelan Tempat</a> |<a href='http://www.blogger.com' target='_blank'>Gambar</a> |<a href='http://www.blogger.com'>Musik MP3</a><br/>
<a href='http://www.blogger.com'>DOWNLOAD</a> |<a href='http://www.blogger.com'>DAFTAR PUSTAKA</a> |<a href='http://www.blogger.com'>Cerita dan Kisah</a> |<a href='http://www.blogger.com'>Kultum</a> |<a href='http://www.blogger.com'>HTML blog</a> |</p>
</div>

  •  "Preview" sebelum anda "Save Template".
 keterangan:
  • Ganti URL yang berwarna merah dengan URL logo blog anda.
  • Ganti URL yang berwarna hijau dengan URL profile anda.
  • Ganti URL yang berwarna Orange dengan URL foto/avatar anda. lihat gambar ukuran 32x32
  • Ganti "agungaryono" dengan Yahoo Messanger ID anda.
  • Ganti tulisan-tulisan yang berwarna biru sesuai dengan blog anda.

Langkah Membuat Navbar Blogger Sederhana

Kami belajar Langkah Membuat Navbar Blogger Sederhana
Sesederhana judul artikel ini,penempatan barisan kode css maupun kode untuk navbarnya,sangat sederhana sekali.
Sekali lagi,tutorial membuat navbar ini hanya untuk blogspot dari blogger saja ya :p

Pertama,Pergilah ke Dashboard blogger anda,lalu pilih Tata Letak,selanjutnya seperti biasa pilih tab Edit HTML.
Selanjutnya,contreng tulisan Expand Widget Templates.
Lalu cari kode berikut:

</head>
[untuk membantu,carilah menggunakan keyboard dengan menekan tombol alt+F]

Setelah ketemu,letakkan kode css berikut persis di atas kode </head> tersebut.

<style type="text/css">
#pelajaranblognav img {
margin: 0px 0px -8px 0px;
vertical-align: middle;
}
#pelajaranblognav {
background-color: #222222;
width: 100%;
left: 0px;
text-align: center;
font-family: Arial, Tahoma, Verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}
#pelajaranblognav ul {
margin: 0px;
padding: 0px;
list-style: none;
color:white;
font-family:arial;
font-size:11px;
}
#pelajaranblognav a {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:visited {
background: #222222;
color: #FFFFFF;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav a:hover {
background: #222222;
color: green;
text-decoration:none;
font-weight: bold;
margin: 0px;
padding: 8px 12px 8px 12px;
border-left: 0px solid #444444;
border-top:0px solid #444444;
border-right: 0px solid #000000;
border-bottom: 0px solid white;
}
#pelajaranblognav li {
float: left;
margin: 0px;
padding: 0px;
}
#copyright a {
text-decoration: none;
font-family:arial;
font-size:11px;
}
#copyright {
color: black;
text-decoration: none;
float:right;
font-family:arial;
font-size:11px;
}
</style>


Jika sudah anda letakkan kodenya css-nya,sekarang cari lagi kode berikut:

<body>

Jika sudah ketemu,letakkan kode berikut persis di bawahnya.

<div id="pelajaranblognav">
<table border="0" bgcolor="#222222">
<tr>
<br/><ul><li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Daftar Isi</a></li>
<li><a href="http://pelajaran-blog.blogspot.com/">Belajar Blog</a></li>
<li><a href="http://cepat-terindex-google.blogspot.com/">Belajar Seo</a></li>
<li><a href="#">Links</a></li></ul>
<td>
<a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS2_ad3_600by100.jpg" width="500" height="80"/></a>
</td>
<td>
<center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
<center><a href="
http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
</td>
<td>
<center><a href="http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
<center><a href="
http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro"><img border="0" src="http://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg" width="80" height="50"/></a></center><br/>
</td>
</tr>
</table>
</div>
<div id="copyright">
Langganan <a href="http://url_blog_anda.blogspot.com/feeds/posts/default" target="_self"><b>RSS Artikel</b></a>
| Langganan <a href="http://url_blog_anda.blogspot.com/feeds/comments/default" target="_self"><b>RSS Komentar</b></a>
| Buat <a href="http://pelajaran-blog.blogspot.com/2009/11/belajar-membuat-navigasi-bar-navbar.html" target="blank"><b>Navbar</b></a> Ini Di Blog Kamu
</div>


Setelah itu Simpan Template,dan lihat hasilnya sekarang


  • Untuk tanda #,gantilah dengan url alamat yang ingin anda tuju.
  • Untuk http://www.awsurveys.com/HomeMain.cfm?RefID=pujiantoro,gantilah dengan alamat iklan banner anda.
  • Untukhttp://www.awsurveys.com/Pictures/AWS_ad3_150by150.jpg,gantilah dengan url gambar banner anda.
  • Untuk http://url_blog_anda.blogspot.com/,gantilah dengan url blog anda.
http://agungadiaryono.blogspot.com/b/html-preview?token=T-Mh0zwBAAA.9Uni8cRF3ImbltCgNI-OEA.ArALLDilNTAjBNs5UZexOQ#.URwZcx2ZQ6Y

Toolbar Atau Navbar Melayang Di Blog, Cara Memasang Toolbar Melayang Diatas Blog , Cara Memasang Navbar Melayang Di Blog

Bila Sobat Semua Menginginkan Tolbar Atau Navbar Tersebut, Sobat Bisa Mengikuti Langkah-Langkah Berikut:
  1.  Login Ke Aku "Blogger" Sobat
  2.  Pada "DasborPilih Rancangan Kemudian Pilih "Edit HTML
  3.  Letakan CSS Berikut Tepat Diatas Kode ]]></b:skin>
#tejanavbar{font-family:Comic Sans Ms;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiALCOgZSo-NcpzaD_JnM9LrjWXzgqye7k5MbFNtrfJAMRypUsLmIabs374VliiLMQvEla4lmKBg0hGTwKFWyfuhTzgMrgEvhtPBuB2RMZYgKJ29tINBa_1BOJ_HSfWxTiBBdQjkZWPEomR/)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
#tejanavbar .left{float:left;text-align:center;font-size:11px;font-style:normal;font-weight:bold;color:white;padding:2px 10px;}
#tejanavbar .right{float:right;padding:0px 2px;cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIZsX_vO5Ds2hHCN22Gr-P6HulLJ9GbFJEHV5VPxfHXnvomtCAUjQ00dalCbXewiA5Tah2iap5P2IjLXpkAjBPQ0GMlHWDlRAProT9HhvkmSsPMaQFIvkoUMMvG1A7J5_bBOD9UWdatU/s1600/Cursord.png), default}
#tejanavbar a{color:red;text-shadow: rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 20px;-moz-outline-style:none;}
#tejanavbar a:hover{color:white;text-shadow: rgb(255, 0, 0) 0px 0px 10px, rgb(255, 0, 0) 0px 0px 10px, rgb(255, 0, 0) 0px 0px 10px, rgb(255, 0, 0) 0px 0px 20px;border:0px;-moz-outline-style:none;cursor:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIZsX_vO5Ds2hHCN22Gr-P6HulLJ9GbFJEHV5VPxfHXnvomtCAUjQ00dalCbXewiA5Tah2iap5P2IjLXpkAjBPQ0GMlHWDlRAProT9HhvkmSsPMaQFIvkoUMMvG1A7J5_bBOD9UWdatU/s1600/Cursord.png), default}

   4.Kemudian Letakan Script Berikut Tepat Dibawah Kode <body>

<div id='tejanavbar' style='position:fixed;'>
<span class='left'><IMG align='top' alt='0' height='20' onclick='window.open(&quot;http://tejahtc.blogspot.com/?sm=1&quot;);' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC3HiQbP1b3F2OAFNfnrYY1mtMY-XFwzaDpbHgi2fNGJflfSqjbK3AY5JoM9saNJl6c51oeVfP5qkJKLN-YKKsgRyTjxvbkFlX6fJe6N6RKS6QZNywc4GIX01WvMSESV4kCGPcSCTf_Z4q/s1600/tejaicon3232.png' width='26'/>
<span style='font-family:kristen itc;'><blink>&quot;WELCOME TO MY BLOG&quot;</blink></span></span>
<span class='right' style='font-family:verdana;'>
<IMG alt='1' height='20' onclick='window.open(&quot;http://www.facebook.com/pages/Sharing-Ilmu-pengetahuan/125513924175946&quot;);' src='https://lh4.googleusercontent.com/_GaKwmMcf4N4/TSPPQiZKc2I/AAAAAAAAEDU/zD_grWbBNuQ/DADnfb.png' title='Facebook Page' width='20'/>
<IMG alt='2' height='20' onclick='window.open(&quot;http://www.facebook.com/pages/Sharing-Ilmu-pengetahuan/125513924175946&quot;);' src='https://lh4.googleusercontent.com/_GaKwmMcf4N4/TSPPJwm1nBI/AAAAAAAAEDM/UMIdfmgbSII/DADnbookmark.png' title='My Favorites' width='20'/>
<IMG align='top' alt='3' height='20' onclick='this.setHomePage(http://websitenokia.blogspot.com/);' src='https://lh4.googleusercontent.com/_GaKwmMcf4N4/TSPPQsgWT1I/AAAAAAAAEDc/-8SnRmd2RvQ/DADnhome.png' title='Set As HomePage' width='20'/>
<IMG align='top' alt='4' height='20' onclick='window.open(&quot;http://id-id.facebook.com/msuteja&quot;);' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixrnM3bHSdeGykxu6gVKCGHpCp5UIaeZCQJmBuqboAvdT11luYz3C4iJteWJU6r7YiDKAHXbLdcJoijSm7oQvhZrCQdxJS2Zt_lK1Z9RrgL00fs5Yd3pD2Nc22l5hkXDhyphenhyphenl53EusLW-Tth/s1600/facebook.png' title='Add Me On Facebook' width='20'/></span></div>

  5.Simpan Templatenya

Senin, 28 Januari 2013

Cara Membuat Gambar Melayang

Bisa untuk Blog or WordPress
Benar apa kata para sahabat blogger, blogwalking sangat berguna sekali. Disamping bisa menambah teman dan keperluan lainnya yang berkaitan dengan SEO. Bisa juga kita mendapatkan inspirasi dari blog yang kita kunjungi tersebut. Sebagai contoh ketika saya berkunjung ditempatnya ●●●ЄЯШЇЙ●●● tidak sengaja saya tertarik dengan aksesoris di salah satu blognya. Saya pikir aksesoris tersebut hanya bisa dipasang di Blogspot atau di WordPress dengan self hosting.
Namun setelah saya coba ternyata di WordPress.com aksesoris tersebut dapat berjalan. Aksesoris yang saya maksud adalah memasang gambar yang selalu di pojok halaman. Gambar tersebut tidak akan bergerak dan tetap berada di pojok halaman walaupun kita meng-scroll halaman ke atas dan ke bawah. Cukup menarik bukan? Lumayan untuk mempercantik tampilan blog kita.
Jika rekan-rekan tertarik untuk mencobanya atau untuk sekedar mempercantik tampilan blog, caranya sangat-sangat mudah.
  1. Login ke akun WordPress.com anda. atau Blogger/Blog anda
  2. Kemudian klik [Appereance] > [Widgets].
  3. Pilih widgets “Text“.
  4. Copy dan pastekan kode dibawah ini:
    Posisi bawah-kanan:
    <div style="display:scroll;position:fixed;bottom:0;right:0;"><a href="http://www.bootingskoblog.net/" target="_blank">
    <img src="http://1.gravatar.com/avatar.jpg" />
    </a></div>
    Posisi atas-kanan:
    <div style="display:scroll;position:fixed;top:0;right:0;"><a href="http://www.bootingskoblog.net/" terget="_blank">
    <img src="http://1.gravatar.com/avatar.jpg" />
    </a></div>
    Posisi bawah-kiri:
    <div style="display:scroll;position:fixed;bottom:0;left:0;"><a href="http://www.bootingskoblog.net/" terget="_blank">
    <img src="http://1.gravatar.com/avatar.jpg" />
    </a></div>
    Posisi atas-kiri:
    <div style="display:scroll;position:fixed;top:0;left:0;"><a href="http://www.bootingskoblog.net/" target="_blank">
    <img src="http://1.gravatar.com/avatar.jpg" />
    </a></div>
  5. Dan klik tombol [Save].

Keterangan:

  • Anda bisa mengganti huruf yang dicetak merah dengan URL gambar dan URL blog.
  • Trick ini tidak akan berjalan di browser IE.
  • bisa lihat di browsr ini  
Kami tak cantumkan sumber karena sumber terdapat beberapa hal yang berbau porno. untuk itu kita jaga sambil sdengarkan murottal bacaan al qur'an.

Cara Membuat Float Image (Gambar Melayang) Pada Blog

Pada kesempatan kali ini kita akan belajar bagaimana membuat float image (gambar melayang) pada blog. Sobat bisa lihat pada pojok kiri atas dan bawah dari blog ini, ada 2 buah gambar yang terus berada pojok browser yang selalu mengikuti kursor dari mouse. Itulah yang dimaksud dengan float image. Cukup mempercantik tampilan blog kita kan?

Kelebihan dari float image ini adalah selain memperindah blog juga dapat kita sisipi link. Sehingga jika ada yang mengklik link tersebut maka akan langsung menuju ke tautan yang telah ditentukan.

Tertarik untuk mencobanya?
Langsung saja langkah-langkah pembuatannya adalah sebagai berikut:
1. Login blogger dan langsung menuju ke Design > Edit HTML.

2. Cari kode berikut (bisa menamnfaatkan Ctrl+F)
]]></b:skin>

3. Taruh kode berikut diatas kode ]]></b:skin>
#trik_pojok { 
position:fixed;_position:absolute;bottom:5px; left:15px; 
clip:inherit; 
_top:expression(document.documentElement.scrollTop+ 
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
NB: 
Kita bebas mengatur letak float image yang akan tampil pada blog kita. Caranya adalah dengan mengganti kata yang dicetak tebal pada kode diatas. Kode diatas adalah untuk meletakkan float image pada pojok kiri bawah. Jika sobat menginginkan letaknya pada pojok kanan atas, maka kata yang dicetak tebal tinggal diganti dengan top dan right.
Kita juga bebas untuk mengatur koordinat dari float image yang akan kita tampilkan. Caranya adalah dengan mengganti kode angka yang dicetak miring pada kode diatas. Misalkan kode diatas adalah bottom:5px; left:15px; maka float image yang muncul akan berada 5 pixel dari bawah dan 15 pixel dari sisi kiri. Sobat tinggal mengatur hal tsb sesuka sobat.

4. Kemudian letakkan kode dibawah ini diatas kode </body>
<div id="trik_pojok"> 
<a href="http://www.bangjohan.com/"> 
<img src="http://i54.tinypic.com/svrhip.png" border="0" /></a> 
</div>
NB: 
Kata yang dicetak tebal adalah link yang akan berfungsi pada float image. Sobat bisa mengganti link tersebut sesuai keinginan sobat. Selanjutnya kata dicetak miring adalah sumber gambar dari float image. Sobat bisa menggantinya dengan logo sobat sendiri, tapi terlebih dahulu harus diupload di situs photo sharing misalnya http://tinypic.com/

5. Terakhir simpan perubahan pada template sobat dan lihat hasilnya.

Bagaimana? Cukup mudah bukan? Selamat mencoba!

copas from :  http://www.bangjohan.com/2010/12/cara-membuat-float-image-gambar.html

Cara Membuat Gambar Melayang di Blog


Cara Membuat Gambar Melayang di Blog -Panduan blogger pemula. Panduan blogger yang akan membahas,menjelaskan serta membantu sobat blogger semua khususnya yang masih awam/pemula dalam dunia blog.Panduan blogger kali ini akan membahas tentang "Cara Membuat Gambar Melayang di Blog". Memiliki sebuah blog yang cantik dan menarik merupakan salah satu dambaan bagi setiap blogger.Selain itu juga,dengan memiliki sebuah blog yang cantik menarik bisa menjadi rujukan bagi pengunjung untuk berkunjung ke blog milik kita.Dalam perkembangannya,banyak sekali para blogger berlomba-lomba untuk menjadikan blog miliknya semakin tampil cantik dan menarik.

Banyak sekali langkah-langkah yang bisa ditempuh agar sebuah blog tampil cantik dan menarik.Berbagai cara banyak dibahas oleh sobat blogger di seluruh Dunia termasuk juga di Indonesia.Dalam hal ini,akoe sarankan sobat memiki sebuah "skill" atau kemampuan untuk menjadikan sebuah blog agar tampil lebih menarik.Salah satu cara untuk mempercantik blog adalah dengan memasang gambar/widget yang menarik di blog.Mungkin kalau hanya memasang gambar/widget saja sudah bisa sobat laukan.Tapi dalam panduan blogger ini berbeda,yaitu memasang gambar/widget di agar tampil melayang di blog,sehingga blog sobat akan tampil lebih menarik lagi.
Dan jika sobat tertarik tentang bagaimana caranya memasang sebuah gambar/widget melayang di blog,silahkan ikuti langkah-langkah seperti di bawah ini :

1. Login terlebih dulu ke akun blog sobat
2. Klik Tata Letak
3. Klik Tambah Gadget
4. Pilih Opsi HTML/Java Script
5. Copy dan Paste kode HTML di bawah ini

 Posisi Atas Kiri

<div style="display:scroll;position:fixed;top:0;left:0;">
Isi dengan kode HTML widget/url gambar
</a></div>

Posisi Atas Kanan

<div style="display:scroll;position:fixed;top:0;right:0;">
Isi dengan kode HTML widget/url gambar  
</a></div>

Posisi Bawah Kiri

<div style="display:scroll;position:fixed;bottom:0;left:0;">
Isi dengan kode HTML widget/url gambar  
</a></div>

Posisi Bawah Kanan 

<div style="display:scroll;position:fixed;bottom:0;right:0;">
Isi dengan kode HTML widget/url gambar  
</a></div>

6. Klik Simpan 
 
sumber :  http://tjoretan-akoe.blogspot.com/2012/11/cara-membuat-gambar-melayang-di-blog.html

iklan anda

Tidak boleh kosong