gAjax RSS Pausing Scroller

Judul aneh diatas saya temukan di situs www.dynamicdrive.com, yang maksudnya untuk menampilkan cssfeed dari beberapa media yang online. Di situs ini anda akan disuguhi tiga demo sekaligus, yang mana masing-masing demo berisikan rssfeed dari Yahoo News, BBC dan MSNBC. Sedangkan untuk di Indonesia mungkin anda bisa mendapatkan di Republika Online ( info ini saya dapat setelah ngintip kode sumber halaman dari blognya kang Jalooe.... untuk kang Jalooe, sorry ya.... semua saya lakukan demi komunitas Blogger ).

Namun sebelum kita memasang gAjax RSS Pausing Scroller (hosted) ini, kita harus mempunyai "Google AJAX Feed API key", mengingat kode ini harus terpasang nantinya dibagian head. Disini saya akan menjelaskan sesuai pengalaman yang sudah saya lakukan.

Silahkan anda Sign Up untuk mendapatkan "Google AJAX Feed API Key".
Perhatikan gambar dibawah ini, dan kerjakan sesuai gambar :


Setelah menekan "Generate API Key", kita akan dihadapkan pada halaman yang mencatumkan kode "Google AJAX Feed API key" dari URL blog yang kita daftarkan, berikut dengan contoh pemasangan kode tersebut. Coba perhatikan gambar dibawah ini :


Silahkan Copy paste kode yang saya kotak merah pada notepad.

Dalam situs www.dynamicdrive.com kita diminta untuk mendowload "gajaxscroller.js" dan "gfeedfetcher.js" kemudian silahkan upload di situs dimana kita menyimpan file secara online.
Namun bila anda malas mengerjakannya, disini sudah saya siapkan url dari kedua file JS tersebut.

Setelah kita masuk Blogger, backup dulu template anda dan jangan mencentang "Expand Template Widget"

Masukkan kode berikut di atas kode </head>( Disini ada tiga pilihan demo,Pilih salah satu sesuai selera. Sengaja saya cantumkan semua agar bisa dipilih ) :

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA_ijQ9pLfP7s30p5_16DuihRbZ2PHfPU3bWI4_oTtwnMJ8ZGOSRRs8Jw68to7EQKiFvZwQ2zTa6CCRw"></script>

<script type="text/javascript" src="http://www.geocities.com/nataludin5/gfeedfetcher.js"></script>

<script type="text/javascript" src="http://www.geocities.com/nataludin5/gajaxscroller.js">

/***********************************************
* gAjax RSS Pausing Scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example1{ /*Demo 1 main container*/ width: 450px; height: 30px; border: 1px solid black; padding: 4px; background-color: lightyellow; }

#example2{ /*Demo 2 main container*/ width: 600px; height: 180px; border: 1px dashed black; padding: 4px; background-color: #EEEEEE; } #example2 div ul{ /*Demo 2 UL container*/ margin: 0; padding-left: 18px; } #example2 div ul li{ /*Demo 2 LI that surrounds each entry*/ margin-bottom: 4px; }

#example3{ /*Demo 3 main container*/ width: 250px; height: 280px; border: 1px solid navy; padding: 4px; } #example3 div p{ /*Demo 3 P element that separates each entry*/ margin-top: 0; margin-bottom: 7px; }
code{ /*CSS for insructions*/
color: red;
}

</style>


Selanjutnya tinggal menempatkan kode HTML dalam bagian body, berdasarkan pengalaman saya memilih demo3 yang saya letakkan di sidebar melalui tambah elemen "HTML/Javacript"

Ini adalah kode Example/ demo - 1 :

<script type="text/javascript"> var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new") cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed cssfeed.displayoptions("date") //show the specified additional fields cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date cssfeed.entries_per_page(1) cssfeed.init() </script>


Example 2:

<script type="text/javascript"> var socialfeed=new gfeedpausescroller("example2", "example2class", 3000, "") socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed socialfeed.displayoptions("label datetime") //show the specified additional fields socialfeed.setentrycontainer("li") //Display each entry as a DIV socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label socialfeed.entries_per_page(5) socialfeed.init() //Always call this last </script>


Example 3:

<script type="text/javascript"> var newsfeed=new gfeedpausescroller("example3", "example3class", 2500, "_new") newsfeed.addFeed("BBC", "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml") //Specify "label" plus URL to RSS feed newsfeed.addFeed("MSNBC", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml") //Specify "label" plus URL to RSS feed newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed newsfeed.displayoptions("datetime snippet") //show the specified additional fields newsfeed.setentrycontainer("p") //Display each entry as a paragraph newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date newsfeed.entries_per_page(2) newsfeed.init() //Always call this last </script>

Perhatikan dari masing-masing kode HTML yang tercetak tebal adalah letak penempatan dari Feed yang kita pasang.

Dan dibawah ini adalah contoh pemasangan feed untuk Republika On line, yang ditempatkan langsung pada saat Edit HTML pada bagian <body> .

<p><script type='text/javascript'>

var cssfeed=new gfeedrssticker("example10", "example10class", 2000, "_new")
cssfeed.addFeed("CSS Drive", "http://feedproxy.google.com/republika") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()

</script></p>

Silahkan and bereksperimen dengan masing-masing demo, dan atur ukuran width dan heightnya disesuaikan kondisi ruang body template anda. Ingat !!! salah satu demo yang dipasang pada template kita.

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA_ijQ9pLfP7s30p5_16DuihRbZ2PHfPU3bWI4_oTtwnMJ8ZGOSRRs8Jw68to7EQKiFvZwQ2zTa6CCRw"></script>

teks berwarna merah diatas adalah tempat kode "Google AJAX Feed API key", ganti kodenya dengan milik anda.

Untuk melihat demonya, kunjungi situs di atas atau anda dapat melihat hasilnya di situs Kang Jaloe untuk demo 1 dan disini pada sidebar untuk demo 3.

Semoga bermanfaat

Kanibal Template Blogger

Pada minggu kemarin saya mencoba memodifikasi template Minima yang ada dengan menggunakan sistem campur aduk tutorial yang saya dapatkan dari beberapa sumber, termasuk di dalamnya menggunakan sistem CSS ( Contak Sana Sini ) dari beberapa Website berbasis wordpress.

Dari kode sumber halaman website tersebut, saya copas ke notepad. Lalu saya pelajari kode CSS & javascript yang ada bersama eyang google. Meski sudah menghabiskan weekend dan 3 pack "123" akhirnya hasilnya sangat memuaskan bagi saya, namun saya tidak tahu apa sangat jelek bagi rekan-rekan blogger.

Saya menyebutnya sebagai "KANIBAL TEMPLATE MAGAZINE BLOGGER", sebab mulai dasar template hingga Javascript yang terpasang merupakan hasil copas dari beberapa sumber. Dengan menggunakan kemampuan CSS ( Contek Sana Sini ),ASP (Asal Sedot Pakai praktek ) dan PHP (Pakai Hancur Pugar lagi ) akhirnya jadi juga template kanibal ini.

Dan template ini merupakan draft blog yang saya gunakan untuk satuan dimana saya "Nebeng" makan dan ngasih belanja mbok dhewor.

Yang perlu saya garis bawahi adalah, bagaimana cara menambahkan kolom-kolom dibawah Main-wrapper ( tempat posting ) yang ukurannya sama besar. Berikut bentuk kolom-kolom yang saya tambahkan :


Kalau anda berkenan untuk sharing mari kita bahas cara membuatnya :

Langkah awal tentunya backup dulu template anda, tapi saya sarankan untuk praktek ini buatlah blog baru saja.... seperti apa yang saya kerjakan dalam memodifikasi template.

1. Masuk ke blogger lalu tambahkan CSS ini sebelum kode ]]></b:skin>

