pub-7594223835742334 Sebuah blog diwaktu luang: Tutorial Blog
Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Friday, August 2, 2013

Cara Membuat Widget Ikan (Fish) Di Blog

Pada Kesempatan kali ini saya akan membuat posting tentang Cara Membuat Widget Ikan (Fish) Di Blog.Saya tebak, anda pecinta ikan ya? kok tau... karena membaca postingan ini, hehehe. untuk membuat widget atau animasi ikan di blog sangatlah gampang atau mudah sekali karena yang anda lakukan Klik > Klik > KLik. Di widget ikan (fish) ini anda dapat memberi makan ikan-ikan anda dengan cara di klik pada kolamnya, nantinya ikan-ikan akan (berebutan) untuk memakannya. Langsung saja


Berikut ini Langkah-langkah dan Cara-cara Cara Membuat Widget Ikan (Fish) Di Blog:
1. Pergi ke Blogger > Blog Anda
2. Lalu ke Tata Letak > Tambahkan Gadget
3. Kemudian klik Gadget lainnya
4. Cari Widget Fish, lalu klik
5. nanti ada halaman konfigurasi, lewati saja dengan scroll ke paling bawah dan klik simpan.
6. Selesai.

(: Mudah Sekali kan? :)
Memang Cara/Langkah/Tutorial ini dipersembahkan untuk pemula

Didukung oleh Google
Sekian postingan Tentang Cara Membuat Widget Ikan (Fish) Di Blog
Terima kasih,
Diaz

Cara Menghapus Tulisan Diberdayakan oleh Blogger Secara Permanen

Pada Kesempatan kali ini saya akan membuat posting tentang Cara Menghapus Tulisan Diberdayakan oleh Blogger Secara Permanen. Anda ingin menghapus Tulisan Diberdayakan oleh Blogger Secara Permanen yang seperti gambar diatas, tetapi anda tidak bisa? disinilah tempat yang tepat. Jadi bagaimana caranya? Mudah sekali, hanya dengan mengikuti cara-cara atau langkah-langkah atau tutorial dibawah ini dengan teliti dan hati-hati, anda akan bisa melakukanya.


Langsung saja berikut ini Trik Cara Menghapus Tulisan Diberdayakan oleh Blogger Secara Permanen:
1. Pergi Ke Blogger > Template > Edit HTML
2. Lalu cari kode berikut ini (cara cepat dengan CTRL+F):
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
3. Setelah ketemu, ganti tulisan berwarna merah dengan false
4. Save Template..
5. Kemudian Perti ke Tata Letak
6. Edit Widget Atribusi > Klik Hapus
7. Selesai.

Gampang ya..?? memang gampang, semua hal itu gampang tidak sulit, asal latihan dan jadikan kebiasaan. Tapi saya sarankan jangan dihapuslah..., mengapa? karena blogger sudah memberi kita layanan blogging, gratis lagi jadi mari kita hormati blogger dan google, jangan mengkhianatinya :), tapi semuanya tergantung kemauan anda ~ Up to you ~. Lihat footer blog saya ini, ada tulisannya bukan?, begitu juga dengan link/credit template yang anda gunakan apabila template buatan orang lain.

Didukung oleh Google
Sekian postingan Tentang Cara Menghapus Tulisan Diberdayakan oleh Blogger Secara Permanen
Terima kasih,
Diaz

Thursday, August 1, 2013

Cara Mengatasi The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements

Contoh Breadcrumb Blog Diaz
Pada Kesempatan kali ini saya akan membuat posting tentang Cara Mengatasi The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements. Alhamdullilah Saya baru saja menemukan solusi untuk mengatasi masalah Breadcrumbs diatas. saya mencoba memasang breadcrumbs di blog ini, dengan cara yang Cara Memasang Breadcrumb di blogspot Versi 2 ,sebenarnya saya mempunyai dua cara membuat breadcrumb tetapi yang saya gunakan disini yang versi 2. Setelah saya bereksprerimen dengan kedua cara diatas saya memilih yang versi 2 karena berhasil berjalan pada blog ini. sedangkan yang versi sebelumnya tidak jalan, malahan jalan di blog saya yang kedua ini (lewatane.blogspot.com).
aneh bukan?, bila secara logika beda template pasti akan beda strukturnya.
setelah menemukan cara mengatasi masalah The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements ini saya langsung search di google, dan ternyata belum ada 1 blog pun yang membuat postingan solusinya. kemudian dengan senang hati saya membuat cara ini untuk pertama mungkin? di google.

