Cara Memasang Alexa di Blog

Cara Mendaftarkan Blog ke Alexa

Assalamu’alaikum sobat semua…^_^

Kali ini saya akan coba membuat sebuah artikel mengenai bagaimana Cara Mendaftarkan Blog ke Alexa atau bagaimana Cara Memasang Alexa di Blog sobat.. Sebagaimana kita tahu bahwa alexa itu merupakan sebuah website penyedia informasi yang memberikan sebuah informasi mengenai rank traffic atau sebuah popularitas web, yang berasal dari jumlah pengunjung Unique Alexa. Menurut saya Keberadaan Alexa sangatlah penting dalam pencapaian sebuah Page Rank (PR) yang tinggi karena menunjukkan kualitas dan popularitas dari website yang kita miliki. Disamping itu juga Google sendiri nampaknya masih berpatokkan juga pada Alexa dalam memberikan Ranking bagi website atau blog kita.

Baik, kita langsung aja ya, bagaimana kita memulai untuk memasang alexa di blog kita..

1. Sobat masuk ke situs alexa

2. Di sebelah pojok kanan atas ada tulisan register, silakan sobat klik register maka akan muncul tampilan seperti berikut:

Isi data Register for an Account dengan lengkap, jika sudah maka tekan tombol Register maka akan muncul jendela seperti ini. 

3. Jika proses register berhasil, silakan sobat cek di email yang tadi telah di daftarkan untuk melakukan verifikasi, jika berhasil maka sobat akan dihadapkan pada jendela seperti ini:


 
      Masukan kembali alamat email yang sama, kemudian isi Reset Password dan Verify Password untuk masuk/login ke alexa. Jangan lupa masukan password minimal 6 karakter.

4. Jika sudah, tekan tombol Submit Password maka proses registrasi telah selesai alias Succes.
5. Langkah selanjutnya yaitu bagaimana alexa tersebut di masukan ke blog kita?
     Setelah proses registrasi berhasil, sobat harus memilih tab For Site Owner, kemudian di kolom sebelah   kanan ada tulisan Get Traffic Widget. Klo masih bingung, nih saya kasih lagi gambar nya, biar jelas.hehe..
 

6. Klik Tulisan Get Traffic Widget, maka akan muncul tampilan seperti berikut:
 
     Disini sobat silakan pilih sendiri mau seperti apa tampilannya untuk di masukan ke blog kita, kalo blognya punya Mihecheery sih pilih yang Alexa Site Stats Button, biar simple..hehe…

7. Masukan url atau alamat blog sobat, missal : http://mihecheery.blogspot.com/
    Kemudian tekan tombol Build widget, maka akan muncul tampilan seperti ini: 
 
     Copy salah satu script yang ada untuk di letakan di blog kita. Selesai dehh…^_^
    Ehm ada yang masih bingung gak??? Ehm mungkin sobat bertanya-tanya, ehm…gimana ya cara memasangkan script tadi di blog kita???.....ok..ok.. Saya akan coba lanjutkan yaa…Sabar..
9. Sobat masuk ke blogspot sobat, isi user sama password nya..kemudian masuk ke Rancangan/Layout, kemudian sobat tambahkan Gadget yang sesuai dengan keinginan. Kalo blognya punya Miharties sih dipasang nya di sidebar sebelah kiri.

10. Pilih HTML/JavaScript kemudian simpan atau paste kan code yang tadi kita copy dari website alexa, jika sudah maka tekan tombol simpan.
 
Selesai deh…. Untuk melihat nya, silakan sobat buka blog sobat maka akan tampil alexa rank dengan nilai awal Rank nya = No data kemudian Link In nya = 430. 891. Nilai tersebut akan berubah sesuai kerja keras kita mengupdate blog kita….hehe…


ehm..kayaknya cukup jelas ya..kalo begitu Udah dulu yaa.. Udah lumayan pegel juga nih pinggang...:) Semoga Artikel nya Bermanfaat..^_^

Cara Pasang Tombol Save As PDF di Bawah Postingan

Cara Pasang Tombol Save As PDF di Bawah Postingan


Kali ini saya akan coba bikin artikel mengenai bagaimana Cara Pasang Tombol Save As PDF di Bawah Postingan . Aduhh...apaan nih... ehmmm.gini nih maksudnya..Jadi jika sahabat ingin membaca artikel ini, tapi dalam keadaan offline, sahabat tinggal tekan tombol save as pdf seperti pada contoh gambar di bawah ini..



jadi pengunjung blog yang kepengen nyimpen artikel blog kita mereka tinggal mengklik tombol tersebut aja dan postingan blog kita pun tersimpan dengan format file PDF. jika sahabat tertarik untuk Memasang Tombol Save As PDF di Bawah Postingan langsung aja ikuti langkah-langkah berikut ini.

1.Klik http://web2.pdfonline.com/pdfonline/web/signup.asp.

2.Silakan Isi Form pendaftaran dengan lengkap.

