Risky666: Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Minggu, 06 Maret 2011

Cara Membuat Navigasi Breadcrumb

Pada pertemuan kali ini kita membahas tentang Navigasi breadcrumb atau breadcrumb navigation. Pasti penasaran kan gimana bentuknya, coba lihat contoh di bawah ini.

Klik gambar untuk memperbesar

Navigasi breadcrumb atau breadcrumb navigation adalah sebuah link tautan internal pada bagian atas atau bawah halaman situs web yang memudahkan pengunjung untuk kembali ke halaman sebelumnya atau ke halaman dasar dengan cepat. Namun saat ini penempatan breadcrumb lebih sering digunakan pada bagian atas halaman artikel posting. Urutan link breadcrumb dimulai dari home (homepage) dan diakhiri dengan judul artikel posting yang sedang dibaca.

Contohnya: Browse » Home » SEO » Cara Membuat Navigasi Breadcrumb.Nah untuk membuatnya sangat lah mudah. ikuti langkah-langkah di bawah ini.

Log in dulu ke blogger
Tata letak
Edit HTML
Download tamplate anda dan
Kasi tanda centang di kotak kecil kanan atas
Kemudian cari kode ]]></b:skin>
Letak kan kode dibawah ini persis di atas nya
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
Kemudian temu kan kode ini <div class='post hentry uncustomized-post-template'>
Copy paste kode berikut tepat di bawah kode diatas
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>

Browse » <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'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
Kemudian simpan tamplate
Lihat blog kamu dan coba klik satu judul artikel dan lihat hasilnya.

Selamat mencoba.............

cara membuat Navigasi Breadcrumb di blog, cara memasang label Navigasi Breadcrumb, Navigasi Breadcrumb tutorial, langkah memberi Navigasi Breadcrumb pada blogspot, tutorial Navigasi Breadcrumb.

Tips Praktis Mempercepat Koneksi Internet

Situs jaring sosial seperti Facebook secara langsung memacu jumlah pengguna internet indonesia. dari yang tak tahu apa-apa tentang internet, kini banyak orang yang semakin mengenal internet. namun lambatnya kecepatan koneksi atau akses internet sering dikeluhkan sebagian orang, baik menggunakan laptop ataupun komputer pribadi. oleh sebab itu perlu dilakukan beberapa cara agar "perjalanan" jelajah anda lebih lancar dan menyenangkan.

Berikut langkah-langkah Praktis Mempercepat koneksi Internet anda:

Cara pertama yang dapat anda lakukan adalah dengan menonaktifkan berkas atau program-program yang sering menghambat kecepatan tampilan laman (web), seperti laman gambar, adove flash plug-in, java Applets dan JavaScript pada fasilitas pengaturan browser yang tersedia. dengan meminimalkan fitur-fitur diatas koneksi akan lebih cepat karena tampilan laman lebih ringan.
Disarankan untuk mencari browser alternatif yang hanya menampilkan laman dalam bentuk HTML (Hyper Text Markup Language). hal ini akan memaksimalkan kecepatan jelajah anda karena bandwith yang diperlukan berkurang. selain itu, anda bisa "berburu" berbagai macam aplikasi yang tersedia di dunia maya untuk membuat tampilan web menjadi minimalis atau aplikasi yang secara otomatis dapat memisahkan dan mengubah ukuran halaman yang besar menjadi lebih kecil.
Perlu diketahui bahwa pada dasarnya sebuah komputer pribadi membutuhkan media Network Interface Card (NIC) atau Ethernet Card untuk terhubung ke jaringan. Ethernet bekerja menggunakan protocol TCP/IP untuk menjalin komunikasi dengan media lainnya dalam jaringan. untuk mempercepat koneksi, maksimalkan fungsi Ethernet Card dengan konfigurasi aplikasi optimalisasi TCP/IP. anda dapat mengunduh aplikasi tersebut dari internet.
Bagi para pengguna laptop cara yang "unik" ini layak untuk dipertimbangkan, yaitu dengan menggunakan antena 2.4 GHz. bahan pembuatan antena ini terbilang sederhana, contohnya kaleng bekas dan penggorengan/wajan. bagi mereka yang mengandalkan sinyal wireless untuk koneksi, dapat mengakses langkah pembuatan antena tersebut melalui situs-situs pencarian di internet. namun perlu diperhatikan peraturan-peraturan hukum yang berlaku.
Nah saatnya jari-jemari anda menari-nari untuk memperluas wawasan lewat internet...

Selamat mencoba........

cara Mempercepat Koneksi Internet, agar koneksi internet jadi cepat, tutor Mempercepat Koneksi Internet, langkah Mempercepat Koneksi Internet.

Cara menghubung Blog ke twitter

Berikut cara menghubung atau memasukkan artikel blog ke situs twitter:

Kunjungi situs twitterfeed.com terlebih dahulu
Kemudian klik Register
Isi form yang disediakan.
Email address : Masuk kan alamat Email anda
Password : Masukkan Padsword (Ingat password jangan sampai lupa)
Confirm Password : Masukkan Passwor sekali lagi dengan Password yang sama
Kemudian klik Create Account
Selanjutnya klik Connect your feed to your twitter account
Selanjutnya klik Username dan Password kita kemudian klik allow
Setelah itu anda di suguhkan form kemudian isi form tersebut
Feed Name : judul blog anda
Rss Feed URL : Masukkan Rss Feed URL blog anda seperti ini
http://namabloganda.blogspot.com/feeds/posts/default
ganti tulisan berwarna merah dengan alamat blog anda.
kemudian klik Test Rss Feed
Apa bila berhasil maka akan muncul bacaan "Feed Parsed OK" dibawah Rss Feed URL
Kemudian klik Create Feed Selesai

