Jumat, 25 Mei 2018

3 Cara Memasang Unit Iklan Adsense di Blog AMP

Blog Mang Otep | Cara Memasang iklan di AMP (Accelerated Mobile Pages) tidaklah sama dengan template blogger pada umumnya, Halaman AMP ini mempunyai kode tersendiri untuk penempatan iklan dalam sebuah blog. Dalam artikel ini mamang akan membahas cara memasang iklan unit adsense pada widget (sidebar atau header), di dalam artikel, dan di tengah artikel.

Untuk memasang kode unit iklan Adsense pada blog AMP ini yang akan perlukan adalah Data Ad Client dan Data Ad Unit anda. Anda bisa lihat kedua kode tersebut saat pembuatan unit iklan pada dashboard akun adsense kalian, sekarang kita aplikasi kode tersebut dan gabungkan dengan kode adsense AMP yanng penjelasannya selengkapnya bisa kalian lihat di Google AMP atau disini AMP PROJECT.

AMP (Accelerated Mobile Pages) yang sudah mulai merangsak naik daun karena fitur mobile Friendly karena pada saat ini pengguna handphone semakin banyak sehingga optimalisasi penggunaan Halaman Blog dengan support AMP memang sangat di perlukan adanya. Langsung saja inilah tutorial kali ini dari Blog Mang Otep.

3 Cara Memasang Unit Iklan Adsense di Blog AMP :


1. Unit Iklan Widget (sidebar atau Header)


Masuklah ke dalam menu tata letak pada dasboard blog anda dan buat widget baru "HTML/Javascript" dan masukkan kode di bawah ini :

Gunakan height="250" untuk widget sidebar

<amp-ad
layout="fixed-height"
height="250"
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>
Gunakan height="100" untuk widget header

<amp-ad
layout="fixed-height"
height="100"
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

2. Unit Iklan Atas dan Bawah Artikel


Sama seperti yang pertama kalian tinggal copy saja kode unit iklan yang sudah kalian tempatkan pada widget tadi, sekarang tinggal perletakan nya diatur dalam edit HTML pada menu Template.

Letakan kode pada Poin 1 di Atas dan di bawah <data:post.body/> , kode nya akan bisa terlihat seperti ini.

<amp-ad
layout="fixed-height"
height="100"
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>
<data:post.body/>
<amp-ad
layout="fixed-height"
height="250"
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

3. Unit Iklan In-Article Manual (tidak direkomendasikan)


Pada poin ini kalian harus meletakan iklan secara manual saat membuat postingan atau artikel yang akan kalian gunakan, sebenarnya ada lagi cara untuk menerapkan iklan versi AMP ini di tengah artikel dengan menggunakan Auto-Ads, mungkin mamang akan berikan tutorial pada kesempatan berikutnya.

Silahkan Copy kode di bawah ini dan pastekan kedalam artikel di paragraf yang ingin kalian munculkan iklan adsense. Berikut kode nya :


<amp-ad
layout="fixed-height"
height="145"
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-slot="1234567890">
</amp-ad>

Agar semua poin di atas berjalan dengan baik kalian perlu menambahkan javascript yang telah disediakan dan letakkan pada di atas kode </head>


<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Ganti kode di bawah ini dengan kode adsense anda :
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">

Demikian artikel tutorial 3 Cara Memasang Unit Iklan Adsense di Blog AMP dari Blog Mang Otep, semoga bermanfaat. Jika menyukai artikel ini anda bisa like, share, and subscribe untuk mendapatkan artikel terbaru langsung dari email anda.

Kamis, 24 Mei 2018

Cara Menempatkan Keyword (Kata Kunci) Bagian (II)

Blog Mang Otep | melanjutkan pembahasan bagaimana meletakan kata kunci atau keyword di dalam artikel yang baik dan benar sebelumnya pada artikelCara Menempatkan Kata Kunci dalam Artikel (1) sekarang mamang akan bahas kelanjutan yang sudab di janjikan.

Untuk lebih singkat dan jelas sebaiknya anda baca bagian pertama terlebih dahulu. Dan ini bagian selanjutnya yaitu ada 4 poin tambahan adalah sebagai berikut :

