Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts
Membuat label cloud Kren di blog

Membuat label cloud Kren di blog

Tutorial yang berjudul cara "membuat label mode cloud di blog" ini sebenarnya gak jauh beda dengan tutorial-tutorial blog lainnya (yang berkaitan dengan mempercantik tampilan blog). Memang seperti itu bukan?
Nah pada tutorial kali ini, langkah yang harus kita lakukan adalah langkah yang sangat mudah dan gampang. Siapkan kopi + cemilan biar gak bosan hehe
  • Langkah Pertama Sign In ke Facebook eh ke Blog sobat hehe
  • Pilih Template, pada bagian ini pilih Edit HTML
  • Pada bagian HTML cari kode ]]></b:skin> atau tekan CTRL+F untuk memudahkan pencarian
  • Jika sobat sudah mendapatkan kode ]]></b:skin>, silahkan Copas (Copy dan Pastekan) kode dibawah ini tepat sebelum /diatas kode ]]></b:skin>ini
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C0C0C0; border-radius: 3px; float:left; text-decoration:none; font-size:9px; color:#666; }
.label-size:hover { border:1px solid #B20000; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; }
.label-size a { text-transform: uppercase; float:left; text-decoration: none; }
.label-size a:hover { text-decoration: none; }
  • Jika langkah-langkahnya sudah diikuti dengan baik dan benar, Silahkan sobat simpan dulu dan lihat hasilnya
  • Untuk memudahkan agar tampilan label ini berjalan dengan apa yang sudah kita bahas kali ini. Pastikan sobat sudah menambahkan Widget Label ke tata letak blog sobat. Kemudian pada widget label tersebut, setting dalam mode cloud.
Sekian tutorial tentang membuat label dengan mode cloud, mohon maaf jika ada kekurangan. masih newbie juga hehe
Saran & Komentar dari teman-teman silahkan disematkan dikolom komentar.
Terima kasih
Cara membuat daftar isi blog otomatis

Cara membuat daftar isi blog otomatis

Cara membuat daftar isi otomatis di blog sobat, lihat contoh disini
Bagaimana? sobat tertarik? Jika sobat tertarik, lets do it hehe
Perhatikan langkah demi langkah, karena yang akan kita lakukan kali ini lumayan sulit dan berbahaya. hehe
Oya sebelum ke tahap penyelesaiannya, daftar isi otomatis ini sebenarnya sangat cocok untuk membantu merapikan artikel sobat, apalagi jika sobat memiliki banyak artikel tetapi sobat tidak terlalu suka dengan banyak widget, wahh cara ini pas buanget dah sob...
Tutorial kali ini adalah salah satu yang ingin admin kuasai untuk belajar SEO.
Ok, berikut langkah-langkahnya:
  • Pilih laman dan buat laman baru
  • Kemudian, pada laman baru sobat, silahkan pilih mode HTML
  • Nah... pada mode HTML tersebut, silahkan sobat copy  dan pastekan kode dibawah ini
    <div dir="ltr" style="text-align: left;" trbidi="on">
    <style scoped="scoped" type="text/css">
    /* Skin for Blogger Tabbed Layout TOC */
    #tabbed-toc{margin:0 auto;background-color:#224C19;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#333}
    #tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;color:white}
    #tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0 0;padding:0 0;list-style:none}
    #tabbed-toc .toc-tabs{width:20%;float:left}
    #tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#ccc;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}
    #tabbed-toc .toc-tabs li a:hover{background-color:#153615;color:white}
    #tabbed-toc .toc-tabs li a.active-tab{background-color:#275827;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text;*/}
    #tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:5px solid #275827;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    #tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}
    #tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px/normal Helmet,Freesans,Sans-Serif}
    #tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:11px;color:#892412;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden}
    #tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
    #tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden}
    #tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}
    #tabbed-toc .panel li:nth-child(even){background-color:#FFE8E3}
    #tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#333;color:white;outline:none}
    #tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222}
    @media (max-width:700px){#tabbed-toc{border:2px solid #333}#tabbed-toc .toc-tabs,#tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc .toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab{background-color:#224C19;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4)}#tabbed-toc .toc-tabs li a.active-tab{background-color:white;color:#333}#tabbed-toc .toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
    </style>
    <br />
    <div id="tabbed-toc">
    <span class="loading">Memuat...</span></div>
    <script>
    var tabbedTOC = {
        blogUrl: "https://berbagi-cerita9.blogspot.co.id/", // Blog URL
        containerId: "tabbed-toc", // Container ID
        activeTab: 1, // The default active tab index (default: the first tab)
        showDates: false, // `true` to show the post date
        showSummaries: false, // `true` to show the posts summaries
        numChars: 200, // Number of summary chars
        showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
        thumbSize: 40, // Thumbnail size
        noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
        monthNames: [ // Array of month names
            "Januari",
            "Februari",
            "Maret",
            "April",
            "Mei",
            "Juni",
            "Juli",
            "Agustus",
            "September",
            "Oktober",
            "November",
            "Desember"
        ],
        newTabLink: true, // Open link in new window?
        maxResults: 99999, // Maximum post results
        preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
        sortAlphabetically: true, // `false` to sort posts by published date
        showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
        newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
    };
    </script>
    <script src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script></div>

    • Cari dan Ganti Url: "http://berbagi-cerita9.blogspot.co.id/" dengan Url Blog sobat
    • Simpan, kemudian lihat.. ambil Urlnya dan letakan Url tsb ke tempat yang sobat inginkan. Kalau dari admin sendiri, karena admin menggunakan template standar, admin meletakannya di bagian Page. :)
    Selamat mencoba sob... saling berbagi itu indah.. iya gak :)
      Kritik dan Saran silahkan disisipkan di kolom komentar

      Cara download video tanpa menggunakan aplikasi

      Mungkin teman-teman sudah banyak yang tahu tentang cara ini yaitu cara bagaimana mendownload video dari youtube tanpa menggunakan aplikasi, misalnya IDM, youtube downloader dan aplikasi lainnya.
      Trik yang akan saya tunjukan kepada teman-teman kali ini cara mendownload video dari youtube dan trik ini saya tujukan kepada teman-teman yang belum tahu Cara download video tanpa menggunakan aplikasi. Untuk itu, saya sarankan teman-teman untuk memperhatikan langkah-langkah berikut ini :) .
      Langkah demi langkah akan kita mulai dari youtube sendiri, saat anda menyaksikan video di youtube entah itu musik, film, tutorial dan sebagainya yang membuat teman-teman tertarik untuk mengoleksi video tsb, dan ingin mendownloadnya. Karena IDM teman-teman selalu minta registrasi ulang sehingga membuat teman-teman tidak bisa mendownload video tersebut. Nah cara yang akan saya bagikan kali ini adalah cara yang tepat untuk mengatasi masalah tersebut.
      Berikut langkah-langkahnya:

      • Buka tab baru dan ketik Youtube.com
      • Kemudian pada kotak pencarian, silahkan teman-teman ketik judul video yang ingin teman-teman download,  lihat dulu video tsb (tujuannya untuk memastikan kualitas video)
      • Jika teman sudah yakin untuk mendownloadnya, copy url video tsb. contoh lihat gambar dibawah ini:




      • Yang saya beri tanda kotak merah pada gambar tersebut adalah Url yang harus teman-teman Copy , tekan CTRL+C untuk memudahkan proses copy
      • Kemudian, Buka Tab Baru 
      • Pada Tab baru / New Tab tsb, ketik ssyoutube.com (lihat gambar diatas) tekan ENTER
      • Setelah itu, teman-teman akan diantarkan pada halaman ini 
      • Tempelkan / Paste Url video dari youtube yang sudah teman Copy tadi tepat didalam kotak yang sudah saya beri tanda merah (lihat gambar diatas)
      • Jika sudah ditempelkan atau dipaste, tekan ENTER
      • Pilih kualitas video yang teman-teman inginkan 
      • Langkuh selanjutnya, atau langkah terakhir, pilih tempat yang teman-teman inginkan untuk menyimpan video tersebut.
      Catatan: Untuk kualitas video, saran saya pilih kualitas video MP4 360p agar browser teman-teman tidak terganggu.

      Cara tambahan biar teman-teman lebih cepat pahamnya:
      • Teman-teman cukup menambahkan SS setelah www. [dot] youtube.com/ pada Url video yang sedang teman-teman lihat. Lihat contoh : 
      Gampangkan...?
      Cukup sampai disitu dulu, :) selamat mencoba ... semoga artikel ini dapat membantu dan bermanfaat untuk kita. 
      Terimakasih dan sampai jumpa di artikel selanjutnya.. Saran dan komentar silahkan titipkan di kotak komentar

      NOTEPAD: Program Penghitung

      Tutorial kali ini adalah sebuah tutorial yang sudah tidak asing kita dengar, karena sesuatu yang akan saya bagikan pada kesempatan kali ini ada sesuatu yang sering kita temui dilingkungan tempat tinggal kita, hanya saja bentuk dan rupanya yang membedakannya :)

      Ok, langsung saja, saya yakin sobat pasti sudah tahu apa itu kalkulator, iya kan? hehe
      Berdasarkan sumber yang saya dapatkan dari Wikipedia Indonesia

      Kalkulator adalah:
      "Mesin hitung atau Kalkulator adalah alat untuk menghitung dari perhitungan sederhana seperti penjumlahan, pengurangan, perkalian dan pembagian sampai kepada kalkulator sains yang dapat menghitung rumus matematika tertentu. Pada perkembangannya sekarang ini, kalkulator sering dimasukkan sebagai fungsi tambahan daripada komputer, handphone, bahkan sampai jam tangan"

      Nah, kali ini saya akan mencoba untuk berbagi cara membuat barang tersebut dalam bentuk yang sangat sederhana dengan fungsi yang hampir sama (+  -  /  *).
      Setelah sobat melihat artikel ini, saya yang sobat pasti langsung bisa, karena sebenarnya membuat kalkulator itu emang gak terlalu sulit, namanya aja sederhana hehe

      Ok, kita langsung ke TKP, berikut adalah langkah-langkahnya:
      1. Buka Notepad sobat
      2. Langkah berikutnya:
      Copy kode berikut:

      @echo off
      iam154.blogspot.co.id Calculator
      :ulang
      echo Mari Berhitung!
      set /p A=Masukkan Angka Pertama =
      set /p B=Masukkan Angka Kedua =
      set /p o=Pilih Operator Hitung (*, +, -, /) =
      set /a "jumlah" = A%o%B
      echo Jumlah = %jumlah%
      pause>null
      goto ulang

      Dan pastekan ke Notepad sobat, sehingga tampilannya seperti gambar dibawah ini:

      3. Silahkan sobat Save dengan format Calculator.bat 
      4. Setelah di Save lihat gambar dibawah ini


      5. Buka untuk memeriksa apakah kalkulator yang baru saja kita buat dapat bekerja layaknya sebuah kalkuator pada umumnya


      Keterangan:
      • Kotak warna merah 1 (Angka pertama yang ingin kita jumblahkan)
      • Kotak warna merah (Angka kedua yang ingin kita jumblahkan)
      • Kotak warna merah (Pilih tanda + - / *  pada keyboard sobat, pada contoh bergambar di atas saya menggunakan penjumlahan (+))
      • Kotak warna merah (Kotak dengan nomor 4 pada contoh bergambar diatas adalah hasil dari operasi yang kita lakukan)
      Untuk mengulang operasi, tinggal tekan ENTER pada keyboard sobat.
      6. Selesai...
      Sekian dan terima kasih, semoga dapat bermanfaat...
      Kritik dan saran silahkan sampaikan pada kotak komentar...

      Cara Claim dan Verifikasi Alexa

      Cara claim dan verifikasi kode alexa sebenarnya menurut saya susah-susah gampang. Kenapa saya bisa berpendapat demikian, karena menurut saya untuk mengklaim kode alexa itu emang gak mudah (khusus yang baru mengenal alexa) apalagi untuk mendapatkan rank yang lebih bagus (dalam artian dibawah 1 jta) menurut saya sudah tergolong rank yang sangat bagus, berbelit-belit dan kita juga gak tau dimana tempat kita menemukan kode tsb.
      Cara yang akan saya bagikan kali ini mengenai Cara Claim dan Verifikasi Alexa sesuai dengan versi saya dan pengalaman saya, yah bisa dikatakan berbagi pengalaman gitu.
      Jujur saja cara ini tidak jitu untuk mendapatkan rank yang lebih bagus, tetapi saya yakin sobat akan mendapatkan ID alexa sobat sekaligus sobat dapat memverifikasikan kode tersebut secara langsung. Dan harapan saya kita sebagai blogger terutama yang ingin dan yang sudah menggunakan alexa bisa mendapatkan rank yang lebih bagus, iya gak?

      Berikut adalah langkah-langkah yang harus kita lakukan:
      1. Klik disini untuk daftar atau login ke alexa
      2. Klik disini Untuk Claim Site sobat
      3. Setelah itu, sobat akan diantarkan ke Select Method (lihat gambar dibawah ini)


      4. Pilih Method 2 (jika sobat sudah memilih select method 2) maka sobat akan diantarkan pada halaman seperti gambar di bawah ini

      Keterangan: 
      Yang saya beri tanda kotak warna merah itu adalah kode /  id verifikasi yang harus sobat tempelkan ke html blog sobat. Biar gak ribet, sobat ambil kode dengan kotak warna merah yang bagian 2, dan tempelkan di bawah kemudian save / simpan, Contoh, ini cara saya menempelkan id verifikasi saya, silahkan dilihat dulu:)

      5. Jika sobat sudah melakukan langkah tersebut, pada halaman ini silahkan sobat pilih atau click Verify ID.

      6. Selesai... ID alexa sobat sudah berhasil di claim.

      Sekian informasi sekaligus pengalaman saya yang dapat saya bagikan kepada sobat... terima kasih atas kunjungannya, semoga postinganya ini dapat membantu dan bermanfaat untuk kita semua. Amin

      Cara meletakan Iklan Adsense di dalam postingan

      Cara meletakan Iklan Adsense di dalam postingan

      Cara meletakan Iklan Adsense di dalam postingan, bagaiamana cara? Kali ini saya akan berbagi sedikit tips dan trik mengenai cara meletakkan iklan didalam postingan, trik cara meletakan iklan adsensen didalam postingan kali saya pokuskan pada bagian atas dan bagian bawah postingan. Nah, berikut adalah langkah-langkah yang harus sobat lakukan.
      Trik kali ini tidak berbeda dengan trik-trik lainnya yang berhubungan dengan cara mempercantik blog :)
      Langkah Pertama
      • Buka adesense.com 
      • Pilih My Ads / Iklan Saya
      • Dibagian My Ads / Iklan Saya, ambil atau copy  kode iklanyang ingin sobat masukan ke dalam postingan
       "Catatan: Pilihlah iklan yang berukuran dibawah 600"

      • Kemudian buka new tab / tab baru, ketikan Parse hatml atau sobat bisa klik disini
      • Selanjutnya, silahkan sobat Pastekan Kode Iklan Adsense yang sudah sobat Copy tadi
      • Klik Parse 
      • Setelah itu, Copy atau Cut kode  iklan yang sudah di Parse tsb.
      • Selesai
      Langkah Selanjutnya:
      • Masuk ke Blog sobat
      • Pilih Template dan Edit HTML
      • Pada bagian HTML sobat tekan CTRL + F dan ketik data:post.body
      • Kalau sudah ketemu Pastekan Kode Iklan yang sudah di Parse tadi tepat di atas kode  data:post.body dan letakan tepat dibawahnya jika sobat ingin iklan sobat tampil dibawah postingan sobat.
      • Oya.. hampir lupa, agar peletakan iklannya berjalan lancar, sebelum kode iklan yang anda tempelkan tadi Silahkan sobat ketik: <div style='text-align:center'> (Iklan berada ditengah) atau <div style="float:left"> (Iklan berada disamping kiri) atau <div style="float:left"> (Iklan berada disamping kanan)
      • Kemudian untuk menutupnya silahkan sobat tambahkan kode </div>
      • Kurang lebih seperti contoh dibawah ini
      <div style='text-align:center'>
      &lt;script async src=&quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;&gt;&lt;/script&gt;
      &lt;!-- iam154_banner-header_AdSense2_605x90_as --&gt;
      &lt;ins class=&quot;adsbygoogle&quot;
      style=&quot;display:inline-block;width:605px;height:90px&quot;
      data-ad-client=&quot;ca-pub-6918695079544903&quot;
      data-ad-slot=&quot;9383325277&quot;&gt;&lt;/ins&gt;
      &lt;script&gt;
      (adsbygoogle = window.adsbygoogle || []).push({});
      &lt;/script&gt;
      </div>

      • Selesai...

      Sekian tips dan trik dari saya, semoga bermanfaat dan selamat mencoba.

      Salam blogger