Showing posts with label Tutorial blogger. Show all posts
Showing posts with label Tutorial blogger. Show all posts

Saturday, 12 December 2015

Bagaimana Cara Memodifikasi Template Blog Agar Lebih SEO Friendly

No comments:

Senang sekali otataxatix blog bisa kembali update postingan neh gengs, pada kesempatan kali ini kita akan membahas tentang Bagaimana Cara Memodifikasi Template Blog Agar Lebih SEO Friendly.

Berikut Langkah-langkahnya

1. Masuk ke dashboard blog kamu
2. Pilih menu Template dan Edit HTML
3. Kalau sudah masuk cari kode:

<title><data:blog.pageTitle/></title>



4. Kalau sudah ketemu ganti dengan kode berikut:

<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> | <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

 5. Tahap Selanjutnya kita modifikasi Meta Tag, dengan cara meletakan kode berikut tepat dibawah kode <head>.


<!-- SEO Meta Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='keywords'/></b:if>    
<b:if cond='data:blog.pageType == &quot;item&quot;'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><meta content='noindex,nofollow' name='robots'/></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex,nofollow' name='robots'/></b:if>

6. Simpan Tempale 

Berikut tutorial kali ini semoga bermanfaat.
Read More

Thursday, 10 December 2015

Bagaimana Cara Menampilkan Menu Penghasilan/Earnings Pada Blogger

No comments:
Menu Penghasilan pada blogger adalah menu yang berisi pengaturan untuk iklan Google Adsense pada blog. Untuk mendaftarkan Google Adsense melalui blogger harus ada Menu Penghasilan untuk mendaftarkan blog Anda via Blogger. Maka dari itu kali ini ini kita akan berbagi tips tentang bagaimana cara menampilkan menu penghasilan pada blogger.

Cara Menampilkan Menu Penghasilan/Earnings
1. Silakan login ke akun blogger  di https://www.blogger.com/
2. Kemudian masuk pada menu Setelan
3. Selanjutnya Anda pilih menu Bahasa dan Pemformatan untuk mengatur bahasa
4. Selanjutnya pilih pada menu Bahasa untuk merubah bahasa indonesia ke bahasa inggris, mungkin karena bahasa indonesia belum jadi bahas internasional hehe oke lanjut
5. Rubah bahasa menjadi bahasa Inggris, silakan Anda pilih salah satu bahasa Inggris ( UK ) atau Inggris ( USA ).

6. Silakan Anda Simpan dan refresh browsernya
7. Setelah itu akan muncul Menu Penghasilan seperti gambar dibawah ini


Menu Penghasilan
Sekarang Menu Penghasilan sudah muncul pada blog Anda, selamat langkah awal kamu mendapatkan penghasilan dimulai

Terimakasih
Read More

Sunday, 9 June 2013

Cara Menghilangkan Widget Shopping Cart Pada Johny Template

13 comments:
Asalamualaikum...
 Kali ini kita akan share tentang bagaimana Cara Menghilangkan Shopping Cart Pada Johny Template, karena saya merasa Widget Shopping Cart tidak saya butuhkan maka saya berkeinginan untuk menghilangkanya, tapi saya bingung mana codenya???? hehehe setelah dicoba" ternyata ketemu juga,,, gini ne langkah"nya,,,,,,

 1. Saya harap sudah masuk pada blog kalian, karena inig mengedit template seperti biasa pertama masuk menu template-->edit HTML
2. Setelah masuk menu edit html jangan lupa centang expand widget template, sekarang cari code berikut (agar lebih mudah ctrl+f lalu masukan kodenya)

#shoppingCart{background:
 kalau udah ketemu blok kebawah sampai dengan code :

