Mengganti Threaded Comments Dengan Google+ Comments Di Blogger

Anda mungkin sudah tahu dengan sistem komentar terbaru Google (Google+ Comments) yang telah diperkenalkan dan diintegrasikan dengan Blogger. Ini ialah sistem komentar terbaru yang merupakan perbaikan besar atas sistem standard Blogger dan mendukung threaded comment. Hal ini juga terlihat jauh lebih baik. Kami sebelumnya sudah menulis perihal bagaimana cara mengaktifkan Google+ Comments pada Blogger. Tetapi beberapa orang mungkin masih mempunyai duduk kasus untuk menerapkan sistem komentar terbaru ini pada custom template mereka. Pada tutorial ini, saya akan berusaha memperlihatkan cara yang efektif dan gampang untuk menerapkan dan menggunakan Google+ Comments pada blog Anda.

Beralih ke Google Plus Comments

Untuk mengaktifkan Google Plus Comments pada blog Anda, pertama-tama Anda harus menghubungkan akun Anda ke akun Google+ Anda. Untuk melaksanakan hal ini, ikuti langkah berikut ini:

• Masuk ke Dashboard Blogger Anda kemudian pilih blog yang ingin Anda hubungkan dengan Google+.
• Klik tombol Google+ pada sidebar kiri
• Klik tombol Get Started di sisi kiri atas untuk menghubungkan akun Anda. Tombol ini tidak akan muncul kalau akun sudah terhubung.
• Lalu ikuti isyarat gampang untuk menghubungkan blog Anda
• Setelah terhubung, Anda akan melihat opsi Use Google+ comments on this blog. Centang pilihan ini untuk mengaktifkan sistem Google Plus comments.

Itu semua untuk mengubah komentar Google Plus Anda pada default template. Tapi itu tidak akan bekerja untuk custom template. Untuk itu, Anda harus melaksanakan tweak kode sumber template Anda dan menciptakan beberapa perubahan menyerupai yang akan saya jelaskan berikut ini.

Menampilkan Komentar Google Pada Custom Template

Ada dua cara untuk melaksanakan ini. Anda juga sanggup memakai cara yang gampang yaitu memakai pilihan Revert widget templates to default atau Anda sanggup melaksanakan dengan mengedit kode sumber di template.

Cara 1 (Cara Paling Mudah)

Custom template ialah widget yang telah diadaptasi yang biasanya menggantikan pengaturan default. Dan itulah sebabnya sistem komentar ini mungkin tidak bekerja pada custom template. Namun kalau Anda merubahnya dengan default maka sistem komentar google+ akan sanggup ditampilkan tanpa hambatan.

Untuk melaksanakan itu, Anda sanggup mengembalikan Widget Blog Anda ke setingan default dalam editor HTML template Anda melalui langkah-langkah berikut.

• Dari dalam Dashboard blog Anda, klik Template di sidebar kiri.
• Klik Edit HTML (sebelumnya back up dulu template Anda, hanya berjaga-jaga bila nanti ada kesalahan).
• Klik pada tombol Revert Widget templates to default.
• emudian pilih widget Blog1 pada daftar yang ada. Hati-hati dan jangan pilih yang lainnya lantaran akan mengembalikan widget menjadi default.

Langkah itu tadi akan memecahkan duduk kasus Anda bagi yang kesulitan memasukkan Google+ Comments di blog. Tapi, Anda akan kehilangan kostumisasi di Widget Blog Anda. Kaprikornus kalau ingin mempertahankan tampila widget Anda ketika ini, maka saya akan menyarankan Anda memakai cara  kedua.

Cara 2 (cara alternatif)

Yang harus Anda lakukan ialah mengganti beberapa baris kode pada template dengan kode yang lain. Dari dalam editor HTML tekan Ctrl + F dan carilah "threaded_comments". Anda akan melihat serangkaian kode menyerupai di bawah ini.

<b:if cond='data:blog.pageType == & quot;static_page&quot;'>
   <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
      <b:else/>
      <b:include data='post' name='comments'/>
   </b:if>
</b:if>
<b:if cond='data:blog.pageType == & quot;item&quot;'>
   <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
      <b:else/>
      <b:include data='post' name='comments'/>
   </b:if>
</b:if>

Perhatikan kode yang bercetak tebal, gantilah dengan kode di bawah ini.

<b:include data='post' name='comment_picker'/>

Masih tidak bekrja juga? Jika memang tidak bekerja mohon hubungi kami melalui kotak komentar di bawah ini supaya kami sanggup mengkoreksinya. Tapi kedua cara tersebut sudah berhasil saya terapkan di blog saya. Semoga berhasil... terimakasih. :)

Read More

Download Template Blogger Seo Gratis Keren Terbaru 2019

Bagi seorang blogger pemula ibarat saya, membuat template merupakan sesuatu yang sangat susah di lakukan. Oleh alasannya itu jalan yang terbaik ialah memakai template milik orang lain. Atau mungkin membeli template orang lain.

