Blognya Ifud: November 2010

mengatur tampilan element / widget pada blogger

Asyik ! itu ekspresi saya pertama kali tahu tentang hal ini, ternyata blogger itu luar biasa, tidak ada sebatas bisa add element/widget. Tapi disini kita bisa atur, kapan element/widget tersebut ditampilkan atau disembunyikan.

ini hanya saya cari-cari di internet yang sering saya gunakan untuk mengatur tampilan blog :)

Menampilkan Widget Hanya di Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>
..........................
</b:if>

Menampilkan Widget selain di Homepage

<b:if cond='data:blog.url != data:blog.homepageUrl'>
.....................................
</b:if>

Menampilkan Widget hanya di Archivepages

<b:if cond='data:blog.pageType == "archive"'>
......................................
</b:if>

Menampilkan Widget selain di Archivepages
<b:if cond="data:blog.pageType != "archive"">
....................................................
</b:if>

Menampilkan Widget hanya di Itempages / Postingan
<b:if cond='data:blog.pageType == "item"'>
............................................
</b:if>

Menampilkan widget selain di Itempages

<b:if cond='data:blog.pageType != "item"'>
....................................
</b:if>

Menampilkan widget hanya di Staticpages
<b:if cond='data:blog.pageType == "static_page"'>
..................................
</b:if>

Menampilkan widget selain di staticpages

<b:if cond='data:blog.pageType != "static_page"'>
............................
</b:if>

Menampilkan widget pada URL Postingan Tertentu

<b:if cond='data:blog.url == "urlposting"'>
.........................................
</b:if>

nb: pada "alamat posting", ganti dengan url postingmu

Menampilkan widget selain di URL postingan tertentu

<b:if cond='data:blog.url != "urlposting"'>
................................................
</b:if>

Note: pada "urlposting", ganti dengan url postingmu

Contoh:
<b:widget id='HTML2' locked='false' title='Tentang Saya' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Note: huruf yang di bold adalah pengaturan yang mendakan bahwa id='HTML2' dengan title='Tentang Saya' akan ditampilkan dihalaman depan (homepage) saja.

Silahkan bereksperimen sendiri hehehe

Thanks

Disable Right Click pada Blogger

Pada artikel saya sebelumnya tentang menonaktifkan highlight text pada blogger agar aman dari tukang copy (istilah sering ngopy artikel orang :p) Nah sekarang kita bahas gimana men-disable right click nya.

Note: Ini hanya untuk coba2 aja :)

Copy lalu paste kode dibawah ini (diatas kode </head>)

<script language='javascript' type='text/javascript'>
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
});
});
</script>

Lalu save template !

Semoga berguna..

Thanks

Disable Highlight Text pada Blogger

Agak sedikit extrem nih hehe
memproteksi agar pengunjung blog kita ga bisa men-select (dengan tujuan mengcopy) artikel kesayangan kita bisanya, simple aja caranya mudah, script ini saya temukan waktu jalan-jalan di blog orang :)

copy-kan kode dibawah ini dibawah kode <head>

<script type="text/javascript">

//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]

omitformtags=omitformtags.join("|")

function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}

function reEnable(){
return true
}

if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}

</script>

Lalu save template !

Moga bermanfaat

Thanks :)

"screen resolution hack" untuk web designer

Sebagian besar dari kita mungkin banyak menjumpai bahwa situs kami mungkin berbeda dalam resolusi layar yang berbeda. yang perlu dilakukan sebagai web designer adalah membuat situs yang kompatibel untuk resolusi layar yang berbeda. Para pengunjung situs/blog Anda pastinya memiliki resolusi layar yang beragam. Jadi, wajib untuk membuat situs Anda yang kompatibel untuk resolusi layar yang berbeda. Sebagai contoh, Dalam resolusi layar yang lebih rendah seperti 800 × 600 px layout website akan sempurna. Tetapi ketika Anda melihat situs anda pada resolusi layar lebih tinggi seperti 1024 × 768 px atau bahkan lebih tinggi, header website atau sidebar dapat disesuaikan dengan baik kanan atau kiri. Itu semua karena desainer mungkin telah mendesain situs untuk mendapatkan resolusi layar tertentu. Dalam resolusi layar dia (pada komputer yang digunakan untuk mendesain web), situs mungkin terlihat tampak sempurna. Tapi ketika web tesebut ke resolusi layar yang lebih tinggi, tampilan menjadi tidak sejajar.

