Membuat Efek Teks Berjalan Marquee

Membuat Efek Teks Berjalan Marquee

Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan.
Marquee Teks Berjalan ini bisa di buat dengan menggunakan tag

<marquee>BELAJAR SEO SEARCH ENGINE OPTIMIZATION DI BLOGSPOT</marquee>.
Atribut yang sering di gunakan adalah :

BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks
DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks
BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan

Scroll --> teks bergerak berputar
Slide--> teks bergerak sekali lalu berhenti
Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)
TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks
SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.
SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik
LOOP="angka|-1|infinite" --> Mengatur jumlah loop
WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Contoh marquee Teks Berjalan dari gerakan :

<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%"> marquee 

BELAJAR SEO SEARCH ENGINE OPTIMIZATION DI BLOGSPOT

dari kanan ke kiri 

</MARQUEE> 


ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .

Contoh marquee Teks Berjalan dari perilaku gerakan :

<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate"> 

BELAJAR SEO SEARCH ENGINE OPTIMIZATION DI BLOGSPOT

marquee menurut perilaku 

</MARQUEE> 

Contoh marquee Teks Berjalan dengan variasi hurup dan warna latar belakang :

<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

</MARQUEE></b></FONT></div> 
Ada variasi lain dari marquee Teks Berjalan ini, yakni ketika mouse sedang berada di area marquee Teks Berjalan akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

tunjuk disini

BELAJAR SEO SEARCH ENGINE OPTIMIZATION DI BLOGSPOT

</marquee>


Contoh marquee yang di dalam nya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="100" align="center">
<a href="http://belajarseo-search-engine-optimization.blogspot.com/" target="new"> Belajar SEO</a><br/>
<a href="http://belajarseo-search-engine-optimization.blogspot.com/" target="new"> Search Engine Optimization</a><br/>
<a href=" http://belajarseo-search-engine-optimization.blogspot.com/" target="new">Blogspot </a><br/>
</marquee> 

Read More

Membuat Daftar Isi Blog

Belajar SEO Membuat Daftar Isi Blogspot


Langkah #1

1. Sign in di blogger dengan ID anda

2. Bila sudah berada di halaman dashboard, klik Layout.

3. Klik tab Edit HTML

4. Klik link bertuliskan Download Template Lengkap. Silahkan di save dulu untuk backup (penting).

5. Beri tanda tik/cek pada kotak kecil di samping tulisan Expand Widget Template. Tunggu beberapa saat.

6. Lihat ke bagian body template, lalu cari kode seperti ini :

<b:include data='post' name='post'/>

7. Delete / hapus kode tersebut, lalu ganti dengan kode berikut ini :


<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

8. Klik tombol Simpan Template.

9. Selesai. Langkah pertama sudah selesai.


Langkah #2

1. Klik tab Elemen Halaman.

2. Klik tulisan Tambahkan sebuah Elemen Halaman.

3. Setelah muncul window baru, klik tombol TAMBAHKAN KE BLOG untuk yang HTML/JavaScript.

4. Copy lalu paste kode berikut :

<a href="http://belajarseo-search-engine-optimization.blogspot.com/search?max-results=200">Daftar isi&raquo;</a>

5. Ganti NamaBlogAnda nama blog anda sendiri. Contoh : nama blog saya adalah kolom-tutorial. ganti angka200 dengan nomor yang lainnya (kalau mau). Nomor ini adalah jumlah posting yang ingin di munculkan ketika link daftar isi di klik.

6. Klik tombol Simpan Perubahan.


7. Selesai.

Read More

Membuat Mini Post Artikel di Blogspot

Belajar Membuat Mini Post atau Mini Artikel di Blogspot

Mini Post atau Mini Artikel adalah cara lain menampilkan berita singkat dimana style post yang ditampilkan akan berbeda dengan posting sebenarnya. Minipost ini akan ditampilkan sesuai dengan label atau kategori khusus. Untuk menampilkan setiap Mini post  cukup dengan menentukan labelnya saja

1. Masukan kode dibawah ini dalam deretan kode CSS