Saat ini template maker atau developer blogger template begitu banyak. Mereka banyak membuat beranekaragam template dengan model dan gaya yang berbeda-beda. Sobat bahkan akan di buat kebingungan menentukan template versi gratis maupun berbayar. Ada banyak sekali pilihan template disana yang saya rasa hal itu akan menguras waktu dan tenaga untuk mencari mana yang paling bagus untuk blog sobat. Ada baiknya teman lihat koleksi template keren disini mungkin ada salah satu yang menarik di hati.

Template SEO friendly, ringan dan responsive merupakan syarat template yang dikala ini harus di penuhi. Template blog memang menjadi salah satu pendukung blog SEO. apalagi untuk tahun 2019 ini, tampaknya fitur-fitur harus semakin up to date dengan perkembangan teknologi khususnya dunia internet.

Sangat disayangkan jikalau mempunyai blog dengan konten bagus tapi templatenya jelek apalagi mempunyai loading yang cukup usang sehingga membuat pembaca blog menunggu usang untuk membukanya. Banyak pembaca blog ttentu tidak sabar dan karenanya mereka pergi ke situs lain yang lebih cepat. Hal ini tentu membuat kerugian bukan.

Baca juga :
Cara Membuat / Daftar Blog Baru di Blogger Fresh Update 2019
Cara Praktis Membuat Blog Gratis di Wordpress Terbaru

Jika teman dikala ini sedang mencari-cari template-template keren dan fast loading serta punya fitur responsive, seo friendly, Valid AMP berikut ini saya coba share sesuatu yang mungkin dapat teman jadikan template milik sobat. Semua yang saya share ini ialah template versi gratis.. temlate-template terbaik dan terbaru di tahun 2019.

Selain tampil ringan blog ini juga dapat teman edit lagi sesuai degan abjad sobat. sehinga akan tampak lebih berkarakter dan lebih keren lagi. berikut adalah.

Download template blogger gratis keren, fast load, SEO, Responsive terbaru 2019

1. VIRALISME 
   
   
   
   
   Template yang cukup mengundang hasrat untuk memilikinya. Viralisme di buat dengan model grid dengan dominasi warna merah dengan font keren. Sepertinya template blogger ini dapat teman gunakan pada aneka macam tema blog sobat. Menarik dan saya rasa teman tidak perlu di redisign lagi.
   
   
Template viralisme ini tampaknya mengikuti model trens dikala ini. Modern dan ringan. tampilan dalam versi mobile pun tak kalah menarik dengan tampilan versi dekstop. Ingin mencoba template ini versi gratis.

DEMO
DOWNLOAD TEMPLATE






2. AMPNEWS
   
   
   
   Template amp ini terlihat berbeda dari template-template lainnya. dengan desain warna orange dan hitam membuat template ini terlihat elegan. Ampnews template ini ialah template gratis dengan sidebar di kanan dan di kiri masing-masing sidebar ini bersama-sama dapat teman letakkan widget sesuai dengan keinginan. Template ini juga mempunyai header yang unik dengan icon sajian / navigasi yang keren. Saya pikir template ini akan membuat blog teman semakin keren dan SEO frendly.
   
   


DEMO
DOWNLOAD TEMPLATE


3. BLANTERDEAMP
   
   
   
   Template ini sudah valid amp sehingga cocok bagi teman yang sedang mencari template AMP. simpel dan menarik. Clean dan berwarna putih sehingga terlihat lebih jelas. Mungkin terlihat ibarat dengan template-template lainnya yang mungkin pernah teman lihat, namun untuk problem kecepatan template versi gratis ini dapat teman andalkan. Gimana.. mau coba..
   
   


DEMO
DOWNLOAD TEMPLATE






4. MAGONE 
   
   
   Namanya ialah Magone. Sebuah template yang biasanya di gunakan untuk blog dengan konten bermacam-macam atau blog magazin. Desain sangat rapi dan memang cocok untuk teman yang suka menulis perihal bermacam-macam isu maupun konten-konten seputar teknologi dan seputar isu hiburan.
   
   


DEMO
DOWNLOAD TEMPLATE


5. SIMPLEUP 
   
   
   yang ini meskipun di namai simpleup namun desain terlihat lebih unik. Jika teman lihat disana terlihat ada featured post yang dapat teman manfaatkan untuk mempopulerkan konten artikel di blog sobat. Selain itu disana juga di desain rapi dengan warna putih di percantik dengan widget terkenal post dengan thumnail circle. Lebih jauh lagi, silahkan lihat demo di bawah ini.
   


DEMO
DOWNLOAD TEMPLATE


6. NONAMEAMP 
   
   
   Suka template slim, template blogger dengan ukuran di bawah 1000px saya rasa template ini akan cocok untuk teman miliki.  Noname ialah template bergaya blogging, sehingga cocok bagi teman yang suka menulis seputar tips trik entah itu perihal komputer ataupun tips dalam kehidupan sehari-hari.
   
   


DEMO
DOWNLOAD TEMPLATE






7. MUDAHGRID
   
   
   Suka template dengan grid style yang unik, mudahgrid mungkin akan menjadi pilihan terbaik untuk mengganti template milik sobat. Grid dengan style persegi panjang ini terlihat lebih unik dan rasanya akan membuat teman yang suka mengupload gambar-gambar keren di blog teman akan merasa  lebih puas alasannya thumbail pada homepage ini di buat lebih besar. 


DEMO
DOWNLOAD TEMPLATE


