Sudah pernah baca tulisan agenda saya di blog RudyAzhar ? Kalau belum coba baca dulu deh, Nah di postingan tersebut ada amplop yang dibuat dengan CSS3 plus perangkonya. Jadi saya pingin berbagi cara pembuatannya disini. Dan yang saya bagikan hanya kode CSS & HTML saja, saya anggap kalian tahu penempatannya dimana Oke....
Trik Membuat Kotak Banner
Posting merupakan tanggapan kami terhadap pertanyaan Saudari Sri Wahyuni dengan menggunakan fasilitas “Kontak” tanggal 14 September 2011. Mungkin mba telah membaca posting sebelumnya yang berjudul “membuat kotak banner”. Tetapi tidak ada demo untuk melihat hasil pengkodean tersebut.
Tips SEO pada Blogger.com Bagian Kedua
Ok! Kita akan lanjut pada ulasan tentang SEO. Perlu menjadi catatan penting bahwa posting ini merupakan kelanjutan posting sebelumnya. So, jika Anda terlewat untuk membacanya, saya menyediakan link untuk meloncat ke posting Tips Search Engine Optimization (SEO) pada Blogger.com sebelumnya.
Tips Search Engine Optimization (SEO) pada Blogger.com
Terlebih dulu saya mengucapkan terima kasih kepada Saudara Indra (arek raos) yang telah memanfaatkan form kontak untuk menanyakan sesuatu kepada kami. Pertanyaan Anda telah sampai kepada kami & semoga posting ini menjadi penawarnya.
Membuat Style pada Link dengan CSS3
Sepertinya sudah lama saya tidak membuat postingan disini, kali ini saya memberikan trick menggunakan CSS3 untuk link saat di sorot (hover efek). Sebenarnya sudah ada beberapa yang sempat saya bagikan di blog saya dengan judul Macam Efek Link Dengan CSS3, dan kali ini saya coba memberikan sesuatu yang baru.
[ Baca selengkapnya ]
Styling menggunakan CSS pseudo-element
Pada posting terdahulu, kita juga pernah membicarakan tentang CSS pseudo-element ini, namun hanya terbatas pada “styling ordered dan unordered list”. Selain itu, mungkin kita pernah melihat bentuk teks di dalam elemen atau image berbentuk pita (ribbon), kemudian garis (border) yang memiliki efek tenggelam (press), bentuk melipat di sudut sebuah elemen & mirror text effect (efek cermin pada teks).
Styling Unordered & Ordered lists
Secara default style daftar urut menggunakan bullent (unordered list) digambarkan dengan satu titik noktah yang cukup besar—lebih besar dari titik (“.”)—terletak didepan teks yang dilingkupinya. Sedangkan ordered List ditampilkan dalam bentuk angka (decimal).
Study Kasus: Valid HTML5 di Template Klasik
Kelihatannya terdengar basi dan sudah dibahas berulang-ulang. Saya mengangkat tema ini bukan untuk berdebat tentang perlukah sebuah web/blog valid X-HTML (Extensible HyperText Markup Language) atau sejenisnya. Namun dititik-beratkan kepada suatu contoh kasus, bahwa Blogger™ ternyata dapat valid di HTML5, baik halaman depan maupun halaman posting.
Redesign: Optimasi Blog dari Masa ke Masa
Berubah lagi? Betul, mungkin karena perubahan itu diperlukan untuk suatu revolusi. Saya tidak berbicara tentang politik, tapi sedang mengungkapkan narasi mengenai sebuah blog.
Kostumisasi Penomoran pada Komentar Blogger™
Credits
Posting ini merupakan repost dari penulis Blognya Firdaus | eosBlog 2.0, sedangkan sumber asli berasal dari blog Randomness yang dipostkan oleh Fernandooo1. Namun sayang blog dari penulis asli tersebut tidak dapat lagi diakses, mungkin telah dihapus oleh pemiliknya. Fernandooo1 mengatakan bahwa script penomoran komentar tersebut didapat dari seorang kawannya, yakni JMiur yang memiliki blog Vagabundia berasal dari Buenos Aires, Argentina.
Menambah nomor urut komentar
Anda mungkin sudah tidak asing lagi dengan judul trik blogger di atas. Yah, berita lama (± tahun 2008) yang mungkin terlupakan, tapi tidak ketinggalan zaman. Perbedaan tampilan & tata letak pada trik ini hanya merupakan hasil kostumisasi dari kode/script aslinya.
Tambahkan CSS (Cascading Style Sheets) berikut di atas ]]></b:skin>.
.numberingcomments {
float:right;
text-align:right;
display:block;
width:50px;
margin:0 5px 0 0;
font-size:1em;
font-weight:normal;
}- Untuk merubah letak nomor ke kanan (
right) atau ke kiri (left) dapat Anda lihat pada atribut kode yang berwarna biru. - Kode yang diberi background kuning, mungkin bisa Anda hilangkan atau jika Anda memerlukan properti tersebut, silakan dibiarkan apa adanya.
- Untuk mengatur letak nomor agar sesuai dengan keinginan Anda, silakan rubah nilai properti kode yang diberi warna merah [dimulai dari 0 (atas), 5px (kanan), 0 (bawah), 0 (kiri)].
- Warna hijau menunjukkan nilai properti untuk mengatur ukuran font.
Dan berikut merupakan kode HTML (HyperText markup Language) dari penomoran komentar.
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<span class='numberingcomments'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</span>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>Sisipkan kode yang berwarna merah di antara kode-kode di atas.
HTML di atas hanya akan memberikan nomor urut tidak termasuk permalink komentar. Oleh karena permalink komentar sudah terwakili oleh timestamp komentar.
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>Apabila Anda ingin menerapkan nomor urut komentar sebagai permalink komentar, maka cukup mengambil kode yang berwarna merah pada timestamp & letakkan pada script seperti yang tampak di bawah ini.
<span class='numberingcomments'>
<a expr:href='data:comment.url' title='comment permalink'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>Kostumisasi nomor urut komentar
Jika Anda telah melakukan kostumisasi avatar komentar dengan meletakkannya di sebelah kanan, mungkin lebih baik meletakkan nomor komentar di sebelah kiri. Anda perlu sedikit merubah & menambah CSS penomoran komentar, seperti:
.numberingcomments {
float:left;
text-align:right;
display:block;
margin-left:-50px;
font-size:1em;
font-weight:normal;
}
.numberingcomments:after {content:"."}Silakan Anda melakukan trial & error, baik menambah dan/atau mengurangi kode CSS penomoran komentar, sampai Anda menemukan posisi yang tepat untuk meletakkan nomor urut tersebut.
Optimasi Kotak Komentar Blogger™
Anda tentu sudah baca posting tentang “Kostumisasi Avatar Komentar”, “Tahukah Anda?”, & “Trik Blogger | Mengatur Tataletak Link to This Post”, kalau belum buruan menuju TKP (Tempat Kerjaan Para blogger). Oleh karena posting berikut, mungkin berhubungan dengan tautan judul posting di atas.
Kostumisasi Avatar Komentar
Kenapa “gambar avatar komentar” di Blogger™ Anda kelihatan lebih besar? Kenapa juga letaknya berbeda dengan default Blogger™?
Dalam Blogger™ terdapat kode-kode embeded—kode perintah spesifik oleh pihak developer untuk menunjang kinerja mesin blogger—yang berfungsi mengatur secara default tampilan blog. Nah, termasuk didalamnya adalah pengaturan tampilan komentar (red=“bukan formulir komentar”). Silakan Anda koreksi, jika frase kata yang berwarna merah (dalam tanda kutip) keliru.
Mengganti Nextprev dengan Judul Posting
Seperti bunyi paragrap terakhir dalam posting “Tahukah Anda?”, elemen nextprev (blog-pager) dalam Blogger™ dapat diterjemahkan sebagai navigasi yang meliputi ke posting lebih baru, home, & posting lama. Defaultnya, elemen nextprev terletak di akhir seluruh posting pada halaman home & di bawah form komentar pada halaman posting.
Tahukah Anda?
Tahukah Anda, jika tampilan berikut bukan merupakan image (gambar)? Mungkin kita telah melihatnya pada web/blog yang pernah dikunjungi & mengira itu adalah image.
-—♦—ς∞ς—♦—-
O p timasi - Blog
-—♦—ς∞ς—♦—-
Tampilan seperti border merupakan kumpulan beberapa HTML entities, contoh: —ς∞ς—. Sedangkan di tengahnya merupakan terjemahan dari kode CSS dengan menggunakan beberapa atribut, antara lain: font-size, font-style, serta margin-left & vertical-align yang bernilai negatif.
Tahukah Anda, bahwa tampilan blog-pager (nextprev)—diterjemahkan dengan “Newer Post” & “Older Post” (“Posting lebih baru” & “Posting lama”)—dapat diganti dengan title (judul) posting? Jika ingin mencobanya, silakan menuju posting tentang “Mengganti Nextprev dengan Judul Posring”
Otomatis Update Posting di Facebook dan Twitter
Hampir semua narablog memiliki akun facebook dan/atau mungkin pula akun twitter. Tidak jarang kita menggunakan website social network tersebut sebagai salah satu aktivitas keseharian, baik hanya sekedar ngobrol maupun kegiatan yang lain. Dalam dunia blog, facebook & twitter mungkin lebih dikenal dengan istilah sebagai “ajang promosi”.
Bagaimana Anda melakukan update di facebook & twitter, jika posting telah diterbitkan di blog Anda? Mungkin Anda akan mengunjungi ke kedua website social network tersebut dan melakukan update secara manual. Salah satu alternatif agar posting yang diterbitkan akan ter-update secara otomatis di akun facebook & twitter Anda adalah dengan menggunakan layanan twitterfeed.
Twitterfeed merupakan web penyedia layanan update posting otomatis, baik di facebook maupun twitter. Update posting itu dilakukan dengan mengirimkan feed—suatu format data yang digunakan untuk menyediakan pembaharuan konten—ke website social network tersebut.
Caranya cukup mudah, Anda tinggal mendaftar di Twitterfeed dan memasukkan feed blog Anda dengan benar. Kemudian Anda perlu melakukan penambahan autority (wewenang) ke akun facebook & twitter, agar feed yang dikirim melalui twitterfeed dapat diterima dengan baik oleh kedua website social network tersebut. Anda pun dapat melakukan kostumisasi feed (update posting), seperti: menampilkan judul posting saja dan/atau disertai dengan ringkasan pendek isi posting.
Berikut ini merupakan “penampakkan” (screenshot) update posting yang dimaksud pada uraian di atas.
Widget Update via Twitter
Twitter merupakan jejaring sosial yang menawarkan fitur microblog (posting pendek, kurang dari 200 karakter) yang memungkinkan penggunanya untuk mengirim & membaca pesan (tweets). Pengguna dapat menulis pesan berdasarkan topik dengan menggunakan ‘hashtags’ (#). Sedangkan untuk menyebutkan atau membalas pesan dari pengguna lain bisa menggunakan tanda ‘at’ (@).
Sekarang, bagaimana cara memasang widget “update via twitter” dalam blog? Anda dapat melakukannya melalui dua cara, otomatis atau manual. Ketika Anda memilih “otomatis”, maka yang perlu Anda lakukan adalah mengunjungi situs Twitter Resources & dibutuhkan beberapa kostumasi, agar widget yang Anda inginkan tampil maksimal dalam blog.
Apabila Anda memilih “manual”, maka terdapat beberapa langkah yang harus dipenuhi.
- Download atau copypaste script blogger.js melalui situs resminya, yang tampak seperti di bawah ini:
Script di atas sudah dikompres melalui Yui Compressor. Anda pun bisa menambah & memodifikasi kode yang berwarna merah, contoh:function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push("<li><span>"+b+'</span> <a style="font-size:85%" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}};<span>menjadi<span style="color:#333333; font-size:1em;">dan sebagainya. - Simpan script tersebut dalam situs layanan penyimpanan file Anda, seperti: Google Code atau simpan dalam media penyimpanan Anda.
- Twitter menyediakan beberapa script yang bisa kita manfaatkan menjadi widget, antara lain:
User Timeline
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=5"></script>Public Timeline
<script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?callback=twitterCallback2&count=5"></script>User Favorite
<script type="text/javascript" src="http://twitter.com/favorites/username.json?callback=twitterCallback2&count=5"></script>User Search
Silakan ganti kode yang berwarna merah dengan username Anda.<script type="text/javascript" src="http://search.twitter.com/search.json?tag=jython&from=username&rpp=5&callback=twitterCallback2"></script> - Misalnya, Anda ingin memasang user timeline maka yang Anda lakukan adalah menambahkan kode berikut dalam “Add/tambah gadget” blogger:
atau<div id="twitter_div"> <ul id="twitter_update_list"> </ul> <p>@<a href="###" title="Follow me">username</a> on Twitter</p> </div> <script type='text/javascript'> //<![CDATA[ function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push('<li><span>'+b+'</span> <a style="font-size:85%" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}}; //]]> </script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=5"></script>
Ganti kode yang berwarna merah dengan alamat twitter & username Anda.<div id="twitter_div"> <ul id="twitter_update_list"> </ul> <p>@<a href="###" title="Follow me">username</a> on Twitter</p> </div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=5"></script>
- Sekarang bandingkan widget timeline Anda tersebut dengan akun profil timeline Anda di Twitter
Update (30 Oktober 2012) — Kode Widget Twitter Update di atas mungkin tidak dapat digunakan lagi, pihak pengembang Twitter telah menyediakan widget tersebut pada Create and manage your widgets dalam akun tiap pengguna Twitter. Sebagai tambahan, setelah membuat widget tersebut diharapkan tidak menghapusnya. Oleh karena sangat dimungkinkan script yang digunakan juga tidak dapat menampilkan pembaharuan timeline melalui Twitter.
<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>Demo tampilan widget “timeline via twitter” dapat Anda lihat pada posting widget update.
@Optimasi_Blog on Twitter
Google Web Fonts
Font yang digunakan dalam blog ini berukuran 120% (setara dengan 1.2em) dan mengadopsi google web fonts yang berbasis keluarga ‘serif’ (font:120% 'Crimson Text', georgia, serif;). Sedangkan pada title blog digunakan
Dropdown Menu (Navigasi Horizontal) dengan CSS3
“Salam persahabatan”,
mungkin seperti itulah salam pembuka atau salam penutup dari sang empu tutorial ini. Anda mungkin kenal, bahkan mungkin juga telah menjadi salah satu sahabatnya dalam GFC.
Gambar 1. Screenshot dropdown menu horizontal dengan CSS3.
Trik blogger ini mungkin agak berbeda dengan posting aslinya1 (sama caranya), karena menu horizontal di sini tidak menggunakan image & ditambahkan
Komentar atau No Comment
Komentar umumnya merupakan pernyataan lisan atau tertulis sering berkaitan dengan sebuah informasi, atau pengamatan atau pernyataan (Wikipedia). Sedangkan komentar dalam blog (menurut saya) merupakan kalimat tertulis untuk memberikan pendapat, masukan, dan/atau kritik terhadap suatu tema posting yang diterbitkan oleh penulis posting dalam form komentar.
Membuat Menu Navigasi Image
Navigasi merupakan penentuan posisi & arah tujuan, baik di medan sebenarnya atau di peta (Wikipedia). Dalam blog, kita bersama mengenal istilah sitemap yang mungkin dapat kita hubungkan dengan peta. Navigasi dalam blog bertujuan untuk
Informasi Update Posting Terdahulu (1)
Tidak sedikit posting di blog ini yang seharusnya di update. Apalagi kalau posting tersebut berkaitan dengan ‘widget’ atau ‘gadget’. Selanjutnya, secara berkala Optimasi Blog akan berusaha rutin melakukan update
Sentuhan Magis dalam Blog
Jangan biarkan tulisan hanya di - intimidasi oleh atribut emosi & ambisi yang berkesan mewah serta modern. Tapi beri ia pijakan yang kuat agar mampu bertahan! Dan biarlah pijakan tersebut bekerja dengan magicnya.
Serbuan ‘Line Break’ Tag
Line break merupakan sebuah tag HTML yang memaksa baris karakter atau kata diletakkan pada baris baru—biasanya ditulis dengan <br>. Dalam blogger, tidak jarang ditemukan posting blog yang menggunakan tag <br>—termasuk optimasi blog. Sekarang,
Font untuk Template Blogger
Beberapa bulan yang lalu, Blogger telah mengumumkan beberapa font baru untuk desainer template. Ya, beberapa bulan yang lalu itu hanya dapat diakses dari Draft Blogger. Kemarin, Blogger tidak hanya diluncurkan Font Web untuk SEMUA pengguna Blogger, tetapi juga mengumumkan bahwa mereka telah menambahkan 35 font tambahan untuk campuran, untuk total 77 grand font!
Siap untuk mendapatkan pengalaman dengan pilihan font baru?
Cukup masuk ke tab Advanced Designer Template Blogger untuk blog Anda, pilih jenis teks yang ingin perubahan (Post Title, Judul Blog, dll) dan klik pada salah satu Font Web baru untuk pratinjau. Jangan khawatir, tidak akan ada perubahan di blog Anda sampai Anda memilih "Terapkan ke Blog", dan ini berarti Anda dapat bermain-main dengan semua font dan hanya beralih bila Anda siap.
Jika Anda menggunakan template yang dikustomisasi, Anda dapat menggunakan berbagai font dari direktori font Google. Baca pengaturan instalasi.
Cara Tambahkan Mode Energy Saving Untuk Blog atau Website
Ini adalah layanan gratis dan disediakan oleh http://www.onlineleaf.com/. Fitur ini memberikan cara yang berfungsi penuh dan sederhana untuk membantu website yang Anda jalankan menghasilkan energi lebih sedikit. Ia menyembunyikan animasi berat, serta widget-widget yang banyak.
Ketika pengunjung anda tidak aktif, maka fitur akan menampilkan Standby Screen, dengan teks "Energy saving mode".
Hal ini sangat mudah untuk ditambahkan ke situs Web atau blog dalam beberapa detik.
Masuk ke dashboard Blogger Anda -> Desain -> Edit HTML.
Anda tidak perlu untuk mengklik pada "Expand Template Widget".Gulir ke bawah ke tempat anda melihat tag </head> dari template Anda.
Sekarang salin kode di bawah ini dan paste tepat sebelum tag </head>.
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>Fitur siaga ini menggunakan jQuery Javascript Library, jadi jika Anda menggunakan perpustakaan Javascript atau kode lain, tambahkan kode di bawah dari kode di atas:
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>
<script>jQuery.noConflict();</script>Waktu tidak aktif
Juga Anda dapat dengan mudah menentukan berapa lama waktu pengunjung Anda harus aktif, untuk mesin untuk membuka layar siaga, dengan menambahkan ?time = X dimana X harus diganti dengan jumlah detik Anda ingin menentukan interval waktu. Contohnya bisa jadi:
<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=120"></script>.. yang akan mengatur waktu tidak aktif sampai 2 menit (120 detik).
Jika Anda menggunakan WordPress, hanya men-download plugin lalu mengaktifkannya dan segala sesuatu siap bekerja langsung.