Cara Menempatkan Keyword (Kata Kunci) :


4. Menggunakan Internal Link Untuk Menulis Kata Kunci


Selain untuk keyword yang optimal dengan penggunaan link sebagai dasar kata kunci yang akan ditulis dapat juga menguranginefek bounce rate yang tinggi pada artikel blog tersebut.

Penggunaan internal link bisa anda tujukan ke halaman label artikel, home page, ataupun artikel yang berkaitan dengan topik postingan yang akan anda bahas nantinya.

5. Menggunakan Tag Heading Untuk Menempatkan Kata Kunci


Penggunaan Tag Heading untuk kata kunci yang baik adalah dengan mengkombinasikan subheading dan minor heading pada artikel yang akan ditulis.

Ada beberapa peraturan yang menunjukkan penggunaan tag heading sebaiknya adalah sebgai berikut ini :
  1. Tag H1 Wajib ada dan hanya diperbolehkan 1 (satu) saja.
  2. Tag H2 dan H3 untuk setiap halaman maksimal sampai 8,
  3. Untuk H4 - sampai akhir bisa diperbanyak lebih dari aturan di atas.
  4. Jangan Gunakan pengulangan kata pada Tag Heading

6. Menempatkan Kata Kunci Pada Bagian Title, Alt, Dan Judul Gambar.


Pada sebuah artikel tentunya kalian akan memasukan sebuah gambar atau lebih. Sebaiknya dalam pengunggahan gambar ini disertai dengan Alt, title, dan judul pada gambar tersebut.

Teknik ini juga sangat di percaya dapat menambah SEO pada artikel yang akan anda buat. Bila anda tidak menambahkan ketiga atribut tersebut, makan google akan memanggil kalimat secara random pada bagian postingan anda dan bisa saja tidak termasuk kedalam kata kunci yang di maksudkan.

7. Tempatkan Juga Kata Kunci Didalam Meta Description.


Poin yang terakhir adalah penggunaan Meta Description pada sebuah artikel. Dilakukan untuk memfokuskan satu kalimat yang akan ada pada google search atau sosial media saat membagikan artikel anda.

Kolom meta description untuk blogger dapat anda masukan kedalam kotak yang terdapat pada bagian kanan postingan yang menyatu dengan label, geo tag, url artikel, dan pengaturan. Kelola bagian ini sebaik mungkin agar google bisa mengetahui dengan jelas artikel anda tertuju kemana.


Ke 7 poin ini lah yang di rasa mamang sangat penting, semoga bisa membantu anda dalam dunia blogging. Jika ada tambahan lain bisa di satukan kedalam kolom komentar di bawah untuk diskusi bersama.

Demikan info dari Blog Mang Otep tentang artikel Cara Menempatkan Keyword atau Kata kunci pada sebuah artikel yang baik dan benar. Jika menyukainya anda bisa like, share, and subscribe untuk berlangganan artikel terbaru lainnya langsung dari email anda.

Rabu, 23 Mei 2018

Cara Menempatkan Kata Kunci dalam Artikel (1)

Blog Mang Otep | Penempatan Kata Kunci (Keyword) pada sebuah artikel - Saat Memposting sebuah artikel alangkah lebih baik untuk meletakan Kata Kunci (Keyword) pada badan artikel di beberapa tempat. Kegiatan ini dimaksudkan untuk menambah daya gedor SEO On - Page pada artikel tersebut.

Sebelum penempatan Kata Kunci ini dilakukan biasanya seseorang blogger akan mencari kata kunci yang akan digunakan nantinya atau biasa disebut dengan "Riset Keyword", terdapat beberapa info dalam pencarian kata kunci ini misalnya volume pencarian kata kunci dan masih banyak lagi. Banyak cara untuk riset keyword ini dari menggunakan tools online yang gratis hingga yang berbayar pun banyak disediakan.

Pada kesempatan kali ini mamang akan berupaya untuk memberikan beberapa daftar (List) dimana saja dan bagaimana anda bisa meletakan Kata Kunci dalam artikel atau postingan. Untuk mendapatkan hasil yang maksimal, silahkan anda baca hingga selesai daftarnya di bawah ini.

