Cara Menghilangkan Link Posting Lama

Sebagaiman anda ketahui bahwa saat sekarang ini blogger.com masih menggunakan template dengan dua versi, yaitu versi Template Klasik serta versi Template baru. Salah satu perbedaan antara keduanya adalah versi klasik tidak mempunyai fasilitas link “Posting Lama” atau “Older Posts”, dengan di tambahkannya fasilitas tersebut pada template versi baru maka akan lebih mempermudah para pembaca untuk menemukan artikel yang sudah tidak tampil di halaman depan.

Ternyata memang “lain orang lain juga keinginan”. Di kala orang lain senang dengan kehadiran fasilitas tersebut, ternyata ada juga yang ingin menghilangkannya, apakah itu anda? pertanyaan selanjutnya apakah fasilitas tersebut bisa di hilangkan atau tidak? jawaban singkat “Bisa”, dan caranya pun terbilang sangat mudah.

Sebelumnya perlu di ketahui bahwa fasilitas link tersebut ada 3 yaitu “Posting baru” atau “Newer Posts”, “Home” atau “Halaman Muka”, serta “Posting Lama” atau “Older Posts”. Mana yang mau anda hilangkan, atau mau semuanya? tentu saja bisa. Untuk menghilangkannya anda hanya menambahkan sedikit kode pada CSS template anda.

 

Untuk menghilangkan “Posting baru” atau “Newer Posts” :

Cari kode yang mirip seperti ini pada template anda :

#blog-pager-newer-link {
float: left;
}

Ganti kodenya jadi seperti ini :

#blog-pager-newer-link {
display:none;

}

Jangan lupa untuk menyimpan template anda

 

Untuk menghilangkan “Posting Lama” atau “Newer Posts” :

Cari kode yang mirip seperti ini pada template anda :

#blog-pager-older-link {
float:right;
padding-right:5px;
}

Ganti kodenya jadi seperti ini :

#blog-pager-older-link {
display:none;

}

Jangan lupa untuk menyimpan template anda

 

Untuk menghilangkan “Home” atau “Halaman Muka” :

Cari kode yang mirip seperti ini pada template anda :

#blog-pager {
text-align: center;
}

Ganti kodenya jadi seperti ini :

#blog-pager { 

display:none;

}

Jangan lupa untuk menyimpan template anda

 

Mudah sekali bukan? atau anda masih merasa bingung? OK, kang Rohman ladenin deh kalau begitu. Berikut langkah lengkapnya ;

 

1. Login ke blogger dengan ID anda.
   
2. Klik Tata Letak.
   
3. Klik tab Edit HTML
   
4. Klik Download Template Lengkap. silahkan save dulu template anda sebagai backup.
   
5. Cari kode yang mirip dengan kode di bawah :
   

    

   
   

   #blog-pager-newer-link {
   float: left;
   }
   #blog-pager-older-link {
   float:right;
   padding-right:5px;
   }
   #blog-pager {
   text-align: center;
   }

   
   
6. 
   

   Hapus kode di atas, lalu ganti dengan kode di bawah ini :

   
   

   #blog-pager-newer-link {
   display:none;
   }
   #blog-pager-older-link {
   display:none;
   }
   #blog-pager {
   display:none;
   }

   
   
7. 
   

   Klik tombol SIMPAN TEMPLATE.

   
   
8. 
   

   Selesai. Ucapkan dadah padanya.

 

Selamat deh bagi yang benci akan kehadiran fasilitas “Older Posts”, karena dia akan enggan untuk menampakkan diri lagi di blog anda.

Pasang Featured Content Di Blogger

Anda sudah pasti mengetahui Wordpress Theme karya Brian Gardner, sebuah karya yang begitu populer di kalangan pengguna wordpress karena menghadirkan Theme yang mengusung tema Magazine, namanya “Revolution Theme”. Dan sekarang malah sudah di launching “Revolution Theme 2”. Salah satu dari Revolution Theme tersebut ada yang di namakan “Revolution_music-10”. Daya tarik dari “Revolution_music-10”  adalah adanya feature gambar Slide show dengan penambahan variasi yang begitu cantik dan menarik.