Sekarang blog anda sudah terhubung dengan Twitter, untuk melihat hasilnya anda terlebih dahulu buat posting baru di blog kemudian buka account twitter anda, maka postingan blog anda akan terlihat di tweet atau update account twitter yang anda miliki.

Selamat mencoba.........

cara menghubungkan Blog ke twitter, langkah membuat Blog ke twitter, tutorial menghubungkan Blog ke twitter, Blog ke twitter tutor.

Cara memasang Readmore Otomatis 2 di blogspot "Tutorial blogspot"

Login ke blogger
Klik Rancangan
Edit HTML
Centang kotak kecil "Expand widget template"
Kemudian cari kode </head>
Kalau sudah ketemu pastekan kode di bawah ini di atas kode tersebut
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Kemudian cari kode <data:post.body/>
Kalau sudah ketemu ganti kode <data:post.body/> tersebut dengan kode di bawah 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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Simpan Template anda.
Jika anda masih menggunakan Readmore versi lama anda harus menghapus terlebih dahulu kode lama tersebut. cara menghapusnya anda bisa melihat kembali tutorial yang anda pakek sebelumnya.
Selesai...

Catatan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Semoga artikel diatas bermanfaat buat sobat semua dan selamat mencoba, salam sukses...

Cara memasang Readmore Otomatis 2 di blogspot , pasang readmore otomatis, tutorial membuat readmore otomatis pada blog, langkah menambah readmore otomatis pada blogger, readmore otomatis tutorial, readmore otomatis versi terbaru, penggal artikel blog secara otomatis, script readmore otomatis pada blog.

Cara membuat Floating Ads di blog anda

Cara membuat floating ads di blog anda itu lah topik pembahasan kita hari ini. pasti sudah banyak yang mengerti apa yang dimaksud dengan floating ads bukan? Bagi yang belum mengerti jangan khwatir akan saya terangkan terlebih dahulu.

yang dimaksud dengan floating ads itu adalah sebuah iklan yang mengembang dilayar blog anda secara tiba-tiba muncul. lihat contoh disini, yang posisinya baik diatas maupun dibawah blog anda (tergantung keinginan) yang akan tampil jika tidak di CLOSE (tutup). Nah dengan adanya Floating ads ini sangat bermanfaat bagi anda yang mempunyai iklan per klik. salain tampilan nya yang menarik tentunya memberi keuntungan bagi anda sendiri, karna iklan anda akan mudah terlihat oleh pengunjug. Nah untuk memasangnya sangat lah mudah.

Berikut cara-cara menambah float ads diblog:

Login dulu ke account blogger anda
Tata Letak
Kemudian di elemen pilih tambah gadget
Kemudian pilih Java script/ HTML
Dan copy paste kode dibawah ini
<style type="text/css">
#topbar{
position:absolute;
border: 2px red;
padding: 2px;
background-color: transfarent;
width: 700px;
visibility: hidden;
z-index: 100;
}
</style>

<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div class="clear"></div>
<div id="topbar">
<a style="color: rgb(255, 0, 0); font-weight: bold; font-style: italic;" href="" onclick="closebar(); return false"><span><button>X</button></span></a><a style="font-weight: bold; color: black(51, 255, 51);"> << CLOSE
</a><p><a style="font-weight: bold; color: black(51, 255, 51);" title="cara mudah dapatkan uang dari internet">Iklan sponsor blog ini</a>

</p><center><script src="http://kumpulblogger.com/scahor.php?b=75524&onlytitle=1" type="text/javascript"></script></center>

<p></p><p></p></div>
Kemudian simpan
Jika cara di atas tidak berhasil klik link berikut ini
Copy paste kode di dalam file Notepad tersebut dan ikuti langkah-langkah nya seperti cara di atas

Catatan

Background-color : warna dinding (bisa diganti)
Width : ntuk lebar ( ubisa diganti)
CLOSE/Iklan sponsor blog ini : ganti dengan kata yang anda inginkan atau bisa anda hapus
Yang paling terpenting yang harus anda ganti dengan kode iklan yang anda punya
<script src="http://kumpulblogger.com/scahor.php?b=75524&onlytitle=1" type="text/javascript"></script>
Selebih nya bisa anda modif sendiri sesuai dengan yang anda inginkan

Selamat mencoba......

cara menambah Floating Ads pada blog, langkah membuat Floating Ads di blogger, tutorial Floating Ads pada blog, Floating Ads tutor, cara memasang Floating Ads pada blogspot, tips membuat Floating Ads.

Aksesoris Blog tampil cantik

Dunia blogosphere seakan tak pernah berhenti untuk memberikan beragam pernak pernik blog kepada blogger. Blogger pun nampak menanggapi ini dengan selalu bereksperiman dengan mengedit dan mencomot source code dari penyedia aplikasi.

Aksesoris blog agar tampil cantik, user friendly, serta kita pun sebagai pengelola blog akan senang melihat nya. Antara lain sebagai berikut :

Penambah jam :

http://www.clocklink.com/

Penambah Statistic Reader :

http://feedjit.com/

Penghitung statistik pengunjung di blog kita :

http://www.sitemeter.com

Penambah polling :

http://www.ballot-box.net

Menambah jadwal solat di blog kita :

http://myquran.org

Memberi Kamus Online pada blog kita :

http://kamus.net

Menambah kalender unik pada blog kita :

http://www.free-blog-content.com

Menambah prakiraan cuaca pada blog kita :

http://www.weather.com

Penggunaan aksesoris diatas, bisa kita pelajari dengan men copy paste kan code dari penyedia layanan yang diberikan kemudian kita masukkan ke halaman page element.

Risky666