Modifikasi Blockquote atau Highlight Artikel Blog

Friday, July 24, 2015 4
Kenyih.com - Merubah atau memodifikasi tampilan blockquote di halaman posting, sebelumnya apa itu Blockquote...? Sejauh yang saya pahami Blockquote yaitu memberi area tertentu pada kode-kode atau tulisan-tulisan yang di anggap perlu di bedakan di dalam suatu postingan.

Buat blog ini sendiri Blockquote selalu saya gunakan pada saat menuliskan tutorial dan menambahkan kode atau script yang harus di copy oleh pengunjung, sehingga kode-kode tersebut saya kasih blockquote untuk memudahkan batasan untuk meng-copy kodenya.

Untuk memasang blockquote sangat gampang, berbeda dengan blogger dulu yang harus menambahkan kodenya di setiap artikel. Namun saat ini menambahkan blockquote cukup dengan satu kali klik.

Modifikasi Blockquote atau Highlight Artikel Blog

Cara menambahkan blockquote pada artikel
Pada saat anda menulis artikel, Block tulisan atau kode yang akan anda blockquote kemudian klik lambang seperti di bawah ini.

cara memberi blockquote di artikel blog

Apabila Blockquote anda belum pernah di modifikasi sama sekali, tulisan yang anda blockquote tadi hanya ada batas dan sedikit berbeda penempatannya dari artikel biasa. Nah di artikel ini saya akan berikan salah satu kode untuk modifikasi Blockquote di halaman artikel biar tampak berbeda seperti gambar di atas.

 Modifikasi Blockquote atau Highlight Artikel
1. Seperti biasa masuk ke Template --> Edit HTML
2. Cari kode blockquote {bla bla bla} atau .post blockquote {bla bla bla}
3. Setelah ketemu copy kode dibawah ini dan ganti kode nomer 2 diatas dengan kode di bawah ini
blockquote{ margin : 0 20px; padding: 10px 20px 25px 20px; background : #81F781 url(http://3.bp.blogspot.com/-0p6xwsljkhM/VbH9ltdizyI/AAAAAAAAAX4/tF5JN6PudDE/s1600/kenyih%2Bblockquote.PNG) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }
    Silahkan berkreasi dengan kode diatas untuk #81F781 adalah warna backgroud, silahkan ganti sesuai selera. Jika butuh kode warna silahkan klik disini kode warna HTML
Untuk url(http://3.bp.blogspot.com/-0p6xwsljkhM/VbH9ltdizyI/AAAAAAAAAX4/tF5JN6PudDE/s1600/kenyih%2Bblockquote.PNG) silahkan ganti dengan gambar anda

4. Simpan template dan lihat hasilnya di artikel yang anda blockquote.

Jangan lupa berlangganan artikel dari blog ini untuk tips dan trick lainnya. Semoga bermanfaat

Tag H1 Zero That Is Really Bad, Ini Solusinya

Wednesday, July 22, 2015 25
Kenyih.com - Pernahkah anda mengecek persentase SEO blog anda di chkme kalau pernah dan hasilnya diatas 80% itu artinya blog anda sudah cukup baik untuk segi SEO. Namun apabila saat anda cek di chkme ada beberapa yang perlu di perbaiki alangkah baiknya anda segera membenahinya.

Dalam artikel kali ini saya akan memberikan cara mengatasi tag H1 tidak terbaca dari segi SEO, Jika anda cek di chkme akan ada pemberitahuan H1 Zero that is Really bad serta ada warning di bawahnya. Nah untuk mengatasi hal tersebut biar tag H1 terbaca ikuti langkah-langkahnya di bawah ini.

Cara mengatasi tag H1 Zero that is Really bad di chkme
1. Cek dulu blog sobat blogger di http://chkme.com/page-seo-tools
2. Jika ada pemberitahuan H1 Zero that is Really bad... dibawah ini solusinya
3. Masuk Dashboard blogger --> Template --> Edit HTML
4. Cari kode seperti di bawah ini atau yang sejenisnya, jika tidak ketemu tinggalkan komentar akan saya bantu sebisanya
<div id='header-inner'>  <h1><a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a></h1>
Untuk yang memakai blog seperti blog ini kodenya seperti dibawah ini
<div id='header-inner'> <h1><a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a></h1>
5. Warna merah adalah kode yang harus anda tambahkan
6. Simpan template dan cek lagi di http://chkme.com/page-seo-tools

semoga sedikit tips di atas dapat menambah wawasan dan memperbaiki masalah sahabat bloggar semua


Merapikan Gambar dan Snippet Popular Post

Tuesday, July 21, 2015 0
Kenyih.com - Artikel kali ini masih seputar tutorial tips dan trik blogger, dalam kesempatan ini saya akan memberikan cara memotong snippet atau keterangan yang berada di samping gambar popular post supaya terlihat rapi.

Meskipun sudah banyak yang membahas tentang tutorial ini namun saya juga mau share barangkali ada sahabat blogger yang belum sempat membaca dan mencari-cari yang kemudian nyangkut di blog ini sekalian juga mengawetkan jika suatu saat saya mengganti template tinggal cari di blog sendiri.

lihat gambar di bawah ini untuk contoh penerapan dan hasilnya.


ikuti langkah - langkah pemasangannya di bawah ini:
1. Login Blogger
2. Tambahkan widget entry populer / Popular Post kemudian simpan


3. Kemudian klik Template --> Edit HTML
4. Cari kode </body> kemudian letakkan kode di bawah ini tepat di atas kode tadi
<script type='text/javascript'> //<![CDATA[ $('.popular-posts ul li .item-snippet').each(function(){ var txt=$(this).text().substr(0,55); var j=txt.lastIndexOf(' '); if(j>42) $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...')); }); //]]> </script>
5. Ganti angka 55 dengan yang ingin anda tampilkan
6. Simpan template dan lihat hasilnya

Popular Post Error? Ini Solusinya

Tuesday, July 21, 2015 1
Kenyih.com - Beberapa hari ini saya melihat di beberapa blog saya ada sedikit masalah pada widget popular post yang saya pasang di blog saya, usut punya usut ternyata ada perubahan dari pihak blogger sehingga popular post atau widget artikel popuper yang saya pasang error.

Widget popular post atau artikel populer yang saya pasang di blog ini tidak bisa di ganti angka tampilannya, ketika angka saya set berapapun maka popular post yang tampil di blog tetap 10 artikel. Sedikit bingung dengan apa yang terjadi.


Setelah mencari solusi kesana kemari ternyata saya menemukan salah satu artikel yang membahas tentang masalah ini, dan ternyata cara mengatasinya cukup mudah, berikut cara mengatasi widget popular post yang error dan tidak sesuai dengan yang kita inginkan.

1. Login blogger dashboard --> Template --> Edit HTML
2. Cari kode]]></b:skin>
3. Salin dan letakkan kode di bawah ini di atas kode ]]></b:skin>
.PopularPosts ul li:nth-child(n+5){display:none;}
4. Kuncinya pada angka n+5, misalkan anda ingin menampilkan artikel populer 5 tetapi yang muncul di blog hanya 4 artikel, maka ganti angka n+5 menjadi n+6 begitu seterusnya.

Sekian sedikit tutorial dan solusi mengatasi popular post error, semoga dengan tutorial di atas kebingungan anda teratasi juga seperti saya, salam blogger.

Membuat Judul Artikel Di Depan Title Blog - SEO Tips

Tuesday, July 21, 2015 0
Kenyih.com - Artikel kali ini masih seputar tips trik dan tutorial blog, tepatnya kali ini saya akan membahas tentang judul artikel agar SEO friendly. Sekaligus memperbarui artikel di blog ini yang telah usang dan tidak terindex google karena vakum beberapa tahun terakhir.

Bagaimana agar artikel yang kita terbitkan di blog kita SEO friendly, salah satunya yaitu mengatur penempatan yang tepat antara judul artikel dan title blog. Apabila template blog yang masih standart dan kebanyakan blogger pemula jarang memperhatikan hal kecil ini yang sesungguhnya besar pengaruhnya terhadap SEO blog kita.


Template standart penempatan judul artikel berada di belakang title blog, sedangkan artikel yang SEO friendly penempatan title blog di belakang judul artikel seperti gambar di atas. Nah kali ini saya memberikan kodenya supaya title blog berada di belakang judul.

1. Login Blogger --> Template --> Edit HTML
2. Cari kode <title><data:blog.pageTitle/></title> letaknya di bagian atas template blog kita biasanya di bawah kode <head> untuk memudahkan pencarian gunakan CTRL+F
3. Setelah ketemu kode nomer 2 diatas (<title><data:blog.pageTitle/></title>) ganti kode tersebut dengan kode di bawah ini
<b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> | <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>
Simpan template dan lihat hasilnya di pencarian google, maka judul artikel akan berada di depan title blog