/* ----- fblock ----- */
.fblock1 h2{
margin: 0px 0 0px 0;
padding: 0px 0px 3px 5px;
text-align: left;
font-size: 11px;
overflow:hidden;
height:30px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock1 h2 a:link, .fblock1 h2 a:visited{
color:#fff;
}
.fblock1 {
width: 305px;
float:left;
margin: 0px 0px 0px 5px;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock1:hover {
width: 305px;
float:left;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
}
.fblock1 p{
margin:5px 5px;
color:#fb7305;
}
.fblock1 img {
float:left;
border:1px solid #393F42;
margin:5px 5px 5px 5px;
padding:0 0;
}
#fblock1 .widget {
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
background: #ffffff;
border: 1px solid #e6e6e6;
}

.fblock2 h2{
margin: 0px 0 0px 0;
padding: 0px 0px 3px 5px;
text-align: left;
font-size: 11px;
overflow:hidden;
height:30px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock2 h2 a:link, .fblock2 h2 a:visited{
color:#fff;
}
.fblock2 {
width: 302px;
float:right;
margin: 0px 4px 5px 0px;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock2:hover {
width: 302;
float:right;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
}
.fblock2 p{
margin:5px 5px;
color:#fb7305;
}
.fblock2 img {
float:left;
border:1px solid #393F42;
margin:5px 5px 5px 5px;
padding:0 0;
}
.fcats{
overflow:hidden;
font-size:11px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:1px 0 0px 0;
height:15px;
}
.fcats a:link,.fcats a:visited {
overflow:hidden;
font-size:9px;
color:#841c0a;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
height:13px;
}
.auth{
overflow:hidden;
font-size:9px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}
.fmeta{
overflow:hidden;
font-size:9px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}
.fmeta a:link,.fmeta a:visited{
overflow:hidden;
font-size:9px;
color:#841c0a;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}


2. Selanjutnya kita pasang kode dibawah ini pada bagian bawah Main-wrapper dibawah: </b:section>

<div class='fblock1'>
<b:section class='content1' id='content1' showaddelement='yes'/>
</div>

<div class='fblock2'>
<b:section class='content2' id='content2' showaddelement='yes'/>
</div>

Kemudian simpan template anda.

3. Langkah selanjutnya adalah masuk pada " Tambahkan elemen halaman " pada bagian HTML/ Javascript, lalu tambahkan kode berikut :

<img src='YOUR-IMAGE-LINK' width='100' height='60' alt=''/>

<div class='fcats'><a href='YOUR-CATEGORY-LINK' title='YOUR-CATEGORY-TITLE' rel='category'>YOUR-CATEGORY-TITLE-HERE</a></div>

<h2><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE-HERE'>YOUR-POST-TITLE</a></h2>

<div class='auth'> Posted by Author </div>
<div class='fmeta'> POST-DATE |
<a href='YOUR-POST-LINK' title='Comment on YOUR-POST-TITLE'>ADD COMMENTS</a>
</div>

4. Langkah ke empat silahkan anda berpusing ria dalam mengatur width dan height di masing-masing tambahan kode di atas.

Pada modifikasi kali ini beberapa bagian saya hilangkan dengan menambahkan kode :

visibility: hidden;
display: none;

Juga saya menambahkan kode tabpage agar tampilan menjadi "ciamik".

Untuk melihat demo dari hasil template kanibal ini, silahkan klik DEMO

Komentar anda bersifat membangun... sangat 10000 x saya hargai

Active Directory Tools

I was a computer operator in the military, precisely in the operations staff marine Brigif 1. Of course, I demanded to learn about, or at least understand the Active Directory associated with the Microsoft Windows Server.

The requirement to learn a lot about it to the success of the task given by the leaders to me. Particularly related to issues that include the administration of making plans, reports and other activities.

I should be prosecuted because of a professional, so I try to learn IT development at this time through the Internet.

I realize the importance for the Active Directory (AD) which is a central point for an organization's software infrastructure. So, I can easily learn about various AD objects, help me to plan for maintenance processes and procedures.

I get information about Ensim.com, where its products are used by service providers and enterprises worldwide to accelerate and Deployment solution that enables integrated, automated and simplify the management of complex security environment, and improve user productivity and IT

Here, I can get information about Active Directory Tools and Exchange Tools. In this website, I can find a variety of IT solutions. I take the example of their products Enterprise solution, you can get a complete solution to the integrity of Microsoft Active Directory, Exchange and Blackberry Mobile.

So, this appears to create a more efficient workflow. This can be achieved with the Active Directory and Exchange Management

So, do not have one when I provide this information so that you and I can work more effective and efficient service by using the Ensim.

Magazine Blogger Template

Berangkat dari blog kang Jaloe yang sering berubah-rubah, akhirnya ketularan juga saya jadinya. Emang suhu satu ini merupakan sumber inspirasi dan sumber referensi dalam mempelajari CSS (baca:Contek Sana Sini)

Sebenarnya sudah lama saya ingin mempunyai blog berbentuk majalah, makanya saya berusaha mencoba mengintip kode dari beberapa website berbentuk majalah.

Kebetulan saya sering mampir di blognya Kang Jaloe, jadi dari blognya saya mendapatkan sumber refferensi yang dapat saya pelajari.

Kali ini saya mencoba memodifikasi template minima dan sebenarnya bentuknya tidak jauh berbeda dari milik kang Jaloe, karena pada bagian Headernya terus terang saya nyontek bin ngerpek. Tentu anda tahu kan, kalau kita melihat template bagus.. trus dari tool "tampilan" kita bisa melihat "Kode Sumber Halaman", ya dari situ saya mencoba belajar.
Namun hasilnya tidak maksimal dan tidak sebagus milik suhu..he..he.., tapi lumayanlah buat tambahan perbendaharaan template bagi komunitas blogger.

Berikut Replika template tersebut :




Kalau ada yang berkenan silahkan download di sini

Untuk melihat demonya di blogku yang satu ini.

Untuk pertanyaan silahkan masukkan komentar anda, saya akan berusaha untuk menjawab dan kalau ndak bisa saya akan tanyakan ke suhu Jaloe...he..he..he..he...

Satu lagi, untuk real time aku nyontek milik sobat Guruh Subagya, jadi kalau kurang jelas tanya saja langsung ke beliau..... (he..he.. si bC lari dari tanggung jawab nih )

Jadi bila anda berkenan menggunakan template ini, ada tiga orang yang bisa dijadikan tempat ngomel....he..he..he..

Streaming Radio di Blog kita

Apabila anda masuk kemudian menatap, mungkin sedikit mengagumi tampilan blog saya ( ceileeeeeee... GR banget ) lalu tanpa sadar bibir anda yang indah ( khusus cewek nich ) berdecak.... dan telinga anda mendengar alunan musik yang diiringi celotek cewek atau cowok..... nah itu pasti dari streaming radio online yang aku pasang di bagian Lowbar kiri pada blog "ITEM JELEK" ini.

Sengaja saya merombak total penampilan dari si "ITEM" ini, mulai dari bentuk template yang supaya bisa dibilang mirip majalah sesuai dengan nama design template itu sendiri.

Lalu saya tambahkan widget dari Wowzio yang terkesan mewah da ini gratis tentunya, hingga streaming radio online. Semoga saja tidak begitu berat dibuka, karena menurut saya tidak.... mungkin konektifitas internet di tempatku ngacir kali.

Mau tahu cara memasang Streaming Radio On line? Saya rasa banyak dari kalangan blogger sudah tahu. Nah bagi yang belum tahu, silahkan copy kode dibawah ini :

<center><object width="275" height="310"><param value="http://kodelagu.net/radio.swf" name="movie"/><param value="transparent" name="wmode"/><embed width="275" src="http://kodelagu.net/radio.swf" wmode="transparent" height="310" type="application/x-shockwave-flash"></embed></object></center>

Kemudian pasang di page elements blog anda. Silahkan rubah ukuran Width dan height-nya sesuai ukuran page elements blog anda. Jangan lupa menginstall Shockwave-flash atau adobe flash platyer agar aplikasi ini berjalan.

Selamat mencoba dan semoga berhasil

Trade Show Displays

In selling a product or service, of course they thought about how to improve the order on the type of merchandise sold or services offered. Many of the ways in which they promote their products including the interest of consumers.

Appropriate steps that need to be done is through exhibitions and presentations in the trade show display.

Your trade show display can be seen as a store, so the potential to provide a unique opportunity to attract the attention of buyers, while at the same time to be able to display the products and or services.

Try your taking the time to visit the www.camelbackdisplays.com. On this site, trade shows provide the resources, the success of the strategy and important information to help you get the full benefit of all aspects of participation and help maximize trade show results.

Camelback Displays is one of the factory price shop for trade show displays, exhibits and tradeshow booths that give satisfaction over 16,000 customers since 1999. Quality products and services do not doubt, they are very professional in the field. Every trade show display that has been strictly tested for durability, so you can ensure that you purchase a product that will last for many years to come.



Here I give an example in setting up the Truss units.



Truss built from pieces of a durable, high-strength steel and can support a monitor, rack, graphics, lighting or other accessories. Truss units provide flexible options to enhance a display’s impact. They are designed to be added as an accent to your current booth, incorporated into a custom design, or to provide the basic structure for your new truss display booth

If you need a simple design, Banner Stand is a lightweight and affordable solutions for every exhibitor.



Banner stand is a way to compliment your trade show display, and give extra attention to the cells. This site offers a generic solution banner stand, with the low prices without sacrificing quality. Each banner stand is to produce printed on the album, which guaranteed quality.

To learn more about the trade show booth, please visit the site immediately.

Blogger Magazine Template

Sebelumnya saya mengucapkan "Selamat Tahun Baru Hijriah 1430 H, semoga kita semua mampu mengisinya dengan kegiatan yang positif".
Selama Liburan, saya mencoba memodifikasi template bidikCOM secara Offline. Maklum di rumah tidak ada internet.

Jadi disamping harus teliti dalam memperhitungkan lebar, margin dan padding saya pun hanya bisa membayangkan loading themesnya kira-kira begini atau begitu bahkan hancur....he..he..

Namun pada pagi ini, setelah saya coba upload hasil dari Offline Blogger Magazine template..... Alhamdulillah, tampilan bidikCOM sekarang ternyata sesuai dengan "Loading Hayalan saya".

Dan posting kali ini, saya mengajak rekan-rekan blogger yang sempat membaca posting ini untuk sharing dengan tujuan mempercantik tampilan Blogger Magazine ini.


Untuk itu saya sertakan link downloadnya, agar rekan-rekan Blogger sudi kiranya melanjutkan usaha saya dalam mencoba design blog yang mirip-mirip majalah, meski tidak sebagus template Wordpress. Harap dimaklumi, si bidikCOM tamatan "TK besar" jadi ndak mudeng dengan PHP, CSS dan segala sesuatu yang terkait dalam mendesign sebuah Situs/ Blog.

Setelah anda mengunduh (download), silahkan simpan dalam bentuk .XML
Download disini.
Demo: anda sudah membukanya.