Memaparkan catatan dengan label Blogger. Papar semua catatan
Memaparkan catatan dengan label Blogger. Papar semua catatan

Ahad, 22 Jun 2014

Cara Menggunakan SEO untuk Meningkatkan Visitor



Apabila Anda ingin membuka peluang usaha yaitu ingin menjual/barang dan Jasa sebagai salah satu bisnis yang akan Anda terjuni sesuai dengan keinginan Anda seperti dengan cara Dropshipper maupun Reseller suatu produk maka diantara cara yang sangat bagus untuk mempromosikan produk dan Jasa Anda agar Volume penjualannya cepat meningkat adalah dengan Cara membangun suatu website atau Blog baik yang berbayar maupun yang gratisan sebagai alat pemasaran/promosi produk dan Jasa Anda dengan jangkauan yang sangat luas hingga menembus keseluruh Dunia dengan cepat dan praktis karena calon Konsumen dapat melihat jenis barang dan Jasa yang kita tawarkan secara langsung melalui Media Online pada website/Blog yang telah kita buat, dalam membuat suatu Website/Blog yang sangat penting diperhatikan adalah melakukan Optimasi pada website/Blog yang kita miliki dengan beberapa cara diantaranya mengenai SEO (Search Engine Optimization) yang salah satu fungsinya adalah untuk mendeteksi website/Blog Kita agar terdaftar pada WebMaster yang terdapat pada jaringan internet.

Hal yang pertama yang dilakukan untuk mengenal apakah itu SEO? dan bagaimana cara kerja robot webMaster itu sendiri, mungkin sedikit untuk memperjelas bahwa suatu WebMaster yang fungsi, melakukan crawler pada mesin pencari untuk mendeteksi setiap situs untuk melihat bagaimana hal relevan dengan kata kunci yang ditampilkan oleh suatu website/Blog secara jelas. Maka mesin pencari akan mencari link yang mengarah ke akhir tertentu, untuk melihat berapa banyak dukungan yang diberikan di setiap halaman yang di
tampilkan pada suatu Website/Blog. kemudian WebMaster menyatukan semua hasil entri mesin pencari yang sesuai lalu mesin pencari menganalisis informasi untuk diurutkan menurut penilaian atau Algoritma WebMaster itu sendiri yang ketentuannya menurut penilaian masing-masing Vendor WebMaster (Google,Yahoo,Bing,Ask,yandex,Dmoz etc), jika Artikel dari suatu Website/Blog dinilai baik atau dinilai dianggap penting menurut penilaian WebMaster maka Artikel dari Website/Blog tersebut akan diletakan pada Page One/Page 1 (Halaman pertama) pada mesin pencari walaupun Domainnya dengan nilai yang sangat kecil (Pagerank 0), dalam hal ini dalam membuat suatu Artikel yang akan diposting hendaknya Relevan antara Judul dan isi Artikel harus saling berkaitan/nyambung dan berkwalitas serta Unique mengenai isi dan maksud dari Judul Artikel. mungkin Anda pernah mengalami ketika melakukan pencarian pada Browser saat mengetikan kalimat yang hendak Kita cari namun ketika dibuka Website/blog tersebut, Kita tidak menemukan Artikel yang Kita maksud yang hanya mempunyai kemiripan kata kunci yang kita cari saja, dalam Hal ini antara judul dan Isi Artikel berbeda. keadaan ini biasa terjadi karena Si pemilik Blog hanya mengejar Keyword yang banyak dicari/trend saja atau mengejar Keyword yang Abadi sehingga dapat menambah Visitor bagi Website/Blognya namun cara ini sangat tidak disarankan bahkan melanggar TOS pada setiap WebMaster yang ada di Internet. karena nantinya WebMaster akan mengangap Blog yang demikian melakukan kecurangan yaitu menampilkan informasi yang tidak relevan sehingga WebMaster akan menilai jelek pada Website tersebut mengakibatkan Artikel yang tidak relevan tadi diabaikan oleh mesin pencari yaitu diletakan pada Page 1000 bahkan mugkin juga diletakan pada halaman paling bawah WebMaster pada halaman tersebut siapa yang mau baca karena sulit dicari... hehee... selain itu dapat juga berakibat domain Blog tersebut menjadi "Fake" bahkan terkena finalty >BANNED< kejadian seperti ini biasa juga terjadi pada Website/Blog yang mempunyai Artikel >COPAS<.

Setelah Kita mengetahui sedikit fungsi mengenai "Search Engine" dan pemahaman tentang pentingnya "SEO" maka langkah selanjutnya dengan menggunakan kata kunci dalam konten yang telah Anda buat apakah telah terdeteksi oleh Semua Mesin pencari disetiap jaringan Internet sehingga setiap orang dengan mudah menemukan Website/Blog Anda untuk mendapatkan Informasi yang mereka butuhkan yang terdapat pada Artikel yang Anda buat, sehingga nantinya berdampak baik pula pada Promosi produk dan Jasa Anda yang ditampilkan didalam Website/Blog milik Anda sehingga penjualan Barang dan Jasa Anda meningkat.