Cara Menempatkan Kata Kunci dalam Artikel :

 

1. Memasang Kata Kunci Pada Judul Postingan.

Judul adalah tempat paling utama untuk menempatkan kata kunci, ini tidak boleh diabaikan untuk para blogger sekalian. Buatlah Judul dengan kata Kunci yang relevan dan juga usahakan untuk meletakan pada awal kalimat judul postingan.

Dalam pembuatan judul itu sendiri sebenarnya ada beberapa aturan yang harus kita ketahui bersama terlebih dahulu sebagai berikut :
  • Usahakan tidak membuat kata kunci sama dengan judul
  • Gunakan Kata kunci 3 sampai 7 Suku kata
  • Jangan membuat judul yang sama dalam 1 blog, itu akan memberikan dampak duplicate konten oleh google dan tidak baik dalam mesin pencari.
  • Judul harus sesuai dengan isi artikel.

2. Meletakan Keyword pada bagian URL artikel

Penulisan URL sering kali kita abaikan dalam pembuatan postingan, padahal URL sangatlah penting dalam mesin pencari. Usahakanlah menggunakan URL yang mengandung kata kunci dan sependek mungkin sehingga mudah di ingat. Contohnya seperti ini :

Contoh OKeh
Judul Artikel : Cara Membuat Nasi Goreng yang Enak
URL : www,indikator-pemikiran,com/2018/05/membuat-nasi-goreng.html

Contoh Non-OKeh
Judul Artikel : Cara Membuat Nasi Goreng yang Enak
URL : www,indikator-pemikiran,com/2018/05/cara-membuat-nasi-goreng-yang.html

3.  Penyebaran Kata Kunci dalam paragraf dalam artikel.

Untuk memperkuat Kata Kunci kalian sebaiknya dapat menyebarkan secara merata dan tidak menumpuk dalam satu paragraf saja. Penyebaran ini ditujukan agar tidak terkena "Keyword Spamming" atau "Stuffing Keyword".

Untuk penyebaran yang baik pula disini ada beberapa tips untuk penggunaan penyebaran kata kunci yang baik dan lebih mudah dilakukan yaitu :
  1. Siapkan long tail Keyword sebanyak mungkin contoh : "yang Enak" "Yang Renyah" "Gampang" dalam kata kunci "Membuat Nasi Goreng".
  2. Carilah beberapa persamaan kata untuk kata kunci yang anda gunakan.
  3. Hitung jumlah kata kunci yang anda letakan dalam artikel, sebaiknya berbanding sekitar 5% dari jumlah keseluruhan postingan.

Sebenarnya masih banyak lagi beberapa cara penempatan yang bisa anda lakukan dalam pengotimasian SEO yang akan kita pelajari nanti bersama - sama, untuk saat ini artikel saya cukupkan sampai disini saja. Saya akan bahas kelanjutannya pada artikel selanjutnya, atau anda bisa visit link ke : Cara Nenempatkan Kata Kunci Bagian 2

Jika menyukai artikel Cara Menempatkan Kata Kunci dalam Artikel ini anda bisa like, share, and subscribe untuk mendapatkan artikel terbaru dari Blog Mang Otep langsung dari email anda. Salam Blogger dan Happy Blogging.

Selasa, 22 Mei 2018

Cara Membuat Gambar Post di Atas Judul (First Image)

Cara Membuat Gambar Post di Atas Judul (First Image)
Blog Mang Otep | Sempat bingung dengan Cara Membuat Gambar (Thumbnail) berada di atas judul artikel pada body postingan, Gambar (First Image) ini sebenarnya berkonsep keluar dari body sebuah postingan tersebut jadi perlu kode yang akan di tambahkan.

Di kesempatan kali ini saya akan membagikan bagaimana sih membuat Gambar atau Thumbnail Pertama pada postingan kita bisa berada di atas judul ya kira-kira akan menjadi seperti Arlina design atau bung frangki kurang lebih.