simpleCart_empty:hover,a.simpleCart_checkout:hover{background:#d9d9d9;color:#000}

dan hapus semua code yang diblok tersebut.

3. Selanjutnya kita cari lagi code berikut:

<div id='shoppingCart'>

seperti tadi blok kebawah sampai pada code

<div class='clear'/>

kalo sudah tinggal dihapus
 
 4. Masih dimenu edit html sekarang kita hapus "add to cart" hapus code berikut ini

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<input class='item_add' type='button' value='Add to Cart'/>
</b:if>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
      </div>
    </b:if>
5. Kalau sudah semua sekarang kirta lihat dulu menggunakan pratinjau untuk memastikan template kita sudah benar, langkah terahir ada simpan ^_^

Sekian postingan kali ini meskipun sedikit semoga bermanfaat amieennnnnnn

wasalamualiakum wr.wb
Read More

Friday, 2 November 2012

Cara Memasang Background Matrix

No comments:

Kali ini kita akan share tentang Cara Memasang Background Matrix

Langsng aja ke TKP:
 
Login ke blog sobat.
Klik "Design" kemudian klik "Edit HTML".

Cari kode </Head> kemudian copy-paste kode CSS di bawah ini diatas </Head>.
<style type="text/css">
body{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD0vDMwnvMA1KCRaK3MAXrlm4vHXxyVvOljKB42E8R94eFEhMVh3ZPRU0BsIbyYuQ6foX20CIy7OiS4Zgah3BaC3X1CvMpQL2gZXVK-GYrmsopIXyNs8ctdYKTJUbFwBYnXiCd9bxgtjA7/s800/monozcore_blogspot_com_redmatrix.gif) repeat center center fixed black;
}
</style>
Ganti kode yang berwarna kuning pada baris kode di atas dengan URL gambar animasi matrix yang anda inginkan.

Klik "Save" dan lihat hasilnya... Semoga anda Puas.


0-1-1 Matrix
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtie71z7OjlznMsDu63LUBs6ATYPSp3UsneVBkS7_LhfoSj0BgThfU1cNG5sVMLLby2j_ehxH1Cvk4iS0JpTUv6WhIAXpS0V6lRIkBmOXlVWNn5Eml5WS7-1HdXol_U6zl_v9PswFxzLQ/s1600/0_1_1.gif

Black Red Matrix
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZo9CTXqw_6Rp7QxYw5bASjqp5TtqxlAnrJE_h09faLd28C0cE0Pui5ZQVIYqC1va66tETCkVjkpD6SYEGvv_Sx3IUkbj7nl9mjGVLuzluZYc6au_FFrl2D4t_LGplsVTbcItCAPLvYL93/s800/black_red_matrix.gif

Blue Matrix 1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm5us4OOTLopCKrSQauP9JWENLJvVUcv54H3F0wHhwHDKKegjFP8NyP5jypKH_g0v3Db6gvhyphenhyphenevB4AzBCPsp4X1Y07tfMByiei9H7hpYHWQuAeAeBB3uxZhoIRkMRISUuWJ4Jq4w7UVYLh/s800/bluematrix.gif

Blue Matrix 2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxRAwjSiHZSPL5LFaG2nFO1l5yPoByzO-LGAVk70Rsys8OwTTct-1KZgwJm1kO7Q5lxeLSnfLQjyrYHIxg4mWITTDfXbzAcyTUnHblfV2g21-LbgjK6hkknV8GMbz_LfL8wrRMqn9AwqI4/s800/bluematrix2.gif

Green Matrix

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmRPKkYydet-CJT655A1tXaedPYEYxuXzafwgEQ4et3wJZlxkDI5gnBN6TpoQIpaHSBAJrVytQDI4hrqYofIn0vt-x3qB8w6l2TPb24xotVa3IubZD47V48rcU08UD96rlJWSDrQv1ZJg7/s800/matrix.gif

Port Listener

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpPtpdyxxesCLPs4Vhd74Q0bp3t2bLM1iCl-MEtRCbnNg3KiYf9V690Q0cPmgnAXORSzpRlipUc0SmPZKncR_jr55YAABKlXEnIYy3EHHV-_x-cy4TLaPM69ARxttI-mdjO5vWTiwsb6pD/s800/port_listener.gif

Red Matrix

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD0vDMwnvMA1KCRaK3MAXrlm4vHXxyVvOljKB42E8R94eFEhMVh3ZPRU0BsIbyYuQ6foX20CIy7OiS4Zgah3BaC3X1CvMpQL2gZXVK-GYrmsopIXyNs8ctdYKTJUbFwBYnXiCd9bxgtjA7/s800/monozcore_blogspot_com_redmatrix.gif

Blue Matrix

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFMB-fBzyd_mH0Dtz7pwIVUbWTA3yMrcyAwJszxwnSDjOqggP81zJQi1mnerXzGDk-oFutLXyNTjHYzWqZxNalGh_ImGEu_6mFKUhIByP2vUoV9XVHWBUfqt3qftDSJv86EF-iyI3V0T0/s800/matrix.gif

Selamat mencoba...

Read More

Monday, 18 June 2012

Mengganti Older Post Dengan Angka

No comments:
cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini


   1. Login ke Blog anda
   2. Buka halaman design > Edit HTML > centang Expand template widget
   3. Cari kode  ]]></b:skin> gunakan CTRL + F untuk mempermudah pencarian
   4. Paste kode berikut sebelum kode ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

5. Kemudian cari kode ini </body> lalu taruh script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->


Lihat hasilnya,,,,,,
Read More

Thursday, 14 June 2012

Cara Pasang Flash Banner

No comments:


Untuk memasang flash ke dalam blog cukuplah mudah. Yang kamu perlukan yaitu file flash yang biasanya ber-extensi .swf lalu upload file tersebut ke hosting. misal di truefreehost.com ato 000webhost ato tempat hosting lainnya.
 File animasi flash tersebut bisa dijadikan hiasan pada blog ato bisa juga dijadikan hiasan di header sehingga membuat blog menjadi lebih animatif dan atraktif. Cara Memasangnya adalah :
  1. Login ke blogger kemudian pilih menu “Layout”.
  2. Kemudian klik link “Add a gadget” dimana akan ditempatkan animasi flash.
  3. Pilih “HTML/Javascript” kemudian taruh script berikut :
[code]<embed src="http://proghita.com/hello.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>[/code]
  • Ganti “http://proghita.com/hello.swf” dengan alamat file flash sobat yang telah ditaruh di hosting.
  • Ganti width=”500” height=”100 dengan ukuran dari file flash sobat
Mudah kan????????
Read More

Sunday, 10 June 2012

Memasang Widget Retweet Di Blog

No comments:
   1.  Login ke Blog anda
   2. Buka halaman design > Edit HTML > centang Expand template widget
   3. Cari kode <div class=’post-header-line-1′/> gunakan CTRL + F untuk mempermudah pencarian

dan copykan kode berikut ini dibawah kode tersebut,lalu ada kliksimpan dan lihat hasilnya.

<div style=’float:right; margin-left:10px;’> <script type=’text/javascript’> tweetmeme_url = &#39;<data:post.url/>&#39; </script> <script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’> </script> </div>

atau shobat mau pasang button Retweet seperti ini:
bisa saja, caranya hampir sama dengan cara diatas.setelah anda masuk
halaman edit HTML, dan centang kotak expand template widget.
lalu anda cari kode berikut ini:

<div class=’post-header-line-1′/>

dan copy kode berikut dibawah kode tadi.

<script type=”text/javascript”> url = ‘<data:post.url>’; </script> <script type=”text/javascript” src=”http://www.retweet.com/static/retweets.js”></script>

Atau mau ukuran yang lebih kecil lagi:

<script type=”text/javascript”> url = ‘<data:post.url>’; size = ‘small’; </script> <script type=”text/javascript” src=”http://www.retweet.com/static/retweets.js”></script>

NB: 1. Button tweetmeme dan retweet mempunyai nilai counter tersendiri.jadi sudah berapa banyak link kita yang dibagikan pada pengunjung kita,utuk melihatnya bisa langsung klik pada buttonya.nah mudahkan selamat mencoba dan semoga bermanfaat.
Read More

MEMBUAT KURSOR BERTABUR BINTANG

No comments:









Langsung aja Ini caranya.
  1. Sign ke Blogger.
  2. Pilih Rancangan bagian Elemen Halaman.
  3. Pilih HTML JavaScript.
  4. Copy salah satu kode dibawah ini kemudian paste kedalam kotak HTML JavaScript.
  5. Klik tombol Simpan.


KODE WARNA BINTANG

  • Bintang warna putih :

    <script src="http://sites.google.com/site/epgstudiosite/javascript/bintangputih.js" type="text/javascript"></script>


  • Bintang Warna Biru

    <script src="http://sites.google.com/site/epgstudiosite/javascript/bintangbiru.js" type="text/javascript"></script>
  • Bintang Warna Merah

    <script src="http://sites.google.com/site/epgstudiosite/javascript/bintangmerah.js" type="text/javascript"></script>

  • Bintang Warna Ungu

    <script src="http://sites.google.com/site/epgstudiosite/javascript/bintangungu.js" type="text/javascript"></script>
  • Bintang Warna Hijau


    <script src="http://sites.google.com/site/epgstudiosite/javascript/bintang.hijau.js" type="text/javascript"></script>
Silahkan anda coba...!!


Read more: http://epg-studio.blogspot.com/2009/05/membuat-cursor-bertabur-bintang.html#ixzz1vSAznQNk
Read More

Tuesday, 15 May 2012

Membuat Link Berjalan

No comments:
Langsung aja sob,,,,,,,,

1.login blog kamu


2.Klik menu template.

3. Klik Elemen tata letak.

4. Klik Tambah Gedget.


5. Pilih HTML/JavaScript.


6. Masukkan kode berikut ke dalam content HTML.
<marquee onmouseover="this.stopundefined)" onmouseout="this.startundefined)" direction="up" scrollamount="2" align="center" height="200" width="100%">
<ol><li><a href="http://otaxatix.blogspot.com/2012/05/cara-memasang-menu-scroll-di-blog.html" target="_blank">Cara Memasang Alt Tag Pada Gambar</a></li><li><a href="http://otaxatix.blogspot.com/2012/04/cara-membuat-read-more-otomatis-di.html" target="_blank">Cara Mengganti Logo Blog</a></li><li><a href="http://otaxatix.blogspot.com/2012/04/menghilangkan-icon-obeng-dan-tang-pada.html" target="_blank">Cara Mengganti Template Blog</a></li><li><a href="http://otaxatix.blogspot.com/2012/04/menghilangkan-navbar.html" target="_blank">Cara Memasang Live Traffic Feed</a></li></ol></marquee>
7. Kode yang berwana biru anda bisa ganti dengan link Anda dan yang berwarna merah bisa Anda ganti dengan nama dari link Anda. Terus kode yang berwarna hijau bisa Anda ganti dengan down jika Anda ingin link berjalannya kebawah dan kode yang berwarna merupakan tinggi dari kotak link Anda agar sesuai dengan keinginan Anda.


8. Anda juga bisa pasangkan ke dalam postingan arikel Anda.


9. Lihat hasilnya.
Read More

Friday, 4 May 2012

Cara Memasang Menu Scroll di Blog

1 comment:



Langsung aja Mari kita perhatikan bersama contoh kode HTML untuk membuat menu scroll :


<div style="overflow:auto; width:400px ; height:100px ;border:1px solid #eee;padding:8px;margin:10px 0 0">

<ul><li><a href="http://otaxatix.blogspot.com/2012/05/cara-memasang-menu-scroll-di-blog.html>
cara memasang menu scroll di blog </a></li></ul>

<ul><li><a href="http://otaxatix.blogspot.com/2012/04/cara-membuat-read-more-otomatis-di.html>
cara membuat read more otomatis </a></li></ul>

<ul><li><a href="http://otaxatix.blogspot.com/2012/04/menghilangkan-icon-obeng-dan-tang-pada.html>
menghilangkan icon obeng dan tang pada blog</a></li></ul>

