Selasa, 25 November 2008

Pasang Featured Content Di Blogger

wordpresstheme 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 Big Grin. 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 :

 

icons

 

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

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpESdCgIlEoJYOT1DFD82Dckb22tsAA6ogMEY-iR18uvj-HeSlNab8fWZbcZaCj6xt5HcZ_iIkeA7IGRBItTfmziL_vXQXfTTHN0edODwdmFjwz3GaiSQRFB3ENkv1gcBqrnOVwmE3SUE/?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8l07N00GLxGVtljP2ifZUK6-E6zIrrpOgt2GO0iNfRIEgY6jS2_pyx85nBVC_qFaOxBrw0dWEmGZU7Kfz2ieF-Qa-cRv4al_TxUZWlAXY0l_IJacNWxHDSqnGC4z4Ie8zRLmcshg0eDQ/?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinKrYpucA1Vkyftu8Aa8lXqv9xDhUqf-TROeQiz-OuviiDqCQ-BiIEA3qZMTREJkuNXd1o056gEqfJq6JBpbnAMUkn_jW3JfM49nc1Zo1JKTJju2M5HlJkqpCUdlZIUK2xOmbAtjEGvWM/?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2zeLLIPrCbgJHxDd19FJK8P2Rw2exUbzSfTrr6_BUBUGBJzYlnXOdhCJJRXqqHxHeg2aUHqnxSNCD70AVUhrOUExwCf8QPq7lME9SrwUR3pM7zTqPQ7ncVSDNKzjaPKY3Jiz98Yhyphenhyphenkd0/?imgmax=800

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8PeuKvrhSgTqMLN_1Ln7VSkqst6T2VN4bOgLZwQbpGpy8JQ-ZYEkyTlwIXPVj5QrMcS4VYylPHPs30W8sAhTPS0HXbL51xZ4B00UEsFZX6-mmZfiVrqckhed-aIoa1qfl49uGJQLAl6I/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2zeLLIPrCbgJHxDd19FJK8P2Rw2exUbzSfTrr6_BUBUGBJzYlnXOdhCJJRXqqHxHeg2aUHqnxSNCD70AVUhrOUExwCf8QPq7lME9SrwUR3pM7zTqPQ7ncVSDNKzjaPKY3Jiz98Yhyphenhyphenkd0/?imgmax=800" class="full"/>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2zeLLIPrCbgJHxDd19FJK8P2Rw2exUbzSfTrr6_BUBUGBJzYlnXOdhCJJRXqqHxHeg2aUHqnxSNCD70AVUhrOUExwCf8QPq7lME9SrwUR3pM7zTqPQ7ncVSDNKzjaPKY3Jiz98Yhyphenhyphenkd0/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinKrYpucA1Vkyftu8Aa8lXqv9xDhUqf-TROeQiz-OuviiDqCQ-BiIEA3qZMTREJkuNXd1o056gEqfJq6JBpbnAMUkn_jW3JfM49nc1Zo1JKTJju2M5HlJkqpCUdlZIUK2xOmbAtjEGvWM/?imgmax=800" class="full"/>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinKrYpucA1Vkyftu8Aa8lXqv9xDhUqf-TROeQiz-OuviiDqCQ-BiIEA3qZMTREJkuNXd1o056gEqfJq6JBpbnAMUkn_jW3JfM49nc1Zo1JKTJju2M5HlJkqpCUdlZIUK2xOmbAtjEGvWM/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpESdCgIlEoJYOT1DFD82Dckb22tsAA6ogMEY-iR18uvj-HeSlNab8fWZbcZaCj6xt5HcZ_iIkeA7IGRBItTfmziL_vXQXfTTHN0edODwdmFjwz3GaiSQRFB3ENkv1gcBqrnOVwmE3SUE/?imgmax=800" class="full"/>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpESdCgIlEoJYOT1DFD82Dckb22tsAA6ogMEY-iR18uvj-HeSlNab8fWZbcZaCj6xt5HcZ_iIkeA7IGRBItTfmziL_vXQXfTTHN0edODwdmFjwz3GaiSQRFB3ENkv1gcBqrnOVwmE3SUE/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8PeuKvrhSgTqMLN_1Ln7VSkqst6T2VN4bOgLZwQbpGpy8JQ-ZYEkyTlwIXPVj5QrMcS4VYylPHPs30W8sAhTPS0HXbL51xZ4B00UEsFZX6-mmZfiVrqckhed-aIoa1qfl49uGJQLAl6I/?imgmax=800" class="full"/>

            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8PeuKvrhSgTqMLN_1Ln7VSkqst6T2VN4bOgLZwQbpGpy8JQ-ZYEkyTlwIXPVj5QrMcS4VYylPHPs30W8sAhTPS0HXbL51xZ4B00UEsFZX6-mmZfiVrqckhed-aIoa1qfl49uGJQLAl6I/?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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8l07N00GLxGVtljP2ifZUK6-E6zIrrpOgt2GO0iNfRIEgY6jS2_pyx85nBVC_qFaOxBrw0dWEmGZU7Kfz2ieF-Qa-cRv4al_TxUZWlAXY0l_IJacNWxHDSqnGC4z4Ie8zRLmcshg0eDQ/?imgmax=800" class="full"/>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8l07N00GLxGVtljP2ifZUK6-E6zIrrpOgt2GO0iNfRIEgY6jS2_pyx85nBVC_qFaOxBrw0dWEmGZU7Kfz2ieF-Qa-cRv4al_TxUZWlAXY0l_IJacNWxHDSqnGC4z4Ie8zRLmcshg0eDQ/?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