Keuntungan dari Penggunaan Cara ini adalah anda bisa meletakkan Iklan adsense tepat sebelum kata pertama pada sebuah artikel atau bisa disebut diatas postingan. Sehingga slot iklan kalian bisa bertambah tanpa harus merubah template yang sudah kalian kuasai. Ok langsung saja lihat tutorialnya di bawah ini.

Gambar Keluar dari Body Postingan :

1. Masuk Ke Menu Template >> Edit HTML
2. Masukkan Kode CSS dibawah ini untuk pengaturan tampilan nya. dan letakkan diatas ]]></b:skin> atau </style>

.firstimage{
  background:#fff;
  padding-bottom:10px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover
}
3. Cari kode <b:if cond='data:post.link'> (Permudah dengan menggunakan CTRL+F)
4. Letakkan Kode di bawah ini tepat di atas perintah No. 2 , Kemungkinan akan ada banyak jadi coba saja satu persatu.

<b:if cond='data:blog.pageType == "item"'><div class='coverImage'>
<b:if cond='data:post.firstImageUrl'><img class='firstimage' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/><b:else/><img class='firstimage' expr:alt='data:post.title' src='URL_GAMBAR_NOIMAGE'/></b:if></div>
</b:if>
5. Setelah selesai, Masukkan kode Javacript ini di atas kode </body>

<script type="text/javascript">
//<![CDATA[
$(function() {
   $(".separator:first").remove();
      $(".post-body > img:first").remove();
                      });
//]]>
</script>
6. Simpan Template Kalian

Itulah sedikit tutorial kali ini dari Blog Mang Otep, untuk live demo nya silahkan lihat pada postingan ini sudah diterapkan di blog mamang sendiri. Bila kurang mengerti bisa tanyakan lewat halaman kontak atau hubungi fb admin.

Demikan info dari artikel Cara Membuat Gambar Post di Atas Judul (First Image), semoga bermanfaat untuk anda dan jika menyukai artikel ini silahkan like, share, and subscribe untuk berlangganan artikel terbaru langsung dari email anda.

Senin, 21 Mei 2018

Daftar Harga HP Sony Xperia Z Series Juni 2018 Lengkap

Blog Mang Otep | Artikel ini menampilkan Daftar dari Harga HP Sony Xperia Z Series terbaru yang lengkap dan harga yang tertera telah di perbaharui (update) terakhir pada bulan April, Mei, Juni 2018. Seri Z ini akan menampilkan harga dari Sony Xperia ZR, Z5, Z4, Z3, Z2, dan Z1 serta tidak ketinggalan yaitu Z LTE.

Seperti yang anda tahu semua bahwa handphone pabrikan dari Sony di kenal sangat handal di segala medan dan berkualitas tinggi, hal tersebut di buktikan dengan banyak nya kita jumpai Handphone Sony di tengah gempuran produk baru yang muncul.

Hal Di atas juga di dukung dengan fasilitas yang Sony berikan kepada kustomer yang terbilang cukup baik dalam pelayanannya, sehingga kustomer dapat dengan mudah mengeluhkan jika ada permasalahan pada handphone mereka.

Dalam segi desain dan perancangan, Sony Xperia telah berhasil menemukan sebuah inovasi yang dikembangkan secara khusus untuk handphone Sony yang memungkinkan sinkronisasi antara perangkat lunak dan perangkat keras default mereka yang khas.

Daftar Harga HP Sony Xperia Z Series 2018 :

Tipe Handphone Sony Harga Baru Harga Bekas
Sony Xperia ZR C5502 Rp 3.600.000 Rp 2.800.000
Sony Xperia Z5 Premium Rp 8.900.000 Rp 7.800.000
Sony Xperia Z5 Rp 6.200.000 Rp 5.500.000
Sony Xperia Z5 Premium DUAL Rp 11.800.000 Rp 10.000.000
Sony Xperia Z5 Dual Rp 8.499.000 Rp 7.000.000
Sony Xperia Z5 Compact Rp 5.700.000 Rp 5.000.000
Sony Xperia Z4v Rp 9.499.000 Rp 8.000.000
Sony Xperia Z3+ Rp 7.200.000 Rp 6.000.000
Sony Xperia Z3+ DUAL Rp 3.229.000 Rp 2.600.000
Sony Xperia Z3 D6653 Rp 2.200.000 Rp 1.700.000
Sony Xperia Z3 Compact D5803 Rp 6.350.000 Rp 5.500.000
Sony Xperia Z2 D6503 Rp 6.750.000 Rp 6.000.000
Sony Xperia Z1 Compact D5503 Rp 5.150.000 Rp 4.000.000
Sony Xperia Z1 C6903 Rp 5.500.000 Rp 4.800.000
Sony Xperia Z LTE C6603 Rp 4.000.000 Rp 3.000.000