.minipost.home {background: #fff; font: normal 12px 'Arial', sans-serif; padding: 5px;border:1px solid #c0c0c0}
.minipost.home .date {color: #000; font-size: 10px; font-weight: bold; text-transform: uppercase;}
.minipost.home .body {padding: 5px 0;}
.minipost.home .meta a {color: #990000; font-size: 10px; font-weight: bold; text-transform: uppercase;}
.minipost.item {background: transparent;}
.minipost.item .date {margin:1.5em 0 .75em; font:normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:#999999;}
.minipost.item .title {margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:#cc6600;} 

2. Kemudian cari kode <b:loop values='data:posts' var='post'> lanjutkan lagi dengan memasukan kode warna merah yang pertama. Kalo sudah masukan lagi kode warna merah yang kedua dibawah kode <b:include data='post' name='post'/> 

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<b:if cond='data:label.name != &quot;minipost&quot;'>

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>

<b:else/>
<b:include data='post' name='minipost'/>
</b:if>
</b:if>
</b:loop>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop> 

3. Langkah ke tiga cari kode berikut <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> Kemudian sisipkan semua kode dibawah ini dibawah kode diatas

<b:includable id='minipost' var='top'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='minipost home'>
<div class='date'><data:post.dateHeader/></div>
<div class='body'>
<data:post.body/>
<div class='clear'/>
</div>
<div class='meta'>
<a expr:href='data:post.url'>Read More</a> |
<a expr:href='data:post.url + &quot;#comments&quot;'><data:post.numComments/> comments</a>
<b:include data='post' name='postQuickEdit'/>
</div>
</div>

<b:else/>

<div class='minipost item'>
<div class='date'><data:post.dateHeader/></div>
<div class='title'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
</div>
<div class='body'>
<data:post.body/>
<div class='clear'/>
</div>
<b:include data='post' name='postQuickEdit'/>
</div>
</b:if>

</b:includable>
4. Buat satu postingan dengan label "BELAJAR SEO"

Read More

Membuat Slide Headline

Belajar Membuat Slide Headline

1. Login terlebih dahulu ke Blogspot

2. Masuk ke bagian Tata Letak/Layout

3. Pilih Tab menu Edit HTML

4. Centang tulisan Expand Widget Template

5. Cari code ini ]]></b:skin> (untuk memudahkan pencarian tekan Ctrl+F)

6. Copy Paste code CSS dibawah ini sebelum code diatas :


#slider {
background:#101010;
height: 153px;
text-align:center;
overflow: hidden;
position: relative;
margin: -5px 0px;
}

#mover {
width: 600;
position:absolute;
overflow:hidden;
}

.slide {
padding: 15px 0px;
width: 1000px;
float: left;
position: relative;
height:130px;
}

.slide h2 {
font-family:Georgia, Helvetica, Sans-Serif;
font-size: 18px;
font-weight:bold;
text-align:left;
color: #FFFF00;
padding:0px 0px 0px 0px;
margin:0px 0px;
width:440px;
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#E1771E;
background-color: transparent;
}

.slide h2 a:hover {
color: #ff0000;
background-color: transparent;
}

span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 200px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #FFFFFF;
font-size: 12px;
text-align:left;
font-family: Georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 440px;
padding:0px 0px 0px 0px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 225px;
background:;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 1000px;
right: -125px;
color: #FF0000;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

7. Langkah selanjutnya cari code ini </head>

8. Copy Paste code berikut sebelum code </head>

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

9. Simpan hasil kerja anda

10. Langkah selanjutnya klik tab menu Elemen Laman

11. Buat klik Add a Gadget, pilih HTML/Javascript

12. Paste code dibawah ini didalamnya

<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://belajarseo-search-engine-optimization.blogspot.com/">BELAJAR SEO</a></h2>
<p>isi artikel slide 1</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://belajarseo-search-engine-optimization.blogspot.com/">SEARCH ENGINE OPTIMIZATION</a></h2>
<p>isi artikel slide 2</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://belajarseo-search-engine-optimization.blogspot.com/">DI BLOGSPOT</a></h2>
<p>isi artikel slide 3</p>
<img src=""/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>

13. Ganti tulisan http://belajarseo-search-engine-optimization.blogspot.com dengan link posting blog anda.

14. Ganti tulisan berwarna bitu dengan Judul Slide anda

15. Ganti tulisan berwarna merah dengan isi artikel slide anda

Read More

Memasang Breadcrumb di Blogspot

Belajar SEO dengan Cara Memasang Breadcrumb di Blogspot

Breadcrumb adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat. Banyak breadcrumbs memiliki laman yang paling umum (biasanya laman dasar) sebagai tautan pertama dan paling kanan dan memuat bagian yang lebih spesifik keluar ke sisi kanan.

Cara Memasang Breadcrumb di Blogger / Blogspot, cara ini saya temukan di situs Blogger Pluggins.

Untuk langkah-langkahnya, silakan ikuti petunjuk di bawah ini :

Sign in ke http://blogger.com dengan akun Anda

Pilih layout -> edit html

Beri tanda centang pada Expand the Widget Templates

Cari kode seperti ini :

<b:include data='top' name='status-message'/>

Gantikan dengan yang ini :

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

Lalu cari kode seperti ini :

<b:includable id='main' var='top'>


Gantikan dengan yang ini :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>


Yang terakhir, cari kode seperti ini :

]]></b:skin>