8. GRIDISME
   
   Masih dengan model Grid, namun disini teman dapat melihat tampilan yang apik dengan penataan iklan yang tidak mengganggu. Selain itu pada halaman homepage terlihat lebih luas alasannya sidebar hanya terlihat pada single page.  


DEMO
DOWNLOAD TEMPLATE

Okey.. untuk template berikutnya, lain waktu akan di update lagi.. terima kasih dan selamat mencoba templatenya.. biar suka..

Read More

3 Daerah Download Template Blogger Gratis

Membahas acara ngeblog khususnya Blogger memang tidak akan pernah ada habisnya, apalagi jikalau sudah berbicara perihal template. Pada versi standar Blogger sebetulnya sudah tersedia aneka macam pilihan template yang sanggup kita gunakan, tapi sayangnya tampilannya masih terlihat kurang bervariasi kecuali kita mau untuk melaksanakan perubahan di sana-sini dan sebetulnya hal ini kurang baik, alasannya otomatis setiap melaksanakan eksperimen maka struktur HTML blog juga ikut berubah.

Mengenai template yang baik untuk digunakan, akan banyak sekali pendapat dari rekan-rekan blogger di luar sana namun jikalau disimpulkan maka jawabannya yaitu satu yaitu SEO friendly alias disukai oleh mesin pencari. Logikanya jikalau mesin pencari sudah dekat dengan blog anda maka setiap posting yang anda buat kemungkinan besar akan diprioritaskan masuk halaman satu Google selain pertimbangan faktor lainnya.

Beberapa kriteria template yang SEO friendly tersebut antara lain : ringan loading, dilengkapi navigasi menyerupai breadcumb, mempunyai button share ke aneka macam layanan sosial media, mempunyai strktur H1 H2 H3 H4 yang jelas, lezat dipandang (baca : tergantung selera) dan aneka macam fitur perhiasan lainnya.

Kembali ke topik utama, berikut ini yaitu 3 daerah yang sanggup anda manfaatkan untuk mendownload tempale Blogger secara gratis :

1. Btemplate  

Pada situs ini anda akan banyak sekali menemukan aneka macam template dengan kategori yang beragam, dikelompokkan menjadi : pemilihan menurut jumlah kolom, warna, style, fitur, topik dan hobi. Saya yakin anda akan sedikit kebingungan untuk memilih pilihan alasannya jumlah template yang ditawarkan hingga ratusan. Namun yang patut dibanggakan ternyata beberapa template pada btemplate.com yaitu hasil buatan sahabat blogger Indonesia.

2. Deluxe template 

Berbeda dengan yang pertama, deluxe.net yaitu daerah untuk mendownload aneka macam template premium dan elegan dengan tampilan yang wah. Kelebihannya yaitu bagi pengguna Wordpress juga sanggup memanfaatkan situs ini untuk sanggup mengunduh template secara gratis. Silahkan dicoba sendiri...

3. Evotemplate

Kalau yang satu ini yaitu daerah khusus untuk mendapat template premium hasil rancangan Mas Sugeng, tentunya sebagai seorang bloger anda pernah mendengar nama tersebut. Salut untuk rekan kita ini alasannya beliau telah berhasil menciptakan aneka macam template yang cukup fenomenal dan sudah diakui salah satunya yaitu FASTEST MAGS TEMPLATE. Untuk aneka macam fitur dan atribut SEO-nya template-template buatan Mas Sugeng ini sudah tidak perlu diragukan lagi. 

Secara umum template yang nantinya anda download akan disimpan dalam bentuk winrar, untuk sanggup menggunakannya, silahkan klik kanan file tersebut pada lokasi penyimpanan di komputer lalu pilih exstrak here dan untuk akhirnya bukalah dengan pilihan notepad sehingga semua kodenya terbuka dan siap digunakan. Sebelum mengganti template tidak ada salahnya, sahabat membaca goresan pena saya sebelumnya yaitu : Cara mengganti template blog dengan aman

Demikian informasi yang sanggup saya sampaikan dalam kesempatan ini, jikalau ada informasi perhiasan lainnya silahkan sahabat menambahkannya pda form komentar. Salam blogging !

Read More

10 Tips Penting Untuk Mempercepat Waktu Loading Blog Anda

Hampir setiap blogger pemula gagal ketika berusaha untuk mengurangi waktu loading blognya. Sebagian besar tutorial yang tersedia untuk mengurangi waktu yang dibutuhkan untuk memuat semua halaman blog sering tidak terang dan kurang lengkap. Kami tetapkan untuk menyebarkan cara untuk memecahkan problem ini. Di bawah ini yaitu 10 tips yang benar-benar menarik dan penting untuk mempercepat waktu loading blog Anda sampai 90%.

1. Link Semua Gambar dalam Template Anda Langsung dari Blogger

