25 November 2013

Simplex Reporter News Responsive Blogger Template

Simplex Reporter News Responsive Blogger Template
The Simplex Reporter is a news category based theme that is best suited for news publishing site and also for information blogs.The important features of this theme are premium design,4 column footer,best style that makes your blogs professional,social sharing icons,mega menu and many other cool features.

Simplex Reporter Blogger Template is a free news based blogger template. The template looks elegant and attractive. It has features which are rarely found on blogger blogs. The site is responsive and looks really beautiful on all the screens with different sizes. This is an idol template for news blog. Its features like fast loading, Ticker, Superb menu make it best out of the rest.

Features : 1 Right Sidebar, 2 Right Sidebar, 3 Columns, 4 columns, 4 Columns Footer, Adsense ready, Blogger Template 2013, Elegant, Fashion, Fixed width, Free Premium, news, Red, SEO, White, Wordpress Look.


Platform Type :  Blogger / Blogspot
Template Name :  Simplex Reporter Blogger Template
Template Author : Rocking Templates
Designer The Simplex Design | http://www.thesimplexdesign.com/


19 November 2013

Portofolio responsive blogger template : PISGOR

Portofolio responsive blogger template : PISGOR
Pisgor Blogger Template saya dapat dari Loefa-cebook, merupakan tema blog yang responsive dengan gaya Portofolio. Template ini, cocok untuk anda yang mempunyai blog menampilkan photo-photo.

Pisgor Blogger Template dibangun menggunkan framework profesional bernama Skeleton, framework Skeleton ini banyak digunakan untuk membangun sebuah website profesional.



 ViewDemo        :        DownLoad

Cara Intall Template
Untuk sistem instalasi PISGOR Blogger Template ini, tidak begitu rumit. Berikut caranya:
  • Unzip file Blogger Template yang sudah anda download
  • Masuk ke Blogger Halaman Template, lalu klik EDIT HTML
  • Buka file XML Template dengan HTML Editor seperti Notepad++ untuk Windows atau TextWrangler untuk Mac.
  • Lalu Copy semua kode template
  • Kemudian Paste kedalam EDIT HTML Blogger
  • Terakhir Klik Save Template
Untuk cara settup template lebih lengkap telah dibuat file instruksi, dan dimasukan kedalam file download Pisgor Blogger template.

Demikian Pisgor Blogspot Template ini, semoga bermanfaat

14 November 2013

Fungsi, Manfaat dan Cara Setting Komentar Untuk Optimasi Blog

Fungsi, Manfaat dan Cara Setting Komentar Untuk Optimasi Blog
Jika selama ini, kolom komentar hanya dianggap sebagai fitur pelengkap dalam sebuah blog, maka saat ini, saya merasa fasilitas yang sejatinya diperuntukkan bagi visitor itu mempunyai peran penting dalam optimasi blog.

Rasa ini (puitis, red), saya dapat akhir-akhir ini selama belajar blogging. Ditambah ketika membaca diskusi menarik antara Kompi Ajaib dengan Mas Kolis di forum. Dimana mengambarkan aktifitas di kolom komentar sangat berpengaruh terhadap masa depan blog. Bisa positif atau malah sebaliknya negatif.

Dimana dalam diskusi tentang template juga menyinggung soal sistem komentar agar di setting hanya untuk user google saja. Karena untuk menghindari, jika suatu saat  para komentator, blognya dihapus atau expire yang menyebabkan dead link. Dead link sangat berpengaruh di SERP.

Sejujurnya, jika hanya dari diskusi singkat antara dua blogger diatas, saya belum begitu berpikir serius tentang pengaruh besar 'kolom komentar' untuk masa depan blog. 

Nah, ketika Matt Cutts kembali berbicara tentang hal ihwal sistem komentar di blog. Maka jelas kita harus serius menanggapinya. Mau tahu siapa Matt Cutts? Dia adalah orang kampung yang sok paham tentang dunia maya. Sok penting di Google as a software engineer. Huh...

Ssstttt... just kidding brother, emang si Akang Matt Cutts tokoh penting dalam hal ini. Dia adalah Kepala Web Spam di Google sekaligus praktisi SEO dunia. Masa gak percaya dengan kata-katanya, he... he....

Nah baru-baru ini Matt Cutts sebagai kepala tim webspam Google tersebut, ia telah membuat sebuah video yang berbicara tentang komentar blog. Matt Cutts mengatakan jika Anda berkomentar pada sebuah blog hendaklah menggunakan nama Anda (Profil Google), jangan menggunakan nama dengan link atau url (anchor text) semisalnya url blog Anda bila tidak ingin dianggap SPAM. Dan ini tentunya akan berdampak buruk juga terhadap blog yang Anda komentari.

Jika terdapat sebuah blog dengan banyak outbound link yang datang dari komentar, ini akan berakibat buruk pada kesehatan blog. Dan lebih parahnya lagi blog akan disingkirkan dari SERP bahkan dibanned.

Namun pertanyaan lain akan muncul, bagaiman jika linknya disimpan pada komentar bukan pada nama komentator? Semua Blogger tentunya telah sependapat bahwa komentar yang menggunakan link hidup pada komentar adalah komentar spam yang wajib dihapus. Kita bisa menghapus manual komentar spam ini melalui dashbord blog.

Namun jika ini terlalu banyak dan kita terlalu sibuk untuk menghapus satu per satu komentar spam ini kita bisa menggunakan script yang secara otomatis akan menghilangkan link hidup pada komentar. Script ini banyak bertebaran di Google, atau silahkan baca "Cara Menghilangkan Link Aktif pada Komentar Blog" dijamin beres!!


Nah salah satu cara untuk menghindari pemakaian anchor text dengan url ini yaitu dengan menggunakan setting komentar User with Google Account atau Anda bisa mengaktifkan fitur komentar Google+ pada blog Anda.

Dalam hal ini, saya tidak akan berbicara banyak tentang cara setting komentar User with Google Account atau fitur komentar Google Plus. Karena sebagian besar blogger sudah paham dengan hal ini. Jika tidak, kebangetan... he... he...  


Berikut adalah video dari Matt Cutts yang menjelaskan tentang komentar spam. Silahkan Anda simak baik-baik...



Nah bagaimana dengan Anda? Apakah blog Anda masih mengaktifkan fitur Anonymouse atau OpenID? Atau sudah menggunakan setting User with Google Akun? Atau mungkin Anda sudah menggunakan komentar Google Plus?

Itu tentunya terserah masing-masing dari Anda sebagai pengelola blog dan tentunya memiliki argumen masing-masing untuk setting komentar blog Anda.

Cara Setting Komentar Untuk Optimasi Blog