mungkin bila dalam beberapa hari ada yang membuat, pasti copas dari sini atau sama menemukannya (bila copas harap cantumkan sumbernya) soalnya kalau sembarangan copas nanti si blog copasernya gak tau apa-apa tentang cara ini apabila nanti dikomentari oleh pengunjungnya.

Sebelum caranya, mari kita bahas yang MUNGKIN penyebabnya:
Kan tulisan " The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements " tersebut diartikan pada google translate seperti ini: Widget dengan id "Blog1" tidak mengandung unsur: "# comment". Widget hanya dapat berisi elemen b: includable saja.

Mungkin pada struktur template yang mempunyai masalah diatas seperti ini:

Pada Blog1 :
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>

Nah di kode tersebut tidak ada kode <b:includable id='main'>, dan seharusnya seperti, ini hanya ditambahkan saja:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main'>
<b:includable id='main' var='top'>

Selesai? belum kita tinggal tambahkan </b:includable>, pada akhir blog1 ini tepatnya pada :
nanti ada kode seperti ini:
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
 </b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>

Jadi Cari kode dibawah ini:
<b:if cond='data:top.showDummy'>
 <data:top.dummyBootstrap/>
  </b:if>

Lalu tambahkan </b:includable> pada yang berwarna merah dibawah ini
Nah kan seperti ini jadinya:
<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
 </b:if>
</b:includable></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
lalu mungkin anda akan bertanya untuk apa fungsi </b:includable> itu?
fungsinya untuk penutup yang tadi anda menambahkan <b:includable id='main'>.
Diatas ini BUKAN caranya tetapi pengertian penyebabnya, kalau caranya dibawah ini.

Nah agar tidak rumit ikut cara dibawah ini:
1. Cari kode <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> , agar cepat klik CTRL+F, lalu masukan kode tersebut.
2. Setelah ketemu, lalu tambahkan <b:includable id='main'> tepat dibawahnya.
Hasilnya nanti akan jadi seperti ini :
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main'>
<b:includable id='main' var='top'>
3. Kemudian cari kode <b:includable id='backlinkDeleteIcon' var='backlink'>
4. Lalu tambahkan kode </b:includable> diatasnya.
Hasilnya nanti akan jadi seperti ini :

<b:if cond='data:top.showDummy'>
<data:top.dummyBootstrap/>
 </b:if>
</b:includable></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
5. Selesai.

Setelah selesai, dan anda ingin membuat breadcrumbsnya caranya bisa anda temui disini (versi 1) dan disini (versi 2), disarankan versi 2.


#Apabila ada Kritik, Saran,dan Pertanyaan kirim dikotak komentar.

Didukung oleh Google
Sekian postingan Tentang Cara Mengatasi The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements
Terima kasih,
Diaz

Cara Memasang Breadcrumb di Blogspot Versi 2

Pada Kesempatan kali ini saya akan membuat posting tentang Cara Memasang Breadcrumb di Blogspot Versi 2. Untuk anda yang gagal dengan cara versi satu anda bisa mencoba versi 2 ini, karena ini lebih mutakhir, tetapi yang versi 1 juga sama hanya saja tidak berjalan di blog ini (blog ini menggunakan versi 2 ini).
Setelah mendapat ini dari bloggerplugins.org, blog yang membahas tentang segala widget untuk blogger. Breadcrumb dalam bahasa indonesia berarti Tepung Rotu (ada-ada saja) atau jejak breadcrumb. Dan breadcrumb adalah bantuan untuk navigasi yang digunakan dalam user interface. jadi akan terlihat lebih user friendly dan juga seo friendly. Breadcrumb ini memberikan pengguna cara untuk berpindah lokasi mereka dalam halaman situs atau dokumen. Istilah ini berasal dari jejak tepung roti yang diprakarsai oleh Hansel dan Gretel dalam dongeng populer (ternyata ada sejarahnya juga loh).