Selanjutnya Anda perlu memastikan bahwa link website Anda terdapat pada Website/Blog lain dengan cara memberikan Komentar yaitu berkunjung pada Website/Blog lain disarankan yang mempunyai "niche" yang serupa dengan Website/Blog Anda kegiatan kunjungan antar Blog ini biasa disebut dengan Link Building atau saling mencari Backlink, selanjutnya dapat juga Anda lakukan dengan cara menyebar Artikel Blog Anda pada semua Sosial Media dengan cara mempublikasikannya Artikel yang telah Anda buat dan akan mengarahkanya pada Link ke blog Anda untuk mendapatkan banyak Visitor.

Selain itu, Anda mencari Backlink dengan kata kunci di situs web Anda, pastikan Anda memiliki gambar dari halaman dengan membuat kata kunci. Kebanyakan orang menyepelekan hal ini sebenarnya apabila hal ini dilakukan sangat membantu sekali bagi mesin pencari umtuk menemukan Konten Website/Blog Anda dengan Cepat untuk mengindeks pembaruan pada Website/Blog Kita sehingga terlihat lebih SEO Freindly, demikian sedikit info yang dapat Saya berikan kali ini. jika Rekan-rekan sekalian mempunyai pengalaman mengenai SEO dapat menambahkan pada Kotak komentar untuk saling berbagi, Happy Blogging for All..........




RECENT POST :
Cara Install Driver Wi-fi dan LAN untuk semua Merk (All Type)
- Visual Basic 6.0 Enterprise Edition + Serial Number

Isnin, 28 April 2014

Cara Mudah Membuat Sitemap Daftar Isi Automatis Table

Untuk mempermudahkan para pembaca mencari info atau seluruh isi postingan yang terdapat pada suatu Blog/website maka yang wajib dibuat adalah membuat Sitemap atau Daftar Isi Automatis sehingga pembaca dapat menemukan seluruh artikel yang dibuat, fungsi lain dari Sitemap selain disebutkan tadi juga berfungsi untuk SEO(Search Engine Optimation) yaitu berfungsi mempermudah Suatu Search Engine untuk melakukan index atau menemukan postingan dari suatu Blog saat Search Engine melakukan Crawl sehingga jika Blog/Website telah menempatkan Sitemap maka Search Engine dengan mudah menampilkan Blog/domain kita pada tiap kata kunci dari semua Judul postingan, deskripsi, dan isi artikel di mesin pencari sehingga berfungsi menambah Traffic suatu Blog/Website karena dinilai lebih SEO freindly,  Cmiiw... dan bagi yang ingin Blognya dipersiapkan untuk mengikuti Program _Adsense_ pada _Google dengan membuat Sitemap/Daftar Isi Automatis sangat dianjurkan sebelum melakukan pendaftaran pada program _ADSENSE_ karena nantinya bila Blog kita diterima pada program tersebut nantinya mereka dengan mudah menentukan letak iklan karena pihak _adsense ingin menampilkan iklan yang relevan atau tepat sasaran karena Blog yang mempunyai Sitemap Automatis bersifat tertata sesuai dengan kategori. untuk membuat Sitemap atau Daftar isi Automatis dapat rekan-rekan ikuti langkahnya sebagai berikut:

Silahkan perhatikan Script berikut ini:

<script src="https://sites.google.com/site/subtaged/archive/content.js"></script><script src="http://Tutorialplan.blogspotdotcom/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>


Contoh Tampilannya akan terlihat seperti dibawah ini:


  Langkah-langkahnya:
 - Silahkan Copass Script_ diatas pada     
   Pages/Halaman Blogger) buat Halaman baru 
 - Letakan pada HTML bukan pada Compose lalu
   buat judul Sitemap
 - Untuk warna Merah silahkan dihapus dan 
   diganti dengan URL blog Anda
 - Dan tulisan/Script berwarna BIRU tidak
   usah diganti/jangan dihapus(biarkan saja)
 - Kemudian terbitkan/publikasikan..Selesai..

Khamis, 20 September 2012

Cara Membuat Tombol Twitter, Tweet pada Blogspot

Para pengguna Facebook pasti mengenal dengan Tombol LIKE yaitu Suatu tempat
mengekpresikan sikap yang menandakan suatu Ekpresi atau ungkapan suka yang diwakilkan dengan meng-klik Tombol LIKE, dengan suatu ekpresi serupa yang terdapat
pada Twitter untuk mewakilkan ekpresi seperti di Facebook, twitter juga menyediakan Tombol tweet. dan bagi pemilik Web/Blog biasanya mereka memasang kedua Pasilitas LIKE atau Tweet yang dipasang pada Blog mereka baik dipasang di samping judul artikel atau juga dipasang di bawah artikel Web/Blog mereka. berikut dibawah ini akan di jelaskan mengenai Cara Memasang Tweetdi Postingan pada Blog, untuk itu silakan Anda mengikuti  langkah-langkah di bawah ini:

Cara Membuaat Tombol Tweet di Samping Judul Artikel pada Blogspot

1. Silahkan Anda login ke blogger.
2. Lalu Klik rancangan, lalu kemudian masuk ke edit HTML.
3. Klik "expand template widget".
4. Cari kode <data:post.title/>  (yang paling terakhir) dengan menekan F3, tampilan kodenya seperti ini:

        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>

5. Setelah itu silahkan Anda Copy kode berikut lalu paste di bawah kode </b:if>

    <div style='float:right; padding: 0 5px 5px 0;'>
    <script type='text/javascript'>
    tweetmeme_style = &#39;compact&#39;;
    tweetmeme_url = &#39;<data:post.url/>&#39;;
    tweetmeme_source = &#39;DAW-XP&#39;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
    </div>

6. Kemudian Simpan template......
   

Cara Membuat Tombol Tweet di Bawah Artikel

1. Silahkan Anda masuk ke akun Blogger Anda
2. Lalu klik rancangan, kemudian masuk ke edit HTML.
3. Klik "expand template widget".
4. Lalu silahkan cari kode <data:post.body/> Kemudian letakkan kode berikut dibawah  <data:post.body/>

    <div style='float:right; padding: 0 5px 5px 0;'>
    <script type='text/javascript'>
    tweetmeme_style = &#39;compact&#39;;
    tweetmeme_url = &#39;<data:post.url/>&#39;;
    tweetmeme_source = &#39;DAW-XP&#39;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
    </div>

 5. Kemudian jangan lupa Simpan template.... selesai..

Selamat mencoba........

Selasa, 17 Julai 2012

Cara Cepat Membuat Readmore Automatis

Cara membuat readmore di blogspot dengan cara yang mudah dan cepat di blog, sebelumnya saya  akan menjelaskan sedikit tentang kegunaan readmore pada blog. dengan adanya readmore blog dapat menghemat ruang pada tampilan Blog kita. membuat tampilannya menjadi dinamis atau lebih enak dilihat, karena tampilan artikel/postingan tidak terlalu memanjang ke bawah.

Berikut cara memasang readmore di blogspot :

-Login ke blogger dengan ID Anda.
-Pilih Rancangan atau Tata Letak.
-Pilih Edit HTML
-Klik tulisan "expand template widget".
-Lalu cari kode </head> :   untuk mempermudah pencarian tekan F3.
-Lalu masukkan code di bawah ini tepat di atas  </head>
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 120; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Kemudian cari kode <data:post.body/>
Ganti kode <data:post.body/>  dengan kode di bawah ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>
Kemudian Save Template.
untuk keterangan pada  readmorenya...
var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;

Keterangan:
summary_noimg = 300;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
summary_img = 300;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel;
img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;
Tulisan readmore dapat Anda ganti Seumpama diganti dengan “Baca Selengkapnya”demikianlah penjelasan mengenai cara cepat membuat readmore otomatis.

Selamat mencoba...........

Isnin, 7 Mei 2012

Cara Membuat Postingan Yang Hanya Menampilkan Judulnya Saja

Cara membuat postingan  yang hanya menampilkan judulnya saja tanpa menampilkan Artikel secara bersamaan, silahkan Anda ikuti langkah - langkah di bawah ini:

1. Login ke Akun Blogger Anda
2. Lalu masuk ke halaman Template
3. Pilih Edit HTML kemudian Lanjutkan
4. Cari kode ]]></b:skin> (gunakan ctrl+f) kemudian copy paste kode di bawah ini sebelum kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>
5. Simpan/ Save Template

Tapi apabila Anda telah memasang kode di atas namun masih terdapat elemen postingan seperti: tanggal postingan,  ataupun jumlah komentar maka Anda dipersilahkan untuk menggunakan kode di bawah ini:
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body, .post-footer, .jump-link, 
.post-timestamp, .reaction-buttons, 
.star-ratings, .post-backlinks, 
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>
Selamat Mencoba......

Ahad, 6 Mei 2012

Cara Membuat Menu Drop Down Blogroll

Tampilan Menu Drop Down Blogroll mungkin pernah Anda lihat pada tampilan Blog yang Anda kunjungi, dan berikut akan diberikan cara bagaimana membuat menu drop down blogroll tersebut, silahkan Anda ikuti langkah pembuatannya dibawah ini:
1. Seperti biasa silahkan Anda login ke akun Blogger kepunyaan Anda
2. Lalu klik Tata Letak atau Layout
3. Klik Tambah Elemen atau Add Element
3. Kemudian Silahkan Klik  HTML / JAVASCRIPT