Tidak sampai hati rasa jika tidak berbagi tentang cara setting komentar, kali aja memang ada yang benar-benar newbie he.. he...

Pertama, sudah pasti anda harus dilakukan login ke blog:
Pilih dashboard atau blog yang ingin Anda setting kolom komentarnya.
Kemudan pilih setelan, dan selanjutnya pilih pos dan komentar seperti yang terlihat pada gambar.

Fungsi, Manfaat dan Cara Setting Komentar Untuk Optimasi Blog

Selanjutnya, pada halaman setelan pos dankomentar Anda bisa melakukan setting pada beberapa bagian dan memilih opsi yang anda inginkan:

LOKASI KOMENTAR
  • Tersemat: Komentar bisa dilakukan pada halaman yang sama di bawah posting.
  • Halaman penuh dan jendela pemunculan: Orang yang melakukan komentar akan dibawa pada halaman baru atau halaman yang berbeda. 
  • Sembunyikan : Tidak menampilkan komentar. Opsi ini tidak menghilangkan komentar yang sudah ada sebelumnya. Anda bisa memunculkan lagi dengan memilih opsi yang lain.

SIAPA YANG DAPAT KOMENTAR
  • Semua orang-termasuk pengguna tanpa nama : Siapa saja bisa melakukan komentar termasuk pengguna tanpa nama atau anonymous.
  • Pengguna terdaftar-termasuk openID : Siapa saja bisa melakukan komentar kecuali anonymouse. Pengguna harus melakukan log in terlebih dahulu sebelum melakukan komentar. 
  • Pengguna dengan Akun Google : Hanya pengguna yang mempunyai Akun google saja yang dapat memberi komentar.
  • Hanya anggota blog ini : Hanya pengguna yang terdaftar di blog Anda saja yang bisa memberi komentar.

MODERASI KOMENTAR.
  • Selalu dan kadang-kadang : Komentar harus menunggu persetujuan Anda untuk ditampilkan. Anda bisa memilah-milah komentar yang ingin Anda tampilkan. 
  • Tidak pernah : Komentar akan langsung tampil saat itu juga.

TAMPILKAN VERIFIKASI KATA

Untuk mengghindari komentar otomatis dengan robot Anda bisa pilih ya. Maka pengguna harus memasukkan kode captcha terlebih dahulu agar komentar bisa tampil.

TAMPILKAN TAUTAN BALIK
  • Tampilkan : Anda bisa pilih tampilkan untuk menampilkan link hidup.
  • Sembunyikan : Anda bisa pilih sembunyikan jika tidak ingin menampilkan link hidup.
Untuk cara setting fitur baru Google Plus Comment baca di sini

    NB   
Bagi para blogger Blogwalking termasuk acara wajib, termasuk meninggalkan jejak dengan cara berkomentar dengan blog yang di kunjungi. Selain menjalin tali silahturrahmi sesama blogger, juga mendapat bonus suplemen khusus untuk kesehatan blog, yakni backling.

13 November 2013

Fungsi dan Manfaat Custom Permalink di Blogger/Blogspot

 Fungsi dan Manfaat Custom Permalink di Blogger/Blogspot
Custom Permalink
Custom permalink di Blogspot atau juga disebut permanent link dan dalam bahasa Indonesia Tautan Permanen, merupakan salah satu fitur penting blogger untuk mendongkrak konten blog lebih SEO Friendly di Search Enggine.

Fungsi fitur custom permalink di Blogger 

Tidak ada hal yang tidak penting pada setiap fitur yang disediakan oleh blogger. Termasuk Custom Permalink itu sendiri. Fitur ini, berfungsi untuk merubah URL judul postingan, sesuai keinginan.

Sebagai gambaran, cara kerja atau cara menggunakan custom permalink: Ketika anda membuat sebuah judul post  "Fungsi dan Manfaat Custom Permalink di Blogger/Blogspot", apabila anda menulis artikel dan kemudian langsung publish, maka kemungkinan akan muncul permalink secara otomatis seperti ini: 
http://redaksiexpo2012.blogspot.com/2013/11/fungsi-dan-manfaat-custom-permalink-di.html
Sedangkan ketika menggunakan fasilitas custom permalink, maka permalink (url postingan) tidak akan terpotong. Atau dengan kata lain, kita dapat membuat permalink secara manual sesuai dengan keinginan kita.

Caranya, lihat sebelah kanan, klik Tautan Permanen dan tandai URL Khusus. kemudian masukan kata-kata yang diinginkan, contoh : Manfaat-dan-fungsi-Custom-Permalink-di-Blogger-Blogspot kemudian klik Selesai, maka hasilnya pasti akan terbentuk permalink menjadi:
http://redaksiexpo2012.blogspot.com/2013/11/Manfaat-dan-fungsi-Custom-Permalink-di-Blogger-Blogspot.htm

(jangan gunakan spasi, tapi gunakan strip (-) untuk pemisah kata), lihat contoh tulisan berwarna merah diatas:
Berikut adalah gambar contoh editing  Custom Permalink di Blogger/Blogspot:
 Fungsi dan Manfaat Custom Permalink di Blogger/Blogspot
Custom Permalink di Blogger/Blogspot

Manfaat Custom Permalink di Blogger/Blogspot

Sudah barang tentu setiap fitur di blogger mempunyai manfaat yang besar untuk sebuah blog. Demikian juga dengan Custom Permalink tersebut.

Dengan adanya fasilitas custom permalink, maka permalink (url postingan) tidak akan terpotong. Caranya, sebagaimana telah dijelaskan diatas. Dengan terlihatnya perbedaan permalink yang terbentuk secara otomatis dengan permalink khusus, mungkin anda sudah mulai tergambar tentang manfaatnya.

Benar kawan!!!! dengan adanya "tautan permanen khusus" melalui fitur Custom Permalink tersebut, URL konten/artikel yang kita tulis pasti akan lebih SEO Friendly. URL tersebut, dapat terbentuk secara lengkap sesuai dengan judul artikel dan bahkan mampu membentuk deskripsi singkat artikel/konten bersangkutan.

Dengan fasilitas Custom Permalink ini, jelas artikel/konten anda lebih SEO friendlly. 

     Catatan    
1. Untuk bisa menggunakan layanan ini, harus menggunakan tampilan baru (new interface)
2. Hanya bisa diedit sebelum artikel di publish
3. Gunakan strip (-) untuk pemisah antar kata.

Tips Sebelum Memilih/Mengganti Template Blog

