Tuan Siput
Ada beberapa cara yang biasanya digunakan oleh para blogger untuk mensubmit suatu url.

Tujuan untuk mensubmit url adalah agar artikel tersebut cepat untuk terindex google.

Bagi anda yang sudah cukup lama dalam dunia blogging mungkin sudah seringkali melakukan submit dengan mengunjungi "https://www.google.com/webmasters/tools/submit-url".

Tapi yang sangat disayangkan cara di atas sudah tidak berlaku lagi.

Jadi bagaimana untuk mensubmit agar artikel terindex secara cepat di google?

Ada beberapa cara yang dapat anda pilih, yaitu dengan melakukan submit url lewat menu fetch as google.

Atau anda bisa menggunakan cara terbaru melalui versi terbaru Google Webmasters Tools.

Saya sangat rekomendasikan cara kedua karena lebih mudah dan simple serta anda dapat mengetahui dengan mudah apakah artikel tersebut sudah terindex atau belum.

Pertama masuk di Google Webmasters Tools kemudian klik pada "Gunakan Search Console baru" (Use new Search Console) yang ada pada bagian atas halaman.

Setelah itu masukkan url pada kolom pencarian dibagian atas dan tekan enter.


Akan muncul pemberitahuan seperti dibawah ini, kemudian klik "Minta Pengindeksan" (Request Indexing).


Tunggu sampai muncul pemberitahuan seperti dibawah ini. Klik "OKE" (Got it). Ini tandanya proses submit url telah berhasil. Tunggu beberapa saat sampai akhirnya url akan terindex di google.

 Silahkan lakukan cara tersebut untuk mengecek dan mensubmit url yang belum terindex di google. Untuk URL yang sudah terindex di google akan muncul pemberitahuan seperti berikut ini.


Jika anda masih kurang paham atau ada pertanyaan yang ingin ditanyakan, silahkan tanyakan melalui kolom komentar.

Cara Terbaru untuk Submit URL di Google Webmasters Tools

Banyak orang berpikir untuk membuat subdomain hanya tersedia untuk blog atau domain yang telah dihosting saja.

Sedangkan untuk blog dengan CMS seperti blogger yang di hosting secara gratis tidak tersedia. Namun bisa dilakukan ketika domain tersebut sudah dihosting.

Apakah anggapan tersebut benar?

Sayangnya anggapan tersebut tidaklah benar. Mengapa demikian?

Karena untuk membuat suatu subdomain khususnya di blogger anda tidak memerlukan hosting. Terus kenapa banyak penyedia jasa domain dan hosting yang mengatakan bahwa:

Untuk membuat subdomain di blogger anda harus membeli hosting!

Ya, saya akui ada begitu banyak penyedia jasa hosting dan domain yang mempunyai anggapan yang sama perihal cara memasang subdomain di blogger.

Meskipun hal itu tidak terjadi pada semua penyedia, namun ada banyak penyedia yang mempunyai anggapan seperti itu.

Lantas, apakah yang dikatakan oleh penyedia jasa domain dan hosting tersebut benar?

Soal benar tidaknya saya tidak berhak menilainya, karena mungkin saja hal tersebut memang sudah menjadi keputusan dari pihak penyedia.

Atau mungkin memang dari customer servicenya tidak mengetahui cara tersebut.

Tapi sepertinya para customer service pasti mengetahui berbagai informasi apalagi hanya untuk memasang subdomain.

Kok dari tadi malah cerita terus, kapan buatnya ???

Maaf karena saya ingin memberitahu kepada para sahabat blogger yang ada diluar sana agar mengetahui hal tersebut sehingga tidak perlu mengeluarkan uang hanya untuk membayar hosting yang akan digunakan hanya untuk subdomain saja.

Cara Membuat Subdomain di Blogger Tanpa Hosting


1. Pertama yang harus dilakukan, masuk ke dns manager pada layanan domain anda, kemudian tambahkan DNS record baru.


Pada bagian:
  • Host Name: Masukkan nama subdomain.
  • TTL: Tidak perlu diubah
  • Type: Ubah ke CNAME
  • Value: Masukkan ghs.google.com

2. Klik "Simpan".

3. Login ke "Blogger" > pilih menu "Setelan" > klik "Dasar" setelah itu klik pada "+ Siapkan URL pihak ketiga untuk blog anda".


