tag:blogger.com,1999:blog-89899347511014091102024-03-18T10:03:17.491+07:00BLOG NEBIAK SANGAUNgga' ada yang istimewa di sini, hanya tempatku belajar ngeblog, mencari sahabat dan berbagi ...Buchexhttp://www.blogger.com/profile/06453091683622654693noreply@blogger.comBlogger7125tag:blogger.com,1999:blog-8989934751101409110.post-56741706817194960642010-02-21T23:25:00.045+07:002012-02-28T08:55:15.610+07:00Bikin Background berbeda di setiap halaman<span xmlns=""></span><br />
<div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl-mUxiZUcWe_afA2Uq7LHTgOqeCkzNgIRnWJWvEn_UYdF8ONY1UI_z8oyE_AnOGOtRXZXw8aJJEqOv0CjfSC-8Q8NPfOgXOmPmOR3I0_-NL4_AU3Igamumvs_sVFImbf2XmmATKQzDfU/s1600-h/blog+nebiak+sangau.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl-mUxiZUcWe_afA2Uq7LHTgOqeCkzNgIRnWJWvEn_UYdF8ONY1UI_z8oyE_AnOGOtRXZXw8aJJEqOv0CjfSC-8Q8NPfOgXOmPmOR3I0_-NL4_AU3Igamumvs_sVFImbf2XmmATKQzDfU/s200/blog+nebiak+sangau.JPG" width="200" /></a></div><span xmlns="">Trik ini pernah ku ulas sebelumnya. Namun ketika blogspot menambahkan fitur halaman, aku jadi kepikiran buat bikin background yang berbeda-beda pada setiap halamannya. Akhirnya setelah browsing kenana kemari, aku ketemu cara untuk menempatkan script background pada halaman tertentu. Bukan Cuma buat backround sob, buat widget juga bisa, jadi kita bisa memilah dan memilih backround mana yang akan di tampilkan di halaman depan, dihalaman selajutnya ataupada halaman-halaman tertentu sesuai keinginan kita.</span><br />
<span xmlns=""></span><br />
<a name='more'></a></div><div style="text-align: justify;"><span xmlns="">Baik, karena judul di atas ngebahas soal backround, maka posting kali ini fokus kepada soal membuat background dan penempatannya. Agar lebih aman, sebaiknya sobat buat blog baru. Pakai template minima saja. Namanya juga experiment, iya ngga…<br />
</span></div><div style="text-align: justify;"><span xmlns="">Ok, mari kita pehatikan script di bawah ini :</span><br />
<span xmlns=""><br />
</span></div><span style="background-color: #ea9999;"><style type="text/css"></span><br />
<span style="background-color: #ea9999;">{ background-color:transparent; }</span><br />
<span style="background-color: #ea9999;">body {background-image:url</span><br />
<span style="background-color: #ea9999;">('URL _GAMBARMU');</span><br />
<span style="background-color: #ea9999;"> background-attachment: fixed;</span><br />
<span style="background-color: #ea9999;"> background-position:top left;</span><br />
<span style="background-color: #ea9999;"> background-repeat:no-repeat;</span><br />
<span style="background-color: #ea9999;"></style></span><br />
<br />
<div style="background-color: #ea9999;"><span style="background-color: #ffe599;"></span></div><span xmlns="">Penjelasannya sebagai berikut :<br />
</span><br />
<span xmlns=""><br />
</span><br />
<span xmlns="">Ganti tulisan URL_GAMBARMU dengan url gambar sobat.<br />
</span><br />
<span xmlns="">Background attachment: fixed bisa sobat ganti dengan scrool.<br />
</span><br />
<span xmlns="">Background –position: top left, boleh sobat ganti dengan center, top right, bottom left atau bottom right, sesuaikan dengan template blogmu.<br />
</span><br />
<span xmlns="">Background-reapet:no-reapet, artinya background tersebut tetap/statis pada tempatnya jika sobat menaikkan atau menurunkan halaman, kalo pengen backroundnya ikut bergerak, hapus tulisan no-<br />
</span><br />
<span xmlns=""><br />
</span><br />
<div style="text-align: justify;"><span xmlns="">Edit terlebih dahulu menggunakan wordpad atau document txt. Setelah semua kode pas, baru kita pasang ke blog dengan cara seperti memasang buku tamu misalnya, yaitu dengan mengklik customize di navbar, kemudian layout lalu klik add a new widget, pilih <i>HTML/JavaScript</i>. Beri nama misalnya BACKGROUND 1, kemudian kopi kode yang telah kita edit tadi lalu pastekan ke ruang konten. Kalo uda klik SAVE.<br />
</span></div><span xmlns=""><br />
</span><br />
<span xmlns="">Sampe di sini, sobat udah bisa melihat efek backround tadi bila sobat menggunakan template minima. Nah sekarang misalkan kita ingin backround tadi di halaman about, sebelumnya, sobat udah harus punya atau membuat halaman khusus untuk halaman "About" tadi.<br />
</span><br />
<span xmlns=""><br />
</span><br />
<div style="text-align: justify;"><span xmlns="">Klik About pada pages blogsobat, lihat alamatnya di adress bar, ku contohkan seperti ini nih :<br />
</span></div><div style="text-align: justify;"><span xmlns=""><a href="http://namablogmu.blogspot.com/p/about.html">http://namablogmu.blogspot.com/p/about.html</a> kopi alamat tersebut dan pastekan ke worpad atau document txt. Selanjunya perhaikan kode di bawah ini :<br />
</span></div><div style="margin-left: 36pt;"><span xmlns=""><span style="font-family: 'Times New Roman'; font-size: 12pt;"><b:if cond='data:blog.url == &quot;URL_HALAMAN_DISINI&quot;'></span></span><br />
<br />
</div><div style="text-align: justify;"><span xmlns=""><span style="font-family: 'Times New Roman'; font-size: 12pt;">Nah, ganti tulisan URL_HALAMAN_DISINI dengan url halaman about yang kita kopi tadi. Kalo udah selesai, sekarang kita menuju ke ruang edit HTML utuk pemasangannya. Klik lagi customize di navbar, kemudian layout lalu edit HTML. Jangan lupa centeng Expand Widget Template.<br />
</span></span></div><div style="text-align: justify;"><span xmlns=""><span style="font-family: 'Times New Roman'; font-size: 12pt;">Setelah sampai di ruang edit html cari kode yang kita pasang tadi dengan menekan CTRL+F di keyboad, lalu ketikkan BACKGROUND 1. Nah perhatikan cara menempatkan script tadi di bawah ini :</span></span><br />
<span xmlns=""><span style="font-family: 'Times New Roman'; font-size: 12pt;"><br />
</span></span></div><div style="background-color: #ead1dc;"><span style="font-family: 'Courier New';"><b:widget id='HTML14' locked='false' title='Background 1' type='HTML'><br />
<b:includable id='main'><br />
<b><span style="color: red;"><b:if cond='data:blog.url == &quot;http://namablogmu.blogspot.com/p/about.html&quot;'></span></b><br />
<!-- only display title if it's non-empty --><br />
<b:if cond='data:title != &quot;&quot;'><br />
<h2 class='title'><data:title/></h2><br />
</b:if><br />
<div class='widget-content'><br />
<data:content/><br />
</div><br />
<br />
<b:include name='quickedit'/><br />
<b><span style="color: red;"></b:if></span></b><br />
</b:includable><br />
</b:widget></span></div><br />
<span xmlns=""><span style="background-color: white; font-family: 'Times New Roman'; font-size: 12pt;">Perhatikan penempatan kode :</span></span><br />
<span xmlns=""><span style="background-color: white; font-family: 'Times New Roman'; font-size: 12pt;"><br />
</span></span><br />
<span xmlns=""><span style="color: lime; font-family: 'Courier New'; font-size: 10pt;"><b style="background-color: white;"><b:if cond='data:blog.url == &quot;http://namablogmu.blogspot.com/p/about.html&quot;'></b></span></span><br />
<span xmlns=""><span style="font-family: 'Courier New'; font-size: 10pt;"><b style="background-color: white;"><br />
</b></span></span><br />
<span xmlns=""><span style="background-color: white; font-family: 'Times New Roman'; font-size: 12pt;">Yang berada tepat di bawah kode :</span></span><br />
<span xmlns=""><span style="background-color: white; font-family: 'Times New Roman'; font-size: 12pt;"><br />
</span></span><br />
<div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat;"><span xmlns=""><span style="background-color: white; font-family: 'Courier New'; font-size: 10pt;"><b:includable id='main'><br />
</span></span></div><div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat;"><span style="background-color: white;" xmlns=""><br />
</span></div><div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat;"><span xmlns=""><span style="background-color: white; font-family: 'Times New Roman'; font-size: 12pt;">Lalu ditutup dengan kode :<br />
</span></span></div><div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat;"><span style="background-color: white;" xmlns=""><br />
</span></div><div><span style="color: yellow; font-family: 'Courier New';"><b style="background-color: white;"></b:if></b></span></div><div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat;"><span style="background-color: white;" xmlns=""><br />
</span></div><div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat;"><span xmlns=""><span style="background-color: white; font-family: 'Times New Roman'; font-size: 12pt;">Yang berda tepat di bawah kode :<br />
</span></span></div><div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat;"><span style="background-color: white;" xmlns=""><br />
</span></div><div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat;"><span style="background-color: white; color: yellow; font-family: 'Courier New';"><b:include name='quickedit'/></span></div><div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat;"><span style="background-color: white;" xmlns=""><br />
</span></div><div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; text-align: justify;"><span style="background-color: white;" xmlns="">Nah, Jika sobat ingin membuat backround untuk halaman yang lain, silahkan ikuti langkah-langkah di atas, pelan-pelan aja sob. Pasti bisa. Oh iya, sekali lagi nih, trik tersebut bisa sobat terapkan utuntuk mengatur tampilan widget agar lebih teratur, maksudku biar ngga pada numpuk di halaman depan, tampilan blog kita khan jadi lebih rapi dan paling tidak bisa ngeringankan loading pagenya,<br />
</span></div><div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; text-align: justify;"><span style="background-color: white;" xmlns=""><br />
</span></div><div style="background-attachment: scroll; background-clip: initial; background-image: none; background-origin: initial; background-position: 0% 0%; background-repeat: repeat repeat; text-align: justify;"><span xmlns="">Sampe di sini, mudah-mudahan bisa dipahami. Maklum bikin postingnya buru-buru, nyambi jadi baby sitter ceritanya. Kritik saran dan masukan, koment aja deh, asal jangan dispam aja… jiakakakak… Tank's sob… <span style="font-family: 'Courier New'; font-size: 10pt;"><br />
</span></span></div><span xmlns=""> </span><br />
<span xmlns=""></span>Buchexhttp://www.blogger.com/profile/06453091683622654693noreply@blogger.com21tag:blogger.com,1999:blog-8989934751101409110.post-23417648689825431002009-11-04T13:20:00.018+07:002012-01-30T11:01:25.599+07:00Memasang Recent Post ke dalam Kotak Blogroll<div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHx99Q_SUppduPl-L3vySTplI_sJpJR0XOJ-lv_UbFOIi7MRbF5UsRR7yee5nHJqbx2CwJRiD-9lubosYQkGZG9Sc1yLD1_CzSaXhLYT8u2vqWkHY5gUQbaue85kAYnwy2zwfTQmc26X4/s1600-h/rpost3.jpg" imageanchor="1" linkindex="44" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHx99Q_SUppduPl-L3vySTplI_sJpJR0XOJ-lv_UbFOIi7MRbF5UsRR7yee5nHJqbx2CwJRiD-9lubosYQkGZG9Sc1yLD1_CzSaXhLYT8u2vqWkHY5gUQbaue85kAYnwy2zwfTQmc26X4/s200/rpost3.jpg" /></a></div>Andai kata, umpama, misalnya... rekan bloggers bikin recent post kayak yang aku paparkan pada postingan kemaren dan ingin menampilkan 10 atau lebih postingan sekaligus, sudah barang tentu akan memakan banyak tempat karena recent post yang kita pasang bakal tampil amat sangat pannnjjjjjaaaaannnggggg..... ke bawah, sementara misalnya recent post tersebut sobat taruh pada sidebar yang berukuran kecil. Tenang... gwa punya sedikit trik untuk mengatasi masalah tersebut yaitu dengan menaruh recent post tadi ke dalam sebuah kotak blogroll. Gimana, masuk akal ngga kira-kira???..</div><br />
<a name='more'></a><br />
<br />
Ok, langsung ke TKP aja dech biar jelas, youk...<br />
<br />
<div style="text-align: justify;">Pertama-tama, marilah kita download dulu template kita agar terhidar dari kemungkinan buruk yang tak terduga. Kalo udah, lanjutkan perjuangannya hingga titik darah yang penghabisan yaitu login ke blogspot, klik customize, klik layout lantas edit html dan jangan lupa contreng kotak Expand Widget Templates. Silah kan cari kode untuk Recent post tadi. untuk jelasnya, perhatikan barisan kode di bawah ini :<br />
<br />
</div><div style="background-color: #9fc5e8;"><div id='sidebar-wrapper'></div><div style="background-color: #9fc5e8;"> <b:section class='sidebar' id='sidebar' preferred='yes'></div><div style="background-color: #9fc5e8;"><b:widget id='Gadget1' locked='false' title='Recent Posts' type='Gadget'></div><div style="background-color: #9fc5e8;"><span style="color: black;"><b:includable id='main'> </span><span style="color: #cc0000;"></span></div><div style="background-color: #9fc5e8;"> <!-- only display title if it's non-empty --></div><div style="background-color: #9fc5e8;"> <b:if cond='data:renderingUrl != &quot;&quot;'></div><div style="background-color: #9fc5e8;"> <b:if cond='data:title != &quot;&quot;'></div><div style="background-color: #9fc5e8;"> <h2 class='title'><data:title/></h2></div><div style="background-color: #9fc5e8;"> </b:if></div><div style="background-color: #9fc5e8;"> <b:if cond='data:gadgetSnippet != &quot;&quot;'></div><div style="background-color: #9fc5e8;"> <data:gadgetSnippet/></div><div style="background-color: #9fc5e8;"> <b:else/></div><div style="background-color: #9fc5e8;"> <div class='widget-content'></div><div style="background-color: #9fc5e8;"> <b:if cond='data:trackingUrl != &quot;&quot;'></div><div style="background-color: #9fc5e8;"> <img expr:src='data:trackingUrl' height='1' width='1'/></div><div style="background-color: #9fc5e8;"> </b:if></div><div style="background-color: #9fc5e8;"><br />
</div><div style="background-color: #9fc5e8;"> <iframe expr:height='data:height' expr:id='data:moduleId' expr:name='data:moduleId' expr:src='data:renderingUrl' frameborder='0' style='width: 100%; display: block'></div><div style="background-color: #9fc5e8;"> </iframe></div><div style="background-color: #9fc5e8;"> </div></div><div style="background-color: #9fc5e8;"> </b:if></div><div style="background-color: #9fc5e8;"> <b:else/></div><div style="background-color: #9fc5e8;"> <data:errorMessage/></div><div style="background-color: #9fc5e8;"> </b:if></div><div style="background-color: #9fc5e8;"><br />
</div><div style="background-color: #9fc5e8;"> <b:include name='quickedit'/><span style="color: #cc0000;"></span></div><div style="background-color: #9fc5e8;"></b:includable></div><div style="background-color: #9fc5e8;"></b:widget></div><br />
<div style="text-align: justify;">Nah, kalo udah ketemu, tugas kita sekarang adalah menyelipkan kode kotak blogroll tadi di antara kode-kode di atas, bingung? lihat dech kode di bawah dan perhatikan penempatan kode yang berwarna merah. </div><div style="background-color: #9fc5e8;"></div><br />
<div style="background-color: #ead1dc;"><div id='sidebar-wrapper'></div><div style="background-color: #ead1dc;"> <b:section class='sidebar' id='sidebar' preferred='yes'></div><div style="background-color: #ead1dc;"><b:widget id='Gadget1' locked='false' title='Recent Posts' type='Gadget'></div><div style="background-color: #ead1dc;"><span style="color: black;"><b:includable id='main'> </span></div><div style="background-color: #ead1dc;"><span style="color: #cc0000;"><div style='border: 0px solid rgb(153, 153, 153); overflow: auto; width: 200px; height: 180px; text-align: left; '></span></div><div style="background-color: #ead1dc;"> <!-- only display title if it's non-empty --></div><div style="background-color: #ead1dc;"> <b:if cond='data:renderingUrl != &quot;&quot;'></div><div style="background-color: #ead1dc;"> <b:if cond='data:title != &quot;&quot;'></div><div style="background-color: #ead1dc;"> <h2 class='title'><data:title/></h2></div><div style="background-color: #ead1dc;"> </b:if></div><div style="background-color: #ead1dc;"> <b:if cond='data:gadgetSnippet != &quot;&quot;'></div><div style="background-color: #ead1dc;"> <data:gadgetSnippet/></div><div style="background-color: #ead1dc;"> <b:else/></div><div style="background-color: #ead1dc;"> <div class='widget-content'></div><div style="background-color: #ead1dc;"> <b:if cond='data:trackingUrl != &quot;&quot;'></div><div style="background-color: #ead1dc;"> <img expr:src='data:trackingUrl' height='1' width='1'/></div><div style="background-color: #ead1dc;"> </b:if></div><div style="background-color: #ead1dc;"><br />
</div><div style="background-color: #ead1dc;"> <iframe expr:height='data:height' expr:id='data:moduleId' expr:name='data:moduleId' expr:src='data:renderingUrl' frameborder='0' style='width: 100%; display: block'></div><div style="background-color: #ead1dc;"> </iframe></div><div style="background-color: #ead1dc;"> </div></div><div style="background-color: #ead1dc;"> </b:if></div><div style="background-color: #ead1dc;"> <b:else/></div><div style="background-color: #ead1dc;"> <data:errorMessage/></div><div style="background-color: #ead1dc;"> </b:if></div><div style="background-color: #ead1dc;"><br />
</div><div style="background-color: #ead1dc;"> <b:include name='quickedit'/></div><div style="background-color: #ead1dc;"><span style="color: #cc0000;"></div></span></div><div style="background-color: #ead1dc;"></b:includable></div><div style="background-color: #ead1dc;"></b:widget></div><br />
<div style="text-align: justify;">Silahkan dech sobat atur sendiri tinggi dan lebar kotaknya, so pasti udah pada jago tuch. Bila dah kelar, Klik save dan liaht dech hasilnya</div><br />
Ok bloggers, selamat mencoba....<br />
<br />
<a href="http://www.blogger.com/post-edit.g?blogID=8989934751101409110&postID=2341764868982543100&from=pencil#" title="Back to top">kembali ke atas</a><br />
<br />
<a href="http://www.bloglines.com/sub/http://feeds2.feedburner.com/blogspot/xICH" linkindex="45"><br />
<img alt="Subscribe with Bloglines" border="0" src="http://static.bloglines.com/images/lang/default/sub_modern2.gif" /><br />
</a>Buchexhttp://www.blogger.com/profile/06453091683622654693noreply@blogger.com12tag:blogger.com,1999:blog-8989934751101409110.post-2773734784639672172009-10-23T08:03:00.003+07:002009-10-30T08:10:28.061+07:00Related Posts dengan Thumbnail untuk Blogger<div class="separator" style="clear: both; text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGlkLmViS3GOVmHqi4gngE_DIIhaZf_vVqrEC0h-1pGJHd0j-i8AoOmbb3nHVSTJ3Hh31ImCGaD2MYM_D24AC_O7j9QDpCLL7US5Y71CoJstoMYNZzTHkyRfuh7oZXZHpl4GPgl8Sqdd8/s1600-h/Relatedpost_dgn_thumbanil.jpg" imageanchor="1" linkindex="19" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGlkLmViS3GOVmHqi4gngE_DIIhaZf_vVqrEC0h-1pGJHd0j-i8AoOmbb3nHVSTJ3Hh31ImCGaD2MYM_D24AC_O7j9QDpCLL7US5Y71CoJstoMYNZzTHkyRfuh7oZXZHpl4GPgl8Sqdd8/s320/Relatedpost_dgn_thumbanil.jpg" /></a>Satu lagi trik yang lumayan asik bagiku adalah memasang related post dengan thumbanils yang aku dapet dari si <a href="http://www.bloggerbuster.com/2009/09/related-posts-with-thumbnails-for.html#more" linkindex="20" target="_blank">Amanda</a>. Cara pemasangannya sangatlah mudah. Anda tinggal megkopi kode yang diberikan lalu mempastekannya ke tempat yang tepat. Jadi deh. Seperti gambar di samping. Lumayanlah buat ngeramein tampilan sekaligus memudahkan pengunjung untuk melihat apa apa saja tulisan kita dengan kategori yang bersangkutan.<br />
</div><br />
<br />
<div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Yang tertarik, silahkan langsung ke TKP. Tancap bro ....<br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><br />
</div><div class="separator" style="clear: both; text-align: justify;"><br />
</div><div style="text-align: justify;"><a href="http://www.blogger.com/post-edit.g?blogID=8989934751101409110&postID=277373478463967217#" title="Back to top">kembali ke atas</a><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><a href="http://www.bloglines.com/sub/http://feeds2.feedburner.com/blogspot/xICH" linkindex="21"><br />
<img alt="Subscribe with Bloglines" border="0" src="http://static.bloglines.com/images/lang/default/sub_modern2.gif" /><br />
</a><br />
</div>Buchexhttp://www.blogger.com/profile/06453091683622654693noreply@blogger.com4tag:blogger.com,1999:blog-8989934751101409110.post-45378838151296632682009-03-18T15:13:00.009+07:002011-06-09T14:01:38.504+07:00Tips dan Trik Memasang Widget di sudut blogSetelah meminta izin ke yang empunya posting, kembali Kojek menulis tentang sebuah ide sederhana untuk mempercatik tampilan blog. Adapun trik kali ini adalah bagaimana caranya kita memasang sebuah widget/aksesoris,image atau banner ke salah satu sudut blog seolah olah widget/aksesoris,image atau banner itu tadi seakan-akan melayang-layang di blog kita. Bukan cuma satu sudut saja yg bisa kita hias dengan trik ini, keempat sudut blog bisa kita pasangi berbagai gadget atau widge/aksesoris. Namun pertimbangkanlah dari segi estetika (ceaellah ... ). Jangan malah membuat pengunjung bingung dan yang pasti perhatikan loading pagenya. Jadi Inga' .. Inga' ....<br />
<br />
<a name='more'></a><br />
<br />
<br />
Untuk demonya, klik <a href="http://ngeblog-youk.blogspot.com/" target="_blank">disini</a><br />
<br />
<br />
<br />
<br />
<span style="font-weight: bold;">A. WIDGET/ AKSESORIS DI SUDUT KIRI BAWAH</span><br />
<br />
<br />
1. Login dulu ke blogger lalu klik "<span style="font-weight: bold;">Layout -->> Edit HTML</span><br />
<br />
2. Cari kode <span style="color: #cc0000; font-weight: bold;">]]></b:skin></span> kemudian tempatkan kode di bawah ini di atas kode <span style="color: #cc0000; font-weight: bold;">]]></b:skin></span><br />
<br />
<br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(218, 165, 32) none repeat scroll 0% 0%; font-size: 100%; text-align: justify;">#<span style="color: #3333ff;"><span style="color: #3366ff; font-weight: bold;">trik_kiribawah</span> </span>{<br />
position:fixed;_position:absolute;<span style="color: white;"><span style="color: yellow; font-weight: bold;">bottom</span><span style="color: black;">:</span></span>0px; <span style="color: #009900; font-weight: bold;">left</span>:0px;<br />
clip:inherit;<br />
_top:expression(document.documentElement.scrollTop+<br />
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }</div><br />
<br />
Kode yang berwarna biru adalah nama dari script ini, kode <span style="font-weight: bold;">bottom</span> yang berwarna kuning bisa di ganti dengan <span style="font-weight: bold;">top</span> kemudian kode <span style="font-weight: bold;">left </span>yang berwarna hijau bisa di ganti dengan <span style="font-weight: bold;">right</span><br />
<br />
<br />
4. Langkah selanjutnya yaitu letakkan script berikut ini sebelum kode <span style="color: red;"></body></span><br />
<br />
<br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(143, 188, 143) none repeat scroll 0% 0%; font-size: 100%; text-align: left;"><span style="font-weight: bold;"><div id='<span style="color: #cc0000;">trik_kiribawah</span>'></span><br />
<span style="color: #3333ff;"><script src='http://widgets.amung.us/classic.js' type='text/javascript'/><script type='text/javascript'>WAU_classic(&#39;hu1vhdkrz2pe&#39;)</script><br/></span><br />
<span style="color: #3333ff;"><a href='ymsgr:sendIM?entobet'> <img src='http://opi.yahoo.com/online?u=entobet&amp;m=g&amp;t=9&amp;l=us'/></a></span><br />
<span style="font-weight: bold;"></div></span></div><br />
5. Kode yang berwarna biru adalah kode widget yang bisa diganti dengan widget lain sesuai selera.<br />
<br />
6. klik <span style="font-weight: bold;">save</span> lalu <span style="font-weight: bold;">view</span> blog untuk melihat hasilnya.<br />
<br />
<br />
<span style="font-weight: bold;">B. WIDGET/ AKSESORIS DI SUDUT KANAN BAWAH</span><br />
<br />
Nah, sekarang kita akan memasang widget/aksesoris lain ke sudut kanan blog kita. Langkah pemasangannya sama dengan langkah langkah di atas. Hanya perlu mengedit beberapa kode saja. Agar lebih jelas saya uraikan aja di sini akal-akalan kita ...<br />
<br />
Perhatikan baik baik perubahan 2 buah script/kode di bawah ini :<br />
<br />
a. <span style="font-style: italic;">Kode Pertama :</span><br />
<br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(218, 165, 32) none repeat scroll 0% 0%; font-size: 100%; text-align: justify;">#<span style="color: #3333ff;"><span style="color: #3366ff; font-weight: bold;">trik_kananbawah</span> </span>{<br />
position:fixed;_position:absolute;<span style="color: white;"><span style="color: yellow; font-weight: bold;">bottom</span><span style="color: black;">:</span></span>0px; <span style="color: #009900; font-weight: bold;">right</span>:0px;<br />
clip:inherit;<br />
_top:expression(document.documentElement.scrollTop+<br />
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }</div><br />
a. <span style="font-style: italic;">Kode Ke dua :</span><br />
<br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(143, 188, 143) none repeat scroll 0% 0%; font-size: 100%; text-align: left;"><span style="font-weight: bold;"><div id='<span style="color: #cc0000;">trik_kananbawah</span>'></span><br />
<span style="color: #3333ff;"><script src='http://widgets.amung.us/classic.js' type='text/javascript'/><script type='text/javascript'>WAU_classic(&#39;hu1vhdkrz2pe&#39;)</script><br/></span><br />
<span style="color: #3333ff;"><a href='ymsgr:sendIM?entobet'> <img src='http://opi.yahoo.com/online?u=entobet&amp;m=g&amp;t=9&amp;l=us'/></a></span><br />
<span style="font-weight: bold;"></div></span></div><br />
<br />
<span style="font-style: italic;">Pada kode pertama perubahannya bisa di lihat seperti di bawah ini</span> :<br />
<br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(220, 220, 220) none repeat scroll 0% 0%; font-size: 100%; text-align: justify;">kode #<span style="color: #3333ff;"><span style="color: #3366ff; font-weight: bold;">trik_kiribawah</span> </span>{<span style="font-weight: bold;"> </span>berubah menjadi<span style="font-weight: bold;"> </span>#<span style="color: #3333ff;"><span style="color: #3366ff; font-weight: bold;">trik_kananbawah</span> </span>{ </div><br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(220, 220, 220) none repeat scroll 0% 0%; font-size: 100%; text-align: justify;">lalu <span style="color: #009900; font-weight: bold;">left</span> berubah menjadi <span style="color: #009900; font-weight: bold;">right</span></div><br />
Pada kode <span style="font-style: italic;">ke dua</span>, nama kodenya yang kita rubah yaitu<br />
<br />
<span style="font-weight: bold;"></span><br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(220, 220, 220) none repeat scroll 0% 0%; font-size: 100%; text-align: justify;"><span style="font-weight: bold;"><div id='<span style="color: #cc0000;">trik_kiribawah</span>'></span></div><span style="font-weight: bold;"></span><br />
menjadi<br />
<br />
<span style="font-weight: bold;"> </span><span style="font-weight: bold;"></span><br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(220, 220, 220) none repeat scroll 0% 0%; font-size: 100%; text-align: justify;"><span style="font-weight: bold;"><div id='<span style="color: #cc0000;">trik_kananbawah</span>'></span></div><span style="font-weight: bold;"><br />
<br />
</span>Jangan lupa menggati kode yang berada di antara kode <span style="font-weight: bold;"><div id='</span><span style="color: #cc0000; font-weight: bold;">trik_kananbawah</span><span style="font-weight: bold;">'></span> dan kode <span style="font-weight: bold;"></div></span> dengan kode widget/aksesoris yang lain.<br />
<br />
Anda juga tinggal mengedit sedikit saja kode-kode tersebut bila ide Anda sama nyelenehnya denganku yaitu "MEMASANG WIDGET/AKSESORIS DI KEEMPAT SUDUT BLOG"<span style="font-weight: bold;">. </span>Ada yang mau nyoba ...????<span style="font-weight: bold;"><br />
<br />
</span><span style="font-style: italic;">Catatan : Terima Kasih untuk <a href="http://trick-blog.blogspot.com/" target="_blank">KENDHIN</a> yang telah memberi izin untuk mencatut scriptnya</span><span style="font-weight: bold;"><span style="font-style: italic;">.<br />
<br />
<br />
</span><a href="#">Back to Top</a></span><br />
<br />
<a href="http://www.bloglines.com/sub/http://feeds2.feedburner.com/blogspot/xICH"><br />
<img alt="Subscribe with Bloglines" border="0" src="http://static.bloglines.com/images/lang/default/sub_modern2.gif" /><br />
</a>Buchexhttp://www.blogger.com/profile/06453091683622654693noreply@blogger.com5tag:blogger.com,1999:blog-8989934751101409110.post-89591783159930982952009-03-06T07:41:00.037+07:002010-05-02T22:26:19.739+07:00Cara membuat backround berbeda pada setiap halaman blog<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><br />
<img alt="" border="0" height="130" src="http://syahenimkojek.googlepages.com/bns_kojek_background.JPG" style="float: left; height: 100px; margin: 0pt 10px 10px 0pt; width: 300px;" width="300" />Bikin background yang berbeda untuk setiap halaman blog? kenapa tidak. Lumayan dech buat tampil agak lain dari yang lain. Narsis gitu ..., dan pengunjung ngga bakalan bosan menjelajah blog kita karena bisa tampil dengan background yang berbeda-beda di setiap halamannya.<br />
<br />
<a name='more'></a> Setelah sekian lama ngilikin template minima klasik, plus belajar apa itu css background, akhirnya ide untuk membuat background berbeda di setiap halaman blog bisa aku terapkan. Mumpung lagi hangat nih di kepala, mending aku posting aja dari pada keburu hilang, ya ngga...</div></div><div style="text-align: justify;"><br />
Agak njelimet sih bro, tapi pelan-pelan pasti bisa. Baik, sebelum anda mulai ngilikin template, ada baiknya sobat membaca postingan tentang cara mengganti background blog di sini atau di <a href="http://http//sangau.blogspot.com/2008/11/bermain-main-dengan-background-2.html" linkindex="26">sini</a>.</div><br />
<span style="font-weight: bold;">Persiapan :</span><br />
<br />
1. Buat dulu sebuah blog baru<br />
2. isi dengan sembarang posting<br />
3. buatkan label untuk postingan tadi, misalnya, blog, blogger hack, template, article dan sebagainya.<br />
4. Lakukan trik <span style="font-style: italic; font-weight: bold;">trik </span><span style="font-style: italic; font-weight: bold;">menampilkan </span><span style="font-style: italic; font-weight: bold;">semua judul posting </span>atau<span style="font-style: italic; font-weight: bold;"> menampilkan hanya judul posting</span><br />
5. Buat juga <span style="font-weight: bold;">Readmore </span>nya sekalian.<br />
6. Posting tulisanmu.<br />
7. Pasang widget label di sidebar blogmu<br />
6. Bila semua udah selesai, sekarang kamu bisa melangkah ke tahap berikutnya<br />
<br />
<span style="font-weight: bold;">Memasang background utama :</span><br />
<br />
Background utama yang kumaksud di sini adalah script backgroud yang terpasang langsung di Template blogmu, alias terpasang pada struktrur htmlnya. Ok kita lanjut yach.<br />
<br />
1. Kopi kode di bawah ini, lalu edit dengan menggunakan worpad atau document txt.<br />
<br />
<blockquote style="background-color: lime;">body {background-image: url("<span style="color: #cc0000;">http://syahenimkojek.googlepages.com/slank_logo2.jpg</span>"); background-position: <span style="color: #ff6600;">left</span>; background-repeat: <span style="color: #3333ff;">no-repeat</span>; background-attachment: fixed;<br />
color:$textcolor;<br />
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;<br />
font-size/* */:/**/small;<br />
font-size: /**/small;<br />
}</blockquote><br />
<div style="text-align: justify;">2. Gantilah url gambar/image yang berwarna merah dengan url gambarmu.<br />
<br />
3. Kode <span style="color: black; font-weight: bold;">center</span><span style="font-weight: bold;"> no-repeat;</span> (Yang berwarna orange) bisa kamu ganti dengan <span style="font-weight: bold;">left</span> <span style="font-weight: bold;">atau right</span>. Ini adalah kode yang mengatur tata letak gambar pada blogmua, apakah mau di taruh di tengah, di kanan atau di kiri.<br />
<br />
4. Kode <span style="color: #3333ff;">no-repeat</span>; boleh kamu hapus bila akan menggunakan gambar yang kecil dan memerlukan pengulangan agar gambarnya menjadi penuh. Contahnya seperti gambar di bawah ini ;<br />
<br />
<a href="http://syahenimkojek.googlepages.com/contoh_backround.gif" linkindex="27" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" src="http://syahenimkojek.googlepages.com/contoh_backround.gif" style="cursor: pointer; display: block; height: 146px; margin: 0px auto 10px; text-align: center; width: 157px;" /></a><br />
<br />
5. Kalau sudah selesai ngeditnya , balik lagi ke blogmu. Cari kode seperti di bawah ini :</div><br />
<blockquote style="background-color: lime;"><span style="color: black;">body {</span><br />
<span style="color: black;">background:$bgcolor;</span><br />
<span style="color: black;">margin:0;</span><br />
<span style="color: black;">color:$textcolor;</span><br />
<span style="color: black;">font:x-small Georgia Serif;</span><br />
<span style="color: black;">font-size/* */:/**/small;</span><br />
<span style="color: black;">font-size: /**/small;</span><br />
<span style="color: black;">text-align: center;</span><br />
<span style="color: black;">}</span></blockquote>5. Hapus seluruh kode di atas, lalu gantikan dengan kode hasil editan kita tadi.<br />
<br />
6. Jika udah beres, klik SAVE<br />
<br />
Nah sampai pada tahap ini, kita sudah bisa melihat perubahan background blog kita, klik aja View Blog.<br />
<br />
<span style="font-weight: bold;">Memasang background untuk halaman depan :</span><br />
<br />
<div style="text-align: justify;">Halaman depan adalah halaman atau tampilan utama blog kita. Di halaman ini kita menempatkan berbagai widget/aksesoris yang wajib ada di halaman depan, diantaranya semisal tab menu, link para sobat kita, label, buku tamu atau widget-widget lain yang kita anggap perlu demi memudahkan pengunjug menjelajah isi blog kita.<br />
<br />
Kerja kita kali ini agak sedikit praktis, karena css background dipasang seperti layaknya kita menambah widget/aksesoris ke sidebar blog.</div><br />
<span style="color: #663300; font-style: italic; font-weight: bold;">Langkah pertama :</span><br />
<br />
a. Copy script di bawah ini :<br />
<div style="background-color: yellow;"><br />
</div><blockquote style="background-color: yellow;"><span style="background-color: yellow; color: black;">body {background-image: url("</span><span style="color: #cc0000;"><br />
<span style="background-color: yellow; color: black;"><style type="text/css"></span><br />
<span style="background-color: yellow; color: black;"><span style="color: black;">body {background-image: url("</span><span style="color: #cc0000;">http://s212.photobucket.com/albums/cc144/coyote6969/th_devil3.gif</span>"); background-position: <span style="color: #3333ff;">left</span>; background-repeat: <span style="color: #ff6600;">no-repeat</span><span style="color: black;">; background-attachment: fixed; }.bkgspc {margin-top:10px;color:#909090;font-size:10px;font-family:Arial;}.bkgspc a {color:#909090;}</style><div class="bkgspc" align="center"></span></span><br />
<span style="background-color: yellow; color: black;">Visit InfoServe for <a href="http://sangau.blogspot.com/" target="_blank">Blog Nebiak Sangau</a>.</div></span></span></blockquote><br />
<div style="text-align: justify;">b. Edit dengan menggunakan wordpad atau document.txt.<br />
<br />
c. Ganti url gambar (kode yang berwarna merah ) dengan url gambarmu<br />
<br />
d. Ganti kode (yang berwarna biru) dengan left atau right, kode ini merupakan kode yang mengatur letak gambarmu itu nantinya.<br />
<br />
e. Kode <span style="color: #cc0000;"><span style="color: black;"><span style="color: #ff6600;">no-repeat</span>; bloeh kamu hapus kalo memakai gambar dengan ukiran kecil atau berupa motif yang memerlukan pengulangan untuk bisa tampil penuh pada seluruh halaman</span></span><br />
<br />
<span style="color: #663333; font-style: italic; font-weight: bold;">Langkah ke-dua :</span><br />
<br />
Sekarang kita memasuki tahap kedua dimana kita akan memasang kode hasil editan tadi ke sidebar blog. pasti udah pada bisa dech. Namun ngga ada salahnya kalau aku uraikan kembali di sini. nyok ...<br />
<br />
1. Login ke blogspot.<br />
2, Klik Customize.<br />
3. Klik Layout.<br />
4. Klik Add a Gadget.<br />
5. Pilih HTML/JavaScript.<br />
6. Beri nama CSS1 pada kolom titel atau kolom judul, ini hanya penamaan saja. Terserah mau dikasih nama apa. Yang jelas, nama ini untuk mempermudah kita mencari widget ini nanti di ruang edit html.<br />
7. Pastekan kode hasil editan kita tadi ke ruang conten.<br />
8. Save.<br />
<br />
<span style="color: #993300; font-style: italic; font-weight: bold;">Langkah ke-tiga :</span><br />
<br />
Sekarang kita masuk pada langkah ke_tiga, dimana kita akan mengatur kode css backround yang kita pasang dengan nama CSS1 pada sidebar tadi supaya tampil pada halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya. Udah siap??? let's go ...<br />
<br />
1. Login ke blogspot.<br />
2, Klik Customize.<br />
3. Klik Layout.<br />
4. Klik Edit HTML<br />
5. Conteng kotak Expand Widget Templates<br />
6. Cari kode seperti di bawah ini : Kode yang berwarna biru merupakan kode tambahan yang membuat css background hasil editan kita tadi tampil di halaman utama atau front page.<br />
<div style="color: black;"><br />
</div><div style="-moz-background-inline-policy: continuous; background: none repeat scroll 0% 0% rgb(0, 255, 255); color: black; font-size: 100%; text-align: justify;"><br />
<div><b:widget id='HTML20' locked='false' title='CSS1' type='HTML'></div><div><b:includable id='main'></div><div><b:if cond="data:blog.url == data:blog.homepageUrl"> </div><div><!-- only display title if it's non-empty --></div><div><b:if cond='data:title != &quot;&quot;'></div><div><h2 class='title'><data:title/></h2></div><div></b:if></div><div><div class='widget-content'></div><div><data:content/></div><div></div></div><div></b:if></div><div><b:include name='quickedit'/></div><div></b:includable></div><div></b:widget></div></div><br />
<br />
7. Klik save, lantas klik view blog untuk melihat hasilnya.<br />
<br />
Ok, kita sekarang sudah punya 2 buah backround berbeda, istirahat dulu. Besok baru diteruskan lagi. Tapi kalo mau dilanjutkan ... monggo mas ...<br />
<br />
<span style="font-weight: bold;">Memasang background untuk halaman Selanjutnya :</span><br />
<br />
Halaman selanjutnya adalah halaman yang akan tapil bila kita bergerak (misalnya ) dengan mengklik readmore atau menglik judul posting. Kalo kita ingin membuat backroundnya, maka langkah kita semakin ringan . Kan tadi sobat udah punya kode script yang dikasi nama CSS1 ? ingat kan. Nah kode tersebut sobat ganti namanya menjadi CSS2, ini umpamanya. Untuk memudahkan pencarian kode ini nantinya.<br />
<br />
Namun biar lebih jelas, baiknya ku uraikan sedikit di bawah ini. ok coy ...<br />
<br />
1. Ikuti langkah pertama seperti pada saat kita membuat backround untuk halaman pertama tadi, dari point a sampai d. Yaitu mengedit kodenya dengan worpad atau document txt.<br />
<br />
2. setelah selesai di edit, pasang ke side bar seperti biasa dan beri nama widget kita ini dengan nana CSS2.<br />
<br />
3. Ikuti langkah ke-tiga dengan penempatan kode berwarna biru yang sedikit berbeda seperti tampak pada kode di bawah ini ; perhatikan baik-baik perbedaannya.<br />
<br />
<div style="-moz-background-inline-policy: continuous; background: none repeat scroll 0% 0% rgb(255, 255, 204); font-size: 100%; text-align: justify;"><br />
<div style="background-color: magenta;"><b:widget id='HTML21' locked='false' title='CSS2' type='HTML'></div><div style="background-color: magenta;"><b:includable id='main'></div><div style="background-color: magenta;"><span style="color: #3333ff;"><b:if cond='data:blog.pageType == "item"'></span></div><div style="background-color: magenta;"><b:if cond='data:blog.pageType == &quot;item&quot;'></div><div style="background-color: magenta;"><!-- only display title if it's non-empty --></div><div style="background-color: magenta;"><b:if cond='data:title != &quot;&quot;'></div><div style="background-color: magenta;"><h2 class='title'><data:title/></h2></div><div style="background-color: magenta;"></b:if></div><div style="background-color: magenta;"><div class='widget-content'></div><div style="background-color: magenta;"><data:content/></div><div style="background-color: magenta;"></div></div><div style="background-color: magenta;"><br />
</div><div style="background-color: magenta;"><b:include name='quickedit'/></div><div style="background-color: magenta;"><span style="color: #3333ff;"></b:if> </span></div><div style="background-color: magenta;"></b:if></div><div style="background-color: magenta;"></b:includable></div><div style="background-color: magenta;"></b:widget></div></div><br />
<br />
4. Save dan view blog untuk melihat hasilnya.<br />
<br />
<br />
<span style="font-size: 130%;"><span style="font-style: italic; font-weight: bold;">Sedikit tambahan :</span></span><br />
<br />
<div style="text-align: justify;"><span style="font-style: italic;">A. Membuat blog baru</span><br />
<br />
Ini maksudnya supaya kita tidak kelabakan kalau terjadi hal-hal yang tidak di inginkan yang diakibatkan oleh eror atau hal-hal lain yang tak terduga<br />
<br />
<span style="font-style: italic;">B. Pemilihan Background</span><br />
<br />
Backround yang di pilih sebaiknya jangan yang terlalu besar, ini untuk menghindari lamanya proses loading page. Kalau backdround dasarnya hitam, maksudku background gambar yang kita pilih dasarnya hitam, maka usahakan kedua backround yang lain juga bernuansa hitam. Agar kita tidak kebingungan mengatur huruf postingan kita nantinya. Begitu pula misalnya kalau kita memilih memakai gambar yang bernuansa putih dan sebagainya. Lebih sip lagi bagi yang udah jago mengolah gambar dengan fhotoshop. ini sangat membantu. Namun kalo kebelet pengen mencoba, sobat boleh minta bantuan abah google untuk berburu gambar. ketikkan aja kata kunci background atau free wallpaper, lalu klik kanan pada gambar dan pilih open link a new tab. Setelah tab baru terbuka, klik &quot;lihat ukuran gambar dalm ukuran sebenarnya. Tuggu hingga proses loading page selesai. Klik kanan pada gambar yang udah terbuka penuh lalu pilih copy image location. Pastekan deh lokasi atau url gambar tadi ke kode css bckroun yang kita edit.<br />
<br />
<span style="font-style: italic;">C. Edit dengan worpad atau documen txt.</span><br />
<br />
Ini berguna untuk menghindari kesalahan edit atau kesalahan letak kode tanpa mengganggu template blog kita. Plus hasil editan kita tadi bisa disimpan untuk dipergunakan nanti bila diperlukan.<br />
<br />
<span style="font-style: italic;">D. Langkah-langkah pemasangan background.</span><br />
<br />
Urutan langkah pemasangan dan pembuatan backgroun di atas ngga mutlak harus dimulai dari Memasang background utama kemudian background halaman depan lalu backgroun halaman selanjutnya. Sobat boleh langsung membalik langkah tersbut atu mencoba memanfaatka css backgrund seperti pada pemasangan untuk background halaman depan. Ini malah lebih asik. Sobat bisa mengati-ganti gambar dengan mengganti url gambarnya langsung seperti mengedit widget. Pada minima klasik, kalo kita sedang login khan ada gambar palu dengan obeng tuch. nah sobat tinggal klik aja gambar tersebut untuk mengedit kode di dalamnya. Asik kan, ganti-ganti deh sampe ketemu dengan gambar yang pas sesuai selera sobat.<br />
<br />
<span style="font-style: italic;">E. Trik mengatur penampilan background (membuat blog lebih dinamis)</span><br />
<br />
Trik ini juga sangat berguna bagi kita untuk memilah dan memilih mana widget yang harus kita tampilkan di halaman depan, mana yang boleh kita taroh di halaman selanjutnya. Ini bertujuan mengoptimalkan blog kita, biar loading page ngga terlalu berta tentunya. Trik ini ku dapat dari kang jaloe dan kuposting lagi dengan seizin beliau. Terimakasih boss ...<br />
<br />
<span style="font-style: italic;">F. Trik menampilkan semua judul posting.</span><br />
<br />
Nah trik ini ikut berperan penting dimana dengan trik ini blog kita seakan akan punya tiga halaman berbeda. Coba anda klik salah satu kategori pada label atau klik "show all post" di bawah deretan labal, maka judul posting kita akan tampil tanpa menyertakan isinya, nah backround yang akan muncul adalah backround yang kita pasang pertama kali. Tanpa kita sadari kita udah bikin Daftar Isi Blog. Asik khan, sambil nyelam minum air .... keselek ....<br />
<br />
<span style="font-style: italic;">G. Permohonan Maaf</span><br />
<br />
Berhubung bikin postingnya teburu-buru, jadi harap dimaklumi kalo penjelasannya uadi bertele-tele dan tulisannya banyak yang kurang huruf atau terbolak balik. Kritik dan sarannya kojek tunggu di ruang komen demi kemajuan kojek dalam bikin posting.<br />
<br />
<span style="font-style: italic;">H. Ucapan terima kasih</span><br />
<br />
Kojek mau ngucapin terimakasih sama <a href="http://www.blogger.com/profile/06322035097256660173" linkindex="28" target="_blank">Kang Jaloe</a> yang udah ngasi izin untuk Kojek mencatut script-script di <a href="http://www.catalog-tutorial.blogspot.com/" linkindex="29" target="_blank">blognya.</a><br />
<br />
Juga kepada rekan-rekan yang selalu ngasih suport buat Kojek. Tampa kalian Kojek bukan siapa-siapa.<br />
<br />
Salam bloggers ...<br />
<br />
Wassalam, Kojek<br />
<br />
<a href="http://www.blogger.com/post-edit.g?blogID=8989934751101409110&postID=8959178315993098295#" title="Back to top">kembali ke atas</a><br />
<br />
<br />
</div></div>Buchexhttp://www.blogger.com/profile/06453091683622654693noreply@blogger.com26tag:blogger.com,1999:blog-8989934751101409110.post-12134343496992731052009-03-02T15:48:00.007+07:002009-10-01T16:43:32.214+07:00Ngehack Template Minima Youk ….Sumpek, bosan, jenuh dan BT gara-gara PR yang kemaren melorot, Akhirnya terobati juga. Berkat support dan dukungan sohib-sohib yang keurennn abissss ...., Makasih ya. Dan aku jadi semangat nih blogwalking kesana kemari, ehh ... ketemu sama trik yang juga asik, yaitu trik bikin 3 kolom footer. Gua utak-atik dan coba mengaplikasikannya, eh ...ternyata berhasil. Lalu ide nyeleneh kembali muncul, ...Gimana kalo 3 kolom footernya kita letakkan di bawah header... Atau kita coba pasang kedua-duanya sekalian, bisa ngga ya????...<br />
<br />
<div style="text-align: justify;">Akhirnya ... berhasil juga jerih payahku meskipun sebetulnya aku buta akan apa itu css, java/script, html, xml dll , Plong dech ... Seneng banget. Biarpun Cuma di minima klasik doank, gak apa-apa dech. Akhirnya aku berhasil menambah 3 kolom di bawah header dan 3 kolom lagi di bawah footer (sebetulnya ada empat kolom hi hi hi ...) Untuk demonya, klik aja di <a href="http://templategua2.blogspot.com/">sini</a>. atau di <a href="http://kojekexperimentemplate.blogspot.com/">sini</a> sedangkan contoh elemen yang berhasil aku tambah kayak gambar di bawah ini nih :<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_GEbKlUaSiIbN59v7Ms7tPMtgRG4lMVrTYDQ5E9RRB_JFBmMAR981Az5E9SWdTYQxv0cNfrseT-6280T-xfARzqERdseF1FXFoDvmf8wZf-L8fwYYrj8WcTOYwcyqYW2VFYciHteU_E/s1600-h/gmbr01.JPG" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5308510934876327810" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_GEbKlUaSiIbN59v7Ms7tPMtgRG4lMVrTYDQ5E9RRB_JFBmMAR981Az5E9SWdTYQxv0cNfrseT-6280T-xfARzqERdseF1FXFoDvmf8wZf-L8fwYYrj8WcTOYwcyqYW2VFYciHteU_E/s320/gmbr01.JPG" style="cursor: pointer; display: block; height: 320px; margin: 0px auto 10px; text-align: center; width: 289px;" /></a><br />
</div><div style="text-align: justify;">Ide lain yang tiba tiba nongol adalah "gimana caranya ngumpetin/nyembunyiin 3 kolom footer dan 3 kolom di bawah header tadi bila kita bergerak ke halaman selanjutnya". Maksudnya, biar loading page ke halaman selanjutnya bisa lebih ringan, Khan ngga semua widget harus kita tampilkan di depan. Nah untuk trik ini (Menampilkan dan menyembunyikan elemen halaman) kebetulan telah aku kuasai sedikit, jadi tinggal memadukan antara kode <span style="font-weight: bold;">3 kolom footer dan 3 kolom di bawah header</span> tadi dengan kode <span style="font-weight: bold;">nyembunyiin widget</span> tadi. Dan ternyata .... Bisa bro .... Asik ....<br />
</div><br />
<div style="text-align: justify;">Ok, sekarang gua mau bagi nih jurusnya, buat yang mau sedikit repot dan mumet silahkan dech pelajari pelan-pelan. Dan buat para master yang udah kawakan, tolong jagan diketawaiin ya ..., kritik dan sarannya ditunggu nih... biar jampi-jampi gua makin majur...<br />
</div><br />
A.<span style="font-weight: bold;"> Tiga Kolom Footer</span><br />
<br />
<div style="text-align: justify;">Blogger yang terhormat, sebelum menerapkan trik di bawah ini, sedikit saran yang bisa saya berikan adalah, agar anda selalu membackup template. Untuk langkah antisipasi, takut jampi-jampinya gagal. Atau lebih aman sebaiknya buat blog baru aja dech. Terserah mau dikasih nama apa, yang penting pake template minima dulu. Kalo udah berhasil, boleh dech coba ke tempale-tempale yang lain, atau terapkan ke blog utamamu. Ok Coy ... Tarik ...<br />
</div><br />
1. Login ke blogspot<br />
2. Klik Customize<br />
3. Klik layout<br />
4. Klik edit html, ingat !!! , Expand teks Widgetnya jangan di conteng, ntar bingung dech.<br />
5. Cari kode seperti di bawah ini :<br />
<br />
<br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(217, 215, 215) none repeat scroll 0% 0%; font-size: 120%; text-align: justify;"><br />
<div id='footer-wrapper'><br />
<span style="color: #3333ff;"><b:section class='footer' id='footer'/></span><br />
</div><br />
</div><br />
<br />
6. Ganti kode yang berwana biru dengan kode seperti di bawah ini :<br />
<br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(217, 215, 215) none repeat scroll 0% 0%; font-size: 120%; text-align: justify;"><br />
<span style="font-weight: bold;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span><br />
<div id='footer-column-container'><br />
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'><br />
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/><br />
</div><br />
<br />
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'><br />
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/><br />
</div><br />
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'><br />
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/><br />
</div><br />
<div style='clear:both;'/><br />
<p><br />
</p><br />
<br />
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'><br />
<b:section class='footer' id='col-bottom' preferred='yes'><br />
<b:widget id='Text2' locked='false' title='' type='Text'/><br />
</b:section><br />
</div><br />
<div style='clear:both;'/><br />
</div><br />
<span style="font-weight: bold;"></b:if></span><br />
</div><br />
<br />
7. Sampe di sini, save dulu dech. Lalu cari kode ini : </b:skin> Kalo udah ketemu, letakkan kode seperti di bawah ini di atas kode </b:skin> tadi.<br />
<br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(217, 215, 215) none repeat scroll 0% 0%; font-size: 120%; text-align: justify;"><br />
<br />
#footer-column-container {<br />
clear:both;<br />
}<br />
<br />
.footer-column {<br />
padding: 10px;<br />
}<br />
</div><br />
<br />
Kalo udah beres, save dech. Klik layout untuk melihat elemen baru yang kita tambahkan<br />
<br />
<br />
B. <span style="font-size: 130%; font-weight: bold;"><span style="font-family: times new roman;">Tiga kolom di bawah header</span></span><br />
<br />
Nah, sekarang kita tiba di bagian yang agak merepotkan nih. Biar lebih gampang, kita edit pake worpad atau document.txt<br />
<br />
1. Copy kode di bawah ini lalu edit dengan worpad atau document txt :<br />
<br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(217, 215, 215) none repeat scroll 0% 0%; font-size: 120%; text-align: justify;"><br />
#<span style="color: #009900;">footer</span>-column-container {<br />
clear:both;<br />
}<br />
<br />
.<span style="color: #33cc00;">footer</span>-column {<br />
padding: 10px;<br />
}<br />
</div><br />
<br />
2. Ganti kode yang berwarna hijau dengan tulisan <span style="font-weight: bold;">header</span><br />
<br />
3. Kalau sudah selesai, tempatkan kode hasil editing kamu tadi ke atas kode </b:skin><br />
<br />
4. Lalu kopi kode di bawah ini lantas edit dengan worpad atau document txt<br />
<br />
<br />
<div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(217, 215, 215) none repeat scroll 0% 0%; font-size: 120%; text-align: justify;"><br />
<span style="font-weight: bold;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span><br />
<div id='<span style="color: #3333ff;">footer</span>-column-container'><br />
<div id='<span style="color: #3333ff;">footer</span>2' style='width: 30%; float: left; margin:0; text-align: left;'><br />
<b:section class='<span style="color: #3333ff;">footer</span>-column' id='<span style="color: red;">col1</span>' preferred='yes' style='float:left;'/><br />
</div><br />
<br />
<div id='<span style="color: #3333ff;">footer</span>3' style='width: 40%; float: left; margin:0; text-align: left;'><br />
<b:section class='<span style="color: #3333ff;">footer</span>-column' id='<span style="color: red;">col2</span>' preferred='yes' style='float:left;'/><br />
</div><br />
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'><br />
<b:section class='<span style="color: #3333ff;">footer</span>-column' id='<span style="color: red;">col3</span>' preferred='yes' style='float:right;'/><br />
</div><br />
<div style='clear:both;'/><br />
<p><br />
</p><br />
<br />
<div id='<span style="color: #3333ff;">footer</span>-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'><br />
<b:section class='<span style="color: #3333ff;">footer</span>' id='<span style="color: #663300;">col-bottom</span>' preferred='yes'><br />
<b:widget id='Text2' locked='false' title='' type='Text'/><br />
</b:section><br />
</div><br />
<div style='clear:both;'/><br />
</div><br />
<span style="font-weight: bold;"></b:if><br />
</span><br />
</div><br />
<br />
5. <span style="font-size: 0pt;">Ganti semua tulisan footer yang berwarna biru dengan tulisan</span><span style="font-weight: bold;"> header</span><span style="font-size: 0pt;">.<br />
<br />
6. Ganti tulisan </span><span style="color: black;">(semua tulisan yang berwarna merah) yaitu<span style="font-weight: bold;"> col1</span> menjadi </span><span style="color: black;"><span style="font-weight: bold;">col4</span>, </span><span style="color: black;"><span style="font-weight: bold;">col2 </span>menjadi </span><span style="color: black;"><span style="font-weight: bold;">col5</span> dan </span><span style="color: black;"><span style="font-weight: bold;">col3</span> menjadi </span><span style="color: black; font-weight: bold;">col6</span><br />
<span style="font-size: 0pt;"><br />
7. Dan terakhir, kode yang berwarna coklat, yaitu : </span><span style="color: #663300;">col-bottom <span style="color: black;">rubah menjadi</span> </span><span style="color: #663300;">col7-bottom</span><br />
<br />
8. Kalo udah selesai kamu edit, copy kode yg tadi telah diedit lalu tempatkan di atas kode ini : <div id='content-wrapper'> yang ada pada templatemu.<br />
<br />
8. Save lalu klik layout untuk melihat apakah elemen halaman yang kamu buat udah nongol di bawah elemen header.<br />
<br />
Silahkan isi elemen halaman yang baru anda buat tadi dengan berbagai aksesoris, misalnya logo, follower atau profil. Setelah semuanya selesai, kamu bisa melihat tampilan blogmu sekarang, lalu klik judul postinganmu atau readmore-nya untuk melihat apakah 3 kolom header dan 3 kolom footer tadi menghilang.<br />
<br />
Jika ingin 3 kolom footer nya tetap nongol, kamu tinggal hapus aja kode yang tebal, yaitu :<br />
<span style="font-weight: bold;"><b:if cond='data:blog.url == data:blog.homepageUrl'> </span><span style="font-size: 0pt;">dan</span><span style="font-weight: bold;"> </span><span style="font-weight: bold;"></b:if></span> Kedua kode inilah yang bikin 3 kolom header maupun 3 kolom footer tadi disembunyikan bila kita bergerak ke halaman selanjutnya.<br />
<br />
Ok blogger .... selamat berpusing ria ...<br />
<span style="font-size: 0pt;"><br />
</span><br />
<br />
<a href="http://www.blogger.com/post-edit.g?blogID=8989934751101409110&postID=1213434349699273105#" title="Back to top">kembali ke atas</a><br />
<br />
<script src="http://digg.com/tools/diggthis.js" type="text/javascript">
</script><br />
<br />
<script type="text/javascript">
var authorId = "0C17D2F8-035F-4FF4-BDEE-6A2446DBE565";
var pageOrientation = "0";
var topMargin = "0.5";
var bottomMargin = "0.5";
var leftMargin = "0.5";
var rightMargin = "0.5";
</script><br />
<script src="http://web2.pdfonline.com/pdfonline/pdfonline.js" type="text/javascript">
</script>Buchexhttp://www.blogger.com/profile/06453091683622654693noreply@blogger.com6tag:blogger.com,1999:blog-8989934751101409110.post-4601409723366591632008-11-01T14:52:00.011+07:002009-03-09T12:56:37.249+07:00Tips dan Trik membuat Read MoreBikin readmore di blog emang kayaknya wajib nih. Biar tampilan blog jadi rapi. Dan kita bisa nampilkan beberapa postingan untuk kita taruh di halaman depan sekaligus bikin browser gak kelamaan membuka front page atau halaman depan blog kita. Namun, terkadang kita kesulitan saat mau bikin posting dimana kode-kode saling bertabrakan, misanya kode untuk meratakan paragraf atau kode untuk menapilkan huruf gontol-gontokan dengan kode <span style="font-weight: bold;"><span class="fullpost"></span> dan kode <span style="font-weight: bold;"></span><br /><br />Nah</span>, berikut aku mau berbagi jurus bikin Readmore yang ngga ngerepotin, Readmorenya bekerja secara otomatis bro. Langsung aja ngetik di ruang posting pada mode <span style="font-style: italic;">compose</span>. Atur warna huruf, tebal, miring atau perataan parangrafnya sesuka hati, tanpa khawatir readmorenya ngga bekerja.<br /><br />Ok blogger, ... youk ngilikin template sebentar ...<br /><br />1. Back up dulu templatemu<br />2. Login ke blogspot.com<br />3. Klik Customize<br />4. Klik Layout<br />5. Klik Edit HTML<br />6. Conteng kotak <span id="fullpost"><strong>Expand Widget Templates</strong></span><br />7. Cari kode seperti di bawah ini :<br /><br /><div style="background: rgb(217, 215, 215) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: justify; font-size: 100%;"></head><br /></div><br /><br />Selanjutnya, kopi kode di bawah ini lalu letakkan di bawah kode </head> tadi<br /><br /><div style="background: rgb(217, 215, 215) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: justify; font-size: 100%;"><br /><script type="text/javascript"> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src="http://syahenimkojek.googlepages.com/readmore_keren_bro.js" type="text/javascript"></script><br /></div><br /><br />Selanjutnya, cari kode seperti di bawah ini :<br /><br /><div style="background: rgb(217, 215, 215) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: justify; font-size: 100%;"><br /><data:post.body/><br /></div><br /><br />Ganti kode tersebut dengan kode seperti di bawah ini :<br /><br /><div style="background: rgb(217, 215, 215) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: justify; font-size: 100%;"><br /><div style="text-align: left;"><b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if><br /></div><br /></div><br /><br />Klik save. Dan mulailah memposting<br /><br />Selamat mencobaBuchexhttp://www.blogger.com/profile/06453091683622654693noreply@blogger.com2