Cara Memasang Widget Alexa Rank Pada Blog (Blogspot)

Cara Memasang Widget Alexa Rank Pada Blog (Blogspot)

Assalamualaikum Wr. Wb...

Pada kesempatan kali ini Blog DeddyYudhaBlog akan mempost sebuah Artikel mengenai Trik dan Cara. Yah, mungkin postingan kali ini sudah banyak yang menshare dan sudah banyak juga yang tahu. Namun, apa salahnya jika saya Share? Siapa tau saja ada Blogger pemula yang membaca artikel saya kali ini. Baiklah sobat DeddyYudhaBlog langsung saja kita masuk ke dalam inti Artikel saya kali ini. Jadi, Trik dan Cara yang saya maksudkan di atas adalah Cara Memasang Widget Alexa Rank Pada Blog (Blogspot). Jika Blogger senior saya yakin sudah tau apa yang di sebut dengan Widget Alexa Rank, namun pada Blogger pemula mungkin mereka tidak tahu. Jadi kepada para Blogger pemula yang di maksud dengan Widget Alexa Rank adalah sebuah Widget yang berisi data berupa Ranking dan Links In Blog kita. Widget Alexa Rank dapat sobat lihat pada bagian sebelah kiri Blog ini, yang berseblahan dengan Widget Page Rank.

Nah, tentunya untuk dapat menampilkan Widget Alexa Rank pada Blog kita di perlukan sebuah Kode HTML atau JavaScript dari alexa.com yang nantinya akan kita paste di Blog kita. Bagaimana caranya? Mari kita simak penjelasannya berikut ini, Cekidot:

1. Langkah pertama yang harus sobat lakukan ialah masuk ke dalam situs Alexa dengan menuliskan alamat berikut www.alexa.com

2. Jika sudah berada pada Alexa, silahkan sobat pilih Site Tools, jika masih bingung perhatikan gambar di bawah ini:


3. Langkah selanjutnya, sobat akan di suguhi kembali pilihan-pilihan dari Alexa. Dari pilihan-pilihan tersebut pilihlah Alexa Site Widgets


4. Pada langkah yang ini sobat harus memasukkan nama Blog sobat yang ingin di pasangi Widget Alexa Rank ini. bila sudah, silahkan sobat klik pilihan Build Widgets di bawah kolom, dimana sobat menuliskan alamat Blog sobat tadi, perhatikan gambar:


5. Setelah itu, sobat dapat memilih Widget yang mana ingin sobat gunakan di Blog sobat. Jika sudah di pilih, silahkan sobat Copy Kode HTML atau JavaScript yang berada di bawah gambar Widget yang sobat inginkan pada Blog sobat.


Langkah dalam mengambil Kode HTML atau JavaScript Widget Alexa Rank, sudah selesai. Selanjutnya ialah langkah memasangnya pada Blog sobat.

1. Login pada akun Blogger sobat

2. Jika sudah masuk pada Dashboard, silahkan sobat klik Rancangan

3. Langkah berikutnya ialah mengklik Tambah Widget => HTML/JavaScript, lalu sobat pastekan Kode yang telah sobat Copy pada Alexa tadi

4. Langkah terakhir ialah, mengklik pilihan Simpan. Dan Sobat pun dapat melihat Widget Alexa Rank terpampang pada Blog sobat.

Nah sobat, bagaimana dengan tutorialnya? Cukup mudah bukan?

Sekian artikel pada kali ini..

Wassalam dan selamat Mencoba sobat..

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery

Membuat Link Blogroll Animasi Gulung (Update) - beberapa hari lalu di facebook page Pelajaran Blog sudah memberikan bocoran 'membuat show hide tab view widget for blogger'.

Membuat tab view biasa dan tab view menggunakan jquery memang tidak jauh berbeda,hanya saja ada penambahan beberapa kode javascript untuk menghasilkan efek menggulung atau istilah kerennya Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Lihat screenshot pic nya gan ato sobat bisa juga lihat widgetnya di sidebar pada blog ini:

Yup,tab view yang diciptakan dapat menyembunyikan widget pada sidebar,ini sangat bermanfaat sekali untuk menambah tampilan blogger agar lebih menarik dan akan terkesan rapi nantinya.

Langkah membuatnya sangat mudah sob,tinggal ikuti aja langkah-langkah dibawah ini ya

Langkah Cara Membuat jQuery Slick Tab pada Blogger

Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D

(1)




(2)




(3)

Nah,selanjutnya cari kode ]]> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]> tersebut.


#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;

}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}

Setelah itu,carilah kode ,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:




Lalu simpan templates sobat ya.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)




(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:




• Tab Satu Gan
• Tab Dua Gan
• Tab Tiga Gan

Letakkan kode HTML/Javascript anda di Tab Satu

Letakkan kode HTML/Javascript anda di Tab Dua

Letakkan kode HTML/Javascript anda di Tab Tiga

Setelah itu simpan dan sobat sekarang dah punya slick tab view widget yang dapat dijadikan alternative buat ngehemat tempat ,moga berhasil and selamat ngulik kodenya ya :D

ket:kode bercetak tebal gantilah atau isilah dengan widget yang sobat inginkan,bisa kode iklan,alexa widget,maupun kode HTML/Javascript yang lain.

Cara Mengganti Domain Blogspot dengan CO.CC Gratis

Cara mengganti domain blogspot dengan co.cc gratis. Melanjutkan posting cara setting domain co.cc, kali ini saya akan memberikan tutorial blogspot mengenai cara mengubah atau mengganti domain blogspot ke co.cc.

Bagi anda yang memiliki blog di blogger dengan nama yang panjang mungkin bisa mencoba domain gratis dari co.cc. Tapi ingat, jika blog anda sudah memiliki alexa rank yang tinggi dan sudah bagus dalam SEO, sebaiknya dipikir-pikir lagi untuk mengganti domain blogspot anda.

Langsung saja ikuti tutorialnya di bawah ini.

1. Log in dengan akun anda. Jika belum mendaftar, lihat cara pendaftarannya di sini.
2. Pilih domain yang akan digunakan.
   
   
3. Klik tombol Set up.
   
   
4. Pilih Zone Records.
   

Zone Records

Pada bagian ini anda akan mulai melakukan setting domain co.cc. Langkah-langkahnya tidak susah. Anda hanya butuh sedikit kesabaran karena perubahannya tidak langsung terjadi.

Berikut pengaturannya.

Host, isi dengan domain co.cc anda (jangan lupa pakai www).

TTL, biarkan tetap 1 D.

Type, pilih CNAME.

Value, ketik ghs.google.com.

Setelah itu lanjut ke pengaturan di blogger. Ikuti petunjuk setting domain co.cc di blogspot di bawah ini.

1. Masuk ke akun blogger anda.
2. Pilih menu Settings (Pengaturan) » Publishing (Publikasikan).
3. Klik tulisan Custom Domain.
4. Klik tulisan Switch to advanced settings.
   
5. Di kolom Your Domain, isi dengan domain co.cc anda tadi (masih dengan www).
6. Terakhir isi kolom Word Verification dan simpan.
   

Cukup sampai di situ saja cara mengganti domain blogspot dengan co.cc. Setelah selesai mengikuti tutorial di atas, blog anda tidak bisa dibuka untuk sementara waktu.

Waktu yang diperlukan untuk bisa mengakses blog dengan domain baru anda biasanya hanya sebentar. Mungkin hanya beberapa menit ataupun beberapa jam, maksimal 2 hari.

Tutorial menggunakan screenshot lengkap bisa di lihat langsung di sini.

Selamat mecoba, semoga berhasil!