Full Version Software
Full Version Software |
- Cara Membuat Facebook Comment Box & Like Box Responsif
- Membuat Tampilan Iklan Google Adsense Responsif (CSS Media Queries)
- Cara Mencari Kode Tertentu di Edit HTML (Template) Blogger
- Trik Komputer Lucu dan Unik
- Cara Mengganti Foto Profil Windows 8
- Download Aplikasi Konverter Video Audio Lengkap dan Gratis
- Cara Membuat Readmore Otomatis di Blogspot
- Cara Membuat Related Post atau Artikel Terkait di Blogspot
- Cara Submit Sitemap Blogspot ke Google Webmaster
- Cara Menampilkan Kepemilikan Blog Pada Search Engine
- Cara membuat Tulisan dan gambar Berjalan Di Blog
| Cara Membuat Facebook Comment Box & Like Box Responsif Posted: 12 Sep 2013 03:32 PM PDT Halo sobat semua, rasanya seperti sudah bertahun-tahun tidak update software182.blogspot.com. Yah, memang alasannya cukup klise, kesibukan dunia offline, tapi memang itu kenyataannya. :) Bahkan untuk approve dan menjawab ribuan komentar baru pun belum bisa dilakukan sepenuhnya. Jadi buat anda yang komentarnya belum diterbitkan dan dijawab - khususnya komentar penting yang berisi pertanyaan seputar Blogger, Adsense, dan SEO - saya mohon maaf. Beberapa sobat blogger lain biasanya "mengakali" dengan menyambangi akun facebook saya, dan menanyakan beberapa hal. :) Dalam kesempatan ini saya juga sekaligus ingin mengucapkan selamat menjalankan ibadah puasa Ramadhan. Barakallaahu Lakum! Baik, mari langsung menuju topik yang sedang hangat-hangatnya saat ini, "RESPONSIVENESS". Sekarang lagi musimnya segala sesuatu yang berbau desain responsif: template, theme, layout widget, gambar, bahkan hingga iklan pun kini harus responsif, ya gak? (ke depan akan saya bahas tentang layout responsif pada iklan Google Adsense, baik yang synchronous maupun asynchronous). Untuk blog ini, saya membiarkannya ala kadarnya saja lah :). Hehe. Saya mengandalkan mobile template yang masih cukup efektif. Tapi bagi sobat blogger yang menggunakan responsive template, maka mobile template tidak penting, tidak perlu, dan sebaiknya dimatikan, sebab template responsif anda tidak akan berfungsi dengan baik jika mobile template tetap aktif. Konsep responsif adalah satu untuk semua, artinya satu theme atau template untuk semua device, tidak terpisah-pisah. Namun demikian, ada satu elemen yang cukup luput dari perhatian. Pernahkah melihat widget Facebook comment box pada template responsif tampak aneh karena lebar dan tingginya tetap lantaran tidak ikut responsive? Pernahkah melihat widget facebook like box yang lebarnya melebihi sidebar karena tidak ikut berubah ukuran setelah browser di-resize? Tentu tampak aneh bukan? Karena secara default CSS kedua plugin Facebook tersebut belum menggunakan konsep responsif, maka perlu kita lakukan override atau hack agar keduanya mengikuti aturan responsif sesuai template.  Setelah kuncinya ditemukan, yang perlu dicari adalah class-class yang digunakan oleh facebook comment box dan like box untuk mengatur tampilan plugin.  Di atas adalah contoh-contoh class yang bisa diambil dari comment box. Ada beberapa class lain yang juga perlu dilihat dan diubah. Berikut adalah 4 yang pokok dari styling comment box dan like box:
Setelah mendapatkan class-class yang dibutuhkan, langkah selanjutnya adalah menambahkan aturan width yang otomatis mengikuti perubahan lebar wrapper dimana widget/plugin disisipkan. Caranya? Cukup berikan aturan width: 100%, beres. Tambahkan!important jika diperlukan untuk memaksa browser mematuhi aturan tersebut. Jadi kita dapatkan: .fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;} Jika anda pengguna Blogger, letakkan kode di atas diantara tag b:skin di dalam template. Untuk pengguna WordPress yang ingin membuat facebook comment box dan like box responsive, cukup tambahkan kode CSS tersebut ke dalam file style.css, atau lokasi custom CSS sesuai yang telah disediakan oleh theme atau plugin anda. Jika ingin menggunakannya secara terpisah dari CSS lain, baik pada Blogger maupun WordPress, gunakan tag style pada CSS. Cari </head> di dalam template, dan letakkan kode berikut di atasnya. <style type="text/css"> Note: - Blogger: Dashboard > Template > Edit HTML > Ctrl+F, cari </head> - WordPress: Dashboard > Appearance > Editor > Header.php > Ctrl+F, cari </head> Jika dalam suatu kasus kode di atas tidak berhasil membuat keduanya responsif, ada kemungkinan kode CSS pada FB Comment dan Like Box anda dilingkupi oleh elemen span, ini biasanya karena modifikasi oleh plugin. Ganti dengan class-class berikut: .fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;} Tentunya efek responsif pada comment box dan like box mengikuti template atau theme yang responsif, jadi ini tidak berlaku pada template atau theme non-responsive. Bagi anda yang menggunakan template atau theme non-responsive seperti blog ini, tidak perlu dan tidak ada efeknya. Anda bisa melihat demo Responsive Comment Box di salah satu halaman di syaircinta.com. Coba resize browser dan lihat perubahan pada Facebook Comment Box (resize berarti mengubah ukuran browser, bukan zoom in dan zoom out). | ||
| Membuat Tampilan Iklan Google Adsense Responsif (CSS Media Queries) Posted: 12 Sep 2013 03:31 PM PDT  Sebelum unit iklan responsive dirilis, kode iklan masih dalam bentuk synchronous (kode unit iklan lama), sehingga saya harus mengakali tampilan responsifnya dengan javascript. Ada beberapa slot iklan yang digunakan sekaligus dalam satu area iklan agar nantinya bisa dipanggil sesuai dengan lebar screen. Misalnya di header saya membuat 3 slot sekaligus, 728x90, 468x60, dan 320x50, yang nanti masing-masing akan dimuat sesuai dengan lebar device. Pastinya ini ribet, karena kita mesti membuat banyak slot, apalagi jika punya 3 area di satu halaman, maka bisa dipastikan banyak sekali jumlah slot yang harus dibuat. Belum lagi eksekusi menggunakan javascript yang tentu akan memakan waktu lebih panjang. Beberapa waktu kemudian, kehadiran asynchronous code membuat pekerjaan lebih ringan, karena kita tidak perlu membuat banyak slot, cukup satu slot saja dan sisanya bisa diatur dengan CSS media queries. Contoh: .adsbygoogle {display:inline-block;width:468px;height:60px;} @media screen and (max-width: 467px) { .adsbygoogle {display:inline-block;width:300px;height:250px;} } @media screen and (max-width: 299px) { .adsbygoogle {display:inline-block;width:200px;height:200px;} } </style> <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> Kode di atas adalah hasil modifikasi menggunakan CSS media queries yang menggunakan class adsbygoogle. Berikut kode aslinya. <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:468px;height:60px;"data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> Style di dalam tag ins kemudian diangkat dan dipisahkan ke dalam tag style sendiri, dengan menggunakan class adsbygoogle. Dan hasilnya seperti pada contoh pertama. Proses pembacaan CSS media screen/queries nya seperti ini: Tampilan default iklan yang akan dimunculkan adalah 468x60, namun jika lebar screen kurang dari sama dengan 467px maka tampilkan iklan dalam ukuran 300x250, namun jika lebar screen kurang dari sama dengan 299px, maka tampilkan iklan dalam ukuran 200x200. Rilis Unit Iklan Adsense Responsif (Beta)Sebelum unit iklan responsif dirilis, saya masih merasa was-was, karena cara yang terakhir ini belum benar-benar dirilis secara resmi sebagai cara yang diperbolehkan, meskipun dalam help center, Google mengijinkan penggunaan CSS media queries, namun bukan pada asynchronous. Nah, kabar baiknya, kemarin (baru saja, jam 10an malem, 31 Juli 2013) Google Adsense menyampaikan bahwa kini ada satu fitur lagi (masih dalam versi beta) yang disebut sebagai "responsive ad unit".  Berikut langkah membuat Ad Unit responsive dan modifikasi CSS-nya sebelum bisa digunakan pada website/blog responsive anda:1. Buat slot baru, dan, lihat pada pilihan dropdown di bagian "ad size". Pilih "responsive ad unit". Tidak ada ukuran yang perlu diset pada tahap ini. Kode yang perlu dicopy pun harus dimodifikasi lagi karena itu hanyalah contoh. 2. Copy kode yang dihasilkan dan paste pada notepad atau editor teks sederhana lainnya. Berikut contoh kodenya: <style>.classsesuainamaslot { width: 320px; height: 50px; } @media(min-width: 500px) { .classsesuainamaslot { width: 468px; height: 60px; } } @media(min-width: 800px) { .classsesuainamaslot { width: 728px; height: 90px; } } </style> <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- namaslot --> <ins class="adsbygoogle classsesuainamaslot" style="display:inline-block" data-ad-client="ca-pub-xxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> 3. Lakukan modifikasi pada bagian tag style, karena disitulah kunci responsivitasnya. Default contoh di atas (biru) menggunakan default unit iklan terkecil 320x50 (mobile unit). Kemudian diikuti dengan media min-with (lebar minimal). Jadi asumsinya gini, jika lebar screen minimal 500px, maka tampilkan ukuran 468x90px, jika lebar screen minimal adalah 800px, maka tampilkan unit iklan 728x90. Anda bisa menampilkan beberapa baris sekaligus jika ingin membuatnya lebih spesifik, menentukan syarat minimal atau maksimal screen, dan mengubah ukuran default pada bagian paling atas. Contoh: <style> .classsesuainamaslot { width: 200px; height: 200px; } @media(min-width: 350px) { .classsesuainamaslot { width: 300px; height: 250px; } } @media(min-width: 400px) { .classsesuainamaslot { width: 336px; height: 280px; } } @media(min-width: 500px) { .classsesuainamaslot { width: 468px; height: 60px; } } @media(min-width: 800px) { .classsesuainamaslot { width: 728px; height: 90px; } } @media(min-width: 900px) { .classsesuainamaslot { width: 900px; height: 90px; } } </style> CSS media query di atas menggunakan konsep minimal width, sehingga unit iklan default adalah yang terkecil. Jika ingin menggunakan unit iklan default terbesar menuju ukuran yang lebih kecil, misalnya default 728x90 kemudian menuju unit lebih kecil 468x90 dan seterusnya, maka media query yang harus digunakan adalah max-width. 4. Jika anda masih tidak puas dan bingung, atau ingin menggunakan aturan ukuran media screen yang lebih fix, gunakan contoh pertama dimana saya terapkan pada kode asynchronous di awal artikel (@media screen and (max-width)). Contoh:<style type="text/css"> .classsesuainamaslot{display:inline-block;width:728px;height:90px;} @media screen and (max-width: 727px) { .classsesuainamaslot {display:inline-block;width:468px;height:250px;} } @media screen and (max-width: 467px) { .classsesuainamaslot {display:inline-block;width:336px;height:280px;} } @media screen and (max-width: 335px) { .classsesuainamaslot {display:inline-block;width:300px;height:250px;} } dan seterusnya tergantung keinginan anda... </style> 5. Setelah selesai melakukan editing, masukkan kode iklan ke dalam space dimana anda memasang iklan dan lihat hasilnya. Beberapa poin yang perlu diperhatikan pada penggunaan iklan Google Adsense versi responsive:
Catatan penting: Karena menggunakan kode asynchronous dan hanya perlu satu kali eksekusi javascript setiap load halaman dan iklan, maka script ini sebaiknya hanya disisipkan sekali: <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> Letakkan pada space iklan di bagian teratas dan hapus pada bagian unit iklan lainnya. Unit iklan di space lain secara otomatis akan tereksekusi mengikutinya. Cara ini sudah diakui Google tidak melanggar kebijakan dan justru dianjurkan, karena eksekusi script yang sama justru akan memperlambat load halaman dan sama sekali tidak penting. That's it. Good luck, drop a comment jika ada problem, and have a nice blogging :) | ||
| Cara Mencari Kode Tertentu di Edit HTML (Template) Blogger Posted: 12 Sep 2013 03:29 PM PDT Saya masih sering mendapatkan pertanyaan basic mengenai bagaimana cara mencari kode menggunakan Blogger HTML Editor baru (yang dirilis sejak April 2013 lalu). Pada posting tersebut, saya membahas beberapa perubahan dan apa yang membedakannya dengan HTML editor lama, tapi memang tidak menjelaskannya secara terperinci dengan asumsi bahwa fitur-fitur baru itu bisa dieksplorasi dengan mudah. Namun ternyata memang masih ada kendala, terutama jika bertemu dengan tutorial-tutorial tua saya yang masih mengacu pada HTML editor lama, sehingga membuat proses edit atau modifikasi template blog tidak lancar. Oleh karena itu, dalam kesempatan ini, saya ingin berbagi trik kecil saya dalam melakukan pencarian kode di fitur "Edit HTML Template Blogger" dengan cepat agar proses edit template mudah. Posting ini tentu saja khusus buat sobat yang baru menggunakan blogger (tidak mengenal HTML Editor lama) atau yang masih belum bisa memaksimalkan atau mengenali fitur-fitur baru di dalam HTML Editor baru (sebab sudah terlalu nyaman dengan yang lama). Jadi, buat sobat yang sudah cukup mengenalinya tentu posting ini kurang penting, tapi silahkan saja jika ingin ikut menyimak; plus jika berkenan, boleh menambahkan masukan. Akses ke HTML Editor adalah: Dashboard (home) Blogger > Template > Klik button "Edit HTML". HTML Editor baru memiliki beberapa perbedaan mendasar, 3 yang penting di antaranya adalah: 1. Dihapusnya fitur "Expand Widget Templates". Pada HTML editor lama, fitur ini digunakan untuk menampilkan tag-tag widget yang secara default disembunyikan, demi keamanan, untuk menghindarinya teredit secara tidak sengaja. Oleh karena itu, untuk menampilkan tag-tag widget tertentu, harus mencentangnya dan baru bisa mengeditnya. 2. Tag-tag widget di HTML editor baru kini ditampilkan (default), namun dalam wujud tertutup di antara tag inti, dan harus klik tanda expand (►) untuk melihat isinya. Masing-masing tag inti bisa langsung dicari dengan menggunakan menu dropdown "Jump to widget", dimana di dalam menu tersebut terdapat nama-nama tag inti yang ingin dituju. Urutan nama widget dari atas ke bawah sesuai urutan widget di dalam template.  3. Poin paling penting adalah ditambahkannya fitur baru pada HTML Editor baru, yaitu fungsi "Search". Jika dulu kita biasa menggunakan fitur search (CTRL+F) milik browser, dan memasukkan kode untuk menuju bagian tertentu di dalam editor, kini tidak bisa lagisebab HTML Editor baru ditampilkan dalam frame, search milik browser tidak bisa digunakan untuk "menggali" isi frame. Nah untuk mengatasi hal itu, Blogger menambahkan fitur "SEARCH" khusus di dalamnya. Itu adalah 3 inti yang kemudian mengubah cara lama yang biasa kita gunakan untuk mengedit HTML Blogger. Untuk poin 1, fitur itu sudah tidak ada lagi, jadi jika ada tutorial saya atau yang lainnya yang meminta "expand widget templates", abaikan. Cara Mencari Tag Widget Dengan ID Tertentu di HTML EditorDi antara ketiga poin perubahan tersebut, poin nomer 2 memang agak sulit, karena anda harus mengenal semua nama ID widget (widget bukan hanya yang ada di sidebar loh, melainkan termasuk post, header, dll; elemen template blogger terdiri dari widget-widget). Untuk widget sidebar, biasanya namanya menggunakan ID HTML, misalnya HTML1, HTML2, dll, sesuai urutan widget sidebar yang ditambahkan. Untuk mencari ID widget sidebar, simak caranya di post Cara Menampilkan Widget hanya di Halaman tertentu. Setelah menemukan ID widget yang dimaksud, lalu: 1. Klik menu dropdown "Jump to Widget". 2. Klik nama widget (ID) seperti yang sudah ditemukan. 3. anda akan dibawa meluncur ke bagian tag widget sesuai dengan nama yang diinginkan. 4. Klik tanda ► di sebelah kiri widget yang dimaksud sehingga tag terbuka dan memperlihatkan elemen-elemen di dalamnya. 5. Lakukan editing/modifikasi sesuai kebutuhan atau tutorial. Cara ini tentu hanya efektif juga apabila tag widget mudah dicari sesuai nama dan dapat dilihat dengan mata telanjang. Bagaimana jika kode yang dicari merupakan tag khusus dan bukan merupakan widget? Tentu sangat ribet jika harus membuka masing-masing tag dengan klik ►. So kita butuh "jalan pintas", yaitu: mencari sekaligus expand tag dengan hanya sekali klik! Cara Mencari Kode di HTML Editor Menggunakan Fitur "Search"1. Untuk memunculkan fitur "search" milik Blogger, anda tidak bisa langsung menekan Ctrl+F, sebab yang muncul nantinya fitur search milik browser. Arahkan kursor terlebih dahulu ke dalam HTML Editor, klik di bagian manapun di dalam editor, baru tekan CTRL+F, maka search bar Blogger akan muncul di pojok kanan atas.  2. Next, untuk mencari kode tertentu sesuai dengan petunjuk tutorial, copy dan paste atau ketikkan kode tersebut ke dalam kolom "search", lalu klik enter. Kode yang anda cari akan muncul di baris paling bawah pada kode-kode yang nampak di post editor, dan di-highlightdengan warna tertentu. Tag widget dimana kode tersebut berada otomatis akan expanded dengan sendirinya. Sebagai contoh, saya mencari kode <data:post.body/> seperti contoh berikut:
3. Jika kode yang sama lebih dari satu sesuai yang telah disampaikan oleh tutorial, klik enter satu atau dua kali lagi hingga menuju kode yang dimaksud. 4. Jika anda diminta mencari kode yang ternyata telah dimodifikasi sedemikian rupa oleh pembuat template, cari kode pokoknya saja. Contoh, jika harus mencari kode <body>, dan tidak ketemu, maka tag body tersebut biasanya telah dimodifikasi, misalnya: <body (beberapa atribut tag di belakang).>, maka cari saja <body (tanpa penutup). 5. That's it! Jika masih ingin mempelajari beberapa tips dan trik dalam menghadapi HTML Editor Blogger, simak tips edit template HTML Blogger. Itu adalah tutorial tua, jadi ada beberapa hal yang tidak perlu diikuti karena tidak sesuai lagi dengan HTML editor baru, tapi beberapa poin masih sangat penting. Hopefully bisa memberikan sedikit pencerahan bagi yang baru berkenalan dengan blogging, HTML Editor Blogger, maupun yang masih pusing dengan kehadiran fitur HTML Editor baru karena sudah cukup nyaman dengan yang lama. | ||
| Posted: 12 Sep 2013 03:26 PM PDT  Trik Komputer Lucu dan Unik - Sobat bisa belajar banyak trik2 dari komputer sobat. Sekarang saya akan menunjukkan beberapa trik terbaik yang pernah saya ketahui. Saya harap sobat dapat mencobanya sendiri. 1. Ok sob, bagusnya kita mulai dulu dengan yang lucu. copy paste kode dibawah ini ke address bar browser web sobat dan tekan enter .. javascript: function SHW (n) {if (self.moveBy) {for (i = 35; i> 0; i -) {for (j = n; j> 0; j -) {self.moveBy (1 , i); self.moveBy (i, 0); self.moveBy (0,-i); self.moveBy (-i, 0);}}}} SHW (6) Browser sobat akan bergoyang dan berjoget. Tareeek maaang ;) Catatan: Pada beberapa browser mungkin tidak bekerja Javascript gokil ;) 2. Sob, tau gak cara bikin folder gak pake nama? apakah mungkin? coba deh sob .. # Klik folder tersebut, kemudian klik kanan di atasnya, kemudian klik rename dandelete nama lama. # Kemudian menekan dan tahan tombol ALT dari keyboard sobat sambil mengetik0160 setelah itu tekan enter. Harus diperhatikan - sobat harus mengetikkan dengan menahan tombol ALT, jangan berhenti menekan dan saat sobat akan ketik 0160 tidak akan ditampilkan.Sobat harus terus mengetik dan kemudian tekan enter. Hal penting lain adalah bahwa sobat harus ketik kode (0160) dengan Numpad Anda. Jika sobat mengetik kode dari tombol angka yang diatas itu tidak akan berhasil. Jadi, pastikan tombol numpad sobat aktif. 3. Sekarang saya akan menunjukkan cara untuk membuat komputer sobat lebih cepat dari sebelumnya. Saya bisa membuat pc sobat 200% lebih cepat. Untuk membuat PC sobat lebih cepat dari sebelumnya silahkan folow langkah-langkah : # Klik Start (windows) kemudian klik Run (win + R) dan kemudian ketik regedit # Pilih HKEY_CURRENT_USER dan kemudian pilih folder Control Panel kemudian pilih folder Desktop. Lakukan dengan benar # Lihat pengaturan registry seblah kanan sob, setelah itu pilih MenuShowDelaydan kemudian klik kanan dan pilih Modify. # Sobat akan menemukan pilihan mengedit String; nilai default data adalah 400, sobat harus mengubah nilai data menjadi 000 # Restart komputernya sob dan rasakan bedanya. *(Catatan: Ini akan membantu sobat untuk memulai start komputer dengan cepat, untuk meningkatkan kinerja keseluruhan ikuti artikel saya yang lain untuk Membuat komputer Sobat lebih cepat dan lebih bersih) 4. Trik Nama Terlarang: Sobat tau gak kalo gak mungkin membuat sebuah folder dengan nama "con" ? Berapa kali pun sobat mencoba untuk membuat folder dengan nama Con tidak akan dapat berhasil. Saya juga tidak tahu kenapa....hahahh.. 5. Font yang aneh: Buka notepadnya sob dan meningkatkan ukuran font menjadi 72, kemudian mengubah font menjadi "Windings". Sekarang tuliskan nama sobat dengan huruf Capital kemudian dan lihat apa yang sobat lihat di sana? Terkejut? 6. Super Desktop Pranks: Ambil screenshot dari desktop sobat (dengan mengklik tombol PrtSc SysRq alias Print Screen) dan kemudian paste gambar di Paint dan menyimpannya sebagai format gambar Jpeg. Kemudian buka gambar dari desktop sobat dan membuatnya wallpaper desktop sobat. Sekarang menyembunyikan semua ikon dari desktop Anda (Klik Kanan > arrange icons by > Hide desktop icon). Dan juga Unlock the Taskbar. Sekarang desktop sobat akan terlihat seperti persis sama seperti sebelumnya, tapi semua orang akan tertipu setiap kali mereka mencoba untuk mengklik ikon apapun. Sobat dapat melakukan trik ini di komputer teman sobat dan menikmati pertunjukan menyenangkan :) 7. Trik Microsoft word: Hanya buka microsoft word lalu ketik = Rand (200,99) lalu tekan enter. Nikmati keajaiban | ||
| Cara Mengganti Foto Profil Windows 8 Posted: 12 Sep 2013 03:22 PM PDT  Windows 8 merupakan sistem operasi generasi terbaru dari microsoft. Windows 8 menawarkan banyak penambahan dan perubahan menu-menu pada tampilan antar mukanya. Satu di antaranya yang bisa dibilang menjadi cirikah dari windows 8 adalah adanya tampilan antar muka baru yang disedesain untuk perangkat tablet layar sentuh, yaitu tampilan antar muka metro. Selain tampilan metro, tampilan antar muka pada bagian profil atau user akun juga sedikit berbeda. Sehingga bagi pengguna windows 8 yang masih pemula akan sedikit kebingunan jika ingin mengganti foto profil pada windows 8. Untuk pengguna windows yang ingin terlihat eksis apalagi narsis, foto profil pada windows 8 ini cukup penting, karena pada tampilan lock screen windows 8 ada kotak cukup besar untuk menampilkan foto profil. jadi sangat disayangkan jika kotak tersebut tidak menampilkan wajah pemilik laptop atau komputer penggunanya. Bagi kamu yang belum mengerti cara mengganti foto profil windows 8, situs belajar komputer menampilkan panduan yang mudah dan lengkap di bawah ini : 1. Untuk mengganti foto profil pada windows 8, silahkan masuk pada tampila antar muka metro yang kotak kotak itu, kemudian klik pada gambar orang tanpa wajah di dekat nama profil windows 8 kamu. perhatikan gambar di bawah, setelah itu klik change account picture.  2. Selanjutnya kamu akan masuk pada jendela PC settings – personalize, Untuk mengganti foto dari komputer, silahkan klik Browse, jika melalui webcam, silahkan klik Camera. Pada contoh ini kita klik saja Browse  3. Selanjutnya akan tampil jendela di bawah ini. yaitu jendela untuk memilih foto yang akan digunakan untuk foto profil windows 8. secara default yang ditampilkan adalah folder pictures. Jika foto kamu ada di folder pictures, silahkan langsung pilih. Namun jika di folder lain, silahkan klik tombol Files. seperti pada contoh gambar di bawah ini, profil yang diambil berasal dari folder download.  4. Selanjutnya, setelah foto tampil, silahkan klik salah satu foto yang akan digunakan untuk dijadikan foto profil windows 8,  5. setelah foto dipilih, silahkan klik tombol Choose image yang ada di sebelah kanan bawah untuk menjadikan foto tersebut sebagai foto profil. (btw tahu kan sisi kanan itu sebelah mana? hehe)  6. Sekarang foto profil pada windows 8 sudah berubah menjadi foto yang kamu ganti tadi. contohnya seperti gambr di bawah ini. Ganteng ya fotonya? hihi  Ya itulah penjelasan mengenai bagaimana cara mengganti foto profil windows 8 dengan mudah dan simple. Dengan begitu windows 8 di laptop kamu sudah ada foto profilnya. Selamat mencoba | ||
| Download Aplikasi Konverter Video Audio Lengkap dan Gratis Posted: 12 Sep 2013 03:17 PM PDT  Aplikasi konverter atau yang kadan ditulis dengan converter merupakan aplikasi yang digunakan untuk merubah suatu format file tertentu, misalnya adalah merubah format file dari MP4 menjadi MP3, atau dari MPEG menjadi MP4 atau menjadi AVI dan lain lain. Di internet telah banyak yang menyediakan aplikasi konverter semacam ini, ada yang gratis dan adapula yang berbayar, yang diincar kebanyakan pengguna tentunya adalah yang gratisan. Seperti pada judul di atas, di sini bukan membahas tentang software berbayar tapi yang gratisan, full gratis, tanpa perlu menggunakan crack tertentu. Aplikasi konverter yang gratis ini adalah Any Video Converter. Meskipun aplikasi any conveter ini adalah aplikasi gratisan tapi mendukung banyak sekali format file yang akan dikonver misalnya format filemp4, flv, swf, mpg, avi, wmv, asf, mkv, mp3, ogg, wave, aac, m4a, wma. Selain bisa digunakan untuk mengkonver format file, aplikasi any conveter ini bisa juga digunakan untuk memotong video atau lagu, dan juga bisa digunakan untuk mendownload video dari Youtube dengan cara meng kopikan alamatnya pada tombol Youtube. Gambar di bawah ini merupakan tampilan antar muka dari aplikasi Any Video Converter ,  untuk mendownload aplikasi any video converter klik pada tombol download di bawah ini  dengan ukuran file sebesar 16 mb Selamat mencoba, dan semoga aplikasi di atas bisa digunakan untuk tujuan kebaikan ya! credit : http://www.any-video-converter.com/download-freeware/ | ||
| Cara Membuat Readmore Otomatis di Blogspot Posted: 12 Sep 2013 02:52 PM PDT  Mungkin Templat pada Blog anda belum pakai Readmore atau mungkin sobat pernah Membuat tapi gagal.seperti yang pernah saya alami?jika benar jangan putus asa sobat saya pun pernah juga mengalaminya.jadi anda tidak sendiri dalam hal ini.Sekarang admin sudah berhasil membuat Readmore Otomatis yang berguna memotong tampilan postingan kita supaya Terlihat Rapi Pada saat ada di halaman Home Page.dan ditambah lagi kita bisa menyisipkan Judul Postingan Blog yang secara tidak langsung itu bisa menambah power Seo Kita. Berikut Cara Membuat Readmore Otomatis di Blogspot : 1.Login ke blogger (Sebaiknya Back-up dulu templat anda jadi jika nanti gagal tinggal Upluad lagi) 2. Masuk Kedalam Menu TEMPLAT Anda 3. Pilih Edit HTML. 4. Centang tulisan "expand template widget". 5. Lalu cari kode </head> : ( untuk mempermudah pencarian Gunakan CTRL dan F Sebagai Bantuanya. 6. Lalu masukkan code di bawah ini tepat di atas </head> <script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> 6. Kemudian sobat cari kode <data:post.body/> Ganti kode <data:post.body/> dengan kode di bawah ini : <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'> <a expr:href='data:post.url'> <b> Readmore</b> »»   <data:post.title/></a> </span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/> </b:if> 7. Kemudian Save Template anda Selesai. Untuk keterangan Readmore Di atas Sebagai Berikut : var thumbnail_mode = "float"; : Letak gambar / thumbnail berada di "float" kiri atau jika tidak suka silahkan ganti dengan "no-float"; summary_noimg = 250; : Jumlah karakter yang akan ditampilkan di posting tanpa adanya gambar / thumbnail; summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar /thumbnail; img_thumb_height = 120; : Tinggi thumbnail dalam ukuran pixel; img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel; READMORE-: Tulisan READMORE bisa diganti misalnya dengan "Baca Selengkapnya" "Selanjutnya" terserah sobat. dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, sobat bisa menghapus code script ini <data:post.title/> yang ada di belakang tulisan Readmore. Cukup Mudah Bukan.saya harap dan yakin anda bisa.Seperti itulah Cara Membuat Readmore Otomatis di Blogspot yang walaupun nanti mungkin aja tidak berpengaruh dalam Seo anda tapi setidaknya tampilan pada templat anda menjadi rapi dengan adanya Readmore.Salam Blogger. | ||
| Cara Membuat Related Post atau Artikel Terkait di Blogspot Posted: 12 Sep 2013 02:49 PM PDT  Artikel Terkait atau Related Post dari namanya aja saya kira bagi seorang Pemula yang baru mengenal Blogspot pastinya sudah tahu lah arti dari itu.Artikel terkait adalah Sebuah Link atau Url yang di kelompokan dan saling berkaitan atau berhubungan dan bahkan bisa satu topik.makanya di dalam script artikel terkait tidak akan bisa bekerja dengan baik jika postingan anda belum anda kasih Label.apa ada hubunganya dengan Seo? Jika menurut saya jelas ada karena struktur Url yang di hasilkan dari Artikel Terkait di Blogspot merupakan Url yang sah dengan Jangkar text –nya.Sedang label tidak. walaupun jika pengunjung Blog klik alamat tersebut punya target yang sama.Google pun juga pakai Artikel terkait.lihat di bawah jika kita mengetik Frase atau kata di form pencarian di bawah sendiri pasti muncul sebuah Artikel terkait. ini hanya sebuah pendapat saja sobat jadi kalau salah saya mohon maaf. Ini adalah Sebuah Langkah Yang harus kita lakukan untuk Membuat Artikel Terkait di Blogspot Untuk Melengkapi Belajar Seo Blogspot Kita. 1.Login ke blogger (Sebaiknya Back-up dulu templat anda jadi jika nanti gagal tinggal Upluad lagi) 2. Masuk Kedalam Menu TEMPLAT Anda 3. Pilih Edit HTML. 4. Centang tulisan "expand template widget". 5. Lalu cari kode </head> : ( untuk mempermudah pencarian Gunakan CTRL dan F Sebagai Bantuanya. 6. Lalu masukkan code di bawah ini tepat di atas </head> Kemudian Letakan Script di bawah ini di atas Kode </head> <script type="text/javascript"> 7. Kemudian cari kode <data:post.body/> kemudian letakkan script berikut ini di bawah kode <data:post.body/> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=15"' type='text/javascript'/> </b:if> </b:loop> </b:if> <b:if cond='data:blog.pageType == "item"'> <h4>Artikel Terkait <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></h4> <script type="text/javascript"> removeRelatedDuplicates(); printRelatedLabels(); </script> </b:if> 8. Terakhir simpan template anda. Demikianlah dongeng dari saya semoga anda tidak rugi membaca ulasan saya Cara Membuat Artikel Terkait / Related Post di Blogspot . Semoga anda Berhasil . Salam Blogger. | ||
| Cara Submit Sitemap Blogspot ke Google Webmaster Posted: 12 Sep 2013 02:43 PM PDT  Submit Sitemap ke Search Engine merupakan Point yang penting dan wajib di lakukan oleh webmaster supaya Mesin Pencari bisa dengan mudah me-metakan situs atau blogspot kita.dan akhirnya nanti Postingan kita nanti akan cepat terindex oleh Search Engine.dan juga sitemap akan memberikan Link setiap kali muncul Artikel Baru pada Blog Kita. Dalam sistem sitemap di Google pengguna dapat melakukan submit sitemap Blog dengan berbasis XML.Berikut Cara Submit Sitemap Blogspot ke Google Webmaster : 1. Logi Dulu ke akun Email Gmail Sobat.Lanjutkan 2. Login ke Google Webmaster Tools 3. Klik Blog yang akan di Submit Sitemap. 4. Selanjutnya Anda akan menjumpai halaman seperti di bawah ini. Cara Submit Sitemap Blogspot ke Google Webmaster Selanjutnya pilih Pengoptimalan lalu Peta Situs lanjut klik Tambahkan Peta Situs Terus Masukan Url sitemap di bawah ini satu persatu di kotak No 3 di gambar di atas. 1. atom.xml? 2. atom.xml?redirect=false 3. feeds/posts/default?orderby=updated 4. atom.xml?redirect=false&start-index=1&max-results=500 | ||
| Cara Menampilkan Kepemilikan Blog Pada Search Engine Posted: 12 Sep 2013 12:15 PM PDT  Cara Menampilkan Kepemilikan Blog Pada Search Engine
<link href='URL Google Plus Anda' rel='author'/> <link href='URL Google Plus Anda' rel='publisher'/>
Dan Anda bisa mencek hasilnya di webmaster (Masuk ke halaman webmaster, --> Klik Sumber Daya Lainnya, --> Klik Alat Pengujian Data Terstruktur, Masukan URL Blog yang sudah dicantumkan.) | ||
| Cara membuat Tulisan dan gambar Berjalan Di Blog Posted: 12 Sep 2013 12:13 PM PDT Tulisan Berjalan di Blog sebuah gadget yang di buat untuk memperindah blog. dan untuk menarik pengunjung. untuk membuat tulisan berjalan ada beberapa tahap yang harus anda ikuti. Berikut contoh dan cara untuk membuat tulisan berjalan:
Berikut Script kodenya: Untuk Tulisan Bergerak Ke Kanan Berikut Scricpt Kodenya: <marquee direction="right"><span style="color: rgb(255, 0, 0); font-weight: bold;">Tulisan Bergerak Bergerak kekanan (Ganti dengan Teks Anda)</span></marquee> Untuk Tulisan Bergerak Ke Kanan Dan Kekiri Berikut Scricpt Kodenya: <marquee direction="left" behavior="alternate"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri (Ganti dengan Teks anda)</span></marquee> Untuk Tulisan Bergerak Ke Kanan Perlahan Berikut Scricpt Kodenya: <marquee direction="right" scrolldelay="500"><span style="color:red; font-weight: bold;">Tulisan Bergerak kekanan Perlahan (Ganti Dengan Teks Anda)</span></marquee> Untuk Tulisan Bergerak Ke Kanan dan Kekiri Bisa di stop Berikut Scricpt Kodenya: <marquee direction="left" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Kanan dan Kekiri Dan Bisa Di stop (Ganti dengan Teks Anda)</span></marquee> Untuk Tulisan Bergerak Ke Atas Berikut Scricpt Kodenya: <marquee align="center" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="95%"><span style="color: red; font-weight: bold;">Tulisan Bergerak Ke Atas(Ganti dengan Teks anda)</span></marquee> Untuk Tulisan Bergerak Ke Atas Berikut Scricpt Kodenya: <marquee align="center" direction="up" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color:red; font-weight: bold;">Tulisan Bergerak Ke Atas dan Ke bawah(Ganti dengan Teks Anda)</span></marquee> Keterangan: Ganti Kode berwarna Merah dengan Teks yang anda mau, Ganti kode berwarna Biru dengan warna yang anda Mau (Pilihan warna Ada Dibawah).
Bisa Diganti dengan kode warna
Untuk itu silahkan di coba-coba kode warna yang lain. Untuk Gambar yang bisa berjalan Ke Kiri berikut Scriptnya: <marquee direction="right"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRcIjdIAxaxZAg5_nAKfAhnK0EREBWMyl88ujiEB-kedbiMoMDJPfM-ai0-zC_hFMf8C94dXNNHgZDiDza6qcW-k37KBJEDv2KizL8nhIAqwBHZFsgMfplaW5bMB8inrLkZZr34MEI5co/s1600/Blog.jpg" /></marquee> Gambar Diatas Merupakan Contoh Gambar Berjalan. Selamat Mencoba, Salam Sukses. |
| You are subscribed to email updates from Trik Komputer dan Internet | Trik Blogspot dan SEO Blog | Segala Tentang Komputer dan Internet To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
And Share
Posted by azam
on 5:32 AM.
Filed under
.
You can follow any responses to this entry through the RSS 2.0
Mengapa kami senang berkunjung di blog ini, karena selalu ada artikel yang menarik dan berkualis seperti ini? salam sukses