Athharkautsar

Cara Membuat Tombol Demo dan Download di Blogger

2017-07-21T07:15:00.000-07:00

Mengingat kematiannya chester bennington yang baru saja terjadi maka saya akan membagikan tombol demo dan download pada artikel ini. //ganyambung ih

Memasang tombol demo dan download yang digunakan pada blog ini sangatlah mudah. Kalian tinggal simpan kode css diatas tag ]]></b:skin> atau </style> dan untuk memanggilnya kalian tinggal gunakan kode html yang nanti saya berikan. Desain tombol ini juga sangatlah simpel. Untuk demonya akan saya berikan dibagian bawah artikel ini.

Cara Membuat Tombol Demo dan Download di Blogger

Tombol ini menggunakan Font Awesome. Jika kalian belum memasang link Font Awesome silahkan simpan kode dibawah ini diatas tag </head>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>

1. Masuk ke Blogger > Tema > Edit HTML

2. Simpan kode dibawah ini diatas kode ]]></b:skin> atau </style>

/*Button CSS*/
.post-body .button{width:100%;padding:0!important;list-style:none;margin:10px auto!important}
.post-body .button li{display:inline-block;width:49%;line-height:normal;margin:0}
.post-body .button li a{position:relative;display:block;padding:15px;margin:5px;color:#fff;text-align:center;text-transform:uppercase;border-radius:3px}
.post-body .button li a.demo{background:#dda245;}.post-body .button li a.demo:hover{background:#c18e3d;}
.post-body .button li a.download{background:#529cce;}.post-body .button li a.download:hover{background:#4686b0;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

3. Klik simpan template.

Jika kalian ingin menggunakan tombol ini cukup gunakan kode dibawah ini di mode HTML

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="#">DEMO</a></li>
<li><a class="download" href="#">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear">
</div>

Jika kalian hanya ingin menggunakan tombol demo saja, kalian tinggal hapus baris kode dibawah ini.

<li><a class="download" href="#">DOWNLOAD</a></li>

Jika kalian hanya ingin menggunakan tombol download saja, kalian tinggal hapus baris kode dibawah ini.

<li><a class="demo" href="#">DEMO</a></li>

DEMO TOMBOL DEMO DAN DOWNLOAD

Jika kalian memiliki permasalahan atau pertanyaan dalam pemasangan widget ini, silahkan berikan komentar di artikel ini. Terimakasih.

Memasang Search Form di Blogger

2017-07-20T07:29:00.002-07:00

Pada kesempatan kali ini saya akan berbagi cara memasang search form di blogger. Search form ini sangatlah penting untuk blog, karena jika tidak ada search form pengunjung tidak akan bisa mencari artikel di blog kita. Search Form ini juga sangatlah ringan, jadi kalian tidak perlu khawatir blognya akan menjadi berat. Nah jika kalian ingin melihat demo search form ini silahkan klik tombol dibawah ini.

DEMO

Memasang Search Form di Blogger

1. Masuk ke Blogger > Tema > Edit HTML.
2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>

 /*Simple Search Form*/
#searchbtn {background:#0099ff;color:white;padding:10px 20px;border-radius:0 5px 5px 0;border:0 none;font-weight:bold;}
#searchbtn:hover{cursor:pointer}
#searchbox {background: #eee;padding:10px; border-radius:5px 0 0 5px;border:0 none;width:160px;}
#searchbox:focus{outline:none}

3. Silahkan simpan kode HTML dibawah ini dinavbar atau disidebar blog kalian.

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="searchbox" name="q" size="30" type="text" placeholder="Search"/>
<input id="searchbtn" value="Go" type="submit"/>
</form>

4. Klik simpan temlate!

Jika kalian kesulitan atau mempunyai pertanyaan dalam pemasangan search form ini silahkan berikan komentar di artikel ini, Jika sempat akan saya bantu / balas. Terimakasih.

Simple Subscription Widget

2017-07-19T06:06:00.001-07:00

Pada artikel kali ini saya akan berbagi widget yang sama dengan kemarin, yaitu subscription box atau kotak berlangganan, hanya saja berbeda style-nya. Widget subscription box yang satu ini memiliki style yang sangat simple hanya ada kata pengantar dan form berlangganan.Widget ini direquest oleh salah satu sobat blogger. Jika kalian ingin memasang widget ini silahkan ikuti langkah-langkah dibawah ini. Untuk demonya kalian bisa klik tombol dibawah ini.

DEMO

Simple Subscription Widget

1. Masuk ke Blogger > Tema > Edit HTML
2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>

/* Subscribe Box */
.subscribe-wrapper{background:#34495e;color:#fff;margin:0;padding:20px;text-align:center}
.subscribe-wrapper p{margin:0;text-align:left;}
.subscribe-form{clear:both;display:block;margin:10px 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#fff;color:#95a5a6;margin:0 0 15px;padding:12px;width:100%;border:1px solid rgba(0,0,0,0.1);outline:0;font-size:13px}
.subscribe-css-button{background:#43a1a0!important;color:#fff;cursor:pointer;padding:7px;text-transform:none;width:100%;border:none;font-size:17px;transition:all .1s}
.subscribe-css-button:hover{background:#2c3e50!important}

3. Klik simpan template.
4. Masuk ke bagian Tata Letak > Tambah widget di sidebar > Pilih HTML/Javascript
5. Salin lagi kode dibawah ini dan simpan dikolom konten.

<div id="subscribe-css">
<div class="subscribe-wrapper">
<p>Jika Anda menyukai Artikel di blog ini, Silakan berlangganan gratis via email.</p>
<div class="subscribe-form">
<form action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="YOUR-USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"/>
<input class="subscribe-css-button" title="" type="submit" value="Submit" />
</form>
</div>
</div></div>

6. Ganti kode yang saya tandai (YOUR-USER-NAME) dengan id feedburner kalian.

Jika kalian mengalami masalah dengan pemasangan widget ini silahkan berkomentar di artikel ini. Terimakasih.

Membuat Subscription Box Seperti Template eL diablo

2017-07-18T07:17:00.000-07:00

Pada artikel kali ini saya akan membagikan widget subscription box atau widget kotak berlangganan seperti template eL diablo, untuk demonya kalian bisa lihat di blog demo template eldiablo atau kalian bisa klik tombol demo dibawah ini.

DEMO

Nah jika kalian tertarik untuk memasang widget ini di sidebar blog kalian silahkan ikuti langkah-langkah dibawah ini.

Membuat Subscription Box Seperti Template eL diablo

1. Masuk ke Blogger > Tema > Edit HTML

2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>

/*Subscribe Box*/
  #subscribebox{background:#F8F8F8;padding:20px;}
  .widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
  #subscribebox p{color:#888;font-size:15px;text-align:center;font-weight:700}
  .follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
  .follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
  .follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
  .follow-subscribe-social ul li:last-child{margin:0}
  .follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
  .follow-subscribe-social ul li a:hover{color:#212121}
  form.subscribe{margin-top:-7px}
  form.subscribe input{display:block;width:100%}
  .subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(0,0,0,0.01);text-align:center;color:rgba(0,0,0,0.4);font-weight:bold}
  .subscribe-email:focus{outline:0}
  form.subscribe .placeholder{color:#cacaca}
  form.subscribe input:-ms-input-placeholder{color:#cacaca}
  form.subscribe input::-webkit-input-placeholder{color:#cacaca}
  form.subscribe input:-moz-placeholder{color:#fafafa}
  form.subscribe input::-moz-placeholder{color:#fafafa}
  .subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#888;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
  .subscribe-button:hover{background-color:#999}
  .subscribe-button:focus{outline:0}

3. Masuk kebagian Tata Letak > Tambah widget di sidebar > Pilih Menu HTML/Javascript.
4. Salin kode dibawah ini dan simpan diatas kolom konten.

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe to my Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>

5. Ganti kode yang saya tandai (YOUR-USER-NAME) dengan id feedburner kalian.

Jika kalian mengalami masalah dengan pemasangan widget ini silahkan berkomentar di artikel ini.
Demikianlah tutorial tentang Membuat Subscription Box Seperti Template eL diablo sampai ketemu lagi di artikel selanjutnya.

Cara Membuat Tag KBD Seperti Arlinadzgn

2017-07-17T06:33:00.001-07:00

Tag kbd? Apa sih itu? Tag kbd adalah tag yang merepresentasikan input (masukkan) dari user (biasanya masukkan karakter/kata dari keyboard yang diketik oleh user, atau dapat pula hasil masukkan dari alat lainnya, seperti perintah suara (voice command)). [src: http://dul.web.id/belajar/html/tag-element/kbd.php]

Pada dasarnya tag kbd terlihat seperti gambar dibawah ini.

Nah pada artikel kali ini saya akan mengubah style tag kbd tersebut seperti yang digunakan didalam blog arlinadzgn, untuk contohnya bisa dilihat digambar yang pertama.

Cara Membuat Tag KBD Seperti Arlinadzgn

1. Masuk ke Blogger > Tema > Edit HTML

2. Salin kode dibawah ini dan simpan diatas kode ]]></b:skin> atau </style>.

kbd{position:relative;color:#28a1f0;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
kbd:before{position:absolute;content:'Double click to select';display:table;bottom:23px;left:0;background:#4c4c4c;color:#fff;padding:4px;border-radius:2px;font-size:75%;line-height:1;opacity:0;visibility:hidden;transform:scale(0.8);z-index:2;transition:all .3s;}
kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}

3. Salin lagi kode dibawah ini dan simpan diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
var pres = document.querySelectorAll('kbd');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

4. Simpan Template!

Jika masih ada yang kesulitan atau gagal silahkan berikan tanyakan pada kolom komentar.

eL diablo Responsive Blogger Template

2017-07-15T21:58:00.001-07:00

Setelah sekian lama saya tidak update artikel, akhirnya bisa update kembali. Saya kembali ingin membagikan sebuah template blogger PREMIUM yang saya buat sendiri dari 0. Template ini menggunakan Bootstrap v3.7.7 tadinya saya mau pake Bootstrap v4, tapi berhubung bootstrap v4 masih dalam versi alpha jadi saya belum berani buat bikin template dari versi tersebut. Sebelumnya saya juga sudah membuat template juga, tapi karena kurang jelek jadi saya tidak publish :p.

Nama eL diablo sendiri terinspirasi dari film suicide squad. Dalam film suicide squad, eL diablo menggunakan tato tulang-belulang yang artinya sama saja sebagai border didalam template ini.
Berikut fitur yang ada didalam template ini.

Features	Availability
Responsive	True
SEO Friendly	True
Fixed Navbar	True
Mobile Friendly	True
Dynamic Heading	True
Personal Blog	True
Bootstrap	True
Font Awesome	True
Unlimited Pagination	True
Light Base Theme Color	True
Breadcrumbs	True
Search Box	True
Social Search Button	True
Responsive Dropdown Menu	True
Custom Subscribe Box	True
Smooth Back to Top	True
Shortcodes	True
Documentation	True

Untuk demonya kalian bisa klik tombol dibawah ini.

DEMO

Bagi yang berminat dengan template ini, silahkan kirim pesan ke facebook saya: https://www.facebook.com/AthharKautsar14 dengan harga yang cukup murah yaitu Rp. 30.000,00
NO NEGO YA GAN HEHE :D

Tutorial Blogger Lengkap Untuk Pemula

2017-07-05T02:29:00.000-07:00

Di-artikel yang dulu, saya sudah menjelaskan kenapa harus pakai Blogger. Diartikel yang lama juga saya sudah memberikan tutorial Cara membuat blogger dan email dari google. Karena ada sedikit perubahan di blogger dan pembuatan email, maka saya akan membuat kembali tutorial-nya di artikel ini.

Kalian juga bisa melihat artikel berikut ini:
Kenapa Harus Blogger?
Cara membuat akun Gmail
Daftar Ke Blogger
Mengenal dashboard Blogger

Nah langsung saja saya berikan tutorial yang baru kekalian.

Cara membuat Gmail

Sebenarnya membuat gmail sangatlah gampang, jadi jika kalian sudah mempunyai email, mau itu dari google ataupun yang lainnya, lewati saja langkah yang ini.

1. Buka situs www.google.com

2. Klik tulisan Gmail yang ada di pojok kanan atas.

3. Klik Opsi Lainnya dan klik Ciptakan Akun.

4. Isilah kolom data yang disediakan.

5. Klik Langka Berikutnya.

6. Klik Tombol Panah Kebawah dan Klik tombol Saya Setuju.

7. Klik lanjut ke Gmail!.

Dan sekarang kalian sudah mempunya email dari google.

Mendaftar ke Blogger

1. Buka situs www.blogger.com

2. Klik tulisan Masuk yang berada di pojok kana atas.

3. Masukan Password email yang tadi kalian buat.

4. Silahkan pilah mau pakai profil Google+ atau profil Blogger. Tapi disini saya memakai Profil Blogger.

5. Isi kolom tersebut dengan nama kalian atau nama blog kalian.

Kalian sudah memiliki akun blogger. Dilangkah selanjutnya kalian akan membuat blog.

Membuat Blog Baru

1. Masih di situs yang sama seperti langkah sebelumnya.

2. Klik Tulisan Buat Blog Baru.

3. Isi kolom judul dengan judul blog kalian.

4. Isi kolom alamat dengan alamat blog kalian.

NOTE: Jika muncul tanda berwarna kuning atau merah berarti alamat blog tersebut tidak bisa dipakai.

5. Pilih template blog yang kalian mau. Tenang saja template ini nantinya bisa diganti.

6. Setelah itu kalian klik tombol buat blog.

Blog kalian sudah berhasil dibuat. Untuk melihatnya silahkan kunjungi alamat blog yang tadi kalian buat.

Pengenalan Dashboard Blogger.

Sebenarnya saya sudah buat artikel untuk yang ini, tapi karena tampilannya ada yang berubah, jadi saya bikin lagi..

Dan penjelasannya sebagain berikut:

1. Logo blogger

2. Kumpulan blog kalian

3. Alamat blog kalian

4. Daftar artkel

5. Untuk melihat statistik blog kalian

6. Untuk melihat komentar yang ada di blog kalian

7. Untuk mempromosikan blog kalian

8. Daftar laman

9. Untuk mengatur widget yang ada di blog kalian

10. Untuk mengganti template blog

11. Setelan blog kalian

12. Untuk membuat artikel baru

13. Pemberitahuan profil blog

14. Daftar label atau kategori

15. Tombol untuk mempublikasikan artikel yang ada di draft

16. Untuk mengembalikan ke draft artikel yang di publish

17. Untuk membuang artikel

18. Daftar artikel

19. Untuk mencari artikel

20. Daftar label

21. Pemberitahuan yang masuk ke profil blog/google kalian

22. Profil blog/google.

Membuat artikel di blog

1. Klik tombol Entri Baru

2. Tuliskan judul artikel disamping tulisan Entri dan tuliskan kata-kata atau tulisan artikelnya pada kotak yang paling besar.

3. Jika sudah selesai, klik tombol Publikasikan

Artikel kalian sudah jadi. Jika mau melihat artikelnya, klik tulisan lihat yang ada di daftar artikel.

Kalian bisa mengubah setelah artikel dari font, heading, bold, italic, underline, warna tulisan, background tulisan, dll di toolbar yang disediakan.

Mengganti template blog

Untuk mengganti template kalian harus menyediakan / mendownload template yang kalian inginkan di idntheme.com, senikode.com, themeindie.com, dan situs yang lainnya.

Jika sudah ikuti langkah dibawah ini.

1. Masuk ke menu Tema

2. Klik tulisan Backup/Pulihkan.

3. Klik tombol telusuri

4. Pilih template yang kalian download tadi. (filenya berbentu XML)

6. Jika sudah klik upload.

Kalian juga bisa mengganti template dengan yang sudah disediakan oleh blogger, kalian tinggal scroll kebawah saja.

Mengganti favicon blog

Favicon adalah icon blog kalian yang tampil pada tab browser.

Untuk menggantinya, kalian harus mengconvert logo-blog kalian menjadi .ico, untuk mengconvertya kalian bisa memakai situ www.favicon-generator.com. Jika mengconvert iconnya sudah selesai, kalian tinggal ikuti langkah dibawah ini.

1. Masuk kedalam menu Tata Letak

2. Cari tulisan Favicon yang berada didalam kotak paling atas.

3. Klik tulisan edit yang ada didalam kotak favicon tersebut.

4. Klik telusuri.

5. Pilih icon yang sudah kalian convert.

6. Klik Upload.

Mengganti judul blog dengan logo

Pertama-tama kalian harus membuat logo blog kalian terlebih dahulu. Jika sudah ada ikuti langkah dibawah ini.

1. Masuk kemenu Tata Letak.

2. Klik Edit pada bagian Judul Blog.

3. Pilih file gambar logo blog kalian yang sudah dibuat.

4. Pilih “Selain judul dan keterangan“.

5. Klik “Simpan“.

Tutorial Blogger lainnya.

Untuk tutorial blogger yang lainnya kalian bisa mengunjungi kategori Tutorial. Sekian dari saya, maaf jika ada kesalahan kata.

Cara Mengatasi Widget Popular Post Yang Tidak Muncul Atau Error

2017-07-04T06:53:00.000-07:00

Baru-baru ini saya mengganti template blog saya dengan template Cangcimen (kuaci) dari SeniKode.com, waktu pertama kali pasang, saya merasa sedikit aneh, karena kok ga ada popular post ya dibagian atas?, setelah itu saya otak atik sendiri si widget popular post ini, bahkan saya otak atik template ini sampe berantakan, hehe..

Nah bagi kalian yang mempunyai masalah yang sama dengan saya, yaitu Widget Popular Post yang Tidak Muncul Atau Error saya punya solusinya..

Cara untuk memperbaikinya sangatlah mudah..
Kalian tinggal atur Di menu Paling Banyak Dikunjungi jadi 7 Hari.
Contohnya seperti dibawah ini.

Cara diatas merupakan salah satu cara untuk mengatasi error tersebut, tetapi setelah saya mencari digoogle saya ketemu sama artikelnya mbak lina.

Cara dari mbak lina hanya menambahkan properti CSS kedalam kode ]]></b:skin> atau </style>
dan kode CSSnya bisa dilihat dibawah ini.

CSS.PopularPosts ul li:nth-child(n+4){display:none;}

Kode CSS diatas akan memunculkan 3 entri. Jika kalian mau memunculkan 5 entri, ganti angka 3 tersebut menjadi angka 6. Kuncinya terdapat di atribut :nth-child(n+NOMOR). NOMOR adalah batasan entri yang akan dihilangkan.

Keuntungan memakai cara dari mbaklina adalah kita bisa bebas menentukan menu Paling Banyak Dikunjungi semau kita, menu tersebut bisa diubah jadi 30 hari terakhir, Tahun lalu, dan Semua.

Memasang Widget Social Media Tanpa Font Awesome

2017-06-23T12:08:00.000-07:00

Di artikel saya yang memasang widget social media ada yang meminta dibuatkan widget social media yang lebih simple atau tidak memakai font-awesome. Jadi pada artikel kali ini saya akan share widget social media tanpa font awesome. //as your wish

Widget ini saya berikan efek hover yang bergerak ke kanan dan kekiri saat mouse berada diatas logo sosial media tersebut (facebook, instagram, twitter, google plus)

Untuk lebih jelasnya silahkan kalian lihat demonya di link yang sudah saya sediakan di bagian bawah artikel.

Tapi saya lebih menyarankan kalian memakai widget sosial media yang memakai font awesome, karena widget tersebut lebih ringan daripada widget sosial media yang tidak menggunakan font awesome

Memasang Widget Social Media Tanpa Font Awesome

1. Masuk ke blogger > Tema > Edit HTML, salinlah kode dibawah dan simpan diatas kode </style> atau ]]></b:skin>

CSS/* CSS SOCMED BY ATHHARKAUTSAR.COM */
.socmed{margin:5px auto;width:255px}
.aa-fb, .aa-tw, .aa-ig, .aa-gp{width:50px;height: auto;background: #fff;border-radius:50%;box-shadow:0px 0px 5px #888888;}
.socmed a{ margin:5px;display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);}
.socmed a:hover, .socmed a:focus, .socmed a:active{-webkit-animation-name: hvr-buzz-out;animation-name: hvr-buzz-out;-webkit-animation-duration: 0.75s;animation-duration: 0.75s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: 1;animation-iteration-count: 1;}
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

2. Masuk ke bagian Tata Letak > Tambah Gadget > HTML/Javascript lalu salin dan simpan kode dibawah ini didalam kolom konten.

HTML<div class='socmed'>
  <a title='Facebook' target="_blank" href="#"><img class='aa-fb' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vuS41IrlZrIAzV00d6e9gCOwDuKZlhC01pBDg6-F6lpyNFdkDnkyBLI4AQjZKJ5OjldXRjo1_BmtI-8NxMUOhvTn8scWlYcdkpjKcWsxjvQrD5P2wCDHMeZn9AkS5K07SJNrJ_98LmCS/s1600/fb.png" alt="Facebook" /></a>
  <a title='Twitter' target="_blank" href="#"><img class='aa-tw' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUaUFDCRybxgUUQ7RFcX9N0eZ6J8zSBZPIytVpCof-IJ69V2_VI1afLgJg1r8se7ThApeNsPgR6i2NzhwsEPv-mn5cX4WuxMD6y1YQkTBdbtiR22uByqekmei3o8K9FWAD_sb_4eV4f8yH/s1600/twitter.png" alt="Twitter" /></a>
  <a title='Instagram' target="_blank" href="#"><img class='aa-ig' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi34bMkY2T7e4ANK3BtnYbyW-UajfOAokUPB8GoSH-7lquOI44TJgm8X9Zs0Ea0u9_ivHNdNpmU2zZImoc_NjVqBZJ5Q4Dxf55Tlsf4Ft2XreemYs08siJ8VZCJqWSPUBl9wEMAUO4pYz7S/s1600/instagram.png" alt="Instagram" /></a>
  <a title='Google Plus' target="_blank" href="#"><img class='aa-gp' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOFXDDFSapSIXsc8NV1CnLNypRAPE8UnIPrPhITr_NXl0WvoLgFlEd9_i7ErPfzgSp7AzI2-rDdI4fmU9TdsWiiSO1eNvSuc4c8NaFkZrgAP2bYWm9eSIqXJt6RXtuVLT5No2nIUxiiBbO/s1600/google%252B.png" alt="Google Plus" /></a>
</div>

3. Klik simpan dan lihat hasilnya..

Catatan:
Jangan lupa ganti tanda # dengan link sosmed kalian!

Demo: https://codepen.io/athharkautsar/full/oweEXd/

Cukup sekian, Sampai berjumpa lagi di artikel berikutnya.

Membuat Halaman Custom Error 404 di Blogspot

2017-06-23T05:20:00.000-07:00

Dalam artikel tutorial kali ini, kita akan menggunakan Tag Kondisional Halaman Error untuk membuat Custom Error 404 Page. Dengan menggunakan Tag Kondisional pada pembuatan halaman error akan membuat pengerjaan pembuatan halaman error akan lebih mudah.

Membuat Halaman Custom Error 404 di Blogspot

1. Cari kode dibawah ini ditemplate kalian, jika tidak ada tambahkan kode berikut dibawah kode <body>

HTML<b:if cond="data:blog.pageType == &quot;error_page&quot;">
/* bagian ini diisi dengan kode halaman custom 404 */
</b:if>

2. Hapus semua kode diantara kedua tag tersebut.
3. Tambahkan kode dibawah ini diantara kedua tag tersebut.

HTML<style scoped='scoped' type='text/css'>
body {
  background-color: #2F3242;
}
svg {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -400px;
}
.message-box {
  height: 200px;
  width: 380px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: 50px;
  color: #FFF;
  font-family: Roboto;
  font-weight: 300;
}
.message-box h1 {
  font-size: 60px;
  line-height: 46px;
  margin-bottom: 40px;
}
.buttons-con .action-link-wrap {
  margin-top: 40px;
}
.buttons-con .action-link-wrap a {
  background: #68c950;
  padding: 8px 25px;
  border-radius: 4px;
  color: #FFF;
  font-weight: bold;
  font-size: 14px;
  transition: all 0.3s linear;
  cursor: pointer;
  text-decoration: none;
  margin-right: 10px
}
.buttons-con .action-link-wrap a:hover {
  background: #5A5C6C;
  color: #fff;
}

#Polygon-1 , #Polygon-2 , #Polygon-3 , #Polygon-4 , #Polygon-4, #Polygon-5 {
  animation: float 1s infinite ease-in-out alternate;
}
#Polygon-2 {
  animation-delay: .2s; 
}
#Polygon-3 {
  animation-delay: .4s; 
}
#Polygon-4 {
  animation-delay: .6s; 
}
#Polygon-5 {
  animation-delay: .8s; 
}

@keyframes float {
 100% {
    transform: translateY(20px);
  }
}
@media (max-width: 450px) {
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -190px;
  }
  .message-box {
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -190px;
    text-align: center;
  }
}
</style>
<div id='error-page'>
<svg height='500px' version='1.1' viewBox='0 0 837 1045' width='380px' xmlns='http://www.w3.org/2000/svg' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns:xlink='http://www.w3.org/1999/xlink'>
    <g fill='none' fill-rule='evenodd' id='Page-1' sketch:type='MSPage' stroke='none' stroke-width='1'>
        <path d='M353,9 L626.664028,170 L626.664028,487 L353,642 L79.3359724,487 L79.3359724,170 L353,9 Z' id='Polygon-1' sketch:type='MSShapeGroup' stroke='#007FB2' stroke-width='6'/>
        <path d='M78.5,529 L147,569.186414 L147,648.311216 L78.5,687 L10,648.311216 L10,569.186414 L78.5,529 Z' id='Polygon-2' sketch:type='MSShapeGroup' stroke='#EF4A5B' stroke-width='6'/>
        <path d='M773,186 L827,217.538705 L827,279.636651 L773,310 L719,279.636651 L719,217.538705 L773,186 Z' id='Polygon-3' sketch:type='MSShapeGroup' stroke='#795D9C' stroke-width='6'/>
        <path d='M639,529 L773,607.846761 L773,763.091627 L639,839 L505,763.091627 L505,607.846761 L639,529 Z' id='Polygon-4' sketch:type='MSShapeGroup' stroke='#F2773F' stroke-width='6'/>
        <path d='M281,801 L383,861.025276 L383,979.21169 L281,1037 L179,979.21169 L179,861.025276 L281,801 Z' id='Polygon-5' sketch:type='MSShapeGroup' stroke='#36B455' stroke-width='6'/>
    </g>
</svg>
<div class='message-box'>
  <h1>404</h1>
  <p>We are terribly sorry, but the URL you typed no longer exists. It might have been moved or deleted, or perhaps you mistyped it.</p>
  <div class='buttons-con'>
    <div class='action-link-wrap'>
      <a class='link-button link-back-button' onclick='history.back(-1)'>Go Back</a>
      <a class='link-button' expr:href='data:blog.homepageUrl'>Go to Home Page</a>
    </div>
  </div>
</div>
</div>

3. Klik tombol save.

Untuk melihat halaman error 404 tersebut tambahkan /404 di belakang url blog kalian

Source and demo : https://codepen.io/saransh/pen/aezht

Memasang Widget Social Media

2017-06-21T18:20:00.000-07:00

Didalam artikel ini saya akan membagikan sebuah widget media sosial untuk menghiasi sidebar blog kalian. Widget sosial media berfungsi untuk menyimpan link dari akun sosial media kalian dengan tanpilan menarik.

Jadi bagi yang mau memasang widget ini silahkan ikuti langkah-langkah dibawah ini/

Memasang Widget Sosial Media

Widget ini menggunakan font awesome, jika kalian bellum memasang link font awesome di template blog kalian maka copy dan paste kode dibawah ini diatas kode </head>

HTML<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

1. Login ke blogger > Buka template editor > Cari kode ]]></b:skin> atau </style> dan salin kode dibawah sebelum kode tersebut.

CSS/*SocialMediaWidget By Athharkautsar.com*/
.socialmedia {text-align:center;font-size:20px;margin-top:10px}
.icon-button {background-color: white;border-radius: 3.6rem;cursor: pointer;display: inline-block;font-size: 2.0rem;height: 3.6rem;line-height: 3.6rem;margin: 0 5px;position: relative;text-align: center:-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width: 3.6rem;}
.icon-button span {border-radius: 0;display: block;height: 0;left: 50%;margin: 0;position: absolute;top: 50%;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;width: 0;}
.icon-button:hover span {width: 3.6rem;height: 3.6rem;border-radius: 3.6rem;margin: -1.8rem;}
.twitter span {background-color: #4099ff;}
.facebook span {background-color: #3B5998;}
.google-plus span {background-color: #db5a3c;}
.border-tw, .border-fb, .border-gp{border:2px solid}
.border-tw{border-color:#4099FF}
.border-fb{border-color:#3B5998}
.border-gp{border-color:#DB5A3C}
.icon-button i {background: none;color: white;height: 3.6rem;left: 0;line-height: 3.6rem;position: absolute;top: 0;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;width: 3.6rem;z-index: 10;}
.icon-button .fa-twitter {color: #4099ff;}
.icon-button .fa-facebook {color: #3B5998;}
.icon-button .fa-google-plus {color: #db5a3c;}
.icon-button:hover .fa-twitter,
.icon-button:hover .fa-facebook,
.icon-button:hover .fa-google-plus {color: white;}

2. Masuk ke bagian Tata Letak > Tambahkan Gadget disidebar kalian lalu pilih HTML/Javascript, salinlah kode dibawah ini dan paste di kolom tersebut, Kolom Judul diisi dengan "Sosial Media"

HTML<div class="socialmedia">
<a href="#" class="icon-button twitter border-tw"><i class="fa fa-twitter"></i><span></span></a>
<a href="#" class="icon-button facebook border-fb"><i class="fa fa-facebook"></i><span></span></a>
<a href="#" class="icon-button google-plus border-gp"><i class="fa fa-google-plus"></i><span></span></a></div>

Kurang lebih hasilnya seperti dibawah ini.

Klik Untuk Memperbesar

Catatan:
Ganti tulisan # dengan link sosial media kalian.

Untuk Demonya Bisa lihat di https://codepen.io/athharkautsar/full/pwwNxp/
Cukup sekian, Sampai berjumpa lagi di artikel berikutnya.

Memasang widget kategori atau label dengan efek hover keren

2017-06-19T19:21:00.000-07:00

Bagi kalian yang mau memasang widget kategori atau label dengan responsive, keren, dan ciamik silahkan simak artikel berikut.

Widget kategori ini sangat penting untuk dimiliki oleh setiap blog, dikarenakan dengan widget ini akan menampilkan label atau kategori yang telah kita buat. Widget kategori juga berguna untuk pengunjung agar pengunjung mudah untuk menavigasi kategori yang mereka ingin lihat.

Widget ini dibuat dengan tampilan sederhana dan kalian tidak perlu khawatir akan kecepatan loading blog kalian, karena widget sangatlah ringan. Widget ini juga sudah saya terapkan di blog saya, maka untuk live demonya silahkan kalian lihat widget di sidebar blog saya.

Nah jika kalian mau memasang widget kategori atau label seperti yang ada di sidebar blog saya, kalian tinggal ikuti langkah-langkah dibawah ini:

Memasang Widget Label Keren di Sidebar Blog

1. Login ke blogger > Buka bagian Tata Letak > Lalu tambah widget di sidebar blog dengan cara klik tulisan "Tambah Gadget" dan pilih widget label.

2. Aturlah konfigurasi widget tabel seperti dibawah ini.

Klik untuk memperbesar

3. (optional) Jika di template yang kalian pakai sudah ada css widget label maka hapus lah, dan ganti kode tersebut dengan kode yang ada di tahap selanjutnya
4. Salin kode css dibawah ini sebelum kode ]]></b:skin> atau </style>

CSS/* Label Made by Athharkautsar.com with love */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.label-size a{display: block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px transparent;position: relative;-webkit-transition-property: color;transition-property: color;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;font-size:14px;padding:10px}
.label-size a:before {content: "";position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;background: #f34c3b;-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transform-origin: 0 50%;transform-origin: 0 50%;-webkit-transition-property: transform;transition-property: transform;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
.label-size a:hover, .label-size a:focus, .label-size a:active {color: white;}
.label-size a:hover:before, .label-size a:focus:before, .label-size a:active:before {-webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}

Gantilah kode yang saya tandai diatas dengan kode warna sesuka kalian.

Demikian tutorial tentang Memasang widget kategori atau label dengan efek hover keren, sampai berjumpa lagi di artikel selanjutnya.

Gambar Responsive dengan Bootstrap

2017-06-17T19:28:00.001-07:00

Gambar (image) di dalam Bootstrap dapat dibuat menjadi responsive dengan menambahkan class .img-responsive. Dengan menambahkan class tersebut, maka CSS property max-width: 100%; height: auto; dan display: block; diterapkan kepada gambar tersebut, sehingga gambar tersebut akan berubah ukurannya mengikuti kontainer induknya.

Untuk membuat gambar rata tengah (center), gunakan class .center-block daripada class .text-center. Brikut contoh skripnya.

HTML<img src="#" alt="without responsive image feature">
<img src="#" alt="with responsive image feature" class="img-responsive">

Pada skrip tersebut ada dua buah gambar, dimana gambar pertama tanpa fitur responsive, sedangkan gambar kedua sudah ditambahkan fitur responsive.
Perbedaan tampilan dari keuda gambar tersebut dapat dilihat dibawah ini.

Pada gambar diatas, terlihat bahwa pada saat layar normal (gambar sebelah kiri), kedua gambar kotak tersebut tampil baik-baik saja, namun ketika layar dikecilkan, maka gambar yang non-responsive tampil tidak proporsional, sedangkan gambar yang responsive (kotak di bawah) tampil mengecil sesuai dengan mengecilnya ukuran layar.

Bentuk tampilan gambar

Bootstrap memiliki tiga class untuk styling bentuk tampilan gambar, yaitu:

.img-rounded, membuat ujung-ujung image membulat (rounded)
.img-circle, membuat seluruh image menjadi bentuk oval
.img-thumbnail, akan menambah sedikit padding dan border abu-abu

Penerapan class-class diatas dapat kita lihat pada skrip dibawah ini.

HTML<img src="#" alt="rounded image" class="img-rounded">
<img src="#" alt="circle image" class="img-circle">
<img src="#" alt="thumbnail image" class="img-thumbnail">

Hasil skrip tersebut akan terlihat seperti dibawah ini.

Sebelumnya maaf nih kemarin saya ga update artikel dikarenakan kemarin saya membuat halman partner yang kalian bisa lihat disini

Navigation Bar Bootstrap

2017-06-16T03:00:00.000-07:00

Navigation bar merupakan salah satu komponen yang bertujuan memberikan panduan bagi pengunjung agar mudah menjelajahi isi dari website.

Bootstrap menyediakan berbagai pilihan dari variasi navigation bar. Ciri tampilan Navbar adalah collapsed (ditumpuk) pada layar sangat kecil dan akan berubah menjadi horizontal pada layar yang lebih lebar.

Navbar Dasar

Sebuah navigation bar pada bootstrap dihasilkan mengguanakan class .navbar pada sebuah elemen HTML5 <nav> atau bisa juga pada block element <div>...<div>, tetapi tambahkan attribute role="navigation" pada elemen block tsb.

HTML<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Athharkautsar</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      
      <!-- Komponen navbar lainnya seperti link, tombol, teks, dsb. -->
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

penjelasan dari skrip tersebut

Navbar dibentuk oleh elemen HTML <nav></nav> dengan class dasar navbar .navbar, sementara class tambahannya bisa .navbar-default atau bisa juga .navbar-inverse.
Kemudian kontainer untuk mengatur lebar komponen-komponen navbar, jika memakai class .container-fluid, maka lebar komponen memenuhi seluruh lebar layar. Sedangkan jika menggunakan class .container, maka lebar komponen akan memenuhi sebagian layar
Komponen header yang berisi tiga buah icon garis yang bersifat togleable (bisa ditampakan dan dihilangkan dengan mengkliknya) yang hanya akan nampak pada layar dengan lebar dibawah 768px

Hasil dari skrip tersebut bisa dilihat dibawah ini. (klik tombol result jika hasil tidak muncul)

See the Pen Navbar Bootstrap by Athhar Kautsar (@athharkautsar) on CodePen.

Elemen - elemen didalam navbar

Didalam navigation bar terdapat berbagai komponen, yang kalau semulanya disatukan dengan tepat, akan menghasilkan tampilan navbar yang ciamik.

Brand

Brand merupakan sebuah link dasar yang memperlihatkan merk atau nama proyek atau logo perusahaan.

HTML<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Athharkautsar</a>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Hasil dari skrip tersebut bisa dilihat dibawah ini. (klik tombol result jika hasil tidak muncul)

See the Pen Navbar brand by Athhar Kautsar (@athharkautsar) on CodePen.

Elemen Toggle Button
Elemen Toggle Button diperlukan untuk menyembunyikan dan menampilkan komponen navbar lainnya. Pada lebar layar dibawah 768px elemen toggle button akan tampil sementara elemen navbar lainnya disembunyikan, pada layar lebih besar dari 768px elemen toggle button akan hilang sementara komponen navbar lainnya ditampilkan.
Agar tampil sempurna, elemen toggle button ini membutuhkan Javascript collapse plugin.

HTML<nav class="navbar navbar-default">
  <div class="container">
     <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Athharkautsar</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Pada skrip tersebut markup untuk toggle button adalah pada bagian elemen <button></button> yang ditebalkan. Markup <span class="sr-only">Toggle navigation</span> hanya untuk kepentingan screen reader, markup ini tidak ditampilkan di layar. Markup <span class="icon-bar"></span> adalah untuk menampilkan icon berbentuk garis.
Hasil dari sktip tersebut bisa dilihat dibawah ini. (Klik tombol result jika hasil tidak muncul)

See the Pen Toggle Button by Athhar Kautsar (@athharkautsar) on CodePen.

Elemen Form
Kita juga dapat menampilkan elemen form didalam navbar menggunakan class .navbar-form dan tambahkan class .navbar-left atau .navbar-right untuk meletakan elemen form tersebut disebelah kiri/kanan didalam navbar.
Berikut contoh skrip memasukkan elemen form input field (<input>) dan tombol (<button>) ke dalam navbar.

HTML      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>

Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika form tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)

See the Pen NavbarForm by Athhar Kautsar (@athharkautsar) on CodePen.

Elemen Tombol (Button)
Jika kita ingin menambahkan tombol diluar komponen form didalam navbar maka gunakan class .navbar-btn pada elemen <button> agar tampil sesuai di dalam navbar.
Class .navbar-btn dapat dapat digunakan pada elemen anchor link (<a>) dan elemen , <input>, namun jangan menggunakan dua elemen tersebut (<a> dan <input>) dalam kontainer yang mengandung class .navbar-nav seperti dalam komponen navbar link.

HTML<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika form tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)

See the Pen NavbarButton by Athhar Kautsar (@athharkautsar) on CodePen.

Elemen Nav Links
Item-item link di dalam navbar dibentuk dengan menggunakan unordered list (<ul>) dengan class dasar .nav dan class tambahan .navbar-nav.

HTML      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika list tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)

See the Pen NavLinks by Athhar Kautsar (@athharkautsar) on CodePen.

Elemen teks
Kita dapat memasukan teks didalam navbar dengan menambahkan class .navbar-text pada elemen pembukus teks tersebut (<p></p>).

HTML<p class="navbar-text">Signed in as Admin</p>

Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika teks tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)

See the Pen NavText by Athhar Kautsar (@athharkautsar) on CodePen.

Elemen Non Nav Links
Jika kita ingin menggunakan link tapi ridak mau link tersebut masuk sebagai komponen navbar, maka tambahkan class .navbar-link pada link tersebut

HTML<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Admin</a></p>

Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika link tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)

See the Pen NonNavLink by Athhar Kautsar (@athharkautsar) on CodePen.

Memposisikan elemen dalam navbar

Untuk menempatkan sebuah komponen di kiri atau di kana navbar, kita bisa gunakan class .navbar-left dan .navbar-right

HTML      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Login</a></li>
      </ul>

Dalam skrip tersebut terlihat bahwa link untuk login diletakkan disebelah kana navbar dengan class .navbar-right pada kontainer induknya.
Hasil dari skrip tersebut bisa lihat dibawah ini (Klik tombol result jika hasil tidak muncul dan jika elemen tidak muncul klik garis tiga dalam navbar atau klik tombol HTML)

See the Pen NavAlignComponent by Athhar Kautsar (@athharkautsar) on CodePen.

Posisi Navbar

Pada hakekatnya, navbar merupakan elemen block-level yang posisinya tergantung kepada penempatannya dalam HTML. Namun dengan bebrapa class bantu, kita dapat menempatkannya secara dinamis, baik itu diatas halaman, dibawah halaman ataupun ikut menggulung (scroll) bersama halaman

Fixed To Top Navbar

Pada posisi ini, navbar diletakkan diatas, navbar akan selalu muncul diatas ketika halaman discroll kebawah. Adapun class yang digunakan .navbar-fixed-top pada elemen container navbar yang paling luar menggunakan class .navbar

HTML<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Hasil dari skrip diatas dapat dilihat dengan klik tombol demo dibawah ini

Demo
Click here

Fixed To Bottom Navbar
Pada posisi ini, navbar diletakan dibawah halaman. Class yang digunakan .navbar-fixed-bottom yang ditambahkan pada elemen kontainer paling luar dari navbar.

HTML<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Hasil dari skrip diatas dapat dilihat dengan klik tombol demo dibawah ini

Demo
Click here

Static Top Navbar
Pada posisi ini, navbar diletakkan di atas, navbar akan ikut menggulung bersama halaman ke atas ketika halaman digulung. Adapun class yang digunakan ialah .navbar-static-top
Untuk static top navbar tidak perlu menambahkan style padding pada elemen <body>.

HTML<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

Hasil dari skrip diatas dapat dilihat dengan klik tombol demo dibawah ini

Demo
Click here

Inverted Navbar
Untuk mengasilkan navbar dengan warna latar belakang hitam dan tampilan teks berwarna putih, kita tambahkan class .navbar-inverse pada kontainer paling luar dari navbar tersebut.

HTML<nav class="navbar navbar-inverse">
  ...
</nav>

Hasil dari skrip diatas dapat dilihat dengan klik tombol demo dibawah ini

Demo
Click here

Catatan:
Navigation bar membutuhkan jQuery untuk memunculkan toggle button, jika di template kalian belum ada kode jQuery maka pasanglah kode dibawah ini dan pasang diatas kode </head>
HTML<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Membuat table dengan Bootstrap

2017-06-15T01:58:00.001-07:00

Pada artikel sebelumnya www.athharkautsar.com sudah membahas tentang sejarah bootstrap, struktur folder, dan template dasar html dengan bootstrap. Sehingga pada kesempatan kali ini saya akan membahas tentang cara membuat atau men-design table dengan menggunakan bootstrap.

Markup table yang didukung bootstrap

Berikut adalah data HTML Tabel markup yang didukung oleh bootstrap dan bagaimana sebaiknya mereka digunakan didalam bootstrap. Adapun contoh struktur HTML markup untuk tabel yang didukung Bootstrap sebagai berikut.

HTML<table class="table">
<caption></caption>
 <thead>
  <tr>
   <th>...</th>
   <th>...</th>
   <th>...</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>...</td>
   <td>...</td>
   <td>...</td>
  </tr>
 </tbody>
</table>

Adapun keterangan masing - masing markup tabel bisa dibawah ini.

No	Tag	Keterangan
1	<table>	Membungkus element - element untuk menampilkan data dalam bentuk tabular
2	<thead>	Element container untuk baris judul kolom
3	<tbody>	Element container untuk baris tabel dibagian body
4	<tr>	Elemen container untuk sekumpulan sel-sel tabel ditampilkan dalam satu baris
5	<td>	Sel tabel standar
6	<th>	Sel tabel yang khusus digunakan untuk judul kolom
7	<caption>	Keterangan tentang tabel tersebut

Style dasar markup table

Untuk style dasar bagi tabel, cukup tambahkan class .table ke dalam tag <table>
Contoh:

HTML<table class="table">
...
</table>

Contoh style dasar untuk table yang hasilnya bisa dilihat dibawah ini (jika hasilnya tidak muncul klik tombol result)

See the Pen tabel dasar by Athhar Kautsar (@athharkautsar) on CodePen.

Pada tabel diatas kita bisa melihat bahwa style dasar untuk tabel di bootstrap tidak mempunya border, hanya garis pemisah baris, agar bisa tampil lebih cantik dan ciamik, maka kita harus menambahkan class-class lain atau class tambahan

Class tambahan untuk markup tabel

Untuk mempercantik tampilan tabel, Bootstrap memiliki class-class tambahan yang bisa diterapkan pada tag <table> dan tag <tr> untuk mempercantik baris per baris. Daftar class-class tambahan bisa dilihat pada tabel dibawah ini:

No	Class	Keterangan
1	.table-striped	menghasilkan tampilan belang zebra (tidak berjalan di IE7 dan IE8)
2	.table-bordered	Membuat table border
3	.table-hover	Memberikan effek pada saat hover di baris
4	.table-condensed	Menghilangkan cell padding jadi setengahnya
5	.table-responsive	Untuk menghasilkan tabel yang bisa digulung
6	.active	Memberikan warna pada baris yang sama dengan warna saat hover ke baris
7	.succes	Untuk menampilkan tindakan positive ataupun yang berhasil
8	.info	Untuk menunjukan perubahan atau aksi yang netral
9	.warning	Untuk menampilkan perigatan yang mungkin membutuhkan tindak lanjut
10	.danger	Menunjukan tindakan yang berpotensi bahaya ataupun hasilnya negative

Berikut contoh skrip markup tabel yang menggunakan class-class tambahan.

HTML<table class="table table-bordered table-striped table-hover ">
  <caption>Data User</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>Nama</th>
      <th>User ID</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Vandal Savage</td>
      <td>91223</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Hawkman</td>
      <td>15792</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Hawkgirl</td>
      <td>91912</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Atom</td>
      <td>55379</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Firestrom</td>
      <td>73675</td>
    </tr>
    <tr class="warning">
      <td>6</td>
      <td>Athharkautsar (memakai class="warning")</td>
      <td>84749</td>
    </tr>
    <tr class="active">
      <td>7</td>
      <td>Rip Hunter (memakai class .active)</td>
      <td>75219</td>
    </tr>
    <tr class="info">
      <td>8</td>
      <td>Barry Allen (memakai class .info)</td>
      <td>49150</td>
    </tr>
    <tr class="success">
      <td>9</td>
      <td>Oliver Queen (memakai class .success)</td>
      <td>55370</td>
    </tr>
    <tr class="danger">
      <td>10</td>
      <td>Leonard Snart (memakai class .danger)</td>
      <td>97129</td>
    </tr>
  </tbody>
</table>

Dan hasilnya seperti dibawah ini (klik tombol result jika hasil tidak muncul)

See the Pen tabel dasar menggunakan class tambahan by Athhar Kautsar (@athharkautsar) on CodePen.

Catatan:
Pada bootstrap 3.3.7 belum ada class untuk membuat judul kolom atau isi sel rata tengah (align-center) dan rata kanan (align-right). Untuk mendapatkan hal tersebut, maka kalian harus menambahkan style sendiri.

Cukup segitu untuk artikel Membuat tabel dengan bootstrap, setelah kalian mempelajari cara membuat tabel dengan bootstrap kalian pasti menemukan apa kelebihan bootstrap dalam hal design interface website/blog.

Pengenalan Bootstrap

2017-06-14T06:28:00.000-07:00

Untuk beberapa artikel kedepan saya akan membagikan tutorial dasar bootstrap.-
Bootstrap adalah framework atau tools untuk membuat aplikasi web ataupun website yang bersifat responsive secara cepat, mudah, dan gratis. Kata "Responsive" disini berarti tampilan web (lebar dan susunan isinya) dapat berubah secara otomatis mengikuti lebar layar yang menampilkannya.

Bootstrap terdiri dari CSS dan HTML untuk menghasilkan grid, layout, typography, tabel, form, navigasi dan lain-lain. Di dalam bootstrap juga sudah terdapat Javascript (jQuery plugins) untuk menghasilkan komponen UI yang canti seperti: Transitions, Modal, DropDown, ScrollSky, ToolTip, PopOver, Tab, Alert, Button, Carousel, dll.

Sejarah Bootstrap

Pada tahun 2011, Bootstrap diciptakan oleh dua orang Programmer di Twitter, yaitu Mark Otto dan Jacob Thornton. Pada saat itu, para prommer di Twitter menggunakan berbagai macam tool dan library yang mereka kenal dan senangi untuk melakukan pekerjaan mereka, sehingga tidak ada standarisasi dan akibatnya susah untuk di maintain, kemudian ke-2 manusia tersebut tergerak untuk menciptakan suatu tool / framework yang dapat digunakan bersama linkungan internal twitter.

Sejak diluncurkan pada bulan Agustus 2011, Bootstrap telah berevolusi dari sebuah project yang hanya berbasis CSS menjadi sebuah tool / framework yang lebih lengkap yang juga berisi Javascript Plugin, Icon, Button dll.

Pada Januari 2012, Bootstrap merelease v2.0 yang didalamnya sudah memasukkan fitur responsive layout.

Pada Agustus 2014, Bootstrap mengeluarkan v3.0 yang didalamnya sudah mengakomodasi konsep 'mobile first', artinya didalam pembuata desain web maka kita merancang untuk layar kecil dahulu (handphone), kemudian secara bertahap menambahkan fitur-fitur untuk layar yang lebih besar.

Struktur Folder dan File Bootstrap

Bootstrap dapat didownload secara gratis dari website resminya di http://getbootstrap.com/.

Saat saya menulis artikel ini (Juni 2017), versi terbarunya adalah Bootstrap v3.3.7

Klik untuk memperbesar

Klik tombol Drownload Bootstrap, maka akan tampil halaman download dengan 3 pilihan.

Karena di artikel ini saya hanya menuliskan tutorial dasarnya saja, maka kita klik tombol pilihan pertama (Download Bootstrap)

Klik untuk memperbesar

Setelah di download, lalu unzip/extract file tsb, maka kalian akan mendapatkan struktur folder dan file file didalamnya. (kurang-lebih strukturnya seperti ini)

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

Jika kalian mau memasang bootstrap di blog pakai kode dibawah ini dan letakan diatas kode </head>

HTML<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

lalu salin lagi kode dibawah ini dan letakan diatas kode </body>

HTML<!-- jQuery library (Opsional - jika blogmu udah ada jquery jangan copy js script dibawah ini) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Template dasar HTML dengan Bootstrap

Bootstrap sangat terikat dengan HTML5 dalam membuat sebuah layout halaman web. Oleh karena itu, semakin baik pengetahuan kita mengenai HTML5, maka semakin mudah kita mengimplementasikan Bootstrap.

Biasanya, template dasar HTML5 apabila menggunaka Bootstrap seperti dibawah ini:

HTML<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Untuk pengenalannya cukup segitu dulu. Jika saya sempat, insyaallah besok akan saya lanjut lagi..

Blockquote seperti Arlinadzgn dengan 3 style

2017-06-13T13:12:00.001-07:00

Setelah sekian lama saya ga posting artikel di blog ini dikarenakan satu dan lain hal, akhirnya saya bisa posting lagi di blog ini. Saat saya ada mood untuk blog lagi saya langsung ke blogger.com, saat saya melihat lihat lagi isi artikel blog ini yang dulu saya kok jadi merasa sangat malu ya?😟. Karena saya merasa malu jadi saya hapuslah artikel yang ga terlalu penting menurut saya karena terlalu jelek dan norak hehe..

Back to topik kalian pernah gasih mengunjungi blog punya mbak arlina? kalo pernah pasti tau blockquote yang berwarna biru kan? nah pada kesempatan kali ini saya akan membagikan kode ~~ke-doi~~ blockquote tersebut. Blockquote yang saya bagikan juga memilik 3 style / warna, yaitu warna biru, hijau, dan merah.

Disini saya menggunakan template dari arlinadzgn yang sudah ter-custom blockquote-nya.
Blockquote saya yang ada di template ini tidak seperti punya mbak arlina, dan saya ingin menggantinya menjadi seperti punya mbak arlina.

1. Masuk Template lalu klik "Edit HTML"
2. Klik di box codenya lalu tekan CTRL + F dan tulis "blockquote" seperti dibawah ini:

Klik untuk memperbesar

3. Hapus bagian yang saya highlight diatas.
4. Ganti dengan code dibawah. (pilih salah satu style)

Style 1

CSS blockquote{background:#5194e5;position:relative;padding:55px 20px 20px 20px;color:#fff;margin:10px 0;border-radius:3px}
blockquote:before{position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#5194e5}
blockquote:after{position:absolute;content:'\f027';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgba(255,255,255,.6)}
blockquote a,.post-body blockquote a:hover{color:#fff}
*:focus{outline:0!important}

Style 2

CSSblockquote{background: #2ecc71;position: relative;padding: 55px 20px 20px 20px;color: #fff;margin: 10px 0;border-radius: 3px;}
blockquote:after{position:absolute;content:'\f027';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgba(255,255,255,.6)}
blockquote:before{position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#2ecc71}
blockquote a,blockquote a:hover {color:#fff;}
blockquote a,blockquote a:visited,blockquote a:link,blockquote a:link:hover{color:#fff}

Style 3

CSSblockquote{background: #e74c3c;position: relative;padding: 55px 20px 20px 20px;color: #fff;margin: 10px 0;border-radius: 3px;}
blockquote:after{position:absolute;content:'\f027';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgba(255,255,255,.6)}
blockquote:before{position:absolute;content:'Catatan';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:3px 3px 0 0;color:#e74c3c}
blockquote a,blockquote a:hover {color:#fff;}
blockquote a,blockquote a:visited, blockquote a:link, blockquote a:link:hover{color:#fff}

(Akan saya sertakan demo-nya dibawah artikel.)
5. Lalu save dan lihat hasilnya.
6. Untuk kalian yang memakai template berbeda dan suda di custom blockquotenya silahkan cari sendiri kode css blockquotenya.
7. Dan buat yang belum dicustom silahkan tambahkan salah satu dari kode css diatas ke atas kode ]]></b:skin> atau </style>.

Style 1

Demo
Click here

Style 2

Demo
Click here

Style 3

Demo
Click here

Mengenal Dashboard Blogger

2015-10-09T10:39:00.002-07:00

Dashboard blogger adalah Halaman Pengaturan (Cpanel) dari blog lu guys. Halaman ini berguna untuk mengelola blog yang lu punya. Biar lebih jelas ni yak, simak yok penjelasan dibawah ini

1. Logo Blogger
2. Nama pemilik blog
3. Profil Gmail
4. Tombol buat ubah bahasa
5. Tombol yang isinya bantuan Blogger, tentang versi terbaru dari Blogger, dan lain lain
6. Tombol untuk buat blog baru
7. Kumpulan blog lu
8. Tempat blog yang lu ikutin (Join)

Kalo lu udah punya blog, maka lu akan nemu tampilan kaya gini

Di dalam dashboard blogger terdapat beberapa menu yang bisa kita lihat di bawah ini :

Yang pertama yaitu Entri baru (seperti pada gambar).
Menu tersebut berguna untuk membuat entri baru atau artikel baru yang siap lu publikasikan.
Selanjutnya Ikhtisar.
Menu ini berguna untuk memonitor atau melihat berapa banyak pengunjung blog lu, berapa banyak pos ( artikel ) yang sudah lu buat, berapa banyak komentar yang ada di blog lu dan masih banyak lagi yang lain. Intinya menu ini untuk Menampilkan statistik blog secara ringkas.
Pos ( posting ).
Menu tersebuat berguna untuk Menampilkan semua postingan pada blog lu, yang udah di terbitkan maupun yang belum di terbitkan.
Laman ( page )
Menu tersebuat berguna untuk membuat sebuah halaman atau page, Laman ini bisa juga disebut menu pada blog lu.
Komentar.
Menu tersebut berguna untuk menampilkan semua komentar pada blog.
Google+.
Menu tersebuat berguna untuk menambahkan blog lu ke dalam profil Google+ lu.
Statistik.
Menu tersebuat berguna untuk Menampilkan statistik blog secara lengkap.
Tata Letak.
Menu tersebuat berguna untuk Menampilkan dan mengatur tata letak widget pada blog.
Template.
Menu tersebuat Untuk mengganti atau mengedit template blog.
Setelan.
Menu tersebuat Untuk pengaturan blog yang meliputi bahasa, pos,komentar, dan lain-lain.

Udah ngerti kan?*anggap aja udh ngerti :v, udh sampe sini dulu yak :v, pegel ngetiknya gan :v

Daftar ke blogger

2015-10-09T08:18:00.002-07:00

Yak kali ini gw akan share ke lu, cara daftar ke blogger , tapi sebelum itu lu harus bikin akun Gmail dulu bisa diliat di Sini dan yang belum tau blogger itu apa bisa diliat di Sini.
Dan sekarang gw share cara daftar ke blogger, simak baik baik yak

Tanpa basa - basi lagi, dibawah ini adalah cara-cara nya:

1. Lu harus ke situs Blogger dulu.
2.lalu lu masukkin Email sama Password yang udh lu buat.

3. Kalo muncul halaman konfirmasi profil seperti berikut, maka langsung saja klik tombol Buat Profil Blogger Terbatas

4. Dan lu akan disuruh ngisi nama tampilan buat ntar di blog lu.

5. BOOM lu masuk ke Dashboard blogger :v

Dah sampe sini dulu aja yak :3

Cara membuat akun Gmail

2015-10-09T07:18:00.002-07:00

Yoo whatsup guys, kali ini gw akan share cara daftar akun Gmail / Google mail, sebelumnya gw akan jelaskan Gmail itu apa dan untuk apa.

Gmail adalah layanan surel milik Google.Pengguna dapat mengakses Gmail dalam bentuk surat web HTTPS, protokol POP3 atau IMAP4. Gmail dengan sistem undangan dalam bentuk Beta pada 1 April 2004 dan tersedia untuk publik pada 7 Februari 2007 meski masih menyandang status Beta^. Bersama seluruh produk Google Apps, layanan ini tidak lagi Beta pada 7 Juli 2009.
Dengan kapasitas penyimpanan awal 1 GB per pengguna, Gmail berhasil meningkatkan standar penyimpanan gratis surat web dari 2-4 MB yang ditawarkan para pesaingnya pada waktu itu. Pesan pribadi, termasuk lampiran, dibatasi hingga 25 MB, lebih besar daripada layanan surat web lainnya. Gmail memiliki antarmuak berorientasi pencarian dan "tampilan percakapan" yang mirip dengan forum Internet. Sejumlah pengembang web mengakui Gmail adalah layanan pertama yang memakai metode pemrograman Ajax. Gmail beroperasi dengan Google GFE/2.0 di Linux.Pada Juni 2012, Gmail adalah layanan surat elektronik berbasis web terbesar dengan 425 juta pengguna aktif di seluruh dunia.
Cara membuat akun Gmail adalah sebagai berikut:
1. Lu masuk ke situs Google
2. Terus lu klik Tulisan sebelah kanan atas yang bernama Gmail

3. Abis itu lu bakalan diarahkan ke halaman Ini

4. Lu tinggal klik Buat Akun

5. Dan lu akan disuguhkan dengan formulir apalah itu namanya :v, terus lu isi sesuai identitas lu

6. Kalo udh lu tinggal klik kotak yang didepannya ada tulisan Saya menyutujui blablabla dan tombol warna biru dibawah formulir itu :v

7. Dan tara :v , lu udh berhasil buat akun Gmail, lu klik dah tu tombol warna biru

dah sampe sini dulu aja yak ntar artikel berikutnya gw kasih tau cara daftar ke blogger.

Alasan gw milih blogger sebagai sarana bloging gw

2015-10-08T08:52:00.002-07:00

Blogger? Apaan sih itu? Blogger merupakan situs milik Google yang menyediakan fasilitas Blog gratis. Dengan mendaftar di situs blogger, Kalian dapat membuat blog dengan gratis

Blog juga bisa digunakan untuk catatan pribadi, misalnya untuk membuat diary, catatan pelajaran sekolah, hingga mencari uang. Sebenarnya banyak sekali situs-situs penyedia blog gratis, diantaranya adalah Wordpress, Blogger, Gratisan, Blog, dan masih banyak lagi. Tetapi, mengapa kita harus memilih dan memakai Blogger?? Berikut ini beberapa alasannya:

User friendly

Bloger memiliki banyak fitur yang mudah untuk digunakan terutama oleh pemula.

SEO friendly

Walaupu hampir semua orang menyatakan Wordpress lebih SEO firendly, namun Blogger juga sudah SEO firendly tanpa kita membuat perubahan apapun. Jadi masih sangat sesuai untuk Blogger pemula yang belum mengerti bahasa pemrograman sekali pun.

Aman dan jaerang error

Blogger memiliki fasilitas unlimited bandwidth yang artonya berapapun banyaknya pengunjung kita blog kita akan aman aman saja dan tdak akan dipusingkan dengan tagihan atas Pageload yang menurun kecepatannya.

Kemudahan memposting artikel

Blogger menyediakan fasilitas posting yang mudah aik secara langsung, lewat e-mail, atau lewat sms. kita juga dapat memasukan gambar dari komper atau YouTube ke dalam artikel kita.

Bisa menggunakan JavaScript

JavaScript ini penting sangat penting sekali, karena dengan javascript kita dapat memasukan iklan-iklan, jam, kalender, dan yang lain kedalam blog kita. Nah.. Javascript ini lah yang nanti akan kita bahas.

Kode HTML/Source code-nya terbuka.

Maksudnya kita dapat memodifikasi blog kita seindah mungkin/sesuai keinginan kita.

Pilihan templatenya bermacam macam.

Template adalah background atau latar belakang blog kita.

Dan masih banyak lagi keunggulan Blogger, tetapi yang gw tau hanya segitu, jika ingin mencari keunggulan blogger yang lainnya, silahkan cari di teman baik lu, yaitu google.

Athharkautsar

Cara Membuat Tombol Demo dan Download di Blogger

Cara Membuat Tombol Demo dan Download di Blogger

Memasang Search Form di Blogger

Memasang Search Form di Blogger

Simple Subscription Widget

Simple Subscription Widget

Membuat Subscription Box Seperti Template eL diablo

Membuat Subscription Box Seperti Template eL diablo

Cara Membuat Tag KBD Seperti Arlinadzgn

Cara Membuat Tag KBD Seperti Arlinadzgn

eL diablo Responsive Blogger Template

Tutorial Blogger Lengkap Untuk Pemula

Cara membuat Gmail

Mendaftar ke Blogger

Membuat Blog Baru

Pengenalan Dashboard Blogger.

Membuat artikel di blog

Mengganti template blog

Mengganti favicon blog

Mengganti judul blog dengan logo

Tutorial Blogger lainnya.

Cara Mengatasi Widget Popular Post Yang Tidak Muncul Atau Error

Memasang Widget Social Media Tanpa Font Awesome

Memasang Widget Social Media Tanpa Font Awesome

Membuat Halaman Custom Error 404 di Blogspot

Membuat Halaman Custom Error 404 di Blogspot

Memasang Widget Social Media

Memasang Widget Sosial Media

Memasang widget kategori atau label dengan efek hover keren

Memasang Widget Label Keren di Sidebar Blog

Gambar Responsive dengan Bootstrap

Bentuk tampilan gambar

Navigation Bar Bootstrap

Navbar Dasar

Elemen - elemen didalam navbar

Memposisikan elemen dalam navbar

Posisi Navbar

Membuat table dengan Bootstrap

Markup table yang didukung bootstrap

Style dasar markup table

Untuk style dasar bagi tabel, cukup tambahkan class .table ke dalam tag <table> Contoh:

Class tambahan untuk markup tabel

Pengenalan Bootstrap

Sejarah Bootstrap

Struktur Folder dan File Bootstrap

Template dasar HTML dengan Bootstrap

Blockquote seperti Arlinadzgn dengan 3 style

Mengenal Dashboard Blogger

Daftar ke blogger

Cara membuat akun Gmail

Alasan gw milih blogger sebagai sarana bloging gw

Untuk style dasar bagi tabel, cukup tambahkan class .table ke dalam tag <table>
Contoh: