Firman Webs

Home All post with category Blogging

Memahami Konsep Redirect Halaman Blog

Thursday, 7 November 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdQ0PD643WwjCJ4zAUlFtbaZBVM0-S49AIEvA7p-a4_9W4FBUILsWk43vURkunDfQCNa5DxrXp8BXt1qd_RTwhJvhEbQEKKG6KdwX-otY3rYCzzSscUAac-j8sNvV8JevkfXebqOIsIA/s1600/page-redirect.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Memahami Konsep Redirect Halaman Blog" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdQ0PD643WwjCJ4zAUlFtbaZBVM0-S49AIEvA7p-a4_9W4FBUILsWk43vURkunDfQCNa5DxrXp8BXt1qd_RTwhJvhEbQEKKG6KdwX-otY3rYCzzSscUAac-j8sNvV8JevkfXebqOIsIA/s540/page-redirect.jpg" title="Memahami Konsep Redirect Halaman Blog" width="540" /></a>Memahami Konsep Redirect Halaman Blog – seperti yang kita tahu, bahwa sangat di sayangkan apabila kita mempunyai sebuah blog dan memiliki halaman yang sudah populer dan sudah di kenal oleh banyak orang namun halaman tersebut sudah tidak bisa di akses lagi atau halaman tidak ditemukan alias error. Blog berubah seiring waktu, karena tulisan pada halaman dapat kita tambahkan dan dapat juga kita hapus atau bisa juga terhapus baik itu secara di sengaja maupun tidak. Untuk menghindari hal tersebut, terlebih dahulu pada artikel ini saya akan membahas untuk menghindari kemungkinan hal-hal tersebut agar suatu saat apabila terjadi kesalahan pada halaman dapat kita custom sedemikian rupa hingga tidak terjadi error. Redirect adalah mengalihkan suatu URL halaman ke URL halaman yang lain pada sebuah web/blog, atau bisa di artikan mengarahkan pengunjung saat proses indexing dari halaman lama ke halaman yang baru. Jika sebagian masih ada yang kurang paham mengenai fungsi Redirect mari kita bahas sama-sama, mungkin hal ini suatu saat dapat di perlukan untuk mengarahkan pengunjung ke halaman baru. Ketika kita mengelola sebuah situs web/blog, kemungkinan besar kita tidak terhindarkan dari banyak hal termasuk juga kesalahan pada perayapan search engine. Untuk menghindari hal ini maka kita perlu mengubah lokasi dari suatu halaman web/blog. Namun jika halaman tersebut sudah populer, bahkan banyak link dari situs lain yang menuju ke halaman tersebut maka tidak hanya pengunjung saja yang tidak bisa mengakses melainkan search engine juga sudah tidak bisa mengindeks halaman tersebut, orang yang mencoba untuk mengakses halaman akan menerima pesan "Halaman Tidak Ditemukan - 404" / “Page Not Found - 404”. Untuk kasus ini, hal yang terbaik adalah untuk mengganti halaman lama ke halaman yang baru supaya pengunjung dan search engine dapat mengindeks kembali halaman yang error. Ini adalah langkah dan sebagai upaya untuk selalu bekerja keras dan mempelajari cara-cara berkualitas di mana untuk mengarahkan lalu lintas ke situs web/blog. Dalam hal ini terdapat beberapa cara untuk masing-masing keperluan yang berbeda dalam melakukan Redirect, berikut ada beberapa cara untuk Redirect. Pertama kita pahami terlebih dahulu mengenai fungsi HTML meta refresh. Fungsi refresh di gunakan untuk membuat penyegaran kembali pada halaman sebuah blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet, perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol refresh. Untuk membuatnya hanya perlu menambahkan kode dibawah ini kedalam template lalu menaruhnya di antara kode <code><head></code> dan <code></head></code> <pre><meta http-equiv="refresh" content="30"/></pre><blockquote class="atas">Sedikit uraian dari kode diatas, content="30" fungsi angka tigapuluh disitu adalah menunjukan bahwa proses auto refresh akan dilakukan dalam waktu 30 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena dapat membuat pengunjung merasa kesal.</blockquote>Fungsi refresh selain untuk menyegarkan kembali halaman blog, masih terdapat fungsi lain yakni berfungsi untuk Redirect dari satu URL halaman ke URL halaman yang lain. Ini berfungsi jika ingin mengarahkan pengunjung web/blog ke alamat situs yang anda inginkan. Cara ini dugunakan untuk mengarahkan seluruh isi blog dari URL lama ke URL yang baru. Misalkan saja anda membuat blog baru sedangkan blog yang lama ingin di non-aktifkan, atau mungkin anda telah berganti domain TLD. Alangkah baiknya kita memakai fungsi refresh yang di setting secepat mungkin yakni waktu refresh di set menjadi 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di arahkan langsung ke alamat baru yang di inginkan. Untuk menggunakan fungsi Redirect ini caranya pasang kode berikut ini seperti langkah diatas. <pre><meta http-equiv="refresh" content="0; url=http://contoh.blogspot.com" /></pre><blockquote class="bawah">Atau bisa juga menggunakan metode JavaScript redirect.</blockquote><pre><script type="text/javascript"> window.location = "http://contoh.blogspot.com"; </script></pre> Selain cara-cara diatas bisa juga dengan mengunakan Custom fitur Redirect pada blogger yang akan memungkinkan kita untuk mengambil URL lama dan mengarahkan ke URL yang baru. Cara ini digunakan untuk mengalihkan sebagian kecil halaman posting yang hilang. Langkahnya juga cukup mudah, setelah masuk ke dashboard blogger klik pada Setelan lalu pilih Preferensi Penelusuran. Disitu kita dapat mengkustom Kesalahan dan pengalihan menggunakan Pengalihan Khusus. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6PEYxWlZaS3MSrV047InYaqyAxJpUX78OVeyxDkTeGKtCFz5zKEMURZHOj7_EAiwtwQQzTCDqMcq9t4jW22vJVn9QjKJ_co9IUdh7_8OvMzLy-6RwJCS093LqvPG_PwD-qaJhkc0_HM/s1600/redirect-custom.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Memahami Konsep Redirect Halaman Blog" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6PEYxWlZaS3MSrV047InYaqyAxJpUX78OVeyxDkTeGKtCFz5zKEMURZHOj7_EAiwtwQQzTCDqMcq9t4jW22vJVn9QjKJ_co9IUdh7_8OvMzLy-6RwJCS093LqvPG_PwD-qaJhkc0_HM/s540/redirect-custom.png" title="Memahami Konsep Redirect Halaman Blog" width="540" /></a> <blockquote class="atas">Kolom Dari: di isi sub link halaman lama, misal: /2013/11/halaman-lama.html Kolom Kepada: di isi sub link halaman baru, misal: /2013/11/halaman-baru.html</blockquote>Sedangkan pada Pesan Khusus untuk Laman Tidak Ditemukan adalah untuk membuat pesan secara khusus yang nantinya akan ditampilkan saat search engine gagal mengindeks sebuah halaman blog. Hal ini akan saya bahas pada artikel selanjutnya untuk cara mendesain pesan khusus pada halaman yang error menggunakan metode jQuery.

Memahami Konsep Redirect Halaman Blog – seperti yang kita tahu, bahwa sangat di sayangkan apabila kita mempunyai sebuah blog dan memiliki h...

Cara Meningkatkan Traffic Blog Melalui Fanpage

Friday, 20 September 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLllAQ7mG6EMhnarWvmYAb-i5_t1zi41IEBAhmsxjbBDtL11rm0KGbHzMSi4YRa-DR2VqInKCvx8EXdM5XCeJL8hxkSJgf5tAaBkbkn73SfS3GIvEXUSdQ0UXErCHV4NwS2OzadzUfjv0/s1600/trafik-facebook.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Traffic Blog Melalui Fanpage" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLllAQ7mG6EMhnarWvmYAb-i5_t1zi41IEBAhmsxjbBDtL11rm0KGbHzMSi4YRa-DR2VqInKCvx8EXdM5XCeJL8hxkSJgf5tAaBkbkn73SfS3GIvEXUSdQ0UXErCHV4NwS2OzadzUfjv0/s540/trafik-facebook.png" title="Cara Meningkatkan Traffic Blog Melalui Fanpage" width="540" /></a>Cara Meningkatkan Traffic Blog Melalui Fanpage – banyak yang sudah saya bahas untuk meningkatkan traffic blog pada artikel-artikel sebelumnya dengan menggunakan berbagai cara. Hal ini sudah pernah saya singgung sebelumnya pada artikel terakhir terakhir mengenai traffic blog di artikel yang berjudul <a href="http://mas-andes.blogspot.com/2013/09/tips-meningkatkan-traffic-blog-dengan.html" target="_blank" title="Tips Meningkatkan Trafik Blog Dengan Facebook">Tips Meningkatkan Trafik Blog Dengan Facebook</a>. Disitu situ sudah saya sebutkan untuk meningkatkan lalu lintas ke blog yakni salah satu di antaranya dengan memanfaatkan fanpage. Maka dari itu sekarang kita bahas untuk menelusur seberapa jauh yang bisa kita dapat dari fanpage untuk mengarahkan sumber lalu lintas. Saya yakin setiap blogger pastinya sudah memiliki fanpage baik itu yang sudah di pasang ke dalam blog maupun yang tidak dipasang. Dengan adanya fanpage tersebut, dari pada sekedar menjadi pajangan atau hiasan blog akan lebih baik kalau sebaiknya di kelola sedemikian rupa untuk memaksimalkan konten blog hingga bisa berdampak positif terhadap perkembangan blog yang sudah kita kelola. Dibawah ini terdapat beberapa tips sederhana untuk mengarahkan lalu lintas dari fanpage sehingga bisa meningkatkan traffic blog. Pertama, apabila belum mempunyai fanpage segera buatlah fanpage yang bertema niche blog anda. Apabila belum pernah membuat fanpage bisa cari di google, saya yakin pasti banyak blog-blog yang menyediakan tutorial untuk cara membuat fanpage. Setelah fanpage siap terpakai, undang sebanyak mungkin teman-teman atau orang-orang untuk subcribe fanpage anda. Kedua, apabila belum mempunyai akun Networked blog segera buat akunnya dan hubungkan ke fanpage anda. Maka nanti secara otomatis tanpa perlu share secara manual posting yang anda publikasikan akan muncul juga di fanpage dan hal tersebut sangat efisien tanpa harus melakukan secara manual untuk share artikel satu per satu. Pada fanpage itulah nanti anda dapat memantau perkembangan blog anda dengan datangnya traffic dari fanpage yang sudah anda buat tersebut. Untuk mengelola fanpage tidak perlu terlalu aktif untuk menjaring banyak lalu lintas ke blog, biarkan traffic mengalir dengan sendirinya dan hal tersebut saya rasa tidak susah. Demikian sedikit tips yang bisa saya sampaikan, langkah selanjutnya bisa anda cermati sendiri setelah melakukan dan menganalisa untuk mengoptimalkan perkembangan blog yang sekarang dan berikutnya.

Cara Meningkatkan Traffic Blog Melalui Fanpage – banyak yang sudah saya bahas untuk meningkatkan traffic blog pada artikel-artikel sebelumn...

Tips Trik Mempercepat Loading Blog

