Jadilah Top Commentator dan Dapatkan Award Dariku

Bagi anda yang suka blogwalking dan mencicipi artikel blog lain, maka bersiaplah anda untuk jadi Top Commentator dan mendapatkan Award. Sebenernya cukup mudah jadi Top Commentator!! Yah kalo blogwalking sambil baca-baca artikel tinggalin komentar dong...susah amat!! :D hehehe

Sebelumnya Thanks buat temen-temenku yang sudah mau menyisipkan komentarnya ke artikel blogku. Blogku lemah tanpa dukungan dari temen-temen smua :)

Kita lanjutin yuk!!

Sebenernya Apa aja sie keuntungan jadi Top Commentator?

Banyak sekali manfaat Anda menjadi Top Commentator ini, Anda bisa mendapat backlink dari :

- Tulis Komentar setiap anda membaca artikel dari blog tetangga >> Saat Anda menulis komentar dan Anda juga mencantumkan alamat link web Anda di kotak komentar, maka Anda akan mendapat backlink dari Blog NdyTeeN karena Blog NdyTeeN menggunakan sistem Dofollow (U Comment I Follow).

- Memberi Komentar Sebanyak-banyaknya :D >>> Buatlah komentar sebanyak-banyak di Blog NdyTeeN ini karena apabila Anda memiliki banyak komentar maka Anda akan mendapatkan backlink gratis dari Blog NdyTeeN. Untuk komentar terbanyak alias Top Commentator urutan 10 besar maka Anda akan mendapapatkan backlink special karena Blog NdyTeeN menggunakan sistem Dofollow (U Comment I Follow).

-Komentar Pertamax, Keduax jg boleh deh...ato seterusnya hehehe>>> Pertamax buka bensin loh.. Hehe.. Pertamax adalah komentar Pertama. Nah untuk satu ini juga Anda akan mendapatkan backlink special juga, jadi jadilah yang Pertamax dalam memberikan komentar posting di blog ini. atau pengen jadi Pertamax caranya mdah kok...ikut Followers aja. Tar klo ada artikel terbaru pasti dari dashboard blogmu ada artikel baru dari blog yang kamu ikuti.

Maka dari itu mulai dari sekarang budayakan berkomentar di Blog NdyTeeN dan Anda akan mendapatkan backlink dari BLOG HEBOH karena seperti saya jelaskan di atas bahwa Blog NdyTeeN menggunakan Dofollow (U Comment I Follow).

Oh iya, sebelumnya aku mau bagi-bagi Award nie, diharapkan yang mendapat Award ini :

1. Meletakkan Logo/Award di Blogmu
2. Meletakkan Link Blog yang Telah Memberimu Award
3. Berikan ke Blog Lain
4. Buat Link Blog Lain yang Kamu Berikan Award
5. Tinggalkan Pesan di Blog Mereka

•  ANDIE
• Attajaya 
• Blog Heboh
• EasyTrickBlog 
• Exiost 
• Bogiro
• Oyun Oyna
• Rantaro
• Meindra
• Neng Rara
• Rinto
• Ika
• Mazalix
• Dhie
  
• Your Next...
  

Ga susah-susah amat kan...Intinya kita saling mendongkrak popularitas blog kita. Berbaik hati sesama blogger apa salahnya sie. Inget manusia tak dapat hidup sendiri tanpa bantuan orang lain. Seperti halnya blog hehehe...Semangat Ngeblog yok

Pengen dapat award dariku??Jangan sungkan-sungkan kasih komentar y...

Sumber : Blog Heboh

Slide Show Smooth Gallery II

Mana yang anda pilih? Slide Show Smooth Gallery yang aku bahas sebelumnya atau tutorial kali ini yang akan aku berikan. Nah kalo aku ditanya gitu, maunya dua-duanya bisa tampil dalam satu blog. Tapi aku belum bisa menemukan cara yang biar kedua slide show ini bisa berdampingan tanpa konflik hehehe.

