BLOG BEGO: blog

Tampilkan postingan dengan label blog. Tampilkan semua postingan

Kamis, 16 Desember 2010

Masalah Artikel Terkait dan Solusinya

Kamis, 16 Desember 2010 6 komentar

Dari tiga Artikel / postingan saya tentang Artikel Terkait, yang pasti akan ada masalah tampilan khususnya "Artikel Terkait berada di Sidebar", karena di Sidebar Blog anda inilah yang menjadi masalah yang akan kita atasi sekarang, sedangkan yang lainnya tidak ada masalah karena keberadaannya di bawah posting.

Baca selengkapnya »

Rabu, 15 Desember 2010

Cara membuat Artikel Terkait di Sidebar

Rabu, 15 Desember 2010 1 komentar

LIVE DEMO

Seperti postingan saya sebelumnya yaitu Cara membuat Artikel Terkait di bawah postingan dan Cara membuat Artikel Terkait berisi image Thumbnails, maka sekarang saya akan mencoba berbagi lagi dengan anda cara membuat Artikel terkait yang keberadaannya di sidebar Blog.

Baca selengkapnya »

Minggu, 12 Desember 2010

Sabtu, 11 Desember 2010

Cara membuat Artikel Terkait

Sabtu, 11 Desember 2010 0 komentar

Untuk membuat artikel terkait, artikel yang berhubungan atau apalah namanya yang pada bahasa Blogger dikenal dengan nama Related post, yang pada prinsip dasarnya kita akan sedikit menambahkan kode script pada kode HTML template kita.

Buat blogger pemula seperti saya yang belum mengerti tentang artikel terkait itu apa, baiklah sekarang akan saya berikan sedikit gambaran, yaitu kurang lebihnya seperti ini, adalah sekelompok artikel yang pada prinsipnya mempunyai label / katagori sama dengan postingan atau artikel tertentu. Artikel terkait biasanya berada dibawah postingan, dan ada juga yang berada di sidebar Blog kita.

Untuk jelasnya mari kita bahas satu persatu cara pembuatannya dari yang Artikel Terkait biasa, pakai thumbnails / image dan yang ditaruh di sidebar. Sekarang yang akan saya share dengan anda Artikel Terkait yang berada dibawah postingan.

Cara membuatnya sebagai berikut :

Masuk ke account google dengan ID anda.
Pada Dasbor klik Rancangan – terus klik Tab Edit HTML
Kemudian klik Expand Template Widgets .
Cari kode yang seperti ini : <data:post.body/>
Untuk gampangnya tekan Ctrl + F kemudian ketikkan kode berikut : <data:post.body/>
Jika anda sudah menggunakan read more / baca selengkapnya pada template anda, maka akan terdapat 2 kode <data:post.body/> Pakai yang pertama
Kemudian letakkan script berikut ini setelah kode <data:post.body/> yang pertama.

<b:if cond='data:blog.pageType == "item"'>

<h3>Ingin membaca Artikel Terkait :</h3>

var homeUrl3 = "<data:blog.homepageUrl/>";

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 7;

maxNumberOfPostsPerLabel = 7;

maxNumberOfLabels = 3;

function listEntries10(json) {

var ul = document.createElement('ul');

var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i < maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

alturl = entry.link[k].href;

break;

}

var li = document.createElement('li');

var a = document.createElement('a');

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

for (var l = 0; l < json.feed.link.length; l++) {

if (json.feed.link[l].rel == 'alternate') {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k<20; k++) label = label.replace("%20", " ");

var txt = document.createTextNode(label);

var h = document.createElement('b');

h.appendChild(txt);

var div1 = document.createElement('div');

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById('data2007').appendChild(div1);

}