4. Masukkan nama subdomain anda seperti contoh dibawah ini.

Note: Jangan dicentang!

5. Klik "simpan".

Sampai disitu maka subdomain yang anda buat telah selesai!

Jika tidak dapat menyimpan pengaturan pada langkah nomor 4 maka tunggu beberapa menit / jam kemudian ulangi lagi langkah tersebut.

Penting !


Jika memang sama sekali tidak dapat menyimpan setelah beberap saat anda mencobanya, maka tambahkan kode unik cname baru pada dns manager anda. Untuk melihat kode tersebut lihat pada langkah 4.

Contohnya akan seperti ini:

  • Host Name: bcvslpp4qfve
  • TTL: Tidak perlu diubah
  • Type: Ubah ke CNAME
  • Value: gv-ggmwq4astmrkcv.dv.googlehosted.com

Jika terdapat kendala silahkan tanyakan melalui kolom komentar.

Cara Membuat Subdomain di Blogger Tanpa Hosting

Setiap blogger pasti pernah menghapus suatu postingan dalam blog mereka. Entah satu kali atau banyak kali pastinya sudah pernah dilakukan oleh setiap blogger.

Menghapus artikel postingan biasanya disebabkan oleh beberapa hal seperti artikel sudah tidak layak lagi, menyalahi hak cipta sehingga harus dihapus, artikel sudah tidak sesuai dan masih banyak alasan lainnya kenapa artikel harus dihapus.

Untuk menghapus postingan sebenarnya hanya membutuhkan beberapa langkah saja yang dapat kita lakukan melalui menu postingan di blogger. Namun jika kita salah menghapus maka hanya akan menyebabkan terjadinya link error pada artikel tersebut dan akan membuat blog terlihat kurang baik bagi pengunjung.

Jika ingin menghapus artikel postingan blog tanpa meninggalkan url link error maka sebaiknya ikuti beberapa langkah berikut.

1. Masuk ke Google Webmaster Tools dan pilih blog yang artikelnya ingin anda hapus.

2. Kemudian pilih "Google Index" > klik "Remove URLs" > dan klik "Temporarily hide". Setelah itu akan muncul kolom, masukkan url blog anda dan pilih "Continue" kemudian klik "Submit" seperti gambar dibawah ini.

Langkah berikutnya yaitu menghapus artikel seperti biasanya di blogger.

1. Masuk ke "Blogger.com" > pilih "Postingan" > klik "Hapus" pada bagian bawah artikel. Untuk lebih jelasnya silahkan lihat pada gambar di bawah ini.


2. Setelah itu klik "OK" seperti gambar berikut.


Jika sudah melakukan langkah-langkah di atas maka artikel anda akan terhapus secara permanen dan tidak akan meninggalkan URL error yang dapat menyebabkan error 404 (page not found).

Menghapus artikel memang terlihat simple, namun jika salah menghapus maka akan membuat munculnya url error yang akan membuat blog atau website terlihat tidak baik bagi pengunjung.

Cara ini adalah cara yang sebaiknya selalu dilakukan ketika menghapus suatu artikel dalam blog.

Cara Menghapus Artikel Postingan Blog Permanen dan SEO

Profil Author atau profil penulis merupakan tempat dimana diletakkannya deskripsi singkat dari penulis artikel atau admin blog.

Ada penulis yang tertarik untuk menampilkan profil penulis dan ada juga penulis yang tidak tertarik. Penampilan profil penulis biasanya bertujuan agar pembaca langsung mengetahui siapa penulis atau yang mempublikasikan artikel tersebut.

Untuk template yang baru dipasang, profil penulis tidak akan otomatis tampil. Untuk itu anda harus mengaturnya agar tampil.

Ada beberapa langkah untuk menampilkannya yaitu:

1. Masuk ke "Blogger" > pilih menu "Tata Letak (Layout)" > klik "Edit" pada bagian kanan bawah "Postingan Blog" seperti gambar dibawah ini.


2. Setelah itu scroll kebawah dan centang pada kotak "Tampilkan Profil Penulis Di Bawah Postingan (Show Author Profile Below Post)", untuk lebih jelasnya bisa di lihat pada gambar berikut.


3. Klik "Simpan"