Demikianlah info dari Blog Mang Otep tentang artikel Daftar Harga HP Sony Xperia Z Series Juni 2018 Lengkap, semoga bisa menjadi referensi anda dalam nemenukan solusi terbaik untuk konsumsi digital anda.

Data dan daftar harga di atas tidaklah akan sama persis dengan didaerah anda, dan jika terjadi hal demikian, sekiranya tidak akan berbeda terlalu jauh dari harga di atas. harga di atas di ambil dalam wilayah JABODETABEK dan sekitarnya.

Pastikan konfirmasi kebenaran harga untuk detail langsung ke gerai Sony atau ke toko gadget terdekat didaerah anda. Jika menyukai artikel ini anda bisa langsung klik like, share, and subscribe untuk berlangganan langsung artikel terbaru dari blog mamang ini ekslusif dari email anda. Terimakasih.

Minggu, 20 Mei 2018

Cara Membuat Tombol Demo dengan Gradien Warna

Cara Membuat Tombol Demo dengan Gradien Warna
Blog Mang Otep | Cara Membuat Tombol Demo dengan Gradien Warna - Gradien warna (Color) untuk CSS yang sekarang sedang booming bagi kalangan blogger karena tampilannya yang unik dengan pergantian warna yang bisa diatur dengan sangat mudah.

Kali ini mamang akan membagikan kode Cara Membuat Tombol Demo dan Download dengan Gradien Warna yang mana mamang sudah pernah share dengan gaya yang jadul pada artikel sebelumnya di Cara Membuat Tombol Download & Demo Simpel di Blog.

Bedanya apa mang dengan yang dulu ? bedanya terletak pada tampilan full width dan juga yang dahulu tidak menggunakan gradien color jadi karena mamang ingin ikutan yang lain sehingga mamang kasih tutorial ini (biar tidak ketinggalan jaman lah ya). Langsung saja tanpa wara - wiri lagi, yuk simak tutorialnya.

Cara Membuat Tombol Demo dengan Gradien Warna :

1. Masuk ke dashboard blogger anda
2. Menuju Menu Template dan pilih Edit HTML
3. Copy Kode Dibawah ini ]]></b:skin> atau </style>.


