ZIELEITE | Tech Forever: blogger

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

ZIE

Pada tutoria blog kali ini saya akan membagikan code untuk blog agar blog/website kita menampilkan menu ketika di scroll.

Menu Navigasi (Navigation Menu) yaitu menu blog yang biasa ada di deretan Home, About, dan seterusnya. Menu navigasi sangat penting bagi pengunjung agar bisa dengan mudah "berselancar" (surf) dan "baca-baca" (browse) blog kita lebih lama.

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

1. Template > Edit HTML

2. Cari (CTRL+F) kode </body>

3. Copy kode berikut ini dan Paste di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#menu').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#menu').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

4. Sebelum klik "Save", Ganti elemen #menu dengan elemen/kode yang menjadi Navigasi Menu blog Anda. Di blog saya ini, kodenya bernama #menu-wrapper.

Note: Jika ada yang ingin ditanyakan silahkan tulis dikomentar...Terima Kasih.

Cara Menampilkan Source Code di Blogspot

ZIE

Saat membuat artikel tentang pemrograman, kadang kita perlu menampilkan kode sumber atau yang disebut dengan source code pada halaman blog. Jika kode sumber tersebut kita letakkan secara biasa akan terlihat kurang menarik dan kurang jelas highlight syntax-nya (penekanan tampilan teks pada perintah-perintah program).

Untuk membuat kode program yang kita tampilkan terlihat seperti source code editor kita bisa menggunakan teknik syntax highlighter dari http://alexgorbatchev.com. Contoh tampilannya bisa dilihat pada salah satu artikel tentang import data csv dengan php yang disertai source code disini. Dengan teknik ini tampilan source code terlihat berbeda dari konten blog yang lain dan perintah-perintah pada program terlihat dibedakan warnanya.

Ada dua langkah yang harus dilakukan untuk bisa menampilkan source code pada blogspot. Langkah pertama kita setup dulu sistem syntax highlighternya pada template. Dan langkah yang kedua penerapan kode syntax highlighter pada halaman posting.

Berikut ini langkah setup syntax highlighter pada tamplate Blogspot :

1. Pada dasbor Blogger, Masuk ke menu Template kemudian pilih Edit HTML.

2. Cari kode </head> dengan cara tekan CTRL+F pada kotak teks editor template lalu ketikan </head> pada teks pencarian. Harap perhatikan, CTRL+F nya bukan pada halaman browsernya lho ya.

3. Masukkan link javascript Syntax Highlighter, caranya taruh kode berikut ini diatas kode </head>:

  <!--Syntax Highlighter-->    
   <b:if cond='data:blog.pageType == &quot;item&quot;'>    
   <script async='async' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/>    
   <script async='async' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/>    
   <script async='async' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/>    
   <script async='async' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/>    
   <script async='async' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'/>    
   </b:if>

4. Kode diatas berfungsi untuk menampilkan source code dengan bahasa pemrograman PHP, Javascript, HTML, XML, CSS dan lain-lain. Untuk lebih jelas tentang bahasa pemrograman yang disupport bisa dilihat di situs resmi Syntax Highlighter di http://alexgorbatchev.com.

5. Dengan menerapkan tag <b:if cond='data:blog.pageType == "item"'> berarti kita hanya menggunakan script saat tampil halaman posting saja. Ini meringankan beban loading blog selain halaman pos.

6. Cari kode ]]></b:skin> pada template dengan kembali menggunakan CTRL+F pada teks editor template lalu ketik ]]></b:skin>.

7. Masukkan kode CSS berikut ini diatas kode ]]></b:skin> :

 /*style for syntax highlighter*/    
  .dp-highlighter    
  {    
  font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;    
  font-size: 12px;    
  line-height: 1.8em;    
  background-color: #E7E5DC;    
  width: 99%;    
  overflow: auto;    
  margin: 18px 0 18px 0 !important;    
  padding-top: 1px;    
  text-align: left;    
  /* adds a little border on top when controls are hidden */    
  }    
  /* clear styles */    
  .dp-highlighter ol,    
  .dp-highlighter ol li,    
  .dp-highlighter ol li span    
  {    
  margin: 0;    
  padding: 0;    
  border: none;    
  }    
  .dp-highlighter a,    
  .dp-highlighter a:hover    
  {    
  background: none;    
  border: none;    
  padding: 0;    
  margin: 0;    
  }    
  .dp-highlighter .bar    
  {    
  padding-left: 45px;    
  }    
  .dp-highlighter.collapsed .bar,    
  .dp-highlighter.nogutter .bar    
  {    
  padding-left: 0px;    
  }    
  .dp-highlighter ol    
  {    
  list-style: decimal; /* for ie */    
  background-color: #fff;    
  margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */    
  padding: 0px;    
  color: #5C5C5C;    
  }    
  .dp-highlighter.nogutter ol,    
  .dp-highlighter.nogutter ol li    
  {    
  list-style: none !important;    
  margin-left: 0px !important;    
  }    
  .dp-highlighter ol li,    
  .dp-highlighter .columns div    
  {    
  list-style: decimal-leading-zero; /* better look for others, override cascade from OL */    
  list-style-position: outside !important;    
  border-left: 3px solid #6CE26C;    
  background-color: #F8F8F8;    
  color: #5C5C5C;    
  padding: 0 3px 0 10px !important;    
  margin: 0 !important;    
  line-height: 1.8em;    
  }    
  .dp-highlighter.nogutter ol li,    
  .dp-highlighter.nogutter .columns div    
  {    
  border: 0;    
  }    
  .dp-highlighter .columns    
  {    
  background-color: #F8F8F8;    
  color: gray;    
  overflow: hidden;    
  width: 100%;    
  }    
  .dp-highlighter .columns div    
  {    
  padding-bottom: 5px;    
  }    
  .dp-highlighter ol li.alt    
  {    
  background-color: #FFF;    
  color: inherit;    
  }    
  .dp-highlighter ol li span    
  {    
  color: black;    
  background-color: inherit;    
  }    
  /* Adjust some properties when collapsed */    
  .dp-highlighter.collapsed ol    
  {    
  margin: 0px;    
  }    
  .dp-highlighter.collapsed ol li    
  {    
  display: none;    
  }    
  /* Additional modifications when in print-view */    
  .dp-highlighter.printing    
  {    
  border: none;    
  }    
  .dp-highlighter.printing .tools    
  {    
  display: none !important;    
  }    
  .dp-highlighter.printing li    
  {    
  display: list-item !important;    
  }    
  /* Styles for the tools */    
  .dp-highlighter .tools    
  {    
  padding: 3px 8px 3px 10px;    
  font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;    
  color: silver;    
  background-color: #f8f8f8;    
  padding-bottom: 10px;    
  border-left: 3px solid #6CE26C;    
  }    
  .dp-highlighter.nogutter .tools    
  {    
  border-left: 0;    
  }    
  .dp-highlighter.collapsed .tools    
  {    
  border-bottom: 0;    
  }    
  .dp-highlighter .tools a    
  {    
  font-size: 9px;    
  color: #a0a0a0;    
  background-color: inherit;    
  text-decoration: none;    
  margin-right: 10px;    
  }    
  .dp-highlighter .tools a:hover    
  {    
  color: red;    
  background-color: inherit;    
  text-decoration: underline;    
  }    
  /* About dialog styles */    
  .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }    
  .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }    
  .dp-about td { padding: 10px; vertical-align: top; }    
  .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }    
  .dp-about .title { color: red; background-color: inherit; font-weight: bold; }    
  .dp-about .para { margin: 0 0 4px 0; }    
  .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }    
  .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }    
  /* Language specific styles */    
  .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }    
  .dp-highlighter .string { color: blue; background-color: inherit; }    
  .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }    
  .dp-highlighter .preprocessor { color: gray; background-color: inherit; }

8. Cari kode </body> pada template dengan kembali menggunakan CTRL+F pada teks editor template lalu ketik </body>.

9. Taruh kode javascript ini tepat diatas kode </body> :

 <script language='javascript'>   
   dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);   
   </script>

10. Proses setup syntax highlighter selesai sampai disini, selanjutnya siap diterapkan pada halaman posting.

Dan berikut ini cara memasang source code pada halaman postingan blog:
1. Pastikan semua proses setup diatas telah dilakukan dengan benar.
2. Pada halaman entri baru, klik mode HTML lalu taruh kode berikut ini (contoh untuk menampilkan kode PHP) pada letak source code di postingan.

 <pre class="php" name="code">   
   ...   
  </pre>