Setengah hari Kang Rohman habiskan agar feature tersebut bisa di implementasikan pada template blogspot, dan akhirnya bisa juga. Penasaran seperti apa Feature tersebut? silahkan lihat demonya di http://user-online.blogspot.com, silahkan saksikan beberapa saat untuk melihat keindahan dari slideshownya, klik pada tulisan Featured Content atau tanda panah yang ada di sebelah pinggir agar bisa melihat variasi yang menarik.

Sudah di lihat demonya? tertarik untuk memasang pada template anda? tunggu saja pada posting berikutnya yang akan kang Rohman tulis!

Engga dhenk mo di tulis sekarang . Jika anda tertarik membuat feature tersebut, silahkan ikuti langkah-langkah berikut ;

 

Buat gambar yang ingin di jadikan Slide Show dengan ukuran yang anda inginkan, misal ukuran 550px X 200px. Disarankan jangan terlalu banyak, maksimal 5 buah gambar agar tidak terlalu berat saat loading. Contoh :

 

 

Upload gambar-gambar tersebut ke server yang biasa anda gunakan, kemudian catat alamatnya. Misalkan gambar yang sudah saya upload mempunyai alamat seperti ini :

 

http://lh4.ggpht.com/_pt7i0nbIOCY/SSoURAV9qpI/AAAAAAAAAcU/eTn9_n0fB24/icons_thumb%5B2%5D.png?imgmax=800

http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUM_NXlkI/AAAAAAAAAcM/tnzzZwqr7M0/tools_thumb%5B3%5D.png?imgmax=800

http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUU8cXExI/AAAAAAAAAcc/W37l9b00JNQ/blogger-templates_thumb%5B2%5D.png?imgmax=800

http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUBuex4CI/AAAAAAAAAb8/hFNCBbvb_nk/wordpress-theme_thumb%5B2%5D.png?imgmax=800

http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUIumVlwI/AAAAAAAAAcE/VXYo5sYbNH8/wallpapers_thumb%5B2%5D.png?imgmax=800

 

Tentukan link yang anda targetkan apabila gambar-gambar tersebut di klik oleh pengunjung, misal :

http://www.blogspottutorial.com/search/label/free%20icons

http://www.blogspottutorial.com/search/label/free%20template

http://www.blogspottutorial.com/search/label/free%20tool

http://www.blogspottutorial.com/search/label/blogspot%20tutorial

http://www.blogspottutorial.com/search/label/logo

 

Jika anda sudah mempunyai alamat gambar serta alamat link yang akan di pasang, maka ubahlah menjadi seperti ini (contoh saja) :

