Selasa, 05 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">


<!-- Ganti link dengan link kalian -->

<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
Diposting oleh di Tidak ada komentar:
Label:

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
Diposting oleh di Tidak ada komentar:
Label:

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 != &quot;item&quot;'> ... </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 == &quot;item&quot;'> ... </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 == &quot;URL_POST_TERTENTU&quot;'> ... </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 != &quot;URL_POST_TERTENTU&quot;'> ... </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
Diposting oleh di Tidak ada komentar:
Label:

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&amp;m=g&amp;t=1&amp;l=us'/></a><br/>

5. Jika sudah maka save template mu dan lihat hasilnya
Diposting oleh di Tidak ada komentar:
Label:

Kamis, 30 Juni 2011

Step by Step Membuat Tab View Widget

 Kali ini lorong ilmu akan memberikan sebuah tutorial yang bagus dan ringan, beda dengan tab view widget tutorial yang biasanya ada di internet kali ini saya akan membahas cara mudah dan lumayan ringan, yap ini dia step by step membuat tab view widget B)

1. Login ke blogger
2. Pilih Edit layout
3. Pilih add gadget
4. Pilih HTML/JAVASCRIPT "dan masukkan script dibawah ini"

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color:white">TAB 1</span></a>
<a><span style="color:white">TAB 2</span></a>
<a><span style="color:white">TAB 3</span></a>
</div>
<div style="width: 252px; height: 180px;" class="Pages">

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 1
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content  Widget YANG INGIN ANDA TAMPILKAN PADA TAB 2
</div>
</div>

<div class="Page">
<div class="Pad">
Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3
</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
Yaps sudah selesai dan jika anda ingin menaruh kode html ataupun widget anda anda bisa mengganti tulisan yang berwarna orange. script saya ambil dari http://pelajaran-blog.blogspot.com/
Diposting oleh di Tidak ada komentar:
Label:

Step by Step Menampilkan Avatar Comment Pada Template Modifikasi


Sudah lama rasanya saya tidak menulis tentang tutorial blog lagi mungkin saya sedang semangat oke sebenernya tutorial ini sudah sangat banyak di internet namun apasalahnya jika saya mereview ulang agar nantinya juga bisa untuk masukan saya hehe, langsung saja ini dia Step by Step Menampilkan Avatar Comment Pada Template Modifikasi.:

Step by Step
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari Kode <dl id='comments-block'> dan jika tidak ketemu, cari kode berikut ini <div id='comments-block'>
6. Setelah kode di atas ketemu kemudian ganti dengan kode berikut ini.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

7. Cari lagi kode berikut ini
<a expr:name='data:comment.anchorName'/>
8. Taruh (copy-paste) kode berikut ini di atasnya.

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
9. Simpan template jika sudah selesai.

Tutorial ini saya ambil dari berbagai sumber mohon maaf jika tidak mencantumkan sumber karena saya juga lupa, namun yang pasti google sangat membantu dalam pembuatan article ini terimakasih mbah google :D
Diposting oleh di Tidak ada komentar:
Label:

Step by Step Membuat Kotak Daftar Isi Berdasarkan Label


Oke kali ini saya akan memberikan anda sebuah tutorial bagaimana cara membuat kotak daftar isi berdasarkan label, baik kita mulai saja tutorialnya.

1. Login ke blogger
2. Pilih Edit layout
3. Pilih add gadget
4. Pilih HTML/JAVASCRIPT "dan masukkan script dibawah ini

<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 100%; height: 400px; text-align: left;">

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:2;

float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>

<script style="" src="http://lorong-ilmu.googlecode.com/files/rcvth.js"></script>

<script style="">

var numposts = 999;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 75;</script>


<script src="http://www.lorongilmu.blogspot.com/feeds/posts/default/-/Tutorial Blog?orderby=published&amp;alt=json-in-script&amp;max-results=500&amp;callback=showrecentpostswiththumbs">
</script>
</div>
Oke jika sudah anda tinggal merubah kode yang berwarna hijau menjadi alamat blog anda dan yang berwarna biru muda menjadi categori blog anda, sekian tutorial dari saya jika ada yang ingin ditanyakan silahkan tinggalkan comment dibawah dan dibawah ini ada contoh dari tutorial ini





Diposting oleh di Tidak ada komentar:
Label:
Langganan: Postingan (Atom)