Cara Membuat Tombol Subscription Youtube di Blogspot

Widget

Cara Membuat Tombol Subscription Youtube di Blogspot

Amir   8/02/2017   Disqus  

Untuk yang memiliki Channel Youtube mungkin pembuatan tombol subscription  sangatlah berguna buat Anda. Salah satunya untuk meningkatkan view di Channel Anda dalam memperbanyak jumlah pelanggan atau subscription.

Tanpa basa-basi, ikuti saja langkah-langkah berikut ini :

STEP 1 - Google Developers

1. Silahkan kunjungi Lama Google Developers
2. Lalu Search Produck 
3. Ketikan Youtube Subscription  Button

STEP 2 - Configure a Button

1. Setelah itu silahkan klik Configure a Button
2. Atur tampilan Tombol Subcribe sesuai keinginan Anda di Options

Keterangan dari Gambar Configure a Button :

No.	Keterangan
1. Channel ID	Nama ID di Channel Anda
2. Layout, Thema dan Subcriber Count	Mengatur tampilan tombol subcriber Anda
3. Preview	Tampilan tombol subcriber yang telah Anda atur
4. Code	Kode script yang akan dipasang di blog Anda

Langkah terakhir Anda bisa Copy-Paste Code tersebut di Edit Html atau Add widget.

Cara Membuat Tabel Flat Responsive untuk Blog

Widget

Cara Membuat Tabel Flat Responsive untuk Blog

Amir   7/29/2017   Disqus  

Halo Aibou (あいぼう). Hari ini membuat Tabel Flat Responsive dengan CSS dan HTML diblog Anda.  Tebel ini sangat berguna untuk memberikan keterangan dalam suatu artikel seperti harga, komponen atau spesifikasi suatu barang.

Lalu untuk pemasangannya silahkan ikuti cara dibawah ini:

STEP 1 -  Memasang CSS di Edit HTML

1. Template > Edit HTML
2. Lalu masukan kode dibawah ini sebelum kode </style>