<div id="myGallery">
        <div class="imageElement">
            <h3>Wordpress Themes</h3>

            <p>Get Wordpress Themes for free here!</p>
            <a href="http://www.blogspottutorial.com/search/label/blogspot%20tutorial" class="open" title="Click here to read full story"></a>
            <img src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUBuex4CI/AAAAAAAAAb8/hFNCBbvb_nk/wordpress-theme_thumb%5B2%5D.png?imgmax=800" class="full"/>
            <img src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUBuex4CI/AAAAAAAAAb8/hFNCBbvb_nk/wordpress-theme_thumb%5B2%5D.png?imgmax=800" class="thumbnail"/>
        </div>
        <div class="imageElement">
            <h3>Blogger Templates</h3>
            <p>Get Blogger templates for free here!</p>

            <a href="http://www.blogspottutorial.com/search/label/free%20template" class="open" title="Click here to read full story"></a>
            <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUU8cXExI/AAAAAAAAAcc/W37l9b00JNQ/blogger-templates_thumb%5B2%5D.png?imgmax=800" class="full"/>
            <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUU8cXExI/AAAAAAAAAcc/W37l9b00JNQ/blogger-templates_thumb%5B2%5D.png?imgmax=800" class="thumbnail"/>
        </div>
        <div class="imageElement">
            <h3>Icons</h3>
            <p>Get cute icons web and blog for free here!</p>
            <a href="http://www.blogspottutorial.com/search/label/free%20icons" class="open" title="Click here to read full story"></a>

            <img src="http://lh4.ggpht.com/_pt7i0nbIOCY/SSoURAV9qpI/AAAAAAAAAcU/eTn9_n0fB24/icons_thumb%5B2%5D.png?imgmax=800" class="full"/>
            <img src="http://lh4.ggpht.com/_pt7i0nbIOCY/SSoURAV9qpI/AAAAAAAAAcU/eTn9_n0fB24/icons_thumb%5B2%5D.png?imgmax=800" class="thumbnail"/>
        </div>
        <div class="imageElement">
            <h3>Wallpapers</h3>
            <p>Get beautiful wallpapers for free here!</p>
            <a href="http://www.blogspottutorial.com/search/label/logo" class="open" title="Click here to read full story"></a>
            <img src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUIumVlwI/AAAAAAAAAcE/VXYo5sYbNH8/wallpapers_thumb%5B2%5D.png?imgmax=800" class="full"/>

            <img src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSoUIumVlwI/AAAAAAAAAcE/VXYo5sYbNH8/wallpapers_thumb%5B2%5D.png?imgmax=800" class="thumbnail"/>
        </div>
        <div class="imageElement">
            <h3>Tools</h3>
            <p>Get Powerful tools for free here!</p>
            <a href="http://www.blogspottutorial.com/search/label/free%20tool" class="open" title="Click here to read full story"></a>
            <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUM_NXlkI/AAAAAAAAAcM/tnzzZwqr7M0/tools_thumb%5B3%5D.png?imgmax=800" class="full"/>
            <img src="http://lh5.ggpht.com/_pt7i0nbIOCY/SSoUM_NXlkI/AAAAAAAAAcM/tnzzZwqr7M0/tools_thumb%5B3%5D.png?imgmax=800" class="thumbnail"/>
                </div>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready', startGallery);
</script>
        </div>

Untuk selanjutnya, script di atas akan saya sebut sebagai file #1

 

Silahkan download dua skrip di bawah ini ( Klik kanan : Save target As… (IE), Save Link As..(FF))

jd.gallery.js	mootools.v1.11.js

 

Uploadlah dua JavaScript diatas ke server tempat anda menyimpan script, misal ke yahoo geocities atau yang lainnya. Silahkan catat URL kedua script tersebut. Contoh : script tersebut mempunyai alamat seperti ini (contoh saja) :

http://ServerAnda.com/jd.gallery.js

http://ServerAnda.com/mootools.v1.11.js

 

Ubahlah alamat tersebut menjadi seperti ini :

<script src='http://ServerAnda.com/jd.gallery.js' type='text/javascript'></script>

<script src='http://ServerAnda.com/mootools.v1.11.js' type='text/javascript'></script>

 

Untuk selanjutnya, script di atas akan saya sebut sebagai file #2

 

Sekarang anda akan memasuki langkah terakhir, silahkan ikuti langkah-langkah berikut :

1. login ke blogger dengan Id anda.



2. Klik Tata Letak



3. Klik tab Edit HTML



4. Klik Download  Template Lengkap, silahkan di save dahulu untuk backup (penting).



