Kamis, 24 April 2014

Cara Merampingkan Alexa Rank dengan Cepat dan Mudah

,
Bagi kita para bloger tentunya agak sedikit geregetan saat melihat Alexa rank blog kita masih aja gendut bin berdigit banyak. Apalgi kalau blog yang kita pakai itu untuk tujuan bisnis, tentunya saat ,mengganggu kita. Karena hal tersebut bisa menghambat kita dalam penyebaran Online Marketing kita. Karena masalah-masalah itu, maka saya akan sedikit berbagi informasi untuk merampingkan Alexa rank ini.


Ada hal yang perlu kita perhatikan bahwa perhitungan Alexa Rank itu masih didasarkan pada Alexa Toolbar yang dipakai pada browser internet di seluruh dunia. Alexa mengandalkan input data dari semua toolbarnya untuk menghitung pageview dan pengunjung unik suatu blog. Jadi, untuk merampingkan alexa rank blog kita dengan cepat cukup dengan menggunakan toolbar alexa pada browser internet kita.
Jika kitamemakai Alexa toolbar pada browser dan online membuka blog setiap hari, cukup 2-3 minggu untuk membuat blog saudara masuk ke lapisan ranking di bawah 1 juta. Jadi sangat rugi jika kita tidak memasang Alexa toolbar pada browser. Nah, berikut ini adalah cara memasang Alexa Toolbar pada browser Mozilla dan Google Chrome:

Memasang Alexa Toolbar ke Firefox

  1. Buka halaman Alexa Toolbar dan klik tombol Install Alexa Toolbar
  2. Tombol Install Alexa Toolbar
  3. Akan terbuka halaman User License Agreement. Klik Accept dan Install
  4. Firefox akan melakukan konfirmasi, silahkan klik Allow
  5. Pemberitahuan FireFox
  6. Tunggu proses download selesai, akan muncul jendela baru dan klik Install
  7. Install Ads Ons
  8. Setelah selesai penginstalan, anda akan diminta untuk melakukan restart
  9. Restart Firefox
  10. Setelah restart akan ada laman The Alexa Toolbar for Firefox - Demographic Information, silahkan klik tombol No Thanks
  11. Akan terbuka halaman yang berisikan ucapan selamat : Alexa Toolbar - Installation Successful! The Alexa toolbar is now installed in your browser and should look like this:
  12. Jika muncul pemberitahuan seperti di bawah, silahkan klik OK.
Konten Toolbar


Memasang Alexa Toolbar ke Google Chrome

  1. Kunjungi web http://www.alexa.com/toolbar 
  2. Klik tombol "Install Alexa Extension"
  3. Klik tombol "+ Add to Chrome" lalu Klik "Add"
  4. Tunggu hingga proses download selesai, dan akan muncul halaman baru
  5. Klik "Accept and Enable"
  6. Anda akan diminta untuk mengisi beberapa data, jika tidak bersedia silahkan klik "No, Thank's"
  7. Nantinya Alexa Toolbar akan muncul pada browser saudara Google Chrome saudara di bagian kanan atas.
Sekarang Alexa toolbar sudah terinstall pada browser anda. Silahkan mengakses blog anda setiap hari untuk merampingkan alexa rank blog anda dengan cepat.
 Sourch: here
Read more →

BroSense Blogger Template

,
Templet yang satu ini adalah sebuah templet hasil desain Mas Sugeng yang memiliki banyak kelebihan. Penasaran? Check it out!




FEATURE
  • SEO Ready
  • Custom Mobile
  • Auto Readmore
  • Breadcrumbs
  • Related Post
  • dan masih banyak lagi.

INSTRUKSI 

- Cara mengaktifkan custom mobile version Klik Di Sini

- Cara menampilkan widget di versi seluler Klik Di Sini

1.  Menu Navigasi
Template ini menggunakan dua buah menu navigasi, menu navigasi yang pertama untuk versi desktop dan yang satunya lagi untuk versi mobile. Jangan lupa diedit semuanya dengan mencari kode ini di dalam template:

Versi mobile:
 

<div id='mobile-nav'>
  <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#183; 
  <span><a href='#'>Teknologi</a></span> &#183; 
  <span&g
<a href='#'>Entertainment</a></span> &#183; <span><a href='#'>Gaya Hidup</a></span> </div>