Deskripsi yang akan muncul pada profil penulis merupakan deskripsi yang harus diatur terlebih dahulu. Jika belum mengatur settingan tersebut, maka ikuti langkah berikut ini.

4. Masuk ke halaman "About Me Google+" di sini: https://aboutme.google.com/?referer=gplus

5. Klik icon "+" (Tambah) pada bagian kanan bawah.


6. Pilih "Cerita"


7. Isi bagian "Semboyan (Tagline)" dan "Perkenalan (Introduction)" dengan kata-katamu.


8. Klik "OKE (OK)"

9. Deskripsi yang baru anda buat bersifat private jadi tidak bisa dilihat oleh orang lain, anda harus mengubahnya dari private menjadi public.

Untuk mengaturnya, klik icon "Gembok" setelah itu pilih "Public" seperti gambar dibawah ini.



Semoga informasi diatas dapat membantu dan dapat diterapkan di blog anda.

Jangan lupa kunjungi kembali tuansiput.com di kemudian hari.

Menampilkan Profil Author di Bawah Postingan Blogger

Kotak script biasanya digunakan untuk meletakkan kote HTML maupun kode tertentu, serta dibuat untuk diletakkan text seperti informasi, note dan berbagai hal lainnya.

Kotak script sangat mudah untuk dipasang, memiliki banyak pilihan jenis dan tentu saja bebas untuk edit ukuran maupun warna.

Penggunaan kotak script tentu saja sangat membantu.

Dengan bentuk yang kotak akan membuat pengunjung memperhatikan isi yang ada dalam kotak tersebut sehingga akan mempermudah pengunjung dalam memahami maksud dari penulis.

Cara Pemasangan Kode Script di Postingan

1. Masuk ke "Blogger.com" > pilih "Postingan" > klik "Entri baru".

2. Setalah berada di menu "Compose", klik "HTML"

3. Masukan kode dibawah ini tepat didalam kotak postingan "HTML".

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.gomagz (ganti tulisan ini).</div>

4. Kemudian klik "Publikasikan"

5. Selesai...

Cara Pemasangan Kode Script di Widget

1. Masuk ke "Blogger.com" > pilih "Tata Letak" > klik "Tambahkan Gadget" > klik "HTML/JavaScript".

2. Copy kode dibawah ini kedalam kotak "HTML/JavaScript".

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.gomagz (ganti tulisan ini).</div>

3. Setelah itu klik "Simpan"

4. Selesai...

Itu dia cara untuk memasang kotak script kedalam postingan dan widget blog. Selain kode diatas ada 24 pilihan kode script  yang dapat kamu pilih dibawah ini:

Tuan Siput script
<div style="background: linear-gradient(135deg, #00BFFF 52%,#ff0036 100%); border: 3px #f6fdf6 double; padding: 20px; text-align: left;">
<span style="color: #ffffff;">Diupdate pada 31 Mei 2016</span></div>

(Dashed)
<div style="border: 3px #1780dd Dashed; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Dotted)
<div style="border: 3px #1780dd Dotted; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Groove)
<div style="border: 3px #1780dd Groove; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Inset)
<div style="border: 3px #1780dd Inset; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Outset)
<div style="border: 3px #1780dd Outset; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Ridge)
<div style="border: 3px #1780dd Ridge; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

(Solid)
<div style="border: 3px #1780dd Solid; padding: 10px;background-color:#ffffff;
text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Blue and black
<div style="border-left: 4px #1499d2 groove; padding: 10px;background-color:#19abea;text-align: left;font-color:#fff;">Isi dengan tulisan Kamu di Sini.</div>

Blue and white
<div style="background-color: #19abea; border-left: 4px #1499d2 groove; padding: 10px; text-align: left;">
<span style="color: white;">Isi dengan tulisan Kamu di Sini.</span></div>

Standar
<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
Isi dengan tulisan Kamu di Sini.
</div>

Cocok untuk informasi Update
<div style="background-color: #d3f5d3; border: 3px #f6fdf6 double; padding: 20px; text-align: left;">
<span style="color: #159415;">Isi dengan tulisan Kamu di Sini.</span></div>

Warna 1
<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #dddddd; border-top: 20px solid #f4034c; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Isi dengan tulisan Kamu di Sini.
</div>

Warna 2
<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #ffffcc; border-top: 20px solid #ffff00; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Isi dengan tulisan Kamu di Sini.
</div>

