SDFSDFSDF: Juli 2011

Step by Step Membuat Image Slider Carousel

Pernah tidak kalian melihat slider image seperti diatas di blog lain, atau yang ada di blog lorongilmu saat ini, sebenarnya slider ini sangat cocok bagi anda karena selain ringan dan juga mudah diimplementasikan pada blog anda, oke langsung saja ini dia caranya.

1. login dulu ke blogger anda
2. klik tata letak
3. Elemen halaman
4. Tambah gatget
5. Html/Javascript >> lalu masukkan kode berikut ini :

<script type="text/javascript">
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifV1u1X88-r8gAan_qXwSz3MQOtpus4tg9TsCEU2cNuvcr5ilVFwJVbkSLgIWFsrZe_xU-OYfMvUH7G62aYKItEjabqDiSjAbjxPxlkhyAbN8VR5FkZtpsoOW9mlHGWPEHofy6qpB0Ijo8/', 30, 60 ], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNXL2r1WfjCaitqad7zp13cuMGove47Pfx-lTY3hAnWb8EaH47yOc_Pm6MTJTlKi0ViQlYc28ViNLEAnX6ir9pFIN-3Fv435mVLAH5pn17XkhvqkHqCLiqiSvmB_VfWtvVo_ra38Y_04bu/', -55, 60 ]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div id="mygallery" class="stepcarousel">
<div class="belt">



<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-wireless-kungfu-networking.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge8hsu0O67r4PcFQKt_LnBtZoqY8v0iY4vwHF86qzyE2fR7Qax3CwImNseX_6de6KZQ-bjR-99vOZBAj-o_BtTGzKVdIfwRCLM8JoK9PBwZJQdNiWU2xtkkcE5GjPoq2Lw779oa4aDiIk/s1600/1.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-computer-worm-1.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2tNQ_OuYxEZDdWI6bB-LMC-5cexlYubPvD_dTxfTKE-xvKgDdS8nDIvP55-Yk4TFfqrSLgifjwpMM9H0g5jhSFRISdRLfQg14kkASgVoDRq5Qgv44I1ksQzkVKcBkV4O-oWpItPaquIU/s320/2.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-computer-worm-2.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-PoQFS84IziTt0qDA_34OAfDYsEGNtlJyyJzLbZRNd3UbCwpAJizqOlTZYmZOj0yCXPexF4M2bl9ejQPZS6ljbYh-tqAd5sq0zuziPcM_TgKEDrwhmjIm7PsUb4rhqPhtHb8Ty6uPcCw/s320/3.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-pembobol-kartu-kredit.html">
<img src="http://3.bp.blogspot.com/-BNod3fYuxhk/TezHfbaFRtI/AAAAAAAAAS0/kGF49ZtSjkU/s320/4.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-panduan-lengkap-memakai.html">
<img src="http://3.bp.blogspot.com/-BzeCtYoUfhE/TezWWgKA3HI/AAAAAAAAATA/LfY0cT86OO8/s320/6.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-chip-spesial-networking.html">
<img src="http://1.bp.blogspot.com/-CJtJtGc1Sfs/TezdIhq-ScI/AAAAAAAAATE/NuiexuEifmg/s320/7.jpg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-tutorial-windows-server-2003.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRjHe_8jukQdhP9lzwm_dmAeUTElrTg99a9zeBiH-X4a9x_unZCTBg3Z_h1MlUFehllZhMAhCLOAuDctdnN4HPns6HsAzVjUMay5mWMIdPbDcEaTHdI50Q9HRw8THrX8ytbAkTJcENyVU/s1600/8.jpeg" width="100px" height="135px" /></a>
</div>

<div class="panel">
<a href="http://lorongilmu.blogspot.com/2011/06/free-ebook-beginning-microsoft-visual.html">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-6ogb07e5Xt9OTP_jecHQx3DqsM4U0vCwrM4UXjtFMrTGw9fpMuRZdV_G7Gn-DE12dRVvwi4XyBQDALRrT0uzPf1iZfuB_25GiWu4Vc-q4pUlVKg9u6tZlkOPiw9TA3RmLS0pzZP3wE/s1600/8.jpg" width="100px" height="135px" /></a>
</div>

</div>
</div>

dan pada edit html tambahkan kode berikut sebelum kode ]]></b:skin> atau diatasnya

.carousel{
         float:left;
         margin: 0;
         padding:0px;
         }

.carousel .widget {
         width: 720px;
         background:#c4d5ec;
         margin: 0;
         padding:0;
}

.carousel h2{
         display:none;
         }
.stepcarousel{
         position: relative;
         overflow: scroll;
         width: 765px;
         height: 160px;
}

.stepcarousel .belt{
        position: absolute;
        left: 0;
        top: 0;
}

.stepcarousel .panel{
      float: left;
      overflow: hidden;
      margin: 5px 20px 5px 0px;
      width: 140px;
}