3.Beri tanda centang pada I agree with the Terms of Use agreement above.

4.Klik SIG UP.

5.Setelah berhasil silakan Sahabat Login dengan akun yang tadi didaftarkan.

6.Setelah Berhasil Login silakan Sahabat klik tombol generate the javascript seperti yag terlihat pada gambar di bawah ini.



7.Setelah muncul Script nya pada steep 2 silakan Sahabat Copy Semua kode tersebut .

8.Selanjutnya Login Ke Blogger.

9.Klik Tata Letak.

10.Klik Edit HTML.

11.Selanjutnya cari Kode yang ada dibawah ini.

12.Biar lebih gampang nyarinya, teken aja tombol CTRL+F.

13.Kalo udah ketemu Paste Kode yang tadi di copy (script, yang ada di langkah 7) tepat dibawah kode .




14.Klik SIMPAN TEMPLATE dan lihat hasilnya.

selesai niihh...gimana..cukp mudah bukan..Jika sahabat ada yang belum mengerti, silakan isikan komentar, InsyaAllah secapatnya dan sebisa saya akan saya jawab. Terima kasih telah berkunjung!! ^_^

Cara Termudah Membuat Tab Animasi Otomatis

Cara Membuat Tab View Otomatis
 
Tutorial berikut merupakan perkembangan dari JQuery yang sekarang ini sudah banyak dibahas diberbagai blog tutorial. Oleh karena itu, saya ingin sekali share informasi ini sama Anda mungkin saja Anda lagi mencari info ini atau dengan berkunjungnya Anda pada Blog ini Akhirnya jadi tahu tentang informasi ini.

Artikel berikut diambil dari bloggertuts dan saya mencoba men-share kan trik ini dalam bahasa indonesia. Dan semoga sangat bermanfaat untuk Anda yang selalu haus akan tips dan trik baru dalam modifikasi blog.

Langkah2nya sebagai berikut:

• Login ke Blogger.com
• Kemudian Tata Letak
• Pilih Edit HTML
• Centang Expand Widget
• Copas kode berikut diatas kode ]]>

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF urlundefinedhttp://sites.google.com/site/rasiqzonetwork/image/tabvieworange.png) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}
.active-tab{
background:#FFFFFF urlundefinedhttp://sites.google.com/site/amatullah83/bg/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;     
}
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 urlundefinedhttp://sites.google.com/site/amatullah83/bg/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

• Berikutnya, Anda harus menginstall JQuery JavaScript pada blog Anda, Jika Anda sudah menginstallnya Anda bisa melewati step ini. Untuk yang belum, copas kode berikut diatas kode  

• Selanjutnya Save Template
• Untuk mengganti warna (Baca: Kode HTML Warna).

Note:

• Ganti kode warna merah sesuai keinginan Anda, Berikut penjelasan detailnya:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

var starttab=0; adalah pemulaan nomer widget yang akan dipilih untuk dimasukkan pada tab, ini dimulai dari 0. var endtab=2;  adalah nomer widget yang terakhir yang akan Anda masukkan pada Tab.  var sidebarname="sidebar"; adalah nama ID sidebar Anda, umumnya semua blog sama. Tapi mungkin template Anda ID sidebarnya beda jadi disesuaikan. 

Untuk mengetahui ID sidebar tamplate Anda, pada layout > Edit HTML > Anda cari kode berikut sidebar-wrapper  maka Anda akan mendapatkan kode diabawah ini:

section class='sidebar' id='sidebar' preferred='yes'>

Kode berwarna merah adalah ID sidebar Anda.

Membuat Tab Menu Horizontal Animasi

Postingan kali ini masih akan mengetengahkan tutorial  modifikasi tab menu pada template blogger. Untuk tab menu animasi juga banyak pilihan, untuk mencoba yang paling sederhana seperti screnshoot dibawah ini, silahkan ikuti tutorial berikut:

  1. Setelah sig in pada account blogger sobat -> pada dasbor -> Klik Tata Letak -> Edit HTML
2. Tambahkan kode CSS berikut diatas tag  ]]>:

.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0wMh-7ury838opF1z-iSss6n3Lz3eyZPxcSuoTWl5PfWDUqXmmga-bt-xMoyqLgFXET4ZGr-0OL8TVQ58607K-A-9BvbpDDXEtTAxi5i9bK-KT7orJcl1pK17Sxw6KAEGjS1H3Acfpls/s320/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFSVSN2csa3GgW1Te4mZhLTK2cj9R-p4Zdwaw5ba3X0lQznwmwA2iJa15YvawCD1ldBo5bkT_c18odrOFfpt0OPArSf2gwP4VNkp33zbfLDD5xW-1Xo4G58ykc9SkwiJDtnjEPwtky-U/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

3. Tambahkan kode HTML berikut diatas atau dibawah

atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

• Home
• Widgets
• Modifikasi Tab Menu
• Variasi Icons
• Background
   
• Blogger Templates

4. Simpan template dan lihat hasilnya. Cukup mudah yaa...