Tips Sebelum Memilih/Mengganti Template Blog
All About Blogspot Templates :  Siapa yang tidak tergiur untuk berganti template, jika setiap saat bermunculan berbagai jenis themes blog dengan berbagai desain menarik. Belum lagi pengaruh fitur yang ditawarkan. Mulai dari SEO Friendly, Valid HTML5, Valid CSS3, Responsive desain, dan berbagai kelebihan lain dari templates standar.


Template blog merupakan komponen terpenting dan berharga dalam membangun blog, salah memilih template akan menimbulkan rasa tidak nyaman pengunjung saat berkunjung untuk membaca ataupun sekedar melihat-lihat blog kita.

Selain faktor tampilan yang menarik, ada beberapa unsur penting yang harus diperhatikan dalam menentukan pilihan template. Yang jelas, tema yang dipakai harus sesuai dengan konsep dasar blog bersangkutan. 


Bagaimana cara agar kita tidak salah memilih template blog?  Berikut Tips Sederhana Dalam Memilih Template Blog, agar dikemudian hari tidak menyesal sehingga harus kembali mengutak-atik
code HTML yang njelimet bin ruwet karena harus berganti template baru. Disisi lain, jika terlalu sering gonta-ganti template akan berpengaruh buruk terhadap blog dimata search enggine.

Ok... langsung saja kita kepokok pembahasan, beberapa point penting yang perlu dipertimbangkan dalam mengganti template:

1. Pilih warna dan background yang padu atau serasi, usahakan jangan terlalu banyak warna pada blog karena hanya akan menambah kesan berantakan.

2. Kurangi widget, aksesoris atau script yang tidak perlu pada blog karena akan membuat berat loading blog bertambah, pengunjung lebih suka blog yang mempunyai loading cepat. Demikian juga search enggine. Template yang termasuk dalam kategori SEO Friendly jelas harus fast loading.

3. Pertimbangan Template yang SEO Friendly, sedikit harus di utamakan. Karena untuk bersaing dengan jutaan blog sejenis dikancah dunia internet, unsur ramah search enggine sangat diperlukan. Untuk rekomendasi templates SEO Ready disini.

4.  Lebih Baik Pilih Responsive templates. Kenapa? Dewasa ini, seiring dengan perkembangan tehnolgi, dalam mengakses internet, visitor sudah tidak terpaku menggunakan PC atau Laptop. Sebagian menggunakan gadget berupa handphone, tab, atau lain. Templates yang didesain responsive mampu menyesuaikan dengan screen/layar tampilan yang digunakan visitor. Untuk lebih jelasnya tentang manfaat template responsive baca disini

5. Valid HTML5. Bagi beberapa blogger memvalidasi HTML merupakan langkah penting. Dengan begitu, kita memastikan bahwa halaman yang kita buat sudah sesuai dengan standar dan akan berjalan sempurna pada user agent dan browser web.

Membangun halaman web atau blog tidaklah sulit. Dengan perangkat lunak yang tersedia sekarang, kita dapat membuat halaman web dan itu pun dapat dicapai dalam waktu setengah jam atau malah kurang. Terus apakah kita perlu menjalankan validator HTML pada halaman yang kita buat untuk menemukan kesalahan? memang semuanya tidak perlu, akan tetapi jika kita ingin halaman tetap dapat dilihat sempurna melalui beberapa browser yaitu menampilkannya dengan benar, maka validasi HTML5 adalah sesuatu yang memang wajib di penuhi.

6. Tidak terlalu banyak banner, gambar, dan iklan yang terpasang. Kenapa? Karena keberadaan mereka cukup mengganggu fokus visitor dalam menikmati konten yang kita suguhkan. Jika pun harus, maka pertahankan yang memang benar-benar dianggap penting. Dan jangan berlebihan.

4. Cari referensi template blog yang dipakai oleh blogger professional, pelajari tata letak widget dan design blog mereka. Di blog ini banyak pilihan template he... he... promo dikit Mas Brooo...

Nah, demikian Tips Sebelum Memilih/Mengganti Template Blog ini. Sebenarnya, masih banyak lagi tips memilih template blog yang baik. Namun, pada intinya gunakan template yang enteng, ringan, dan rapi namun tetap elegan atau Anda juga bisa menggunakan template seo friendly yang sudah banyak disediakan para blogger. Sebagian gratis dan berkualitas tinggi.

Dan atau, jika anda rajin dan ahli coding, mungkin dapat melakukan modifikasi template sendiri. Agar, berbagai unsur penting sebuah template dapat terpenuhi. Cara ini jelas sangat baik, karena template yang digunakan bisa sesuai dengan selera, fungsi, dan keinginan sendiri.

11 November 2013

Cara Menampilkan Screenshot Preview Responsive Blog

Menampilkan Screenshot Preview Responsive Blog

Sekarang kan zaman responsive templates - Mungkin saat ini anda baru saja berganti template blog, atau habis berjuang keras melakukan editing HTML dan lainnya agar blog kalian bisa tampil Responsive dan tampil sempurna disemua resolusi layar.

Tentunya, untuk ingin memastikan seberapa sempurna template tersebut responsive, tentunya ada keinginan hati menguji atau melakukan test.

Dalam hal ini sebenarnya terdapat beberapa situs penyedia Screenshot Preview Responsive Web/blog desain. Gunanya untuk mengujinya sekaligus memamerkanya dalam bentuk Screenshot.

Jujur, sebelumnya (Pengalaman sendiri sob...) sempat bingung bagaimana saya membuat Screenshot Preview untuk Responsive Web Design dibeberapa perangkat desktop dan mobile. Setelah browsing sana sini ternyata paling banyak cuman nemuin tools untuk testing Web Design Responsive dan bukan untuk menampilkan Preview-nya. Hadeuhhhh.... 

Eh... ujung-ujungnya ketemu di oom.com.

Am I Responsive? ya ini dia tool yang baru dia share. Dan ternyata cukup bagus buat kalian yang ingin menampilkan preview desain blog dibeberapa perangkat sekaligus dan tool ini sebenarnya bukan hanya untuk preview saja tetapi sekaligus buat melakukan testing secara nyata.

Untuk menggunakan tool diatas caranya sangat mudah kita hanya memasukan URL alamat blog atau website dan selanjutnya biarkan tool tersebut bekerja otomatis menampilkan Screenshot-nya, selain itu kita juga bisa mengatur letak posisi perangkat dengan hanyak menggesernya. Untuk hasil Screenshot karena tidak ada fasilitas untuk menyimpan gambar cara termudah tentu saja hanya menekan tombol PrintScreen dan simpan hasil gambarnya.

Jika ingin atau mau mencoba Menampilkan Screenshot Preview Responsive Web Design dengan Am I Responsive bisa disini

