Cara Mudah Pasang Widget Alexa Rank Di Blog | Tips Blogspot | Pasang Widget ALEXA Rank Dengan MUDAH

Cara Mudah Pasang Widget Alexa Rank Di Blog | Tips Blogspot | Pasang Widget ALEXA Rank Dengan MUDAH - Cara Pasang Widget Alexa Rank di Blog Ini buat sobat yang masih bingung tentang Pasang widget alexa. Bagi sobat yang sudah mahir, rasanya tutorial ini kurang berguna bagi sobat. Sebelum langsung ke topik utama yaitu tentang langkah - langkah memasang widget alexa ke blog, ada baiknya anda mengetahui manfaat apa yang akan di dapat dengan memasang alexa widget tersebut, pada posting sebelumnya sudah Kolom Bog GRATIS sebutkan salah satu cara meningkatkan Alexa Rank atau peringkat alexa blog atau website adalah dengan cara memasang widget alexa rank di blog atau website sobat dan sudah teruji sob,...

Alexa rank akan membuat peringkat berdasarkan banyaknya pengunjung blog atau web, semakin banyak pengunjung terhadap suatu blog atau web maka alexa rank akan semakin baik. Darimana alexa mengetahui jumlah kunjungan terhadap suatu web atau blog? Alexa Rank akan mengetahui jumlah kunjungan suatu website atau blog sobat berdasarkan informasi dari komputer yang browser internetnya memasang alexa toolbar, jika sobat ingin memasang alexa toolbar silakan ikuti panduannya sampai selesei,...

Tidak semua orang memasang alexa toolbar di browser, justru itulah maka muncul alternatif lain bagi pemilik blog atau web untuk mendapatkan data yang akurat tentang banyaknya kunjungan yaitu dengan Pasang alexa widget pada blog atau web yang di miliki. Dengan memasang alexa widget di blog, maka mesin alexa akan mengetahui secara akurat berapa pengunjung serta Page view ( halaman yang di lihat ) pada web atau blog sobat. berikut langkah - langkahnya Cara mudah Pasang Widget Alexa Rank Di Blog :

..:: Langkah Pertama Pasang Alexa ::..

1. Klik Alexa.com Widget ]>>
2. Masukan URL blog
3. Klik “ Build Widget ”.
4. 3 ukuran widget yang bisa sobat pilih, copy kode yang ada di sampingnya lalu paste pada notpad atau text editor lainnya.
5. Simpan kode tersebut di komputer sobat untuk nanti di masukan ke rancangan html website atau blog sobat.

..:: Langkah Kedua Pasang Alexa ::..

1. Login ke blogger
2. Klik Tata Letak.
3. Klik tab Elemen Halaman.
4. Klik Tambah Gadget.
5. Klik tanda Plus (+) di samping tulisan HTML/JavaScript.
    
   
   
6. Paste kode yang tadi ada di notepad kedalam kolom yang muncul.
7. Klik tombol Simpan.
8. Pindahkan elemen yang baru dibuat tadi ke tempat yang sobat inginkan, jika mau tentunya.
9. Jangan lupa klik tombol Simpan yang ada di sebelah atas.
10. Selesai.

Mudah - mudahan dengan di pasangnya widget alexa di blog sobat, alexa rank blog sobat akan cepat bagus ( semakin kecil semakin baik rangkingnya ). Sedikit tambahan, alexa rank terbilang cepat dalam melakukan update sehingga hasilnya akan terlihat dalam beberapa hari saja sobat,...

Satu yang paling utama dalam menaikan ranking alexa adalah dengan mencoba meningkatkan trafik atau jumlah kunjungan ke blog sobat dan cukup disini dulu tipsnya jangan lupa tambahkan jaringan teman anda di Kolom Blog GRATIS ( follow up ), sebar luaskan ilmu gratis ini kesemua orang yang sobat kenal atau pun tidak kenal dengan ikhlas. Semoga bermanfaat,...

sumber

Read more...

Memasang Auto Slideshow CoinSlider di Blogger/Blogspot