3. Taruh source code pada titik-titik diantara tag <pre> dan </pre> seperti contoh berikut ini :

 <pre class="php" name="code">   
   <?php   
    echo "Selamat Belajar PHP";   
   ?>   
  </pre>

4. Silahkan ganti parameter pada tag class sesuai jenis source code yang akan ditampilkan, misalnya untuk menampilkan kode CSS ganti PHP dengan CSS.
5. Untuk membuat karakter escape HTML silahkan gunakan beberapa tool yang tersedia di internet seperti pada http://codeformatter.blogspot.com.

Terima Kasih...Semoga Bermanfaat...!!!

Cara Modifikasi Widget Feedburner + Sosial Media Keren

ZIE

Hari ini saya berbagi Cara Modifikasi Widget Feedburner + Sosial Media Keren untuk Anda. Widget ini membuat dengan tombol berbagi sosial dan kotak berlangganan email khusus dari feedburner. Anda dapat menambahkan widget ini hanya di blogger Anda. Apakah Anda ingin menambahkan widget ini ke blogger Anda. Ikuti langkah berikut ini.

Cara Modifikasi Widget Feedburner + Sosial Media Keren

Login ke Akun Blogger Anda

1. Pilih Tata Letak ( layout )

2. Klik Tambahkan Gadget ( add gadget )

3. Pilih HTML / JavaScript dari daftar yang diberikan

4. Copy dan Paste kode berikut ke dalam kotak HTML / Javascript.

.social a{padding: 6pt 6pt 6pt 5px;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}

.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}

.social a:active{color:#000;border-color: #444;}

.sub-box{

background: #fff;

width: 270px;

padding: 2px 5px 7px 7px;

border: 2px solid #000;

border-radius: 15px;

}

.sub-box:hover{

border-style:dashed; 2px solid: #389af2;

}

.emailform{margin:30px 0 0; display:block; clear:both;}

.emailtext{margin:20px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsnFt1ob-Q5AVBZm83VZQi4lLBJbTBF_W4LUXzbj90LabGzDFSxCnveiUTCzO0fWt0xcQFW6FAozId6f_frmwONCnFPFHOHgiivWU6vwbCOJQXLCSykgtHB8C8OJ1eXIfy5k9O2s0bX30/s1600/email.png) no-repeat scroll 0px center;padding:5px 5px 4px 30px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:170px;}

.emailtext:focus{outline:none;}

.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:6px 8px; border:1px solid #666;cursor:pointer;background:#ff748c}

.sub-button:hover{color:#eee;border-color: #999;background:#ffa7b6}

</style>

</td></tr></tbody></table> </div></center>

</center>

<h8 style="display:block;font-family:'calibri';font-size:17px;font-weight:bold;">Masukkan Email Anda, untuk berlangganan Artikel, Gratis !!! </h8>

</form></div><small> Anda aman disini ! Email tidak terkait SPAM apapun</small></div></div>

5. Simpan --- dan lihat hasilnya

Semoga bermanfaat…

Cara Memasang Google Analytics Pada Blog

ZIE

google analytics adalah sebuah platform yang dibuat dengan tujuan untuk mengetahui atau membantu kita melacak jumlah pengunjung dan tampilan halaman pada sebuah blog, google analytics juga menggunakan beberapa filter untuk mengetahui persis dimana pengunjung yang datang melalui laporan standar, google analytics adalah tools yang sangat terkenal dan juga gratis, tools gratis ini juga banyak digunakan pengguna internet yang menjajaki bisnis online atau pemasaran online, untuk mengontrol traffic yang berkembang, sebagian banyak blogger memang tidak mengetahui manfaat dari google analytics ini, yaitu kita bisa menganalisis pengunjung blog kita secara real dengan filter yang bisa dengan detail dalam menunjukan pengunjung yang datang. Nah jika anda ingin menambahkan atau pasang kode pelacakan google analytics pada blog anda , silahkan ikuti tutorialnya.

Cara Memasang Kode Google Analytics Pada Blog

1. Pertama anda masuk ke halaman http://www.google.com/analytics/

2. Klik "Masuk" di atas kanan dan masukan akun google anda.

3. Di halaman baru, pilih panel "ADMIN" > klik "AKUN" > BUAT AKUN BARU"

4. Silahkan anda isi formulir pendaftaran akun baru analytics.

5. Pilih "Indonesia" dan klik "Saya setuju" pada Promise

6. Disana anda bisa melihat ID Pelacakan blog anda, lihat kode yang ada di bawahnya, copy semua kode tersebut yang terdapat dalam kolom.

7. Jika anda sudah mengcopy code tadi, buka akun blogger anda > Template > klik edit HTML dan paste code yang anda copas tadi dan letakan di atas kode </body>

Selesai, untuk tutorial Cara Memasang Google Analytics Pada Blog Terbaru, semoga bermanfaat....!!!

Cara Mendapatkan Sitelink Google Dengan Mudah

ZIE

Siteliink atau taut situs adalah sub link yang muncul di bawah URL situs kita, ketika melakukan pencarian spesifik dengan menggunakan nama blog kita, sitelink atau google sitelink yang di berikan google ini biasanya menampilkan hingga enam sub-header yang di tampilakan dalam pencarian spesifik di bawah situs, google memberikan sitelink kepada sebuah situs yang mereka anggap layak, tujuannya adalah untuk membantu menavigasi halaman situs kita secara langsung di SERP.

Apakah sitelink itu perlu, masalah perlu atau tidaknya, yang kita lihat adalah keuntungan dari sitelink ini sendiri adalah akan mendapatkan lebih banyak traffic bahkan dua kali lipat, karena banyak link yang di munculkan di search engine atau di hasil pencarian dan menunjukan adanya otoritas website atau blog di mata search engine, bisa di ibaratkan kalo situs kita adalah situs relevan :) karena tidak semuan blog atau website bisa mendaptkan sitelink.