4. Lalu Copy paste kode dibawah ini kedalam kolom HTML/Javascript
<select onChange="document.location.href=this.options
[this.selectedIndex].value;">
<option value="0" selected>Menu Drop Down</option>
<option value="Url situs Artikel/postingan Anda_1">Judul postingan Anda_1</option>
          <option value="Url situs Artikel/postingan Anda_2">Judul postingan Anda_2</option>
<option value="Url situs Artikel/postingan Anda_3">Judul postingan Anda_3</option>

</select>

 5. Klik Simpan/Save.

Hasilnya akan terlihat seperti ini: 



Keterangan :

Untuk kode yang berwara Merah merupakan Url dari postingan silahkan diganti dengann Url postingan Anda,
Untuk Kode yang berwarna Biru adalah Judul dari postingan Silahkan diganti sesuai dengan Url postingannya. dan untuk jumlah Blogroll Downnya Silahkan Anda menambahkan menurut kenginan Anda.

Selamat mencoba...........

Sabtu, 28 April 2012

Cara Membuat Profil Facebook Pada Blog


Untuk memperindah tampilan Profil Blog kita, Anda dapat menampilkan Profil dari Jejaring Sosial kepunyaan Anda. Sehingga yang nantinya para pengunjung dapat mengetahui Facebook pemilik pada Blog yang di kunjungi dan dapat Saling komunikasi lewat Sosial media tersebut. saling Add.. jadi mendapat banyak teman. dan bagaimana Cara membuat Profil Facebook Pada Blog Berikut ini Anda dapat mengikuti langkah- langkah menampilkannya:
Langkah awal..silahkan login ke facebook

1. Setelah masuk di Akun Facebook Anda lalu Klik profile, kemudian lihat paling bawah di barisan kolom
    teman yang ada tulisan buat lencana profil lalu silahkan di Klik
2. klik lencana baru dan copy codenya, atau pilih blogger
3. kemudian masuk ke blogger dan pilih tata letak/ layout
4. Tambah gadget, pilih Html /Javascript
5. Lalu buat judul profile facebook dan pastekan kodenya di kolom bawahnya, Kemudian
    Simpan.....selesai...

Selamat mencoba..........

Selasa, 10 April 2012

Cara Memasang IP Address Locator

Mungkin Anda pernah menemukan di suatu Blog yang menampilkan Alamat IP ADDress dari pengunjung Blog.. padahal kita sebagai pengunjung tidak pernah memberi Informasi mengenai Ip Address kita. dan mengapa itu bisa terjadi...??  Baiklah, Mari kita tanya dengan Galilleo...hehee..... "Memang banyak Situs-situs di Internet yang menyediakan pasilitas Tool IP diantaranya IP Address Locator dengan memasang IP Address Locator di suatu Blog, pengunjung Blog bisa mengetahui Alamat IP ( Internet Protocol ), Lokasi IP ataupun nama ISP ( Internet Service Provider ) bagi pengunjung yang terkoneksi ke jaringan Internet, salah-satu penyedia layanan ini adalah hzzp://www.ipaddresslocation.org dan apabila Anda ingin menampilkan IP Address Locator adalah:
Copy script dibawah ini lalu diletakkan di Html/Javascript diarea Blog yang Sobat inginkan.

<script language="JavaScript" src="hzzp://www.ipaddresslocation.org/my-ip-address.php" type="text/JavaScript">
</script>
Powered by <a href="hzzp://www.ipaddresslocation.org">IP Address Locator</a> 

 
Catatan: Silahkan diganti Huruf yang berwarna zz dengan "tt" tanpa tanda " ".


Hasilnya akan  terlihat seperti  ini.



Khamis, 22 Mac 2012

Cara Membuat Tulisan Berjalan Di Address Bar

Cara Membuat Tulisan Berjalan di Address Bar dengan cara efek Marquee, yang berfungsi dapat membuat efek tulisan berjalan di Address Bar atau kata lainnya ditempat Link In Tab pada Browser, Berikut langkah-langkah cara membuatnya.

Membuat Tulisan Berjalan Di Address Bar
  • Untuk membuat tulisan berjalan di address bar langkah pertama yang harus anda lakukan adalah Login ke Blogger
  • Setelah itu klik menu Layout atau Tata letak
  • Kemudian klik menu Edit HTML
  • Silahkan temukan kode ini </head>
  • Kemudian silahkan letakan Kode berwarna Merah dan Hijau dibawah ini, Lalu letakan tepat dibawah Kode </Head>
<script type='text/javascript'>
//<![CDATA[
msg = " --- Silahkan diganti";
msg = " | silahkan di ganti | silahkan diganti | silahkan diganti | silahkan diganti --- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",100);
}
scrollMSG();
//]]>
</script>