Tutorial yang aku berikan ini yaitu Slide Show Smooth Gallery II , atau anda bisa lihat menu slide show yang aku pake dibawah header itu. Nah itulah yang aku bahas. Ini adalah permintaan dari pengunjung blogku yang sempat menanyakan bagaimana cara membuat tutorial ini. Salah satu layanan javascript ini menurutku dapat anda coba. Tutorial ini mungkin bisa memberikan sesuatu yang berbeda diblog anda. Yang dulunya terlihat biasa saja, dengan adanya tutorial ini bisa terlihat elegan karena sentuhan-sentuhan flash. :D

Kurang lebih tutorialnya berikut ini. Sebelumnya login Blogger anda, kemudian menuju Edit HTML. Jangan lupa Expand Widget Template anda.

1. Copy CSS kode dibawah ini dan letakkan di diatas kode ]]></b:skin>

#slider    {
    background:url(http://4.bp.blogspot.com/_0CLPmP1ydOo/SYp13iDNovI/AAAAAAAAAvg/wUu2lIrDIHc/s1600/slide.png);
    height: 254px;
    overflow: hidden;
    position: relative;
    margin: 5px 0;
}
   
#mover {
    width: auto;
    position:absolute;
    overflow:hidden;
}

.slide {
    padding: 20px 0px;
    width: 1000px;
    float: left;
    position: relative;
    height:200px;
    }
   
.slide h2 {
    font-family:georgia, Helvetica, Sans-Serif;
    font-size: 24px;
    color: #ac0000;
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    width:500px;
    overflow:hidden;
    }

.slide h2 a:link, .slide h2 a:visited  {
    color:#fff;
    background-color: transparent;
    }
   
.slide h2 a:hover  {
    color: #ddd;
    background-color: transparent;
    }
   
span.slmet {
    color: #ee0909;
    font-size: 10px;
    font-family:Tahoma, georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 500px; 
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    text-transform:uppercase;
}   
.slide p {
    color: #999;
    font-size: 12px;
    font-family:georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 500px; 
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    }
   
.slide img {
    position: absolute;
    top: 20px;
    left: 577px;
    background:#fff;
    padding:10px 10px;
    }
   
#slider-stopper {
    position: absolute;
    font-family: Georgia, Helvetica, Sans-Serif;
    top: 113px;
    right: 65px;
    color: #AC0000;
    padding: 3px 8px;
    font-size: 14px;
    text-transform: uppercase;
    z-index: 1000;
    }

 2. Copy Javascript dibawah ini, kemudian paste di bawah kode ]]></b:skin>

<script src='http://web2feel.com/monezine/wp-content/themes/primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://web2feel.com/monezine/wp-content/themes/primus/js/slider.js' type='text/javascript'/>

3. Copy kode dibawah ini dan letakkan di bawah header blog atau letakkan dibawah kode navigasi menu blog anda.

<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

<div class='slide'>
<h2><a href='POST-LINK-HERE' title='POST-TITLE-HERE'>POST-TITLE-HERE</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>POST-SUMMARY-HERE</p>
<img alt='' src='IMAGE-LINK-HERE'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

Biasanya header kodenya seperti ini :
<div id='header-wrapper'>
</b:section>
</div>

4. Jangan lupa disimpan ya.

Note :
1. Ganti tulisan POST-LINK HERE dengan judul slide yang ingin anda tampilkan
2. Ganti tulisan Posted by Author On Month - Day - Year sesuai selera anda.
3. Ganti tulisan POST-SUMMARY-HERE dengan deskripsi slide yang anda tampilkan.
4. Ganti tulisan IMAGE-LINK-HERE dengan lokasi penyimpanan gambar kamu.

Selesai, Happy blogging semua...Jangan Lupa coretan-coretan komentarnya ya :D

Kampanye Damai Pemilu 2009