Coinslider merupakan slideshow yang dibuat dengan jQuery yang memiliki efek transisi yang menarik. Efek transisi yang ada pada slideshow ini yaitu swirl, rain, straight. Karena efeknya yang tidak terlalu banyak sehingga slideshow ini hanya memiliki ukuran (12kb).
Melihat struktur HTML untuk membuat slideshow ini tidak terlalu rumit. Sehingga saya mencoba membuatnya dalam versi autoslideshow (digabung dengan feed blogger). Nah bagi anda yang ingin memasang diblog anda bisa ikuti langkah-langkah yang ada dibawah ini. Sedangkan yang tertarik untuk versi manualnya dapat membaca diwebsitenya workshop.rs.

Menampilkan Add a Gadget diatas Blog Post

Jika diblog anda belum tampil tombol/tulisan add gadget di atas Blog Posts ikuti langkah berikut untuk menampilkannya:

1. Pada dashbord pilih Template kemudian klik tombol Edit HTML
2. Kemudian cari kode <b:section class='main' id='main' showaddelement='no'> lalu ganti rubah showaddelement menjadi yes sehingga menjadi seperti ini <b:section class='main' id='main' showaddelement='yes'>
   NB: Untuk mempermudah dalam pencarian tekan Ctrl+F pada keyboard lalu tulis <b:section class='main' id='main' showaddelement='no'>.
3. Klik Simpan

Menambahkan gadget HTML dan Script Slideshow CoinSlider

1. Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add a Gadget diatas Blog Post Area
2. Setelah itu scroll kebawah hingga menemukan HTML/JavaScript lalu klik tombol tambah yang ada disudut kanan
3. Kemudian Masukkan Kode berikut:
   

   123456789101112131415161718192021222324252627282930313233343536373839404142434445<style scoped="" type="text/css">
   #coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em}
   .coin-slider{overflow:hidden;zoom:1;position:relative}
   .coin-slider a{text-decoration:none;outline:none;border:none}
   .cs-buttons{font-size:0;padding:10px;float:left}
   .cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px}
   .cs-active{background-color:#B8C4CF;color:#FFFFFF}
   .cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
   a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important}
   .cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF}
   .cs-title strong{display:block;font-size:120%}
   .cs-title p{margin:0}
   .cs-title cite{font-size:90%}
   .cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
   .cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
   </style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
   <script type='text/javascript'>
   var AutoCoinConfig = {  
    url_blog: "http://mkr-site.blogspot.com", 
    MaxPost: 7, 
    cmtext: "Komentar", 
    MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], 
    pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", 
    NoCmtext : "Belum Ada Komentar",
    imageSize :500,
    SumChars : 100,
    tagName:false,
    width: 500,
    height: 250,
    spw: 7,
    sph: 5,
    delay: 3000,
    sDelay: 30, 
    opacity: 0.7,
    titleSpeed: 500,
    effect: '',
    navigation: true,
    links : true,
    hoverPause: true,
    prevText: 'prev',
    nextText: 'next'
   };
   </script>
   <script src="https://ivyth.googlecode.com/svn/js/autocoin.min.js" type="text/javascript"></script>

   NB: Pada line 17 adalah link script jQuery library. Jika di template ada sudah ada silahkan hapus kode ini. Karena pemasangan lebih dari 1 jQuery Library dapat membuat error
4. Klik Simpan

Membungkus Gadget HTML dengan Tag Kondisional

Jika tahap diatas sudah selesai sekarang tahap pembungkusan gadget dengan tag kondisionaluntuk mengatur dimana saja slideshow ini mau ditampilkan.
Misalnya gadget itu hanya ingin ditampilkan dihalaman depan/beranda cara sebagai berikut

1. Pada dashbord pilih Template kemudian klik tombol Edit HTML dan centang pada bagianExpand Widget Templates
2. Kemudian cari kode <b:section class='main' id='main' showaddelement='yes'>, karena sebelumnya telah ditambahkan HTML widget maka akan terlihat widget type HTML dengan id HTMLxx (xx: nomor widget HTML).
   Misalnya widget HTML dengan id HTML5 yang akan saya tambahkan tag kondisional hanya pada halaman depan/beranda
   Maka akan menjadi seperti ini:
   

   <b:widget id='HTML5' locked='false' title='' type='HTML'>
   <b:includable id='main'>
   <b:if cond='data:blog.url == data:blog.homepageUrl'> 
     <!-- only display title if it's non-empty -->
     <b:if cond='data:title != &quot;&quot;'>
       <h2 class='title'><data:title/></h2>
     </b:if>
     <div class='widget-content'>
       <data:content/>
     </div>
   
     <b:include name='quickedit'/>
   </b:if>
   </b:includable>
   </b:widget>