Kemudian silahkan  anda mengganti tulisan berwarna Hijau dengan tulisan yang Anda inginkan, Karena tulisan itulah yang akan terlihat berjalan di address bar.
Sebelum pengaturannya di simpan, sebaiknya di preview dulu.

Selamat mencoba...

Rabu, 21 Mac 2012

Cara Membuat Menu Dropdown di Blogspot

Ada beberapa alasan kenapa kita harus membuat Menu dropdown tanya kenapa?? heheee...  jelas saja fungsinya untuk menghemat tempat di blog kita. tapi jangan khawatir , caranya sangat Simple , walaupun untuk yang masih pemula, Kita pasti bisa melakukan ini, berikut cara membuat dropdown sub menu di blogspot :

Langkah-langkahnya:
1. Seperti biasa log in ke akun blogger Anda.
2. Lalu pilih design.
3. Pilih add gadget.
4. Kemudian silahkanp pilih HTML/Javascript.
5. Setelah itu Silahkan Anda Copy paste kode dibawah ini ke kotak HTML/Javascript tadi.

<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>
<option>Link</option>
<option value="http://tutorialplan.blogspot.com">Tutorialplan Blog</option>
<option value="http://www.belajarblog.com">belajarblog</option>
<option value="http://www.facebook.com">nama facebook sobat</option>
</select></form>

Untuk Kode yang berwarna Merah silahkan diganti dengan keinginan Anda, dan tempat letaknya bisa diletakan juga di bagian Edit HTML, tergantung keinginan Anda.

Isnin, 19 Mac 2012

Cara Membuat Recent Post dengan Menggunakan Scroll

Gadget recent post dengan menggunakan efek scroll, memudahkan kita untuk menentukan jumlah artikel terbaru yang akan kita tampilkan pada tampilan Blog kita. berikut akan dijelaskan tehnik pembuatannya.Bila anda tertarik untuk mencobanya, silahkan ikuti langkah-langkah dibawah ini :

1. Klik Rancangan dan pilih Elemen Laman

2. Silahkan Anda Klik Tambah Gadget

3. Pada jendela baru silahkan pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<script style="text/javascript" src="https://sites.google.com/site/articleblog234/category/scrolling.js"> </script><script style="text/javascript"> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://tutorialplandotblogspot.com//feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script>

Catatam :
  • Ganti http://tutorialplandotblogspot.com dengan Blog Anda
  • var nMaxPosts = 15; (Maksimal jumlah post yg tampil)
  • var nScrollDelay = 175; (Nilai kecepatan scroll)
  • var sDirection="left"; (Arah bisa diganti : right. up, bottom)
  • var sOpenLinkLocation="N" ("N" = Link diarahkan dg buka tab baru, bisa diganti "Y")
  • var sBulletChar="•"; (Tanda List, bisa diganti : "~ , @ , # , $ , ^ , * , + , atau yg lain)
5. Kemudian Simpan.

Semoga berhasil...... selamat mencoba.........

Khamis, 16 Februari 2012

Cara Membuat Recent Comment dengan Avatar

Membuat recent comment / komentar  yang di lengkapi dengan Avatar / Gambar tanpa edit html dan Tanpa panjang lebar, langsungsaja.... Bagaimana membuatnya caranya:

 1. Login ke blogger dengan akun Anda.
 2. Di dashboard masuk ke layout
 3. Setelah itu anda pilih add gadget >> HTML/Javascript
 4. Masukkan kode-kode di bawah ini pada kotak HMTL/Javascript

        <style type="text/css">
        ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
        .tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0

!important;display:block;clear:both;overflow:hidden;list-style:none;}
        .tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 00;position:relative;overflow:hidden;}
        .tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
        .tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
        </style>
        <script type="text/javascript">
        //<![CDATA[
            // Recent Comments Settings
            var
        numComments  = 7
        showAvatar  = true,
        avatarSize  = 40,
        characters  = 60,
        defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
        hideCredits = true;
        //]]>
        </script>
        <script type="text/javascript" src="http://johnytemplate.googlecode.com/files/recentcomment.js"></script>
        <script type="text/javascript" src="http://tutorialplan.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=7"></script>

    Keterangan :
    Warna merah  : adalah jumlah komentar yang ditampilkan
    Warna kuning 40 : ukuran pixel avatar
    Warna hijau 60 : Jumlah karakter huruf komentar
    Warna Kuning : ganti dengan URL blog Anda.
 5. Kemudian save, Selesai..... Semoga bermanfaat.

Ahad, 12 Februari 2012

Cara Membuat Animasi Status Loading

Untuk membuat status loading pada Blog yang berfungsi sebagai memberikan variasi agar lebih menarik dalam tampilan bagi pengunjung Blog sehingga pengunjung Blog tidak bosan menunggu pada saat loading dalam mengakses di Blog kita, berikut ini ada tahapan yang dapat Anda ikuti dalam membuat status Loading di Blog.

