Migrasi StumbleUpon ke Mix

Atauruz.com, SEO - Dalam situs resminya StumbleUpon mengumumkan akan pindah pada 30 Juni 2018. Situs sosial bookmark StumbleUpon yang berdiri pada November 2001 ini akan resmi berubah menjadi Mix.com

“StumbleUpon is moving to Mix on June 30th. Join us today!

From the makers of StumbleUpon, comes Mix: a new way to discover and save all your favorite things on the web.”

StumbleUppon di kalangan web dan blog developer sangat dikenal sebagai situs sosial bookmark yang dapat membantu membuat backlink untuk SEO. StumbleUpon dapat menghubungkan anggotanya dengan anggota lain dengan minat yang sama misalnya tentang kesehatan, teknologi, fotografi, SEO, web developer dan berbagai minat lainnya. Setelah nantinya berganti menjadi Mix maka Mix.com akan memiliki fitur yang sama. Mix tetap menggunakan filter kolaborasi dalam menggabungkan pendapat manusia dengan mesin pembelajaran preferensi pribadi.

Mix.com dapat menyambungkan situs dan blog anda secara langsung dengan anggota lain yang memiliki minat yang sama. Pola inilah yang dapat meningkatkan pencarian situs dan blog anda di semua mesin pencarian (Search Engine). Konten situs dan blog berupa artikel beserta foto, video, software dan lainnya akan lebih mudah di akses atau ditemukan oleh orang lain. Sehingga sebagai situs sosial bookmark maka Mix menjadi salah satu cara untuk meningkatkan peringkat halaman situs dan blog.

Mix.com Situs sosial bookmark pengganti StumbleUpon 

Seperti hanlnya StumbleUpon, para pengguna Mix juga dapat memberikan penilaian dan meninjau blog satu sama lain serta bisa bergabung di dalam komunitas forum untuk berdiskusi mengenai topik tertentu. Pengguna dapat memanfaatkan komentar dan berbagi link posting blog atau website untuk topik spesifik sesuai komunitas yang di ikuti.

Transisi akun StumbleUpon ke Mix.com dapat bekerja dengan halus dan baik di setiap browser dan smartphone. Pengguna dapat melakukan import SU Favorites, interests (minat) dan tags untuk membuat Mix Collections dan membagikannya dengan mudah dengan teman-teman, seperti yang dikatakan oleh Co-Founder StumbleUpon yaitu Garret Camp di sebuah Medium Post.

#STUMBLEUPON #MIX #SOCIALMEDIA #DISCOVERY #SOCIALBOOKMARK #BLOGBOOKMARK #MIGRASISTUMBLEUPON #MIXCOLLECTIONS

Read More

Optimasi CSS dengan CSS optimizer

Atauruz.com, CSS Optimizer - Struktur website atau blog terbentuk dari berbagai macam kode atau scripts diantaranya HTML, CSS, Javascripts dan lain sebagainya. Semakin banyak penulisan kode yang di sematkan (Embedded) maka akan membuat waktu loading semakin lama atau lambat. Proses loading yang lama dapat mempengaruhi kenyamanan bagi para pengunjung website atau blog anda sehingga halaman anda  mudah ditinggalkan oleh pengunjung. Untuk mengatasi hal tersebut dibutuhkan beberapa trik optimasi agar kode dapat di eksekusi lebih cepat oleh browser. Kode yang perlu di kompresi agar ringan saat dibuka adalah HTML, Javascript dan CSS. Sebelum melakukan edit sebaiknya laukan back up dulu.

Masuk ke dashboard menu lalu edit HTML dan carilah kode yang akan dihapus :

1. Hapus kode CSS yang seperti ini. Periksa seetiap kode sejenis ini untuk di hapus

    Contoh : Hapus kode  seperti  /*--------------*/ atau /* head ====================*/

2. Ganti kode HTML warna.

    Contoh : Kode warna #ffffff diganti menjadi #fff.

3. Ganti Javascript seperti “Code Jquery” dengan type terkompresi yang ditandai dengan (min.js).

    Contoh : <script src='https://code.jquery.com/jquery-migrate-1.4.0.min.js'/>

4. Hapus kode HTML yang tidak perlu.

    Contoh : <!-- twitter summary card -->  Di bagian ini saja yang dihapus bukan meta-contentnya.
5. Gunakan CSS Optimizer atau CSS Kompresor 

6. Tambahkan kode javascript dibawah ini sebelum </head> untuk CSS Optimizer :

<script type="text/javascript">