Untuk mendapatkan sitelink ini tidak lah sulit atau butuh waktu lama, karena kalo dilihat dari usia domain saya sendiri adalah baru 1 bulan, lalu bagaimana cara mendapatkan google sitelink? jawabannya adalah blog anda harus bersih, hehe, maksud bersih disini adalah bisa di percaya oleh google, bagaimana agar google percaya, caranya ikuti aturan untuk meningkatkan kualitas blog kita :

Cara Mendapatkan Sitelink Google

1. Gunakan domain TLD ( Top Level Domain ) yapz suatu keseriusan sebuah situs adalah menggunakan domain TLD maka google akan menganggap sebuah situs bisa dibilang penting dan tentu harus di barengi dengan kualitas artikel, lalu bagaimana dengan saya yang menggunakan sub domain, bukan berati saya menganggap subdomain gak penting, karena sebuah blog bisa maju adalah tergantung yang manage atau yang mengelola dan untuk yang menggunakan subdomain tentu saja bisa cuma mungkin butuh ekstra usaha, agar google bisa mempercayai situs kita relevan seperti contoh point-point tentang meningkatkan kualitas situs.

2. Submit sitemap di webmaster, sitemap pada dasarnya adalah sebuah indexs keseluruhan artikel oleh bot spider yaitu dengan menggunakan sitemap tersebut, dengan submit sitemap ini juga dapat untuk mempermudah indexs artikel kita saat di publish, bila anda belum tau cara submit sitemap di webmaster, silahkan baca : Cara Submit Sitemap di Webmaster

3. Rajin posting artikel, dengan rajin update artikel berarti situs anda adalah situs hidup, selain dapat kepercayaan google, sudah tentu lebih banyak arikel yang bermutu maka akan banyak juga pengunjung yang datang. dengan rajin update artikel yang pasti kita akan mendapatkan banyak keuntungan.

cukup itu saja point-point untuk cara cepat mendapatkan sitelink google, pasti tidak lama akan muncul sendiri sitellink tersebut. semoga bermanfaat... :)

Cara Submit Sitemap Di Webmaster Pada Blog

ZIE

Submit sitemap atau peta situs bagi pengguna web atau blog adalah hal yang paling utama yang harus anda lakukan untuk kemajuan blog anda adalah dengan submit sitemap atau peta situs blog anda ke google webmaster tools dan ini sangat di anjurkan sekali bagi anda yang masih pemula atau baru membuat blog dan ingin blognya cepat tampil di halaman pencarian google

Apa Itu Sitemap?