Saya akan menyebarkan tips penting besok ihwal membuat Backup Gambar di Blogger dan kemudian menghubungkan semua gambar dari sana. Sebagian besar dari Anda memakai template yang tidak resmi disediakan oleh blogger. Template ini sering mengandung gambar yang disimpan pada layanan menyerupai TinyPic atau Photobucket. Ketika blog Anda memuat, browser harus terhubung ke semua server yang menghubungkan ke gambar Anda, alhasil akan mengakibatkan keterlambatan besar dalam waktu loading blog Anda. Apa yang harus Anda lakukan yaitu mengganti semua gambar tersebut dengan gambar yang telah disimpan di dalam blogger. Keuntungan dari hal tersebut akan menimbulkan browser hanya menghubungkan ke Blogger saja dikala memuat gambar Anda, sehingga akan menghemat waktu.

2. Simpan Semua Gambar dengan Format GIF atau PNG

GIF adalah abreviasi dari "Graphics Interchange Format" dan PNG singkatan dari "PortableNetwork Graphics". Kedua format ini juga dikompresi lebih kecil dalam ukuran dan luas didukung oleh semua browser. Tapi ukuran kompresi PNG lebih baik daripada GIF. Dalam perkara sekitar 5-25%. Menggunakan format gambar ini sangat mengurangi waktu loading blog Anda sebesar 60% yaitu 70-90 kb. Namun ukurannya juga tergantung jumlah gambar yang Anda gunakan.

3. Berikan Dimensi yang sempurna Untuk Gambar

Mengatur lebar dan tinggi pada setiap gambar tertentu akan memudahkan browser untuk memuat gambar dengan cepat.Kurangilah ukuran gambar bila ukuran aslinya lebih besar. General aba-aba HTML untuk gambar akan terlihat menyerupai ini:

<img width=”” height=”” src=”URL Of Image” />

Lebar dan tinggi akan memerlukan nilai dalam pixel. Satu pixel sama dengan titik di layar. Sebuah ukuran gambar penuh di blog saya akan mempunyai lebar sekitar "550px" dan tingginya sanggup saya buat sesuai keinginan. 550px hampir sama dengan lebar posting saya. Browser merasa lebih gampang untuk memuat gambar yang dimensinya ditentukan. Pastikan Anda membuat kebiasaan untuk memilih ukuran yang sempurna untuk gambar Anda.

4. Jangan Gunakan Sebuah Gambar Sebagai Background
Jika Anda memakai gambar sebagai background maka saya sarankan untuk menghapusnya. Sebuah gambar latar belakang berulang secara horizontal dan vertikal dan menghabiskan 50% waktu loading blog Anda menjadi semakin lambat. Dengan menghapusnya silahkan lihat perbedaannya. Untuk menghapus gambar latar belakang hanya dengan menemukan aba-aba CSS di dalam template Anda. (Ini terletak di cuilan atas blog Anda. Cukup mencari body)

body { background: #7AA1C3 url(http://xyz.com/blabla.jpg);
width: 980px;
color: #333;
font-size: 14px;
font-family: Georgia;
margin: 0 auto 0;
padding: 0; }