Kampanye Damai Pemilu Indonesia 2009? Rasanya sudah tak asing lagi bagi para blogger mania. Suatu ajang kontes SEO besar-besaran yang diselenggarakan di Pogung 177. Kompetisi SEO ini akan memperebutkan top position dengan kata kunci "Kampanye Damai Pemilu Indonesia 2009" dalam kurun waktu lama kontes yaitu 3 bulan. Sampai saat ini kurang lebih 800 peserta yang ikut dalam kontes tersebut.

Setiap melaksanakan Kampanye damai pemilu indonesia 2009 Mungkin saja tidak akan berjalan dengan mulus, ada saja kericuhan yang timbul.

karena Kita semua tau ( lagi ), kalau kegiatan Kampanye Damai Pemilu Indonesia 2009 tersebut sangat banyak persaingan, dan hal itu bisa saja menyebabkan perselisihan, serta ( lagi ) terjadinya persaingan yang tidak Sehat.

Mari kita bangkitkan semangat Kampanye Damai Pemilu Indonesia 2009 biar pemilu ditahun ini bisa berjalan lancar.

Berhubungan dengan kontes SEO kampanye damai pemilu indonesia 2009 yang makin mendekati deadline, dan juga sehubungan dengan Web Kontes ini Kampanye Damai Pemilu Indonesia 2009 Local Seo Contest berada di urutan ke-5 Search Engine saat artikel ini ditulis, maka kami mohon dukungannya agar dapat mencapai SEO secara maximum. Tentunya dengan memasang code link di bawah ini di web or blog saudara :

<a href="http://mahir.bempskui.com/kampanye-damai-pemilu-indonesia-2009-local-seo-contest.html" title="kampanye damai pemilu indonesia 2009">kampanye damai pemilu indonesia 2009</a>

Award

Ucapan terima kasih kepada rekan-rekan yang telah menempatkan link tersebut di halaman web/blog bloggers & netters.

Berikut Tool or Software SEO

yang sama sekali tak berharga yang mungkin dapat bersemayam di Kompie rekan-rekan, umumnya kepada yang telah memberi dukungan dengan menempatkan link tersebut di atas.

Look Originally at SEO Suite Official:

cek via SEO Suite Official Website

iNFO

Tool SEO ini dapat Anda semayamkan di PC Anda dengan link download yang hanya di sediakan di post komentar bawah ini dan/atau kontak private Instant Massaging via YM. riz4_arianto : atau girathe1987 :

Page Navigation for Blogger

Jika anda perhatikan bagian paling bawah blog ini setelah kolom posting, anda akan temukan page navigation (seperti gambar di atas) yang berfungsi untuk memindah halaman demi halaman secara berurutan tanpa mengklik bagian kategori, older post maupun newer post. Kebanyakan orang berpikir kalo page navigation tersebut hanya bisa muncul atau dipake dalam wordpress saja. Ternyata navigasi ini bisa dipake dalam blog. Pada postingan kali ini, saya akan berikan tutorial membuat page navigation di blog biar tampil lebih cantik.

Cara Pertama adalah dengan menggunakan HTML :
Seperti biasa, langkah awal anda masuk account Blogger dan arahkan ke Layout. Sekarang anda tuju Edit HTML.

Langkah selanjutnya, masukkan kode CSS berikut ini :

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

Taruh kode CSS tersebut persis diatas ]]></b:skin>

Kemudian anda cari kode dibawah ini atau kode yang mirip dengan template anda

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Kalo sudah ketemu, tambahkan kode berikut ini dibawah  </b:section>

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;


var pageCount=5;
var displayPageNum=3;
var firstPageWord = &#39;First&#39;;
var endPageWord = &#39;Last&#39;;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39; &lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+labelHtml + firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#39;+thisNum+&#39; of &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
html += &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[htmlMap.length-1]+&#39;&quot;&gt; &#39;+endPageWord+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;


<div style='text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;'> <a href='http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html'>Grab this Widget ~ Blogger Accessories</a></div>

Kemudian simpan.

Tapi ada cara yang lebih praktis lagi.Oke, langsung saja pada langkah-langkah yang harus ditempuh.

1. Login ke account blogger dan tujulah ke tab Layout, kemudian klik link "Add Page Element".
2. Pilih HTML/JAVASCRIPT dalam window Page Element tersebut.

