Bersenang-senanglah di Dunia Maya dan Dunia Nyata

Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Saturday, August 3, 2013

Cara Membuat Widget Ikan (Fish) Di Blog

Read More
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

Friday, August 2, 2013

Cara Menghapus Tulisan Diberdayakan oleh Blogger Secara Permanen

Read More
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.

Thursday, August 1, 2013

Read More
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).

Cara Memasang Breadcrumb di Blogspot Versi 2

Read More
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).

Sunday, July 28, 2013

Kode Warna HTML Lengkap

Read More
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

Read More
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

Wednesday, June 12, 2013

Mengapa Blog Loadingnya Lambat dan Apa Penyebabnya?

Read More
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

Read More
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

Read More
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

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