Kode ini akan terlihat berbeda dalam template Anda, tetapi Anda hanya harus melihat teks yang bercetak tebal saja. Cukup hapus URL (https://cakrawalainet.blogspot.com//search?q=modifikasi-blog-anda-agar-memiliki">Hexadecimal Color Chart milik saya

5. Simpan Semua JavaScript Dalam Blogger
Mengapa Anda harus menghubungkan ke situs eksternal untuk menyimpan JavaScript Anda sementara Anda sanggup dengan gampang menyimpannya di Blogger! Simpan semua aba-aba JavaScript Anda di dalam template Anda sempurna di atas aba-aba </head>, lihat pola di bawah ini:

<script type='text/javascript'>
//<![CDATA[
Paste Your JavaScript Code Here
//]]>
</script>

Untuk menemukan URL JavaScript yang terhubung ke situs eksternal, carilah <script type = 'text / javascript'> dalam template Anda (Periksa 'expand widget templates' kotak di pojok kanan atas). sesudah Anda menemukan link menyerupai itu, buka link tersebut di browser. Anda akan melihat potongan besar teks yang kompleks di jendela dan itu yaitu aba-aba JavaScript Anda. Cukup copy paste aba-aba di atas bersama. Ganti semua aba-aba JavaScript dalam template Anda dengan aba-aba di atas dan pastikan bahwa Anda telah mengekstrak aba-aba dari link dan disisipkan dalam aba-aba above.above </ head> memakai aba-aba di atas.

6. Jagalah Kualitas Script Template Blogger Anda tetap Baik
Kesalahan utama yang sering dilakukan yaitu mengupload template yang menarik bagi mereka. Kebanyakan template blogger yang tidak resmi yang tersedia di blogosphere sering dibentuk oleh orang-orang yang tidak menyadari penggunaan HTML dan JavaScript yang tepat. Script template yang tidak tepat, tag yang kosong dan tidak diperlukan, serta JavaScript yang rusak sering membuat spider kesulitan menjelajah isi weblog Anda. Browser juga akan memakan waktu yang usang untuk membaca script yang rusak. Jadi, gunakanlah template yang mempunyai script yang baik.

7. Batasi Penggunaan Iklan
Jika Anda melaksanakan blogging hanya untuk mendapat laba dengan memasang potongan iklan yang besar dan banyak maka keputusan Anda kurang tepat. Jangan membuat blog sebagai pasar ikan. Tampilkan saja beberapa iklan penting dan tempatkanlah di posisi yang sempurna dalam blog Anda. Melakukan ini akan menjaga interface blog Anda tetap higienis dan gampang untuk dijelajahi oleh browser. batasilah iklan Anda maksimal 3 sudah cukup alasannya yaitu penggunaan javaScript yang berlebihan sanggup memperlambat loading blog Anda.

8. Jangan Gunakan Widget dari Blog Directories yang Menggunakan Gambar
Saya melihat baru-baru ini yang banyak dikunjungi yaitu widget yang disediakan oleh blogcatalog dan mybloglog. Widget ini memakai JavaScript yang menghubungkan ke situs lain dan memakai gambar sehingga akan menambah waktu buka blog Anda. Saya memakai meta tag yang diberikan oleh mereka bukan memakai widget mereka. Hal ini membantu dalam mengurangi waktu yang dibutuhkan untuk memuat seluruh halaman saya. Jika Anda benar-benar ingin memakai widget ini silahkan tampilkan beberapa gambar saja.

9. Tampilkan Hanya Empat atau Lima Postingan di Halaman
jangan tampilkan lebih dari 4-5 postingan di Homepage. Melakukan hal ini akan membuat pembaca Anda sibuk membaca postingan yang berbeda dan mereka juga akan menemukan hal menarik untuk melihat seberapa cepat beban Homepage.

10. Menghilangkan Link Eksternal
Jangan gunakan widget yang berasal dari situs eksternal selain blogger. Singkirkan counter stats dan gunakan Google Analytics. Jangan menyimpan gambar pada layanan lain tetapi gunakanlah blogger. Simpan semua JavaScript dalam blogger menyerupai dibahas di atas. Jangan menambahkan link dari direktori blog, mereka tidak membawa kemudian lintas dengan pengecualian blogcatalog dan mybloglog.

Read More

Cara Memasang Font Ikon Yang Menakjubkan Di Template Blogger Anda

Apakah Anda ingin bermain-main dengan template Blogger Anda dan menyesuaikan desain? Atau apakah Anda merancang template yang profesional untuk meraup penghasilan? Bagaimana Anda berurusan dengan ikon template, menyerupai tombol, kontrol form, sinyal navigasi, dll? Kebanyakan orang memakai gambar untuk untuk ikon tersebut yang cenderung memburuk bila ukurannya diperbesar. Beberapa pengembangan akan menurunkan kualitas gambar untuk menghindari persoalan ini, tapi tanpa disadari telah diperkenalkan yang gres dan ini sanggup mempercepat waktu buka halaman sebab ukuran filenya meningkat. Solusinya terletak pada font berbasis ikon menyerupai Font Awesome yang sanggup membantu desainer mengoptimalkan ikon pada situs Anda.

Apa itu Font Awesome?

Font Awesome yaitu font ikon yang awalnya dirancang untuk Bootstrap. Ini yaitu kumpulan dari beberapa SVG (Scalable Vector Graphic) ikon yang sanggup diadaptasi dan dipakai pada halaman Web manapun. Ini yaitu ikon dengan compact-size yang ukurannya tidak berat yang berarti mereka mempertahankan integritas saat ukurannya diperbesar.

Sebagai seorang desainer, ini yaitu kit yang berkhasiat untuk dimiliki kerena akan membiarkan Anda membuat desain profesional dan dioptimalkan untuk halaman web Anda.

Font Awesome mengatakan beberapa fitur yang sangat luar biasa yang membuatnya sempurna, yuk kita simak!

• Font Awesome berisi keloksi 369 ikon SVG dari bermacam-macam kategori termasuk kontrol navigasi, ikon mata uang, aplikasi web, ikon merek, dan sebagainya.
• Font Awesome sangat ringan dan membuat loading blog terasa cepat dibandingkan dengan gambar CSS. Mereka juga terukur dan sanggup diubah menjadi banyak sekali ukuran tanpa mensugesti kualitas.
• Bagian terbaik yaitu font ini gampang disesuaikan! Anda sanggup menerapkan gaya CSS untuk memodifikasinya sesuai kebutuhan Anda. Anda sanggup mengubah ukuran, warna, bayangan, dan segala sesuatu yang biasanya sanggup dilakukan dengan CSS.
• Yang terakhir yaitu ikon font ini GRATISSS..!!!

Menambahkan ikon Font Awesome di Blogger

Ikuti langkah-langkah berikut ini untuk menambahkan ikon Font Awesome di mana saja di blogger Anda (atau halaman web HTML).

Hubungi External Stylesheet

Buka instruksi sumber halaman web Anda dan cari penggalan <head>. Jika Anda ingin menambahkan ikon ini ke dalam template Anda maka perlu membuka Dashboard Blogger Anda lalu masuk ke Edit HTML. Setelah Anda menemukan penggalan header, copy paste baris berikut ini di bawah instruksi <head>.

link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Pastikan Anda menyalin link itu (termasuk penggalan http://). Di sinilah file Font Awesome CSS disimpan. Anda sanggup mendownload ke server Anda sendiri bila Anda mempunyai kecepatan yang besar.

Menambahkan Ikon

Anda sanggup melihat daftar ikon yang tersedia di situs Font Awesome ini. Pilih ikon Anda sukai dan catat nama CSS Class-nya (misal: fa-home atau fa-arrow-down). Sekarang untuk memakai ikon ini, gunakanlah tag <i> menyerupai ditunjukkan di bawah ini.

<i class="fa fa-home"></i>

Anda sanggup mengganti teks yang disorot dengan nama kelas dari setiap ikon yang Anda suka. Misalnya, <i class="fa fa-arrow-down"></ i>. Karena ini yaitu tag inline, Anda sanggup menggunakannya di dalam tag paragraf, daftar tag, bahkan anchor (<a>) tag, dan sebagainya.

Mengedit Ikon

Anda sanggup menerapkan beberapa CSS style untuk sebuah ikon. Hanya mengambil kelasnya dan menulis CSS style yang gres menyerupai yang ditunjukkan di bawah ini.

.fa-home {
 font-size: 32px;
 color: #033;
 padding: 8px;
 border: 1px solid #000;
 float:left;
}

Sangat sederhana kan?? :)

Nah, kini Anda sanggup membuat template Anda sendiri dengan ikon-ikon yang menakjupkan. Bahkan Anda akan mendecak kagum dengan karya Anda sendiri. Silahkan Anda praktikkan di depan Dashboard Blogger Anda masing-masing. Pada postingan selanjutnya kami akan membahas cara melaksanakan kostumisasi pada Font Awesome ini.

Read More

Usaha Mengoptimalkan Kecepatan Loading Blog

Siapa sih yang tidak suka dengan loading blog yang cepat? saya berani menjamin 100 % tanggapan yaitu semua pengguna internet. Bagi seorang pengelola blog hal ini juga termasuk prioritas utama, alasannya yaitu loading blog yang ringan akan diikuti pula oleh peningkatan page view artikel-artikel yang anda tawarkan. Logikanya yaitu pengunjung akan merasa betah berlama-lama untuk membuka aneka macam artikel yang menurutnya menarik tanpa harus menunggu lama.

Terdapat dua hal utama yang menghipnotis kecepatan loading sebuah blog, yaitu :  

1. Faktor eksternal, yang saya maksudkan disini yaitu koneksi internet pengguna yang bervariasi, tingkat kepadatan hosting/server baik itu berbayar atau gratisan dan jenis browser yang dipakai masing-masing pengguna juga ikut menjadi penentu.

2. Faktor internal, yaitu segala sesuatu yang berasal dari dalam blog itu sendiri hal ini meliputi seluruh properti yang dipakai pada blog menyerupai : template, kapasitas gambar, penggunaan CSS dan Javascript, penempatan atau pengaturan widget dan lain-lain. Kita akan mencoba fokus pada faktor kedua ini saja...

a. Pemilihan template

Template yaitu kerangka atau sanggup juga diistilahkan sebagai rumah kosong yang nantinya akan diisi dengan aneka macam perabot. Perbedaannya yaitu setiap template mempunyai ukuran berat yang berbeda-beda, semakin elok dan terlihat glamor sebuah template (dengan aneka macam aksesoris) maka ukurannyapun semakin besar walaupun begitu bukan berarti template sederhana tidak sanggup terlihat indah :). Menurut saya langsung yaitu batas normal sebuah template yaitu 60 Kb, lebih dari itu maka loading akan terasa lebih berat jadi kita dituntut lebih selektif dalam menentukan template. Sekedar untuk menambah referensi, anda juga sanggup membaca artikel saya sebelumnya :