Sitemap atau peta situs adalah sebuah file xml yang berisi URL blog, file ini sangat membantu bagi bot crawler untuk menemukan dan merayapi semua url blog, dalam singkatnya sebuah sitemap adalah indexs secara lengkap untuk blog dan untuk robot google merayapi situs atau melihat blog anda,dalam kata sederhana, file sitemap ini berisi semua URL di blog dan membiarkan bot search engine untuk mengikuti file sitemap blog dan mengindeks situs blog atau web anda secara keseluruhan.

Maka anda harus memastikan bahwa situs blog anda sudah mensubmit sitemap ke google webmaster tools dan selain itu saya sarankan anda juga harus mendaftarkan situs blog anda di RSS Feedburner untuk mempercepat index,jika anda rasa ini belum silahkan daftar disini "daftar RSS feedburner" selanjutnya kita ke tutorial submit sitemap di google webmaster tools,silahkan anda ikuti tutorial yang saya berikan,caranya cukup mudah untuk di praktekan.

Cara Submit Sitemap Di Google Webmaster

1. Silahkan buka situs webmaster http://www.google.com/feedburner/

2. klik pada "Layanan Alat Webmaster"

3. Di halaman selanjutnya silahkan klik "Tambah kan situs" > "Masukan Url situs blog atau website anda"

Lihat contoh gambar di bawah:

4. Pada halaman selanjutnya pilih "Perayapan" dan pilih "Peta situs" jika menggunakan bahasa inggris pilih Crawler > Sitemap

5. Selanjutnya sekarang klik pada "Tambahkan/Uji Peta Situs" tambahkan peta situs anda satu persatu di bawah ini lalu klik "Mengirim peta situs"

/atom.xml
/atom.xml?alt=rss
/feeds/posts/default
/feeds/posts/default?alt=rss
/feeds/posts/default?orderby=updated
/rss.xml

6. Lakukan satu persatu hingga selesai.

Oke sobat blogger saya rasa sudah cukup untuk "Cara Submit Sitemap Di Google Webmaster"...semoga bermanfaat...

Daftar RSS Feedburner Dan Berlangganan Email Untuk Blog

ZIE

Cara paling mudah untuk menerima posting terbaru dari blog favorit anda untuk berlangganan RSS menggunakan feed seperti Google Reader, Bloglines, Netvibes. pasti anda sudah sering melihat ini di sebuah website atau blog tentang berlangganan artikel menggunakan rss feedburner.

RSS (Really Simple Syndication) berati mengambil artikel-artikel terbaru dari situs Anda dari berlangganan feed anda di mana pelanggan feed dari situs anda dapat membaca semua artikel anda dalam satu lokasi.

kebanyakan blog memiliki RSS feed yang terdeteksi secara otomatis oleh pembaca feed yang umum digunakan ketika URL blog ditambahkan ke pembaca.

Namun, jika Anda ingin membuatnya lebih jelas dan lebih mudah bagi pembaca untuk berlangganan menggunakan RSS, atau ingin tahu persis berapa banyak orang yang berlangganan ke blog Anda maka pilihan anda adalah harus menambahkan Feedburner RSS feed dan berlangganan email ke blog Anda.

Cara Daftar :

1. Masuk ke situs Feedburner dan masuk dengan Akun Google anda.

2. Isi dengan URL blog anda dan klik Next.

3. Pilih untuk halaman atom dan klik next.

4. Pada halaman berikutnya, yang saya tandai merah adalah judul dan alamat FeedBurner (URI) anda .

5. Pada halaman konfigurasi statistik silahkan ceklist seperti contoh gambar dibawah ini dan klik Next.

Sekarang Menambahkan Email Berlangganan FeedBurner

Sangat penting untuk menambahkan opsi berlangganan email ke sidebar blog Anda karena beberapa pembaca lebih memilih untuk menerima posting terbaru dari blog menggunakan langganan email.

1. Klik pada Tab Publicize > Email Subscriptions dan klik Activate.

2. Sekarang salin kode HTML.

3. Silahkan tempatkan pada menu Tata letak widget di dashboard blog Anda

4. Klik pada sidebar yang diinginkan dan paste kode tersebut,klik simpan.

Selesai, dengan itu anda dapat dengan mudah memberikan artikel anda kepada pelanggan email feed secara mudah, semoga bermanfaat...TerimaKasih :)