/* CSS Button Style by mangotep.com */
.button2{width:90%;list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download2,.button2 li a.premium{display:block;position:relative;padding:15px 48px 15px 16px;background:#f39c12,#3498db;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.button2 li a.download2{background:#3498db,#f39c12}
.button2 li a.premium{background:#d234db,#f39c12}
.button2 li a.demo:hover,.button2 li a.download2:hover,.button2 li a.premium:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download2:active,.button2 li a.premium:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download2:after,.button2 li a.premium:after{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px;font-family:fontawesome}
.button2 li a.download2:after{content:'\f019'}
.button2 li a.premium:after{content:'\f155'}
.mangotepPelangi {
    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);
    background-size: 500% 500%;
    -webkit-animation: mangotepGradient 12s ease infinite;
    -moz-animation: mangotepGradient 12s ease infinite;
    animation: mangotepGradient 12s ease infinite;
}
@-webkit-keyframes mangotepGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes mangotepGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes mangotepGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

4. Untuk penggunaannya, anda tinggal masukkan HTML dibawah ini setiap kali ingin membuat tombol download dan demo pada artikel anda.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
<div style="text-align: center;">
  <ul class="button2">
    <li><a class="demo mangotepPelangi" href="https://www.mangotep.com/" target="_blank">Link Demo</a></li>
    <li><a class="download2 mangotepPelangi" href="https://www.mangotep.com/" target="_blank">Link Download</a></li>
    <li><a class="premium mangotepPelangi" href="https://www.mangotep.com/" target="_blank">Source Theme</a></li>
  </ul>
</div>
<div class="clear"></div>
Untuk pengaturan warna pada gradien yang akan di buat anda bisa berkunjung ke blog igniel sebagai tutorial dasar untuk membuat gradien color pada blog anda.

Demikianlah mamang share artikel Cara Membuat Tombol Demo dengan Gradien Warna, semoga bermanfaat untuk anda. Jika menyukai artikel ini anda bisa like, share, and subscribe blog ini untuk mendapatkan artikel terbaru langsung dari email anda.

Sabtu, 19 Mei 2018

Style Kertas Lipat Kotak Pesan (Warning, Info, dan Tips)

Style Kertas Lipat Kotak Pesan (Warning, Info, dan Tips)
Blog Mang Otep | Pada artikel sebelumnya sempat di bahas bagaimana Cara Membuat Kotak Peringatan, Tips dan Info di Blogspot dan pada kesempatan kali ini mamang akan memberikan alternatif desain lain untuk Kotak Pesan tersebut.

Kotak Pesan yang dimaksudkan dalam hal ini berisi 3 bagian yaitu Kotak Peringatan, Kotak Info, dan Kotak Tips. Sebenarnya bisa saja anda tambahkan bagian lainnya dengan mengubah CSS yang nanti akan mamang sediakan di bawah.

Kotak ini ditambahkan pada blog agar para pengunjung artikel kita mengetahui bahwa ada beberapa konten yang harus di cermati dengan teliti sehingga pengunjung tidak luput dari "Pesan" Tersebut dengan membuat gaya yang berbeda dengan artikel dasar. Langsung saja lihat kode CSS dan Demo nya dibawah ini :

Style Kertas Lipat Untuk Kotak Pesan :

1. Pasanglah Kotak Pesan ini sesuai dengan Link Tutorial yang sudah saya sertakan pada paragraf awal tadi dan ganti CSS tersebut dengan CSS di bawah ini:

/* CSS Note by Mang Otep */
.warning, .info, .tips{
  position:relative;
  width:90%;
  padding:1em;
  margin:0.5em auto;
  color:#000;
  background:#2ecc71;
  overflow:hidden}
.warning{background:#f39c12}
.info{background:#F2784B}
.tips{background:#3498db}
.warning:before, .info:before, .tips:before{
  content:"";
  position:absolute;
  top:0;right:0;
  border-width:0 16px 16px 0;
  border-style:solid;
  border-color:#fff #fff #27ae60 #27ae60;
  background:#27ae60;
  box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);
  display:block;
  width:0}
.warning:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.info:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.tips:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

2. Setelah anda selesai mengganti CSS tersebut maka tampilan "Kotak Peringatan" akan berubah (ini berlalu hanya jika anda mengikuti tutorial sebelumnya)

Blog Mang Otep berisi Tips blogging, optimasi SEO, Berita Teknologi Terbaru dan Lifestyle yang disajikan dengan gaya bahasa sendiri
Blog Mang Otep berisi Tips blogging, optimasi SEO, Berita Teknologi Terbaru dan Lifestyle yang disajikan dengan gaya bahasa sendiri
Blog Mang Otep berisi Tips blogging, optimasi SEO, Berita Teknologi Terbaru dan Lifestyle yang disajikan dengan gaya bahasa sendiri

Aturlah lebdar dan jarak antara ketiga elemen di atas sehingga cocok dengan template anda, dan juga jangan lupa atur warna yang ingin ditampilkan dengan mengganti #f39c12 , #F2784B , #3498db yang mana contoh warna HTML anda bisa lihat di HTML Color Picker

Demikian Info kali ini dari Blog Mang Otep tentang artikel Style Kertas Lipat Untuk Kotak Pesan (Peringatan, Info, dan Tips), semoga bermanfaat untuk anda. Jika menyukai artikel ini silahkan anda klik like, share, and subscribe untuk mendapatkan postingan terbaru langsung dari email anda.