Skip to main content

Posts

Showing posts with the label template

Cara Memasang iklan dan Related post di tengah Postingan Blogger

Memasang iklan dan related post (artikel terkait), recommended article di tengah postingan atau artikel selain akan memicu nilai CTR/jumlah klik pada iklan, juga akan mendongkrat penjelajahan pengunjung terhadap artikel-artikel di blog tersebut. Sehingga nilah Bounce Rate pun akan dapat ditekan. Hanya saja pada tutorial ini terdapat sedikit penambahan script untuk related post (recommended article), yang berfungsi menampilkan beberapa artikel terkait paling terbaru secara otomatis dari artikel yang tengah dibaca oleh pengunjung.  Demonya seperti pada blog ini : Memasang iklan dan related post/recommended article di tengah postingan pada Blogger Untuk membuat widget seperti ini sebetulnya sangat mudah, silahkan ikuti tutorial berikut ini secara melek. Temukan kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; lalu letakkan kode barikut ini di atas kode tadi: <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text...

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

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

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 ...

Optimasi SEO Onpage Agar Sesuai dengan Social Media

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

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

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

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

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/AVvXsEh8Z7dRU140I1rz2VYEm3OIbOiJfCDrVzrZ65VCOWfaIR4wHBqjNBcXm0UqhUja4WHvY0-CPqWcH216p5jnzoOTO7wkTGRfIjlxGTznKvUJmNe01Pb95FrVpLEmDlqVyLbUVoTU87lDmxQ2/s1600/image1.jpg"         width="400"         height="300"         layout="responsive"></amp-img>     <amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0-Qsz88BZC5qxSTvh5Dkvm2qSpa45-g1zN4rZDccdJRWksD9dGiD3vFrDPlUUuuIK5X0aWDEOXP7Dza7EHVCqfVXXd-G_zYNCwQIMJuZ9ztbZSln35_jTWwSSPxActESs6HbGZdW6B0WR/s1600/image2.jpg"...