Blog Kang Fatur: Tips Trik Blog

    Social Items

Home / Tips Trik Blog
Showing posts with label Tips Trik Blog. Show all posts
Showing posts with label Tips Trik Blog. Show all posts

Bismillah, selamat sore sobat blog semuanya. Pas tadi saya buka Blog saya ini ada pertanyaan dari Sabahat Blogger yaitu Alya Soraya yang menanyakan "gimana cara membuat widget buat menampilkan kategori berbentuk folder seperti yang ada pada direktori dmoz dsb". Sayapun terkejut yang di tanyakan Alya, Apa yang kaya gimana?? hehehe. Akhirnya saya memutuskan diri untuk keliling mencari solusi dan akhirnya Alhamdulillah saya menemukan yang mirip sekali dengan yang di tanyakan oleh Alya yaitu menampilkan kategori berbentuk folder, yang namanya Menu dTree. Mudah-mudahan jawaban ini atau postingan ini benar apa yang di tanyakan oleh Alya. Karena Menu dTree ini adalah menu yang menyerupai/mirip menu explore dan menu ini dapat kita tampilkan ke dalam web/blog kita.

Untuk memulai memasang menu dTree ini, seperti biasa silahkan Sobat login dulu ke akun Blogger Sobat. Lalu klik tata Letak >> Klik Edit HTML

1. Letakkan kode di bawah ini di atas kode </head>

<link rel="StyleSheet" href="https://sites.google.com/site/efekefek/file-js/dtree.css" type="text/css" />
<script type="text/javascript" src="https://sites.google.com/site/efekefek/file-js/createdtree.js"></script>
2. Kemudian klik Simpan Template

Selanjutnya yang harus Sobat lakukan adalah menaruh kode HTML dTree ke dalam gadget sidebar Blog Sobat.

Caranya klik Tata Letak >> Tambah Gadget HTML dan taruh kode HTML berikut ini

<div class="dtree">
<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Kang blog');
d.add(1,0,'Folder 01','#.html');
d.add(2,1,'Sub Folder 01',' #.html');
d.add(3,2,'Sub/file Sub Folder 01',' link anda.html');
d.add(4,0,'Folder 02',' #.html');
d.add(5,4,'Sub Folder 02',' #.html');
d.add(6,5,'Sub/file Sub folder 02',' link anda.html');
d.add(7,0,'Folder 03',' #.html');
d.add(8,7,'Sub Folder 03',' #.html');
d.add(9,8,'Sub/file Sub folder 03',' link anda.html','Pictures I've taken over the years','','','img/imgfolder.gif');
d.add(10,0,'File[non-folder]',' link anda.html');
d.add(11,0,'File[non-folder]',' link anda.html');
d.add(12,0,'File Single',' link anda.html','','','img/trash.gif');
document.write(d);
//--> </script>
</div>


Setelah di Copy Paste Simpan Gadget Sobat

Ok, kita mulai mengenal bagian mana saja yang harus kita atur untuk memulai membuat folder serta yang mana juga yang harus kita atur untuk membuat file saja. Untuk memulai mengenal bagian yang harus diatur dalam pembuatan folder dan file, agar parasobat hanya memperhatikan nomor-nomor yang telah saya tandai dengan warna-warna (untuk tulisan #.HTML, kita bahas setelah masalah nomor)

Nah, apakah parasobat bertanya apa maksud dari nomor2 yang acak2 itu? Sebenarnya itu bukan nomor acak2an, akan tetapi nomor unik yang tersusun rapi.

Coba parasobat perhatikan bedanya nomor yang berada di sisi kanan dan sisi kiri. Yang berada di sisi kiri sesuai dengan urutan:
1
2
3
dst

Sedangkan yang berada di sisi kanan gak beraturan.


Sebenarnya angka-angka tersebut dapat parasobat baca seperti berikut ini:

1 ,o ===>> Artinya adalah Folder Utama

2 ,1 ===>> Dan ini adalah Sub dari folder utama, oleh karena itu saya memberi warna angka satu dengan warna yang sama, yaitu merah. Kalau parasobat ingin menambahkan sub folder utama yang satu lagi di bawahnya, maka nanti teman2 tulis 3,1 atau d.add(3,1,'Sub Folder 02',' #.html'); (karena pada intinya folder tersebut masih mengikuti angka satu/folder utama)

3 ,2 ===>> Artinya adalah sub dari sub folder utama, bagian yang ini bisa jadi folder dan juga bisa jadi file. Apa maksudnya? Maksudnya adalah, pada intinya semua file yg memilki sub akan menjadi folder, sedangkan yg tidak memilki sub maka akan menjadi file selamanya (selama belum ada sub yang menumpang kepadanya), kalau parasobat bingung, sobat bisa memperhatikan preview/gambar di atas. Coba dilihat tuh, setiap jajaran ketiga pasti file kan? Nah itu karena yang jajaran ketiga adalah bagian yg terakhir alias bagian yg sudah tidak memilki sub lagi.


 OK, untuk yg masalah pembuatan folder dan file selesai...

Selanjutnya masalah yang berada pada bagian kanan, yaitu tulisan " #.HTML" dan "Link anda.HTML"
Kenapa pada bagian yang saya tandai dengan warna merah saya beri tanda " #" bukannya menggunakan "Link anda"?
Itu semua karena terletak pada fungsi masing-masing. Apa maksudnya...

Maksudnya yang telah saya tandai dengan " #", artinya adalah folder utama atau folder sub utama. Dengan begitu para pengunjung langsung tahu kalau itu bukan file akan tetapi pengantar file alias folder. Ini semua merupakan pertimbangan saya pribadi, mungkin beberapa teman Blogger menganggap menu ini benar-benar mirip menu explorer, memang mirip tapi hanya tampilannya serta sifatnya yg menyerupai menu dropdown, akan tetapi bedanya pasti parasobat tahu. Kalau di menu explorer kita bisa membuka folder dengan cara mengklik tulisannya, misal: My Documents atau juga bisa dengan cara mengklik tanda plus-minus yang terletak pada samping kirinya. Akan tetapi untuk menu dropdown ini beda, kita hanya bisa mengklik tanda plus-minusnya saja untuk bisa menampilkan menu yg berada di dalamnya. Bagaimanaparasobat sudah ada bayangankan...?


Lalu untuk tulisan " link anda.HTML" itu bisa diganti dengan link Sobat. Dan pastikan kalau yang Sobat sisipi dengan link tersebut sudah merupakan sebuah link yg tidak bersub lagi, maksudnya bukan folder

Semoga bermanfaat




KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Cara Membuat Menu dTree di Blog

Salam kangen semua para blogger, lama sekali saya gak posting-posting sudah hampir satu bulan lebih, ya dikarenakan kesibukan pribadi yang tidak mau ditinggalin hehe.

Baik para sobat semua kita langsing aja kali ini saya akan membahas tutorial tentang cara membuat Artikel Terkait di Sidebar (related post)dimana pengunjung akan disuguhkan artikel terkait milik sobat di sebelah postingan atau di sidebar, bukan dibawah postingan yang selama ini kita lihat.



Sebenarnya artikel terkait ini bisa juga diletakkan dibawah postingan, tapi saya tidak akan membahasnya karena sudah pernah saya bahas di postingan saya yang lalu.



Baiklah, sekarang ikuti langkah-langkahnya dibawah ini :



Langkah I

1. Seperti biasa login dulu ke blogger.
2. Masuk ke Elemen Halaman.
3. Kemudian Tuju Edit HTML.
4. Klik Expand Template Widget.
5. Letakkan kode berikut ini sebelum kode </head>


<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>



6. Kemudian cari kode seperti dibawah ini :



<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>



7. Kemudian ganti kode di atas dengan kode di bawah ini :



<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>


CATATAN :
Perhatikan kode max-results=15, angka 15, itu merupakan jumlah artikel terkait yang akan ditampilkan di sidebar. Sobat bisa menggantinya sesuai keinginan.


8. Simpan Template, sampai disini proses Edit HTML sudah selesai.
9. Sekarang sobat tuju Tata Letak, kemudian klik Tambah Gadget pada sidebar milik sobat.
10. Pilih yang HTML/Javascript, kemudian masukkan kode berikut :



<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>



11. Jangan lupa beri judul, lalu klik Simpan.



Sampai disitu sudah selesai pembuatan artikel terkait di sidebar. Namun artikel terkait akan selalu muncul di halaman depan blog, untuk membuat artikel terkait hanya muncul pada halaman postingan saja, maka sobat harus mengubah beberapa kode lagi.

Berikut langkah-langkahnya.

Langkah II

1. Klik Edit HTML.
2. Klik Expand Template Widget.
3. Cari kode yang seperti ini, dan sisipkan kode yang berwarna merah :



<b:widget id='HTML11' locked='false' title='Artikel Terkait Lainnya' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>



4. Kemudian klik Simpan Template.

PERHATIAN :
Pada kode yang berwarna hijau tebal adalah kode/kata judul widget yang tadi sobat buat.
Kemudian pada kode yang bercetak Kuning, itu sebenarnya sobat abaikan saja apa bila tidak sama kodenya.. karena itu hanya urutuan widget pada blog saja.
Nah, pada kode yang berwarna merah, itu sebenarnya kode yang berfungsi agar widget Related Post hanya tampil pada postingan blog saja.



OK, Mungkin tutorial kali ini sampai disini saja dulu, selamat mencoba aja dan semoga berhasil dan bermanfaat di hati para soba.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Loading



Membuat Artikel Terkait di Sidebar (Related Post)

Cara membuat breadcrumb navigation atau navigasi breadcrumb di blogspot ini adalah bagian ke-2 (II) sebagai update dari postingan sebelumnya yang ada dihalaman Cara Membuat Breadcrumb - Pasang Breadcrumb Navigation Blogspot.


Update cara membuat breadcrumb navigation ini Saya buat karena ada request dari Blogger Cerita Dewasa melalui komentar dihalaman Cara Membuat Navigasi Halaman Bernomor yang commentnya seperti ini: "He oiya boleh ngrequest ndak? Cara buat navigasi breadcrumbs yang bertanda '>' itu gimana ya, punyaku khan navigasi breadcrumbsnya kek gini '>>'." dan ini kutipan jawaban saya ke comment Cerita Dewasa: breadcrumbs yg saya punya sebenarnya sama dgn tutorial yg pernah saya buat tpi saya modif lagi agar lbh seo friendly, ok deh insya allah saya buatkan update modifikasinya, ditunggu ya dan terima kasih atas kunjungannya..

Alhamdulillah sobat, hari ini saya sempat membuatkan tutorialnya. Silakan lihat cara membuat navigasi breadcrumb - breadcrumb navigation update berikut ini:

* Login ke blogger.com > klik Design/rancangan > Edit HTML > centang Expand Template Widget, jangan lupa download full template dulu sebagai backup

* Copy kode Optimized CSS berikut:

.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3;


Dan letakan sebelum kode ]]></b:skin>

* Selanjutnya cari kode

<b:include data='top' name='status-message'/>

Hapus dan ganti dengan kode berikut

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>


* Cari lagi kode

<b:includable id='main' var='top'>

Hapus dan ganti dengan kode Optimized HTML berikut

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- No breadcrumb on home page--> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <p class='breadcrumbs'> <span class='post-labels'>Results found at &gt; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'>&gt; <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast == &quot;true&quot;'>&gt; </b:if> </b:loop> <b:else/> &gt; </b:if> <span><data:post.title/></span> </b:loop> </span> </p> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <!-- breadcrumb for the label archive and search pages - blogspot seo friendly breadcrumbs by http://diarykudiblog.blogspot.com--> --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Home</a> &gt; Archives for <data:blog.pageName/> </span> </p> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == &quot;&quot;'> <a expr:href='data:blog.homepageUrl'>Home</a> &gt; All posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> Posts filed under &gt;<data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'>


* Save template dan lihat hasilnya.

* Tambahan: Jika ingin judul posting diakhir breadcrumb Anda memuat link seperti di blog ini, silakan ganti kode

<span><data:post.title/></span>

Dengan kode

<b:if cond='data:post.url'> <a expr:href='data:post.url'><span><data:post.title/></span></a></b:if>

* Save Template, selesai.


Selamat mencoba membuat breadcrumb navigation - Blogspot Update Bagian (II) di blog Anda.

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Cara Membuat Breadcrumb Navigation - Blogspot Update Bagian 2

Link Otomatis Terbuka Tanpa di Klik - kalo ngomongin soal link emang seru deh . . gimana engga, buat orang-orang yang bergaul ama dunia internet khususnya blog/website pasti ga bakalan jauh dari yang namanya link.
ok... kali ini saya mau share salah satu cara buat ngemodifikasi link, bukan cara baru sih dan bisa di bilang cara ini udah jadi rahasia umum yang diketahui banyak orang. tapi engga apa-apa lah, yang penting berbagi... sayang kan kalo ilmu di simpen sendiri aja. . .


Coba perhatiin link dibawah ini deh !!

HTML Color Code

Kode link diatas:

<a href="http://ade-tea.blogspot.com/2011/09/kode-warna-html-v4.html">HTML Color Code</a>


Link di atas ngegunain kode link yang biasa. Coba linknya disorot pake mouse deh !! Link tersebut engga akan terbuka secara otomatis (buat buka linknya harus di klik).

Sekarang coba perhatiin link dibawah ini !!

HTML Color Code

Kode link di atas:

<a href="http://ade-tea.blogspot.com/2011/09/kode-warna-html-v4.html"><span style="color:lime;">onMouseover="window.location=this.href"</span>&gt;</a>


Link di atas kalo disorot mouse akan terbuka secara otomatis sebab kode linknya udah ditambahin onMouseover="window.location=this.href"

Sedikit ulasan tentang cara modifikasi link, mudah-mudahan bermanfaat . . .


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Link Otomatis Terbuka Tanpa di Klik

SEO FRIENDLYBerbagai cara memang telah dilakukan untuk meningkatkan optimasi SEO blogspot, seperti halnya dalam memilih template blog. Memilih template blog yang benar memang mutlak diperlukan. Jika dalam memilih template blog dengan asal-asalan, alhasil nantinya SEO blogspot kita akan kacau.

Maka pilihlah template blog Sobat dengan benar. Benar disini maksudnya adalah tampilannya bagus, tidak mencolok mata, cocok untuk tema blog kita, dan yang lebih penting lagi adalah SEO Friendly.