function search10(query, label) {

var script = document.createElement('script');

script.setAttribute('src', query + 'feeds/posts/default/-/'

+ label +

'?alt=json-in-script&callback=listEntries10');

script.setAttribute('type', 'text/javascript');

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

textLabel = "<data:label.name/>";

var test = 0;

for (var i = 0; i < labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length <= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

</b:loop>

</script>

</div>

</b:if>

Tulisan Ingin membaca Artikel lainnya dan angka 4, 7, 3 silahkan anda menyesuaikan.
Save/ simpan Template anda.
Lihat hasilnya dengan jalan Klik salah satu postingan anda, pada single post dibawah artikel / postingan anda akan tampak seperti contoh berikut

Demonya disini

Postingan berikut adalah Untuk Artikel Terkait dengan thumbnails / image

Jumat, 03 Desember 2010

Klik Label yang tampil Judulnya saja.

Jumat, 03 Desember 2010 0 komentar

Pernahkah anda berkunjung ke Blog kawan Blogger yang lain, jawabnya pasti pernah dan sering, terus apa yang anda cari - sudah pasti Daftar Isi, Label atau yang lainnya. Karena dari sinilah anda tahu Artikel apa saja yang sudah di posting. Seumpama yang punya Blog sudah lama dan jumlah postingan / Artikelnya sudah barang tentu jumlahnya banyak pula, nah disinilah gunanya Label / Katagori, yang artinya kurang lebih pengelompokkan dari beberapa Artikel atau postingan.

Perhatikan Gambar berikut :

Seumpama kita mau lihat label Tourism (18) artinya label Tourism jumlah Artikel / postingan sebanyak (18)

Dari contoh tersebut kita ingin melihat apa saja isinya, yang pada akhirnya tampilan Artikel / postingan tersebut sesuai jumlah nya perlabel.

Seberapa panjangkah halaman yang diperlukan untuk ini, apakah tidak membosankan kita memegang mouse atau menarik turun.

Memang hal ini ada sisi baik buruknya, baiknya pengunjung bisa berlama - lama di Blog kita, dan sisi jeleknya kemungkinan pengunjung kapok datang lagi, karena sudah berlama - lama di Blog kita apa yang dicari tidak diketemukan.

sehubungan dengan itu sekarang saya akan mencoba berbagi dengan anda cara menampilkan Judulnya saja seandainya pengunjung meng-Klik Label atau Katagori Artikel kita.

Cuma saran saya pandai - pandailah membuat Judul Artikel / Postingan supaya bisa menarik perhatian pengunjung dan jangan lupa Judul dengan isinya sejalan.

contoh label hanya judulnya saja

Caranya :

Masuk ke Account Blogger dengan ID anda.
Pada Dasbor cari Rancangan terus Edit HTML.
Backup / simpam template anda dulu.
Beri tanda centang “Expand Widget Template”
Cari Kode script : <b:include data='post' name='post'/>
Kalau sudah ketemu Hapus / ganti dengan Kode Script berikut :

Simpan template anda dan lihat hasilnya

Kamis, 02 Desember 2010

Membuat Kotak Chatting di Shoutmix

Kamis, 02 Desember 2010 0 komentar

Pada umumnya Blog sudah pasti ada Kotak Komentar, Kotak Chatting dan lain sebagainya sebagai alat komunikasi antara pengunjung dengan yang punya Blog.

Dan saat ini saya akan mencoba membahas yang dinamakan Kotak Chatting, kalau dilihat dari namanya semua orang sudah tahu apa itu Kotak Chatting, dan namanyapun berbeda – beda seperti shoutbox, Cbox, chatbox atau apalah istilahnya yang terpenting adalah tempat antara pengunjung dan pemilik Blog atau sesama pengunjung bisa berkomunikasi langsung maupun tak langsung.

Sekarang yang akan saya bahas adalah Cara membuat Kotak Chatting yang disediakan oleh http://www.shoutmix.com. Untuk mendapatkan kotak chating di sana berupa script yang harus di pastekan di dalam blog anda.

Caranya : Masuk dulu ke http://www.shoutmix.com atau Klik disini

Klik Create atau create shoutbox
Isi semua kolom form sesuai dengan data anda yang valid
Khusus untuk nama harus UNIK
Beri tanda centang / rumput
Klik continue / teruskan

Perhatikan gambar berikut :

Klik Get Kode
Disini juga anda bisa mengubah warna, mengaktifkan atau menambah emoticons, cuma banyaknya terbatas, terkecuali shoutbox berbayar.

Perhatikan tanda merah dalam kurung itu lebar dan tinggi shoutbox anda, bisa dirubah dan sesuaikan dengan lebar penempatan di Blog anda.
Terakhir copy kodenya untuk dimasukkan pada Blog anda.

Sampai disini anda sudah punya shoutbox dalam kode script yang selanjutnya cara menempatkan kode tersebut pada Blog anda :

Seperti biasa Masuk ke Blogger dengan ID anda
Pada Dasbor / Rancangan pilih tambah gadget
Klik tanda tambah pada HTML / JavaScript
Masukkan kode script shoutbox tadi
Simpan dan lihat hasilnya

Rabu, 24 November 2010

Cara membuat Slide di Blog

Rabu, 24 November 2010 3 komentar

Pada kesempatan kali ini saya akan mencoba berbagi dengan anda yaitu cara membuat "headline Slide". Yang tampilan aslinya bisa anda lihat Demonya Demonya

Tapi saat ini saya akan memberikan hasil modifikasi alias main coba-coba saya yang hasilnya bisa anda lihat pada bawah header blog saya ini, dan pada prinsipnya tidak harus di bawah Header, dengan kata lain dimana saja bisa anda taruh sesuai selera masing-masing atau ditempat strategis biar kelihatan manis dipandang mata.

Okey kalau anda tertarik untuk memasangnya dan biar jangan menoton kita langsung saja ke tujuan sambil praktek tentunya, caranya :

Seperti biasa masuk dulu ke Blogger dengan ID anda.
Setelah di Dasbor rancangan, Klik Edit HTML.
Download dulu template untu jaga – jaga kalau ada kesalahan.
Beri tanda centang pada tulisan Expand Widget Template
Cari code ini ]]></b:skin> (untuk memudahkan pencarian tekan Ctrl+F)
Copy-Paste code CSS dibawah ini diatas code ]]></b:skin>

#slider {

background:;

height: 230px;

text-align:center;

overflow: hidden;