Warna 3
<div style="background-color: #ccffff; border: 3px #ccff00 double; padding: 10px; text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 4
<div style="background-color: #ff99ff; border: 3px #ff33cc double; padding: 10px; text-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 5
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 6
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Isi dengan tulisan Kamu di Sini.</div>

Warna 7
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #33ff99; border-radius: 10px; border: 2px dashed #ffff99; padding: 10px; t-align: left;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 8
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white; border-radius: 10px; border: 4px double #ccff00; padding: 10px;">
Isi dengan tulisan Kamu di Sini.</div>

Warna 9
<div style="border: 2px #ff0066 dashed; padding: 10px; background-color:#ffccff; tex>t-align: left;">Isi dengan tulisan Kamu di Sini.</div>

Warna 10
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #fffc9e; border-radius: 10px; border: 8px outset #D4771A; padding: 10px; t-align: left;">Isi dengan tulisan Kamu di Sini.</div>

Warna 11
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffccc9; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;"> Isi dengan tulisan Kamu di Sini.</div>

Warna12
<div 0.12="" 0.16="" 0="" 10px="" 2px="" 5px="" border-radius:="" box-shadow:="#" rgba="" style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #67fd9a; border-left: 5px solid #0000cc; border-radius: 10px; border-right: 5px solid #0000cc; padding: 10px;">Isi dengan tulisan Kamu di Sini.</div>

Sangat cocok untuk berbagai text
<div style="background-color: #148f77; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12); color: white; font-size: 14px; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; transition: 0.25s;"> Isi dengan tulisan Kamu di Sini.</div>

Itu dia 24 piliha kode script yang dapat kamu gunakan, untuk mempercantik blogmu.

Sebagian Referensi: www.blogooblok.com

24+ Pilihan Kotak Script dan Cara Memasangnya di Blog

Syntaxt Highlighter merupakan fitur yang biasanya digunakan untuk meletakkan kode seperti HTML, CSS, Java Script dan lain-lain.

Desain syntax highlighter yang menarik akan membuat pengunjung dengan mudah mengetahui dan melihat kode yang diletakkan.

Ada berbagai jenis syntax highlighter yang ada saat ini, begitu juga dengan tampilannya.

Namun kali ini saya akan membagikan syntaxt highlighter seperti yang saya gunakan dalam blog tuansiput.com saat ini.

Membuat Syntax Highlighter Seperti Blog Tuan Siput


Cara Memasang

1. Masuk ke "Blogger.com" > pilih menu "Tema" > klik "Edit HTML".

2. Kemudian copy kode di bawah ini dan letakkan di atas atau sebelum kode ]]></b:skin> atau </style>

/* Syntax */
pre {overflow: auto;max-height: 450px;margin: 10px 0 !important;padding: 20px;}code[class*=language-],pre[class*=language-]{color:#f8f8f2;text-shadow:0 1px rgba(0,0,0,.3);font-family:Roboto,sans-serif!important;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)&gt;code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)&gt;code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

3. Setelah itu copy kode di bawah ini dan letakkan di atas atau sebelum kode </body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>

4. Klik "Simpan"

Cara Menggunakan

5. Masuk ke menu "Postingan" > klik "Entri baru" > Letakkan kode di bawah ini pada tab HTML (bukan compose).

<pre><code class="language-css"> isi kode disini </code></pre>

Untuk hasilnya seperti syntax highlighter yang digunakan dalam postingan ini.

Keren kan kodenya! Silahkan diterapkan ke blog kamu ya.

Kunjungi kembali tuansiput.com untuk informasi menarik tentang blog.

Sumber: taniarascia.com/adding-syntax-highlighting-to-code-snippets/

Cara Membuat Syntax Highlighter Keren

Gradasi warna pada menu blog membuat tampilan blog menjadi lebih berwarna begitu juga dengan pengunjung akan semakin betah berlama-lama dengan tampilan tersebut.

Meskipun tampilan tersebut mempercantik blog tapi dengan gradasi warna pada template blog akan membuat loading blog semakin lambat.

Bukan berarti sangat lambat, tapi dibandingkan tidak menggunakan gradasi warna maka template akan sedikit lebih cepat.

Dengan penggunaan warna yang tepat akan mempercantik blogmu, sebaliknya jika warna yang digunakan tidak tepat maka hasilnya akan membuat pengunjung maupun orang yang melihat tidak betah karena terganggu pada tampilan menu yang kurang baik tersebut.

Gradasi warna yang ada dalam artikel ini yaitu sama dengan blog ini jadi silahkan untuk di terapkan jika anda tertarik dengan tampilan gradasi warna pada menu blog ini.


Cara Membuat Gradasi Warna Pada Menu Blog

Pertama yang harus dilakukan yaitu, masuk ke Blogger > pilih menu Tema > klik Edit HTML dan tambahkan kode dibawah ini sebelum atau di atas kode ]]></b:skin>