Tahap yang harus Anda lakukan adalah:

1. Login ke Akun kepunyaan Anda di Blogger.Com.
2. Klik Layout --> Edit HTML.
3. Tekan F3 di keyboard lalu Cari kode <body> di dalam template Anda, kemudian silahkan diganti kode             tanda <body> tadi  dengan kode  di bawah ini :


<body onLoad='init()'&gt<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://Alamat URLyang disimpan.Image'/></div><script src='http://h1.ripway.com/ichal13/preloader.js' type='text/javascript'/></script>

4. Simpan Template dan selesai.

 Keterangan :
>> Silahkan diganti alamat ULR yang berwarna  Merah dengan ULR tempat  Anda menyimpan gambar.                                                                                                                                                                     
>> Untuk posisi letak animasi lodingnya, Anda bisa mengganti  kode: "align   center" (tengah), "align right"
      (kanan), "align left"(kiri), bawah, atas, Menurut keingginan Anda.
 
  Selesai....

Selasa, 24 Januari 2012

Cara Membuat Menu Horizontal di Blogspot

Bagaimana Cara Membuat Menu Horizontal di blogspot seperti menu kolom Home, About, Contact and Other secara horizontal, banyak jenis menu horizontal yang bisa divariasikan, seperti dengan dropdown CSS ,multi level jquery ,anvigasi slide dan dengan html jquery.
tapi kali ini akan diberikan tutorial bagaimana Cara Membuat Menu Horizontal pada Blogspot, berikut caranya :
-Login ke blogger.com, lalu pilih design .
-Pilih Edit HTML, download full template untuk menghindari terjadinya kesalahan pada saat terjadinya Error
  jadi Anda bisa mengembalikan lagi bentuk template  seperti semula.