Atau jika masih sedikit penasaran dan ingin menjajal ditempat lain, juga bisa dilakukan The Responsinator.  Sama caranya tinggal add your url ditempat yang sudah disediakan di pojok kiri atas. Monggo... silahkan dicoba...

09 November 2013

Simple And Clean Color’s Blogger Template : Warm Mag

Warm Mag Is a New Blogger Template. Its High User Friendly Blogger Template. If You Blogger User This is a best Template For You, Mobile, Desktop And Tablet Friendly User Interface. Simple And Clean Color’s, Navigation Menu, Image Slider and Tabs Wight Ready Template.




Warm Mag  TEMPLATE INFORMATIONS
Platform Type : Blogger.com
Template Name : Warm Mag
Author name : probthemes
Designer URL : http://www.probthemes.com 

ViewDemo  | DownLoad

Features Warm Mag Blogspot Template

  • Responsive Template Design
  • Auto Blog Post summarize And “Read More” Button
  • Auto Image Crop With Thumbnail (Home Page and Label Page Only)
  • Css And HTML Base Menu With Drop down
  • Auto Date Show At Header Right side
  • Tabs Widgets ready (Powered By Jquery)
  • Image Slider (Powered By Jquery)
  • Simple User Friendly Search Box
  • Auto Pagination Added To Post Footer
  • Social Share Widget (Placed Post Footer)
  • Custom Error 404 Page With Search Box (Official 404 Page)
  • Related Post Widget (Placed Post Footer)
  • Ads Banner Ready
  • Meta Keywords And Description Support (Official Meta Description Support)
  • Random Post Selector
  • Recent Post By Label
  • 4 Column Footer Area
  • Flicker Image Gallery
  • Official “FOLLOW BY EMAIL” Widget

08 November 2013

Cara memasang Tool Color Wheel di Blog

Cara memasang Tool Color Wheel di Blog
All About Blogspot Templates : Postingan kali ini sebenarnya hanya menjawab pertanyaan dari sobat blogger saya, yakni +Kang Ucup. Dimana pada post sebelumnya Generator Kode Warna HTML, dia berkomentar dengan kata lain meminta tentang cara mendapatkan tool Color Wheel untuk blogspot.

Memang, Tool Color Wheel sebegai generator kode warna HTML sangat diperlukan, khususnya bagi para blogger yang hobby melakukan editing template. Kode Warna HTML itu sendiri, digunakan untuk mendeskripsikan dan melakukan spesifikasi dari warna-warna yang di inginkan dalam perancangan halaman web/blog. Gunanya tentu, untuk mempermudah seorang blogger dalam memilih warna yang akan digunakan untuk elemen-elemen web/blog-nya.

Tool Color Wheel adalah generator kode warna HTML yang sangat simple digunakan. Hanya dengan meng-click bagian warna yang diinginkan, maka secara otomatis akan muncul beberapa pilihan kode HTML warna yang diperlukan.

Berikut code/srcipt untuk memasang Tool Color Wheel di Blog:
<center>
<div style="text-align: center;">
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="480" id="col" width="480"> <param value="sameDomain" name="allowScriptAccess" /> <param value="http://www.2createawebsite.com/build/col.swf" name="movie" /> <param value="high" name="quality" /> <param value="#ffffff" name="bgcolor" /> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="480" align="middle" height="480"></embed> </object></div>
</center>



Cara mengaktifkan fitur meta description di blogspot

Cara membuat meta description dinamis di blogspot
All About Blogspot Templates : Sama kita ketahui, selain blog kita, di dunia online terdapat jutaan blog sejenis. Jadi, untuk bersaing dimata search enggine, perlu pondasi kuat. Salah satunya adalah melakukan Optimasi SEO On Page untuk meningkatkan Peringkat Blog (SERP). Dan inilah satu-satunya optimasi yang kendalinya berada pada kita.

Dulu, pada template standar untuk blogspot sebagian besar masih perlu dimodifikasi agar lebih SEO Friendly.  Meta description tag adalah salah satu meta tags yang sangat penting bagi blog, bahkan kini mungkin menjadi satu-satunya meta tag yang memiliki bobot besar bagi search engine.

Meta description berfungsi sebagai pemuat meta informasi yang mendeskripsikan isi halaman blog. Meta deskripsi ini juga menjadi bagian dari snippet deskripsi di hasil pencarian Google. Oleh karena itu, menggunakan dan mengoptimalkannya secara tepat akan menambah kekuatan SEO blog di search engine, atau setidaknya menjadi alat bagi blog untuk menarik pengunjung dari search engine.

Sebenarnya, ada banyak sekali poin penting yang dapat di-ulas mengenai meta description ini, baik mengenai "kesalahpahaman" meta description yang dianggap sebagai keseluruhan meta tags (meta tags ada banyak: meta keywords, meta author, meta robots, meta location, dll), maupun dalam konteks apakah meta description masih digunakan search engine, khususnya Google. Namun untuk kali ini, pembahasan lebih difokuskan tentang Cara mengaktifkan meta description dinamis di blogspot.

Beberapa fitur baru Blogger memang mengagumkan, salah satutnya  fitur Blogger yang berkaitan erat dengan SEO: Fitur Custom Meta Description Blogger. Sebenarnya fitur ini muncul sudah agak lama, sekitar Februari-Maret 2012, tapi belum selengkap dan sesempurna seperti sekarang, yaitu adanya penambahan fitur search description pada single post (deskripsi unik untuk masing-masing halaman posting).

Cara Menggunakan dan Menambahkan Meta Description Blogger

Jika dulu, sebelum ada fitur search preferences yang dapat diatur dengan mudah melalui dashboard Blogger, kita mesti menambahkan tag meta deskripsi secara manual:
<meta name='description' content='deskripsi konten/halaman blog' />
Tapi kini, hal itu tidak perlu lagi, karena fitur meta description dapat dengan mudah diakses melalui halaman settings blogger.
1. Buka dashboard > settings
2. Pilih search preferences
3. Lihat Pada bagian Meta Tags > Description
4. Klik "Edit".
5. Pada opsi Enable search description? Pilih "Yes/Ya".

Cara membuat meta description dinamis di blogspot

6. Akan muncul content box seperti ini:
Cara membuat meta description dinamis di blogspot


7. Isikan deskripsi blog sesuai keinginan. Ingat, maksimal hanya 150 karakter, jadi optimalkan penggunaan kata-kata se-efisien mungkin. Lalu klik "save changes" untuk menyimpannya.

Berikut contoh snippet description-nya di Google: 

Cara membuat meta description dinamis di blogspot



Cara Menambahkan Meta Description Pada Single Post/Halaman Posting

