Cara menempatkan gambar di pojok kiri kanan atas bawah blog
Alhamdulillah akhirnya postingan bisa aku lanjutkan setelah beberapa hari bahkan beberapa minggu tidak melakukan posting ke blog ini gara-gara ada keperluan pribadi yang menyangkut masalah pendidikan kami. Pada kesempatan kali ini saya akan membahas tentang cara Menempatkan gambar di pojok kiri kanan atas bawah blog. Cara ataupun Trik ini saya buat untuk menyimpan kode untuk membuat gambar di pojok kiri kanan atas bawah blog, sekalian berbagi kepada Sahabat Mabuprogram semua.
Untuk menerapkannya di blog Anda Silahkan ikuti langkah-langkah berikut:
Pertama :
Masuk ke blog Anda.
Kedua :
Dari Dasbor, masuk ke Rancangan lalu Edit HTML.
Ketiga :
Cari kode ]]></b:skin> (cara mencari: Ctrl + F)
Copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin>
Keterangan :
kode di atas: top = atas, bottom = bawah, left = kiri, right = kanan. Silahkan diganti sesuai dengan keinginan Anda.
kode di atas: top = atas, bottom = bawah, left = kiri, right = kanan. Silahkan diganti sesuai dengan keinginan Anda.
#gambarpojok {position:fixed;_position:absolute;top:0px; right:0px;clip:inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documen
Keempat :
Cari lagi kode </body>
<div id='gambarpojok'><a href='NAMABLOGANDA.blogspot.com/#'><img border='0' src='URL GAMBAR YANG DITAMPILKAN'/></a></div>
Atau bisa juga dengan
<a href="javascript:popup('pop up overlay')">
<img src="http://4.bp.blogspot.com/-wk-1FghqP1Y/Tzx-3ltDOUI/AAAAAAAAABI/_y_WCKcCEjc/s320/buku-tamu.gif" /></a>
<div id="dialog-overlay"></div>
<div id="dialog-box"><div class="dialog-content">
<div style="text-align: center;text-valign: top;">
<iframe src="http://s1.fibox.ws/chat.php?6919" width="450px" scrolling="auto" height="500px" frameborder="0"></iframe>
<div id="dialog-message"></div><a class="button" href="#">TUTUP</a></div></div>
<style type="text/css">
#dialog-overlay {width:100%; height:100%;filter:alpha(opacity=80);
-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;background:#000000;position:absolute;top:0; left:0;z-index:3000;display:none;}#dialog-box {-webkit-box-shadow: 2px 4px 10px grey;-moz-box-shadow: 2px 4px 10px grey;-moz-border-radius: 5px;-webkit-border-radius:5px;background:white;width:auto;position:absolute;z-index:5000;display:none;}#dialog-box .dialog-content {text-align:left;padding:5px;margin:13px;color:#fff; text-shadow: 1px 1px 2px #fff;font-family:arial;font-size:15px;}a.button {margin:10px auto 0 auto;text-align:center;display: circle;width:20px;padding: 5px 10px 6px;color: #fff;text-decoration: none;font-weight: bold;line-height: 1;background-color:blue;-moz-border-radius: 5px;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);text-shadow: 0 -1px 1px rgba(0,0,0,0.25);border-bottom: 1px solid rgba(0,0,0,0.25);position: relative;cursor: pointer;}
a.button:hover {background-color: #000;}#dialog-box .dialog-content p {font-weight:700;
margin:0;}#dialog-box .dialog-content ul {margin:10px 0 10px 10px;padding:0;height:50px;}</style>
<script src="http://andysmile.googlecode.com/files/latoverlay.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {$('#dialog-overlay, #dialog-box').hide();return false;});
$(window).resize(function () {if (!$('#dialog-box').is(':hidden')) popup();}); });
function popup(message) {var maskHeight = $(document).height();var maskWidth = $(window).width();var dialogTop = (maskHeight/1.5) - ($('#dialog-box').height());
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();$('#dialog-message').html(message);}</script></div>
Ganti Tulisan Biru dengan shoutbox atau link gambarmu
<a href='NAMABLOGANDA.blogspot.com/#'><img border='0' src='URL GAMBAR YANG DITAMPILKAN'/></a>
Simpan Template dan lihat hasilnya.
Selamat mencoba!