function convert(){var b=$id("source"),c=$id("result"),a=$id("status"),d;c.value=cssOptimize(b.value);b=b.value.length;c=c.value.length;d=(b-c)/b*100;a.innerHTML="Before: &lt;b&gt;"+b+"&lt;/b&gt; bytes. After: &lt;b&gt;"+c+"&lt;/b&gt; bytes. Ratio: &lt;b&gt;"+d.toFixed(1)+"%&lt;/b&gt;."}function cssOptimize(a){a=a.replace(/[\r\t\n]/g,"");a=a.replace(/ {2,}/g," ");a=a.replace(/ *([{}:;,]) */g,"$1");a=a.replace(/;}/g,"}");a=a.replace(/#([\da-f])\1([\da-f])\2([\da-f])\3/gi,"#$1$2$3");a=a.replace(/(\d+px)( \1){3}/gi,"$1");a=a.replace(/(\d+px \d+px) \1/gi,"$1");a=a.replace(/(\d+px) (\d+px) (\d+px) \2/gi,"$1 $2 $3");a=a.replace(/(\D)0px/gi,"$10");if(!isChecked("STB")){a=a.replace(/}/g,"}\n")}if(isChecked("comments")){a=a.replace(/\/\*.*?\*\//g,"")}return a}function isChecked(a){return $id(a).checked}function $id(a){return document.getElementById(a)};

</script>

Catatan : Cara copy script lakukan klik text + Shift lalu tekan CTRL+C
Form copy sengaja saya ganti formatnya tanpa box karena blog saya di copy share tanpa izin oleh Mutiara Softindo - Depok di websitenya yang bernama "grosirwedges".

7. Lanjutkan edit CSS seperti gambar dibawah ini :

Optimasi CSS dengan edit kode CSS

Fungsi dari kode javascript tersebut untuk optimasi dengan mengkompresi kode CSS dan HTML. Atauruz juga menyediakan CSS Optimizer silahkan masuk ke : CSS Optimizer 

Dengan tersedianya online tool CSS Optimizer atau CSS Kompresor ini dapat membantu anda melakukan kompresi kode CSS agar lebih sederhana.

#CSSOptimizer, #OptimasiCSS, #CSSKompresor, #AtauruzCSSOptimizer, #SEOCSS

Read More

Cara buat penterjemah bahasa di blog

Membuat blog yang bisa dibaca oleh pembaca di seluruh dunia membutuhkan teknis cara penulisan dan opsi penterjemah bahasa. Bila anda membatasi pembaca blog hanya untuk domestik maka itu berarti anda kurang memperhatikan cara berbagi pengalaman dan ketrampilan. Pengunjung atau pembaca blog anda satu sama lain memiliki wawasan yang berbeda-beda sehingga kita perlu di siasati agar blog kita bisa lebih bermanfaat bagi orang banyak.

Salah satu teknik penulisan blog atau website yang mampu diterjemahkan secara baik atau minimal memiliki 80% akurasi terjemahan perlu menggunakan bahasa yang lebih formal. Selain itu juga diperlukan trik agar terjemahan bahasa bisa lebih mudah di baca oleh engine translator. Berikut syarat penulisan yang diperlukan :

1. Bahasa harus formal.

2. Tata bahasa diatur agar mudah di translasikan.

3. Tanda baca harus mengikuti kaidah penulisan yang benar.

4. Menggunakan embedded translator

Ciri-ciri blog atau website yang dapat diterjemahkan adalah saat ditemukan di search engine ada pilihan translasi bahasa. Pilihan tersebut bisa muncul di blog lokal bila terdapat embedded translator atau bila pembaca memiliki translator AddOns pada browser mereka. Embedded traslator yang akan dipasang memiliki 100 lebih pilihan bahasa dan pilihlah sesuai dengan kebutuhan target pembaca blog anda. Cara memulainya sebagai berikut :

1. Daftarkan blog anda ke Google Translator disini 

2. Masukkan nama blog atau website anda.

3. Pilih bahasa yang digunakan pada blog atau website anda,
    pilih saja English.

4. Klik next ke Plugin Setting.

    a. Pilih Translation Language misalnya All atau disesuaikan.

    b. Pilih Dispaly Mode : Inline > Dropdown Only atau Vertical.

    c. Pilih : Automatically display translation banner.......

5. Klik Get Code lalu salin kodenya.
6. Masuk ke dashboard blogger, pilih layout dan tambahkan widget  
    (gadget) berupa HTML/Javascript dan pastekan kode tersebut
    diatas lalu save. Setelah di save silahkan di atur posisinya sesuai
    dengan keinginan anda.

Pendaftaran Google Translator

Tampilan di browser

Setelah di save lalu anda coba view agar script berjalan. Kemudian pada tab browser silahkan ketik nama blog / website anda. Bila di posisi kanan ditemukan kata “ Translate this page”, itu artinya anda sudah berhasil membuat blog yang bisa dibaca oleh pengunjung di berbagai belahan dunia.

Read More

Buat label di menu navigasi

Setiap blogger memiliki selera masing-masing yang berbeda dalam membuat blog. Ada yang lebih fokus pada performa,visual design dan kemudahan dalam navigasi. Bagi yang fokus pada performa biasanya tidak terlalu mementingkan visual design bahkan ada juga yang tidak peduli pada navigasi yang mudah. Bagi mereka yan g penting blognya aman-aman saja dan mudah dibuka oleh pengunjungnya. Sedangkan mereka yang fokus pada visual design seringkali lupa pada performa dan kemudahan menu navigasi. Dan bagi yang fokus pada kemudahan navigasi kerap bingung pada tata letak yang memudahkan bagi pengunjung blognya.

Label atau category umumnya terpisah dari menu navigasi dan biasanya menggunakan widget/gadget. Posisinya bebas, bisa di sidebar ataubahkan di footer. Kali ini saya ingin berbagi tips membuat label atau category yang standalone alias berada di menu navigasi. Dan space halaman yang tersisa dapat anda gunakan untuk keperluan yang lain misalnya pasang banner iklan dan sebagainya. Hanya dengan klik menu navigasi maka akan terbuka submenu yang berisi label atau category. Berikut tahapannya :

1. Buka dashboard, pilih tema/theme lalu edit.

2. Cari menu navigasi dibawah <body> atau ketik Home

Contohnya seperti ini :

<div class='span-16'>

<div class='menu-primary-container'>

<ul class='menus menu-secondary'>

<li><a href='https://saya.blogspot.com'>Home</a></li>

<li><a href='#'>Category</a>

<ul class='children'>

<li><a href='https://saya.blogspot.com/search/label/MotoGP'>MotoGP</a></li>

<li><a href='https://saya.blogspot.com/search/label/Moto2'>Moto2</a></li>

<li><a href='https://saya.blogspot.com/search/label/MotoGP%20Team'>MotoGP Team</a></li>

<li><a href='https://saya.blogspot.com/search/label/Tes%20Pramusim'>Tes Pramusim</a></li>

<li><a href='https://saya.blogspot.com/search/label/Pembalap'>Pembalap</a></li>

</ul>

</li>

<li><a href=' https://saya.blogspot.com/p/featured.html '>Featured</a></li>

<li><a href='https://saya.blogspot.com/p/sitemap.html'>Sitemap</a></li>

<li><a href='https://saya.blogspot.com/p/disclaimer.html'>Disclaimer</a></li>

</ul>

</div>

</div>

Urutan menu tersebut seperti ini :

Menu Label Dropdown

Menu Category diberikan link '#' artinya ketika di klik tidak akan membuka halaman tetapi akan memunculkan submenu. Text yang berwarna biru adalah nama label tujuan, sedangkan text yang berwarna hijau adalah navigasinya. Membuat submenu label/category harus disertai “search/label” atau lengkapnya  https://namablog.blogspot.com/search/label/nama-labelnya. Copy paste saja kode di atas lalu ganti nama blognya dan nama labelnya. Nama label yang lebih dari 2 kata harus ditulis seperti ini, misalnya : Tutorial%20menu .

 

Edit theme in dashboard

Sebagai catatan, setiap blog kadang memiliki kode berbeda tetapi panduan utamanya adalah anda harus mencari kode navigasi menu Home untuk mengedit kodenya, kira-kira mirip seperti itu lalu ganti kodenya seperti diatas. Bila anda memiliki sitem menu 2 yaitu di atas header dan dibawah header, sebaiknnya edit dibagian menu kedua (menu-secondary-container). 

Read More

Comment form pada blog hilang

Template pada sebuah website dan blog terdiri dari konstruksi tata letak dan design. Sehingga setiap template bisa memiliki scripts atau kode-kode yang berbeda sesuai dengan kebutuhan pembuat dan pemakainya. Ada yang memiliki fitur dan menu berbeda-beda bahkan ada yang memodifikasinya agar lebih baik secara tampilan,performa serta fungsi bagi pembacanya. Perbedaan script itulah  yang beberapa kali saya temui dalam berbagai komentar pada sebuah blog atau website yang membahas beberapa tutorial. Salah satunya misalnya adalah masalah pada template yang hilang atau tidak muncul. Sudah banyak menyalin kode untuk ditambahkan hingga mengganti kodenya  namun tidak juga berhasi. Untuk itu tips kali saya khususkan bagi template yang memliki kode berdeda. Biasanya template yang hilang atau tidak muncul comment form-nya adalah template yang modern atau template yang sudah di modifikasi.

Jangan tergesa-gesa mengganti script bila mengalami masalah tersebut. Perhatikan dulu apakah template defaultnya memang tidak ada comment form atau hilangnya comment form tersebut akibat banyaknya memodifikasi script. Sebelum memperbaiki atau mengubahnya dan agar tidak membuang waktu anda, check kode berikut :

Masuk ke dashboard, pilih theme dan edit. Cari kode berikut :

<p class ='comment-footer'>

Atau lebih lengkapnya seperti ini :

<p class ='comment-footer'>

<b:if cond='data:post.alloNewComments'>

<b:include data='post' name='threaded-comment-form'/>

<b:else/>

<data:post.noNewCommentsText/>

</b:if>

</p>

<b:if cond='data:showCmtPopup'>

<div id='comment-popup'>

<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>

</iframe>

</div>

</b:if>

Perhatikan pada comment-footer lalu temukan kode scrolling, bila nilainya 'no' maka ganti menjadi 'yes' kemudian save.

Perbaiki comment form pada blog

Disini saya hanya berbagi tips hanya untuk kode template yang berbeda daripada umumnya. Bila kode pada template anda sama persis maka masalah anda sudah selesai. Lain halnya jika anda memiliki kode yang tidak sama dengan kode tersebut diatas. Jika kode anda tidak sama maka anda akan dengan mudah menemukan berbagai cara mengatasinya diblog atau website lain.

Read More

Editor tema di blogger mengalami error

Para blogger umumnya senang mencoba beberapa template sebelum akhirnya menetapkan pilihan template yang sesuai bagi blognya. Setiap platform blog memiliki content management system atau yang biasa dikenal dengan nama CMS. CMS adalah sistem pengelolaan dari sebuah blog atau website yang meliputi konstruksi, design dan isi. Jika CMS mengalami masalah pada editornya maka akan berakibat fatal bagi para blogger. Salah satu masalah yang paling ditakuti oleh pengguna blogger adalah bila editor tema (Theme Editor) pada dashboard blogger tidak bekerja alias error. Masalah pada editor tema yang sangat parah adalah ketika terjadi Bootloop yang menyebabkan Black Screen. Pada keadaan ini para blogger akan menyerah dan membuat blog baru sertahanya bisa mengambil isi blognya saja. Apa sebenarnya penyebab dari error pada editor tema? Mengapa terjadi bootloop?

Bootloop pada editor tema tidak berhubungan dengan cache, history pada browser dan jaringan internet yang lemah. Ada faktor-faktor yang memicu terjadinya hal tersebut. Bootloop yang menampilkan blackscreen sangat berbeda kasusnya dengan error pada ketika mengedit template. Error dengan peringatan seperti “Ups,Itu kesalahan”  dan sejenisnya bisa diperbaiki tergantung dari hasil analisa penyebabnya, namun ketika anda mengalami masalah bootloop maka itu akan menjadi bencana besar bagi blogger.

Ketika saya mengalami hal tersebut, tidak tanggung-tanggung kedua blog saya mengalami masalah yang sama. Saya coba mencari tutorial mengatasi bootloop pada editor tema dari berbagai forum di luar negeri karena di lokal tidak saya temukan. Ternyata blogger asing juga mengalami hal yang sama dan mereka tidak tahu apa penyebabnya. Di karenakan saya malas membuat blog baru, akhirnya saya putuskan untuk meneliti penyebab bootloop (Black Screen) pada editor tema di blogger. Kesimpulan dari penelitian saya soal penyebab bootloop adalah akibat adanya script yang tumpang tindih alias konflik untuk fungsi yang sama. Kode-kode tersebut berupa javascript yang biasanya di letakkan pada header yang posisinya berada dibawah <head>. Konflik pada javascript inilah penyebab terjadinya bootloop sehingga ketika editor dibuka maka akan muncul black screen.

Namun kali ini saya hanya akan fokus pada perbaikan menormalkan fungsi editor tema saja. Berikut yang harus dipersiapkan :

1. File back up terakhir ketika blog masih normal. File backup template ini berekstensi XML, contohnya (theme-72001112224449031234.xml). File ini nantinya akan dibuka menggunakan aplikasi Wordpad atau Notepad.

2. Login ke akun blogger anda dan anda akan masuk ke dashboard.

Catatan, Cara memperbaiki editor tema ini membutuhkan kecepatan dan kadang harus dilakukan berkali-kali. Blog pertama saya dapat teratasi hanya dalam waktu 2 menit tetapi blog kedua saya baru dapat teratasi dalam waktu 35 menit meskipun problemnya sama dan memiliki embedded script yang sama pula.

Tampilan Black Screen di editor tema blog

Kita lanjutkan, Langkah pertama :

1. Saat di dashboard ketika anda memilih menu tema (Theme) lalu mencoba klik menu Edit, maka muncul editor lalu yang terjadi adalah dalam hitungan detik akan muncul blackscreen dengan logo blogger.Pada keadaan bootloop seperti ini bila anda tunggu hingga full load maka itu tidak akan berhasil. Segera lakukan back di tab browser berupa tanda panah ke kiri (Sebelumnya), saya anggap anda tahu cara ini. Setelah back maka anda akan berada di menu tema lagi. Perhatikan baik-baik, anda harus bekerja cepat pada tahap ini. Klik edit begitu muncul editor langsung segera klik “Revert widget themes to default” lalu akan muncul daftar widget yang akan dikembalikan. Dan checklist semua lalu save. Masalahnya adalah anda harus melakukan itu dengan cepat karena bila terlambat maka akan muncul blackscreen lagi. Ulangi lagi beberapa kali hingga berhasil.

2. Setelah berhasil lalu buka file backup yang berekstensi XML menggunakan Wordpad atau Notepad. Copy seluruh script / kode lalu paste ke editor tema blogger dan “Save Theme”.

Editor Tema- Revert Widget to Default

Pertanyaan lainnya, Bagaimana bila tidak mempunyai file backup? Gampang, setelah “Revert widget themes to default” berhasil dan editor sudah terbuka, hapus semua kode Javascript yang ada di bawah <head>hingga <title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

Lengkapnya begini :

<head>

<meta charset='utf-8'/>

<!-- Global site tag (gtag.js) - Google Analytics -->

<script async='async' src='https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX'/>

<script>

  window.dataLayer = window.dataLayer || [];

  function gtag(){dataLayer.push(arguments);}

  gtag(&#39;js&#39;, new Date());

  gtag(&#39;config&#39;, &#39;UA- XXXXXXXXX &#39;);

</script>

/* ---- Bila disini ada kode Javascript ---- */

KODE JAVASCRIPT - Pertama                                     *HAPUS*

KODE JAVASCRIPT - Kedua                                        *HAPUS*

KODE JAVASCRIPT - Selanjutnya bila masih ada       *HAPUS *

/* ------------------------------------------------ */

<meta content='width=device-width, initial-scale=1.0' name='viewport'/>

<link href='/favicon.ico' rel='shortcut icon' type='image/x-icon'/>

<meta content='....................................' name='description'/>

<meta content='.....................................' name='keywords'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

Hapus semua kode javascript  setelah <head> kecuali script google analytic dan kode html jangan di hapus. Setelah anda hapus lalu anda ganti tema (Themes) terserah dari bawaan blogger atau  pakai template lain.

Ingat..kecepatan dan kesabaran melakukannya berkali-kali adalah kunci utama keberhasilan mengatasi masalah ini. Sukses selalu

Read More

Memanfaatkan uploader di blogger

Melanjutkan posting terdahulu disini Link ini tentang upload gambar untuk gallery yang memiliki banyak teknik. Media uploader yang stabil dan eksis diperlukan agar dikemudian hari gambar pada blog tidak mengalami masalah.

Meng-upload gambar di blog untuk mengisi widget / gadget sangat mudah tetapi mencari widget yang mendukung fitur gallery tidak ada secara default. Kita harus membuatnya sendiri dengan cara menambahkan kode HTML dan CSS. Bila widget yang tersedia berupa HTML/Javascript maka persoalannya adalah kita memerlukan uploader. Media uploader untuk menyimpan gambar atau foto milik kita sendiri memang banyak tetapi perlu dipertimbangkan berbagai hal seperti potensi error yang bisa terjadi dan dukungan aplikasinya. Contohnya Picasa yang sekarang telah discontinued lalu digabung menjadi Google Photo,hal ini dapat menyebabkan perubahan pada alamat gambar sehingga tumbnail kosong. Sedangkan ImageShack sebagai aplikasi penyimpanan gambar yang bersifat berbayar sehingga riskan. Lalu bagaimana cara mengatasinya?

Blogger sebenarnya telah menyediakan default uploader gambar yang bisa dimanfaatkan secara optimal. Google telah memperhitungkan hal itu dan kita dapat memanfaatkannya secara mudah,efektif dan efisien,jadi kita tidak perlu repot mencari aplikasi tambahan dalam mengelola media penyimpanan gambar atau foto. Bagaimana dengan ID dan alamat gambar yang panjang? Kita akan membuatnya menjadi lebih singkat, berikut tahapan memanfaatkan uploader di blogger :

Buka Dashboard dan buat entry baru (New Post) dengan mode Compose. Pilih menu upload gambar yang tersedia. Setelah ter-uploaded lalu klik gambar pilih ukuran asli (Original Size) dan isi property gambar sebagai berikut, Title Text di isi dengan judul posting tetapi dipersingkat. Misalnya “tutorial Upload gambar dan foto” menjadi “upload gambar”. Kemudian ALT Text di isi dengan nama gambar misalnya “bunga.jpg”. Setelah diberikan property gambar lalu di “Save” tetapi jangan di “Publish”. Pindah ke mode HTML dan copy alamat serta ID gambar. Contoh :

<div class="separator" style="clear: both; text-align: center;">

<a href="https://3.bp.blogspot.com/-9jNYgt4x1q6/WxGho0J9SPN/AACCAAKABBr/j-3KsytPC1gZccAIdgxYy68HlBMnC21RwCLcBMAs/s1600/flower.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="300" data-original-width="615" src="https://3.bp.blogspot.com/-9jNYgt4x1q6/ WxGho0J9SPN/ AACCAAKABBr/j-3KsytPC1gZccAIdgxYy68HlBMnC21RwCLcBMAs/s1600/flower.jpg"  /></a></div>

Lalu “Save” tetapi jangan di “Publish”, sehingga posting tersebut menjadi Draft saja. Kemudian copy dan simpan alamat serta ID gambar tersebut di notepad atau aplikasi sejenisnya sebagiai dokumentasi anda.

Ada dua cara menggunakan alamat dan ID gambar tersebut, tergantung kebutuhan anda. Misalnya untuk di widget gambar maka anda copy-paste ke widget sebagai berikut :

<a href=’https://3.bp.blogspot.com/-9jNYgt4x1q6/WxGho0J9SPN/AACCAAKABBr/j-3KsytPC1gZccAIdgxYy68HlBMnC21RwCLcBMAs/s1600/flower.jpg’ imageanchor=’1’ style=’clear: left; float: left; margin-bottom: 1em; margin-right: 1em;’><img border=’0’ data-original-height=’300’ data-original-width=’615’ src=’https://3.bp.blogspot.com/-9jNYgt4x1q6/ WxGho0J9SPN/ AACCAAKABBr/j-3KsytPC1gZccAIdgxYy68HlBMnC21RwCLcBMAs/s1600/flower.jpg’  /></a>

Bila anda ingin menggunakannya di menu  “Theme” untuk “Edit HTML”, agar lebih efisien dan tidak membingungkan maka anda dapat mempersingkat kodenya dan menambahkan <a href=’#’> menjadi seperti ini :

<a href=’#’><img src=’https://3.bp.blogspot.com/-9jNYgt4x1q6/ WxGho0J9SPN/ AACCAAKABBr/j-3KsytPC1gZccAIdgxYy68HlBMnC21RwCLcBMAs/s1600/flower.jpg’  /></a>

Apakah cukup dengan ID gambar saja tanpa alamat gambar tanpa perlu mengisi <a href=’#’>? Iya,itu sudah cukup karena gambar kita sudah ada di peyimpanan default pada blogger.

Cara mengcopy bagian kode dengan klik text lalu seleksi dan tekan CTRL+C. Selamat mencoba, salam blogger

Read More

Hindari kode dan string yang tidak diperlukan

Perkembangan teknologi blog dan website cukup pesat sehingga turut mempengaruhi adaptasi kode dan string agar dapat berjalan dengan baik ketika di eksekusi oleh browser dan perangkat (Device).  Untuk itu diperlukan siasat memperbaiki kode (script) dan string yang disesuaikan dengan perkembangan platform masa kini. Platform HTML saat ini sudah mencapai versi HTML5  sehingga bila tidak kita sesuaikan maka  blog atau website yang kita bangun akan ketinggalan.  Berbagai ketertinggalan ini meliputi, halaman yang lambat di ekseskusi atau di load oleh browser, halaman yang hanya bisa dibaca oleh pembaca di negara tertentu dan dukungan fitur yang terbatas.

Membangun sebuah blog dan website tidak selalu harus mengutamakan design template yang rumit dan beragam. Design yang kompleks bisa jadi justru semakin membuat blog atau website anda menjadi tidak responsive sehingga tidak efisien bagi para pengunjungnya. Untuk itu pelan-pelan perlu diperbaiki script didalamnya, diantaranya meliputi kode HTML dan CSS yang harus disesuaikan.

HTML dan CSS

Didalam konstruksi blog atau website, Kode HTML terletak di antara <HTML> hingga ke bagian penutupnya yaitu </HTML>. Sedangkan kode CSS berada di tengahnya diantara <b:skin> hingga </b:skin>. Untuk kode HTML yang belum mendukung HTML5 biasanya ditulis dengan html (huruf kecil), sedangkan yang sudah mendukung HTML5 ditulis dengan HTML (huruf besar).

Langkah pertama memperbaiki kode HTML :

1. Kode awal yang belum mendukung HTML5 ditulis sebagai berikut :

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>

Sementara kode yang sudah mendukung HTM5 ditulis sebagai berikut :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/> 

...................................

...................................

</HTML>

Catatan : Penutup harus sama menggunakan huruf besar <HTML>....</HTML>

2. Menghapus kode berikut :

<link href='https://plus.google.com/119152640378100346109/post' rel='publisher'/>
<meta content='follow, all' name='googlebot-image'/>

3. Menghapus kode berikut :

<b:include data='blog' name='all-head-content'/>

4. Menghapus kode berikut :

<b:include name='nextprev'/>

Ganti dengan kode berikut :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<! navigation >
<b:include name='nextprev'/>
</b:if>

Catatan :

A. Kodenya bukan seperti ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!--  navigation -- >
<b:include name='nextprev'/>
</b:if>
B. String (--) pada <!-- navigation -- > tidak diperlukan.

5. Hapus kode berikut :

<b:include name='quickedit'/>

Dikarenakan banyak kode lainnya maka untuk tahap awal perbaikan kode HTML sampai disitu dulu, selanjutnya perbaikan pada kode CSS.

Kode CSS

Langkah kedua memperbaiki kode CSS :

1. Kode CSS diawali dengan kode seperti ini :

<b:skin><![CDATA[*/

Ganti kode tersebut dengan kode berikut :

<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
<! /* <b:skin><![CDATA[*/

... ISI KODE CSS .......

]]></b:skin>

2. Hapus semua string (--) berikut di setiap kode CSS

*/ ----------------------------------------------- */

Misalnya :

*/  headings 

--------------------------------------------------- */

Menjadi :

*/  headings  */

Mengapa tidak semuanya saja dihapus? Mengapa harus di sisakan menjadi */ headings */

Hal tersebut agar nantinya dapat memudahkan kita mencari kata “headings” di kolom pencarian pada saat akan memodifikasi kode CSS.

Bila anda ingin mengkopi kode yang ada disini caranya , Klik text 2X lalu seleksi text dan tekan CTRL+C. Dan untuk melengkapi perbaikan kode lainnya akan saya ulas di posting berikutnya.

Salam santun blogger

Read More

Buat header dan banner sejajar

Setiap blog yang telah di modifikasi template, widget, domain dan struktur kelengkapan lainnya akan memiliki kode/script yang berbeda-beda. Bahkan versi editor pada blog juga mengalami perubahan. Perubahan itu terjadi karena teknologi blog dan website yang terus berkembang, misalnya versi HTML dan pembaharuan kode yang mendukung teknologi baru.

Ada seorang blogger yang mengalami masalah membuat header dan banner bersebelahan. Dia mencoba browsing hingga menerapkan trick yang dia temukan di lebih 10 blog tetapi selalu gagal. Alasannya header dan banner tidak sejajar alias tumpang tindih tidak karuan. Ternyata dia baru menyadari bahwa kode default pada blognya berbeda dan sebagian besar trick yang dia dapatkan dari banyak blog tersebut ternyata hasil copy-paste dari blog lainnya. Lalu bagaimana solusinya?

Berikut cara mudah menambahkan widget untuk banner agar sejajar dengan header :

Persiapan awal :

A. Buatlah gambar Header berukuran 342 X 110 dan Banner berukuran 468 X 90 dengan format PNG bila background ingin transparan atau dengan format JPG bila background berwarna. Untuk gambar banner, silahkan anda upload ke Google Photo. Setelah di upload, anada klik gambar lalu klik kanan pilih “Copy Image Address”, buka notepada atau MS Word lalu pastekan alamatnya dan simpan.

B.Masuk ke dashboard pilih Tema/Themes lalu ubah setting lebar halaman menjadi 990, biasanya halaman default blogger punya ukuran lebar 930. Bila anda menggunakan 2 sidebar maka setting bagian kiri 200 dan bagian kanan 250 hingga 260. Atau boleh kiri 210 - kanan 250 lalu terapkan.

Langkah 1 :

- Klik back to blogger agar masuk ke menu dashboard lalu pilih Tata Letak/Layout.

- Tambahkan Add Gadget/Widget berupa HTML/Java Script. Biarkan kosong dulu.

- Pindah ke menu Tema/Themes, pilih edit HTML. Cari kode HTML <header>, untuk mempercepat tekan CTRL + F bersamaan lalu copy paste kode <header>. Anda  akan menemukan kode  tepat di bawah <header> yaitu <div class='header-outer'>. Kode tersebut panjang hingga ke penutup kode HTML </header>. Berikut kode HTML-nya :

<header>

<div class='header-outer'>

<div class='header-cap-top cap-top'>

 <div class='cap-left'/>

<div class='cap-right'/>

</div>

....................................

....................................

.....................................

<div class='header-cap-bottom cap-bottom'>

<div class='cap-left'/>

<div class='cap-right'/>

</div>

</div>

</header>

Layout

Catatan : Ganti semua kode berwarna merah tersebut di atas dengan kode berikut :

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

<div class='row' id='header-wrappers'>

<div class='headerleft'>

<b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Atauruz (Header)' type='Header' version='1' visible='true'>

<b:includable id='main'>

<b:if cond='data:useImage'>

<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>

<b:if cond='data:mobile'>

<div id='header-inner'>

<div class='titlewrapper' style='background: transparent'>

<h1 class='title' style='background: transparent; border-width: 0px'>

<b:include name='title'/>

</h1>

</div>

<b:include name='description'/>

</div>

<b:else/>

<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;_height: &quot; + data:height + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>

<div class='titlewrapper' style='background: transparent'>

<h1 class='title' style='background: transparent; border-width: 0px'>

<b:include name='title'/>

</h1>

</div>

<b:include name='description'/>

</div>

</b:if>

<b:else/>

<!--Show the image only-->

<div id='header-inner'>

<a expr:href='data:blog.homepageUrl' style='display: block'><h1 style='display:none'/>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

<Show the description>

<b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>

<b:include name='description'/>

</b:if>

</div>

</b:if>

<b:else/>

<No header image>

<div id='header-inner'>

<div class='titlewrapper'>

<h1 class='title'>

<b:include name='title'/>

</h1>

</div>

<b:include name='description'/>

</div>

</b:if>

</b:includable>

<b:includable id='description'>

<div class='descriptionwrapper'>

<h3 class='description'><span><data:description/></span></h3>

</div>

</b:includable>

<b:includable id='title'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:title/>

<b:else/>

<a expr:href='data:blog.homepageUrl'><data:title/></a>

</b:if>

</b:includable>

</b:widget>

</b:section>

</div>

<div class='headerright'>

<b:section class='headerright' id='headerright' maxwidgets='1' showaddelement='yes'>

<b:widget id='HTML1' locked='false' title=' ' type='HTML' version='1' visible='true'>

<b:includable id='main'>

<Only display title if it's non-empty >

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

 <b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:section>

</div>

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

 </div>

Setelah kode tersebut anda copy paste lalu save. Itu adalah langkah pertama mengganti kode HTML.

Selanjutnya mengganti kode CSS. Berikut cara mengganti kode CSS :

Langkah II :

- Cari kode <b:skin>, Klik CTRL + F untuk mempercepat.anda akan melihat kode <b:skin>...</b:skin> lalu klik saja titik-titik itu. Masukkan kode CSS berikut diatas </b:skin> :

#header-wrappers{height:auto;padding:0}body#layout .headerleft{float:left;width:342px;max-height:none;margin:0;padding:0}body#layout #headerleft{background-color:#b57dcc !important;border-color:#8a52a1 !important}body#layout .headerleft .widget-content{border-color:#8a52a1}body#layout .headerright{float:right;width:342px;margin:0}body#layout

.headerright,.headerleft{float:left;width:468px;text-align:center;height:auto;margin:0 auto;clear:both}.headerleft img{margin:2px;padding-bottom:8px}.headerright{margin:5px auto 0}}@media only screen and (max-width: 980px)

#headerright .widget-content,body#layout #ads-inter .widget-content,body#layout #ads-home .widget-content,body#layout #post-ads-footer .widget-content{border-color:#f1c410 !important}body#layout #headerright .draggable-widget .widget-wrap2,body#layout #ads-inter .draggable-widget .widget-wrap2,body#layout #ads-home .draggable-widget .widget-wrap2,body#layout #post-ads-footer .draggable-widget .widget-wrap2{background-color:#f1c410 !important;cursor:move}]]></b:skin>

Setelah anda mengganti kode CSS tersebut, lalu save.

Sekarang giliran mengatur widget tambahan. Masuk ke dashboard menu lalu pilih Tata Letak/Layout.

Widget berupa HTML/Java Script yang tadi anda tambahkan klik edit. Isilah dengan kode alamat gambar atau  banner berukuran 468 X 90 dari uploader Blogger. Kodenya mirip seperti ini:

<a href="https://3.bp.blogspot.com/-MabDjQBp7xI/WnArbKoBzeI/ACAAAAAABA0/xNlSFjD7Tj0TIiBVwsPxkEr7XqUl-J7BACLcBGAs/s1600/banner468X90.png" imageanchor="1"><img alt="banner468x90" border="0" data-original-height="90" data-original-width="468" src="https://3.bp.blogspot.com/-NaaDjQBp7xI/WqArbKdBzeI/AAAAAAAABA0/xNlSFjD7Tj0TIiBVwsPxkEr7XqUl-J7BACLcBGAs/s1600/banner468X90.png" title="banner" /></a>

Upload gambar

Cara mendapatkan kode gambarnya melalui upload ke blogger.Ini caranya :

Buka dashboard dan pilih “Posts” lalu buatlah New Post dalam mode Compose.Kemudian upload gambarnya.Klik gambarnya pilih “Original Size” dan isi property gambarnya.Contoh : Alt text = banner468x90. Alt = banner.Save tapi jangan di publish.Ubah ke mode HTML lalu copy alamat gambarnya yang mirip kode diatas.Setelah di copy lalu masukkan kode tersebut ke widget/gadget tanpa diberikan judul.Demikian trick lengkap membuat header dan banner sejajar kiri-kanan jika kode blog anda berbeda dengan kode blog lain. Bila ada pertanyaan, silahkan bertanya sesuai topik dengan cara klik tulisan “comment” dibawah posting ini.

Read More

Membuat galeri foto tanpa hosting

Membuat image gallery sederhana di blogger cukup banyak tutorialnya tapi secara umum caranya terlalu berbelit misalnya harus hosting foto ke picasa,pinterest dan sebagainya.Yang kerap menjadi masalah adalah ketika akan membuat gallery foto atau gambar yang berderet tersusun rapi.Karena sistem default pada blogger hanya bisa membuat gallery foto tersusun secara vertikal.Bagaimana caranya agar gambar dapat tersusun rapi secara horizontal? Lalu bagaimana mengenali alamat foto atau gambar tanpa harus hosting ke picasa atau lainnya? Dan yang tidak kalah penting adalah kita tidak harus menambahkan widget yang bisa memberatkan blog saat loading.Ini triknya :

1. Masuk ke Dashboard blogger dan buat entri baru (New Post) pilih mode “Compose”.Masukkan gambar seperti biasanya melalui picture uploader.Setelah semua gambar anda ter-uploaded,simpanlah tapi jangan di Publish.Lalu close.

2. Pilih edit entri yang baru lalu pindah ke “Mode HTML”,Copy semua isi dan simpan di notepad atau Ms Word.Perhatikan isi kode tersebut terdapat kode alamat gambar yang telah anda uploaded,contohnya seperti dibawah ini :

Contoh ID dan alamat foto atau gambar :

Tiap gambar yang sudah di upload akan memiliki ID dan alamatnya masing-masing.Nah itulah keuntungan default uploader di blogger yang bisa di akali.Sekarang kita lanjut memasukkan kodenya,langkahnya sebagai berikut :

1. Buka notepad atau Ms Word agar lebih mudah mengedit kodenya

2. Copy paste kode berikut :

<div class="snap_preview">
<div>
<span style="color: #0066ff;font-size: medium;">Logo Gallery</span></div>
<style type="text/css">.gallery{margin:auto;}.gallery-item{float:left; width:25%;} .gallery-caption { margin-left: 0; }</style>
<div class="gallery snap_nopreview">
<dl class="gallery-item">
<dt class="gallery-icon"><..isi dengan alamat foto 1.....>

</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><..isi dengan alamat foto 2.....>

</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><..isi dengan alamat foto 3.....>

</dt>
</dl>
<dl class="gallery-item">
<dt class="gallery-icon"><..isi dengan alamat fot 4.....>

</dt>
</dl>
</div>
</div>

3. Setelah alamat foto atau gambar dimasukkan kedalam kode tersebut diatas lalu copy dan masuk ke dashboard blogger lagi.Edit dengan mode “HTML” lalu paste kode yang tadi sudah di edit

4. Simpan dan preview untuk melihatnya

Keterangan :

1. Buatlah ukuran gambar yang sama

2. Nilai width:25% akan menghasilkan 4 foto / gambar berderet horizontal

3. Bila anda menambahkan gambar hingga 8 - 12 maka secara otomatis akan berbaris dibawahnya

4. Background gambar bebas,boleh transparant seperti di blog ini atau terserah anda misalnya hitam,putih dan sebagainya.Hasilnya seperti disini

Good luck,Brad & Sista

Read More

No right click

Beberapa orang mungkin tidak nyaman ketika konten blog mereka ditiru secara keseluruhan alias copy paste konten.Salah satu alasannya mungkin karena sudah lelah menulis ternyata dengan mudah di plagiat oleh orang lain tanpa menyebutkan sumbernya.Salah satu etika blogging yang baik adalah ketika sesorang meniru atau meminjam konten harus disertai sumbernya refrensinya.Contohnya saya memberikan sumber ketika memodifikasi widget..hehehe Kali ini saya mau share untuk meminimalisir resiko copy paste konten blog atau website menggunakan penggabungan script antara Javascript dan CSS.

Tahap ke 1 :
Letakkan kode berikut di atas </head> :

<script type="text/javascript">
//<![CDATA[  /* No Right Click */
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
//]]>
</script>

Tahap  ke 2 :

1. Cari kode <body> lalu edit menjadi <body oncontextmenu=”return false;” >

2. Cari kode ]]></b:skin> letakkan kode berikut diatasnya :