/* Gradasi Warna */
#header-container{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Kemudian simpan template anda dan lihat hasilnya.

Untuk kode pemanggil (#header-container) silahkan disesuaikan dengan kode pemanggil pada template anda.

Jika ada pertanyaan silahkan langsung tanyakan melalui kolom komentar dibawah ini.

Cara Membuat Gradasi Warna di Menu Blog

Tuan Siput - Tombol demo dan download sangatlah penting khususnya bagi blog dengan konten download.

Dengan adanya tombol demo dan download akan membuat pengunjung lebih mudah dalam memahami dimana posisi link ditempatkan.

Saat ini yang akan dibagikan merupakan tombol demo yang didapatkan dari contohblog.com, sebenarnya tombol yang dibagikan ini memanglah hasil asli yang diambil dari blog contohblog.com yang kemudian hanya diubah pada bagian warnanya saja.

Yang membuat tombol demo ini menarik adalah pada tampilannya yang simple serta tidak menggunakan berbagai macam kode, jadi ketika menggunakan tombol ini akan sangat mudah ketika melakukan perubahan template. Tinggal memindahkan kode CSSnya saja ke dalam template blog yang baru.

Selain itu kamu bisa mengubah warna yang digunakan dengan warna yang kamu inginkan.

Membuat Tombol Demo Dan Download Dengan Tampilan Simple Di Blog


Untuk memasangnya, silahkan ikuti beberap langkah berikut ini.

1. Login ke "Blogger" > pilih menu "Tema" > klik "Edit HTML"

2. Copy kode di bawah ini dan letakkan di atas atau sebelum kode ]]></b:skin> atau </style>.

/* Tombol Demo Tuan Siput */
.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#49ace1!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} .buttonx:hover{background-color:#ffa502!important;background:0} .buttonx:active{position:relative;top:1px}

3. Simpan template.

Untuk cara mesangnya, ikuti langkah berikut ini.

4. Masuk ke menu "Postingan" > pilih "Entri baru" > copy dan letakkan kode di bawah ini pada tab "HTML" postingan bukan compose.

<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="http://www.contohblog.com/" target="_blank">Demo</a>
<a class="buttonx" href="http://www.contohblog.com/" target="_blank">Download</a>
</div>

Untuk demo silahkan lihat pada link berikut ini:


Jika ingin memasang tombol tersebut langsung pada postingan tanpa mengedit kode CSS, maka bisa mengikuti cara di bawah ini:

1. Masuk ke "Blogger" > pilih "Entri baru" > copy dan paste kode di bawah ini pada tab "HTML" (bukan compose)

<style>
.buttonx{display:inline-flex;cursor:pointer;font-size:13px;font-weight:bold;text-transform:uppercase;box-shadow:0 1px 2px rgba(0,0,0,.2);color:#FFF!important;border:2px solid #FFF!important;background-color:#49ace1!important;background:0;margin:5px 0;padding:8px 25px;text-shadow:none!important;transition:all 0s!important} 
.buttonx:hover{background-color:#ffa502!important;background:0}
.buttonx:active{position:relative;top:1px}
</style>
<div style="text-align: center;margin: 10px 0;">
<a class="buttonx" href="https://www.tuansiput.com/" target="_blank">Demo</a>
<a class="buttonx" href="https://www.tuansiput.com/" target="_blank">Download</a>
</div>

2. Publish.

Note: Silahkan ganti kode warna berikut jika kamu ingin menggantinya.
  • Warna text #fff
  • Warna biru #49ace1
  • Warna kuning #ffa502

Tombol Demo dan Download dengan Tampilan Simple di Blog