KKK - Blogger's: Blogger Tutorial

Merubah Judul Postingan Yang SEO Friendly

Mungkin sobat bertanya - tanya dari arti judul postingan yang saya buat, Disini kita akan merubah tampilan judul postingan kita lebih SEO Friendly yang berarti Prinsipnya, judul artikel harus tampil lebih dahulu dari pada judul blog. Atau judul artikel saja yang tampil, judul blog tidak ada.biasanya ini dipergunakan dan nampak pada search engine google dan akan lebih membuat judul postingan pencarian lebih praktis.

langsung saja ke topik pembahasan, ini dkhususkan unuk pengguna Blogspot

Membuat judul artikel tampil pertama,nama blog tampil kedua

Buka Rancangan > Edit HTML > Centang Expand Template Widget > Cari kode berikut:<title><data:blog.title/></title>

Kemudian ganti semua dengan script dibawah 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>

dan kemudian simpan.

Membuat Hanya judul artikel saja yang tampak, nama blog tidak kelihatan

Buka Rancangan > Edit HTML > Centang Expand Template Widget > Cari kode berikut:<title><data:blog.title/></title>
Kemudian ganti semua dengan script dibawah ini :

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

dan kemudian simpan..
untuk mencobanya buat sebuah postingan,dan kemudian judul dari postingan anda searchdi google maka hasilnya akan terlihat

Cara membuat efek shadow pada judul posting

Label: Blogger Tutorial

Kali ini ideini akan berbagi Tutorial Membuat Effect Shadow Pada Judul Postingan, disini ideini hanya ingin merivew ilmu yang baru saja ideini pakai, yaitu Membuat Effect Shadow Pada Judul Postingan, mungkin para temen teme blogger yang sudah master tentunya tahu tutorial ini, tapi tudak ada salahnya ideini mengulas kembali demi membantu blogger lain yang mungkin sedang membutuhkan, contoh effect shadow pada postingan bisa dilihat pada homepage ideini.com, karena ideini juga menggunakan cara ini, cara Membuat Effect Shadow Pada Judul Postingan juga cukup simple dan mudah, bagi yang berminat langsung saja ini langkah - langkah Membuat Effect Shadow Pada Judul Postingan :

1. Masuk ke Blog anda.

2. Pilih tab Layout/Tata Letak ► Edit HTML

3. Saya sarankanBckup template anda dengan mengklik Download Full Template.

4. Tidak harus mencentang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►

.post h3 atau .post { (coba salah satu)

6. Setelah ketemu, tambah kode berikut ini tepat di BAWAH kode yang dicari tadi:
text-shadow: 2px 2px 3px #333; /* JANGAN DIRUBAH */

7. Sekarang Save Template dan lihat hasilnya, Semoga Berhasil

Catatan : untuk script shadow 2px 2px 3px #333 dapat disesuaikan keinginan masing

masing.

Membuat Readmore Dengan Gambar & Teks

Label: Blogger Tutorial

[imagetag] - Cara Membuat Read More Otomatis Di Blog, Blogspot, Blogger .

Tutorial blogging kali ini yaitu Cara Membuat Readmore Otomatis Menggunkan Gambar atau Teks, Sebenarnya ini adalah request dari temen saya yang kesulitan membuat Readmore, semoga dengan artikel ini dapat terbantu. Pasti sudah tahu Readmore kan, nah jika blog kamu belum mempunyai readmore, alias artikelnya masih memanjang, nah untuk itu agar tampilanya lebih rapi sebaiknya kamu memasang Readmore di blog kamu, disini saya akan memberikan Tutorial Cara Membuat Readmore Otomatis Menggunkan Gambar atau Teks, seperti judulnya dengan kode dibawah ini kamu bisa membuat Readmore yang menggunakan Icon Gambar atau hanya menggunakan Teks.

1. Login ke Blog anda
2. Buka halaman design > Edit HTML > centang Expand template widget
3. Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
Paste kode berikut tepat dibawah </head>

4. Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p> . Jika menemukan 2 kode yang sama, pilih kode yang pertama.

5. Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <img src="http://i1077.photobucket.com/albums/w479/Satriocall/Readmore3.png"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

6. Klik Pratinjau, jika sudah berhasil silahkan klik SIMPAN

Keterangan :

pada kode diatas terdapat beberapa kode yang bisa kamu ubah sesuai keinginan kamu, ini dia.
summary_noimg = 430; angka 430 adalah jumlah karakter yang akan ditampilkan jika tidak menggunakan gambar.
summary_img = 340; jika menggunakan gambar, angka 340 adalah jumlah karakter yang akan ditampilkan.
img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul.
img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail.

Kamu juga bisa mengubah Icon read more

http://i1077.photobucket.com/albums/w479/Satriocall/Readmore3.png

(klik disini untuk download Iconya)

Membuat Related Post/ Artikel Terkait Di Bawah Postingan

Label: Blogger Tutorial

Baiklah Kali ini saya ingin berbagi Tutorial Blogging yaitu Cara Membuat Related Post/ Artikel Terkait di bawah postingan. Tutorial ini sebenarnya juga untung catatan agar saya tidak lupa bagaimana cara membuatnya, namun sekalian saya share agar temen temen yang sedang mencari Tutorial Membuat Artikel Terkait di bawah postingan dapat terbantu dengan artikel ini, sebenarnya artikel terkait/ Related post dibawah postingan atau di sidebar itu sama saja, tergantung pada selera masing masing.

1. Login ke blogger.com

2. Dari halaman dasbor/dashboard, pilih dan klik Design atau Rancangan.

3. Klik Edit HTML dan tandai Expand Widget Template (sebaiknya download dulu template Anda sebagai backup untuk berjaga jaga jika terjadi kesalahan)

4. Cari kode ini <data:post.body/>

5. Jika sudah ketemu sekarang, Letakkan script code berikut ini di bawah kode <data:post.body/> yang sudah ketemu tadi.

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

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
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>
</b:loop>
</script>
</div>

</div>
</b:if>

6. Save Template, lihat hasilnya

UNIK

Translate