Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.
Monday, June 20, 2011
Tip Melindungi Konten Blog dari para Plagiator
Proyek ini bertujuan untuk melindungi postingan-postingan di blogmu agar tidak mudah disalin oleh para pengunjung. Sekarang coba masuk ke tab Rancangan kemudian pilih Edit HTML. Untuk menonaktifkan fungsi blok dan klik-kanan mouse sebenarnya sangatlah sederhana. Kamu hanya perlu mengganti tag <body> dengan kode ini:
Klik Simpan Template kemudian lihat halaman blogmu.
Sekarang coba klik-kanan mousemu, maka tidak akan ada menu apapun yang akan tampil. Coba juga untuk mengeblok tulisan-tulisan di halamanmu. Tidak bisa kan? Begitulah salah satu cara jitu untuk melindungi hasil karyamu di blog. Namun sayangnya, cara ini juga mempunyai sebuah efek samping, yaitu akan membuat kotak penelusuran posting bawaan dari template blogmu menjadi tidak berfungsi. Satu-satunya jalan keluar untuk mengatasi masalah ini mungkin hanya dengan menampilkan kembali navbar blog jika kamu merasa bahwa kotak penelusuran itu sangat penting.
Navigasi Breadcrumb Melayang, Inovasi Sederhana untuk Tampilan yang lebih Astaganaga
Merasa bosan dengan tampilan navigasi breadcrumb yang begitu-begitu saja? Dengan memanfaatkan deklarasi position:fixed; kita bisa membuat sebuah objek (dalam hal ini navigasi breadcrumb) menjadi melayang. Untuk membuatnya lakukan beberapa langkah berikut ini:
Masuk ke tab Rancangan kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Salin kode pemodel di bawah ini, kemudian letakkan di atas kode ]]></b:skin> atau </style>:
Dalam sebuah templateblogspot terkadang terdapat satu atau dua buah kode <a expr:name='data:post.id'/>. Jika apa yang telah kamu lakukan tidak menunjukkan hasil, cobalah untuk meletakkan kode tersebut di atas kode <a expr:name='data:post.id'/> yang kamu temukan berikutnya.
Klik Simpan Template.
Sedikit Penyesuaian:
Kamu bisa mengganti Beranda dengan Home atau yang lainnya. Letakkan juga konten lain seperti jam dinding, jumlah komentar, jumlah posting atau yang lainnya di dalam wilayah kekuasaan <span class='kanan'> ... </span>
Demonya bisa kamu lihat di sini. Oke, kita mulai proyeknya sekarang!
Pertama-tama, salinlah baris kode pemodel ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau di atas kode </style>:
#pelangi {font:normal 14px Trebuchet MS,Arial,Sans-Serif;margin:0 0 50px;}
#pelangi ul {list-style-type: none;margin:10px 0;padding:0;height:95px;}
#pelangi a strong {position:relative;top:40%;overflow:hidden;}
#pelangi li a {width:95px;height:95px;display:inline-block;float:left;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;text-align:center;}
#pelangi li a:link,
#pelangi li a:visited,
#pelangi li a:active {font-weight:bold;color:#FFFFFF;text-decoration:none;margin:2px 2px;}
#pelangi li a:hover {margin:0 0;width:99px;height:99px;opacity:0.9;}
Setelah itu letakkan kerangka navigasi ini di tempat yang kamu inginkan: (Pelajari tentang beberapa tempat alternatif untuk meletakkan kerangka navigasi di bab ini):
Efek Hover Transparan Sederhana dengan CSS Opacity
Apa yang dimaksud dengan hover gambar sederhana? Coba letakkan pointer mousemu pada gambar di atas. Dalam segi kepraktisan, tentu saja efek ini akan lebih ringan jika dibandingkan dengan efek hover gambar artistik dengan JQuery. Untuk membuatnya caranya sangat sederhana. Kita hanya memerlukan sebuah penerapan CSS Pseudo-Class:hover pada selektor img.
Pertama-tama, carilah kode yang tampak seperti ini:
Tidak usah terfokus pada deklarasi-deklarasi di dalamnya. Cukup fokus pada selektor img. Kode di atas adalah komponen khusus untuk mengatur tampilan gambar-gambar di halamanmu. Kita bisa mengetahui itu karena selektor img pada dasarnya memang berasal dari tagnya, yaitu <img>
Jika sudah ketemu, salinlah kode ini, kemudian letakkan di bawahnya:
img:hover {
/* Secara teoritis untuk IE 8 & 9 (lebih valid) */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* Ini juga bekerja di IE 8 & 9
... juga 5, 6, 7 */
filter:alpha(opacity=50);
/* browser Firefox lama di bawah Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pra WebKit!) */
-khtml-opacity:0.5;
/* Moderen!
* Firefox 0.9 +, Safari 2?, Chrome yang lain?
* Opera 9 +, IE 9 + */
opacity:0.5;
}
Klik Simpan Template. Sekarang kita masuk ke tahap pemahaman lebih lanjut.
Pemahaman Lebih Lanjut:
Meskipun selektor img:hover memiliki begitu banyak jenis properti opacity, namun pada dasarnya hanya satu saja yang dipakai, yaitu tergantung dari peramban apa yang sedang kita pakai. Sedangkan mengenai nilai opacity, nilai 1 atau 100 sama artinya dengan solid, sedangkan nilai 0 sama artinya dengan tembus pandang SEPENUHNYA.
Apa yang dimaksud dengan efek hover gambar artistik? Coba letakkan pointer mousemu pada gambar di halaman ini »
Untuk membuat efek seperti itu, yang kita butuhkan hanya JQuery. Saya ajarkan caranya di sini:
Pertama-tama, salinlah script di bawah ini, kemudian letakkan di atas kode </head>:
Nah, yang barusan kita lakukan adalah meletakkan mesinnya. Khusus untuk script di atas, jika ternyata templatemu sudah memilikinya, kamu tidak perlu lagi menambahkannya, satu template cukup satu mesin saja. Namun seperti halnya di alam nyata, sebuah mesin tidak akan bekerja tanpa adanya remot pengendali. Untuk itu, sertakanlah komponen pengendali ini dan letakkan tepat di bawah kode tadi:
Selesai. Klik Simpan Template kemudian lihat hasilnya. Sekarang kita masuk ke tahap pemahaman lebih lanjut.
Pemahaman Lebih Lanjut
Sebuah remot pengendali (sebut saja begitu) dapat memiliki tiga buah tugas penting, yaitu menentukan APA yang diberi efek, SEPERTI APA efek yang diberikan dan SECEPAT APA efek itu bekerja.
Perhatikan kode img yang nyungsep di antara kode '. Itu adalah selektor dalam CSS yang berarti GAMBAR. Oleh karena itu, tutorial ini sebenarnya tidak mutlak hanya memberlakukan efek pada gambar saja. Kamu juga bisa mengganti kode img tersebut menjadi a misalnya, untuk memberikan efek transparasi pada semua link (tautan). - [APA]
opacity adalah properti dalam CSS yang akan dianimasikan oleh mesin ini. - [SEPERTI APA]
1000 adalah tingkat kecepatan perubahan nilai efek (dalam hal ini adalah: opacity/transparasi). Coba saja ganti nilai itu dan lihat perbedaan kecepatannya. - [SECEPAT APA]
Pemakaian JQuery dalam blog tentu saja memiliki sebuah resiko, yaitu blog menjadi bertambah lambat ketika diakses. Namun itu cuma sedikit saja. Atau jika kamu ingin membuat efek hover yang lebih ringan, kamu bisa baca tutorialnya di sini.
Membuat Recent Post/Posting Terbaru dengan Script untuk Mengatasi Masalah Desain dan Bahasa
Pernah melihat model recent post seperti ini? Ya, itu adalah recent post bawaan dari Blogger.com. Jika dilihat-lihat, tampilannya memang terasa sedikit memaksa dengan template blog kita. Komposisi warna dan model huruf yang tidak bisa disesuaikan terkadang juga membuat recent post ini menjadi tampak seperti "tempelan" saja, bukannya menjadi salah satu bagian dari tubuh blog kita. Selain itu, salah satu bagian kecil berupa tautan bertuliskan continue >> juga mungkin akan sedikit mengganggu bagi para anak bangsa yang cinta bahasa tanah air. Nah, untuk mengatasi semua masalah itu, kamu bisa menggunakan baris script yang Saya peroleh dari salah seorang tetangga Saya yang baik hatinya. Namanya mas Hoctro (hehe..)
Salin saja semua kode ini, kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:
<script type='text/javascript'>
//<![CDATA[
//kredit kepada HOCTRO
function rp(json) {
document.write('<ul>');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "Mei";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Agt";
monthnames[9] = "Sep";
monthnames[10] = "Okt";
monthnames[11] = "Nov";
monthnames[12] = "Des";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(' ' + postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');
}
//]]>
</script>
<script type='text/javascript'>
var numposts = 7;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var readmorelink = "(lagi)";
</script>
<script src="http://hompimpaalaihumgambreng.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
Simpan elemen halamanmu. Sekarang kita tinggal melakukan beberapa penyesuaian.
Sedikit Penyesuaian:
Gantilah http://hompimpaalaihumgambreng.blogspot.com dengan alamat blogmu.
Semua kode yang Saya beri warna merah adalah variabel yang bisa kamu utak-atik sesuai dengan bahasamu.
var numposts adalah variabel untuk menentukan jumlah posting yang tampil (dalam hal ini 7).
var numchars adalah variabel untuk menentukan jumlah teks konten posting yang diringkas/dipotong.
Di situ juga terdapat nilai-nilai true dan false. Cobalah untuk mengganti nilai true dengan false atau sebaliknya dan lihat sendiri perbedaannya.
Nah, sekarang kita sudah bisa memiliki model recent post/posting terbaru dengan tampilan dan bahasa yang bisa menyesuaikan diri dengan pemodel template kita seperti ini:
Sebenarnya ada banyak tutorial yang menyediakan script tautan pelangi seperti ini. Tapi untuk yang satu ini, Saya sudah sedikit mengompresnya sehingga berkasnya jadi sedikit lebih kecil ukurannya.
Letakkan saja kode itu di atas kode </head> atau letakkan dalam sebuah widget HTML/JavaScript. Efeknya bisa kalian lihat langsung di sini. Coba saja kamu dekatkan kursor mousemu ke tautan-tautan di blog ini.
Pada suatu hari Saya mencoba iseng membuat model-model menu navigasi, hingga akhirnya inilah yang Saya dapatkan (lihat demonya di sini). Saya rasa, desain menu navigasi Saya yang satu ini sudah cukup ganteng. Bagaimana menurut kalian?
Jika kalian berminat membuat menu navigasi seperti tampak di atas, maka ikutilah jalan kebenaran Saya ini:
Masuk ke tab Rancangan, kemudian pilih Edit HTML
Nah, setelah itu salinlah kode ini, kemudian letakkan di atas kode ]]></b:skin>
#hompinav {font:normal 0.9em Trebuchet MS,Arial,Sans-Serif;margin:0 0 50px;}
#hompinav ul {list-style-type:none;margin:0;padding:0;height:50px;}
#hompinav li a {display:inline;margin:0 2px;float:left;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;box-shadow:0 2px 3px #999;-moz-box-shadow:0 2px 3px #999;-webkit-box-shadow:0 2px 3px #999;}
#hompinav li a:link,
#hompinav li a:visited {font-weight:bold;color:#FFFFFF;background-color:#335577;border:2px outset #123;padding:5px 15px;text-decoration:none;}
#hompinav li a:hover {background-color:#882222;border:2px outset #992222;}
#hompinav li a:active {background-color:#333;border:2px outset #000;}
Yang tadi kita lakukan itu adalah memasang rancangan modelnya, sekarang kita tinggal meletakkan kerangka menunya. Tapi sebelum itu, kita harus tahu dulu bahwa untuk meletakkan sebuah objek dalam kode HTML, kita juga harus mengerti tentang di mana letak objek ini dan itu dalam tampilan di browser ketika kita sedang melihat dalam tampilan kode.
Oke, untuk lebih mudahnya, Saya sudah merangkumnya beberapa agar kalian lebih mudah meletakkannya. Namun satu hal: Jangan pernah tergantung dengan ID dan CLASS sebuah elemen, karena tidak semua template mengikuti standarisasi. Sebagai contoh, elemen Header tidak selalu memiliki id='header-wrapper', tetapi terkadang juga memiliki id='top-header' atau id='ndhas-blog' (jika kalian membuat template sendiri hehe..).
Lanjut ke langkah berikutnya:
Salinlah kode ini, kemudian letakkan di tempat yang kalian kehendaki:
Ingat, jangan terfokus pada ID dan CLASS, tetapi fokuslah pada type='header' dan judul blog (dalam hal ini: title='Hompimpa Alaihum Gambreng'). Nah, dari situ tarik pandangan matamu ke arah atas dan bawah sampai menemukan elemen <div> terluar. Di situlah batas akhir wilayah kekuasaan dari sebuah HEADER.
Sederhananya, untuk meletakkan menu navigasi di atas header, letakkan kode yang baru saja kamu salin tadi di atas <div id='header-wrapper'>. Sedangkan jika ingin meletakkannya di bawah header, letakkan di bawah kode </div>
Untuk meletakkan menu navigasi di atas wilayah posting, carilah dulu baris kode yang kurang lebih tampak seperti ini:
Nah, letakkan kode yang kamu salin tadi di bawah <div id='main-wrapper'>
Sekarang coba klik Pratinjau. Jika sudah puas, tinggal kita simpan templatemu, lalu masuk ke tahap penyesuaian dan pemahaman lebih lanjut.
Penyesuaian dan Pemahaman lebih Lanjut
Setiap unit menu didefinisikan sebagai:
<li><a href='#'>Nama Menu</a></li>
Kamu bisa dengan mudah melihat nama menu yang akan tampil nantinya dengan melihat teks di dalam wilayah kekuasaan <a href='#'>teks...?</a>
Oleh karena itu:
(Sebagai contoh) untuk membuat menu Beranda, gantilah simbol # dengan URL homepage blogmu, lalu gantilah Nama Menu menjadi Beranda sehingga menjadi seperti ini: <li><a href='http://www.latitudu.co.cc'>Beranda</a></li>
Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail
Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan judul artikel. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang terdiri dari gambar, judul beserta ringkasan artikelnya. Kamu tinggal memilih mana yang menurutmu lebih menarik atau sesuai dengan karaktermu. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini. Tapi jika tidak, mungkin kamu akan suka dengan tipe aplikasi artikel terkait thumbnail dan deskripsi artikel » baca tutorialnya di sini
Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail
Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun widget posting tampil.
Salin kode di bawah ini, kemudian letakkan di atas kode </head>
<b:if cond='data:blog.pageType == "item"'>
<style>
#at-gambar {text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#at-gambar a {color:#895F30;overflow-x:hidden;text-align:left;}
#at-gambar a:hover {background-color:#EAE7DB;color:#666;}
#at-gambar img {width:84px !important;height:84px !important;}
</style>
<script>
var defaultnoimage = "//1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF";
var maxresults = 5;
var splittercolor = "#EBEBEB";
var relatedpoststitle = "Catatan Lainnya:";
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/terkaitlib.js'></script>
</b:if>
Selanjutnya temukan kode ini:
<div class='post-footer'>
TIP: Tekan CTRL + F kemudian ketik class='post-footer' untuk mempermudah pencarian.
Jika sudah ketemu, salin kode ini kemudian letakkan di atasnya:
<!-- Artikel Terkait dengan Gambar -->
<b:if cond='data:blog.pageType == "item"'>
<div id='at-gambar'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=999"'></script>
</b:loop>
<script>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- Akhir Artikel Terkait dengan Gambar -->
Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan embel-embel post-footer umumnya memang berada di bawah posting. Begitu saja logikanya. Titik.
Jika sudah selesai, klik Simpan Template. Sekarang kita tinggal melakukan beberapa penyesuaian.
Penyesuaian-Penyesuaian
Atur ukuran thumbnail dengan mengubah nilai dalam selektor #at-gambar img{ ... }, yaitu pada deklarasi width:84px dan height:84px.
var defaultnoimage adalah tampilan untuk thumbnail cadangan jika posting yang dimaksud tidak memiliki gambar (umumnya menggunakan gambar "No Image").
var maxresults adalah variabel untuk menentukan jumlah posting maksimal yang akan ditampilkan.
var splittercolor adalah variabel untuk menentukan warna garis batas.
var relatedpoststitle adalah variabel untuk menentukan judul artikel terkaitmu (dalam hal ini adalah "Catatan Lainnya:").
Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada teks:
span {
text-shadow:10px 10px 7px #222;
}
Aturannya sama persis dengan CSS Box Shadow: 10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. CSS Text Shadow Inset itu tidak ada, namun keterbatasan tersebut bukan berarti bahwa kamu tidak bisa membuat efek-efek yang lebih dahsyat. Dengan sedikit kreativitas, sebenarnya kamu juga bisa membuat efek bayangan teks inset (baca tutorialnya di sini).
Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:
10px yang pertama adalah ukuran offset sumbu X, 10px yang ke dua adalah offset sumbu Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:
Dan ini adalah contoh-contoh penerapan yang lebih detail. Saya sudah memberikan warna merah dan hijau untuk mempertegas bagian mana yang harus menjadi perhatian:
