Postingan

Cara Memasang Widget Label Tertentu dengan Thumbnail/Gambar di bawah Postingan Blogger

Gambar
Tutorial kali ini tentang cara membuat widget label atau kategori tertentu dengan thumbnail yang akan diletakkan di bagian bawah postingan. Unsur script untuk pembuatan widget ini sudah valid HTML5, sehinggal anda tidak perlu khawatir akan error script yang bakal terjadi saat memasangnya. Widget ini akan menampilkan artikel terbaru dari masing-masing label yang dipilihkan. Cocok digunakan pada blog magazine dan blog personal. Jika tertarik memasang widget ini, silahkan ikuti tutorialnya berikut. Cara Memasang Widget Label Tertentu dengan Thumbnail/Gambar di bawah Postingan Blog 1. Login ke blogger, masuk ke dashboard blog anda, lalu klik pada menu Template > Edit Template. 2. Cari kode </style> atau </b:skin> lalu letakkan kode CSS berikut ini tepat di atasnya. /* Recent By Label */ #tag1, #tag2{margin:0;padding:0 0 30px;width:100%} #tag1-wrapper h2,#tag2-wrapper h2,#tag1-wrapper h3,#tag2-wrapper h3 {color:#333;text-transform:capitalize;font-size:140%;font-weight:400...

Cara Membuat Tabel Keterangan Rensponsive di Blogger

Gambar
Tutorial blog kali ini tentang cara membuat table keterangan di blogspot atau blogger seperti yang demonya anda dapat lihat pada laman Pasang Iklan di blog ini.  Kalau anda pengguna template blog +Arlina Fitriyani pasti anda sudah melihat tata letak tabel keterangan template yang ada di blog tersebut.  Table keterangan ini berguna mempermudah pengunjung untuk melihat fitur apa saja yang terdapat pada template tersebut. Selain untuk keterangan fitur template, tabel ini juga dapat anda terapkan untuk membuat keterangan lainnya, misalnya keterangan untuk bisnis online , klasemen bola atau motoGP dan lain sebagainya. Berikut ini contoh penggunaan tabel untuk keterangan sebuah bisnis online: Detail: RevenueHits Website URL url here Tipe jaringan CPM, CPC, CPA Tipe iklan Banner, Rich media, pop up/under, text Metode pembayaran Paypal, Wire Transfer, Payoneer Minimal Payout Paypal $20, Wire transfer $500, Payoneer $20 Fill rate 100% Frekuensi pembayaran NET ...

Tutorial Cara Membuat Artikel Terkait Yang Rensponsive dan Keren

Gambar
Kali ini saya akan Berbagi tentang Related Post yang keren dan Bagus punya Mirip Punya Bung frangki dan Jalan tikus. Keunggulan nya akan meningkat User Experience dan Mengurangi Bounce Rate, tentunya juga bikin blog kamu makin keren! :) Bagi yang ingin membuat related pos seperti yang saya gunakan di blog ini, silahakn ikuti caranya berikut. Tutorial Cara Membuat Artikel Terkait Yang Rensponsive dan Keren Cara membuat Related Post (DTE) dua kolom dengan thumbnail Silahkan masuk ke Edit HTML, lalu tambahkan CSS berikut ini di atas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; <b:if cond='data:blog.pageType == &quot;item&quot;'> /* css related posts DTE */ #related-wrapper{margin:auto;padding:0 20px} .related-post h4{margin:30px 4px 15px 4%!important;font-size:22px;text-transform:capitalize;font-weight:normal;padding:0;color:#444} .related-post{margin:0 0 0 -4%;padding:0;font-size:13px;text-align:left;box-sizing:border-box} .related-post...

Optimasi SEO Onpage Agar Sesuai dengan Social Media

Gambar
Dengan perkembangan dunia SEO Onpage dalam beberapa bulan ini, ada perubahan dalam sistem algoritma Google Fred, maka dari itu ada baik nya juka kita upgrade juga kemampuang SEO Onpage kita dengan teknik Open Graph, ini dia cara nya : Memasang atau mengetahui Admin ID dan FB App ID untuk poperti meta tag blog  itu sebetulnya cukup penting. Sebab property ini akan menghindari terjadinya error pada tools debug object Facebook, pada setiap artikel di blog/website. Kurang lebih model property meta tag tersebut seperti ini: <meta content='XXXXX' property='fb:app_id'/> <meta content='XXXXX' property='fb:admins'/> Cara mendapatkan ID fb:app_id dan fb:admins itu berbeda caranya. Untuk tutorial kali ini, saya akan awali dengan cara mengetahui Facebook App ID (fb:app_id), kemudian akan dilanjutkan dengan Facebook Admin ID (fb:admins). Cara mendapatkan Facebook App ID (fb:app_id) Sebelum melakukan langkah-langkah ini, pastikan Anda sudah login ke akun F...

Cara Memasang Tombol Back To Top Rensponsive Keren dan Ringan

Gambar
Bagi kamu yang ingin ada tombol back to top ini sangat berguna dalam meningkatkan Kenyamanan Pengunjung blog anda dan mengurangi Bounce Rate anda Walaupun tombol ini cukup sederhana, tetapi menurut Saya terasa sangat menarik dan minimalis.  Tombol ini nantinya akan muncul di pojok bawah kanan blog Anda.  Oke! Langsung saja kita menuju tutorial  Cara Memasang Tombol Back To Top Rensponsive Keren 1. Login ke Blogger > Klik Template > Edit HTML > Tambahkan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style> /* Back To Top */ .backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;disp...

Cara Memasang Tombol Rensponsive di Blogger

Gambar
Memasang Slide Button di Blog - Jika kamu ingin punya button di artikel atau dalam halaman tertentu, disini saya akan kasih cara nya dengan meletakan kode CSS saja, berbeda dengan yang lain, button ini menggunakan efek "hover" dan "inset" sederhana sehingga tidak akan membebani kinerja blog. Ok singkat saja kita langsung saja ke tutorial : 1. Simpan CSS Ini Diatas </style> #wrap {margin:20px auto;text-align:center;} a.btn {display:inline-block;position:relative;font-family:'Open Sans',sans-serif;text-decoration:none;font-weight:700;background:#30abd5;letter-spacing:.5px;padding:10px 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;} a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;} a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;} a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd...

Tutorial Cara Memunculkan Thumbnail Pada AMP HTML Blogger

Gambar
Pasti anda sudah tahu bukan dalam dunia SEO Dan Google, kita kembali dikejutkan dengan AMP Alias Accerate Mobile Pages Sebagaimana kita ketahui, bahwa tag  img pada AMP HTML berubah menjadi  amp-img . Apabila kita menuliskan pada postingan seperti ini : <img alt='gambar' src='url-image'/> Maka akan mengakibatkan error validasi AMP HTML. Penulisan yang benar seperti disini yaitu : <amp-img src="url-image-disini" width="1080" height="610" layout="responsive" alt="AMP HTML"></amp-img> Image akan muncul dengan baik pada postingan. Akan tetapi tidak akan muncul pada thumbnail di halaman utama / homepage.  Untuk mengakalinya, agar image muncul pada Homepage tambahkan tag  noscript  sehingga kode menjadi seperti ini : <noscript> <img alt='gambar' src='url-gambar-anda'/> </noscript> Silahkan langsung di coba saja dan lihat hasil nya, terima kasih ^^

Tutorial Cara Membuat Slider di Blogger Ringan

Gambar
Bagi kamu yang sedang bingung mencari Slideshow yang tepat di halaman blogger kamu, saya punya alternatif yang sangat ringan dan rensponsive, ini dia silahkan disimak saja Cara Membuat Slideshow di Blogger : <amp-carousel width="400"       height="300"       layout="responsive"       type="slides">     <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGlek4SYrOWevRBzfo7w7uMo90vouAgC01x14ecFr2Qpbsk1VeJ87ZeSAyyjon7l1coW-TADkyZwOWkxuiAHM_QORgGjEU8OXtPr9u3MQ8lMQUEpV9y4p-iPaKdHRg6HMQHZAecVaCkdxh/s1600/image1.jpg"         width="400"         height="300"         layout="responsive"></amp-img>     <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8PwgDVujM1f6I4Ahn0dfZA-_8MDUO4OpMceg7nKJrFVlU3RPA_mpGpPJX-qGphHPDZT9EmlVHcMjypLOpVwTnUwlVzpZqXpCT7iOuFkgeu79L2iSkNA7JeWvkxB765BaEIM3BqOx6Gcds/s1600/image2.jpg"...

Mengejutkan, Inilah 4 Hp Xiaomi yang berkerja sama dengan Sony

Gambar
Hai guys, Hari ini Z akan Share tentang Smartphone Buatan Xiaomi yang menggunakan Kamera Sony. Sony dan Xiaomi ternyata selama ini berkaloborasi terhadap Kamera smartphonenya karna Kamera Sony adalah Kamera Smartphone yang sangat memiliki khualitas yang tinggi. mau tau tipe apa saja? Nih 4 Smartphone Xiaomi yang menggunakan kamera Sony 1. Xiaomi Mi 4c RAM 2GB ROM 16GB Kamera utama di hape Xiaomi Mi 4c ini sudah memakai sensor  kamera Sony IMX258 yang dibekali lensa beresolusi 13 megapiksel yang sudah dilengkapi dengan LED Flash dual tone. Yang membuat kalian 2.Xiaomi Redmi Pro SELANJUTNYA>

2.Xiaomi Redmi Pro

Gambar
2.Xiaomi Redmi Pro Dua kamera di bagian belakang masing-masing memiliki resolusi 13 megapiksel dari sensor kamera Sony IMX258 dengan fitur PDAF, apertur f/2.0 dan dual LED flash sedangkan satu kamera lain beresolusi  5 megapiksel dengan sensor Samsung. 3.Xiaomi Mi Note/Pro SELANJUTNYA>