Rabu, 11 Mei 2011

Blog Daftar Isi Master Tutorial

daftar-isi-master-tutorialSiap-siap bagi pelancong setia blog aneh dan unik Prodigy of Head menerima kabar menghebohkan abad ini :D Beben Koben si bloglang anu ganteng kalem tea mau berbagi link daftar isi blog para master tutorial in the house. Tapi sebelumnya Beben mau kasih satu trik yang mana diambil dari link daftar isi blog tersebut ;) Trik mengambil kopi paste dengan hanya mengklik. Trick ini suka dipakai dalam textarea, input bahkan yang lainnya jika mendukung fitur ini ;))

Biar lebih mudah dalam mengambil copy-paste kalau sobat yang memang suka menyuguhkan kode² dalam postingannya. Contoh pemakaian dalam textarea dan input macam gini sob...





Klik buat mengambil!


Tuh kan cuman sekali klik, langsung didapet deh semua yg ada didalamnya itu :) Sekarang kita menggunakan javascript supaya lebih memudahkan penulisan kode didalam postingan nantinya.
<script type='text/javascript'>

//<![CDATA[

function selectCode(id)

{

// Get ID of code block

var e = document.getElementById(id);



// Not IE

if (window.getSelection)

{

var s = window.getSelection();

// Safari

if (s.setBaseAndExtent)

{

s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);

}

// Firefox and Opera

else

{

var r = document.createRange();

r.selectNodeContents(e);

s.removeAllRanges();

s.addRange(r);

}

}

// Some older browsers

else if (document.getSelection)

{

var s = document.getSelection();

var r = document.createRange();

r.selectNodeContents(e);

s.removeAllRanges();

s.addRange(r);

}

// IE

else if (document.selection)

{

var r = document.body.createTextRange();

r.moveToElementText(e);

r.select();

}

}

//]]>

</script>
Itu javascriptnya silahkan mau dipasang begitu atau mau dihosting. Lalu letakin deh dibawah/setelah tag ]]></b:skin> atau bisa juga diatas tag </head>Cara pemanggilan or pemakaian ketika mau memosting atau coded caller ;))

Pemanggilan penulisan kode secara umum yaitu dengan menggunakan tag <pre> ... </pre>

Jadi sobat tinggal menambahkan menjadi<pre id="UNIQUE-ID" onclick="selectCode(this.id);">Lorem Ipsum Cumi Tutung Tempe Gosong</pre>UNIQUE-ID isikan terserah mau menggunakan kata apa saja, tetapi jika mau memakainya lebih dari 1 pemanggilan didalam satu postingan harus berbeda itu unique-idnya :-/ Contoh penerapan pada blog ini sob ;)

<a href="http://beben-koben.blogspot.com" target="_blank">

<img border="0" alt="Beben" src="http://i49.tinypic.com/einuqv.jpg"/>

</a>
Kalau mau divariasikan dengan menggunakan CSS bisa juga. Sobat buat saja terlebih dahulu gaya yang mau dipakai. Semisal kode CSS sbb

.code {

font-size: 75%;

font-family: "Courier New", Times New Roman, Georgia, Serif;

padding: 5px;

border: 1px solid #223344;

background: #FAFAFA;

line-height: 150%;

border-color: #BBBBBB;

overflow: auto;

}
Penulisannya menjadi begini<pre class="code" id="UNIQUE-ID" onclick="selectCode(this.id);">Lorem Ipsum Cumi Tutung Tempe Gosong</pre>Begitu teman-temanku.

Source dari trik diatas tidak akan Beben kasih tauk dari mana, tapi akan Koben kasih tauk sesuai janji diatas tempat nongkrong daftar isi para master tutorial blog karya salah satu sobat blogger. Jika sobat memang mengobok-obok daftar isinya maka akan ketemu trik diatas didapat dari master yang mana :)) Open this link and put your address bar



Lalu lihat deh dibawah main menu yg deket header ;)) Masa masih mau nanya directory gimana cara ini, mau itu dong...hihihi :D Rugi kalo gak mau ngobok-ngobok mah, semoga ditambah listnya Beben gitu masuk kesana :-" :">

BLOGNYA SUDAH DIRUBAH DAN TIDAK ADA LAGI LIST PARA MASTERNYA :(

Happy blogging bro \m/

Tidak ada komentar:

Posting Komentar