Ini langkah kedua setelah atau tindak lanjut dari sistem meta description yang kita bicarakan diatas. Yakni mengatur fitur setting meta tags (description), dimana masing-masing halaman blog dapat diberi deskripsi unik, sehingga menambah kekuatan SEO-nya, setidaknya ketika tampil di hasil pencarian. Berikut caranya?

1. Syarat penting dari penggunaan fitur "Search Description" ini adalah dengan mengakftifkan terlebih dahulu fitur Meta Description seperti cara di atas.
2. Setelah diaktifkan, buka halaman posting editor (seperti ketika membuat posting baru).
3. Lihat ke sebelah kanan pada "Post Settings", akan ada beberapa panel.
4. Jika setting meta description telah diaktifkan (enable) seperti cara di atas, maka akan muncul satu fitur lagi, "Search Description", deskripsi pencarian, yang bukan lain adalah fitur untuk menambahkan meta deskripsi unik pada masing-masing halaman posting.

Perhatikan gambar berikut:
Cara membuat meta description dinamis di blogspot
- Klik "Search Description/Deskripsi Penelusuran"
- Isikan deskripsi isi artikel/posting/halaman sesuai keinginan
- Klik "Done/Selesai" jika sudah selesai.

Langkah di atas dapat dilakukan ketika membuat posting baru atau ingin mengedit posting-posting lama untuk menambahkan deskripsi. Sehingga, setiap halaman posting akan memiliki meta description unik pada masing-masing halaman blog.

Tapi masih ada satu catatan lagi: meta description, seperti namanya, harus memiliki isi yang benar-benar deskriptif, sehingga pengunjung yang melihatnya tidak bingung dan justru tidak jadi melakukan klik.

Seperti disarankan oleh salah satu blogger Indonesia Ahmad Khoirul Azmi, tentang  Cara Mengoptimalkan Meta Description:

Katanya, ada beberapa kiat khusus untuk mengoptimalkan isi meta description, baik untuk search engine maupun untuk user/visitor.



1. Meta description hendaknya berisi kalimat, bukan sekedar frase atau keyword tanpa bisa dipahami maknanya oleh pengunjung. Meta description adalah yang ditampilkan sebagai snippet deskripsi di bawah judul konten. Gunakan kalimat jelas dan upayakan dapat "merayu" pengunjung untuk melakukan klik. Meta description merupakan alat ampuh untuk meningkatkan traffic blog jika digunakan dengan benar.

2. Memperhatikan keyword yang digunakan sangat penting, namun sebaiknya jangan membanjiri deskripsi dengan keyword saja, karena membingungkan pengunjung dan justru bisa dianggap sebagai spam oleh Google. Be natural! Saya sering melihat deskripsi sengaja dibuat dengan menggunakan tag: page title - blog name - page title, yang menghasilkan judul blog - nama blog - judul blog, ini justru dapat merugikan blog karena tidak deskriptif, berisi pengulangan-pengulangan tidak penting, dan tentunya, spammy!

3. Jumlah karakter yang ditampilkan di search snippet kini semakin berkurang, dulu karakter deskripsi bisa mencapai 160 karakter. Tapi kini cuma di bawah jumlah itu. Bahkan untuk berjaga-jaga, sebaiknya deskripsi memiliki karakter tidak lebih dari 140 karakter (mengingat kini snippet tanggal juga ditampilkan).

Demikian sedikit tips tentang optimalisasi meta description blog. Yang saya dapat dari berbagai sumber, salah satu dari blog Mas Ahmad Khoirul Azmi. Semoga bermanfaat...

31 Oktober 2013

Generator Kode Warna HTML : Color Wheel Untuk Blogger

Generator Kode Warna HTML untuk web/blog
I'm Blogger :  Bagi yang hobi dengan desain template jelas sangat akrab dengan code yang satu ini.

Namun tidaklah mungkin, kita harus menghapal seluruh code html untuk dapat bermain warna yang maksimal. Mungkin jika, hanya warna-warna dasar, seperti merah, kuning, hijau, biru, putih dan hitam, kita masih dapat mengingat, namun ketika sudah berbicara tentang kombinasi warna, jelas harus ada alat bantu.

Tampilan template blog sebagian besar bermain dengan warna agar terilhat menarik. Dalam dunia online/web, penempatan/pemasangan warna biasanya menggunakan code HTML. Memang, sebenarnya juga bisa menggunakan image, namun kurang efektif dan jelas menambah beban loading blog.

Kode Warna HTML sendiri, digunakan untuk mendeskripsikan dan melakukan spesifikasi dari warna-warna yang di inginkan dalam perancangan halaman web/blog. Untuk mempermudah seorang blogger dalam memilih warna yang akan digunakan untuk elemen-elemen web/blog-nya, diperlukan  tool berupa generator kode warna HTML.

Berikut adalah  Color Wheel for Blogger:


30 Oktober 2013

Responsive Thesis Template For Blogger Blogspot V2

Responsive Thesis Template For Blogger Blogspot V2
Responsive Thesis Template For Blogger Blogspot V2
Responsive thesis template for blogger blogspot V2 adalah penyempurnaan daripada template thesis responsive untuk blogspot yang dikeluarkan pertamakali oleh andrianovitcrew. Template yang mengusung desain, clean, minimalis, visitor friendly ini juga dirancang khusus untuk memaksimalkan SEO blogger blogspot.

Sesuai dengan janjinya, walau belum lama realese Responsive thesis template for blogger blogspot,
andrianovitcrew telah melakukan update terbaru template yang terkenal SEO Killer ini. Pada V2 ini, ada banyak penyempurnaan telah dilakukan.

Menurut dia,pada awal pembuatan Responsive thesis template for blogger blogspot yang pertama masih terlalu banyak bugs yang perlu disempurnakan lagi. Sehingga, setelah melakukan beberapa kali ujikaji dari template thesis untuk blogger (blogspot) yang pertama, akhirnya telah siap direlease responsive thesis template untuk blogger blogspot yang kedua (V2).
Responsive thesis template for blogger blogspot ini, adalah gabungan antara beban loading halaman yang sangat cepat dengan optimasi SEO dan juga rich microdata. 
Berikut berbagai kelebihan dari Responsive thesis template untuk blogger blogspot v2 ini: 

Minimalis ,clean design, visitor friendly

Desain template thesis yang kedua ini terinspirasi dari thesis 'social triggers' dimana demo asli dari templatenya bisa dilihat di http://diythemes.com/demo/?skin=thesis_social_triggers.

Desain yang bersih dan rapi sehingga memudahkan pembaca dalam menjelajahi blog  dan juga membuat visitor betah untuk berlama-lama di blog kita.tapi perlu diingat juga "Konten is the King"

Seo heading tags