CSS
/* CSS Post Table Flat Responsive */ 
table{border-collapse:collapse;border-spacing:0;}
.post-body table td {border:1px solid #e9e9e9;padding:12px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #f14235;padding:12px;text-align:left;vertical-align:top;background:#f44336 !important;color:#fff}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body th{background:#fff;font-weight:499;text-transform:uppercase;font-size:16px}
table {max-width:100%;width:100%;margin:1.6em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:50%}
table.columns-4 td.columns-cell{width:30%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body td img, .post-body th img {list-:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container img, .post-body table.tr-caption-container img, .post-body img {list-:none;max-width:100%;height:auto;padding:0 !important;margin:0 !important}
.post-body table.tr-caption-container td {border:none;padding:0 !important;margin:0 !important}
.post-body table caption{max-width:100%;height:auto;border:none !important;padding:0 !important}
.post-body img.video-thumbnail,.youtube-thumb{visibility:hidden !mportant;display:none !important;height:0}

STEP 2 - Menampilkan Table

1. Menu Posts / Postingan
2. Lalu masuk ke Halaman pembuatan Artikel
3. Pilih tombol HTML disamping Compose
4. Copy-Paste kode dibawah ini di Halaman Artikel Anda

HTML
<table cellpadding="0" cellspacing="0"><tbody>
<tr><th>Table Header 1</th><th>Table Header 2</th>    <th>Table Header 3</th></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
<tr><td>Menu 1</td><td>Menu 2</td><td>Menu 3</td></tr>
</tbody> </table>

Untuk tulisan Table Header 1,2,3 adalah bagian keterangan paling atas silahkan ganti sesuai keinginan Anda.
Untuk tulisan Menu 1,2,3 adalah bagian keterangan dibawah.

Terima kasih telah berkunjung di Artikel saya, kalo ada yang masih kurang jelas silakan Comment dibawah ini atau PM saya di Akun FB atau Email.

Cara Mengubah Tanda Numbered List Menjadi Menarik pada Blog

Widget

Cara Mengubah Tanda Numbered List Menjadi Menarik pada Blog

Amir   7/24/2017   8 Disqus  

Halo Aibou (あいぼう).  Kali ini Saya akan membagikan tutorial mengubah tanda  Numbered List default menjadi lebih menarik.
Untuk langkah-langkanya Anda bisa ikuti cara dibawah ini :

STEP 1 - Memasang CSS di Edit HTML

1. Login Akun Blogger Anda. 
2. Pilih Template > Edit HTML. 
3. Lalu tambahkan kode dibawah ini sebelum </Style>
4. Setelah itu Simpan Tema

CSS
/* Number list */
ol{counter-reset:li;list-style:none;font:14px 'Open Sans','lucida sans';padding:0;margin-bottom:1.5em;text-shadow:0 2px 0 rgba(255,255,255,.5)}
.post ol li:hover{background:#fafafa}
.widget .post-body li{margin-bottom:.26em;margin-left: 34px;padding-top:0;padding-bottom:0}
.post ol li{position:relative;display:block;padding:.6em .6em .6em .9em;margin:.5em 0 .5em 2.5em;background:#fff;color:#6d6d6d;text-decoration:none;transition:all .3s ease-out}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.6em;top:51%;margin-top:-1em;background: style="color: white;">#7d5a4d;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold}
.post ol li:hover:after{left:-.6em;border-left-color: style="color: white;">#7d5a4d}
.post ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .4s ease-o

Untuk tulisan putih adalah warna dari kotak  pada Numbered List silahkan diganti sesuai dengan keinginan Anda.

STEP 2 - Menampilkan Numbered List di Artikel

1. Silahkan pergi ke Menu Postingan.
2. Lalu di Halaman kerja. Block artikel.
3. Pilih Numbered List di Menu Tab.
4. Lalu Cek dengan  Pratinjau.

Mungkin itu saja cara singkat membuat Numbered List, Selamat mencoba dan apa bila  ada yang ingin di tanyakan, silahkan Comment atau Contact saya di Akun Facebook.

Cara Buat Menu Sidebar Mirip PanduanIM

Widget

Cara Buat Menu Sidebar Mirip PanduanIM

Amir   7/23/2017   11 Disqus  

Aibou (あいぼう).  Bagi Anda yang ingin mempercantik tampil blog dengan Sidebar seperti PanduanIM. Saya akan memberikan tutorial untuk memasang di blog Anda.

Silahkan ikuti cara yang ada dibawah ini:

STEP 1 -  Memasang CSS di Edit HTML

1. Login Akun Blogger Anda.
2. Lalu pilih Template > Edit HTML.
3. Cari kode </style> [Ctrl + F].
4. Lalu letakan kode dibawah ini sebelum </style>.
5. Lalu klik Simpan Template

CSS
/*SIDEBAR PANDUANIM*/

.sidebar-membuatblog {
    background: url('http://panduanim.com/wp-content/uploads/2015/01/Membuat-Blog.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:5px;
}
.sidebar-membuatblog:hover {
 background-size: 120% auto;
}
.sidebar-strategiblog {
    background: url('http://panduanim.com/wp-content/uploads/2015/06/Tips-Blog.jpg') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:5px;
}
.sidebar-strategiblog:hover {
 background-size: 120% auto;
}
.sidebar-jualanonline {
    background: url('http://panduanim.com/wp-content/uploads/2015/06/Jualan-Online.png') no-repeat 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:5px;
}
.sidebar-jualanonline:hover {
 background-size: 120% auto;
}
.sidebar-kontenpenjualan {
    background: url('http://panduanim.com/wp-content/uploads/2015/08/Konten-untuk-Meningkatkan-Penjualan.png') no-repeat 50% 50%;
    background-size: 100% auto;
    height: 100px;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 5px;
    margin-bottom:5px;
}
.sidebar-kontenpenjualan:hover {
 background-size: 120% auto;
}

Pada bagian tulisan berwarnah putih adalah Link Gambar yang bisa Anda ganti dengan gambar yang sesaui dengan blog Anda

STEP 2 -  Memasang HTML/Javascript di Tata Letak

1. Masuk Tata Letak.
2. Lalu tambahkan Gedget di bagian Sidebar.
3. Pilih HTML/Javascript.
4. Letak kan Kode dibawah ini pada bagian Konten
5. Klik Simpan (Save)

HTML
<a href="http://www.klikdanbo.com" target="_blank"><div class="sidebar-membuatblog"></div></a>
<a href="http://www.klikdanbo.com" target="_blank"><div class="sidebar-jualanonline"></div></a>
<a href="http://www.klikdanbo.com" target="_blank"><div class="sidebar-kontenpenjualan"></div></a>
<a href="http://www.klikdanbo.com" target="_blank"><div class="sidebar-strategiblog"></div></a>

Result

Mungkin cukup sekian dari atikel ini semoga bermanfaat dan terima kasih atas kunjungannya :)

Sumber : ladaskipzen[dot]logspot[dot]com

Cara Mudah Membuat RSS FEED di Feedburner dan Menampilkan di Blog

TipsdanTrik Tool Widget

Cara Mudah Membuat RSS FEED di Feedburner dan Menampilkan di Blog

Amir   7/16/2017   1 Disqus  

Cara Mudah Membuat RSS Feedburner dan Menampilkan di Blog Halo Aibou (あいぼう).

RSS Feed adalah  sebuah aplikasi web yang mengizinkan Anda untuk berlangganan ke situs blog penyedia dan aplikasi ini akan mengirim secara otomatis ke akun email  Anda .

Nah, langsung  saja  ikuti langka-langka di bawah ini cara membuat RSS Feed;

1.0 Membuat  RSS Feed di Feedburner.

1. Silahkan buka link FeedBurner
2. Login dengan Akun Email Anda.
3. Lalu Akan muncul tampilan form seperti dibawah ini;
4. Lalu masukan Link Blog Anda, biarkan 'Im a podcaster' tidak tercentang.
5. Tekan Tombol Next.

1. Pada halaman Identify Feed Source
2. Pilihlah yang paling atas
3. Lalu Next

1. Masukan Alamat Feed  untuk bagian url belakang  yang masih tersedia 
2. Lalu Next

1. Selanjutnya pilih Skip Direct

1. Lalu pilih Menu Tab Publicize

1. Pilih Email Subcription pada bagian sebelah kiri layar Pc Anda

1. Terakhir pilih tombol Activate

1. Maka akan muncul tampilan seperti di bawah ini,menandakan bahwa RSS Feed Anda Berhasil!!
2. Selanjutnya Anda tinggal meng-Copy Paste yang terdapat di feedburner Anda

2.0 Cara Menampilkan FeedBurner di Blog

1. Masuk ke Dasbor blog Anda
2. Lalu pilih Tata Letak
3. Add widget 
4. Lalu Pilih HTML atau RSS Feed
5. Copy-Paste yang telah Anda Copy di Feedburner

Cara Mudah Memasang Box Catatan/Blockquote di Post Blogger

Widget

Cara Mudah Memasang Box Catatan/Blockquote di Post Blogger

Amir   7/03/2017   Disqus  

Cara Mudah Memasang  Box Catatan atau Blockquote di Post Blogger | Halo Aibou (あいぼう). Hari ini saya akan memberikan tutorial cara memasang box catatan di post blogger.

Mungkin Anda telah sering melihat box catatan diatas yang sering dipake untuk menghiasi tampilan post blog agar keliatan lebih menarik.

Nah untuk pemasangannya sangatlah mudah cukup mengganti/menghapus kode CSS Blockquote default yang ada pada template Anda. Untuk menggantikan/menghapus silahkan ikuti cara berikut ini.

1.0 Memasang Box Catatan

1. Seperti biasa,Anda harus masuk ke Dasbor Template/Tema ,lalu klik Edit Html
2. Lalu selajutnya tambakan kode dibawah ini sebelum kode </Style>

CSS
/*Blockquote Catatan*/
.post blockquote {
   text-align: left;
   background: #6591c2;
   position: relative;
   display: block;
   padding: 55px 20px 20px;
   color: #fff;
   margin: 10px 0;
   border-radius: 3px;
}
.post 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: #6591c2;

}
.post 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);
}

Jika Box Catatan Anda tidak muncul pada post, silahkan perhatikan Css Blockquote Default di Dasbor Template/Tema Anda. Contoh: .post blockquote menjadi .post-body blockquote (Default)

 Selanjutnya tinggal Save, Lalu masuk  ke Dasbor Pos untuk menampilkan Box Catatan.

2.0 Menampilkan Box Catatan

1. Pertama Block Text terlebih dahulu.
2. Kedua pilih Blockquote pada menu bar diatas disebelah kanan Anda.

Nah, mungkin itu saja tutorial memasang Box Catatan. Sekian dari artikel ini, semoga bermanfaat dan sukses selalu buat kalian semua.lu buat kalian semua.