5 HAL PENTING DALAM MELAKUKAN EDITING TEMPLATE (HTML/JAVA SCRIPT)

CARA MENGGANTI TEMPLATE BLOGGER DENGAN AMAN

b. Penggunaan gambar

Kalau mau jujur penggunaan gambar ini tidak akan pernah sanggup dihindari oleh sebuah blog, hal yang paling umum ditemukan yaitu penggunaan gambar pada pecahan header dan background template. Bagian inilah yang paling dahulu terbaca pada ketika browser membuka blog anda. Jika memang mustahil untuk dilepaskan maka usahakanlah semoga gambar tersebut mempunyai ukuran yang kecil. Hal ini juga berlaku pada gambar yang masukkan sebagai pelengkap sebuah artikel. Saat ini banyak tool yang sanggup dipakai untuk mengkompres gambar, anda juga sanggup membaca artikel saya yang berkaitan dengan hal ini :

COMPRESS GAMBAR MENGGUNAKAN MICROSOFT PICTURE MANAGER

FILEminimizer PICTURES TOOL GRATIS UNTUK KOMPRES GAMBAR JPEG

c. CSS dan Javascript

Cascading Style Sheet (CSS) yaitu rangkaian hukum bahasa HTML yang dipakai untuk mengatur tampilan sebuah blog, pada struktur template letaknya diantara <b:skin>.........dan  </b:skin>. Bagian ini juga mempunyai donasi pada kecepatan jalan masuk blog. Mungkin banyak rekan-rekan yang mengkompres CSS blognya untuk semoga arahan ini lebih cepat terbaca, hanya saja dari pengalaman saya memakai beberapa tool kesannya kurang memuaskan alasannya yaitu tampilan blog ikut berubah, penyebabnya yaitu tool tersebut ternyata mengkonversi arahan asli. Saran saya gunakanlah tool compress yang hanya berfungsi untuk menghilangkan spasi yang tidak perlu diantara kode. Anda sanggup mencoba yang satu ini : Textfixer Commpressor . Demikian pula dengan semua Javascript yang terdapat pada template, gunakanlah tool tersebut untuk lebih memperkecil ukurannya.