3. Copy semua kode diatas lalu paste di page element HTML/JAVASCRIPT
4. Setelah javascript tersebut ditambahkan, pindahkan (drag n drop) widget tersebut kebawah widget utama Blog Post.

 5. Jangan lupa untuk save template / layout untuk menyimpan perubahan yang telah dilakukan.

Pada code hasil download di atas anda dapat merubah nilai berikut (berwarna merah) sesuai kebutuhan :

var pageCount = 5; angka "5" menujukan jumlah posting yang ditanpilkan dalam setiap page.

var displayPageNum = 3; angka "3" menunjukan banyaknya jumlah page yang ditampilkan diblog. Untuk lebih jelasnya silahkan dicoba untuk mengganti nilai-nilai tersebut sehingga perubahannya bisa diketahui langsung.

Lava Lamp Menu Navigation

Lava Lamp Menu Navigation. Bisa dikatakan salah satu Menu Navigasi yang mungkin bisa dikategorikan paling banyak dicari para blogger. Selain terlihat membuat blog menjadi kelihatan menarik, juga tampil dengan elegan. Lava Lamp Menu ini sering digunakan dalam Wordpress, tapi jarang diaplikasikan dalam Blogger. Mungkin karena tutorial ini agak sulit dicari. Tapi jangan khawatir, kali ini saya akan berikan tutorial membuat menu lava lamp. Tutorial ini aku dapatkan dari YUI dan Ganesh waktu blogwalking ke tempat master-master blog :D

Yang paling saya sukai dari navigasi menu ini yaitu animasi dari menu yang apabila kursor kita diarahkan ke menu maka terlihat kotak lava lamp yang mengikuti kursor. Bagaimana cara membuatnya??

Ok, Kita langsung aja membuat tutorialnya.

Login Blogger, terus menuju Layout, Edit HTML
Jangan Lupa centang Expand Widget Template. Cari kode ]]></b:skin>, kemudian copy kode dibawah ini diatas kode tersebut.

/* Generic style for the lava lamp */
/*
.lavaLamp {
    position: relative;
    height: 30px;
    background: url("images/lamp.gif");
    padding: 15px;
    overflow: hidden;
}
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        .lavaLamp li.back {
            background: url("images/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                display: block;
                background: url("images/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }
*/
#lavalamp .lavaLamp {
    position: relative;
    height: 30px; width: 1024px;
    background: url("images/lamp.gif");
    padding: 15px;
    overflow: hidden;
}
    #lavalamp .lavaLamp li {
        float: left;
        list-style: none;
    }
        #lavalamp .lavaLamp li.back {
            background: url("images/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            #lavalamp .lavaLamp li.back .left {
                display: block;
                background: url("images/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        #lavalamp .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }
      
      
      

#floatingline .lavaLamp {
    position: relative;
    padding: 10px;
    overflow: hidden;
    background:#eeeeee;
}
    #floatingline .lavaLamp li {
        float: left;
        list-style: none;
    }
        #floatingline .lavaLamp li.back {
            background: #990000;
            height: 2px;
            z-index: 8;
            position: absolute;
            margin:20px 0 0 0;
        }
        #floatingline .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            color: #333333; outline: none;
            text-align: center;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }

Kemudian copy kode dibawah ini persis diatas kode </head>

<script src='http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.6.0/build/container/container-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.6.0/build/menu/menu-min.js' type='text/javascript'/>

<script src='http://www.geocities.com/attintha/Ux.js' type='text/javascript'/>
<script src='http://www.geocities.com/attintha/LavaLamp.js' type='text/javascript'/>

Terakhir anda copy kode dibawah ini diatas kode <div id='content-wrapper'>

<!--- script that goes in the head -->
<script type="text/javascript">
    YUI.E.onDOMReady((function(){
        var lavalamp = new YUI.Ux.LavaLamp("lavalamp", {
            animFx: YUI.Ea.backOut,
            animSpeed: 1
        });
    }));