</div>
</div></div>

Nantinya akan memiliki tampilan seperti dibawah ini :


Sekarang cara masang widgets menu scrool di blog :

  1. Langsung aja Login
  2. Klik Tata Letak / Layout
  3. Dalam menu Elemen Laman klik Tambah Gadget / Add Widget
  4. Pilih HTML
  5. Copy Paste kode diatas kedalam Gadget HTML tersebut
  6. Ubah tulisan berwarna biru dan sesuaikan dengan ukuran dan alamat url postingan blog kalian yach...
  7. Klik Save
Selesai....

 * Untuk melihat url postingan, klik salah satu artikel lalu lihat di kotak pengisian alamat contohnya seperti ini :



Selamat mencoba,,,,,,,
Read More

Monday, 30 April 2012

Membuat Efek Image Tweak di Blog

No comments:




Kali ini kita akan membuat efek Image Tweak, dimana image/gambar akan bergerak saat di sorot atau terkena kursor.Ayo langsung ke TKP
1. Langsung aja masuk Account Blogger 
2. Klik Template >> Edit HTML. Jangan lupa centang kotak expand widget template.
3. Setelah itu cari kode berikut:.
        post img {
        padding: 4px;
        border: 0px solid $borderColor;
        }
 
  4.Agar lebih cepat tekan tombol cntl + F kemudian copy paste kode tadi    kedalam kotak pencarian.
 5. Kalau sudah ketemu kode di atas, sekarang ganti kode tersebut dengan kode di bawah ini :

post img:hover {
position: relative;
top: 1px;
left: 1px;
}

Catatan : angka 1 pada kode di atas ( top dan left) dapat anda ganti nilainya sesuai keinginan anda. Semakin besar nilainya semakin jauh pula image tersebut nanti akan bergeser.
Read More

Saturday, 28 April 2012

Cara Memasang Live Traffic Feed

No comments:
Kaya biasa gag usah banyak omong oke,,,,,
  • Langsung Kunjungi link : http://feedjit.com
  • Klik widgets setelah anda berada di situs tersebut.
  • Klik salah satu pilihan Javascript widget yang anda perlukan.
  • Setelah memilih salah satu dari 4 pilihan disana lalu anda klick "Click here to Customize It!" itu berguna untuk menentukan warna agar sesuai pada blog kita.
  • Selesai mengotak-atik warna, Copy dan Paste ke blog anda dengan cara berikut dibawah ini.
  • ~> Login ke Blogger lalu ke Elemen Halaman dan Tambah gadget di sisi sidebar atau di footer terserah pemilik blog setelah itu pilih HTML/JavaScriptHTML/JavaScript setelah itu paste di dalamnya kode yang telah di copy di atas.
  • Klik simpan dan selesai.

Semoga Berhasil...!!

Read More

Wednesday, 25 April 2012

Cara membuat Kotak Komentar Facebook Pada Blog

No comments:

1. Langsung aja masuk Account Blogger
2. klik Template >> Edit HTML. Jangan lupa centang kotak expand widget template.
3. Setelah itu cari kode berikut: </b:includable> 
4.Agar lebih cepat tekan tombol cntl + F kemudian copy paste kode in </b:includable> 
 
kedalam kotak pencarian

5.Selanjutnya Copy paste Kode dibawah ini dan letakan diatas kode  </b:includable>



<b:if cond="data:blog.pageType == &quot;item&quot;"> <div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>



Langkah Terakhir Save Template dan lihat hasilnya
Read More

Saturday, 21 April 2012

Menghilangkan icon obeng dan tang pada blog

No comments:
Gini Caranya :

  1. Login ke blogger dengan ID anda tentunya.
  2. Klik  Tata Letak.
  3. Klik tab Edit HTML.
  4. Cari kode seperti ini :
    ]]></b:skin>

  5. Copy paste kode berikut persis di atas kode yang tadi :

    .quickedit{
    display:none;
    }

  6. Klik tombol Simpan template.
  7. Selesai.
Read More