Susunan heading tags yang benar dan sejatinya sudah seo friendly sangat disukai oleh mesin pencari (google). Untuk menambah pengetahuan atau sekedar referensi tentang bagaimana susunan heading tags yang benar bisa dibaca disini.Tak lupa juga Heading h1, h2, h3, h4, h5 dan juga h6 pun tersusun secara sempurna di dalam template ini (banyak dari pembuat template blogspot yang mengabaikan hal ini).

Fast Loading Page

Kecepatan loading yang benar-benar sangat cepat diterapkan di responsive template thesis V2 ini. Dalam hal ini, anda bisa test di http://developers.google.com/speed/pagespeed/insights/ atau di http://gtmetrix.com/. Untuk memaksimalkan kecepatan template ini, sengaja tidak memasang jquery, soalnya jquery itu bikin loading blog jadi super berat.   

Responsive Web desain

Sebelumnya, apa itu responsive web desain??
Responsive Web Desain adalah sebuah pendekatan yang menunjukkan bahwa desain dan pengembangan harus menanggapi perilaku dan lingkungan pengguna berdasarkan pada ukuran, platform dan orientasi layar. Praktik ini meliputi penggunan perpaduan grid fleksibel dan layout, gambar dan CSS media query. Sebagaimana pengguna saat ini yang beralih dari laptop ke tablet, website secara otomatis harus menyesuaikan resolusi, ukuran gambar dan kemampuan scriptingnya. Dengan kata lain, website harus memiliki teknologi untuk secara otomatis merespon preferensi pengguna yang didasarkan pada resolusi layar gadget yang digunakan (komputer pc, laptop, netbook,tablet, smart phone dan mobile phone).
Hal ini yang merupakan salah satu kelebihan dari template thesis untuk blogspot yang mana sebelumnya belum ada yang bikin (responsive thesis untuk blogger blogspot ). Responsive desain disini termasuk juga pada bagian komentar. Biasanya pada template yang mengaku 'responsive' ternyata tidak support pada bagian komentar.

Rich Microdata Dan Mark Up schema (schema.org)

Lengkapnya microdata dan mark up schema dari schema.org juga melengkapi sempurnanya template thesis for blogger blogspot V2 ini.

Seo Breadcrumb

Breadcrumb bisa dikatakan sangat special. Breadcrumb yang Ter-index oleh google, juga dilengkapi dengan microdata breadcrumb sekaligus.

Tidak adanya error di rich snippet google testing tool.

Hal ini meliputi 'Error: Missing required field updated ', 'Error: Missing required hCard author' Dan error lainya yang mana tak bisa disebutkan satu persatu disini. Untuk membuktikan masalah ini bisa di test di http://www.google.com/webmasters/tools/richsnippets.

Seo meta tags (dynamic seo meta tags)

Cukup satu kali setting untuk mengaktifkanya ( ini sudah termasuk seo post meta tags, seo label meta tags, seo search meta tags dan lain lain.

Halaman dengan lebar penuh (full width) di halaman statis (single page)dan halaman error (error page).

Bertujuan untuk membedakan mana itu halaman statis dan mana itu halaman post.

Block link aktif di area komentar

Ini bertujuan untuk mencegah para spammer yang sering menanam backlink secara semena-mena.

Javascript manipulasi komentar

Visitor/orang yang komentar di blog secara otomatis bisa memasukkan gambar/video youtube/tag 'pre'/tag 'code' ataupun juga tag 'blockquote' di dalam komentar. Ini sangat berguna bagi blog yang sering memberikan posting tentang tutorial .

Search Widget menggunakan Quick search dengan Json Blogger

Melakukan pencarian di dalam blog secara cepat tanpa meninggalkan halaman yang sedang dikunjungi.

Valid sebagai HTML5 template

Hanya valid untuk homepage alias halaman utama saja .

Jikalau widget popular post disertakan dengan gambar thumbnail dan snippet, maka akan mengakibatkan error saat validitas. Tapi jangan takut, asal rajin editing code HTML template tips nya ada disini.
Untuk halaman post ataupun halaman statis, memang sedikit susah untuk membuat valid HTML5. Banyak sekali faktor yang membuat error di halaman selain homepage (halaman utama). Untuk check validitas html5 dapat dilakukan di http://validator.w3.org/. Memang, platform blogger (blogspot) di desain untuk xhtml bukan nya HTML5. Di dalam template ini memang telah sengaja dilengkapi beberapa 'blogspot hacks' supaya bisa valid HTML5.

More Features Responsive Thesis Template For Blogger Blogspot V2
  • Support social sharing dan juga social network widget
  • Support email subscription widget
  • Support about author widget
  • Support Ads ( iklan )
  • Custom Tips, Info Dan Warning Block di postingan
  • Related Post widget
  • SEO comment system
  • Custom Error Page 404 
VIEWDEMO    |    DOWNLOAD




29 Oktober 2013

Metro Blogger Template with 4 column footer

Metro blogger Template- A Unique Stylish Blogger Template
Metro Blogger Template
Metro is a free blogger template custom design with 1 Right Sidebar, 2 Column, Ads Ready, Blogger, Blue, Custom Navbar, Fixed, Gray, Page Number, Responsive, and now you can download Metro blogger template for free  in All About Blogspot Templates.

Template Author  :   Ozynetwork
Designer     :  Ozynetwork.com
     
Metro blogger Template- A Unique Stylish Blogger Template. Two Column Metro Style template with 4 column footer. Highly Customized Navigation and sidebar menus. Author Box with Related posts and subscription box.

Almost everything from head to toe is customized and we haven’t left a single item in customization. Some of the features are very impressive like Metro Style Navigation Menu, Metro Style Post titles and Metro Social Subscription widget. This is a free of cost template but in order to thanks the Author you must keep the credit link.

DEMOVIEW   |    DOWNLOAD

What More Metro Blogger Template?

Beside these fantastic features, Blogger Metro blogger Template has many other exciting features which you will definitely like. After reviewing the features, we will now take a look over the customization part.

Installation
1) Open Your Blogger dashboard and click on  template and Edit Html.
2) Now open the file we provided it to you and copy all the data from that file and paste it there.
3) Save your template and the installation process in over.

Navigation
1) Click on Template >> Edit Html.
2) Press CTRL+F and search for
<div class='mblmetromenu'>
3) Edit the Menus and Put the links.

Author Box1) Click on Template >> Edit HTML
2) Press CTRL+F and search for
<div class='auth-panel'>
3) Edit the Author panel and you are done.

Meta Tags1) Press CTRL+F and search for
<!--meta tags-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title>Mtro|A stylish blogger template</title>
2) Edit the Keywords, Meta Description and Title for your blog and you are done!

Happy blogging BROO.