Tuesday, 10 September 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZzZWDw0andKja5uUhZLlPPzJVbyyIx6y968_Xo2CiQWLUMhnQ3O_63Hw4AVzdaAcpkjnHcqdSlgDKz7cEIxpUEQXQUGkOMnZ0ObuLrWYfD3cpOO6bRIj-vGGn972rGiR15c2AxLgQrEU/s1600/Faceblog+Evolutions+(32).gif"><img alt="Loading Blog" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZzZWDw0andKja5uUhZLlPPzJVbyyIx6y968_Xo2CiQWLUMhnQ3O_63Hw4AVzdaAcpkjnHcqdSlgDKz7cEIxpUEQXQUGkOMnZ0ObuLrWYfD3cpOO6bRIj-vGGn972rGiR15c2AxLgQrEU/s320/Faceblog+Evolutions+(32).gif" title="Tips Trik Mempercepat Loading Blog" width="550" /></a>Tips Trik Mempercepat Loading Blog - memang benar bahwa biasanya template blog dengan desain yang di sisipi gambar bervariasi terkadang memiliki tampilan yang elegant dan terlihat cantik. Apalagi jika blog tersebut juga dilengkapi dengan fitur slider, jelas beban loading blog juga akan bertambah ketika terdapat beberapa URL gambar dimasukan kedalam slider tersebut untuk di tampilkan. Namun bagaimana jika gambar yang akan anda upload ke dalam blog memiliki ukuran besar? Bagaimana pula agar gambar tersebut bisa di upload dengan sempurna tanpa mengurangi kualitas gambar? Bukankah jika ukuran gambar di perkecil juga akan berpengaruh terhadap kuliatas gambar, bukankah jernih atau tidaknya suatu gambar tergantung dari ukuran gambar tersebut. Hal ini perlu di siasati dengan baik agar agar tetap utuh dan tampil maksimal seperti apa yang sudah dikehendaki dari sebelumnya. Namun banyak pula dari beberapa blogger yang seringkali mengabaikan ukuran gambar dan tetap mengupload gambar namun tidak memperhatikan berapa besar size gambar tersebut. Untuk meringankan beban load gambar didalam blog sebenarnya cukup mudah namun memang butuh sedikit waktu untuk melakukannya. Gunakan bantuan software Photoshop untuk mengatur kualitas gambar. Namun pada saat akan menyimpan gambar jangan langsung klik file lalu Save atau Save As, namun gunakan pilihan “Save for Web & Devices” maka disitu akan banyak pilihan tentang format file dan kualitas gambar yang akan anda simpan. Jika anda akan menyimpan menggunakan format JPEG maka dibawahnya akan terdapat opsi kualitas gambar mulai dari low, medium, high, dll. Entah itu format GIF, PNG, dll gunakan opsi kualitas gambar yang sesuai. Setelah gambar tersebut sudah di simpan, langkah berikutnya adalah mengupload gambar. Anda harus jeli pada saat akan mengupload gambar, perhatikan berapa besar size gambar yang akan di upload dan perhatikan dimana letak gambar tersebut akan ditaruh. Hal ini yang sering di abaikan sebagian blogger, terutama mereka yang menggunakan fitur slider didalam template blognya. Sekarang kita ketahui dimana anda akan menaruh gambar yang anda upload kemudian akan ditampilkannya. Jika gambar tersebut langsung anda upload ke hosting blogspot kemudian akan ditampilkan didalam postingan blog mungkin itu tidak terlalu menjadi masalah pada proses load gambar baik itu gambar berukuran kecil maupun besar. Namun bagaimana bagaimana jika gambar tersebut berukuran besar dan akan di tampilkan kedalam slider blog, apakah gambar tersebut bisa tampil dengan maksimal? Saya rasa tidak! sebut saja gambar tersebut memiliki ukuran lebih dari 80 KB. Jika pada slider terdapat 5 gambar yang ditampilkan dan masing-masing memiliki ukuran rata-rata 80 KB sudah pasti loading blog akan semakin lambat, bahkan masih untung jika gambar tersebut bisa langsung muncul secara cepat. Sebenarnya masih ada cara yang lebih baik lagi untuk mengupload dan mengambil URL gambar agar bisa tampil secara cepat di blog, terutama pada slider blog maupun seluruh gambar yang anda masukan kedalam template blog. Dengan mengupload gambar ke <a href="http://picasaweb.google.com/" rel="nofollow" target="_blank" title="Picasa Web Album">Picasa Web Album</a> bisa menjadi solusi yang tepat untuk mengatasi proses load gambar. Mengambil URL gambar dari Picasa Web Album akan sedikit lebih membantu speed load blog anda dalam menampilkan gambar secara cepat. <a href="https://support.google.com/blogger/answer/42394?hl=en" rel="nofollow" target="_blank" title="Google support">Google support </a>merekomendasikan cara ini untuk mengurangi beban load gambar yang terdapat didalam template blog yang anda gunakan, namun banyak juga blogger yang mengabaikan hal ini atau bahkan sebagian ada juga yang belum tahu sama sekali hal ini. Ini baru di lihat dari segi gambar, belum lagi jika ditambah dengan banyaknya kode maupun jumlah widget yang terdapat didalam template blog. Lamanya oading blog juga dapat dipengaruhi oleh jumlah posting yang ditampilkan pada halaman utama atau homepage blog anda. Untuk mengatasi hal tersebut anda dapat dengan mudah mengedit jumlah posting yang ditampilkan di halaman utama dari Setelan Pos dan Komentar pada dashboard blog. Sekarang kita tinjau dari segi CSS, copy seluruh kode CSS yang terdapat didalam template blog kemudian compress kode tersebut. Langkah berikutnya untuk mengetahui seberapa banyak jumlah kode yang error maupun tidak berfungsi didalam template blog silahkan tinjau di <a href="http://jigsaw.w3.org/css-validator/" rel="nofollow" target="_blank" title="CSS Validator">jigsaw.w3.org</a> dengan memasukan URL blog anda kemudian klik Check. Maka di situ akan menampilkan seluruh kode yang error atau tidak berfungsi didalam template blog anda. Selanjutnya anda bisa memperbaiki kode tersebut atau bisa juga menghapusnya jika tidak penting. Pada tahap ini sekaligus untuk memastikan template blog bahwa sudah valid CSS3. Setelah CSS terselesaikan dengan benar, sekarang optimalkan juga fungsi javascript. Browser cenderung memakan waktu lebih lama untuk membaca javascript di banding CSS. Apabila javascript di taruh pada bagian atas template blog maka browser akan terlebih dahulu membaca seluruh javascript yang ada, sedangkan sebelum proses loading tersebut selesai maka elemen lain juga harus menunggu sampai proses tersebut selesaikan baru elemen-elemen lain akan terbaca. Untuk mengatasi hal ini sebaiknya jika terdapat widget yang menggunakan javascript sebaiknya di taruh pada bagian bawah template blog. Namun apabila javascript ingin di muat secara eksternal maka usahakan untuk mengupload file javascript tersebut ke layanan host yang di gunakan secara pribadi dan jika ingin menggunakan layanan yang gratis gunakanlah layanan gratis dari google karena dapat memuat dengan cepat. Untuk melakukan semua langkah di atas juga butuh waktu dengan cukup menguras tenaga dan perlu ketelatenan. Namun jika yang anda lakukan sudah beres dan terselesaikan dengan rapi maka hasilnya bisa anda rasakan dan tentu bisa tergantikan. Untuk mengetahui speed loading sudah maksimal atau belom, anda bisa meninjau di <a href="http://developers.google.com/speed/pagespeed/insights/" rel="nofollow" target="_blank" title="Page Speed Insights">Google Insights</a> dengan memasukan URL blog anda kemudian klik Analyze.

Tips Trik Mempercepat Loading Blog - memang benar bahwa biasanya template blog dengan desain yang di sisipi gambar bervariasi terkadang mem...

Tips Meningkatkan Traffic Blog Dengan Facebook

Sunday, 8 September 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpeR_b99_g_nlbOkRYKDsFmD7cUv4C-zUgyn3NsMKOAUf4fkakrXVHJYAanjMuqfNMSaUuQwPVAJwzdyzgsHMurorAA49HwRfynbzATjvUJsIhj5HRIGj44-o0X3sL5hq7JUmgXPYx1R8/s1600/trafik-facebook.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Traffic Facebook" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpeR_b99_g_nlbOkRYKDsFmD7cUv4C-zUgyn3NsMKOAUf4fkakrXVHJYAanjMuqfNMSaUuQwPVAJwzdyzgsHMurorAA49HwRfynbzATjvUJsIhj5HRIGj44-o0X3sL5hq7JUmgXPYx1R8/s1600/trafik-facebook.jpg" title="Tips Meningkatkan Traffic Blog Dengan Facebook" width="540"/></a>Tips Meningkatkan Traffic Blog Dengan Facebook - Facebook merupakan salah satu situs jejaring sosial yang paling populer didalam media komunikasi dunia internet. Pengguna Facebook sangat banyak bahkan setiap kalangan memiliki akun Facebook baik itu usia anak, remaja maupun orang tua. Jejaring sosial Facebook memiliki sifat kepribadian seseorang, sehingga disitu banyak teman yang bisa kita jumpai. Setiap orang pasti memerlukan informasi dan Facebook bisa membantu untuk menemukan informasi tersebut dengan mengarahkan mereka menggunakan link-link yang mengarahkan dan mungkin bisa membantu apa yang sedang mereka cari. Apabila kita menemukan seseorang yang mempunyai kriteria tidak jauh berbeda seperti kita dalam artian sama-sama mempunyai aktifitas blogging, hal tersebut bisa kita manfaatkan untuk mendatangkan sejumlah lalu lintas ke blog. Berikut beberapa Tips Meningkatkan Traffic Blog Dengan Facebook sebagai upaya dalam mengarahkan visitor dan menjaring mereka kedalam blog. 1. Lengkapi Informasi Profil Pertimbangkan tujuan anda untuk membangun profil Facebook. Jika ingin menggunakannya sebagai alat untuk mengarahkan lalu lintas ke blog anda, maka anda perlu memastikan profil anda mengandung informasi untuk daya dukung dalam mengarahkan lalu lintas dengan menyertakan link blog anda. Hati-hati dengan foto, video, dan informasi pribadi yang anda publikasikan didalam Facebook. Untuk menggunakan Facebook sebagai alat untuk mengarahkan lalu lintas ke blog, anda harus memiliki banyak teman Facebook. 2. Perbanyak Teman Gunakan alat bantu pencarian untuk menemukan orang-orang di Facebook, anda dapat mencari berdasarkan nama, sekolah, perusahaan, dll. Jika anda menemukan orang yang sesuai dengan kriteria dan mungkin tertarik pada konten blog anda, kirimkan permintaan teman. 3. Buat Group Anda dapat membuat grup di Facebook dan mengundang orang atau teman-teman anda untuk bergabung. Namun jika itu membutuhkan waktu lama untuk mengundang banyak orang, anda dapat mengambil langkah efektif dengan mencari Group yang terkait dengan topik blog anda kemudian bergabung dengan Group tersebut dan selanjutnya aktif dalam percakapan yang terjadi di dalam Group tersebut. 4. Buat Fanspages Fitur Halaman Facebook merupakan cara yang bagus untuk menemukan jaringan dengan orang-orang di Facebook. Anda dapat membuat halaman fanspage kemudian cari orang sebanyak mungkin untuk mengikuti fanspage anda. Disitu anda bisa berkontak langsung dengan banyak orang dan terus update halaman status untuk menambahkan informasi yang menarik dan menjaga percakapan atau diskusi. 5. Hubungkan Akun Lain ke Profil Facebook Ada banyak piranti tersedia untuk membantu anda membangun sebuah profil Facebook yang besar atau halaman yang dapat mengarahkan lalu lintas secara langsung maupun tidak langsung ke blog anda. Luangkan waktu untuk menghubungkan akun Facebook anda dengan jejaring sosial lainnya seperti Twitter, Networked Blog, dll. Namun sebelumnya pastikan terlebih dahulu bahwa blog anda sudah terhubung dengan jaringan sosial tersebut, sehingga pada saat mempublikasikan artikel baru pada blog anda akan secara otomatis muncul pada jejaring sosial yang sudah terhubung. 6. Bersifat Aktif Agar usaha anda untuk mengarahkan lalu lintas ke blog bisa berjalan mulus, anda perlu secara aktif mengupdate status, berbagi konten, dan bergabung dalam percakapan. Dengan membangun hubungan dengan teman-teman anda di Facebook, secara tidak langsung juga dapat menumbuhkan trafik blog anda. 7. Perhatikan Sekeliling Jangan hanya menghabiskan waktu untuk memperbarui profil dan berbagi konten anda sendiri. Namun luangkan waktu juga untuk mengomentari status orang lain dan ikut kedalam percakapan, membagikan konten orang lain dan sebagainya. 8. Menyiasati Promosi Facebook Facebook memiliki sifat yang mengarah ke pribadi seseorang, tidak seperti LinkedIn yang bersandar lebih ke arah bisnis. Perlu berhati-hati dalam melakukan promosi di Facebook karena terlalu promosi juga seringkali justru akan di abaikan oleh orang lain. Maka dari itu anda bisa menyiasati dengan mencampurkan status dan konten antara informasi promosi dan menghibur.

Tips Meningkatkan Traffic Blog Dengan Facebook - Facebook merupakan salah satu situs jejaring sosial yang paling populer didalam media komu...

Tips Meningkatkan Kualitas Konten Blog