Nah, jika mungkin Sobat ingin membuat template blog Sobat agar menjadi template SEO friendly maka cara-cara di bawah ini mungkin bisa bermanfaat buat Sobat. Berikut cara-caranya!

  1. Page Title
    Biasanya format page title dari blogger adalah seperti ini, JUDUL BLOG : JUDUL POSTING. Nah, agar blog kita lebih disukai oleh Google sehingga ujung-ujungnya blog kita jadi rame, kita harus merubah format page title standar itu menjadi seperti ini, JUDUL POSTING | JUDUL BLOG.

    Caranya cari kode berikut ini di Edit HTML, cukup dengan menekan tombol Ctrl+F pada keyboard!

    <title><data:blog.pageTitle/></title>

    Kalo udah dapet kodenya, silakan Sobat hapus dan ganti dengan kode berikut 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>



    Atau Sobat juga bisa tambahkan dengan beberapa kata kunci (keyword).

    <b:if cond='data:blog.pageType == "item"'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/> | KATA KUNCI SOBAT| KATA KUNCI SOBAT </title>
    </b:if>



    Ganti kode "KATA KUNCI SOBAT" dengan keyword yang Sobat incar. Setelah semua selesai jangan lupa untuk save template.

  2. Meta Keyword dan Deskripsi
    Suatu mesin pencari seperti Google sangat menyukai sebuah website/blog yang jelas tema dan isi content-nya. Jadi, Sobat harus tambahkan suatu tag yang namanya meta tag. Caranya adalah dengan menambahkan kode berikut ini sebelum kode <b:skin><![CDATA[/*.

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta name="description" content="DESKRIPSI BLOG SOBAT" />
    <meta name="keywords" content="KATA KUNCI, KATA KUNCI, KATA KUNCI" />
    </b:if>


    Setelah itu, save template Sobat.

  3. Memasang Breadcrumbs
    Breadcrumbs adalah menu navigasi yang ada di atas sebuah posting atau artikel. Contohnya bisa dilihat diblog saya ini. Cara pasangnya juga sudah banyak dibahas di blog-blog guru blogging.

  4. Memasang Related Post
    Related post sangat bagus untuk SEO maupun buat pengunjung. Jadi pasanglah segera related post di blog Sobat. Caranya sudah banyak dibahas di blog-blog para guru blogging.

  5. Mematikan Setting Blog Archive (Arsip Blog)
    “Lho?”
    “Buat apa?”

    Begini, Google sangat membenci dengan yang namanya duplicate content. Jadi ketika kita mengaktifkan opsi blog arsip, misalnya kejadiannya seperti ini, Sobat ingin membuat sebuah blog di blogger.com. Lalu membuat 3 posting, 1 buah setiap hari. Maka di halaman utama atau homepage Sobat akan ada 3 posting dan sebuah link arsip seperti ini, http://BLOGSOBAT.blogspot.com/2007_03_01_archive.html, yang memunculkan 3 posting yang sama dengan yang dimunculkan oleh homepage. Intinya, 2 buah link yang memunculkan sebuah halaman yang sama. Bagi Search Engine apa lagi Google, ini adalah masalah serius. Oleh karena itu kita harus me-nonaktifkan opsi arsip.

    Caranya, cukup klik tab Setting, pilih Archiving. Nah, pada bagian Archiving Frequency ubah menjadi No Archive. Selesai sudah! :)

  6. Menambahkan Kode ‘Rel=Canonical’
    Gunanya kita menambahkan ‘rel=canonical’ adalah untuk menghindari konten ganda, karena seperti para Master of SEO bilang bahwa Google sangat tidak dapat mentolerir sebuah duplicate content. Caranya mudah, cukup klik Edit HTML, lalu Sobat tambahkan kode berikut setelah kode <head>.

    <link expr:href='data:blog.url' rel='canonical' />


    Save template dan selesai.

  7. Tag Heading
    Google sangat menyukai sebuah tulisan atau judul dengan tag H1. Oleh karena itu ubahlah ukuran judul posting Sobat dengan tag H1. Caranya cari kode berikut!

    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>
    </b:if>

    Kode yang dicetak tebal dihapus dan diubah dengan tulisan h1. Setelah itu tambahkan kode berikut sebelum kode ]]></b:skin>.

    h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }


Nah, mungkin cukup sekian dulu dari saya tentang bagaimana cara mengedit template blog agar SEO friendly kali ini. Sebelumnya tips ini saya rangkum dari berbagai sumber ketika saya lama belajar SEO blogspot walaupun SEO blog saya belum seoptimal blog master di luar sana. :)

Semoga bermanfaat dan sukses selalu!

Terima kasih.

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Cara Mengedit Template Blog Agar SEO Friendly

Aatas permintaan sahabat SERI kali ini saya setelah berbuka puasa dan sebelum tarawih menyempatkan diri untuk menulis sebuah postingan yang singkat. Seri menuliskan di kotak komentar meminta agar saya mebantunya dia meminta tutorial tentang "Menampilkan Next Page Hanya Judul Postingan" saja yang muncul.Dan mudah-mudahan postingan ini menghasilkan apa yang di inginkan oleh Seri.

Oke langsung aja ke topik pembicaraan yaitu menampilkan next page dengan judul postinganya saja di main blog. Gimana maksudnya next page sih?
Maksud Saya "next page" itu adalah halaman dari blog selain halaman depan itu loh! apabila Sobat mengklik link "Older post" atau "Posting lama" di main page hanya muncul judul postingnya saja.

Seperti Sobat jika mengklik link "older post" di blog kang rohman

Next Page

Adapun cara memasangnya adalah sebagai berikut :

Masuk menu Layout kemudian masuk menu Edit HTML dan centang tanda "Expand widget templates"

Kemudian cari kode seperti di bawah ini :

<b:include data='post' name='post'/>

Bila sudah ketemu. Ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style='border: 2px outset rgb(189, 189, 189); width: 500px; padding: 10px; background-color: rgb(247, 248, 224); text-align: left;'>
<a expr:href='data:post.url'>
<data:post.title/></a></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


PERHATIAN
Untuk kode yang berwarna Merah silahkan sesuaikan dengan kehendak sobat, Mulai dari Lebar, Warna Background, dan Warna Border


Bila langkah-langkah di atas sudah selesai klik tombol SIMPAN/SAVE

Kemudian lihat hasilnya, mudah-mudaha berhasil. Khususnya buat sahabat Seri Bahasa



KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Menampilkan Next Page Hanya Judul Postingan

Assalamu'alaikum salam Blogger, sebelumnya Saya ucapkan selamat Berpuasa, setelah lama Saya gak posting di blog untuk kesempatan ini saya meluangkan waktu untuk membuat postingan khususnya untuk para sobat Kang Fatur semua, ya sambil ngabuburit dibulan Ramadhan mudah-mudahan postingan ini menjadi sebuah Amal bagi Kang Fatur dan dapat bermanfaat bagi pa ra sobat semua.

Postingan kali ini Kang Fatur mao mengetengahkan tutorial sederhana yaitu tentang "Pasang Tombol Ganti Background Blog". dengan adanya tombol ini Blog kita bisa di ganti-ganti dengan bermacam-macam efek Background Warna sesuai kesukaan kita.

Untuk DEMO silahkan klik salah satu warna di bawah ini dan lihat perubahannya :















OK, Kang Fatur tidak akan banyak-banyak berbicara lagi kita langsung aja ke tahap pembuatan Tombol Ganti Background Blog :

  1. Seperti biasa LogIn ke Blogger sobat
  2. Pada halaman Dasbor klik Rancangan
  3. Pada Halaman Elemen Laman klik Tambah Gadget / add a gadget, pilih yang HTML/Javascript
  4. Kemudian Copy dan Paste Kode di bawah ini di ktak HTML/Javascript


    <center><script type="text/javascript">
    function bgChange(bg)
    {
    document.body.style.background=bg;
    }
    </script>

    <table border="1" width="660" height="20">
    <tr> <td
    onclick="bgChange('#FFFFFF')" bgcolor="white">
    <td
    onclick="bgChange('#000000')" bgcolor="#000000">
    <td
    onclick="bgChange('#F0E68C')" bgcolor="#F0E68C">

    <td
    onclick="bgChange('#E0FFFF')" bgcolor="#E0FFFF">
    <td
    onclick="bgChange('#98FB98')" bgcolor="#98FB98">
    <td
    onclick="bgChange('#B0E0E6')" bgcolor="#B0E0E6">
    <td
    onclick="bgChange('#87CEFA')" bgcolor="#87CEFA">
    <td
    onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9">
    <td
    onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">

    <td
    onclick="bgChange('#E6E6FA')" bgcolor="#E6E6FA">
    <td
    onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">

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

    <div class='clear'></div></center>


  5. Kemudian Klik tombol Simpan/Save



PERHATIAN
  • Untuk kode yang berwarna Biru silahkan sobat ganti dengan nama warna yang di pasang oleh sobat. dan
  • Untuk kode yang berwarna Merah silahkan sobat ganti dengan kode warna yang sobat inginkan, untuk kode warna silahkan klik disini ata disini


Selamat mencoba, dan semoga bermanfaat. Untuk tombol Ganti Background dengan Gambar akan menyusul.


KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Pasang Tombol Ganti Background Blog

Subscribe to: Posts (Atom)

Subscribe Our Newsletter

Notifications

Disqus Logo