d. Penempatan dan pengaturan widget

Dari hasil percobaan saya selama ini jumlah widget akan kuat besar pada kecepatan loading blog, baik yang berasal dari script iklan, banner ataupun widget pemanis lainnya. Tanpa bermaksud untuk menggurui pembaca, akan lebih baik jika anda hanya memasang widget yang benar-benar penting saja semisal : Popular post, Arsip, akomodasi pencarian atau artikel berlangganan. Demikian pula halnya dengan iklan, jika terlalu berlebihan juga akan berdampak kurang baik. Bila memungkinkan, aturlah widget yang memakai javascript pada posisi bawah blog hal berarti kita meminta browser untuk lebih dahulu membuka artikel kemudian gres diikuti oleh pembacaan aneka macam widget.

Bila semua item tersebut sudah dirasa optimal, kini saatnya untuk mengetes seberapa cepat loading blog anda. Kita sanggup memanfaatkan Google pagespeed insights sebuah tool gratis milik Google yang akan mengalisa kecepatan sebuah blog pada mode dekstop dan seluler yang masing-masing akan mempunyai skor tertentu, semakin mendekati angka 100 maka dapatlah disimpulkan kecepatan  blog tersebut sudah optimal. Bila belum, maka anda sanggup mengikuti aneka macam saran perbaikan pada tool tersebut.

Mungkin hanya itu saja yang sanggup saya sampaikan dalam kesempatan kali ini, jika sahabat mempunyai pengalaman yang berbeda dalam meningkatkan secara optimal ini jangan sungkan-sungkan untuk memberi komentarnya.

Read More

Cara Menambahkan Widget 3 Kolom Footer Pada Blogger Anda

Apakah Anda yakni seorang blogger yang ingin mempunyai 3 kolom footer yang manis yang terpasang di blog Anda? Jika ya Anda tidak sendirian, kami selalu ada untuk menyebarkan sedikit yang kami ketahui kepada Anda secara gratis. Jika 3 kolom footer ini memang benar-benar Anda butuhkan maka Anda sanggup menambahkannya secara gampang dan sederhana pada blog Anda. Kami telah menyediakan kodenya untuk Anda semua, silahkan Anda terapkan dalam blog Anda semua dengan proses instalasi yang sangat sederhana.

Tapi sebelum kita melompat ke proses instalasi, aku ingin menjelaskan lebih lanjut perihal apa dan mengapa Anda perlu menginstal widget di footer blogger Anda. Pada awalnya dengan widget 3 kolom footer ini Anda sanggup menambahkan banyak gadget yang Anda inginkan, widget footer ini juga menciptakan blog Anda terlihat bagus dan professional. Itu sebabnya banyak blogger memakai widget ini di blog mereka.

Baiklah pribadi saja ikuti langkah-langkah di bawah ini untuk menambahkan widget 3 kolom footer di blog Anda.

Menambahkan 3 Kolom Footer di Blogger

• Login ke Dashboard blog Anda
• Pilih tab Template

• Backup dulu template Anda jikalau diperlukan
• Klik Edit HTML
• Kemudian cari arahan ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian)
• Lalu letakkan arahan di bawah ini sempurna di atas kode ]]></b:skin> tadi

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

• Setelah itu cari arahan </body> dan letakkan arahan di bawah ini sempurna sebelum arahan </body>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

• Klik Save template kemudian masuk ke tab Layout - Gulir ke bawah dan Anda siap menambahkan gadget yang Anda inginkan di sana.

Pengaturan
Anda sanggup dengan gampang menyesuaikan tampilan dan warna dari widget footer ini. Saya telah menandai dan mewarnai bagian-bagian penting dalam arahan CSS di atas. Bacalah deskripsi di bawah ini dengan hati-hati untuk menyesuaikan widget 3 kolom ini sesuai impian Anda. Untuk mengetahui arahan warna, gunakanlah Kode Warna Generator milik kami.

• background:#333434; Gantilah 6 digit arahan warna pada cuilan ini untuk mengubah warna background widget.
• width: 960px; Ini yakni lebar widget. Jika Anda mau, Anda sanggup menyesuaikan nilai ini supaya lebarnya sesuai dengan lebar blog Anda.
• background:#fff dan width: 32%; Ini yakni warna background dan lebar tiga kolom widget yang ditambahkan.
• color:#0084ce; Ini yakni warna Title Heading
• font: bold 14px Arial, Tahoma, Verdana; Edit cuilan ini untuk mengganti ukuran font dan jenis font.
• border-bottom: 3px solid # 0084ce; Edit cuilan ini untuk mengubah ketebalan, style, dan warna border yang muncul di cuilan bawah Title Heading.
• border-bottom: 1px dotted # ccc; Edit cuilan ini untuk mengubah ukuran, style, dan warna border yang muncul di bawah link.