Breadcrumb akan terlihat seperti Home » Label » Cara Memasang BreadCrumb di Blogspot
Berikut ini contoh screenshot dari breadcrumb:



Sekarang Anda tahu apa yang dinamakan breadcrumb, mari kita langsung ke caranya.

Berikut ini Cara Memasang Breadcrumb di Blogspot Versi 2:
1. Pergi Ke Template > Edit HTML
2. Sekarang di dalam template, cari kode dibawah ini
<b:include data='top' name='status-message'/>
Tambahkan kode dibawah ini tepat dibawahnya
<b:include data='posts' name='breadcrumb'/>
3. Kemudian Cari,
<b:includable id='main' var='top'>
Jika anda menemukan 2 kode tersebut, lalu cari yang keduanya. Dan tepat diatas kode tersebut tambahkan kode dibawah ini:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
kode diatas, hanya menampilkan label terakhir yang terpasang pada posting. Jika anda mau menampilkan semua label, hapuslah 2 kode yang diwarnai merah.
4. Lalu cari kode 
]]></b:skin>
Tepat diatas kode tersebut, tambahkan CSS dibawah ini:
.breadcrumbs {padding:5px 5px 5px 0px;margin: 0px 0px 15px 0px;font-size:95%;line-height: 1.4em;border-bottom:3px double #e6e4e3;}

5. Save Template dan Selesai :), Mudah bukan?!

NOTE: Untuk mengeCEK sudah muncul/tidaknya klik disini Rich Snippet
Apabila breadcrumb belum atau tidak muncul-muncul selama lebih dari 1 minggung bisa anda gunakan cara Cara Memasang Breadcrumb di Blogspot Versi 1, klik disini.


ATTENTION!
Apabila ada permasalahan munculnya tulisan :
"The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements."
Saya mempunyai postingan yang membahas solusinya:

Didukung oleh Google
Sekian postingan Tentang Cara Memasang Breadcrumb di Blogspot Versi 2
Terima kasih,
Diaz

Saturday, July 27, 2013

Kode Warna HTML Lengkap

Pada Kesempatan kali ini saya akan membuat posting tentang Kode Warna HTML Lengkap. Saya memposting ini atas dasar pusingnya saya mencari kode warna saat mengedit template saya, karena saya selalu mencari di google kode warna, dan saat diperlukan lagi cari lagi. nah agar saya tidak perlu cari lagi ya saya posting hehehe. Sekalian jadi dokumentasi untuk tools.

Kalau kodenya Bila warna merah = merah, biru = biru ya saya juga bisa. tetapi ini kodenya seperti ini Merah = #FF0000, biru = #0033CC, ya saya juga enggak bisa menghafalnya, soalnya kode warna itu banyak sekali. yang saya hafal hanya #fffff dan #00000. hehehe

Langsung saja untuk yang membutuhkan,
Dan Untuk yang lebih lengkap bisa kesini:

Didukung oleh Google
Sekian postingan Tentang Kode Warna HTML Lengkap
Terima kasih,
Diaz

Thursday, June 13, 2013

Cara Membuat Scroll Down Pada Arsip Blog

Pada Kesempatan kali ini saya akan membuat posting tentang Cara Membuat Scroll Down Pada Arsip Blog, setelah sebelumnya memposting Samsung Galaxy S5 Akan Menggunakan Bodi Alumunium?. Memasang scroll down pada arsip bisa mengehemat ruang blog anda, dan terlihat rapi. tetapi ada beberapa blogger lain  yang bilang bahwa bisa mempercepat loading blog?, tetapi menurut saya tidak karena sama saja loadingnya, hanya saja ada scroll down.