Friday, 6 September 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFMM4bxR-rEixaMgZLTQIXE7m1maz6ZGAZMxZoDAhsPnuG-KW6y3MRdLm2kt-an-M8gP0W5MHFnhk7j4dDqh8iywjpVt3NqM6jDX1u0sPThgzcXpJ3MOhC6o1WxwWhR1_Zx0SLRJK2bU/s1600/Cinemagraph+(149).gif" style="margin-left: 1em; margin-right: 1em;"><img alt="Tips Blogger" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFMM4bxR-rEixaMgZLTQIXE7m1maz6ZGAZMxZoDAhsPnuG-KW6y3MRdLm2kt-an-M8gP0W5MHFnhk7j4dDqh8iywjpVt3NqM6jDX1u0sPThgzcXpJ3MOhC6o1WxwWhR1_Zx0SLRJK2bU/s320/Cinemagraph+(149).gif" title="Tips Meningkatkan Kualitas Konten Blog" width="540"/></a>Tips Meningkatkan Kualitas Konten Blog - Ada berbagai perubahan sederhana yang dapat diperbuat untuk menulis posting blog yang dapat meningkatkan lalu lintas ke blog dan memiliki pengaruh yang signifikan terhadap pertumbuhan blog dalam jangka panjangnya. Selain mengandalkan trik <a href="http://mas-andes.blogspot.com/2013/03/8-tips-search-engine-optimization-seo.html" target="_blank" title="Tips Search Engine Optimization (SEO)">Search Engine Optimization (SEO)</a> untuk mendapatkan perhatian dari search engine seperti Google atau lainnya, fokus pada saat menulis posting juga sangat berpengaruh untuk meningkatkan potensi konten terhadap search engine yang tentu dapat mendatangkan trafik ke blog. Trik meningkatkan pengalaman dalam menulis dapat membuat konten blog lebih akrab terhadap setiap serach engine agar konten yang setiap di publikasikan tidak tersia-siakan, maka dengan adanya hal ini berikut adalah Tips Meningkatkan Kualitas Konten Blog dan membuat halaman blog agar lebih ramah search engine. 1. Spesifikasi Judul Sebuah judul yang menarik dan relevan adalah pilihan terbaik dalam memaksimalkan konten. Jika dalam judul posting saja sudah terdapat kata kunci, maka semakin baik pula konten tersebut di halaman hasil pencarian search engine. Ingat, relevansi harus selalu menjadi prioritas lebih tinggi daripada kata kunci. 2. Link Internal Hubungkan artikel terbaru yang sedang anda tulis kedalam halaman konten yang terkait. Hal ini bermaksud untuk mengangkat kembali prioritas konten yang lama dengan dihubungkannya kedalam konten yang lebih baru, konten yang bermanfaat jika dihubungkan melalui link internal dalam posting tentu juga akan lebih memudahkan pengunjung dalam menemukan halaman yang terkait dengan isi konten tersebut. Namun tidak hanya itu, menghubungkan setiap konten dengan <a href="http://mas-andes.blogspot.com/2013/02/8-tips-optimasi-link-internal-untuk.html" target="_blank" title="tips optimasi link internal">link internal</a> tentu juga dapat membantu optimasi search engine dalam menemukan dan menampilkannya pada halaman penelusuran, asalkan anda menghubungkannya ke konten internal yang berguna dan relevan. 3. Penempatan Link Internal Link internal yang terdapat di konten blog sangatlah penting, tetapi perlu diperhatikan juga untuk memasukkan dimana penempatan letak link internal tersebut. Sebaiknya link internal digunakan dalam tiga dari posting anda dan dengan penempatan yang di prioritaskan sebelum link eksternal digunakan. Sekali lagi, menempatkan link internal seimbang dan sesuai agar tidak merusak isi dari posting blog dengan memprioritaskan penempatan link. 4. Penggunaan Anchor Text Pada saat menghubungkan suatu halaman, hindari menggunakan satu <a href="http://mas-andes.blogspot.com/2013/02/5-tips-riset-keyword-atau-kata-kunci.html" target="_blank" title="tips riset kata kunci">kata kunci</a> yang sama atau frase kata kunci ke beberapa URL. Demikian pula, hindari menghubungkan suatu halaman yang bervariasi dari kata kunci yang sama ke URL yang sama. Search engine tidak menyukai salah satu dari taktik ini. Semakin konsisten dalam menghubungkan konten, semakin baik pula konten tersebut di dalam lalu lintas pencarian. 5. Batasi Jumlah Link Jangan menyebar link di dalam satu halaman posting. Tidak hanya membuat sulit bagi pengunjung untuk mengetahui link mana yang paling penting dan berguna, tetapi ini juga merupakan teknik spam yang tidak disukai oleh search engine. Gunakan penggunaan batas link (baik itu link internal maupun eksternal) untuk setiap link minimal berjarak 200 kata. 6. Optimalkan Gambar Mengambil sedikit waktu untuk memberi title gambar yang digunakan dalam posting dengan judul yang berguna dan menjelaskan apa dari isi gambar tersebut. Anda dapat memasukkan kata kunci kedalam title gambar secara spesifik. Ketika mengupload gambar, pastikan untuk selalu menambahkan Alt-Tag dan title gambar. Menggunakan <a href="http://mas-andes.blogspot.com/2013/03/5-trik-memaksimalkan-keyword-kata-kunci.html" target="_blank" title="trik memaksimalkan kata kunci">kata kunci</a> didalam Alt-Tag dan title gambar juga akan meningkatkan kualitas konten. 7. Jumlah Karakter Dalam menulis posting blog membutuhkan waktu yang cukup lama untuk menyediakan konten yang cukup baik untuk orang-orang dan search engine agar memahami keseluruhan konten yang anda tulis. Oleh karena itu, dalam menulis posting pastikan bahwa jumlah karakter kata yang anda gunakan cukup untuk membuat search engine dapat mengindeks, tetapi hindari menulis terlalu banyak sehingga orang tidak mau meluangkan waktu untuk membacanya. Usahakan setiap konten tidak kurang dari 500 karakter dan tidak lebih dari 900 karakter. 8. Terupdate dan Terjadwal Frekuensi posting blog mempengaruhi lalu lintas visitor secara signifikan. Tidak hanya search engine yang akan memberikan lebih banyak <a href="http://mas-andes.blogspot.com/2013/02/5-cara-blog-baru-untuk-dapatkan-lalu.html" target="_blank" title="cara mendatangkan lalu lintas ke blog">lalu lintas ke blog</a> dengan konten yang selalu up to date, melainkan akan lebih banyak juga orang yang akan membagikan konten tersebut kedalam jejaring sosial. 9. Kualitas Konten Ini unsur yang paling penting. Menulis konten berkualitas yang berguna untuk semua orang adalah diatas segalanya. Walaupun sudah menggunakan <a href="http://mas-andes.blogspot.com/2013/01/5-point-utama-taktik-dan-teknik-dasar.html" target="_blank" title="teknik dan taktik dasar SEO">trik SEO</a> tidak akan membantu jika konten berkualitas rendah. Perubahan algoritma Google dan rekomendasi para ahli SEO, satu hal yang akan tetap konstan adalah konten yang berkualitas tinggi. Konten berkualitas tinggi inilah yang akan terus mengarahkan lalu lintas ke blog.

Tips Meningkatkan Kualitas Konten Blog - Ada berbagai perubahan sederhana yang dapat diperbuat untuk menulis posting blog yang dapat mening...

Style Ribbon Email Subscribe Blogger

Tuesday, 23 July 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuLTuKMV57fpqCUHmddDRKWGoHKROGymWheN6F9hrnhp_VzJFnLq5wSUQ7Y4JwPL0NRPSbMtzGWqSNuom3mLUyrNuih1GdwY0h3wd_QcMj-2KyMASh5Ha4tWqnblJDyxdDcFEGuPzAfK8/s1600/modifikasi-email-subscribe.jpg" style="margin-left: 1em; margin-right: 1em;"><img class="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuLTuKMV57fpqCUHmddDRKWGoHKROGymWheN6F9hrnhp_VzJFnLq5wSUQ7Y4JwPL0NRPSbMtzGWqSNuom3mLUyrNuih1GdwY0h3wd_QcMj-2KyMASh5Ha4tWqnblJDyxdDcFEGuPzAfK8/s320/modifikasi-email-subscribe.jpg" /></a>Style Ribbon Email Subscribe Blogger – pada awalnya setiap menambahkan widget email subscribe dari feedburner kedalam blog memang masih terkesan biasa dan terlihat polos. Untuk membuat widget email subscribe agar terlihat tampil lebih cantik dengan sedikit custom menggunakan CSS dan agar lebih sesuai dengan sidebar pada template blog bisa dilakukan dengan cara yang mudah dan simple. Seperti biasa warna default yang saya gunakan menggunakan warna hijau terang namun apabila kurang sesuai nanti tinggal ganti dan sesuaikan saja dengan selera masing-masing. Cara penerapannya pada blog seperti biasa, tinggal masuk kedalam tata letak blog dan nantinya disitu bisa langsung add widget dan masukan kode yang tersedia dibawah dapat langsung dipastekan didalamnya dan kemudian menyimpannya. Apabila ingin menggunakan atau memasang ke blog masing-masing maka berikut adalah cara penerapannya untuk memasang Style Ribbon Email Subscribe Blogger yang sudah termodifikasi dan disertakan social media yang ada dibawahnya. 1. Login ke akun blogger seperti biasa. 2. Copy kode berikut ini dan ubah teks yang berwarna. <blockquote class="tr_bq" style="overflow: auto; height: 300px;"><style> .login { padding: 18px 10px; width: 300px; background: #e9fbe9; background-clip: padding-box; border: 1px solid #00ff00; } .login > h1 { margin: 0 -21px 20px -21px; font-size: 20px; font-family:Georgia; font-style:italic; font-weight: bold; text-align: center; color: #000; padding: 8px; background-color: #52e052; position: relative; text-shadow: 2px 0 0 darkgreen; } .login > h1:before { content: ' '; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: darkgreen transparent transparent transparent; } .login > h1:after { content: ' '; position: absolute; bottom: -10px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent darkgreen; } .txtsubscribe { background: #000; border: 1px solid #52e052; box-shadow: 1px 1px 4px #52e052 inset; color: #999; font-weight: bold; padding: 7px 15px 7px 5px; text-decoration: none; width: 160px; margin-top: 10px; } .btsubscribe { background: #52e052; border: 1px solid #00ff00; color: #000; cursor: pointer; font-weight: bold; margin-left: 5px; padding: 6px; text-decoration: none; margin-top: 10px; } .subscribe-faceblog{ list-style-type:none; margin:0; padding:0; } .subscribe-faceblog li{ display:inline; width: 60px; height:60px; } .subscribe-faceblog li img{ width: 40px; height: 40px; margin-right: 5px; -webkit-transition:-webkit-transform 0.1s ease-in; -o-transition:-o-transform 0.1s ease-in; } .subscribe-faceblog li img:hover{ -moz-transform:scale(1.8); -webkit-transform:scale(1.8); -o-transform:scale(1.8); } </style> <center> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=masandes', 'popupwindow', 'scrollbars=yes,width=520,height=520');return true" class="login"> <h1>LANGGANAN VIA EMAIL</h1> <ul class="subscribe-faceblog"> <li><a href="https://www.facebook.com/ID FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijKepv5-Hb9aQuxO8WOApTQDw6ysif6TCGGkdCN66eZPPoiG0eSKDequYt2gyemVRok44FOE0PY6oMwok_0ot_K8sqdsfFE2XhWz-NJxiZrg6uP5YARHsak4oWe7ubKlLM2oc6lRBT2NA/s1600/facebook+tng.png" title="Follow Us on Facebook" /></a></li> <li><a href="http://www.twitter/ID TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY4Oo2x7pUT017wlFYmGWmyVPKzP6QA68BnuHGCVbL9zydKKKCOXE7rVBXMec4uY9LvSlrTJUcip-xTbK0eVEq4IV67Z7CQAb1g_7vpWl7IOIa10b-dMY0xo88eE_szql6Ciik2d1I0CA/s1600/twitter+tng.png" title="Follow Us on Twitter" /></a></li> <li><a href="https://plus.google.com/ID GOOGLE+" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjs_-cmVlWbzHZ4SnIPpT6iW81RkBTEd3gwgkEIv-nUFTrsCgd1NmwCCUVTdtA9Sk_eEKRqgKgZC0Ukqf_aG-3x0BVLfHNiYlnmVZ-7ROGXkaxBMcYpOwvBM2q98RGP3p_xBvPgAcWck/s1600/google+tng.png" title="Follow Us on G+" /></a></li> <li><a href="http://feeds.feedburner.com/ID FEEDBURNER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFRwff0fl8n2GR_8u6XfJVMLFbbLoXZVpj8PNfFmyyiSMujbp6kvoMYOdJKbOY_uOnRVaS5rYR0dndE2TclZubOtkg5wcJ9ddSjjziSIdZbLy3LioGlP0njFC3dtLhT2-VcIGMwjX-qaA/s1600/rss+tng.png" title="Subscribe Us on RSS Feed" /></a></li> </ul> <input type="hidden" value="masandes" name="uri" /> <input class="txtsubscribe" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." /> <input type="hidden" name="loc" value="en_US" /> <input type="submit" value="Subscribe" class="btsubscribe" /> </form> </center></blockquote>Keterangan: Ubah tulisan warna merah dengan ID feedburner blog anda. Untuk lebar dan tingginya maupun background warna tinggal sesuaikan saja dengan selera masing-masing. DEMO: <style>.login { padding: 18px 10px; width: 300px; background: #e9fbe9; background-clip: padding-box; border: 1px solid #00ff00; } .login > h1 { margin: 0 -21px 20px -21px; font-size: 20px; font-family:Georgia; font-style:italic; font-weight: bold; text-align: center; color: #000; padding: 8px; background-color: #52e052; position: relative; text-shadow: 2px 0 0 darkgreen; } .login > h1:before { content: ' '; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: darkgreen transparent transparent transparent; } .login > h1:after { content: ' '; position: absolute; bottom: -10px; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent transparent darkgreen; } .txtsubscribe { background: #000; border: 1px solid #52e052; box-shadow: 1px 1px 4px #52e052 inset; color: #999; font-weight: bold; padding: 7px 15px 7px 5px; text-decoration: none; width: 160px; margin-top: 10px; } .btsubscribe { background: #52e052; border: 1px solid #00ff00; color: #000; cursor: pointer; font-weight: bold; margin-left: 5px; padding: 6px; text-decoration: none; margin-top: 10px; } .subscribe-faceblog{ list-style-type:none; margin:0; padding:0; } .subscribe-faceblog li{ display:inline; width: 60px; height:60px; } .subscribe-faceblog li img{ width: 40px; height: 40px; margin-right: 5px; -webkit-transition:-webkit-transform 0.1s ease-in; -o-transition:-o-transform 0.1s ease-in; } .subscribe-faceblog li img:hover{ -moz-transform:scale(1.8); -webkit-transform:scale(1.8); -o-transform:scale(1.8); } </style> <center><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=masandes', 'popupwindow', 'scrollbars=yes,width=520,height=520');return true" class="login"><h1>LANGGANAN VIA EMAIL</h1> <ul class="subscribe-faceblog"><li><a href="https://www.facebook.com/andestyle" target="_blank"><img alt="icon metro ui" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijKepv5-Hb9aQuxO8WOApTQDw6ysif6TCGGkdCN66eZPPoiG0eSKDequYt2gyemVRok44FOE0PY6oMwok_0ot_K8sqdsfFE2XhWz-NJxiZrg6uP5YARHsak4oWe7ubKlLM2oc6lRBT2NA/s1600/facebook+tng.png" title="Follow Us on Facebook"/></a></li><li><a href="#" target="_blank"><img alt="icon metro ui" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY4Oo2x7pUT017wlFYmGWmyVPKzP6QA68BnuHGCVbL9zydKKKCOXE7rVBXMec4uY9LvSlrTJUcip-xTbK0eVEq4IV67Z7CQAb1g_7vpWl7IOIa10b-dMY0xo88eE_szql6Ciik2d1I0CA/s1600/twitter+tng.png" title="Follow Us on Twitter"/></a></li><li><a href="https://plus.google.com/104093787575230359634" target="_blank"><img alt="icon metro ui" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjs_-cmVlWbzHZ4SnIPpT6iW81RkBTEd3gwgkEIv-nUFTrsCgd1NmwCCUVTdtA9Sk_eEKRqgKgZC0Ukqf_aG-3x0BVLfHNiYlnmVZ-7ROGXkaxBMcYpOwvBM2q98RGP3p_xBvPgAcWck/s1600/google+tng.png" title="Follow Us on G+"/></a></li><li><a href="http://feeds.feedburner.com/masandes" target="_blank"><img alt="icon metro ui" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFRwff0fl8n2GR_8u6XfJVMLFbbLoXZVpj8PNfFmyyiSMujbp6kvoMYOdJKbOY_uOnRVaS5rYR0dndE2TclZubOtkg5wcJ9ddSjjziSIdZbLy3LioGlP0njFC3dtLhT2-VcIGMwjX-qaA/s1600/rss+tng.png" title="Subscribe Us on RSS Feed"/></a></li></ul> <input type="hidden" value="masandes" name="uri" /><input class="txtsubscribe" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." /><input type="hidden" name="loc" value="en_US" /><input type="submit" value="Subscribe" class="btsubscribe" /></form></center> 3. Paste kode tersebut kedalam widget caranya seperti biasa, klik Tata Letak > Tambah Widget > HTML/Javascript. 3. Jika sudah, langkah terakhir adalah Simpan dan lihat hasilnya.