Cara pasang Auto Read More Otomatis #Terbaru

Cara pasang Auto Read More Otomatis #Terbaru
All About Blogspot templates : Fungsi Read More tanpa hosting file .JS, memang agak berbeda dengan versi Read More biasanya. Bila sebelumnya  kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Atau penggunaan fungsi pemenggalan kalimat bawaan blogger seperti dibawah gambar ini:

Cara pasang Auto Read More Otomatis #Terbaru
Fungsi Read More Standar dengan pemenggalan artikel bawaan blogger
Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas. Artikel ini dibuat menjawab pertanyaan zhoe_haemy pada artikel "Cara merubah ukuran, jenis font dan warna pada judul post" sehubungan dengan fitur readmore pada blognya tidak berfungsi.

Fungsi Read More berikut ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Atau bisa juga disebut saja dengan fasilitas image thumbnail.

Tidak hanya itu, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Bahkan kita dapat memodifikasi ukuran image yang akan ditampilkan di home page blog anda. Hebat bukan??? Yah.. anggap hebat lah....

   NOTE!!    Bagi anda yang sudah memasang Read More versi lama atau auto read more-nya tidak berfungsi, sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru di dalam Quote dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja).
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>

OK, jika sudah tinggal lanjutkan langkah-langkah berikut ini:

Pertama : silahkan langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head>. Setelah itu, jangan lupa di simpan terlebih dahulu.
<!-- Auto read more script Mulai -->
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430; //panjang tulisan tanpa gambar
summary_img = 340; //panjang tulisan dengan gambar
img_thumb_height = 200; // tinggi gambar thumbnail
img_thumb_width = 200; // lebar gambar thumbnail
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script Berakhir -->

Kedua : Lalu cari Kode : <data:post.body/> dan Ganti Dengan Kode di Bawah Ini :
<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Baca Selengkapnya</a>
</b:if>
</b:if>
<!-- Auto read more Berakhir -->


Ketiga : Save Template!. Selesai.

Cara Memodifikasi Auto Read More.


  • Thumbnail_mode : setting menjadi "yes" untuk menampilkan Thumbnail pada Auto Read More dan Setting menjadi "no" untuk menghilangkan Thumbnail pada Auto Read More. Temen - temen Blogger juga bisa merubah settingan lain seperti panjang tulisan seperti yang sudah saya jelaskan pada Comment di sebelah setiap barus Kode.
  • Pada kode kedua, para Blogger juga Bisa merubah Teks "Baca Selengkapnya" sesuai dengan Keinginan.
Demikian tutorial sederhana Cara pasang Auto Read More Otomatis #Terbaru. Terima Kasih. Semoga Bermanfaat !.

27 Oktober 2013

Cara membuat link terbuka di tab baru otomatis

Cara membuat link terbuka di tab baru otomatis
All About Blogspot Templates : Target Blank - adalah code yang berfungsi sebagai perintah agar link yang ketika di clik akan membuka secara otomatis di tab baru.

Ada banyak manfaat fungsi  <target="_blank"> tersebut. Diantaranya, yakni; memperkecil nilai bounce rate, karena visitor banyak meng-klik blog Anda tanpa meninggalkan laman sebelumnya. Sehingga juga berfungsi melangsingkan rangking Alexa.

Dalam hal ini, ada beberapa tips yang bisa dilakukan. 
Pertama : Seluruh link yang ada pada blog akan terbuka di tab baru secara otomatis ketika di clik visitor. Caranya dengan melakukan edit template HTML berikut ini:

1. Masuk dashboard blogger blog Anda,
2. Klik Template => Edit HTML =>
3. Cari kode </head> untuk lebih mempermudah gunakan  CTRL+F.

4. Setelah ketemu kode </head>, masukkan kode dibawah ini tepat diatasnya.
<base target="_blank"/>
5. Save Template.
Kedua : Editing code target blank secara manual. Cara ini hanya memfungsikan salah satu atau beberapa link yang dikehendaki saja yang terbuka secara otomatis pada tab baru. 
 Dari cara kedua ini, dapat dilakukan dengan 2 cara. 

1. Editing link yang berada di halaman postingan. Caranya dapat dilakukan langsung seperti gambar dibawah ini: 
edit link di halaman postingan
Cara membuat link terbuka di tab baru di halaman postingan

2. Menggunakan fungsi code <target="_blank"> 

Cara 2 adalah cara yang agak rumit sedikit ketimbang cara 1. Yaitu dengan menggunakan kode HTML:

Apabila link biasa, maka kodenya seperti ini:

<a href='http://redaksiexpo2012.blogspot.com'>Blogspot Templates</a>
Sedangkan untuk link dengan fungsi menggunakan code perintah <target="_blank"> 
<a href='http://redaksiexpo2012.blogspot.com'target="_blank">Blogspot Templates</a>
Apa yang beda kedua code tersebut?
Yups, di kode HTML buka link baru, ada tambahan kode target="_blank". Tepatnya setelah "http://contohlink.com/".

Jadi, untuk membuat link open new tab, silahkan tambahkan kode target="_blank" tepat setelah kode "http://contohlink.com/".

Walau sedikit rumit, pada cara ke 2 ini kita dapat melakukan edit link tertarget/tertentu. Termasuk link berada didalam widget blog di dalam code HTML. Sedangkan link pada halaman lainnya berfungsi normal.

Demikian Cara membuat link terbuka di tab baru otomatis semoga bermanfaat

Fasteseo - Seo Responsive Blogger Template

Fasteseo - Seo Responsive Blogger Template
ALL ABOUT BLOGSPOT TEMPLATES : Satu lagi template blogspot karya +Fajri Andaviar saya share disini. Sebelumnya adalah, BeriMagz : Responsive Blogger Template. Menurut dia, tema blog ini juga Responsive banget. Tidak hanya itu, selain tampilannya elegant juga sangat SEO Friendly.

Sesuai dengan namanya, Fasteseo - Seo Responsive Blogger Template. Di desain penuh warna agar terlihat Fresh serta dilengkapi berbagai fitur yang fungsional.

DemoView   |    DownLoad

 Features Fasteseo - Seo Responsive Blogger Template :


  •     100% SEO di Chkme.com
  •     Iklan disisi Header
  •     Halaman Error 404
  •     Breadcrumbs siap
  •     Menu Navigasi Sticky (Menempel) dengan kotak pencarian
  •     Read More otomatis siap
  •     Menu dibawah header dengan Font Awesome
  •     Widget Popular Posts yang telah di Desain
  •     Widget Label Cloud yang telah di Desain
  •     Catatan kaki terindex Google
  •     Artikel terkait Vertikal
  •     Post Next dan Prev
  •     Threaded Comment
  •     Autor Comment
  •     Dan Lainnya