</script>
<!--- markup that goes in the body -->
<div id="lavalamp">
    <div class="bd">
        <ul>
            <li><a href="javascript:;">this is item one</a></li>
            <li><a href="javascript:;">two</a></li>
            <li><a href="javascript:;">three</a> </li>
            <li><a href="javascript:;">four</a> </li>
            <li><a href="javascript:;">this is item five</a></li>
        </ul>          
    </div>
</div>

Note :

• Untuk kode warna pink, ubah dengan alamat image lamp tempat anda menyimpan
  
• Untuk kode warna biru, ubah dengan alamat image lava tempat anda menyimpan
• Kode warna hijau menunjukkan panjang dan tinggi menu, anda bisa mengubahnya sesuai template anda

 

Gambar diatas adalah contoh image Menu Lava dan Lamp yang bisa anda gunakan.




Download Tutorial Lava Lamp Menu Navigation Here :

Beautiful Related Post

Related Post merupakan suatu artikel yang berkaitan dengan artikel yang kita posting. Biasanya ini berupa link yang diletakkan dibawah posting blog. Related Post biasa disebut juga dengan Posting Terkait, Link Berkaitan, Artikel pada Kategori yang Sama. Dengan adanya ini para pengunjung blog lebih mudah untuk mencari artikel yang kita posting tanpa harus membuka satu persatu posting. lebih detailnya lihat gambar berikut :

Bagaimana cara membuatnya? Berikut tutorialnya.

Langkah I