5. Copy kode berikut, lalu paste persis di atas kode ]]></b:skin> :
   
   

   
     
   #myGallery, #myGallerySet, #flickrGallery 
       
   {width: 550px;height: 200px;z-index: 5;} 
     
   #flickrGallery 
       
   {width: 500px;height: 334px;} 
     
   #myGallery img.thumbnail, #myGallerySet img.thumbnail 
       
   {display: none;} 
   
   .jdGallery 
       
   {overflow: hidden;position: relative;} 
   
   .jdGallery img 
       
   {border: 0;margin: 0;} 
   
   .jdGallery .slideElement 
       
   {width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOO5Za74I/AAAAAAAAAbc/w1cX7FKk97Y/loading-bar-black_thumb%5B1%5D.gif?imgmax=800'); 
   } 
   
   .jdGallery .loadingElement 
       
   {width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOO5Za74I/AAAAAAAAAbc/w1cX7FKk97Y/loading-bar-black_thumb%5B1%5D.gif?imgmax=800');}
   .jdGallery .slideInfoZone 
       
   {position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 50px;background: #000;color: #fff;text-indent: 0;overflow: hidden;} 
   
   * html .jdGallery .slideInfoZone 
       
   {bottom: -1px;} 
     
   .jdGallery .slideInfoZone h2 
       
   {padding: 7px 10px 2px 10px;font-size: 12px;margin: 0;font-weight: bold;color: #ffffff;text-transform: uppercase;background: #111111;letter-spacing:0em;} 
   .jdGallery .slideInfoZone p 
       
   {font-size: 12px;margin: 2px 5px;color: #fff;padding: 0px 0px 0px 5px;font-family:arial;} 
   .jdGallery div.carouselContainer 
       
   {position: absolute;height: 135px;width: 100%;z-index: 10;margin: 0px;left: 0;top: 0;} 
   .jdGallery a.carouselBtn 
       
   {position: absolute;bottom: 0;right: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #000;color: #fff;cursor: pointer;} 
   .jdGallery .carousel 
       
   {position: absolute;width: 100%;margin: 0px;left: 0;top: 0;height: 115px;background: #000;color: #fff;text-indent: 0;overflow: hidden;} 
   .jdExtCarousel 
       
   {overflow: hidden;position: relative;} 
   .jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper 
       
   {position: absolute;width: 100%;height: 78px;top: 10px;left: 0;overflow: hidden;} 
   .jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner 
       
   {position: relative;} 
   .jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail 
       
   {cursor: pointer;background: #000;background-position: center center;float: left;border: solid 1px #fff;} 
   .jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail 
       
   {margin-bottom: 10px;} 
   .jdGallery .carousel .label, .jdExtCarousel .label 
       
   {font-size: 13px;position: absolute;bottom: 5px;left: 10px;padding: 0;margin: 0;} 
   .jdGallery .carousel .wallButton, .jdExtCarousel .wallButton 
       
   {font-size: 10px;position: absolute;bottom: 5px;right: 10px;padding: 1px 2px;margin: 0;background: #222;border: 1px solid #888;cursor: pointer;} 
   .jdGallery .carousel .label .number, .jdExtCarousel .label .number 
       
   {color: #b5b5b5;} 
   .jdGallery a 
       
   {font-size: 100%;text-decoration: none;color: inherit;} 
   .jdGallery a.right, .jdGallery a.left 
       
   {position: absolute;height: 99%;width: 25%;cursor: pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity: 0.2;opacity: 0.2;} 
   
   * html .jdGallery a.right, * html .jdGallery a.left 
       
   {filter:alpha(opacity=50);} 
   
   .jdGallery a.right:hover, .jdGallery a.left:hover 
       
   {filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;} 
   
   .jdGallery a.left 
       
   {left: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsyWhVCCez4q6zzbxZiprnumOESXaKR18PDLvlFgkC-IiFXLNul9ufABX9fntqGX1xtB7qpxL1D9HO-WOGbDk0wb8IBNwTRYwMiwhb_xV7DbaFsHN6SvLEBsGu1q9rd0OTNDKPfpsX9gE/?imgmax=800') no-repeat center left;} 
   
   * html .jdGallery a.left { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsyWhVCCez4q6zzbxZiprnumOESXaKR18PDLvlFgkC-IiFXLNul9ufABX9fntqGX1xtB7qpxL1D9HO-WOGbDk0wb8IBNwTRYwMiwhb_xV7DbaFsHN6SvLEBsGu1q9rd0OTNDKPfpsX9gE/?imgmax=800') no-repeat center left; } 
   
   .jdGallery a.right 
       
   {right: 0;top: 0;background: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOUynKksI/AAAAAAAAAbs/v7o0XgwYdTg/fleche2-1_thumb%5B1%5D.png?imgmax=800') no-repeat center right;} 
   
   * html .jdGallery a.right { background: url('http://lh4.ggpht.com/_pt7i0nbIOCY/SSoOUynKksI/AAAAAAAAAbs/v7o0XgwYdTg/fleche2-1_thumb%5B1%5D.png?imgmax=800') no-repeat center right; } 
   .jdGallery a.open 
       
   {left: 0;top: 0;width: 100%;height: 100%;} 
   .withArrows a.open 
       
   {position: absolute;top: 0;left: 25%;height: 99%;width: 50%;cursor: pointer;z-index: 10;background: none;-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;} 
   .withArrows a.open:hover { background: url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOXmTl_xI/AAAAAAAAAb0/GLqpxNapKAg/open_thumb.gif?imgmax=800') no-repeat center center; } 
   
   * html .withArrows a.open:hover { background: url('http://lh6.ggpht.com/_pt7i0nbIOCY/SSoOXmTl_xI/AAAAAAAAAb0/GLqpxNapKAg/open_thumb.gif?imgmax=800') no-repeat center center;filter:alpha(opacity=80); } 
       
   /* Gallery Sets */ 
   
   .jdGallery a.gallerySelectorBtn 
       
   {z-index: 15;position: absolute;top: 0;left: 30px;height: 20px;text-align: center;padding: 0 10px;font-size: 13px;background: #333;color: #fff;cursor: pointer;opacity: .4;-moz-opacity: .4;-khtml-opacity: 0.4;filter:alpha(opacity=40);} 
   
   .jdGallery .gallerySelector 
       
   {z-index: 20;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #000;} 
   
   .jdGallery .gallerySelector h2 
       
   {margin: 0;padding: 10px 20px 10px 20px;font-size: 20px;line-height: 30px;color: #fff;} 
   
   .jdGallery .gallerySelector .gallerySelectorWrapper 
       
   {overflow: hidden;} 
   
   .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton 
       
   {margin-left: 10px;margin-top: 10px;border: 1px solid #888;padding: 5px;height: 40px;color: #fff;cursor: pointer;float: left;} 
   .jdGallery .gallerySelector .gallerySelectorInner div.hover 
       
   {background: #333;} 
   .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview 
       
   {background: #000;background-position: center center;float: left;border: none;width: 40px;height: 40px;margin-right: 5px;} 
   .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3 
       
   { margin: 0;padding: 0;font-size: 12px;font-weight: normal;} 
   .jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info 
       
   { margin: 0;padding: 0;font-size: 12px;font-weight: normal;color: #aaa;}
   

   
   



6. 
   

   Copy file #2 (lihat script tadi di atas), lalu paste persis di atas kode </head>

   
   



7. 
   

   Klik tombol SIMPAN TEMPLATE. Silahkan santai dulu sejenak.

   
   



8. 
   

   Klik tab Elemen Halaman.

   
   



9. 
   

   Klik Tambah Gadget.

   
   
   

   

   
   



10. 
    

    Klik tanda plus (+) untuk HTML/JavaScript.

    
    
    

    

    
    



11. 
    

    Copy file #1 (lihat script di atas), kemudian paste pada kolom yang muncul.

    
    



12. 
    

    Klik tombol SIMPAN.

    
    



13. 
    

    Geserkan elemen yang baru di buat tadi di atas elemen posting.

    
    



14. 
    

    Klik tombol SIMPAN yang ada di bagian atas.

    
    



15. 
    

    Selesai. silahkan lihat hasilnya.

    
    

 

 

Sedikit tambahan, dalam kode CSS di atas (langkah 5) pada awal kode ada yang seperti ini ;

#myGallery, #myGallerySet, #flickrGallery

{width: 550px;height: 200px;z-index: 5;}

Anda dapat mengatur lebar serta tinggi widget yang anda bentuk dengan mengubah nilai width serta height nya.

 

Selamat menikmati suasana baru di blog anda!

Debt Consolidation Loan

As we know that many credit owners who have problems with their credits. It happens because of some reasons; they usually spend their money more than the credit limit and when they want to pay, they don’t have any money and so, the problems come to them and finally they have bad status on their credit. If they have a bad status on their credit card, it is usually difficult for them to regain normal status again and hard for them to apply new credits.

Fortunately, many companies or websites that offer the services for the problem above. They give services on helping the credit owners to gain their credit status again and one of those companies is debtfree24.com. As soon as the credit owners ask their help, they will contact the credit providers to ask for the new status and wipe away the burdening debts the credit owners achieved. The process to conquer your debts and reconstruct your credit is now very easy with the help of Debtfree24.com.

Debt Consolidation Loan is the service they always handle. They have helped many credit owners to cope with this problem. If you experience this problem, you had better come here. After signing up here, their Debt Repayment Representative will contact you to arrange the repayment program. All their Debt Repayment Representative is professional and has a lot of experiences handling this kind of problem. They will be happy to help you and answer the question given to them. Now, gaining back your credit status is possible to happen after knowing DebtFree24.com

Credit Cards

In this modern and globalization era, having credit cards is a must. Many people like to have a credit card; even some of them like to have 5 until 10 credit cards. Many reasons why they like owning credit cards but from most reasons; following a life style and having easy way payment can be two main reasons . With a credit card, we can do many things, family can pay for their household needs, and students can pay their school fee or tuition fee.

Having a credit card gets easier now because there are many credit cards providers which offer the credit cards for the people online or offline. One of the credit card providers is extracreditcards.com. Extra credit cards are the right and the best online credit card provider for individual and business owner who would like to apply a new credit card or add more credit cards. They will guide you to get your dream of having credit cards for seven kinds of credit card they are offering; Low Apr Credit, Cards Instant Approval Credit Cards, Travel Reward Credit Cards, Prepaid Debit Cards, Bad Credit Credit Card, Business Credit Card and Student Credit Cards

One of the biggest problem of card owners is that they sometimes have to pay a high credit card interest but not extracreditcards.com. They will help and guide you to get a low APR credit card from many credit card providers. Another offer they give is improving your credit score. So, if you feel tired of applying credits card in other place or have to pay high interest, you had better come to extracreditcards.com.

Membuat Menu Slide Show Tab View

Apakah anda pernah mengunjungi situs http://kompas.com? salah satu situs surat kabar di indonesia yang cukup terkenal. Coba anda perhatikan ke seblah kiri atas situs tersebut, di sana terdapat menu tab yang biasa di sebut dengan “Tab View” karena jika tabnya di klik akan berpindah ke isi menu tersebut (coba buktikan, klik saja tab nya),  namun sedikit berbeda dari biasanya karena menu tersebut bisa menampilkan isi dari menu tersebut secara bergantian atau bahasa yang biasa di gunakan adalah “Slide Show”. Dapat di ambil kesimpulan bahwa menu tersebut mempunyai dua fungi yaitu sebagai “Tab View” serta “Slide Show”.

Sedikit tertarik terhadap menu tersebut agar bisa di implementasikan pada template blogger, dan akhirnya ternyata bisa juga. Untuk melihat contoh, silahkan anda kunjungi http://magazine-1.blogspot.com, silahkan perhatikan ke pojok kiri atas, di sana ada menu yang mirip dengan yang di situs kompas bukan (sengaja tidak di buat sama persis).

Bagi anda yang tertarik membuat Menu Slide Show Tab View, silahkan ikuti langkah-langkah berikut :

 

Langkah #1

1. Login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.

4. Copy kode di bawah ini, lalu paste persis di atas kode ]]></b:skin>

   .indentmenu{
   font: bold 11px Arial;
   width: 100%; /*leave this value as is in most cases*/ 
   } 
   .indentmenu ul{
   margin: 2px;
   padding: 0;
   float: left;
   /* width: 80%; width of menu*/
   background: transparent;
   } 
   .indentmenu ul li{
   display: inline;
   } 
   .indentmenu ul li a{
   float: left;
   margin: 2px;
   color: #000; /*text color*/
   padding: 5px 11px;
   text-decoration: none;
   border: 1px solid #ccc; 
   } 
   .indentmenu ul li a:hover{
   background:#ddd;
   } 
   .indentmenu ul li a:visited{
   color: white;
   } 
   .indentmenu ul li a.selected{
   color: white !important;
   padding-top: 6px; /*shift text down 1px*/
   padding-bottom: 4px;
   border: 1px solid #000000;
   background:#000000;
   } 
   .tabcontentstyle{ /*style of tab content container*/
   border: 1px solid gray;
   width: 450px;
   margin-bottom: 1em;
   padding: 10px;
   } 
   .tabcontent{
   display:none;
   } 
   @media print {
   .tabcontent {
   display:block !important;
   }
   }

   
   
   
   
   



5. Download dulu script ini, copy lalu paste persis di atas kode </head>



6. Klik tombol SIMPAN TEMPLATE.



7. Langkah pertama selesai. Silahkan istirahat dulu, minum khe, minum teh khe atau apa gitu biar tenang dulu

 

Jika sudah santai, ayo kita lanjut ke langkah berikutnya.

Langkah #2

1. Klik tab Elemen Halaman.



2. Klik Tambah Gadget
   
   

   

   
   



3. 
   

   Klik tombol plus (+) Untuk HTML/JavaScript.

   
   
   

   

   
   



4. Copy lalu paste kode berikut pada kolom yang tersedia :
   

    
          
   <div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
        
   <div id="pettabs" class="indentmenu">
         
   <ul>
       
   <li><a href="#" class="selected" rel="tab1">1</a></li>
        
   <li><a href="#" rel="tab2">2</a></li>
         
   <li><a href="#" rel="tab3">3</a></li>
          
   <li><a href="#" rel="tab4">4</a></li> 
       
   </ul>
           
   <br style="clear: left"/>
        
   </div> 
       
   <div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em"> 
       
   <div id="tab1" class="tabcontent">
           
   <a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">
          
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SSS44BOiVbI/AAAAAAAAAZ8/JSAjyxXZVEc/obamabush_thumb%5B1%5D.png?imgmax=800" height="152" title="obamabush"/></a> 
       
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">Obama Will Change Busf Policy</a></h3></p>
         
   U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...]
         
   </div> 
       
   <div id="tab2" class="tabcontent">
           
   <a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">
       
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SSS47jWx8HI/AAAAAAAAAaE/wTj2qMO6dV8/beyone_thumb%5B1%5D.png?imgmax=800" height="152" title="beyone"/></a>
          
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">Beyone Will Never Sell Her Wedding Photo</a></h3></p> 
        
   Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...]
           
   </div> 
         
   <div id="tab3" class="tabcontent">
           
   <a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">
          
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SSS5Gg8b_8I/AAAAAAAAAac/OdWejtZv8GI/gunNroses_thumb%5B1%5D.png?imgmax=800" height="152" title="Guns N 'Roses"/></a> 
         
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">Guns N 'Roses Will Back</a></h3></p>      
   After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...]
           
   </div> 
       
   <div id="tab4" class="tabcontent">      
   <a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">
        
   <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj45Qnvxiq7sv29CtYcl4dClaKrrGGDtt4rnSWUdUjPSww3UFFghHJXSdiMilHgu8D1wGY72QwQEf1PNtphiDRRnEaIEXEvq_V4UsbjxBFlAdqh8ZEgEQ2S9msF8OZXcZOalJjIQ6vXWqU/?imgmax=800" height="152" title="ipod"/></a>
        
   <p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">Ipod Can Make Your ear Buzz</a></h3></p> 
        
   Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...]
           
   </div>
   </div> 
      
   <script type="text/javascript">      
   var mypets=new ddtabcontent("pettabs")       
   mypets.setpersist(true)       
   mypets.setselectedClassTarget("link")       
   mypets.init(2000)       
   </script>

   
   



5. Klik tombol SIMPAN TEMPLATE.



6. Selesai. Silahkan lihat hasilnya.

 

Kode-kode di atas tentunya tidak mutlak harus seperti yang Kang Rohman tulis, namun anda bisa memodifikasinya agar sesuai dengan keinginan atau[un sesuai dengan template yang anda pakai.

 

Sedikit keterangan agar lebih memudahkan anda dalam memodifikasi kode ini.

 

Pada langkah pertama, ada deretan kode CSS, kode tersebut bisa anda kreasikan sendiri agar menghasilkan bentuk deretan tab yang cantik.

Perhatikan kode berikut :

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">

<div id="pettabs" class="indentmenu">

<ul>

<li><a href="#" class="selected" rel="tab1">1</a></li>


<li><a href="#" rel="tab2">2</a></li>


<li><a href="#" rel="tab3">3</a></li>


<li><a href="#" rel="tab4">4</a></li>

</ul>

<br style="clear: left"/>


</div>

Kode ini adalah deretan tab dengan urutan tab seperti ini : 1, 2, 3, 4. Ini bisa anda ubah dengan apa yang anda mau. Misal Recent Comments, Recen Post, Shoutbox, atau apa saja sesuai keinginan. Untuk mengatur tinggi dari widget tersebut, anda tinggal mengganti nilai height:350px; menjadi nilai yang lain. Misal : height:400px;

 

Perhatikan juga yang ini :

<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">

Kode tersebut adalah untuk mengatur isi dari menu tersebut, ini tentunya bisa anda ubah sesuai dengan keinginan anda, Misal :

width:240px : ini untuk mengatur lebar, ubah dengan nilai yang sesuai keinginan. Contoh : width:300px.

text-align:justify : ini untuk mengatur perataan tulisan, ganti dengan yang anda inginkan. Contoh : text-align:left, text-align:right.

 

Perhatikan kode berikut :

 

<script type="text/javascript">

    var mypets=new ddtabcontent("pettabs")

    mypets.setpersist(true)


    mypets.setselectedClassTarget("link")


    mypets.init(2000)

    </script>

 

Untuk mengatur lamanya waktu perpindahan dari satu tab ke tab yang lain, anda tinggal mengganti nilai 2000 menjadi nilai yang lain. Misal : 2100. Semakin besar nilainya maka semakin lama pindah.

Kode dalam “Slide Show Tab View” di atas memuat artikel milik kang Rohman, silahkan di ganti sesuai keinginan, itu hanya contoh untuk memberikan sugesti terhadap anda.

 

Selamat mencoba!

 

Original Script by : dynamic drive. Modified by : Blogspot tutorial

Tips mengelola Shoutbox Dari ShoutMix

Pasti anda sudah faham bahwa fungsi dari sebuah shoutbox adalah untuk sarana berinteraksi antara pemilik blog dengan pengunjungnya atau antara pengunjung dengan pengunjung lainnya agar bisa berkomunikasi. Singkat kata bahwa shoutbox adalah sebuah mini chat box, namun pada kenyataannya shoutbox ini sering di jadikan untuk ajang untuk melakukan promosi. Namun, Ini kembali kepada si pemilik blog itu sendiri, apakah shoutboxnya boleh di jadikan untuk sarana promosi atau tidak. Jika kang Rohman sendiri sebenarnya membolehkan anda untuk berpromosi di shoutbox, namun tentunya promosi yang wajar bukan melakukan spam.

Promosi wajar yang di maksud adalah hanya ada satu link promosi dalam satu halaman depan shoubox, tunggu hingga link promosi anda menghilang dari halaman depan shoutbox, nah anda baru boleh untuk berpromosi lagi. Contoh dari promosi misalkan dalam shoutbox tertulis : kunjugi blog ku yah [link] dan lain sebagainya.

Terkadang ada orang yang mungkin tidak tahu atau memang bandel untuk melakukan promosi spamming dengan mengisi shoutbox penuh dengan link dia, contoh seperti ini :

 

 

Anda sebagai pemilik blog terkadang kurang nyaman dengan kondisi seperti itu. Untuk kondisi tersebut, anda sebagai pemilik blog bisa melakukan perlakuan khusus yakni dengan menghapus (delete) pesan tersebut atau bahkan mem ban pemasang iklan tersebut. Berikut Tips untuk mengelola shoutbox dari shoutmix tanpa harus login ke situs shoutmix :

1. Klik tanda omega ( Ω ) pada shoutbox anda yang ada di sebelah pojok kanan atas.

   

2. Masukan password shoutbox anda.

   

3. Klik pada tulisan Delete jika anda ingin menghapus pesan tersebut, atau klik Ban jika anda bermaksud memblokade pesan dari pengirim pesan tersebut.

   

4. Jika anda bermaksud melakukan ban, anda bisa memilih opsi dari ban yang di tawarkan yaitu hanya banned URL atau bahhkan IP dari pengirim pesan tersebut.
5. Klik tanda cakra ( X ) untuk keluar dari modus login.

    

6. Selesai.

 

Semoga para spammer tidak lagi membayangi-bayangi shoutbox anda.