position: relative;

margin: -5px 0px;

}

#mover {

width: 600;

position:absolute;

overflow:hidden;

}

.slide {

padding: 5px 0px;

width: 1000px;

float: left;

position: relative;

height:230px;

}

.slide h2 {

font-family:Georgia, Helvetica, Sans-Serif;

font-size: 20px;

font-weight:bold;

text-align:left;

color: #FFFF00;

padding:0px 0px 0px 0px;

margin:0px 0px;

width:500px;

overflow:hidden;

}

.slide h2 a:link, .slide h2 a:visited {

color:#FFFF00;

background-color: transparent;

}

.slide h2 a:hover {

color: #FFFFFF;

background-color: transparent;

}

span.slmet {

color: #ee0909;

font-size: 12px;

font-family:Tahoma, georgia, Helvetica, Sans-Serif;

line-height: 30px;

width: 200px;

padding:0px 0px 0px 30px;

margin:0px 0px;

text-transform:uppercase;

}

.slide p {

color: #FFFFFF;

font-size: 14px;

text-align:left;

font-family: Georgia, Helvetica, Sans-Serif;

line-height: 20px;

width: 470px;

padding:0px 0px 0px 0px;

margin:0px 0px;

}

.slide img {

position:absolute;

top: 50px;

left: 0px;

background:;

padding:0px 0px;

}

#slider-stopper {

position: absolute;

font-family: Georgia, Helvetica, Sans-Serif;

top: 1000px;

right: -125px;

color: #FF0000;

padding: 3px 8px;

font-size: 14px;

font-weight:bold;

text-transform: uppercase;

z-index: 1000;

}

Langkah selanjutnya cari code ini </head>
Copy-Paste code CSS dibawah ini diatas code </head>

sfHover = function() {

var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+=" sfhover";

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\b"), "");

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

Simpan template anda
Kembali ke Dasbor dan Klik Tambah Gadget
Pilih tanda tambah pada – HTML/JavaScript
Copy-Paste Kode Script berikut kedalamnya

<tr>

<span class="Apple-style-span" style="font-size:16px; font-weight:normal; color:#0000FF;" ><b><blink>ARTIKEL UNGGULAN</blink></b></span>

</td></tr><tr><td>

<h2><a href="http://tips-blogbego.blogspot.com/2010/11/spoiler-membuat-loading-blog-lebih.html">Spoiler membuat Loading Blog lebih Ringan</a></h2>

<p>Pada kesempatan ini saya akan mencoba berbagi tentang cara memperkecil tempat, yang secara tak langsung juga bisa memperingan muatan atau beban Blog kita pada saat loading »»</p>

</div>

</div></div></div></div></td></tr></table>

Keterangan :

Contoh diatas hanya satu slide, tugas anda menambahkan sesuai kebutuhan,

Judul ARTIKEL UNGGULAN diatas silahkan ganti, mungkin ARTIKEL TERBARU dll sesuai seninya anda atau anda ingin menghilangkan silahkan.

caranya :

Lihat Kode script <div class="slide"> …….sampai……. </div> ini menunjukkan satu kesatuan slide. Copy-paste sesuai kebutuhan.
Lihat kode script <h2> ………</h2> ini link artikel anda yang akan menjadi Judul tiap Slide.
Lihat kode script <p>………..</p> ini isi singkat dari Artikel
Banner Animasi yang saya pakai ukurannya (468x60px).
Simpan Gadget terus lihat hasilnya, dan jangan lupa berikan komentar anda untuk memotivasi saya, terima kasih

TAB MENU MELAYANG

Kamis, 16 Desember 2010

Masalah Artikel Terkait dan Solusinya

Rabu, 15 Desember 2010

Cara membuat Artikel Terkait di Sidebar

Minggu, 12 Desember 2010

Artikel Terkait yang berisi Thumbnails

Sabtu, 11 Desember 2010

Cara membuat Artikel Terkait

Jumat, 03 Desember 2010

Klik Label yang tampil Judulnya saja.

Kamis, 02 Desember 2010

Membuat Kotak Chatting di Shoutmix

Rabu, 24 November 2010

Cara membuat Slide di Blog

Pengikut

CEK PAGERANK

BACK LINK

BACK LINK

BROKEN LINK

TEST BERAT / KECEPATAN

TEST LINK KAWAN

CEK META TAG

Membuat Artikel Terkait di Sidebar

Masalah Artikel Terkait dan Solusinya

Artikel Terkait yang berisi Thumbnail

TAB MENU MELAYANG

Kamis, 16 Desember 2010

Rabu, 15 Desember 2010

Minggu, 12 Desember 2010

Sabtu, 11 Desember 2010

Jumat, 03 Desember 2010

Kamis, 02 Desember 2010

Rabu, 24 November 2010

Pengikut

document.write('<a href="http://tips-blogbego.blogspot.com">TIPS BLOG &amp;KOMPUTER</a>');

CEK PAGERANK

BACK LINK

BACK LINK

BROKEN LINK

TEST BERAT / KECEPATAN

TEST LINK KAWAN

CEK META TAG