Lalu gantikan dengan yang ini :

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>

Save Template

Read More

Cara pasang kode text link ads di blogspot

Belajar SEO : Cara pasang kode text link ads di blogspot

Daftar blog sebagai pubsliher di website teks link ads(jual beli link) dan jika anada pertama kali mendapat order (pesanan) untuk memasang kode link yang telah ter-jual tersebut di blog anda.

Postingan ini saya buat mungkin ada diantara teman yang kesulitan pasang link text link ads di blogspot anda.

Cara memasang link sacara manual.

1. Pertama anda akan mendapat email yang berisi pemberitahuan bahwa ada link anda yang terjual , di dalam email tersebut ada link yang perlu anda klik yang ada di dalam email untuk login ke member area text link ads untuk mengambil kode yang akan dipasang di blog anda.

2. Setelah klik link di atas, maka akan membuka website text link ads, login dengan akun anda, akan muncul tampilan seperti di bawah ini

Kotak 1 : adalah link yang harus anda pasang di blog anda, (gunakan gadget html/javascript untuk memasukkan link text link ads ke blog anda)
Kotak 2 : pilihan konfirmasi (pilih Complete) langkah ini anda lakukan setelah link terpasang di blog di
Kotak 3 : untuk konfirmasi bahwa

Jika sukses maka di dasboard akan terlihat tampilan bahwa ads spot link telah terjual

Buat teman-teman yang punya blog gratisan di blogspot dengan PR minimal 3, silahkan didaftarkan di text link ads untuk jualan link mudah-mudahan bisa dapat orderan dan dapat duit (dollar) gratis dari text link ads. Selain jualan link blog gratisan blogspot anda di text link ads anda juga bisa jualan link di ask2link dan jual link di blogrollplease

Sebagai informasi buat teman-teman samapai saat ini text link ads bukan scam (menipu), karena saya sudah beberapa kali dibayar oleh textlink ads. Jika ingin mencari informasi lebih banyak tentang scam tidaknya text link ads, bisa dicari disini text link ads scam 

Ads click off rehab center: passages sues rivals over links in Google searches.(INTERNET): An article from: Los Angeles Business Journal

Read More

Cara menampilkan Related Posts

Belajar SEO di Blogspot dengan Cara menampilkan Related Posts

Related Posts atau biasa disebut "link yang bekaitan", "Related Post", "artikel yang bertautan", "postingan terkait" atau apa aja namany
a, merupakan bagian judul posting terkait dan biasanya ditampilkan berdasarkan penamaan label (kategori), Realated Post ini biasanya berupa link yang tampilkan dibawah postingan tunggal tepatnya di bawah kolom komentar. Keuntungan dengan pemasangan post yang berkaitan tentu saja akan mempermudah pengunjung blog kita untuk menemukan artikel terkait tanpa harus menuju dan membuka satu persatu halaman dalam link label.


Langkah I:

Masuk pada Template -> Edit HTML -> kemudian masukan kode javascript dibawah ini diantara kode <head>..</head> atau lebih mudahnya cari kode</head> saja, kemudian letakan kodenya diatas kode  </head> -> jangan lupa disimpan


<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
 for (var i = 0; i < json.feed.entry.length; i++) {
 var entry = json.feed.entry[i];
 relatedTitles[relatedTitlesNum] = entry.title.$t;
 for (var k = 0; k < entry.link.length; k++) {
  if (entry.link[k].rel == 'alternate') {
   relatedUrls[relatedTitlesNum] = entry.link[k].href;
   relatedTitlesNum++;
   break;
  }
 }
 }
}
function removeRelatedDuplicates() {
 var tmp = new Array(0);
 var tmp2 = new Array(0);
 for(var i = 0; i < relatedUrls.length; i++) {
  if(!contains(tmp, relatedUrls[i])) {
   tmp.length += 1;
   tmp[tmp.length - 1] = relatedUrls[i];
   tmp2.length += 1;
   tmp2[tmp2.length - 1] = relatedTitles[i];
  }
 }
 relatedTitles = tmp2;
 relatedUrls = tmp;
}
function contains(a, e) {
 for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
 return false;
}
function printRelatedLabels() {
 var r = Math.floor((relatedTitles.length - 1) * Math.random());
 var i = 0;
 document.write('<ul>');
 while (i < relatedTitles.length && i < 20) {
  document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
  if (r < relatedTitles.length - 1) {
   r++;
  } else {
   r = 0;
  }
  i++;
 }
 document.write('</ul>');
}
//]]>
</script>


Langkah II:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang padaExpand Widget Template -> cari kode dibawah ini.


     <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>


Jika sudah ketemu, masukan kode berwarna merah dibawah diantara kode diatas.


     <b:if cond='data:post.labels'>
     <data:postLabelsLabel/>
     <b:loop values='data:post.labels' var='label'>
     <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
          </b:loop>
        </b:if>


Pada proses ini pengeditan pada kode HTML sudah selesai, Jangan lupa disimpan


Langkah III:


Masuk pada Template -> Elemen halaman -> kemudian buat elemet baru atau klik "Tambahkan sebuah Elemen Halaman" -> copy-paste kode dibawah ini dan jangan lupa memberikan nama judul misal, "Related Post BELAJAR SEO" -> kemudian jangan lupa disimpan.


<script type="text/javascript">
 removeRelatedDuplicates();
 printRelatedLabels();
</script>


Langkah IV:

TAMBAHAN BELAJAR SEO

Agar related post ini tidak tampil pada halaman utama dan hanya tampil pada halaman posting tunggal maka kita perlu penambahan beberapa kode, caranya:
Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang padaExpand Widget Template -> cari kode dibawah ini, sebisanya cari sesuai dengan title yang kita masukan, sebagai contoh, tadi saya memberi mana dengan  Artikel pada kategori yang sama, jika sudah ditemukan masukan ke dua kode berwarna merah dibawah.

<b:widget id='HTML' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <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>

Read More

Cara membuat tombol Google Buzz di blog

Belajar SEO Google baru baru ini memperbarui sistem e-mailnya dengan menambahkan fitur Buzz pada G-mail,dengan fitur ini para pengguna gmail bisa saling berbagi dengan para pengguna G-mail lainnya,seperti bisa update status,sharing video,serta berbagi informasi juga link blog,alhasil Gmail Buzz sangat diuntungkan bagi pengguna Gmail Google.

Gmail Buzz merupakan saingan berat Yahoo Buzz yang kemarin baru diluncurkan oleh Yahoo Mail,namun pihak pembuatnya "Sergei Brein " tampak optimis jika Gmail Buzz akan meraih kesuksesan lebih besar.Dengan adanya fitur ini berbagi di blogger menjadi semakin mudah dengan menyelipkan ikon buzz dibawah atau di atas postingan.

Sekarang kita menuju ke cara memasukkan tombol buzz didalam blog :

• Masuk ke blogger 
• Edit tata letak.
• Pilih edit html/kemudian expand template widget
• Kemudian cari kode 
• Kopikan kode dibawah ini diatasnya : 

Kode diatas Untuk tombol besar  

Sedangkan kode diatas ini untuk tombol kecil  

Sedangkan untuk menaruh dibawah postingan caranya cari kode seperti ini :

Read More