Style Ribbon Email Subscribe Blogger – pada awalnya setiap menambahkan widget email subscribe dari feedburner kedalam blog memang masih ter...

Cara Modifikasi Facebook Like Box Pada Blog

Saturday, 20 July 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNZRNUb_LkSxIXuktq4_Q4q5EfHjDmCb7kk1HTwui9lKRotWSZpnUuAXUdPH8zUE3SI9nqLMudeYy6-10VgrQtkY3NVflti34sIRsb7uEKB0kVmF3ZrgPvLAofipwVnmm7GcYqjQX15FI/s1600/modifikasi-facebook-like-box.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Modifikasi Facebook Like Box Pada Blog, fanspage facebook keren blogger" class="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNZRNUb_LkSxIXuktq4_Q4q5EfHjDmCb7kk1HTwui9lKRotWSZpnUuAXUdPH8zUE3SI9nqLMudeYy6-10VgrQtkY3NVflti34sIRsb7uEKB0kVmF3ZrgPvLAofipwVnmm7GcYqjQX15FI/s320/modifikasi-facebook-like-box.jpg" title="Cara Modifikasi Facebook Like Box Pada Blog" /></a>Cara Modifikasi Facebook Like Box Pada Blog – ini seperti tutorial sebelumnya pada <a href="http://mas-andes.blogspot.com/2013/07/cara-modifikasi-widget-google-badge.html" target="_blank" title="cara modifikasi widget Google+ follower">cara modifikasi widget Google+ follower</a> yakni untuk memberi efek background pada widget yang sedikit lebih menarik untuk dilihat dan ditampilkan kedalam blog agar tampil lebih keren pastinya. Hanya saja pada modifikasi facebook like box ini sedikit merubah kode pada class CSS sehingga agar nisa tampil lebih serasi. Untuk langkah penerapannya kedalam blog pun sangat mudah seperti layaknya memasang widget pada umumnya. Tentu sudah paham fungsi dari facebook like box pada blog ini, karena apabila semakin banyak yang subcribe tentu juga akan mendatangkan lalu lintas kedalam blog dan setiap artikel yang kita publikasikan didalam facebook juga akan lebih mudah banyak mengundang pengunjung. Apabila widget pada blog tertata dengan rapi dan dilihat juga enak tentunya pengunjung juga lebih mudah untuk subcribe bukan! Apabila ingin memasang widget facebook like box agar terlihat lebih keren, maka berikut adalah tutorial Cara Modifikasi Facebook Like Box Pada Blog dengan langkah yang simple. 1. Login ke akun blogger. 2. Copy kode berikut ini. <blockquote style="overflow:auto; height:200px;"><style> .likefaceblogevolutions { width: 280px; height: 150px; border-radius: 3px; position: relative; background: #E9FBE9; padding: 0px 10px 15px 0; } .likefaceblogevolutions,.likefaceblogevolutions:before,.likefaceblogevolutions:after { background: #E9FBE9; border: 1px solid #52E052; } .likefaceblogevolutions:before,.likefaceblogevolutions:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .likefaceblogevolutions:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #52E052; } </style> <div class="likefaceblogevolutions"> <div style="height:150px;overflow:hidden"> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fandestyle&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe> </div> </div></blockquote>DEMO <style>.likefaceblogevolutions { width: 280px; height: 150px; border-radius: 3px; position: relative; background: #E9FBE9; padding: 0px 10px 15px 0; } .likefaceblogevolutions,.likefaceblogevolutions:before,.likefaceblogevolutions:after { background: #E9FBE9; border: 1px solid #52E052; } .likefaceblogevolutions:before,.likefaceblogevolutions:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .likefaceblogevolutions:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #52E052; } </style><div class="likefaceblogevolutions"><div style="height:150px;overflow:hidden"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fandestyle&width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe></div></div> Keterangan: Untuk tinggi lebar dan warna background silahkan anda sesuaikan sendiri dengan yang di inginkan. Ubah andestyle dan ganti dengan ID facebook atau fanspage anda. 3. Selanjtunya tinggal memasang kedalam widget blog dan langkahnya seperti biasa, klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.

Cara Modifikasi Facebook Like Box Pada Blog – ini seperti tutorial sebelumnya pada cara modifikasi widget Google+ follower yakni untuk mem...

Cara Modifikasi Widget Google+ Badge Pada Blog