Catatan : Hapus kode warna merah dan ganti dengan kode di bawahnya

Membuat Multi Tab Widget di Sidebar Blog Versi ArlinaDesign

Monday, July 20, 2015 0
Kenyih.com - Artikel kali ini saya akan memberikan tutorial cara memasang multi tab menu atau multi tab view widget di sidebar blog. Tidak bisa di pungkiri widget merupakan bagian penting dari suatu blog, dengan bervariasinya dan banyaknya widget yang mungkin anda perlu pasang di blog tentunya sidebar juga butuh ruang lebih untuk penempatan widget-widget tersebut.

Dengan adanya Fungsi Multi tab menu di sidebar blog kita, tentu kita bisa menghemat tempat untuk menempatkan widget lebih banyak. Multi tab yang akan saya share disini saya ambil tutorialnya dari blog Arlina design dan mempunyai 3 tab view.


Simak langkah-langkah pemasangannya di bawah ini.
Setelah masuk blogger Dashboard kemudian masuk ke bagian edit HTML blog kita
Cari kode ]]></b:skin> kemudian copy dan paste kode di bawah ini di atas kode ]]></b:skin>
/* Multi Tab Widget */ .multitab-section{background:#fff;text-transform:uppercase;width:100%} .multitab-widget{list-style:none;margin:0 0 10px;padding:0} .multitab-widget li{list-style:none;padding:0;margin:0;float:left} .multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none} .multitab-tab{border:0;width:33.3%;text-align:center} .multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;} .multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}
Cari kode </body> kemudian copy dan paste kode di bawah ini di atas kode </body>
<script type='text/javascript'> //<![CDATA[ // Multi tab widget jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); //]]> </script>
Cari kode <div id='sidebar-wrapper'> kemudian copy dan paste kode di bawah ini tepat di bawah kode <div id='sidebar-wrapper'>
<div class='multitab-section'> <ul class='multitab-widget multitab-widget-content-tabs-id'> <li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li> <li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li> <li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li> </ul> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'> <b:section class='sidebar' id='sidebartab1' preferred='yes'/> </div> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'> <b:section class='sidebar' id='sidebartab2' preferred='yes'/> </div> <div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'> <b:section class='sidebar' id='sidebartab3' preferred='yes'/> </div> </div>
Sesuaikan nama Popular,Tags,Archive dengan yang anda pasang. Untuk pemasangannya masuk ke Layout -> disitu ada penambahan kolom untuk menempatkan widgetnya. Selesai apabila ada hal-hal yang perlu anda tanyakan silahkan hubungi melalui kotak komentar di bawah artikel ini.

Memasang URL Artikel Yang Sedang Di Tulis

Saturday, July 18, 2015 0
Kenyih.com - Menanmpilkan URL postingan atau artikel yang sedang ditulis menurut saya penting juga buat kustomisasi atau menambah2 widget blog. Menampilkan URL atau alamat artikel yang sedang kita tulis ternyata tidak susah bahkan sangat sederhana sekali.

Dulu saya mengerti cara menulis URL saat artikel masih kita ketik saya harus posting dulu artikel tersebut setelah itu copy url yang ada di browser. Tapi sekarang setelah saya tahu caranya ternyata menuliskannya sangat gampang.

Biasanya blog yang memberikan kotak terimakasih dari admin di bawah setiap artikel yang kita terbitkan ada beberapa keterangan salah satunya yaitu URL postingan yang saat ini kita baca. tentunya membuat ucapan terimakasih kita memasang script auto agar kita tidak menulisnkannya setiap posting.

URL artikel:
cara memasangnya ketikkan kode berikut ini di bagian HTML post: <a expr:href='data:post.url'><data:post.url/></a>
judul artikel:
cara memasangnya ketikkan kode berikut ini di bagian HTML post: <a expr:href='data:post.url'><data:post.title/></a>

Itulah cara menuliskan URL artikel yang sedang kita tulis di dalam artikel kita atau bisa kita pasang secara otomatis di html blog biar tampil otomatis di setiap artikel. Apabila ada yang kurang jelas silahkan tanyakan di kotak komentar.