Berikut ini adalah Langkah-langkah Membuat Scroll Down Pada Arsip Blog:
1. Login ke Blogger
2. Template > Edit Template dan Cari kode ini <div id='ArchiveList'>
3. Setelah ketemu, lalu dibawah kode tersebut tempelkan kode dibawah ini 
<div style='overflow:auto; width:auto; height:250px;'>
4. Kemudian Cari kode <b:include name='quickedit'/>
5. Setelah ketemu, kemudian tempelkan kode dibawah ini diatasnya
</div>
6. Simpan & Selesai.

Hasil dari langkah-langkah diatas:
<div class='widget-content'> 
<div style='overflow:auto; width:ancho; height:250px;'> 
<div id='ArchiveList'> 
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'> 
<b:if cond='data:style == &quot;HIERARCHY&quot;'> 
<b:include data='data' name='interval'/> 
</b:if><b:if cond='data:style == &quot;FLAT&quot;'> 
<b:include data='data' name='flat'/> 
</b:if> 
<b:if cond='data:style == &quot;MENU&quot;' 
<b:include data='data' name='menu'/> 
</b:if> 
</div>  
</div> 
</div> 
<b:include name='quickedit'/>
Keterangan:
Tanda Bold yang berwarna merah diatas adalah ukuran tinggi scroll down, dan bisa anda ganti sesuai keinginan anda.
Postingan ini Didukung oleh Google.

Sekian postingan 
Tentang Cara Membuat Scroll Down Pada Arsip Blog
Terima kasih,
Diaz

Tuesday, June 11, 2013

Mengapa Blog Loadingnya Lambat dan Apa Penyebabnya?

Pada kesempatan kali ini saya akan membuat Posting Tentang SEO yaitu Mengapa Blog Loadingnya Lambat dan Apa Penyebabnya?, setelah sebelumnya saya memposting Cara Mudah Membuat Trainer Cheat Game Menggunakan Cheat Engine, Nah mungkin anda mempunyai blog dan blog anda itu lambat saat loadingnya atau lambat dimuat pasti anda akan kesal menunggu untuk memuat blog anda lambat, bukan? atau mungkin anda disengajakan hehehe. Menurut saya rata-rata blog yang loadingnya cepat itu, meload halamannya paling hanya  2-7 detik. Nah agar lebih semangat, berikut ini adalah Penyebabnya Blog Yang Loadingnya Menjadi Lambat? :

1. Javascript atau Pihak Ketiga
Yang pertama berdasarkan riset saya adalah Javascript, karena akan menghambat kecepatan loading blog. Mengapa? karena cara kerja javascript adalah meload javascript dari pihak ketiga atau situs lain, contohnya: javascript di host oleh situs www.blablabla.com/javascriptdaftarisi.js jadi internet kita harus meload script tersebut untuk muncul di blog kita, apalagi jika javascript itu banyak dan internet kita lambat. Jadi sangat disarankan untuk memperkecil penggunaan javascript di blog anda 

2. Gambar
Dan kedua juga berdasarkan riset saya adalah Gambar, Karena Jika template blog terlalu banyak gambar, apalagi bila kualitas dan ukuran gambarnya tinggi.
Jadi anda gunakanlah template yang responsif dan minimalis, maksudnya hanya berwarna murni putih atau upload gambar ke host blog sendiri. Sangat disarankan jangan menggunakan kode html src selain host " bp.blogspot.com " 

3. Widget
Mungkin widget hampir sama seperti Javascript atau pihak ketiga, karena sebagai wadah javascript, tetapi widget yang menghambat kecepatan blog adalah widget yang berisi Javascript atau Pihak Ketiga, sebenarnya ada dua macam widget, yaitu: 1. sudah ada di daftar widget atau siap pakai dan 2. Javascript atau pihak ketiga (script yang dipasang manual)

4. Posting
Yang saya maksud disini bukan postingan pada halaman postingannya, tetapi posting yang ada di homepagenya. Posting yang ada dihalaman homepage kita harus readmore atau baca selengkapnya, mengapa? karena agar tertata rapih, dan kita bisa melihat jumlah pembaca postingan itu karena akan mengklik url postingannya terlebih dahulu dan jumlah artikel yang disarankan muncul di homepage adalah 5, namun jangan lebih dari 10 posting, karena bisa memperlambat loading blognya.