Jika Anda merasa artikel ini berguna, silahkan bagikan artikel ini dengan teman-teman Anda baik melalui Facebook, Twitter, Google Plus dan lain sebagainya. Terimakasih semoga ini membantu..

Read More

Cara Memasang Widget Footer Multi Kolom Di Blogger - Tampilan Menarik

Saya sebelumnya telah menyebarkan tutorial wacana cara menambahkan widget footer 3 kolom di blog dengan mudah, dan hari ini saya akan menyebarkan tutorial memasang widget footer multi kolom yang canggih di blog. Widget ini sanggup menjadi 3 kolom, empat kolom, atau banyak kolom tergantung yang Anda inginkan. Selanjutnya widget footer ini mempunyai beberapa dampak CSS yang ditambahkan ke dalamnya yang membuatnya lebih baik. Marilah ikuti serangkaian langkah gampang berikut ini untuk memasangnya.

Cara Menambahkan Widget Multi Kolom di Blogger!

Pertama-tama kita akan menambahkan instruksi CSS dalam template blogger Anda dan lalu tambahkan instruksi HTML-nya. Kaprikornus tanpa membuang banyak waktu mari kita pribadi menuju langkah-langkahnya.

• Login dulu ke akun Blogger Anda
• Klik Tab Template (pada sajian drop down)
• Backup dulu template Anda bila perlu
• Klik Edit HTML
• Carilah instruksi ]]></b:skin> (gunakan Ctrl + F untuk memudahkan pencarian)

• Kemudian letakkan instruksi berikut ini di bawah kode ]]></b:skin>

/*----- GNR MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

• Kemudian cari instruksi </body> dan paste instruksi berikut ini sempurna di atas instruksi </body>

<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

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

• Simpan Template Anda dan selesai

Sekarang Anda masuk ke Tab Layout dan tambahkan widget Anda yang gres di Footer yang telah Anda buat menyerupai gambar ini.

Anda sanggup mengamati bahwa ada empat kolom secara default dan Anda sanggup menambahkan atau mengurangi jumlah kolom vertikal dengan mengikuti langkah-langkah di bawah ini:

Cara Kostumisasi Widget!

Saya akan membahasnya secara sederhana. Saya pikir untuk warna dan ukuran keseluruhan sudah tepat. Satu-satunya hal yang perlu Anda sesuaikan dengan Template Anda yaitu lebar widget dan jumlah kolom vertikal.

• Untuk mengurangi atau menambah lebar keseluruhan widget, Anda tinggal perlu mengubah width: 960px;
• Jika Anda ingin mengurangi jumlah widget menjadi tiga, maka cukup hapus bab instruksi ini:

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

• Jika Anda ingin menambahkan ekstra kolom, maka tambahkan instruksi berikut di atas kode <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Ingat bahwa lowerbar# yaitu mengacu pada jumlah kolom. Kaprikornus kalau Anda ingin menambahkan kolom kelima maka cukup mengganti lowerbar# menjadi lowerbar5.

Setelah Anda menambahkan kolom kelima maka ingatlah untuk mengubah width: 23%; menjadi width: 17%;.

Anda ulangi langkah 3 untuk memperbanyak jumlah kolom yang Anda inginkan. Tapi 3, 4, dan 5 kolom itu yaitu standar. Jika lebih dari itu maka akan terlihat jelek, jadi pertimbangkan itu.

Semoga artikel ini bermanfaat bagi Anda dan jangan lupa untuk membagikan ini dengan teman-teman Anda kalau Anda menyukainya. Terimakasih.

Read More

Mengapa Meta Description Muncul Di Semua Hasil Pencarian?

Salah satu langkah menuju yang lebih baik dalam mengoptimalkan blog Blogger Anda ialah untuk memahami beberapa pekerjaan yang tidak lengkap dan meninggalkan kode-kode yang tidak berguna. Makara berkat beberapa programer dan SEO sebagian besar bug Blogger telah diselesaikan sampai ketika ini. Satu persoalan dalam standar Blogger template ialah bahwa Meta description Anda muncul di semua judul postingan Anda dalam hasil pencarian bukannya Post description. Ini efek yang buruk bagi peringkat pencarian Anda secara keseluruhan bahwa deskripsi yang sama yang telah Anda menetapkan untuk situs Anda muncul di bawah semua postingan Anda.

Cara Membuat meta Description Hanya Muncul di Homepage

• Login dulu ke akun Blogger Anda dan masuk ke Template
• Backup dulu template Anda jikalau perlu
• Kemudian klik Edit HTML
• Cari meta description yang terletak di bab atas editor HTML Anda, terlihat menyerupai ini:

• Sekarang letakkan meta description di antara isyarat ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Meta Description Goes here
</b:if>

• Simpan template Anda dan selesai!

Cara Lain!

Anda juga sanggup mengganti Meta description ini melalui tab Settings di Dashboard Blogger Anda. Caranya ialah dengan mengklik tab Settings kemudian pilih sajian Search preferences. Di bab Meta tags, klik Edit pada opsi Description. Isilah meta tag Anda sesuai dengan bahasan blog Anda kemudian klik Save changes.

Saya harap perubahan ini akan sangat menguntungkan Blog Anda dengan hasil pencarian yang lebih baik dan mendapat kemudian lintas yang lebih bertarget. 

Read More