Login Blogger anda kemudian masuk Template -> Edit HTML -> Expand Widget Template Anda. cari kode ]]></ b: skin> kemudian copy paste kode berikut ini persis diatas kode ]]></ b: skin> :

 /*-----------------------------
post code related optimal
visit http://www.trik-tipsblog.blogspot.com
------------------------------*/
. rbbox (border: 1px solid rgb (192, 192, 192); padding: 5px;
background-color: # f0f0f0;-moz-border-radius: 5px; margin: 5px;)
. rbbox: hover (background-color: rgb (255, 255, 255);)

Kemudian anda cari kode <p><data:post.body/></p>
Biasanya kode ini terletak dibagian kita membuat Read More. Nah kalo sudah ketemu copy paste kode berikut ini dibawah kode <p><data:post.body/></p>

<b:if cond='data:blog.pageType == "item"'>
<H2> Related Articles: </ H2>
<div Class='rbbox'>
<div Style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div Id='albri'/>
<script Type='text/javascript'>
homeUrl3 var = "<data:blog.homepageUrl/>";
maxNumberOfPostsPerLabel var = 4;
maxNumberOfLabels var = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
listEntries10 function (json) (
var ul = document.createElement ( 'ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel)?
json.feed.entry.length: maxNumberOfPostsPerLabel;
for (var i = 0; i <maxPosts; i + +) (
var entry = json.feed.entry [i];
var alturl;
for (var k = 0; k <entry.link.length; k + +) (
if (entry.link [k]. rel == 'alternate') (
alturl = entry.link [k]. href;
break;
)
)
var li = document.createElement ( 'li');
var a = document.createElement ( 'a');
a.href = alturl;
if (a.href! = location.href) (
var txt = document.createTextNode (entry.title. $ t);
a.appendChild (txt);
li.appendChild (a);
ul.appendChild (li);
)
)
for (var l = 0; l <json.feed.link.length; l + +) (
if (json.feed.link [l]. rel == 'alternate') (
var raw = json.feed.link [l]. href;
var label = raw.substr (homeUrl3.length +13);
var k;
for (k = 0; k <20; k + +) label = label.replace ( "% 20", "");
var txt = document.createTextNode (label);
var h = document.createElement ( 'b');
h.appendChild (txt);
var div1 = document.createElement ( 'div');
div1.appendChild (h);
div1.appendChild (ul);
document.getElementById ( 'albri'). appendChild (div1);
)
)
)
search10 function (query, label) (
var script = document.createElement ( 'script');
script.setAttribute ( 'src', query + 'feeds/posts/default/- /'
+ + Label
'? alt = json-in-script & callback = listEntries10');
script.setAttribute ( 'type', 'text / javascript');
document.documentElement.firstChild.appendChild (script);
)
var labelArray = new Array ();
numLabel var = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i <labelArray.length; i + +)
if (labelArray [i] == textLabel) test = 1;
if (test == 0) (
labelArray.push (textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels)?
labelArray.length: maxNumberOfLabels;
if (numLabel <maxLabels) (
search10 (homeUrl3, textLabel);
numLabel + +;
)
)
</ b: loop>
</ b: loop>
</ SCRIPT>
</ Div>
<script type="text/javascript"> RelPost ();</ script>
</ Div>
</ b: if>

 Selamat Mencoba. Happy BLogging with me

Membuat Slide Show Smooth Gallery

Supaya blog kita terlihat lebih indah dan elegan, ada baiknya kalo membumbuinya dengan pernak pernik. Nah kali ini yang aku bahas adalah Membuat Slide Show Smooth Gallery. Menampilkan postingan blog kita kedalam bentuk animasi flash. Begitulah kira-kira pengertiannya Slide Show Smooth Gallery.  Sebelumnya artikel ini aku dapat dari blognya ANDIE, waktu liat-liat blognya kok ada pernak pernik yang menarik dan terkesan lebih elegan blognya. Untuk itulah saya tertarik untuk membuatnya dan berikan tutorialnya...Kurang lebih tutorial membuatnya demikian

Ikuti langkah-langkahnya berikut :

1. Copy Paste Script berikut

<!-- begin Smooth Gallery scripts -->
<link rel="stylesheet" type="text/css" href="http://www.geocities.com/adeha_182/jd2.gallery.css" />

<script src='http://www.geocities.com/adeha_182/mootools2.v1.11.js' type='text/javascript'/>

<script src='http://www.geocities.com/adeha_182/jd2.gallery.js' type='text/javascript'/>
<!-- end Smooth Gallery scripts -->

- Login Blogger Anda kemudian pilih "Layout"
- Klik "Edit HTML" dan paste kode diatas dibawah kode <head>

2. Pastikan anda masih di Edit HTML , kemudian copy kode dibawah ini :

<div id='isismoothgallery'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 500px;
height: 400px;
z-index:5;
border: 1px solid #000;
margin: 0px 0px 0px 30px;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($(&#39;myGallery&#39;), {
timed: true
});
}
window.addEvent(&#39;domready&#39;,startGallery);
</script>

<div id='myGallery'>
<div class='imageElement'>
<h2>Featured Article #1</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-1.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/01.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #2</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-2.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/02.png'/>
</div>

<div class='imageElement'>
<h2>Featured Article #3</h2>
<p>This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can ...</p>
<a class='open' href='http://www.blogger.com/demo/church/featured/featured-article-3.htm' title='Read More'/>
<img class='full' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
<img class='thumbnail' src='http://www.revolutiontwo.com/demo/church/images/03.png'/>
</div>

</div>
</b:if>
</div>

Paste kode diatas persisi diatas kode ini :

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

</div>

- Ganti tulisan Featured Article #1, Featured Article #2, Featured Article #3 yang bercetak tebal dengan Judul artikelmu.

- Ganti tulisan yang berwarna Merah sesuai ukuran lay out mu.

• width: 500px; (lebar Smooth Gallery)

• height: 400px; (tinggi Smooth Gallery)

• margin: 0px 0px 0px 30px; (jarak atas,kanan,bawah,kiri Smooth Gallery)

- Ganti tulisan yang berwarna Biru dengan Ringkasan artikelmu.

- Ganti tulisan yang berwarna Hijau dengan Link artikelmu.

- Ganti tulisan yang berwarna Pink dengan Link Gambarmu.

- Untuk menambah elemen slideshow, copy kode yang berkedip - kedip dan paste dibawahnya kode tersebut.

3. Simpan dan Lihat Hasilnya.