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 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 :

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/AVvXsEi9AFqM2zJloGz0L11zpArvJZOXFuJN2w62Lf3xkYrh1AeCZC05H6fqZJy6CQoi27HWBkAfo1i5hY8-mkJ8BeNIiwi29_PU-C8DHoi0scb7iUmV6zI-OTrLcMcSRdMtvdUDBGaSgfp9pZI/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6RJ60D6X1XJKf6OcEuKO6Su7lwnCGpRIp50C-PbvvkyDBduzyF4urC2bhFNllSkEjhsaqCAg6lOjQoyMbKknLvqcZ0rN0EK3xHcItiIEME69hLb05OsWkf4JCMHF-fhCijF_Xjc1CDM/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKaYdryg3D0pQP7iMO1ip1J5ktYu8wPs9LegGpgfeBaeJCsepblbhSCvKFGnFJqfAbVlFeJOm0BojX3_EhJNF3dt-xhD4aDMQ9ZrbUfUwBeeKhJ9z-ea67JrQA10Sk5CGjUHG_484Hjmk/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpV0HwRKoM5w_P3FmXCYTeARRjE3Mpv3085Kwae_7H7qpmyVHyROBqmYJhZvyIvyNPIQjVyjiTsYa9mGgewVGy24RrXRMytHsIH9PY-yA5UW5N1BXe2tliwwCNKqsZC6LJA_OEaYaVZZM/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXVTAmByBX0BU2_MEipunex1zeXWNVMsQZn1SL1agE_xQX_7Vr-e49nC2_QnvRblLRDnZuOpJf_q6nY2-PdwcjiOpwwgmPrrIj-orMc5p4zLHcOpAYwL6nQ1slrYhv5qk6q267TebcGY0/?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/AVvXsEjpV0HwRKoM5w_P3FmXCYTeARRjE3Mpv3085Kwae_7H7qpmyVHyROBqmYJhZvyIvyNPIQjVyjiTsYa9mGgewVGy24RrXRMytHsIH9PY-yA5UW5N1BXe2tliwwCNKqsZC6LJA_OEaYaVZZM/?imgmax=800" class="full"/>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpV0HwRKoM5w_P3FmXCYTeARRjE3Mpv3085Kwae_7H7qpmyVHyROBqmYJhZvyIvyNPIQjVyjiTsYa9mGgewVGy24RrXRMytHsIH9PY-yA5UW5N1BXe2tliwwCNKqsZC6LJA_OEaYaVZZM/?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/AVvXsEhKaYdryg3D0pQP7iMO1ip1J5ktYu8wPs9LegGpgfeBaeJCsepblbhSCvKFGnFJqfAbVlFeJOm0BojX3_EhJNF3dt-xhD4aDMQ9ZrbUfUwBeeKhJ9z-ea67JrQA10Sk5CGjUHG_484Hjmk/?imgmax=800" class="full"/>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKaYdryg3D0pQP7iMO1ip1J5ktYu8wPs9LegGpgfeBaeJCsepblbhSCvKFGnFJqfAbVlFeJOm0BojX3_EhJNF3dt-xhD4aDMQ9ZrbUfUwBeeKhJ9z-ea67JrQA10Sk5CGjUHG_484Hjmk/?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/AVvXsEi9AFqM2zJloGz0L11zpArvJZOXFuJN2w62Lf3xkYrh1AeCZC05H6fqZJy6CQoi27HWBkAfo1i5hY8-mkJ8BeNIiwi29_PU-C8DHoi0scb7iUmV6zI-OTrLcMcSRdMtvdUDBGaSgfp9pZI/?imgmax=800" class="full"/>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9AFqM2zJloGz0L11zpArvJZOXFuJN2w62Lf3xkYrh1AeCZC05H6fqZJy6CQoi27HWBkAfo1i5hY8-mkJ8BeNIiwi29_PU-C8DHoi0scb7iUmV6zI-OTrLcMcSRdMtvdUDBGaSgfp9pZI/?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/AVvXsEhXVTAmByBX0BU2_MEipunex1zeXWNVMsQZn1SL1agE_xQX_7Vr-e49nC2_QnvRblLRDnZuOpJf_q6nY2-PdwcjiOpwwgmPrrIj-orMc5p4zLHcOpAYwL6nQ1slrYhv5qk6q267TebcGY0/?imgmax=800" class="full"/>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXVTAmByBX0BU2_MEipunex1zeXWNVMsQZn1SL1agE_xQX_7Vr-e49nC2_QnvRblLRDnZuOpJf_q6nY2-PdwcjiOpwwgmPrrIj-orMc5p4zLHcOpAYwL6nQ1slrYhv5qk6q267TebcGY0/?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/AVvXsEjX6RJ60D6X1XJKf6OcEuKO6Su7lwnCGpRIp50C-PbvvkyDBduzyF4urC2bhFNllSkEjhsaqCAg6lOjQoyMbKknLvqcZ0rN0EK3xHcItiIEME69hLb05OsWkf4JCMHF-fhCijF_Xjc1CDM/?imgmax=800" class="full"/>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6RJ60D6X1XJKf6OcEuKO6Su7lwnCGpRIp50C-PbvvkyDBduzyF4urC2bhFNllSkEjhsaqCAg6lOjQoyMbKknLvqcZ0rN0EK3xHcItiIEME69hLb05OsWkf4JCMHF-fhCijF_Xjc1CDM/?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 :

