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

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