5.Koneksi Internet
Sudah dipastikan bila koneksi internet anda lambat, meload blognya juga pasti lambat jadi coba tingkatkan kecepatan internetnya atau ganti provider.

Semoga dengan Postingan Mengapa Blog Loadingnya Lambat dan Apa Penyebabnya? diatas ini bisa bermanfaat bagi anda dan semua orang.
Terima kasih,
Diaz

Thursday, May 30, 2013

Cara Membuat Daftar Isi Otomatis Pada Label Tertentu

simulasi diaz-zahran-asyari.blogspot.com
Cara Membuat Daftar Isi Otomatis Pada Label TertentuHai sahabat Diaz, pada kesempatan kali ini saya akan membuat postingan tentang tutorial blogging, yaitu Cara Membuat Daftar Isi Otomatis Pada Label Tertentu setelah kemarin saya posting, Aplikasi Android Untuk Kebugaran. Dan sekarang apakah sahabat sudah tahu apa itu daftar isi?Daftar isi adalah tempat dimana postingan suatu blog yang disatukan menjadi satu halaman atau widget yang menjadi terdaftar dan terurut (namanya juga daftar isi) atau daftar isi dalam bahasa inggrisnya sitemap (untuk blog sahabat bila berbahasa inggris). Tapi yang saya posting ini untuk label tertentu, misalnya hanya untuk label berita saja, atau kesehatan saja, dsb.

Apakah Sahabat ingin melihat contohnya?, berikut ini contohnya:
contoh diaz-zahran-asyari.blogspot.com

Widget ini sudah dipasangi scroll yang berfungsi menghemat halaman sahabat. Bagi sahabat yang ingin membuat daftar isi otomatis pada label tertentu silahkan ikuti tutorial berikut ini:

Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu

1. Login atau masuk ke akun blogger sahabat.
2. Klik Tata Letak -> Tambah Gadget -> HTML/Javascript . Tetapi untuk desain blogger lama adalah sebagai berikut: Rancangan -> Elemen laman -> Tambah Gadget ->HTML/Javascript
3. Masukkan kode dibawah ini kedalam kotak yang di sediakan., kemudian berikan judul bebas sesuai sahabat inginkan.



<div style="overflow:auto; width:auto; height:150px; padding:5px;border:0px solid #000000; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='https://daftarisidiaz.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://diaz-zahran-asyari.blogspot.com/feeds/posts/default/-/Tutorial%20Blogging?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

Keterangan! WAJIB dibaca 

  • width:auto = adalah menunjukkan bahwa ukuran lebar scroll box akan menyesuaikan dengan lebar sidebar.
  • height:100px = adalah menunjukan ukuran tinggi scroll box sebesar 100px, dan ukurannya bisa ganti sesuai keinginan sahabat.
  • border:1px solid #e6e4e3 =  adalah menunjukan ukuran, jenis dan warna dari border. 1px adalah tebal border, solid adalah jenis border ( daftar jenis border bisa sahabat temui, klik disini!) dan #e6e4e3 adalah warna border.( kode warna bisa sahabat temui,klik disini! )
  • font-size = adalah menunjukan ukuran huruf.
  • var numposts = 100; = adalah jumlah maksimal list yang akan ditampilkan, apabila postingan anda dalam label tertentu sudah melebihi 100, ganti 100 menjadi 200 atau selebihnya.
  • <ol> = adalah menunjukan list nomor atau numbered list , sahabat bisa menggantinya menjadi bullet list dengan kode <ul>
  • http://diaz-zahran-asyari.blogspot.com adalah menunjukan url blog ini, jadi ganti dengan alamat atau url blog sahabat.
  • Tutorial%20Blogging  adalah menunjukan label, jadi ganti dengan label yang sahabat inginkan. Perhatikan penulisan labelnya. sesuaikan dengan yang label yang ada, dan jika satu huruf saja salah penulisannya, maka daftar isinya tidak akan muncul. 
  • %20 adalah menunjukan Spasi, jadi ganti spasi dengan kode %20.
3. Klik simpan. Selesai :)