3. Klik Simpan

sumber

Demo Coin Slider

Opsi-Opsi

Deskripsi

url_blog

Isikan dengan link blog anda misal:http://mkr-site.blogspot.com

MaxPost

Maksumal jumlah post/artikel yang ingin ditampilkan

cmtext

Tulisan Jika terdapat komentar

imageSize

ukuran gambar yang ingin ditampilkan

SumChars

Jumlah karakter yang ingin ditampilkan pada ringkasan

NoCmtext

Tulisan jika tidak terdapat komentar.

pBlank

Backup gambar jika artikel tidak memiliki gambar

MonthNames

Format tulisan pada nama bulan.

tagName

Jika ingin menampilkan artikel berdasarkan tag/label, misalnya tag bloggermaka ditulis seperti ini : tagName:"blogger"

width

Lebar dari slideshow.

height

tinggi dari slideshow.

spw

Jumlah kotak pada lebar (jumlah kolom)

sph

Jumlah kotak pada tinggi (jumah baris)

delay

Waktu pergantian slide

sDelay

waktu pergantian untuk kotak pada efek slide(spw dan sph)

opacity

Tingkat tranfaransi (0-1)

titleSpeed

Waktu untuk efek pada pada bagian Judul

effect

Jenis efek pada pergantian slide. pilihan: "random" , "swirl" , "rain" , "straight".

navigation

Jika ingin menampilkan navigasi nilainya: true atau false

links

Jika ingin mengaktifkan link pada gambar. Nilainya :true atau false

hoverPause

Menghentikan slide jika mouse ada diatasnya.

prevText

Tulisan Prev

nextText

Tulisan Next

Satank Mkr

Read more...

cara memasang slide show di blog terbaru 2013

Salam sukses semua buat pengunjung paling tokcer blog.

setelah saya sekian lama berselancar didunia maya dan sudah bosan rasanya untuk mencari cara memasang slide show yang keren dan gak berat loadingnya. tapi kerja keras saya terbayar dengan penemuan kode java scrib yang mudah tinggal tambah gedget doang dan yang tentunya gak perlu lageEdit HTML. seperti yang di publis di blog-blog yang lain. Sedikit muji diri hehe

mangfaat kita memasang slide show di blog adalah untuk menarik pengunjung untuk membaca artikel yang paling populer di blog kita dan untuk memudahkan pengunjung menjelajah kedalam blog kita dan dia tidak mudah bosan dengan isi blog kita karena yang kita kaikan dengan slide show adalah the best artikel dan yang paling banyak di cari oleh orang.

untuk melihat DEMO hasilnya silahkan klik DISINI

baik tampe menperpanjang lansung saja kita memasuki tutorial bagaimana cara memasang silde show di blog.

• langkah 1. masuk ke blogger home
• langkah 2, klik Tata Letak
• langakh 3, klik Tambah Gadged atau Add Gadged
• langkah 4, piliih HTML/JavaSript
• langkah 5, pastekan kode dibawah ini kedalam kolom kolom tersebut:

<style type="text/css">

 /* JavaScript Image Slider By http://www.helperblogger.com/ */

#mcis {

 display: none;

}

#sliderFrame {

 position: relative;

 width: 500px;

 margin: 0 auto;

        border:5px solid #000;

}

#ribbon {

 width: 111px;

 height: 111px;

 position: absolute;

 top: -4px;

 left: -4px;

 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk1o4epRrnIVj5aDQXKpWEgnglTZcWdOIsz4TwmHpwSO8P98F6iSH_jedr33eD-Ti2gAYOv_1JmsVtDedkL1ysDNFqfD4L2Xkj4c1c5Tg6mw_mFkPXjx5jk84GWn6LUApfvDOGFizp1DY/s1600/helperblogger.com-ribbon.png) no-repeat;

 z-index: 7;

}