login ke blogger dengan Id anda.
Klik Tata Letak
Klik tab Edit HTML
Klik Download Template Lengkap, silahkan di save dahulu untuk backup (penting).

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/AVvXsEgh3u786lxPPM6VgNCCii_NThJ13gsp0AFpu8OZ-iT5LC2YZo3FFk5gnO0fi74JguDL2JYJ3jfdGnQ4kDh3xkTHO6saVN1jcT7Mw6-vJlP7FBuWRf0pEYfSzYFPeM40r0i3WrEt3XlFQ2w/?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/AVvXsEgh3u786lxPPM6VgNCCii_NThJ13gsp0AFpu8OZ-iT5LC2YZo3FFk5gnO0fi74JguDL2JYJ3jfdGnQ4kDh3xkTHO6saVN1jcT7Mw6-vJlP7FBuWRf0pEYfSzYFPeM40r0i3WrEt3XlFQ2w/?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/AVvXsEhc-DagcK_V7bjc32TGo_woWQAoNlKzvfiViYRjtP9h9SMNdXm-XwFHhSKk1d_RP2uLtRBjPpoI9QKWyPRpdk1qND5HHC0JZ1iPBuiUOAX8tx2gmkdjvkAJgPSM_VkydU-R35-TLgG9-e0/?imgmax=800') no-repeat center left;} 

* html .jdGallery a.left { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-DagcK_V7bjc32TGo_woWQAoNlKzvfiViYRjtP9h9SMNdXm-XwFHhSKk1d_RP2uLtRBjPpoI9QKWyPRpdk1qND5HHC0JZ1iPBuiUOAX8tx2gmkdjvkAJgPSM_VkydU-R35-TLgG9-e0/?imgmax=800') no-repeat center left; } 

.jdGallery a.right 
    
{right: 0;top: 0;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd-y96XFxakvTR3_EkiCEUNkbKKjfcYqY1gy3-G_OL3Hkcu7kaMQNkCpwzaa55t5gyo4iXqZ1VAEerDq6osw1v2fTbUyqnMANd2Qm84OPrkWfui1iIA_zddr8ZwwEazhdkHTBejNlnsUQ/?imgmax=800') no-repeat center right;} 

* html .jdGallery a.right { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd-y96XFxakvTR3_EkiCEUNkbKKjfcYqY1gy3-G_OL3Hkcu7kaMQNkCpwzaa55t5gyo4iXqZ1VAEerDq6osw1v2fTbUyqnMANd2Qm84OPrkWfui1iIA_zddr8ZwwEazhdkHTBejNlnsUQ/?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/AVvXsEhDbKDLgVpvNwyF0SHvM1lpgfy1bnU3-CSx8bB-W9-XlrzJXsKuBjX913fF5lnx1jmHqclorM7GLi6W_bDRuaRYJT7l5wK9bsm0Hf4tPKwAqPL1Q5hnRvfqsWoizHVXExGpDegb4gigowI/?imgmax=800') no-repeat center center; } 

* html .withArrows a.open:hover { background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbKDLgVpvNwyF0SHvM1lpgfy1bnU3-CSx8bB-W9-XlrzJXsKuBjX913fF5lnx1jmHqclorM7GLi6W_bDRuaRYJT7l5wK9bsm0Hf4tPKwAqPL1Q5hnRvfqsWoizHVXExGpDegb4gigowI/?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;}

Copy file #2 (lihat script tadi di atas), lalu paste persis di atas kode </head>
Klik tombol SIMPAN TEMPLATE. Silahkan santai dulu sejenak.
Klik tab Elemen Halaman.
Klik Tambah Gadget.
Klik tanda plus (+) untuk HTML/JavaScript.
Copy file #1 (lihat script di atas), kemudian paste pada kolom yang muncul.
Klik tombol SIMPAN.
Geserkan elemen yang baru di buat tadi di atas elemen posting.
Klik tombol SIMPAN yang ada di bagian atas.
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!

Di tulis oleh : Kang Rohman pada 25 November 2008

Description: Pasang Featured Content Di Blogger, Rating: 5

Reviewer: Kang Rohman, ItemReviewed: Pasang Featured Content Di Blogger

Pasang Featured Content Di Blogger

0 komentar pada Pasang Featured Content Di Blogger :

Posting Komentar

Panduan Wordpress Terbaru

Komentar Terbaru