-Lalu Klik kotak expand template widget pada template Anda, dan cari kode: </b:skin>
Hapus kode tersebut dan ganti dengan kode:
</b:skin><style type='text/css'>.pagemenu-container #pagemenu{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:#000 repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase}.pagemenu-container #pagemenu ul{margin:0;5px;0px;5px;padding:0;border:1px solid $bordercolor;list-style-type:none;width:860px}.pagemenu-container #pagemenu ul li{display:block;float:left;margin:0 1px 0 0}.pagemenu-container #pagemenu ul li a{display:block;float:left;color:#fbdafa;text-decoration:none;padding:10px 18px 0 18px;height:28px}.pageme nu-container #pagemenu ul li a:hover,.pagemenu-container #pagemenu ul li a.current{color:#fff;background:#306 no-repeat top center}</style>
Kemudian silahkan Anda cari kode: <div id='content-wrapper'>
Lalu silahkan dihapus dan diganti dengan:
<div class='pagemenu-container'> <div id='pagemenu'> <ul> <li class='page_item home'><a href='http://tutorialplan.blogspot.com//' title='Home'>Home</a></li> <li class='page_item page-item-2'><a href='http://tutorialplan.blogspot.com//l' title='About'>About</a></li> <li class='page_item page-item-3'><a href='http://tutorialplan.blogspot.com//profile/16474552668039271355' title='Contact Us'>Contact</a></li><li class='page_item page-item-4'><a href='http://tutorialplan.blogspot.com//2011/10/daftar-isi.html' title='Daftar Isi'>Daftar Isi</a></li><li class='page_item page-item-5'><a href='http://tutorialplan.blogspot.com//2012/12/belajar-blog-l.html' title='Belajar Blog'>Blog</a></li></ul></div> </div> <div id='content-wrapper'>
Keterangan:
Kode background: #000 : warna latar belakang dari menu horizontal, #000 adalah kode warna hitam, Kode tersebut dapat Anda ganti sesuai dengan keinginan Anda misalkan untuk kode warna  Biru, kodenya adalah #0C36F5.
Kode width:860px : panjang horizontal menu nya, silakan samakan dengan panjang pada kode #header-wrapper atau panjang #outer-wrapper blog Anda.
Kode {color:#fff;background:#306 no-repeat top center} : warna text dan warna background pada saat disorot dengan pointer mouse.
Untuk diingat bahwa url link http://tutorialplan.blogspot.com diganti dengan Blog kepunyaan Anda .

Selamat mencoba........

Selasa, 10 Januari 2012

Cara Membuat Recent Post Unique di Blogspot

Recent post Unique yang dibahas di tutorial blog kali ini bukan recent post seperti biasanya namun recent post yang memiliki tampilan beserta gambar thumbnail yang bergerak-gerak. fungsinya dapat mempermudah pengunjung Blog untuk dapat melihat Tampilan  artikel terbaru. lalu Bagaimana cara membuat recent post gambar thumbnail bergerak di blog. Silahkan mengikuti cara membuatnya.
1. Login ke akun blogger.com Anda
2. Pilih rancangan atau design.
3. Pilih add gadget pada bagian page elements dan lalu pilih html /javascript.
4. lalu silahkan isi judul menurut keinginan Anda dan copy paste kode recent post di bawah ini ke kotak tersebut dan ganti tulisan berwarna BIRU dengan alamat blog anda.


<center><style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 0;
</script> <script src="http://tutorialplan.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center>

Kemudian jangan lupa untuk di Save/Simpan selesai......

Rabu, 4 Januari 2012

Cara Membuat Background Gambar pada postingan

Banyak cara untuk memperindah  tampilan pada Blog Kita. untuk itu kali ini Saya ingin berbagi bagaimana cara memperindah Blog dengan cara menambahkan Gambar dalam Artikel Blog. Bagaimana dapat di mengerti atau masih Bingung yang saya maksudkan.... Baiklah maksudnya Begini saya jelaskan lagi.,.. dengan memberi background gambar pada tulisan atau postingan kita, seperti pada halaman ini. Tapi tentunya gambar yang akan kita gunakan sebagai background sebaiknya kita buat lebih transparan, agar nantinya tulisan atau postingan kita tetap terlihat dan tetap enak di baca.
Dengan menambah background  pada postingan  seperti yang ada dihalaman ini akan menambah nuansa pada Blog kita menjadi lebih berwarna dari biasanya

Selanjutnya menggenai bagaimana cara membuatnya :
1. Silahkan anda login ke blog anda.
2. Klik Posting, lalu pilih Entri baru.
3. Masukkan kode dibawah ini pada halaman (HTML), bukan (Compose) :

 
      <div style="background:url(Http:// Image Anda) no-repeat;">Artikel anda disini</div>


4. ganti  Http:// Image Anda dengan alamat Url Image/gambar Anda5. Ganti tulisan "Artikel anda disini" dengan tulisan atau artikel anda.
6. Setelah selesai silahkan anda terbitkan, dan lihat hasilnya

Selesai... Selamat mencoba....

Ahad, 4 Disember 2011

Cara Menampilkan / Membuat Google Page Rank di Blog

Untuk menentukan Rangking suatu Blog, kita dapat mengeceknya di Google Page Rank yang ketentuan Nilainya adalah  berawal dari O sampai 10 bila semakin tinggi nilai Rangking suatu Blog maka semakin Baik pula keberadaan Blog di mata Google. dalam pembahasan kali ini kita akan membahas bagaimana cara memasang Google Page Rank pada Blog kita.... 
Langkah Awal Menampilkan, Membuat Google Page Rank sebagai berikut :
  1. Silahkan anda mengunjungi situs ini  http://www.prchecker.info
  2. Pada tulisan Instantly Check Page Rank value of your web pages on-line! Klik tulisan Check Page Rank.
  3. Masukkan alamat Url Blog Anda dengan lengkap. Misal Contoh : http://tutorialplan.blogspot.com
  4. Klik tombol Check PR.
  5. Akan keluar alamat url blog beserta nilai Google Page Rank blog Anda.
  6. Pada kalimat Want to add such button to your web site ? - Click here , klik tulisan Click here.
  7. Kemudian Anda akan diminta memasukkan kode Anti-bot Code dikolom yang tersedia sesuai dengan kode yang ditampilkan.
  8. Setelah dimasukkan, klik tombol Generate Now
  9. Akan muncul Alamat url blog Anda, Google Page Rank dan 3 script yang bisa Anda Copy-paste untuk di pasang di blog Anda.
  10. Seperti biasa Klik Rancangan, Tambah Gadget lalu pilih Html/Javascript
  11. Simpan

Selesai....... Selamat mencoba........

Ahad, 13 November 2011

Cara Menampilkan Video di Artikel

Video yang di tampilkan diantara Artikel pada Blog kita  fungsinya teramat penting karena selain memperindah tampilan Blog sehingga lebih Variatif juga berfungsi sebagai Media yang efektif dalam penyampaian untuk memperjelas bagi pengunjung Blog. terutama bagi yang melakukan kegiatan dalam bisnis Online yang berfungsi untuk menarik minat para pengunjung untuk tujuan Bisnisnya. dalam membuat sebuah video, kita dapat mengunakan situs layanan pembuatan video, salah-satunya adalah http://www.youtube.com.

Ikuti langkah-langkah berikut ini :
  1. Untuk daftar silahkan kunjungi http://www.youtube.com
  2. Setelah berada di situs tersebut, klik tulisan Sign Up yang berada pada layar bagian atas
  3. Isi semua data diri anda pada form yang di sediakan, jangan lupa beri tanda tik/cek pada kotak di samping tulisan »» Sign me up for the "Broadcast Yourself" email
    - I agree to the terms of use and privacy policy. lalu klik tombol Sign Up
  4. Setelah berhasil, anda diminta untuk veryfikasi, silahkan cek email yang anda daftarkan tadi untuk melakukan veryfikasi
  5. Jika email dari youtube.com sudah masuk, silahkan buka lalu klik tulisan Confirm your email addres
  6. Dengan menekan klik tulisan tadi, secara otomatis anda sudah masuk kedalam halaman account anda dan siap untuk upload video
  7. Klik tulisan Upload Video yang berada pada layar sebelah atas
  8. Isi form yang di sediakan
  9. Klik tombol bertuliskan Continue Uploading
  10. Klik tombol Browse, masukan file video yang ingin anda masukan
  11. Beri tanda tik/cek pada radio button, public »» jika video anda bisa dilihat oleh umum. Private »» Jika video anda bersifat pribadi yang hanya bisa di lihat oleh orang yang anda tunjuk
  12. Klik tombol Upload Video, tunggu beberapa saat sampai proses upload selesai
  13. Setelah proses upload selesai, anda tinggal mengcopy kode HTML yang di berikan. lalu paste pada Notepad
  14. Silahkan klik Log Out untuk keluar dari situs tersebut dan proses selesai
  15. Anda sudah mempunyai video yang bisa di simpan pada artikel anda

Untuk memasukan kode video yang telah anda copy tadi, caranya yaitu anda tinggal posting artikel seperti biasa lalu sisipkan kode tersebut pada tempat yang anda inginkan. namun pada saat copy dan paste kode tersebut posisi posting harus pada Edit HTML tdak boleh pada posisi Compose. Jika sudah selesai memasukan artikel, Tinggal klik Publish dan video anda siap di lihat oleh para pengunjung blog anda.

Rabu, 7 September 2011

Cara Membuat Label Kategori

Untuk membuat lable kategori pada pasilitas widget yang diberikan oleh Blogger tidaklah sulit karena Blogger membuat pasilitas widget ini untuk mempermudah bagi pengguna Blogger sebagai layanan customer servicenya, berikut dapat Anda ikuti cara membuatnya.

  1. Login ke Blogger
  2. Pada halaman dashboard, klik Tata Letak
  3. Klik Elemen Halaman
  4. Kemudian pilih Tambah Gadget
  5. Cari Label lalu di klik
  6. Lalu akan ada halaman seperti di bawah ini :

  7. Untuk Judul Anda sesuaikan sendiri, setelahnya klik simpan.
  8. Untuk mengisi Label atau Kategori, pada saat Anda melakukan posting tulisan, silahkan isi kolom kosong dibawah kolom postingan dengan kategori yang Anda kehendaki, seperti ini contohnya :
  9. Dan juga menggunakan cara berikut, pada halaman edit entri --> Klik salah satu postingan Anda --> klik aksi label --> label baru, lalu isi dengan label yang Anda inginkan


Semoga berhasil....

Sabtu, 25 Jun 2011

Cara Membuat Blogspot di Blogger

Cara membuat Blogspot di Blogger langkah pertama yang harus di lakukan adalah Anda harus mempunyai Email yang Baru di buat dengan kata lain Email yang akan dipergunakan untuk membuat Blog tidak terpaut dengan suatu Account lain seperti terkait di Account pada Sosial Media (Facebook, Twitter,Myspace Etc) Setelah Email dibuat silahkan Anda mengunjungi situs di www.blogger.com, Untuk lebih jelasnya Andat dapat mengikuti langkah-langkah pembuatannya dibawah ini...

Cara Membuat Blogspot di Blogger

1. Anda dapat menggunjungi Situs http://www.blogger.com, Lalu  masukan alamat Email yang telah Anda buat tadi gunakanlah Email dari  Gmail dan masukan Password akun Gmail Anda Kemudian klik MASUK / Get Started, tampilannya seperti ini.



2. Setelah Anda memasukan alamat Email, Password Gmail anda dan klik MASUK / Get Started, Isi Alamat Email, Nama Sobat, Nama tampilan dan klik penerimaan persyaratan. Kemudian klik LANJUTKAN


3. Isi Judul Blog, dan Alamat Blog yang Anda inginkan dan klik LANJUTKAN.


 4. Untuk memulai blog kita, maka kita harus klik tombol CIPTAKAN BLOG ANDA


5. Di halaman ini Anda akan diminta untuk memberi nama untuk Blog yang akan Kita buat setelah itu kita. Mulai dari memberi judul serta menentukan alamat blog (URL) kita.
Setelah kita menentukan alamat blog, kita harus klik CEK KETERSEDIAAN untuk mengetahui alamat blog tersebut masih tersedia atau sudah terpakai/Valid.



 6. Pilih Template yang anda suka (kalau anda tidak suka Template yang telah di sediakan. sebaiknya pilih Template default lalu klik LANJUTKAN.
 7. Blog sudah selesai dan siap untuk di masukan dengan postingan jika halaman di bawah sudah tampil.silahkan klik lanjutkan kemudian menuju ketampilan postingan...selesai