#slider {

 width: 500px;

 height: 218px;

 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicfvK-Z8qYH3whzAJGJvE8w7PYR_5LjxAT9Zr6rhw6QtSIsXY24X2tG6Di-ID9SngaOsKpDCkEo0fBZPIhpyX7LY_KYGiVLd9_yN5PDUiaNj7x_r1MwYzg_QFmmElSMAu-bJAzQB1sy3E/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;

 position: relative;

 margin: 0 auto;

 box-shadow: 0px 1px 5px #999999;

}

#slider img {

 position: absolute;

 border: none;

 display: none;

}

#slider a.imgLink {

 z-index: 2;

 display: none;

 position: absolute;

 top: 0px;

 left: 0px;

 border: 0;

 padding: 0;

 margin: 0;

 width: 100%;

 height: 100%;

}

div.mc-caption-bg, div.mc-caption-bg2 {

 position: absolute;

 width: 100%;

 height: auto;

 padding: 0;

 left: 0px;

 bottom: 0px;

 z-index: 3;

 overflow: hidden;

 font-size: 0;

}

div.mc-caption-bg {

 background-color: black;

}

div.mc-caption {

 font: bold 14px/20px Arial;

 color: #EEE;

 z-index: 4;

 padding: 10px 0;

 text-align: center;

}

div.mc-caption a {

 color: #FB0;

}

div.mc-caption a:hover {

 color: #DA0;

}

div.navBulletsWrapper {

 top: 250px;

 left: 190px;

 width: 150px;

 background: none;

 padding-left: 20px;

 position: relative;

 z-index: 5;

 cursor: pointer;

}

div.navBulletsWrapper div {

 width: 11px;

 height: 11px;

 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9yg0dRbNi3xniweKCMykP6kKMN7GLMhr067vk1CnFqwjjQDwxFnRCk03HqhFn9TUuNXKjOFvB6qfgIJCC7napVCn_LAAZZRa473XP07YgeMOSbnKb91AmRruqDAIKFMtYZO5t8r9MpcE/s1600/helperblogger.com-bullet.png) no-repeat 0 0;

 float: left;

 overflow: hidden;

 vertical-align: middle;

 cursor: pointer;

 margin-right: 11px;

 _position: relative;

}

div.navBulletsWrapper div.active {

 background-position: 0 -11px;

}

#slider {

 transform: translate3d(0,0,0);

 -ms-transform: translate3d(0,0,0);

 -moz-transform: translate3d(0,0,0);

 -o-transform: translate3d(0,0,0);

 -webkit-transform: translate3d(0,0,0);

}

 </style> 

<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">

     <div id="ribbon"></div>

            <div id="slider">

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="tips menulis artikel yang baik"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt="tips agar tidak mudah bosan potingan"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="tips agar bisa naik page rank google"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="tips copy paste yang baik dan di sukai orang"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="tips geblog pakai blogger"/></a>

                </div></div>


liat contoh dibawah yang sudah saya edit:

<a href="http://palingtokcer.blogspot.com/2012/12/cara-menhubungkan-blog-dengan-twitter.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0k9udr95XAuUH8kzhRvb05ACkCNMS3JUchM9NRR2uC6KzHGm1qfXXWlK4vo6apPIGKYyqXm0qKZYIIQD6_wLopXBPF6SyT2QvuPHEJ2GT4iSZZ_Ecv8NIR3qzlqWQwYGqY42vaInP9dY/s1600/promo+vektor.jpg" alt="Cara Menghubungkan blog dengan Twitter"/></a>

                </div></div>

• langkah 6, olah slide: 
• Warna kode warna merah adalah untuk menyesuaikan besar atau kecil slide show (jangan edit kalau belum terlalu paham)
• kode warna ungu untuk menganti link sobat.
• kode warna hijau untuk mengganti link gambar sobat liat penjelasan di bwh
• kode warna biru untuk mengganti judul pstingan
• DIBAWAH INI CONTOH EDIT SLIDENYA:
• langkah 7, simpan dan liat hasilnya

sumber

Read more...