Untuk menampilkan daftar isi lebih dari satu label, misalnya untuk label Tutorial Blogging dan Tutorial Komputer, maka kode html yang harus sahabat gunakan adalah seperti dibawah ini:



<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #e6e4e3; font-size:15px;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script>
<h3>Tutorial Komputer</h3>
<ol>
<script type='text/javascript' src='https://daftarisidiaz.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://diaz-zahran-asyari.blogspot.com/feeds/posts/default/-/Tutorial%20Komputer?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>

</ol>
<br/>
<h3>Tutorial Blogging</h3>
<ol>
<script type='text/javascript' src='https://daftarisidiaz.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://diaz-zahran-asyari.blogspot.com/feeds/posts/default/-/Tutorial%Blogging?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>

</ol>
</ol></div>

Keterangan :

  • Sesuaikan tulisan yang berwarna merah dengan url blog sahabat.
  • Sesuaikan tulisan yang berwarna biru dengan label yang akan sahabat gunakan.
Sekian Cara Membuat Daftar Isi Otomatis Pada Label Tertentu
Terima kasih,
Diaz

keywords:
Cara Membuat Daftar Isi Otomatis Pada Label Tertentu,  Berdasarkan Label, Menurut Label, Untuk Label


Cara Membuat Daftar Isi Otomatis Pada Label Tertentu
Reviewed by Reader on 30 Mei 2013
Rating: 5

Tuesday, May 28, 2013

Cara Memasang Breadcrumb di Blogspot

Cara Memasang Breadcrumb di Blogspot, Postingan diaz sekarang akan membahas tentang tutorial blogger, walau saya jarang memposting tentang kategori blogger. Apabila anda belum mengetahui pengertian apa itu Breadcrumb di Blog, berikut ringkasannya. Menu/Navigasi Breadcrumb adalah Navigasi yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari rootnya (Home) hingga ke posting/artikel atau Fitur navigasi yang terletak di atas atau bisa juga di bawah judul postingan, yang biasa kita kenal dengan nama breadcrumbPada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan atau link internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat.
Jadi mudahnya seperti ini : 
Robot search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.



Langsung saja pada langkah-langkah membuat breadchumb ini:


1. Seperti biasa anda harus login ke Blogger.2. Langsung tuju Edit HTML.3. Klik Expand Template Widget.4.Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>
.breadcrumbs{  
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef} 
5.Setelah itu, cari kode seperti ini :
<div class='post hentry'>
    6.Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><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:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>
    Selesai.

    (Referensi: maskolis.com)

    Untuk pertanyaan terkait postingan diatas jangan sungkan-sungkan untuk berkomentar.
    Sekian Postingan Cara Memasang Breadcrumb di Blogspot
    Terima Kasih.
    Diaz

    Thursday, May 16, 2013

    Cara Membuat Widget Scroll Down Di Blog

    Fungsi dari Cara Membuat Widget Scroll Down di Blog adalah untuk menghemat tempat, sehingga akan tampil rapi di dalam blog.



    Cara untuk membuatnya juga cukup mudah dan bisa langsung teman-teman praktekkan. Ok, ikuti langkah-langkah di bawah ini:
    1. Copy paste kode di bawah ini (bisa teman-teman taruh di kotak add a gadget (HTML/Javascript)/edit HTML/halaman postingan blog teman-teman): 



    <div style="border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 60%; height: 250px; background-color: #FFFFFF;"> ISIKAN KODE SCRIPT link/gambar/tulisan disini </div>
    2. Sesuaikan ukuran lebar (width) dan tinggi (height) nya sesuai dengan templates blog teman-teman,
    3. Tulisan yang berwana merah silahkan teman-teman ganti dengan kode script banner/widget atau foto teman-teman semua,
    4. Jika sudah maka tinggal di save dan lihat perubahannya. Selesai dan selamat mencoba 
    Membuat Widget Scroll Down di Blog !

    Sumber dan Sponsor : Markas Tutorial
    Cara Membuat Widget Scroll Down Di Blog
    Diulas oleh Diaz Zahran Asyari on 16 Mei 2013
    Rating: 5