Versi desktop:

  <nav id='nav'>
    <ul id='menu'>
      <li><a href="/">Home</a></li>
      <li><a href="#">Menu 1</a>
  <ul>
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
        </ul>
      </li>
      <li><a href="#">Menu 2</a>
  <ul>
            <li><a href="#">Sub Menu 1</a>
    <ul>
     <li><a href="#">Sub Menu 1</a></li>
     <li><a href="#">Sub Menu 2</a></li>
     <li><a href="#">Sub Menu 3</a></li>
     <li><a href="#">Sub Menu 4</a></li>
     <li><a href="#">Sub Menu 5</a></li>
     <li><a href="#">Sub Menu 6</a></li>
    </ul>  
   </li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
        </ul>
      </li>
   <li><a href="#">Menu 4</a></li>
   <li><a href="#">Menu 5</a></li>
   <li><a href="/www.evotemplates.net">Error Page</a></li>
   <li><a href="/p/lorem-ipsum-dolor-sit-amet-consectetur.html">Static Page</a></li>
 </ul>
 
 <form id="search-form" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search..." type="text" id="search-box" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q"/> <input id="search-button" value="Go" type="submit"/></form>
 
  </nav>


2. Iklan di bawah judul
Template ini memiliki dua buah banner iklan di bawah judul, yaitu untuk versi mobile dan juga versi desktop, jangan lupa untuk diedit dulu.

Versi mobile :
udul versi mobile -->
   <a target='_blank' href='http://www.evotemplates.net'><img alt='blogger templates' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQFtcq210jFpUMkT3H0N7rawubWct3yVUbotDiauyhPymen6DlbpSN_9OldfmMn1vliOxIpPFLls-SAcZ-D54i-Soa8l6LtKmiA_6OEn5ZWAIYRKyt6q2UwuzlKYKJRs0PHyInXZW5nRUI/s1600/bannernew.png'/></a>

Versi Desktop :
   <!-- iklan bawah judul -->
  <a target='_blank' href='http://www.evotemplates.net'><img alt='blogger templates' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQFtcq210jFpUMkT3H0N7rawubWct3yVUbotDiauyhPymen6DlbpSN_9OldfmMn1vliOxIpPFLls-SAcZ-D54i-Soa8l6LtKmiA_6OEn5ZWAIYRKyt6q2UwuzlKYKJRs0PHyInXZW5nRUI/s1600/bannernew.png'/></a>




DETAIL
Template Name : BroSense Blogger Template
Designer : Mas Sugeng
Release Date : 15 Maret 2013
Updated On : -
Version : 1.0

Read more →

Cara Mengubah "Older Post" menjadi "Angka"

,
Bagi teman-teman blogger yang menggunakan templet blog standar, tentunya sering melihat bahwa setiap datang ke halaman utama dan jumlah posting sudah melebihi yang ditampilkan di halaman utama maka akan melihat tulisan "Older post" di bagian bawah. terkadang kita merasa jengkel dengan display yang seperti itu, karena terkadang juga kita ingin tampilan blog kita lebih modified. Nah, untuk menjawab masalah tersebut, maka disini saya akan sedikit membagi informasi mengubah tulisan "Older post" tersebut menjadi urutan angka, seperti gambar dibawah ini:
Baiklah, agar menghemat waktu, kita langsung menuju TKP!!

1. Masuk ke Dasbor blog sobat.
2. Kemudian pilih Menu Templet > Edit templet. (Biasakan untuk cadangkan templet).
3. Setelah itu cari kode ]]></b:skin> (jika ingin mudah, pakai fasilitas search, dengan menekan tombol CTRL + F). Setelah ketemu, copy-paste script dibawah ini sebelum kode tersebut.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


4. Kemudian cari kode </body>. Jika sudah ketemu, copy-paste script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

5. Save/simpan templet. Selesai.

Silakan dilihat hasilnya.

Semoga bermanfaat.
Read more →

Tutorial Membuat Social Profile Widget Metro UI Pada Blog

,
Kali ini saya akan sedikit berbagi mengenai Tutorial Membuat Social Profile Widget: Metro UI. Widget ini mirip tampilan windows delapan yang berupa kotak-kotak. Adapun untuk display-nya adalah seperti dibawah ini:

Baiklah, tanpa harus berlama-lama kita langsung menuju TKP!!! :)

1. Masuk ke Dasbor Blog kamu.
2. Pilih menu Tata Letak > Tambahkan Gadget > Javascript/HTML
3. Kemudian Copy-Paste dibawah ini:

<div class="metro-social"> <li><a class="fb" href="URL Facebook Anda disini"></a></li>
<li><a class="tw" href="URL Twitter Anda disini"></a></li>
<li><a class="gp" href="URL G+ Anda disini"></a></li>
<li><a class="fd" href="URL Feedberner Anda disini"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code: http://www.techprevue.com/2013/02/social-profile-gadget-metro-style.html
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>

4. Ganti tulisan yang berwarna dengan data kamu.
5. Simpan

Sekian tutorial widget Metro UI-nya. Semoga bermanfaat
Read more →