Jadi berapa resolusi terbaik yang harus digunakan ? jawabannya beragam, tapi pada saat ini kebanyakan pengunjung sudah menggunakan resolusi tinggi (contoh:1024 × 768 px)

Karena selama ini saya pribadi sering menggunakan teknik ini pada blogger, jadi tutorial ini diimplementasikan langsung pada blogger, caranya :

step 1 : Login ke blogger.cm
step 2 : Pada Dashborad ilih menu Design lalu pilih Edit HTML.

Carilah kode-kode element seperti:
#Header
#Outer wrapper
#content wrapper
#wrapper
#Footer

Atau masih ada kode element lainnya.

Sisipan kode margin: auto; pada element-element tersebut, maka desain blog anda akan tampak static tapi flexibel mengikuti berapapun layar resolusi anda.

Bagaimana cara test tampilan yang flexibel?
Pada tampilan web normal tekan Ctrl + atau Ctrl -

Demikian semoga berguna

jQuery script : Horizontal Accordion pada blogger

Apa itu horizontal accordion? saya sendiri sebenarnya kurang tau haha.
tapi asyik juga dipelajari, ternyata ini adalah menu yang sangat indah, tepatnya menggunakan jQuery, nah sekarang saya mau nulis gimana cara pengaplikasiannya di blogger.

Saya ambil contoh dari sini

_http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/accordion.html

Pertama cari kode ini di <head>

lalu pastekan dibawahnya kode dibawah ini :

<link href='https://sites.google.com/site/dimanasajadeh/ancur/accordion.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='https://sites.google.com/site/dimanasajadeh/ancur/jquery-1.3.2.min.js' type='text/javascript'/>
<script language='javascript' src='https://sites.google.com/site/dimanasajadeh/ancur/jquery.msAccordion.js' type='text/javascript'/>
<style type='text/css'>
.set{border-bottom:1px solid #000}
.set1{background-color:#C77B3F;}
.set2{background-color:#FFC732;}
.set3{background-color:#007C90;}
.set4{background-color:#AD6F08;}
.set5{background-color:#387855;}
.set6{background-color:#8C4B2D;}
.set7{background-color:#82A668;}
</style>

Setelah itu cari code </body>

Lalu paste code dibawah ini taruh diatas code </body>

<script language='javascript' type='text/javascript'>
$(document).ready(function() {
$("#accordionGiftLelo").msAccordion({defaultid:1});
$("#accordion1").msAccordion({defaultid:6, autodelay:4});
$("#accordionNested").msAccordion({defaultid:2});
$("#accordionNestedChild").msAccordion({defaultid:2, vertical:true});
$("#accordion3").msAccordion({vertical:true});
}
)
</script>

Nah setelah itu buatlah element/widget (add new widget)

<h1>Horizontal Accordion - Automatic Delay 4 sec</h1>
<div class="accordionWrapper" id="accordion1">
<div class="set set1">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu1-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-1.jpg" width="486" height="198" /></div>

</div>
<div class="set set2">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu2-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-2.jpg" width="486" height="198" /></div>
</div>
<div class="set set3">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu3-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-3.jpg" width="486" height="198" />
</div>
</div>
<div class="set set4">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu4-h.jpg" width="30" height="198" /></div>

<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-4.jpg" width="486" height="198" /><br />
</div>
</div>
<div class="set set5">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu5-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-5.jpg" width="486" height="198" /></div>
</div>
<div class="set set6">
<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu6-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-6.jpg" width="486" height="198" /></div>
</div>
<div class="set set7">

<div class="title"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu7-h.jpg" width="30" height="198" /></div>
<div class="content"><img src="http://www.marghoobsuleman.com/mywork/jcomponents/accordion-common/images/menu-img-7.jpg" width="486" height="198" /></div>
</div>
</div>

Nah yang berwarna merah bisa diganti dengan url image kita sendiri..
selamat mencoba gan..

Ini demonya ane test di blog gan..

_http://ifudbelajar.blogspot.com/

Blognya Ifud

Pages

mengatur tampilan element / widget pada blogger

Disable Right Click pada Blogger

Disable Highlight Text pada Blogger

"screen resolution hack" untuk web designer

jQuery script : Horizontal Accordion pada blogger

Labels

Archives