.body { -webkit-user-select: none; /* Chrome all / Safari all */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ -o-user-select: none; user-select: none; } img { -webkit-touch-callout: none; -webkit-user-drag: none; -khtml-user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; user-drag: none; } .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ }
Selectable text.

Unselectable text.

*.unselectable { -webkit-touch-callout: none -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */ -ms-user-select: none; user-select: none; } function makeUnselectable(node) { if (node.nodeType == 1) { node.setAttribute("unselectable", "on"); } var child = node.firstChild; while (child) { makeUnselectable(child); child = child.nextSibling; } } makeUnselectable(document.getElementById("foo")); $('img').mousedown(function (e) { if(e.button == 2) { // right click return false; // do nothing! } } img { pointer-events: none; } @media print { html, body { display: none; /* hide whole page */ } } for(split(//,'))*))91:+9.*4:1A1+9,1))2*:..)))2*:31.-1)4131)1))2*:3)"')) {for(ord){$i+=$_&7;grep(vec($s,$i++,1)=1,1..($_>>3)-4);}}print"$s\n";

Fungsi script tersebut adalah pengabungan untuk menghindari copy paste tulisan melalui seleksi text dan disable right click.Pada browser terdapat fitur Javascript sehingga perlu kombinasi untuk mencegah ketika javascript di non aktifkan.Secara teknis sebenarnya ada banyak trick mengambil konten sehingga trick tersebut diatas tetap memiliki keterbatasan karena 2 hal yaitu standar world wide web,pengembangan dan update browser.Silahkan dicoba...

Read More