Friday, 19 July 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXrPVQsM0B9XQAsrKeyW6km20KPeGPx2eaWzMlykK6O3blG14Y1TsAXBQNhhVuznKFXLbEVVBFG0kmXcHFugy8fFVZtpdlcQQkQZu6n422eKRSmNGvLW3J4zXWG-8fSr3Q3sgIUUMP82c/s1600/modifikasi-widget-google+.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Modifikasi Widget Google+ Badge Pada Blog" class="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXrPVQsM0B9XQAsrKeyW6km20KPeGPx2eaWzMlykK6O3blG14Y1TsAXBQNhhVuznKFXLbEVVBFG0kmXcHFugy8fFVZtpdlcQQkQZu6n422eKRSmNGvLW3J4zXWG-8fSr3Q3sgIUUMP82c/s320/modifikasi-widget-google+.jpg" title="Cara Modifikasi Widget Google+ Badge Pada Blog" /></a>Cara Modifikasi Widget Google+ Badge Pada Blog – untuk memasang widget badge Google+ dengan modifikasi yang simple supaya tampilan lama dari widget Google+ yang sudah terpasang di blog anda terlihat lebih menarik bisa dilakukan dengan cara yang mudah. Dengan menambahkan sedikit custom style CSS maka widget Google+ pun siap terpasang dan mempercantik widget pada <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" target="_blank" title="membuat sidebar blog dengan efek ribbon">sidebar blog</a>. Untuk memodifikasi widget Google+ ini terdapat 2 pilihan yang nantinya dapat anda gunakan yang kiranya serasi untuk diterapkan kedalam blog. Pada tampilan pertama dengan gaya seperti widget Google+ lama yakni dengan adanya thumbnail foto dari <a href="http://mas-andes.blogspot.com/2013/05/membuat-follower-di-menu-blog.html" target="_blank" title="membuat follower di menu blog">follower </a>anda dan yang kedua hanya menampilkan profil foto Google+ dan data jumlah <a href="http://mas-andes.blogspot.com/2013/07/cara-membuat-widget-follower-blog.html" target="_blank" title="membuat widget follower blog tampil di postingan">follower </a>anda. Untuk tampilan lengkapnya bisa dilihat pada demo yang terdapat dibawah kode. Supaya tidak berlama-lama, berikut adalah tutorial Cara Modifikasi Widget Google+ Badge Pada Blog: 1. Login ke akun blogger. 2. Copy pilihan kode berikut ini. Style 1: <blockquote style="height: 200px; overflow: auto;"><style> .googlefaceblogevolutions { width: 280px; height: 160px; border-radius: 3px; position: relative; background: #52E052; padding: 10px; } .googlefaceblogevolutions,.googlefaceblogevolutions:before,.googlefaceblogevolutions:after { background: #52E052; border: 1px solid #00ff00; } .googlefaceblogevolutions:before,.googlefaceblogevolutions:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .googlefaceblogevolutions:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #00ff00; } </style> <div class="googlefaceblogevolutions"> <div style="height:155px;overflow:hidden"> <div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/104093787575230359634" data-source="blogger:blog:followers" data-width="300"> </div> <script type="text/javascript"> (function() { window.___gcfg = {'lang': 'en'}; var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> </div></blockquote>Demo <style>.googlefaceblogevolution { width: 280px; height: 160px; border-radius: 3px; position: relative; background: #52E052; padding: 10px; } .googlefaceblogevolution,.googlefaceblogevolution:before,.googlefaceblogevolution:after { background: #52E052; border: 1px solid #00ff00; } .googlefaceblogevolution:before,.googlefaceblogevolution:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .googlefaceblogevolution:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #00ff00; } </style><div class="googlefaceblogevolution"><div style="height:155px;overflow:hidden"><div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/104093787575230359634" data-source="blogger:blog:followers" data-width="300"></div><script type="text/javascript">(function() { window.___gcfg = {'lang': 'en'}; var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script></div></div> Style 2: <blockquote style="height: 200px; overflow: auto;"><style> .googlefaceblogevolutions { width: 280px; height: 105px; border-radius: 3px; position: relative; background: #52E052; padding: 10px; } .googlefaceblogevolutions,.googlefaceblogevolutions:before,.googlefaceblogevolutions:after { background: #52E052; border: 1px solid #00ff00; } .googlefaceblogevolutions:before,.googlefaceblogevolutions:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .googlefaceblogevolutions:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #00ff00; } </style> <div class="googlefaceblogevolutions"> <div style="height:155px;overflow:hidden"> <div class="g-person" data-href="//plus.google.com/104093787575230359634" data-theme="dark" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div> <script type="text/javascript">   (function() {     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;     po.src = 'https://apis.google.com/js/plusone.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);   })(); </script> </div> </div></blockquote>Demo <style>.googlefaceblogevolutions { width: 280px; height: 105px; border-radius: 3px; position: relative; background: #52E052; padding: 10px; } .googlefaceblogevolutions,.googlefaceblogevolutions:before,.googlefaceblogevolutions:after { background: #52E052; border: 1px solid #00ff00; } .googlefaceblogevolutions:before,.googlefaceblogevolutions:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; } .googlefaceblogevolutions:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #00ff00; } </style><div class="googlefaceblogevolutions"><div style="height:155px;overflow:hidden"><div class="g-person" data-href="//plus.google.com/104093787575230359634" data-theme="dark" data-layout="landscape" data-showcoverphoto="false" data-rel="author"></div> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script></div></div> Keterangan: Untuk tinggi lebar dan warna silahkan anda sesuaikan sendiri dengan yang di inginkan. Ubah 104093787575230359634 dan ganti dengan ID Google+ anda. 3. Selanjtunya tinggal memasang kedalam widget blog dan langkahnya seperti biasa, klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian klik Simpan.

Cara Modifikasi Widget Google+ Badge Pada Blog – untuk memasang widget badge Google+ dengan modifikasi yang simple supaya tampilan lama dar...

Membuat Follower di Menu Blog

Saturday, 13 July 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitYFJ5HifS21PRy32hadgJ0iFA_0XKT03fPnM2flvTleCP9MdRmsv9dDYMDCC_pzG_ZzJJjgLElRGdbgGMM0BQt3BhNaIWGH_pnS3NAbZqvNHQiCGtjiX5YlliTGy-ow0cW4GSDR43wM/s1600/Follower-di-Menu-Blog.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Follower di Menu Blog" class="gambar" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitYFJ5HifS21PRy32hadgJ0iFA_0XKT03fPnM2flvTleCP9MdRmsv9dDYMDCC_pzG_ZzJJjgLElRGdbgGMM0BQt3BhNaIWGH_pnS3NAbZqvNHQiCGtjiX5YlliTGy-ow0cW4GSDR43wM/s320/Follower-di-Menu-Blog.jpg" title="Membuat Follower di Menu Blog" width="320" /></a>Membuat Follower di Menu Blog – setelah pada tutorial sebelumnya kita membahas untuk <a href="http://mas-andes.blogspot.com/2013/07/cara-membuat-widget-follower-blog.html" target="_blank" title="cara membuat follower blog tampil di postingan">cara membuat follower blog tampil di postingan</a> maka sekarang giliran untuk membuat follower blog agar dapat terpasang di menu utama blog, atau lebih tepatnya memasang follower pada menu navigasi blog. Jika pada widget follower terpasang pada postingan juga lebih sama seperti widget follower semula yang terpasang pada sidebar yakni dengan dilengkapi foto dari follower blog tersebut, maka pada tutorial ini follower akan terdapat di <a href="http://mas-andes.blogspot.com/2013/05/membuat-mega-menu-drop-down-css3-di-blog.html" target="_blank" title="membuat mega menu drop down CSS3 di blog">menu blog</a> dan nantinya pada saat ada pengunjung blog yang akan follow blog anda bisa langsung klik pada bagian menu navigasi follower yang disediakan. Namun satu kekurangan dari follower di menu blog pada tutorial ini adalah tidak adanya foto follower yang akan ditampilkan. Salah satu sebab tidak ditampilkannya foto follower blog adalah untuk mempercepat waktu loading blog sehingga nanti pengunjung membuka blog anda tidak perlu memakan waktu untuk load foto-foto dari banyaknya follower blog anda. Agar lebih jelas dan spesifiknya, berikut adalah tutorial cara Membuat Follower di Menu Blog: 1. Login ke akun blogger. 2. Lalu copy kode berikut ini: <blockquote><a href='http://www.blogger.com/follow-blog.g?blogID=764364485157009260' target="_blank">Follow Blog</a></blockquote>Keterangan: Ganti 764364485157009260 dengan ID blog anda. 3. Pasang kode tersebut kedalam navigasi menu blog anda dan Simpan lalu lihat hasilnya. Sebenarnya tidak harus di pasang kedalam menu saja, melainkan mau ditaruh dimana saja yang anda suka juga bisa. Apabila ingin menggunakan gambar juga bisa, maka caranya copy kode dibawah ini: <blockquote><a href='http://www.blogger.com/follow-blog.g?blogID=764364485157009260' target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieccStwH3oTxQ67kLKhShclZ9qcIOwjPRFc8m1Pm_uhQtQIzPz-4K-dNbICRFamtNSxqBWyJbZUz8pib9pg3SSb8GPc1lATOEQm2jzVn6fWLfltKLp6yG8nbzOzXy5Ih3QWIkAEis8o8Q/h84/faceblog-evolutions.gif" alt="follow" title="Join This Site"/></a></blockquote>Hasilnya akan seperti ini <a href='http://www.blogger.com/follow-blog.g?blogID=764364485157009260' target="_blank"><img alt="follow" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieccStwH3oTxQ67kLKhShclZ9qcIOwjPRFc8m1Pm_uhQtQIzPz-4K-dNbICRFamtNSxqBWyJbZUz8pib9pg3SSb8GPc1lATOEQm2jzVn6fWLfltKLp6yG8nbzOzXy5Ih3QWIkAEis8o8Q/h84/faceblog-evolutions.gif" title="Join This Site"/></a> Silahkan di klik. Lalu taruh dimanapun tempat yang anda suka, bisa di sidebar maupun dipostingan tinggal selera yang anda inginkan saja. Jangan lupa untuk mengganti ID blog, untuk melihat ID blog dengan mudah bisa lihat di dashboard blog anda lalu copy pada address bar browser. Sebagai contoh dari blog saya seperti ini: <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMnQdEjKW5fZCJ_KV7AcuKQfKJ5qGy7tIbne43i4k8NhNHBjtwxwqaHvUCJDfI9J4XEoNsJQ0fQgGDY-wK0kq3WDMxXxPIj-dEU_Lg5iANrbKU9W1twSyZabnPz0rhFYBm1zTSxoVLvUg/s1600/ID-Faceblog-Evolutions.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Follower di Menu Blog" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMnQdEjKW5fZCJ_KV7AcuKQfKJ5qGy7tIbne43i4k8NhNHBjtwxwqaHvUCJDfI9J4XEoNsJQ0fQgGDY-wK0kq3WDMxXxPIj-dEU_Lg5iANrbKU9W1twSyZabnPz0rhFYBm1zTSxoVLvUg/s320/ID-Faceblog-Evolutions.jpg" title="Membuat Follower di Menu Blog" width="540" /></a>

Membuat Follower di Menu Blog – setelah pada tutorial sebelumnya kita membahas untuk cara membuat follower blog tampil di postingan maka s...

Cara Membuat Widget Follower Blog Tampil di Postingan

Thursday, 11 July 2013

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQM1yT21gO4juJ20-2mxIeoMbXkQMI2jolZ6MGpqLfBPQ1G_Rb7YTQHbpI3eSpRz4Yv2DQVEqbvYgE0-szjJ8F8qsUP2csCT63se7uexHkRQoiwKQjCkOnRkyqGcRHFBABRkrChTQgamw/s1600/follower-blog-valid-html5.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="widget follower blog valid html5" class="gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQM1yT21gO4juJ20-2mxIeoMbXkQMI2jolZ6MGpqLfBPQ1G_Rb7YTQHbpI3eSpRz4Yv2DQVEqbvYgE0-szjJ8F8qsUP2csCT63se7uexHkRQoiwKQjCkOnRkyqGcRHFBABRkrChTQgamw/s320/follower-blog-valid-html5.jpg" title="Cara Membuat Widget Follower Blog Tampil di Postingan" /></a>Cara Membuat Widget Follower Blog Tampil di Postingan – dari mayoritas blogger mungkin lebih mempertanyakan bagaimana untuk membuat widget follower blog agar valid HTML5, namun tutorial tersebut saya yakin pasti sudah banyak blogger yang membahas dan apabila mencari di search engine juga sudah dapat dipastikan pada halaman serp akan menampilkan banyak blog yang menyediakan tutorial tersebut. Namun pada tutorial ini widget follower blog tidak Cuma <a href="http://mas-andes.blogspot.com/2013/06/trik-optimasi-meta-tag-seo-valid-html5.html" target="_blank" title="trik optimasi meta tag SEO valid HTML5">valid HTML5</a> saja, melainkan juga agar dapat ditampilkan kedalam <a href="http://mas-andes.blogspot.com/2013/03/5-trik-memaksimalkan-keyword-kata-kunci.html" target="_blank" title="trik memaksimalkan keyword pada posting blog">posting blog</a>. Kenapa bisa begini dan apa manfaat dari widget follower di pasang kedalam <a href="http://mas-andes.blogspot.com/2013/03/7-tips-membuat-posting-blog-shareable.html" target="_blank" title="tips membuat posting blog shareble">posting blog</a>? Ini bukan hanya untuk membuat agar follower blog valid HTML5, melainkan dapat diketahui pada screenshot dibawah ini: <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZRLVRvbahVY33zzGqFefKEPma8QZLB5PdSM5L3rOACX2NR-OhWMOttP-Grkj5C2R8Mz3ZSs7qn2IiFN1SDBZXk_vMB95AyPrQSaBw5arQpaIHkHbk-4joL7BlBu-DitrXa75qJVazGQ/s1600/widget-follower-blog-valid-html5.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="widget follower blog valid html5" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZRLVRvbahVY33zzGqFefKEPma8QZLB5PdSM5L3rOACX2NR-OhWMOttP-Grkj5C2R8Mz3ZSs7qn2IiFN1SDBZXk_vMB95AyPrQSaBw5arQpaIHkHbk-4joL7BlBu-DitrXa75qJVazGQ/s320/widget-follower-blog-valid-html5.jpg" title="Cara Membuat Widget Follower Blog Tampil di Postingan" width="540" /></a>Setelah tahu kegunaan maupun manfaat dari widget follower blog valid HTML5 dan oleh sebab kemungkinan lain yakni untuk mengirit widget pada <a href="http://mas-andes.blogspot.com/2013/06/membuat-efek-ribbon-pada-sidebar-blog.html" target="_blank" title="membuat efek ribbon pada sidebar blog">sidebar </a>maupun footer blog, maka berikut adalah tutorial untuk Cara Membuat Widget Follower Blog Tampil di Postingan dengan langkah yang cukup mudah. 1. Login ke akun blogger. 2. Lalu copy kode berikut ini: <blockquote><script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script> <div id="div-7w5ths5ahnit"></div> <script type="text/javascript"> var skin = {}; skin['BORDER_COLOR'] = '#transparent'; skin['ENDCAP_BG_COLOR'] = '#transparent'; skin['ENDCAP_TEXT_COLOR'] = '#000000'; skin['ENDCAP_LINK_COLOR'] = '#000000'; skin['ALTERNATE_BG_COLOR'] = '#transparent'; skin['CONTENT_BG_COLOR'] = '#transparent'; skin['CONTENT_LINK_COLOR'] = '#000000'; skin['CONTENT_TEXT_COLOR'] = '#000000'; skin['CONTENT_SECONDARY_LINK_COLOR'] = '#FFFFFF'; skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#000000'; skin['CONTENT_HEADLINE_COLOR'] = '#000000'; skin['NUMBER_ROWS'] = '2'; google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */); google.friendconnect.container.renderMembersGadget(  { id: 'div-7w5ths5ahnit',    site: '10916685731781888212' },   skin); </script></blockquote>Keterangan: Pada skin['NUMBER_ROWS'] = '2'; angka 2 disitu adalah jumlah baris follower yang akan di tampilkan. Ubah tulisan warna merah dan ubah juga tulisan yang berwarna biru untuk menyesuaikan warna dengan template blog anda, agar lebih praktis dan sama dengan widget follower yang sudah ada sebelumnya silahkan pada halaman blog anda tekan CTRL+U atau bisa juga dengan klik kanan mouse lalu pilih View Page Source. Selanjutnya akan tampil pop up dari page source blog anda, disitu tinggal anda cari kode sebagai contoh pada blog saya seperti berikut ini: <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzOv3gs7Q_EjHWpPPnBB85_W5JO-FA_cD7FNsMw3kRFPer_XPXdb2wYPWCq3agYr1sThsqEH7AXSDa_3AUEOJ-sx8SawThYjDpfzFAf9CJ3sgWEZG9Rre_r08RIylX7lDt9K8Gm8ukOE/s1600/source-code-follower-blog.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="widget follower blog valid html5" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYzOv3gs7Q_EjHWpPPnBB85_W5JO-FA_cD7FNsMw3kRFPer_XPXdb2wYPWCq3agYr1sThsqEH7AXSDa_3AUEOJ-sx8SawThYjDpfzFAf9CJ3sgWEZG9Rre_r08RIylX7lDt9K8Gm8ukOE/s320/source-code-follower-blog.jpg" title="Cara Membuat Widget Follower Blog Tampil di Postingan" width="540" /></a><blockquote><div id="div-7w5ths5ahnit"></div> <script type="text/javascript"> var skin = {}; skin['BORDER_COLOR'] = '#000000'; skin['ENDCAP_BG_COLOR'] = '#000000'; skin['ENDCAP_TEXT_COLOR'] = '#000000'; skin['ENDCAP_LINK_COLOR'] = '#000000'; skin['ALTERNATE_BG_COLOR'] = '#transparent'; skin['CONTENT_BG_COLOR'] = '#transparent'; skin['CONTENT_LINK_COLOR'] = '#000000'; skin['CONTENT_TEXT_COLOR'] = '#000000'; skin['CONTENT_SECONDARY_LINK_COLOR'] = '#FFFFFF'; skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#000000'; skin['CONTENT_HEADLINE_COLOR'] = '#000000'; skin['NUMBER_ROWS'] = '2'; google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */); google.friendconnect.container.renderMembersGadget(  { id: 'div-7w5ths5ahnit',    site: '10916685731781888212' },   skin); </script></blockquote>Agar mempermudah pencarian gunakan CTRL+F lalu ketik nama judul widget follower yang sudah ada. Selanjutnya tinggal samakan saja kode-kodenya. Langkah terakhir untuk memasang widget follower kedalam <a href="http://mas-andes.blogspot.com/2013/02/3-tips-menulis-posting-blog-instan.html" target="_blank" title="tips menulis posting blog instan">posting blog</a> maka paste kode tersebut kedalam area posting mode HTML, bukan Compose. Sampai disini selesai untuk membuat widget follower blog tampil di postingan dan valid HTML5, dan widget lama yang terdapat di <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-blog-dengan-efek-ribbon.html" target="_blank" title="membuat sidebar blof dengan efek ribbon">sidebar </a>maupun footer bisa di hapus. Sedangkan nantinya apabila ingin merubah kembali widget follower untuk di pasang kedalam <a href="http://mas-andes.blogspot.com/2013/06/membuat-sidebar-ribbon-pada-blog.html" target="_blank" title="membuat sidebar ribbon pada blog">sidebar blog</a> lagi, maka langkahnya seperti bisa pada saat akan menambah widget yakni klik Tata Letak > Tambah Widget > HTML/Javascript lalu paste kode tersebut kemudian Simpan.

Cara Membuat Widget Follower Blog Tampil di Postingan – dari mayoritas blogger mungkin lebih mempertanyakan bagaimana untuk membuat widget ...

Cara Membuat Iklan Seperti Google Adsense

Friday, 28 June 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSg7MTi5Yxi2JVcOf91_dxgw449RWpBgKjs6bSm71HJdNFbfIs55EDUEkq6bT6QH-vktLFvBOZqsGD6pFAs07X53cPbpvNrmKxmkHcXXltJJGulgDCfWa1wjGae2srhgF9tbRoPi4RbeU/s600/iklan-seperti-google-adsense.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Iklan Seperti Google Adsense" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSg7MTi5Yxi2JVcOf91_dxgw449RWpBgKjs6bSm71HJdNFbfIs55EDUEkq6bT6QH-vktLFvBOZqsGD6pFAs07X53cPbpvNrmKxmkHcXXltJJGulgDCfWa1wjGae2srhgF9tbRoPi4RbeU/s320/iklan-seperti-google-adsense.jpg" title="Cara Membuat Iklan Seperti Google Adsense" width="320" /></a></div><div style="text-align: justify;">Cara Membuat Iklan Seperti Google Adsense – tentu anda sering menjumpai blog yang menggunakan iklan pada blognya yang mirip seperti google adsense. Untuk membuat iklan pada sebuah blog dengan menggunakan gaya yang layaknya seperti google adsense di blog bisa dilakukan dengan sangat mudah. Jika blog anda sudah pernah di daftarkan ke google adsense namun belum juga di approve maka sebagai gantinya ini bisa menjadi solusi yang efektif apabila anda ingin memasang iklan pada sidebar maupun bagian lainnya pada blog anda. Sangat mudah bukan, tanpa perlu mendaftarkan blog ke google adsense dahulu namun bisa memasang iklan di blog yang mirip seperti google adsense tanpa harus menunggu di approve terlebih dahulu. Inilah letak kreatif blogger dimana perjuangannya untuk mendaftarkan blog ke google adsense namun selalu gagal. Walaupun demikian masih juga memaksa untuk memasang iklan yang seperti google adsense walau tanpa mendapat bayaran dan hanya sekedar tiruan belaka. Oleh sebab itu saya sarankan jika ingin memasang iklan di blog tidak harus menggunakan google adsense jika terlalu lama menunggu approve, namun berikut adalah tutorial Cara Membuat Iklan Seperti Google Adsense. 1. Login ke akun blogger. 2. Copy kode dibawah ini.</div><blockquote class="tr_bq"><div style="font: 11px verdana; border: 1px solid blue; color: black; background-color:white; padding: 10px; width:250px; height:280px;"> <a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;"> Faceblog Evolutions </a> Tutorial Blog | SEO | HTML | CSS | jQuery <a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;"> http://mas-andes.blogspot.com </a> <a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;"> Faceblog Evolutions </a> Tutorial Blog | SEO | HTML | CSS | jQuery <a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;"> http://mas-andes.blogspot.com </a> <a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;"> Faceblog Evolutions </a> Tutorial Blog | SEO | HTML | CSS | jQuery <a href="#" target="_blank" style="color:green;"> http://mas-andes.blogspot.com </a> <a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;"> Faceblog Evolutions </a> Tutorial Blog | SEO | HTML | CSS | jQuery <a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;"> http://mas-andes.blogspot.com </a> <a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;"> Faceblog Evolutions </a> Tutorial Blog | SEO | HTML | CSS | jQuery <a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;"> http://mas-andes.blogspot.com </a> <a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" style="color:blue;"> Ads by </a>Faceblog Evolutions </div></blockquote><div style="text-align: justify;">3. Kemudian klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut. Jika ingin membuat iklan tersebut bisa melayang disisi kanan blog maka gunakan kode dibawah ini:</div><blockquote class="tr_bq"><style type="text/css"> #melayang{ position:fixed; top:10px; z-index:+1000; } html #melayang{position:relative;} .melayangcontent{ float:right; border:2px solid #52e052; background:#ffffff; padding:10px; } </style> <script type="text/javascript"> function showHideGB(){ var melayang = document.getElementById("melayang"); var w = melayang.offsetWidth; melayang.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); melayang.opened = !melayang.opened; } function moveGB(x0, xf){ var melayang = document.getElementById("melayang"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; melayang.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="melayang"> <div class="melayangtab" onclick="showHideGB()"> </div> <div class="melayangcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> PASTE KODE YANG TADI TARUH DISINI <script type="text/javascript"> var melayang = document.getElementById("melayang"); melayang.style.center = (30-melayang.offsetWidth).toString() + "px"; </script></center></div></div></blockquote><div style="text-align: justify;"></div>

Cara Membuat Iklan Seperti Google Adsense – tentu anda sering menjumpai blog yang menggunakan iklan pada blognya yang mirip seperti google ...

Trik Optimasi Meta Tag SEO Valid HTML5

Thursday, 27 June 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWwwZ1H4SQdNaHZAwS3vz70SQj7hRj7iUp7BvIDryTdDSbr4l2eO9oLoFsMDjrZG0HK2SHdIh61P4RvQfhc04VEp9hG3NG-pC0pvqHafK3ydYAmsSiIIjJ-nI2zY6ZJV6dAQKpuQRk0E/s1600/meta-tag-seo-valid-html5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Meta Tag SEO HTML5" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWwwZ1H4SQdNaHZAwS3vz70SQj7hRj7iUp7BvIDryTdDSbr4l2eO9oLoFsMDjrZG0HK2SHdIh61P4RvQfhc04VEp9hG3NG-pC0pvqHafK3ydYAmsSiIIjJ-nI2zY6ZJV6dAQKpuQRk0E/s320/meta-tag-seo-valid-html5.jpg" title="Trik Optimasi Meta Tag SEO Valid HTML5" width="320" /></a></div><div style="text-align: justify;">Trik Optimasi Meta Tag SEO Valid HTML5 – dalam sebuah web atau blog fungsi meta tag tentu sangat penting dan diperlukan untuk lebih memaksimalkan potensi SEO dari sebuah web atau blog itu sendiri agar lebih ramah search engine. Meta tag sendiri terdapat banyak macam dan bervariasi yang tentunya setiap blog juga berbeda-beda. Untuk melakukan optimasi SEO tentunya tidak hanya dilakukan dengan satu cara, melainkan banyak trik yang perlu dilakukan untuk membuat sebuah blog agar lebih SEO Friendly untuk mendekati search engine agar bisa memprioritaskan blog kita pada halaman utamanya. Untuk memulai hal itu maka sedikit trik sederhana ini mungkin bisa sedikit membantu tentang cara optimasi sebuah template blog dengan menggunakan meta tag yang lebih SEO dan khususnya valid HTML5. Hal ini juga tentunya untuk sedikit mengurangi kesalahan eror yang terdapat pada template blog yang anda gunakan jika di cek pada W3C Validator dan masih terdapat kesalahan eror pada meta tag. Untuk mengurangi kesalahan eror tersebut setidaknya bisa meminimalisir banyaknya eror yang sudah ada dari sebelumnya, maka kode yang terdapat dibawah paling tidak bisa memberi anda menjadi sedikit lebih lega dan bisa mengatasi timbulnya eror yang terjadi pada meta tag. Walopun keberadaan meta tag sekarang mungkin kurang disenangi oleh search engine, namun meta tag sendiri masih bisa digunakan untuk fungsi lain yang salah satunya yaitu untuk memberikan informasi dari sebuah web atau blog itu sendiri kepada pengunjung elektronik untuk berbagai tujuan. Oleh sebab itu jika diantara ada yang masih menggunakan menggunakan meta tag dan belum valid akan HTML5 sekiranya akan membuat sedikit perubahan mengenai penampilan meta tag pada templte blog yang anda gunakan, maka berikut adalah tata cara sederhana tentang Trik Optimasi Meta Tag SEO Valid HTML5 untuk memaksimalkan potensi SEO blog yang anda kelola. 1. Login ke akun blogger. 2. Copy kode dibawah ini.</div><blockquote class="tr_bq"><meta charset='utf-8'/> <link href='http://nama-blog.blogspot.com' rel='canonical'/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/> DESKRIPSI SINGKAT BLOG </title> <b:else/><title><data:blog.pageName/> | <data:blog.title/></title> </b:if> <meta content='DESKRIPSI BLOG ANDA' name='description'/> <meta content='KEYWORD1, KEYWORD2, KEYWORD3' name='keywords'/> <meta content='index, follow' name='robots'/> <meta content='KODE VERIFIKASI GOOGLE' name='google-site-verification'/> <meta content='KODE VERIFIKASI BING' name='msvalidate.01'/> <meta content=KODE VERIFIKASI ALEXA' name='alexaVerifyID'/> <meta content='2 days' name='revisit-after'/> <meta content='general' name='rating'/> <meta content='id' name='geo.country'/> <meta content='Indonesia' name='geo.placename'/> <meta content='NAMA AUTHOR' name='author'/> <meta content='all' name='Slurp'/> <meta content='width=device-width' name='viewport'/> <link href='http://nama-blog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/> <link href='http://nama-blog.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/> <link href='http://nama-blog.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/> <link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/> <link href='http://nama-blog.blogspot.com' rel='openid.delegate'/></blockquote><div style="text-align: justify;">3. Kemudian klik Template >> Edit HTML lalu paste kode tersebut diantara kode:</div><blockquote class="tr_bq"><head> Disini letak kode diatas <b:skin><![CDATA[</blockquote><div style="text-align: justify;">4. Sehingga tampilan kode secara lengkap akan menjadi seperti dibawah ini:</div><blockquote class="tr_bq"><head> <meta charset='utf-8'/> <link href='http://nama-blog.blogspot.com' rel='canonical'/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/> DESKRIPSI SINGKAT BLOG </title> <b:else/><title><data:blog.pageName/> | <data:blog.title/></title> </b:if> <meta content='DESKRIPSI BLOG ANDA' name='description'/> <meta content='KEYWORD1, KEYWORD2, KEYWORD3' name='keywords'/> <meta content='index, follow' name='robots'/> <meta content='KODE VERIFIKASI GOOGLE' name='google-site-verification'/> <meta content='KODE VERIFIKASI BING' name='msvalidate.01'/> <meta content=KODE VERIFIKASI ALEXA' name='alexaVerifyID'/> <meta content='2 days' name='revisit-after'/> <meta content='general' name='rating'/> <meta content='id' name='geo.country'/> <meta content='Indonesia' name='geo.placename'/> <meta content='NAMA AUTHOR' name='author'/> <meta content='all' name='Slurp'/> <meta content='width=device-width' name='viewport'/> <link href='http://nama-blog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/> <link href='http://nama-blog.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/> <link href='http://nama-blog.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/> <link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/> <link href='http://nama-blog.blogspot.com' rel='openid.delegate'/> <b:skin><![CDATA[</blockquote><div style="text-align: justify;">Bahwa dengan menggunakan Trik Optimasi Meta Tag SEO Valid HTML5 ini bukan berarti jaminan untuk blog anda akan selalu berada di page one serp google maupun search engine populer lainnya. Melainkan ini hanya salah satu upaya untuk lebih mementingkan optimasi SEO dan membuat meta tag pada template blog yang sekarang anda gunakan agar valid HTML5.</div>

Trik Optimasi Meta Tag SEO Valid HTML5 – dalam sebuah web atau blog fungsi meta tag tentu sangat penting dan diperlukan untuk lebih memaksi...

Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi

Wednesday, 26 June 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxjyFC1ufzds6B5a0hvznTKJlfw42AeLJs7jIyVbZSht1mTCcZ-tWczhvYBX1Xn4tsQUEyAV7H9F5H2T1uQ_ww0aWeOV1yDxZjP7VlfSg3Wg7vguLqsybgHB4oKUdj7oCJzunBjTvDWA/s1600/Kredensial-OpenID-Anda-Tidak-Dapat-di-Verifikasi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Kredensial OpenID Anda Tidak Dapat di Verifikasi" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxjyFC1ufzds6B5a0hvznTKJlfw42AeLJs7jIyVbZSht1mTCcZ-tWczhvYBX1Xn4tsQUEyAV7H9F5H2T1uQ_ww0aWeOV1yDxZjP7VlfSg3Wg7vguLqsybgHB4oKUdj7oCJzunBjTvDWA/s320/Kredensial-OpenID-Anda-Tidak-Dapat-di-Verifikasi.jpg" title="Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi" width="320" /></a></div><div style="text-align: justify;">Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi – tentu sudah tidak asing lagi masalah ini dikalangan blogger yang terbiasa berkomentar menggunakan OpenID. Walaupun masalah sepele namun terkadang hal ini terasa menyebalkan saat akan berkomentar pada sebuah blog yang berpagerank tinggi dan ingin menggunakan OpenID namun pada akhirnya muncul pesan peringatan OpenID anda tidak dapat di verifikasi. Sangat disayangkan tentunya jika anda sedang menjumpai blog dofollow berpagerank tinggi dan anda ingin menanam backlink disana dengan meninggalkan <a href="http://mas-andes.blogspot.com/2012/12/cara-membuat-kolom-komentar-blog-auto.html" target="_blank" title="cara membuat kolom komentar blog auto hide">komentar </a>namun pada form komentar yang tersedia tidak menyediakan komentar menggunakan Name/URL, biasanya langkah yang sebagai penggantinya adalah menggunakan OpenID namun apadaya jika menggunakan OpenID yang anda gunakan ternyata tidak dapat di verifikasi. Untuk mengatasi hal tersebut maka dengan trik ini anda bisa mengatasi hal itu dengan mudah dan tidak perlu lagi khawatir akan masalah sepele ini akan muncul pada saat anda akan berkomentar di blog orang lain. Caranya sangat sederhana, hanya dengan menambahkan sedikit kode pada template blog yang anda gunakan maka langsung kelar sudah masalah yang sedang anda alami dalam hal berkomentar menggunakan OpenID blog yang anda gunakan. Hal ini juga pernah saya alami, dan dari hari ke hari lama-lama ternyata juga membuat rasa penasaran bagaimana bisa hal ini bisa terus-terusan terjadi pada saat akan meninggalkan <a href="http://mas-andes.blogspot.com/2012/11/menggabungkan-3-kotak-komentar-blogger.html" target="_blank" title="cara menggabungkan 3 kotak komentar blogger facebook dan twitter">komentar </a>namun selalu pesan peringat kredensial selalu muncul. Oleh sebab itu jika hal serupa juga anda alami maka tidak perlu khawatir lagi akan hal ini, dan bisa anda buang jauh rasa kesal yang melanda sampai saat ini karena hal ini bisa di atasi dengan mudah dan singkat. Supaya lebih efektif maka berikut adalah Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi supaya dapat berfungsi kembali. 1. Login ke akun blogger. 2. Copy kode dibawah ini.</div><blockquote class="tr_bq"><link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/> <link href='http://mas-andes.blogspot.com' rel='openid.delegate'/></blockquote><div style="text-align: justify;">Keterangan: Ganti 'http://mas-andes.blogspot.com' dengan URL blog anda. 3. Selanjutnya klik Template >> Edit HTML lalu paste kode tersebut dibawah kode <head> atau bisa juga paste diatas kode <b:skin> kemudian Simpan Template. Maka setelah anda simpan, pada saat anda akan berkomentar menggunakan OpenID sekarang sudah bisa berfungsi kembali dan bisa kembali berkomentar mengguankan OpenID tanpa muncul pesan peringatan Kredensial OpenID Anda Tidak Dapat di Verifikasi.</div>

Trik Mengatasi Kredensial OpenID Anda Tidak Dapat di Verifikasi – tentu sudah tidak asing lagi masalah ini dikalangan blogger yang terbiasa...

Cara Membuat Efek Zoom Pada Teks di Blog

Saturday, 11 May 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizhGbSJRpuHjSUxdzYmppsIxBzwmG_kn4UT6oYp1VVjAGiBhLtW5L8pYifRYCkO8FSGu480NK4ERhde8U7hOvf2CGv_P5t7HXaRs80CVE-mQmad92KJmf1OJWXMK9ijRRYKpuTWh0SXKo/s1600/teks-zoom.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Zoom Pada Teks di Blog" border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizhGbSJRpuHjSUxdzYmppsIxBzwmG_kn4UT6oYp1VVjAGiBhLtW5L8pYifRYCkO8FSGu480NK4ERhde8U7hOvf2CGv_P5t7HXaRs80CVE-mQmad92KJmf1OJWXMK9ijRRYKpuTWh0SXKo/s320/teks-zoom.jpg" title="Membuat Efek Zoom Pada Teks di Blog" width="320" /></a></div><div style="text-align: justify;">Cara Membuat Efek Zoom Pada Teks di Blog – jika biasanya efek zoom itu diterapkan pada gambar yang terdapat pada posting blog maka sekarang akan membahas tutorial untuk cara membuat efek zoom pada teks di blog.</div><a name='more'></a><div style="text-align: justify;">Efek zoom ini bisa diterapkan pada kalimat kecil maupun paragraf panjang sekalipun. Namun sebenarnya bukan hanya efek zoom saja, tapi melainkan efek rotate atau berputar juga terjadi pada efek ini pada saat hover atau tersentuh mouse. Teks dapat dengan mudah di atur dengan menggunakan kode CSS yang ada dibawah. Apabila ingin merubah background maupun yang lainnya maka tinggal ubah saja kode warna pada bagian background color. Cara membuatnyapun cukup mudah dan tidak banyak menggunakan kode sehingga tidak memberatkan loading blog. Sedangkan jika mungkin berminat untuk membuat efek zoom ini dan menerapkan kedalam blognya, maka berikut adalah tutorial Cara Membuat Efek Zoom Pada Teks di Blog menggunakan kode CSS dan cara penerapannya: 1. Login ke akun blogger. 2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitq6OpQn03R1b4PYhyq6z18WaMyvlrEJzGPF2myK34p7kIlrbKl-3VN5O5Iy9r-yRYCHk8aCx_CtEKz5crkY6tYVV5LegwocCCHdawH9Ge0A7ovvtdg7J2JASGri7kD1nsn_iWOkC3JT4/s1600/Script+CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Zoom Pada Teks di Blog" border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitq6OpQn03R1b4PYhyq6z18WaMyvlrEJzGPF2myK34p7kIlrbKl-3VN5O5Iy9r-yRYCHk8aCx_CtEKz5crkY6tYVV5LegwocCCHdawH9Ge0A7ovvtdg7J2JASGri7kD1nsn_iWOkC3JT4/s320/Script+CSS.jpg" title="Membuat Efek Zoom Pada Teks di Blog" width="320" /></a></div><blockquote class="tr_bq">#tekszoom { background-color: #eee; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #tekszoom:hover { background-color: #fc3; -webkit-transform: rotate(360deg) scale(2); -moz-transform: rotate(360deg) scale(2); -o-transform: rotate(360deg) scale(2); -ms-transform: rotate(360deg) scale(2); transform: rotate(360deg) scale(2); }</blockquote><div style="text-align: justify;">Keterangan: Tulisan berwarna merah adalah warna background font default, silahkan sesuaikan. Tulisan berwarna biru adalah warna background font hover, silahkan sesuaikan. 3. Klik Terapkan ke Blog. 4. Selanjutnya pada saat posting maka menggunakan mode HTML dan untuk membuat efek zoom pada teks di postingan blog maka caranya copy kode berikut kemudian paste di kolom posting blog anda: </div><blockquote class="tr_bq"><div id="tekszoom"> Silahkan di isi dengan teks/paragraf yang di inginkan </div></blockquote><div style="text-align: justify;">DEMO: silahkan arahkan mouse anda pada teks dibawah ini.</div><style>#tekszoom { background-color: #eee; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #tekszoom:hover { background-color: #fc3; -webkit-transform: rotate(360deg) scale(2); -moz-transform: rotate(360deg) scale(2); -o-transform: rotate(360deg) scale(2); -ms-transform: rotate(360deg) scale(2); transform: rotate(360deg) scale(2); } </style><div id="tekszoom" style="text-align:center;">Cara Membuat Efek Zoom Pada Teks di Blog </div>

Cara Membuat Efek Zoom Pada Teks di Blog – jika biasanya efek zoom itu diterapkan pada gambar yang terdapat pada posting blog maka sekarang...

Membuat Table Rounded Corner CSS3 di Blog

Thursday, 9 May 2013

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI1JdMx2VUL1WouEwB_9YaigJ_lyyGL-dFPTX0LAo0GFcNa8bqXC4mA1wr2tz8EM__0fSC-UKjOPEBAOap6mABYIGmK4V8JPuSqpkQL7CjYnMQtM24xR87nbXLjIuBZ0uDeAngCA7DV6Q/s1600/table-rounded-corners.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Table Rounded Corner CSS3 di Blog" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI1JdMx2VUL1WouEwB_9YaigJ_lyyGL-dFPTX0LAo0GFcNa8bqXC4mA1wr2tz8EM__0fSC-UKjOPEBAOap6mABYIGmK4V8JPuSqpkQL7CjYnMQtM24xR87nbXLjIuBZ0uDeAngCA7DV6Q/s320/table-rounded-corners.gif" title="Membuat Table Rounded Corner CSS3 di Blog" width="320" /></a></div><div style="text-align: justify;">Membuat Table Rounded Corner CSS3 di Blog – mungkin karena sudah trend jadi sekarang sudah jarang lagi pada blog yang masih memakai table standard bawaan blog atau default blogspot. Banyak dari para blogger jika mereka membuat table sudah menggunakan sedikit sentuhan kode CSS pada template blog mereka sehingga table yang terlihatpun tampak lebih cantik dibanding dengan menggunakan table default blogspot.</div><a name='more'></a><div style="text-align: justify;">Untuk membuat table menjadi sedikit lebih cantik begitu pula terlihat sexy maka hanya perlu memasukan sedikit kode CSS pada template blog saja. Table Rounded Corner CSS3 ini memiliki 2 type, yang pertama pada table saat hover maka akan menampilkan highlight rows dan pada table type yang kedua maka sudah otomatis pada rows secara paten atau permanen tanpa hover rows sudah terhighlight atau tampak berbeda warna antara baris atas dengan baris yang dibawahnya. Untuk memasangnya kedalam blog maka berikut adalah tutorial cara Membuat Table Rounded Corner CSS3 di Blog: 1. Login ke akun blogger. 2. Copy kode CSS dibawah ini, lalu pada dashboard blog anda klik Template >> Sesuaikan >> Tingkat Lanjut >> Tambahkan CSS (paste kode CSS ini didalam kolom tersebut).</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu-Dskh0qpMYbn8B8lLYDnXQbh-fvrr6YLKRfURiugzA3BxJJrgJcQAVKJhYDlS61rvdslfGHdVTpUpgCGWchBBYuDdVSQ3Gbrvy8Gs7Uz-BcuUB5ZwLmeR_3IsyQXximHhIK9hhuZa90/s1600/Script+CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Table Rounded Corner CSS3 di Blog" border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu-Dskh0qpMYbn8B8lLYDnXQbh-fvrr6YLKRfURiugzA3BxJJrgJcQAVKJhYDlS61rvdslfGHdVTpUpgCGWchBBYuDdVSQ3Gbrvy8Gs7Uz-BcuUB5ZwLmeR_3IsyQXximHhIK9hhuZa90/s320/Script+CSS.jpg" title="Membuat Table Rounded Corner CSS3 di Blog" width="320" /></a></div><blockquote class="tr_bq" style="height: 300px; overflow: auto; padding: 10px;">table {     *border-collapse: collapse; /* IE7 and lower */     border-spacing: 0;     width: 100%;   } .bordered {     border: solid #ccc 1px;     -moz-border-radius: 6px;     -webkit-border-radius: 6px;     border-radius: 6px;     -webkit-box-shadow: 0 1px 1px #ccc;     -moz-box-shadow: 0 1px 1px #ccc;     box-shadow: 0 1px 1px #ccc;        } .bordered tr:hover {     background: #fbf8e9;     -o-transition: all 0.1s ease-in-out;     -webkit-transition: all 0.1s ease-in-out;     -moz-transition: all 0.1s ease-in-out;     -ms-transition: all 0.1s ease-in-out;     transition: all 0.1s ease-in-out;    }      .bordered td, .bordered th {     border-left: 1px solid #ccc;     border-top: 1px solid #ccc;     padding: 10px;     text-align: left;   } .bordered th {     background-color: #dce9f9;     background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));     background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);     background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);     background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);     background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);     background-image:         linear-gradient(top, #ebf3fc, #dce9f9);     -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;     -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;     box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;           border-top: none;     text-shadow: 0 1px 0 rgba(255,255,255,.5); } .bordered td:first-child, .bordered th:first-child {     border-left: none; } .bordered th:first-child {     -moz-border-radius: 6px 0 0 0;     -webkit-border-radius: 6px 0 0 0;     border-radius: 6px 0 0 0; } .bordered th:last-child {     -moz-border-radius: 0 6px 0 0;     -webkit-border-radius: 0 6px 0 0;     border-radius: 0 6px 0 0; } .bordered th:only-child{     -moz-border-radius: 6px 6px 0 0;     -webkit-border-radius: 6px 6px 0 0;     border-radius: 6px 6px 0 0; } .bordered tr:last-child td:first-child {     -moz-border-radius: 0 0 0 6px;     -webkit-border-radius: 0 0 0 6px;     border-radius: 0 0 0 6px; } .bordered tr:last-child td:last-child {     -moz-border-radius: 0 0 6px 0;     -webkit-border-radius: 0 0 6px 0;     border-radius: 0 0 6px 0; } /*----------------------*/ .zebra td, .zebra th {     padding: 10px;     border-bottom: 1px solid #f2f2f2;   } .zebra tbody tr:nth-child(even) {     background: #fbf8e9;     -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;     -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;     box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;       } .zebra th {     text-align: left;     text-shadow: 0 1px 0 rgba(255,255,255,.5);     border-bottom: 1px solid #ccc;     background-color: #eee;     background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));     background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);     background-image:    -moz-linear-gradient(top, #f5f5f5, #eee);     background-image:     -ms-linear-gradient(top, #f5f5f5, #eee);     background-image:      -o-linear-gradient(top, #f5f5f5, #eee);     background-image:         linear-gradient(top, #f5f5f5, #eee); } .zebra th:first-child {     -moz-border-radius: 6px 0 0 0;     -webkit-border-radius: 6px 0 0 0;     border-radius: 6px 0 0 0; } .zebra th:last-child {     -moz-border-radius: 0 6px 0 0;     -webkit-border-radius: 0 6px 0 0;     border-radius: 0 6px 0 0; } .zebra th:only-child{     -moz-border-radius: 6px 6px 0 0;     -webkit-border-radius: 6px 6px 0 0;     border-radius: 6px 6px 0 0; } .zebra tfoot td {     border-bottom: 0;     border-top: 1px solid #fff;     background-color: #f1f1f1; } .zebra tfoot td:first-child {     -moz-border-radius: 0 0 0 6px;     -webkit-border-radius: 0 0 0 6px;     border-radius: 0 0 0 6px; } .zebra tfoot td:last-child {     -moz-border-radius: 0 0 6px 0;     -webkit-border-radius: 0 0 6px 0;     border-radius: 0 0 6px 0; } .zebra tfoot td:only-child{     -moz-border-radius: 0 0 6px 6px;     -webkit-border-radius: 0 0 6px 6px     border-radius: 0 0 6px 6px }</blockquote><div style="text-align: justify;">Selanjutnya pada saat anda akan membuat table di posting blog, maka silahkan klik Entri Baru kemudian menggunakan kolom posting mode HTML lalu masukan kode diberikut ini kedalam halaman posting. Table Type 1 kodenya:</div><blockquote class="tr_bq"><div style="text-align: justify;"><table class="bordered"> <thead> <tr> <th>Nomor</th>       <th>Tutorial</th> <th>Tanggal</th> </tr> </thead> <tr> <td>1</td>       <td>Simple Gallery Photo di Blog</td> <td>07/05/2013</td> </tr>       <tr> <td>2</td>        <td>Membuat Menu Drop Down Purple Style di Blog</td> <td>03/05/2013</td> </tr> <tr> <td>3</td>        <td>Membuat Menu Drop Down Brown Style di Blog</td> <td>02/05/2013</td> </tr>   <tr> <td>4</td> <td>Membuat Gallery Efek Polaroid Pada Blog</td> <td>01/05/2013</td> </tr> <tr> <td>5</td> <td>Menu Horisontal Inverted Shiftdown</td> <td>30/04/2013</td> </tr> </table></div></blockquote><div style="text-align: justify;">Table type 2 kodenya:</div><blockquote class="tr_bq"><table class="zebra"> <thead> <tr> <th>Nomor</th>       <th>Tutorial</th> <th>Tanggal</th> </tr> </thead> <tfoot> <tr> <td>&nbsp;</td>       <td></td> <td></td> </tr> </tfoot>   <tr> <td>1</td>       <td>Simple Gallery Photo di Blog</td> <td>07/05/2013</td> </tr>       <tr> <td>2</td>        <td>Membuat Menu Drop Down Purple Style di Blog</td> <td>03/05/2013</td> </tr> <tr> <td>3</td>        <td>Membuat Menu Drop Down Brown Style di Blog</td> <td>02/05/2013</td> </tr>   <tr> <td>4</td> <td>Membuat Gallery Efek Polaroid Pada Blog</td> <td>01/05/2013</td> </tr> <tr> <td>5</td> <td>Menu Horisontal Inverted Shiftdown</td> <td>30/04/2013</td> </tr> </table></blockquote><div style="text-align: justify;">Dari kode diatas maka akan tampil seperti DEMO dibawah ini:</div> <style> table { *border-collapse: collapse; /* IE7 and lower */ border-spacing: 0; width: 100%; } .bordered { border: solid #ccc 1px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px #ccc; } .bordered tr:hover { background: #fbf8e9; -o-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .bordered td, .bordered th { border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 10px; text-align: left; } .bordered th { background-color: #dce9f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9)); background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9); background-image: linear-gradient(top, #ebf3fc, #dce9f9); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; border-top: none; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .bordered td:first-child, .bordered th:first-child { border-left: none; } .bordered th:first-child { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } .bordered th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } .bordered th:only-child{ -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .bordered tr:last-child td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; } .bordered tr:last-child td:last-child { -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; } /*----------------------*/ .zebra td, .zebra th { padding: 10px; border-bottom: 1px solid #f2f2f2; } .zebra tbody tr:nth-child(even) { background: #fbf8e9; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; } .zebra th { text-align: left; text-shadow: 0 1px 0 rgba(255,255,255,.5); border-bottom: 1px solid #ccc; background-color: #eee; background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee)); background-image: -webkit-linear-gradient(top, #f5f5f5, #eee); background-image: -moz-linear-gradient(top, #f5f5f5, #eee); background-image: -ms-linear-gradient(top, #f5f5f5, #eee); background-image: -o-linear-gradient(top, #f5f5f5, #eee); background-image: linear-gradient(top, #f5f5f5, #eee); } .zebra th:first-child { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } .zebra th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } .zebra th:only-child{ -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .zebra tfoot td { border-bottom: 0; border-top: 1px solid #fff; background-color: #f1f1f1; } .zebra tfoot td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; } .zebra tfoot td:last-child { -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; } .zebra tfoot td:only-child{ -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px border-radius: 0 0 6px 6px } </style> Table Type 1<table class="bordered"><thead><tr><th>Nomor</th> <th>Tutorial</th><th>Tanggal</th></tr></thead><tr><td>1</td> <td>Simple Gallery Photo di Blog</td><td>07/05/2013</td></tr> <tr><td>2</td> <td>Membuat Menu Drop Down Purple Style di Blog</td><td>03/05/2013</td></tr><tr><td>3</td> <td>Membuat Menu Drop Down Brown Style di Blog</td><td>02/05/2013</td></tr> <tr><td>4</td> <td>Membuat Gallery Efek Polaroid Pada Blog</td><td>01/05/2013</td></tr><tr><td>5</td> <td>Menu Horisontal Inverted Shiftdown</td><td>30/04/2013</td></tr></table> Table Type 2<table class="zebra"><thead><tr><th>Nomor</th> <th>Tutorial</th><th>Tanggal</th></tr></thead><tfoot><tr><td> </td> <td></td><td></td></tr></tfoot> <tr><td>1</td> <td>Simple Gallery Photo di Blog</td><td>07/05/2013</td></tr> <tr><td>2</td> <td>Membuat Menu Drop Down Purple Style di Blog</td><td>03/05/2013</td></tr><tr><td>3</td> <td>Membuat Menu Drop Down Brown Style di Blog</td><td>02/05/2013</td></tr> <tr><td>4</td> <td>Membuat Gallery Efek Polaroid Pada Blog</td><td>01/05/2013</td></tr><tr><td>5</td> <td>Menu Horisontal Inverted Shiftdown</td><td>30/04/2013</td></tr></table>

Membuat Table Rounded Corner CSS3 di Blog – mungkin karena sudah trend jadi sekarang sudah jarang lagi pada blog yang masih memakai table s...