download download

 

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbyONT44pdKV6fXxu_SFpAWc6JSLnkxGjvRNq_GGatAEIeR1Dx4NXz0TjCTnc_8Uz-dnNoPVz9DwNmpG6z72M28H1WrcNZRI67UccnnI173wORDVSSKePN81Kt2uZD778SVdCjqV12CY/?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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbyONT44pdKV6fXxu_SFpAWc6JSLnkxGjvRNq_GGatAEIeR1Dx4NXz0TjCTnc_8Uz-dnNoPVz9DwNmpG6z72M28H1WrcNZRI67UccnnI173wORDVSSKePN81Kt2uZD778SVdCjqV12CY/?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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhib-HGh8etnhfUk54_3PTnpIrPI5oFBbRjiLo1ti82bRlVRSQhVpoR6-Wu0wcPJx4zk3VBZGdTTIQKXOOkQsZ5vKDW99MUU7p2VnR61z-nLt4TLoxuoQx2gpbsyePsoq9MMFH6K7NdzMc/?imgmax=800') no-repeat center right;} 


    * html .jdGallery a.right { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhib-HGh8etnhfUk54_3PTnpIrPI5oFBbRjiLo1ti82bRlVRSQhVpoR6-Wu0wcPJx4zk3VBZGdTTIQKXOOkQsZ5vKDW99MUU7p2VnR61z-nLt4TLoxuoQx2gpbsyePsoq9MMFH6K7NdzMc/?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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW76uw60a3_2c9X5b5CN7zQ8TL5sv-_YMJ4-qj16SyzhElbRXh1mSpEx1fjf8kF0CTZLWY-vnXdm7NRUvY1ZhxnQNcSdPPmggqfgX3EVeKMezTqQfFy_Z9El_9ZZq_3lNLBQ1QUXru2KE/?imgmax=800') no-repeat center center; } 


    * html .withArrows a.open:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW76uw60a3_2c9X5b5CN7zQ8TL5sv-_YMJ4-qj16SyzhElbRXh1mSpEx1fjf8kF0CTZLWY-vnXdm7NRUvY1ZhxnQNcSdPPmggqfgX3EVeKMezTqQfFy_Z9El_9ZZq_3lNLBQ1QUXru2KE/?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.



    tambahgadget





  10. Klik tanda plus (+) untuk HTML/JavaScript.



    html





  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!


Diposting oleh di
Label: , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)