Instalasi Fasteseo Template :

Setelah upload template, ada beberapa sentuhan modifikasi yang berhubungan dengan indentitas blog anda.
  • Cari kode YOUR-GOOGLE-URL , dan ganti semua kode tadi dengan URL Google+ Sobat.
  • Cari kode YOUR-ALEXA-ID , dan ganti dengan ID Alexa Blog Sobat.
  • Cari NameBlog dan NamaBlog , dan ganti semua kode tadi dengan nama Blog Sobat.
  • Cari kode YOUR DESCRIPTION HERE , dan ganti dengan deskripsi Blog Sobat.
  • Cari kode Keywords1, Keywords2, Keywords3 , dan ganti semua kode tadi dengan Keywords Blog Sobat.
Mengganti Menu Navigasi Fixed/Float : Cari kode berikut :
<nav id='nav'>
<ul class='menunav' id='navinti'>
<li class='mhome'><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>Download</a></li>
  <li><a href='/404'>404</a></li>
<li class='dgnsub'><a href='#'>Kebijakan</a>
<ul class='sub-menu hidden'>
  <li><a href='#'>Privacy Police</a></li>
  <li><a href='#'>Disclaimer</a></li>
  <li><a href='#'>Terms Of Service</a></li>
</ul>
</li>
Lalu ganti # (Tanda Pagar) dan title menu sesuai kebutuhan dan keinginan anda.

Mengganti Menu di bawah Header : Cari kode dibawah ini:
<div class='masmenu'>
<ul class='sf-menu'>
<li><a href='/'><i class='icon-home' style='margin-right: 5px;'/>Home</a></li>
<li><a href='#'><i class='icon-html5' style='margin-right: 5px;'/>Blogger</a>
<ul>
<li><a href='#'>Tutorial Blogger</a></li>
<li><a href='#'>Templates</a></li>
<li><a href='#'>SEO</a></li>
<li><a href='#'>HTML5</a></li>
<li><a href='#'>Tips &amp; Trick</a></li>
</ul>
</li>
<li><a href='/'><i class='icon-rocket' style='margin-right: 5px;'/>Info Fakta</a>
<ul>
<li><a href='#'>Umum</a></li>
<li><a href='#'>Sejarah</a></li>
<li><a href='#'>Misteri</a></li>
<li><a href='#'>Unik</a></li>
<li><a href='#'>Lelucon</a></li>
<li><a href='#'>Hiburan</a></li>
<li><a href='#'>Olahraga</a></li>
<li><a href='#'>Gaya Hidup</a></li>
<li><a href='#'>Tips</a></li>
<li><a href='#'>Wisata</a></li>
</ul>
</li>
<li><a href='/'><i class='icon-facebook-sign' style='margin-right: 5px;'/>Jejaring Sosial</a>
<ul>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Google</a></li>
<li><a href='#'>Heello</a></li>
<li><a href='#'>Myspace</a></li>
<li><a href='#'>Instagram</a></li>
<li><a href='#'>Pinterest</a></li>
</ul>
</li>
  <li><a href='#'><i class='icon-music' style='margin-right: 5px;'/>Musik</a></li>
</ul>
<li><a href='#'><i class='icon-laptop' style='margin-right: 5px;'/>Tekno</a>
<ul>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Komputer</a></li>
<li><a href='#'>Software</a></li>
</ul>
</li>
<li><a href='#'><i class='icon-suitcase' style='margin-right: 5px;'/>Informasi</a>
<ul>
<li><a href='#'>Olahraga</a></li>
<li><a href='#'>Entertainment</a></li>
<li><a href='#'>Islam</a></li>
<li><a href='#'>Dunia</a></li>
</ul>
</li>
<li><a href='#'><i class='icon-coffee' style='margin-right: 5px;'/>More</a>
<ul>
<li><a href='#'>Teknik Komputer Jaringan</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Film</a></li>
<li><a href='#'>Wordpress</a></li>
</ul>
  </li>
</div>

Ganti # (Tanda Pagar) dan judul menu sesuai keinginan anda.


26 Oktober 2013

Cara Menghilangkan Link Aktif pada Komentar Blog

Cara Menghilangkan Link Aktif pada Komentar Blog
All About Blogspot Templates -Artikel ini sebenarnya saya posting karena sedikit terganggu dengan adanya spammer pada kolom komentar, dengan menyimpan link aktif/hidup.

Memang, banyak blogger sering dipusingkan dengan adanya spammer pada komentar. Kebanyakan dari mereka komentarnya tidak bermutu, dan hanya mengharapkan backlink. Untuk itu, kita harus mengambil cara agar para spammer tidak seenaknya menyimpan tautan aktif pada komentar.

Tutorial ini saya dapat dari salah satu blog milik blogger Indonesia, Kang Ismet. Yakni tentang cara menghilangkan link aktif pada komentar blogspot.

Ada beberapa cara untuk menghilangkan link aktif/link hidup pada komentar tersebut, diantaranya dengan melakukan pemasangan code CSS dan JavaScript pada template blog.

1. Dengan CSS (Not Recommended)

Untuk menyembunyikan link dengan CSS, simpan kode ini di atas ]]></b:skin>
#comments p a{ display: none !important;}
Akan tetapi menurut Kang Ismet, cara ini tidak direkomendasikan, karena masih terbaca di browser, otomatis masih terbaca sebagai link oleh Mesin Pencari.
2. Dengan JavaScript (Recommended)

Sebetulnya ada banyak javaScript untuk menghilangkan link hidup pada komentar ini, namun pada kesempatan ini saya akan share 2 JavaScript saja. Dan setelah saya coba, sangat efektif dan berhasil dengan baik.

Simpan salah satu JavaScript ini di atas </body>
<script type='text/javascript'>
//<![CDATA[
$(function(){$('#comments p').find('a').contents().unwrap();});
//]]>
</script>
Hasilnya, Anchor Link akan menjadi teks biasa. Artinya komentar yang menggunakan link aktif akan dilumpuhkan menjadi teks biasa.
Atau kita dapat mengunakan JavaScript berikut, dan cara tersebut yang saya pakai saat ini.
<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
            content[i].className = "spammer-detected";
        }
    }
} 
blockLinks('comment-holder', 'p');
//]]>
</script> 


Hasilnya, akan terlihat seperti gambar dibawah ini:

Cara Menghilangkan Link Aktif pada Komentar Blog

Dengan kata lain, teks komentar akan diubah dengan kata-kata peringatan.

Demikian tips Menghilangkan Link Aktif pada Komentar Blog, semoga bermanfaat dan terimakasih atas kunjungan.