Showing posts with label Desain BLOG. Show all posts
Showing posts with label Desain BLOG. Show all posts

Bagaimana Menampilkan Post Dengan Label Pilihan

Cara Menampilkan Artikel di Sidebar Dengan Label atau Kategori Tertentu Saja
Jika Agan sedang mencari-cari cara bagaimana menampilkan posting atau artikel dengan label tertentu, saya akan kasih tau Agan cara nya disini. Untuk melihat demo nya Agan cukup melihat Blog saya ini.

Sebagai seorang Blogger tentu mempunyai cara-cara tertentu dan unik untuk mengelola Blog, untuk menciptakan Pageview juga punya banyak macam cara atau ide, yang tidak bisa saya sebutkan semua nya disini.

Namun untuk menampilkan semua postingan baru di sidebar dan di pisahkan dengan label tertentu, di percaya memiliki persentase yang lebih besar untuk mendapatkan Pageview.

Jika Agan juga tertarik dan pengen tau cara nya untuk menampilkan artikel atau postingan dengan kategori tertentu di sidebar. Agan cukup meng copy script dibawah ini dan tempatkan script tersebut sesuai yang saya instruksikan.

• Copy script berikut ini :

img.rct-thumb{float:left;margin-right:10px;height:72px;width:72px;}
.recent-by-tag{width:100%;margin:0;padding:0}
ul.recent-by-tag li{padding:10px 0;margin-bottom:0;border-bottom:1px solid #ddd}
.recent-by-tag li{font-size:13px;list-style:none;padding-left:0;margin:0;padding:0;overflow:hidden}
.recent-by-tag a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
.recent-by-tag strong{padding-left:0}
span.showdates{font-size:16px;margin:10px 0 0}

Dan paste kan di atas kode </b:skin>.

• Kedua copy script berikut ini dan paste kan di atas kode </head>

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSVzEb88KSTuHiheNphWFYJsM6JyJ06NC9_f3S5vLkHWVVCO29Tf7xirvaqwA6U_0fkW-pUJS9kY-GxDRfQdTXg4CPcmSz44O_PfJt71jnzZHl1RCowgYxGDaD_Z4bjVkX-7M3-blJ1TG1/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'" rel="nofollow">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>


• Ketiga copy script ini dan paste kan dimana saja yang Agan sukai, seperti di bawah Footer, di Header, bawah Posting, dan Sidebar.

<script>
document.write("<script src=\"/feeds/posts/default/-/Blogger?orderby=published&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

• CATATAN
Coba Agan lihat bagian script yang saya cetak tebal, untuk BLOGGER bisa Agan ganti, sesuai dengan label yang pengen Agan tampilin, PUBLISHED adalah untuk menampilkan urutan posting Agan dari yang terbaru, dan untuk mengubah atau mau menampilkan posting dari paling posting yang paling banyak di baca, bisa dengan merubah PUBLISHED ke UPDATE ( huruf kecil ).

Dan untuk label atau kategori yang lebih dari 1 kata atau yang di pisahkan dengan spasi bisa menambahkan %20, sehinga menjadi BLOGGER%20SUKSES contoh nya.

Cara Menghilangkan Atau Menampilkan Deskripsi Di Popular Post

Cara dan selera merapikan blog memang berbeda-beda pada masing-masing orang, dan kali ini saya akan coba bagikan cara untuk hilangin deskripsi pada popular post sehingga hanya judul atau title nya doang yang ditampilkan.

Menurut saya dengan menampilkan judulnya saja lebih terlihat rapi dan menarik, tapi itu juga tergantung pandangan tiap-tiap orang sih, mungkin ada yang suka ada yang tidak, tapi menurut saya blog yang kita sayangi sesuai dengan design selera kita akan bisa menyemangati kita buat ngeblog terus, benar bukan.

Bagi yang ingin menampilkan judulnya saja pada popular post bisa ikuti petunjuk ini, gampang saja kok ayo kita lihat :

1. Masuk ke menu Tata letak.

2. Jika sobat sudah pasang widget Popular Post, maka bisa klik Edit langsung.

3. Terus pada bagian Tampilkan, hilangin centang pada Cuplikan.

4. Terus Simpan.

Nah.. Mudah bukan coba sekarang buka blog sobat di browser sobat, dan lihat hasilnya berhasil atau tidak. Sebaliknya jika ingin menampilkan deskripsinya kembali silakan centang ulang pada bagian cuplikan? Trims.

Cara Memasang Deskripsi Meta Tag Blogspot Terbaru

Meta Tag sangat kita perlukan dan gunakan kedalam sebuah Blog atau Website, isi dalam meta tag adalah sebuah deskripsi pendek yang nantinya ditampilkan pada mesin pencarian Google, dsb.

Jika ingin bersaing di Search Engine maka benar-benar sangat dibutuhkan meta tag ini, jika tidak maka akan kesulitan bersaing dengan blog atau website yang lainnya. Tapi menggunakan meta tag juga tidak boleh sembarangan untuk bisa menang bersaing, maksudnya begini, sobat harus bisa juga mencari deskripsi atau kata kunci yang se-efisien mungkin untuk bisa meningkatkan SEO.

Jadi semua kembali kepada sobat. Deskripsi apa yang cocok buat blog sobat, sobat yang tentuin, asalkan cocok sama blog atau Niche Blog sobat.

Dulu memang agak sulit atau dengan kata lain kita harus menambahkan nya secara manual, itu mungkin akan sulit dipahami oleh para blogger pemula, tapi sekarang tidak usah kwatir lagi, kita bisa dengan mudah mengakses atau mengonta ganti meta description di halaman setelan.

Dan berikut ini adalah langkah-langkah nya, pertama-tama masuk ke menu Setelan - Preferensi penelusuran - dan di paling atas ada Tag meta, terus di bagian Deskripsi klik Edit - sampai disini masukkin deskripsi yang sobat pengen - Simpan, dan Selesai.

Bagaimana Mengatur Lebar Kotak Komentar Blogspot

Apa saja bisa dilakukan untuk membuat blog lebih terlihat rapi, dari jenis font, widget, atau ukuran teks, dsb. Dan pada waktu ini saya ingin membagikan cara merubah ukuran pada kotak komentar pada blog kita, kita bisa mengatur atau menyesuaikan tinggi dan lebar pada kotak komentar kita seperti yang kita sukai.

Artikel kali ini saya ambil dari waktu saya mengganti template blog ini, kenapa? dari template ini saya menemukan kotak komentar saya dengan lebar melebihi batas yang ada, dan saya mencoba untuk mengecilkan ukuran nya untuk menyesuaikan blog saya, sangat tidak enak dilihat.

Ternyata tidak mudah untuk saya menemukan caranya berjalan kesana kesini tidak menemukan hasil, akhirnya saya menemukannya dan ternyata mudah sekali ketika saya menemukan caranya. Sama dengan apa yang terjadi dengan saya atau cuma ingin tau aja. Mari kita lihat saja caranya :

Bagaimana Mengatur Lebar Kotak Komentar Blogspot
1. Masuk blogger kalian, menu template-edit template.

2. Cari kode berikut ini dengan menggunakan fungsi find Ctrl+F, berikut kodenya.
allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src=''

3. Disana kalian akan menemukan height dan width, dimana height adalah tingginya dan width adalah lebarnya.

4. Ubah sesuai yang kalian inginkan dan klik Pratinjau template untuk melihat hasilnya baru kemudian di simpan template.

Cukup mudah lah ya, semoga berhasil dan bermanfaat aja.

Menampilkan Widget Pada Blog Versi Mobile / Seluler

Untuk menampilkan widget pada blog versi mobile atau menyembunyikan widget pada versi dekstop ternyata cukup mudah dilakukan, lagi-lagi hanya menambahkan sedikit script saja di template blog kalian. Namun ada satu syarat yang harus kita penuhi, apa itu? syarat yang harus kita penuhi adalah kita harus memakai template seluler versi khusus.

Maksudnya, kalian harus mengganti template seluler default / sederhana ke khusus, dimana template versi khusus ini sama seperti tampilan dekstop, bukan dengan menampilkan versi seluler seperti tampilan dekstop maka widget akan muncul ya.
Menampilkan Widget Pada Blog Versi Mobile / Seluler

Kita langsung saja, pada tahap pertama ini hanya mengatur sedikit pengaturan saja di menu template kalian. Sekarang buka Blogger anda, dan masuk ke menu template setelah itu di sebelah Edit HTML apakah melihat pengaturan template seluler anda, dibawahnya ada ikon gir langsung klik saja, setelah masuk kita akan disuruh untuk memilih template seluler, dan sekarang kita akan mengubahnya dari template default ke khusus.

Nah setelah klik simpan maka tahap pertama sudah selesai, kita lanjut ke tahap kedua :

1. Masih di menu template kan, sekarang klik Edit HTML kita akan mengedit templatenya sedikit.

2. Sekarang coba nyari widget kalian, dengan menggunakan fungsi Ctrl+F terus masukkin saja judul widget kalian yang ingin diubah.

3. Setelah ketemu, tinggal kita memasukkan mobile='yes' atau mobile='only', dimana yes adalah perintah untuk memberi ijin menampilkannya di versi mobile juga, dan satunya lagi dari artinya saja pasti sudah tau, dimana only hanya memberi ijin untuk menampilkan widget pada versi seluler saja.

4. Dimana saya harus meletakkan kodenya, letakkan di sebelah locked='false' boleh kiri atau kanan.

5. Setelah semua widget di atur klik simpan template.

Dan satu lagi yang membuat kalian harus mencatatnya dan menjadikannya sebagai catatan adalah penggunaan mobile='only', kenapa harus jadi catatan? kalau kalian belum mengetahui ini mungkin nanti akan pusing sendiri ketika masuk ke menu tata letak, dimana widget yang menggunakan mobile='only' akan hilang atau tidak ditampilkan di tata letak dan untuk mengedit atau menghapusnya kita harus menghapus mobile='only' terlebih dahulu.

Menghilangkan Jumlah Post / Artikel Pada Arsip Blog

Menhilangkan atau menyembunyikan jumlah post yang ditampilkan di arsip juga disukai oleh sebagian blogger, dengan berbagai alasan. Setiap kita membuat postingan baru maka akan otomatis ada diarsip dan di arsip akan menampilkan berapa jumlah artikel yang ada pada hari atau bulan itu di buat.

Bagi sebagian blogger melakukannya hanya untuk menutupi jarangnya buat artikel baru pada blog mereka, tidak ingin orang melihat total artikel dibuatnya dalam sebulan. Jika anda pengen juga menghilangkannya, maka akan saya kasih tau caranya.
Menghilangkan Jumlah Post / Artikel Pada Arsip Blog

Berikut adalah langkah-langkah nya, tidak sulit kok hanya perlu menghapus beberapa script saja pada template blog kalian.

1. Buka menu template dan edit template blog kalian.
2. Sekarang cari kode berikut ini (<data:i.post-count/>)
3. Gunakan fungsi find Ctrl+F supaya cepat.
4. Jika ketemu, maka hapus saja.
5. Bingung mau hapus yang mana hapus saja semuanya, total ada tiga (<data:i.post-count/>).
6. simpan template.

Sekarang coba buka ulang blognya atau direfresh, apakah berhasil.

Menghilangkan Entri Atom Pada Blog

Dalam membangun sebuah blog tentu saja kita selalu ingin yang terbaik, tampil rapi dan sebagainya, sehingga seperti tulisan-tulisan atau widget yang tidak penting dan tidak diperlukan akan lebih baik jika kita buang.

Sesuai judul artikel kali ini, menghilangkan tulisan atau link langganan entri atom, maka menjadi salah satu tulisan atau link yang akan kita buang atau sembunyiin. Tidak susah untuk menghilangkan Langganan: Entri (Atom) cukup menghapus sedikit script yang ada di template sobat saja.

Seperti apa scriptnya: langkah pertama silakan copy script berikut ini <b:include data='feedLinks' name='feedLinksBody'/> dan sekarang masuk ke menu template terus edit template, gunakan fungsi find Ctrl+F cari script yang tadi di copy, setelah ketemu segera dihapus saja terus Pratinjau dulu sebelum klik simpan template, selesai.
Menghilangkan Entri Atom Pada Blog

Nah....bagaimana kalau saya tidak mau menghapusnya tapi cukup sembunyiin saja atau tidak ingin ditampilkankan dulu, bagini caranya cukup menambahkan display:none saja pada fungsi .feed-links Ctrl+F lagi dan setelah ketemu .feed-links tambahkan display:none kedalamnya.

Jadi ada 2 cara menghilangkan langgan entri atom, jika cara kesatu tidak mempan maka bisa coba cara keduanya.

Memasang Iklan Di Atas Bawah Postingan Pada Template Sederhana Blogspot

Bagaimana pasang iklan diatas atau bawah postingan, untuk melakukannya tidak terlalu sulit kalian cukup mencari kode berikut ini <data:post.body/> di menu template-edit template. Disitu kalian akan menemukan 3 atau 4 <data:post.body/>.

Dari ketiga atau empat <data:post.body> tidak lah sulit menemukan mana yang benar. namun bagi sebagian blogger yang memiliki masalah dalam jaringan koneksi internet mungkin juga akan banyak memakan waktu, seperti saya contohnya dulu pernah saya melakukannya dan eksperimen dari ke 4 <data:post.body/> hampir memakan waktu 1 jam lamanya.

Sangat disayangkan bukan waktu yang begitu banyak di sia-siain, mungkin kita sudah bisa membuat satu artikel untuk blog kesayangan kita dengan waktu hampir 1 jam lamanya itu. Tapi mau gimana lagi yakan memang nasib saya.
Memasang Iklan Di Atas Bawah Postingan Pada Template Sederhana Blogspot

Nah sekarang saya akan coba membagikan cara yang lebih cepat memilih <data:post.body/> yang tepat, coba perhatikan kode di atas atau kiri <data:post.body/> apa ada kode sebagai berikut <b:if cond='data:blog.pageType == &quot;item&quot;'> jika ada, maka kita sudah ketemu dengan <data:post.body/> yang tepat.

Nah dari situ kalian bisa melihat mana data:post.body yang benar dan yang salah, sekarang tinggal paste atau memasang script unit iklannya diatas, bawah, kiri, atau kanan kode <data:post.body/> untuk memasang iklan diatas atau dibawah postingan, terus simpan dan lihat. Mudah-mudahan tidak salah dan bisa membantu ya.

Semoga banyak yang klik ya? hehe.

Cara Pasang Flip Text Tool / Tulisan Terbalik Mudah di Blog

Kali ini saya ingin memberikan sesuatu kepada kalian yaitu pasang Flip Text Tool di blog, lebih jelasnya lagi adalah memasang tool untuk bikin tulisan terbalik di blog kalian. Hasil dari tulisan terbalik ini juga dapat kita gunakan untuk update status di berbagai jejaring sosial seperti Facebook, Twitter, dan lain sebagainya.

Lihat contohnya :


Cara Pasang Flip Text Tool / Tulisan Terbalik Mudah di Blog

Nah jika kalian tertarik untuk pasang tool ini atau kalian sedang mencari-cari caranya, akan saya bagikan untuk kalian semua disini, cukup mudah kok hanya CopyPaste aja script yang sudah saya sediakan dibawah ini.

<div dir="ltr" style="text-align: left;" trbidi="on">
<script language="javascript">
</script>
<script language="javascript">
// DEVELOPED By Jason [LovesReborn]
// JavaScript Document
function flip() {
var result = flipString(document.getElementById('oriText').value);
document.getElementById('flipped').value = result;
}
function flipString(aString) {
aString = aString.toLowerCase();
var last = aString.length - 1;
var result = "";
for (var i = last; i >= 0; --i) {
result += flipChar(aString.charAt(i))
}

return result;
}

function flipChar(c) {
if (c == 'a') {
return '\u0250'
}
else if (c == 'b') {
return 'q'
}
else if (c == 'c') {
return '\u0254'
}
else if (c == 'd') {
return 'p'
}
else if (c == 'e') {
return '\u01DD'
}
else if (c == 'f') {
return '\u025F'
}
else if (c == 'g') {
return '\u0183'
}
else if (c == 'h') {
return '\u0265'
}
else if (c == 'i') {
return '\u0131'
}
else if (c == 'j') {
return '\u027E'
}
else if (c == 'k') {
return '\u029E'
}
else if (c == 'l') {
return '1'
}
else if (c == 'm') {
return '\u026F'
}
else if (c == 'n') {
return 'u'
}
else if (c == 'o') {
return 'o'
}
else if (c == 'p') {
return 'd'
}
else if (c == 'q') {
return 'b'
}
else if (c == 'r') {
return '\u0279'
}
else if (c == 's') {
return 's'
}
else if (c == 't') {
return '\u0287'
}
else if (c == 'u') {
return 'n'
}
else if (c == 'v') {
return '\u028C'
}
else if (c == 'w') {
return '\u028D'
}
else if (c == 'x') {
return 'x'
}
else if (c == 'y') {
return '\u028E'
}
else if (c == 'z') {
return 'z'
}
else if (c == '[') {
return ']'
}
else if (c == ']') {
return '['
}
else if (c == '(') {
return ')'
}
else if (c == ')') {
return '('
}
else if (c == '{') {
return '}'
}
else if (c == '}') {
return '{'
}
else if (c == '?') {
return '\u00BF'
}
else if (c == '\u00BF') {
return '?'
}
else if (c == '!') {
return '\u00A1'
}
else if (c == "\'") {
return ','
}
else if (c == ',') {
return "\'"
}
else if (c == '.') {
return '\u02D9'
}
else if (c == '_') {
return '\u203E'
}
else if (c == ';') {
return '\u061B'
}
return c;
}
</script>
<b>TULISAN YANG INGIN DIBALIK :</b>
<table><tbody>
<tr><td><textarea cols="50" height="200px" id="oriText" rows="3" type="text" width="100px"></textarea></td></tr>
<tr><td><input onclick="flip();" type="button" value="PUTAR" /></td></tr>
<tr><td><textarea cols="50" height="200px" id="flipped" rows="3" type="text" width="100px"></textarea></td></tr>
</tbody></table>Source : <a href="http://selevel.blogspot.com">Selevel</a>.</div>