.stepcarousel .panel img{
      float: left;
      background:#940f04;
      margin: 5px;
      padding:5px;
      border:1px solid #ccc;
}

.stepcarousel .panel img:hover{
      background:#ffffff;
      }
.quickedit{display:none}

#under_header{
opacity: 100;

}

Dan sesudah kode ]]></b:skin> tambahkan kode dibawah ini

<script src='http://lorong-ilmu.googlecode.com/files/gallery1.js' type='text/javascript'/>
<script src='http://lorong-ilmu.googlecode.com/files/gallery2.js' type='text/javascript'/>

Jika sudah maka save, dan lihat hasilnya

Step by Step Menampilkan Feed Blog Berdasarkan Category

Berhubung ditempat kerja saya lagi tidak ada kerjaan yang terlalu padat saya akan mencoba menulis ulang tutorial menampilkan feed blog berdasarkan category, sebenernya tutorial ini sudah banyak di internet tapi tidak ada salahnya saya menulis ulang dengan kata-kata saya sendiri agar dapat lebih mudah dimengerti oke ini dia caranya.

yang pertama perlu anda perhatikan adalah ketika kita mau membuat feed maka kita hanya perlu memasukkan url seperti ini.

http://lorongilmu.blogspot.com

maka feed akan tampil secara seluruh tanpa memilah dari category mana, nah jika ingin menampilkan feed yang sesuai dengan category maka anda cukup merubahnya menjadi seperti ini.

http://lorongilmu.blogspot.com/feeds/posts/default/-/nama label

yang anda perlu rubah dari code diatas hanya pada code berwana biru dan orange, yang biru ganti dengan url blog anda dan orange dengan nama category / label anda, sekian tutorial dari saya terimakasih

Step by Step Menjadikan Blog Anda Menjadi Blog Yang Dinamis

Pernahkah terpikir dalam benak anda untuk membuat blog anda menjadi dinamis, dinamis disini adalah menampilkan suatu widget hanya pada halaman-halaman tertentu, kali ini blog lorongilmu akan mengupas tuntas seluruh kode-kode dan penerapannya dalam blog tentang kode-kode dinamis ini.

1. Widget hanya tampil pada halaman utama blog

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

Kode diatas dapat membuat widget blog anda hanya tampil pada halaman homepage

2. Widget hanya tampil pada kategori post dan single post

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

Kode diatas dapat membuat widget blog hanya tampil pada halaman ketegori dan single post

3. Widget hanya tampil pada halaman utama blog dan kategori post

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

Kode diatas dapat membuat widget blog hanya tampil pada halaman utama blog dan kategori post

4. Widget hanya tampil pada halaman single post

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

Kode diatas dapat membuat widget blog hanya tampil pada halaman single post

5. Widget hanya tampil pada pada postingan tertentu saja

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

Kode diatas dapat membuat widget blog hanya tampil pada halaman postingan yang sudah anda tentukan

6. Menyembunyikan widget post pada postingan tertentu saja

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

Kode diatas dapat membuat widget blog hanya hilang pada halaman postingan yang sudah anda tentukan

Lalu untuk cara pemasangannya seperti dibawah ini :
1. Login ke Blogger.
2. Pada Dashboard klik Layout >> Edit HTML >> Contreng 'Expand widget templates'.
3. Carilah kode seperti dibawah ini

<b:widget id=

lengkapnya seperti ini:

<b:widget id='Label1' locked='false' title='Title' type='Label'>

kopi kode ini

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

dan letakkan di bawah

<b:includable id='main'>:

lalu cari kode ini
scroll kebawah sedikit, ada kode kopi lagi kode ini

</b:if>

letakkan setelah

<b:include name='quickedit'/>

atau sebelum kode ini

</b:widget>

Jika sudah maka save.
Kode dan tutorial ini saya tulis ulang dari blog o-om.com

Step by Step Membuat Status YM Dibawah Profil / About me

Dulu saya pernah memasang status YM dibawah widget about me seperti gambar diatas pada blog lama saya, nah sekarang saya ingin membagikan caranya step by step memasang status YM dibawah widget about me, ini dia caranya hanya di blog lorongilmu.

1. Log In ke Blogger lalu menuju bagian "Layout" kemudian masuk "Edit HTML"

2. Setelah itu centang "Expand Widget Templates"

3. Kemudian cari code dibawah ini :

<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>

4. Setelah ketemu code diatas lalu tambahkan code dibawah ini diatasnya

<a href='ymsgr:sendIM?lorongilmu'> <img src='http://opi.yahoo.com/online?u=lorongilmu&m=g&t=1&l=us'/></a><br/>

5. Jika sudah maka save template mu dan lihat hasilnya

Selasa, 05 Juli 2011

Step by Step Membuat Image Slider Carousel

Step by Step Menampilkan Feed Blog Berdasarkan Category

Step by Step Menjadikan Blog Anda Menjadi Blog Yang Dinamis

Step by Step Membuat Status YM Dibawah Profil / About me