Rudi Tabuci

Membuat Menu Navigasi Horizontal Tidak Bergerak

2011-10-01T07:17:00.000-07:00

Saat anda membuat blog di blogspot pertama kali akan mendapatkan menu Navbar, biasanya navbar ini banyak di sembunyikan dan sebagai gantinya mengunakan menu lainnya. Fitur menu navigasi seperti blog pada umumnya telah banyak dipergunakan. Menu ini fungsinya sebagai navigasi pembaca untuk melihat-lihat halaman lain atau kategori lain dalam blog anda. Pada posting ini kita akan belajar cara membuat menu navigasi bisa di katakan lain dari pada yang lain.

Menu navigasi ini tidak bergerak atau akan tetap berada di atas ketika kita melakukan scroll ke bawah atau keatas.

Ok Langsung saja kita praktekan, tetapi alangkan baiknya kita lakukan backup dengan download full template.

Pada Css kita copy paste kode dibawah ini diatas body {

#nav{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(../images/nav.png) repeat-x center left;
z-index:999999;
}
#nav ul{
height:25px;
list-style:none;
margin:6px auto 0px auto;
width:600px;
}
#nav ul li{
display:inline;
float:left;
margin:0px 2px;
}
#nav a{
font-size:11px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(../images/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#nav a:hover{
background:#D9D9DA none;
color: #fff;
}

Pada HTML kodenya seperti berikut :

Cukup Sekian, semoga bermanfaat

Membuat Breadcrumb Inilah Caranya

2011-09-22T05:51:00.000-07:00

Breadcrumb merupakan navigation yang biasanya terletak di atas atau di bawah halaman yang memungkinkan pengunjung menuju ke bagian sebuah halaman web / blog sebelumnya.
Contohnya seperti ini:

Browse » Home » Tutorial , Widget » Membuat Recent Posts Lebih Menarik Dengan BuzzBoost

Masing masing kata yang ada di breadcrumb merupakan link menuju ke bagianya masing-masing. Dengan breadcrumb akan memudahkan pengunjung bernavigasi dan dapat dengan mudah memetakan posisinya sedang berada di bagian kategori mana. Karena itu sangat di sarankan sebuah web atau blog menggunakan sistem navigasi breadcrumb ini.

Dengan sedikit modifikasi pada kode template, maka “breadcrumb-navigation” akan segera anda miliki. Berikut adalah caranya.

Silahkan login ke blogger degan ID anda.
Klik Tata Letak.
Klik tab Edit HTML
Click Download Full Template and please back up your template first.
Silahkan beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

Silahkan cari kode ]]></b:skin>
Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

Silahkan cari kode berikut pada template anda :

<div class='post hentry uncustomized-post-template'>

Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>

<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'>Home</a> »
<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 != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>

Klik tombol Save Template.
Tunggu beberapa saat sampai template anda tersimpan.
Buka halaman blog anda, klik pada judul artikelnya. Silahkan lihat hasilnya.
Selesai.

Membuat Recent Posts Lebih Menarik Dengan BuzzBoost

2011-09-10T09:01:00.000-07:00

Satu lagi Tip dan trik mengenai Recent Post. Kali ini agak berbeda dengan recent post biasanya, karena disini kita memadukan recent post dengan BuzzBoost dari Feedburner. Recent Post ini sangat menarik karena memanfaatkan Fitur dari BuzzBoost sehingga bisa memunculkan potongan isi dari tulisan/postingan.

Sebenarnya hal seperti ini sudah banyak dibahas akan tetapi modifikasi tiap orang pasti berbeda-beda sesuai dengan selera masing-masing, dibawah ini akan saya bahas bagaimana cara mendaftar ke Feedburner sampai menaruh fitur itu di dalam template blogspot kita.

BuzzBoost adalah fasilitas yang diberikan feedburner untuk menampilkan RSS Feed sebagai html dengan menaruh code javascript pada blog kita. Perlu kita ketahui bahwa RSS adalah sebuah file berformat XML untuk sindikasi yang telah digunakan situs web maupun Blog. Teknologi RSS ini mengijinkan kita untuk berlangganan kepada situs web yang menyediakan umpan feed RSS.
Baik kita mulai saja cara membuatnya dan sekarang kita ikuti langkah-langkahnya:

1. Daftar Feedburner, bila belum silahkan klik disini. (http://feedburner.google.com)

2. Pada bagian Burn a feed right this instant. isi dengan rss feed dari situs yang akan anda ekstraksi, misalnya http://ruditabuci.blogspot.com/feeds/posts/default, kemudian tekan tombol Next, seterusnya tekan lagi tombol Next dan seterusnya sampai selesai hingga anda menemukan bagian Analyze,Optimze,Publicize dll

3. Pada halaman Publicize, Klik Link BuzzBoost. Pada halaman BuzzBoost klik ACTIVE.
Akan muncul halaman yang berisi script seperti dibawah ini.

4. Kemudian Anda cukup mengambil bagian seperti di bawah ini

5. kemudian modifikasi dengan menambahkan script dibawah ini tepat dibelakang text sigpro

&nItems=8&format=openLinks=new

&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below

sehingga menjadi seperti dibawah ini

&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below" type="text/javascript" ></script>

Copy Paste pada Blog anda. Buka Design - Page Element - Add a gadget - Javascript/HTML - Isi judul misalnya 'Recent Posts' Lalu Copy Paste script diatas

6. Setelah itu buka kembali Design - Edit HTML - Expand Widget Templates, Kemudian cari text "Recent Posts" sesuai judul yang kita berikan tadi, sehingga akan ketemu dengan script seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Ganti script diatas yang berwarna biru sehingga menjadi seperti di bawah ini

<b:if cond='data:title != ""'>

</b:if>

<data:content/>

</div></div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Langkah selanjutnya adalah menambah style sheet css

7. Tetap pada mode Edit HTML, Selanjutnya cari </head> setelah ketemu bagian tersebut letakkan script dibawah ini tepat diatasnya

<style>

.postnew li a:hover {

display:block;

text-decoration:none;

background:#efefef;

}

.postnew li a:visited {

text-decoration:none;

}

.postnew {

float:left;

width:380px;

}

.postnew ul {

width:90%;

list-style-type:none;

}

.postnew li a {

text-decoration:none;

border-top:1px solid rgb(204,204,204);

line-height:13px;

display:block;

padding:3px 0px 3px 0;

}

.feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter {

display:none;

padding:2px 3px;

margin-left:126px;

margin-bottom:12px;

width:162px

}

.feedburnerFeedBlock li:hover .date {

font-size:11px;

font-weight:bold;

text-align:left;

display:block;

position:absolute;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdq8E-s4gvYtJroCeyJD-ooeF_PakFUE5dArpQmgwEG5-2ed2lCNmzUMqrkMsGSuzV8wa8Q1yVrUYbLz-amALMMPdAEh88xleFll8i4B61siXrEcJ_WrAQ4UxpzqfKGTqRGSWldUEv_zo/s400/tooltips-date.gif) no-repeat scroll 10px 5px; color:#333; padding:6px 35px; margin-right:10px;

width:114px

}

.feedburnerFeedBlock li:hover div {

border-radius:8px 8px;

-moz-border-radius:0 0 8px 8px;

-khtml-border-radius:0 0 8px 8px;

-webkit-border-radius:0 0 8px 8px;

border-radius:0 0 8px 8px;

font-size:11px;

display:block;

position:absolute;

border:1px solid #ccc;

background:#E5E5E5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXwocGXlBljJtyEKp0FR1hXRTEsHbyKkdo79jplg9AZO2aiJNntziz92j4Tnbr7hGHdAjcYj_vHfmxGrf9wyo33ukwxDDbJnCRSk0sIbrPOEyEW4hPRymC-l31m2IBiDNazHkWYwoqTCc/s1600/tooltips-background.png) repeat-x;

color:#333;

padding:35px 10px 10px 10px

}

</style>

Demikian Selamat mencoba

Cara Memasang Floating Share Button

2011-09-09T08:56:00.000-07:00

Kumpulan Tip dan trik kali ini membahas bagaimana cara Memasang Floating Share Button - Widget Floating Share Buttons ini berguna untuk menampilkan tombol berbagi yang tampil mengapung baik di kiri maupun di kanan sesuai kehendak Anda tinggal mengubah posisi left atau right. Anda bisa melihat demonya pada blog ini, terihat disini ada tombol share Facebook, Retweet, Buzz dan Google +1.

Bila Anda tertarik untuk memasang Widget Floating Share Buttons ini silahkan ikuti tutorialnya di bawah ini.
1. Login terlebih dahulu ke akun blogger Anda.
2. Silahkan klik menu Rancangan atau Design. Pada Elemen Laman Klik, Tambah Gadget.
3. Lalu, pilih "HTML/JavaScript". Sebaiknya kosongkan saja pada Judul Widget.
4. Lalu, Copy-Paste kode html dibawah ini kedalamnya

Untuk posisinya Anda bisa Mengaturnya pada tulisan yang berwarna biru.

5. Kemudian Save

Cukup sekian dahulu panduan kali ini, semoga berguna.

Cek Akses Blog dengan GTmterix

2011-09-03T20:08:00.000-07:00

Kecepatan akses suatu blog merupakan faktor penting untuk kenyamanan pengunjung blog Anda. Apabila blog Anda mempunyai kecepatan akses hanya beberapa detik membuat pengunjung nyaman dalam membaca dan mencari informasi dalam blog Anda.

Pengguna internet di Indonesia masih mengakses internet dengan kecepatan yang kurang cepat alias lambat. Dengan kecepatan akses yang lambat ini, maka akses blog yang berat akan semakin membuat pengunjung blog tidak nyaman dan bosan menunggu akhirnya meninggalkan blog anda.

Bagi Anda yang ingin mengetahui kecepatan loading blog, ada sebuah layanan online yaitu GTmetrix. Di mana layanan GTmetrix ini dapat menilai kecepatan blog sobat dari segi page speed maupun Yslow. GTmetrix memang di dukung oleh Google Page Speed, Yahoo Yslow, Firefox dan yang lainnya.

Anda ingin mencoba dan mengecek blog silahkan mengunjungi GTmetrix, masukkan alamat blog Anda dan Go.

Selanjutnya tunggu GTmetrix menganalisis blog Anda, hanya membutuhkan waktu beberapa detik saja, sesuai dengan kecepatan dan besarnya blog Anda. Hasilnya akan terlihat nilai dan kecepatan akses blog anda.

Dari hasil itu bisa di ketahuai bahwa Page Speed dari Satublog mempunyai Grade A 95 % Kemudian YSlow dapet grade B 81%, cukup lumayanlah bukan? Bagaimana dengan hasil test blog Anda?

Disini andapun bisa mengkoreksi isi blog anda dengan cukup klik di Table Page speed (Recommendation) yang mempunyai nilai rendah contoh Use efficient CSS selectors dan Remove unused CSS dengan sedikit mengedit nya akan menambah nilai, tetapi apabila CSS yang disarankan untuk di edit memang diperlukan sebaiknya jangan di edit.

Demikian sedikit tentang Cek Kecepatan akses blog menggunakan GTmetrix. Tool ini saya rasa berguna juga dalam pemilihan template yang pernah saya ulas sebelumnya dalam Persiapan Membuat Blog Di Blogspot.

Menghilangkan Link "Langgan: Entri (Atom)"

2011-09-01T17:38:00.000-07:00

Kumpulan Tip kali ini adalah bagaimana menghilangkan Link Langgan"Entri (Atom). Link ini tempatnya pada akhir halaman Body Blog. Bila di lihat Link ini sangat menggangu dan dirasa kurang menfaatnya. Bagaimana menghilankannya? Ternyata caranya sangat simple dan sederhana cukup menambahkan kode .feed-links{display:none}. Untuk lebih lengkapnya Cara Menghilangkan Link langgan Entri Atom tinggal ikuti aja langkah-langkah Menghilangkan Link Langgan Entri Atom Berikut Ini.

1.Login Ke blogger .
2.Klik Tata Letak Kemudian Klik Edit HTML.
3.Selanjutnya Cari Kode ]]></b:skin> .Atau biar lebih gampang gunakan tombol CTRL+F.
4.Bila sudah ditemukan copy dan paste kode berikut diatasnya.

.feed-links{
display:none;
}

5.Kemudian Simpan Template.

Cukup sekian dahulu panduan kali ini, semoga berhasil.

Membuat Recent Post Sederhana

2011-09-01T08:08:00.000-07:00

Malam ini kembali lagi membuat kumpulan tip dengan topik Recent Post. Recent post ini sangat sederhana tetapi mempunyai kegunaan yang tidak kalah pentingnya. Dengan mengurutkan berdasarkan tanggal postingan maka recent postnya pun menampilkan tanggal artikel ini di post.
Berikut cara membuatnya :

Masuk dulu ke Blogger terus pilih Layout
Klik pada Page Elements trus pilih Add page element lalu cari HTML/Javascript
Copy kode dibawah ini dan taruh dalam kotak content

Ganti ruditabuci.blogspot.com dengan nama blog Anda serta numpost=17 angka "17" menunjukkan jumlah "Recent Post" yang akan ditampilkan, Anda bisa menggantinya sesuai keinginan.
Simpan dan lihat hasilnya.
Selamat mencoba!

Analisa Meta Tag Dengan Meta Tag Analyzer

2011-09-01T06:13:00.000-07:00

Bahasan kali ini mengenai Meta Tag. taukah anda apa itu meta tag ?

Menurut Wikipedia Meta Tag adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web. Elemen meta ini harus diletakkan pada bagian “head” dalam HTML tersebut. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait serta untuk metadata lain tanpa “head”.

Apakah Blog anda sudah menggunakan Meta Tag ? jika belum silahkan pasang meta tag berikut di Blog anda.

Pilih Rancangan - Edit Html - cari kode :
<b:skin><![CDATA[
Letakkan meta tag berikut diatas kode <b:skin><![CDATA[

Jika Meta tag sudah ada di blog Anda, Alangkah baiknya Anda menganalisa sejauh mana kekuatan meta tag blog Anda. mulai dari Deskripsi, keyword blog anda. Meta Tag Analyzer berfungsi sebagai alat untuk memprediksi seberapa kuatnya halaman Anda dapat terindek dalam Search Engine. Semakin baik Meta tag Anda semakin besar pula peluang terindeks Search Engine.

Untuk menganalisa Meta Tag ini Anda dapat memanfaatkan Tool yang bernama Meta Tag Analyzer. Apabila meta berwarna merah sebaiknya Anda merevisi kembali Meta tag Anda

Silahkan anda coba tool berikut untuk menganalisa Meta Tag anda

Meta Tag Analyzer

Membuat Artikel Terkait Berdasar Kategori

2011-08-31T20:20:00.000-07:00

Panduan kali ini adalah bagaimana cara memasang "Related Post by Category" atau "Artikel terkait berdasarkan kategori" pada posting blog.

Banyak yang mengulas bahwa salah satu cara untuk meningkatkan trafic dan pagerank adalah memasang Artikel Terkait tersebut. Kenapa? karena pengunjung juga dapat membaca artikel yang lain sehingga pengunjung blog tersebut lebih lama diblog tersebut. Seperti itu katanya yang saya ringkas dari berbagai Blog.

Related Post atau Artikel Terkait itu sendiri banyak versi. Namun mempunyai tujuan yang sama yaitu menampilkan artikel terkait menurut kategori atau label dari artikel yang sedang dibaca. Biasanya ini sangat membantu jumlah PageView ( halaman yang di baca ) blog kita, Terutama bagi pengunjung yang ingin menggali lebih banyak artikel yang kita tulis.

Untuk tata letak alangkah baiknya “ Related Post “ di simpan tepat bawah artikel dengan mempunyai sedikit jarak dengan artikel. Dan Artikel terkait ini akan berjalan bila artikel kita mempunyai label/kategori/tag yang sama dengan beberapa tulisan. Seperti sebelumnya lakukan backup dahulu dengan Download template lengkap.

Berikut cara memasang artikel terkait tersebut:

Buka " Edit HTML " pada blog kemudian centangkan " Expand Widget Templates "
Cari Kata <data:post.body/> dengan cara menggunakan ctrl-f
Kemudian lihat kode ini: <div style='clear: both;'/> 
Masukan kode dibawah ini diatas kode <div style='clear: both;'/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<br/>
<h3>Related Articles</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>

Untuk Kode yang berwarna Biru Anda bisa ubah angkanya seusai dengan keinginan. Hasil dari Artikel terkait berdasarkan kategori bisa dilihat dibawah ini. Selamat Mencoba

Cara membuat Daftar Isi Otomatis Jquery

2011-08-31T04:35:00.000-07:00

Panduan membuat Daftar Isi Otomatis Dengan Jquery Di blogspot - Seperti kita ketahui, bahwa daftar Isi mempunyai peranan penting dalam blog. Daftar isi sangat membantu pengunjung untuk menemukan artikel yang dicarinya pada blog yang dikunjunginya. Dalam kumpulan panduan blog ini saya akan membagi tentang Daftar Isi Otomatis Dengan Efek Jquery. Daftar isi ini sangat menawan dan cantik serta menarik tentunya, mampu memikat hati para blogger. Bisa Anda lihat pada contoh. Menarik khan? itulah efek efek yang mampu dihasilkan oleh Jquery, Ok, langsung saja kita praktek.

Sebelumnya Login ke Blogger

Kemudian masuk ke Rancangan -> Edit Html -> centang expand widget template.

Kemudian letakkan kode berikut diatas kode ]]></b:skin>

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGh9YexNZLHpJom2ouXpUXPHMRE7qnK7VEcl77JRNRW1fK-3VpGPq8iD3uhh0aNgnU2vuz72pxe-DlCm4NvJLHGARygYmLbbi_KrPMuP9yRVlrOO-pLDobnh1C4YztAvi0IWaRkF2LA4I/s320/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZhgBTEKWb2iQCfZAAm0hH4fsmHY5uuY2UrobwJRS4S-HDNE6RS-p8CqWyiJePKw_C595Yz8I7aeE102tJKLZmvco41WYCtKrls-AqxDAHU2X3YgKYxkQsRD-auN5vE4rusk5zzc4kRiY/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxvUDjsVXJAOHzUsAS8f8Fp4BvVHUOkyod49qMsfLiaAGFS7_S6D3Y8Q5cugq0k7W_7PO3dclI4tY1HoiKbSIZhgAYXup0zDCWUsks8ao7IvUXYRgEQlpHEiPEMLAhR7R3CGEsjPo_V0c/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

selanjutnya, tahap berikutnya adalah meletakkan kode berikut diatas kode </head>

Save Template.
sampai disini belum selesai dan selanjutnya meletakkan Widgetnya di Sidebar :
Langsung klik Tata Letak - Add Widget - Html/Javascript
Kemudian Copy paste kode berikut :

Untuk menampilkan di Blog silahkan ganti tulisan yang berwarna biru dengan alamat blog Anda.
Kemudian Save.
Selesai sudah sekarang anda mempunyai Daftar Isi Otomatis Dengan Efek Jquery

Panduan Cara Membuat Auto Read More

2011-08-29T20:39:00.000-07:00

Coba perhatikan Template Rudi Tabuci ini, ada perubahan dari template aslinya dengan nama template "Collaboration". Sebetulnya template ini standard tetapi cukup menarik serta ringgan. Di template ini saya menambahkan Auto Read More dan 3 buah kolom di Footer.

By the way bila anda tertarik akan template ini bisa di download pada link di bawah :

http://btemplates.com/2008/blogger-template-collaboration/

Kali ini saya akan membahas Cara membuat Auto Read More, dan untuk membuat 3 kolom pada Footer akan dibahas kemudian. Semoga dengan adanya tutorial membuat Auto Read More ini, siapa aja bisa buat read more dengan mudah. Sebelum melakukan modifikasi template untuk menambahkan Auto Read More, ada baiknya Anda membackup dahulu templatenya. Caranya Masuk ke Pengaturan ke mode HTML dan Download template lengkap.

Baik Simak Panduannya di bawah:
1. Masuklah ke Pengaturan >> ke halaman Edit HTML >> centang expand template widget
2. Cari kode berikut: </head>
3. Setelah Anda menemukan, tempatkan kode di bawah ini di atas kode </head> tadi.

<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)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks

********************************************/

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>

Anda dapat mengatur jumlah karakter tulisan dan besarnya gambar yang akan ditampilkan dengan cara melakukan sedikit modifikasi sebagai berikut:

var thumbnail_mode = "float";

(float –> gambar thumbnail diletakkan di sebelah kiri. Bisa diganti dengan no-float )

summary_noimg = 250;

(250 –> jumlah karakter yang ditampilkan jika postingan tidak memiliki gambar / thumbnail)

summary_img = 250;

(250 –> jumlah karakter yang ditampil jika postingan ada gambarnya / thumbnail)

img_thumb_height = 120;

(120 –> tinggi gambar/thumbnail dalam piksel)

img_thumb_width = 120;

(120 –> lebar gambar/thumbnail dalam piksel)

4. Selanjutnya cari kode berikut:

<data:post.body/>

5. Ganti kode tersebut dengan kode berikut:

<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'><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>

Selanjutnya klik save template. Perlu diingatkan bahwa membuat Auto Read More ini Anda harus sabar untuk mengikuti petunjuk ini agar berhasil nantinya. Selamat mencoba semoga berhasil

Persiapan membuat Blog Di Blogspot

2011-08-29T18:59:00.000-07:00

Blog adalah singkatan dari “Web dan log” merupakan salah satu aplikasi web berupa tulisan yang umum disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan diikuti oleh yang lama.

Awalnya di dalam blog dibuat sebagai catatan pribadi yang disimpan secara online atau sebuah halaman berisi kan tutorial atau cara-cara membuat sesuatu yang dituangkan ke dalam blog , bisa berisi curhat, bisnis dan lain sebagainya. Secara umum, tutorial membuat blog sudah banyak diulas di berbagai blog.

Salah satu penyedia blog gratis yang populer sampai saat ini adalah blogspot atau blogger, dimana pada saat kita mendaftar pada situs blogger.com atau blogspot ini kita akan mendapatkan nama sub domain dari blogspot.

contoh : namablog.blogspot.com

Kenapa membuat blog di blogger.com bukan pada situs penyedia blog lainnya? Sebenarnya membuat blog di blogger mempunyai banyak kelebihan yang dimiliki blogger dibanding dengan penyedia blog lain. Salah satu contohnya yaitu mudah dalam pengoperasian dan cocok untuk pemula, lebih leluasa dalam mengganti dan mengedit template sehingga tampilan blog akan lebih fresh. Untuk custom domainpun dimana anda dapat mengubah nama blog anda dengan nama domain sendiri. Contohnya namablog.blogspot.com di ubah menjadi namablog.com dengan tetap memakai hosting blogspot dan masih tetap gratis.

Persiapan apa saja yang harus kita perlukan dalam membuat Blog di Blogspot? Sebetulnya tidak ada persiapan yang khusus. Tetapi alangkan baiknya sebelum membuat Blog kita mempersiapkan konsepnya terlebih dahulu, karena konsep ini sangat penting dalam mebangun Blog agar blog kita tidak terkesan gado-gado.

Konsep disini meliputi :

Judul mempunyai peranan tidak kalah pentingnya, buatlah judul yang menarik dan mudah diingat.
Materi : seperti dijelaskan di atas alangkah baiknya kita membuat materi blog tidak campuran alias gado gado tetapi fokus pada salah satu masalah saja, contohnya tentang tip dan trik seputar komputer jangan dicampur dengan resep masakah atau obat-obatan.
Tag atau Label pun disini sudah kita persiapkan sebelumnya, kenapa? karena akan lebih mudah bila kita sudah mempersiapkan tag atau label sehingga Anda akan fokus pada materi yang akan ditulis. Lebih penting lagi Anda tidak akan bingung saat selesai menulis di beri label apa nantinya.
Template untuk Blogspot atau blogger banyak disediakan di berbagai situs antara lain :

1. Template dasar Blogspot

2. http://btemplates.com

3. http://www.bloggerstyles.com/

4. www.zoomtemplate.com/

5. http://blogtemplate4u.com/

6. www.bloggertemplatesfree.com/

7. www.bloggertemplatesfree.com/

8. www.eblogtemplates.com/

9. http://bloggertemplateplace.com/

10. http://www.dhetemplate.com/

Dan masih banyak lagi. Bagaimana cara memilihnya? itu adalah sesuai selera Anda. Tetapi yang harus diperhatikan dalam memilih template adalah seberapa ringankah dalam loading sebuah template (performa template itu sendiri) semakin ringan sebuah template maka akan cepat Blog itu terbuka, apabila blog kita lama terbuka maka pembaca atau pengunjung akan merasa bosan untuk menunggu sehingga akan ditinggalkan pembacanya.

Bagaimana mengukur perfomance nya? banyak situ yang menyediakan jasa ini dan itu gratis (lagi lagi gratis ) tetapi disini saya mengambil salah satu contoh http://gtmetrix.com/.

Ringkasan

Persiapan dalam mebuat Blog adalah siapkan Judul yang menarik dan sesuai konsep. Materi blog sebaiknya jangan gado-gado atau campuran contohnya blog tentang komputer dicampur dengan resep atau obat-obatan. Tag atau label sebaiknya dipersiapkan agar kita lebih fokus dalam menulis. Template pun tidak kalah pentingnya, pilihlah template yang ringan loadingnya sehingga akan cepat terbuka. Demikian persiapan dalam membuat template yang saat ini penulis rasakan sangat berguna, semoga tulisan ini sedikit membantu Anda dalah memulai membuat Blog.

New Coolpix S Series And P7100 Compact Cameras

2011-08-25T05:05:00.000-07:00

Nikon has week launched 6 new cameras to its range in the form of a rugged waterproof AW100, together with four new Coolpix S Series compact cameras : S8200, S6200, S1200pj, S100 and finally the Coolpix P7100.

The Coolpix AW100, as well as being a little more rugged and waterproof, capable of being used underwater to a depth of 33 feet, is also equipped with a 16.0-megapixel CMOS with backside illumination (BSI) for improved picture quality even in challenging low-light conditions. The new Coolpix AW100 will be available in early September 2011 for around $379.95

The new Coolpix S Series lineup of S8200, S6200, S1200pj, and S100 have been designed by Nikon to provide users with a compact camera for the : “social user who cares about the quality of the images they take and share”. More details and specifications are available from the Nikon website.

Finally the new Coolpix P7100 has been created to become the new Coolpix flagship camera and comes equipped with a versatile 7.1x Wide Angle Optical Zoom-NIKKOR ED glass lens, 35mm equivalent to 28-200mm.

Together with a 10.1 megapixel CCD sensor, 921k-dot tilting LCD screen on the rear and vibration reduction (VR) to help you take blur free photos while shooting images or capturing HD video while handheld or in low-light. The Coolpix P7100 will also be arriving mid September 2011for around $499.95.

For more information and full specifications on all Nikons new cameras released today jump over to theNikon Press website.

Source: Nikon

Nokia Launches Three New Smartphones Running Symbian Belle OS

2011-08-25T04:59:00.000-07:00

Even though Nokia has now partnered with Microsoft to roll out Windows Phone handsets. Nokia has today showed that its ties with the Symbian OS is still alive and well with the launch of three new Nokia smartphones, all running the latest Symbian Belle operating system. In the form of the Nokia 701, 700 and 600 smartphones.

The Symbian Belle operating system has been designed to provide smartphone users more flexibility to personalise their user experience on mobile devices, and will be available as a free update for all users of handsets currently running Symbian Anna. There are a couple of videos after the jump which introduce the new Symbian Belle operating system and some of its features.

“We will launch more phones on Symbian. And we will deliver more updates to Symbian,” said Nokia Senior Vice President of Sales Colin Giles

The Nokia 701, offers enhanced graphics performance, a refreshed UI, extended battery life and the brightest screen the world has ever seen. The Nokia 700 is Nokia’s most compact touch monoblock smartphone, and the Nokia 600 is designed to provide an all-in-one entertainment hub and is Nokia’s loudest smartphone to date.

The three new smartphones are expected to arrive in Q3 2011 and costing around : Nokia 701 €290, Nokia 700 for €270, and the Nokia 600 for €180. More information can be found regards Nokia Symbian Belle OS on their website.

Steve Jobs Resigns as CEO of Apple

2011-08-25T04:56:00.000-07:00

Steve Jobs resigned this afternoon as CEO of Apple. In an eight-sentence letter to the Apple board of directors and “the Apple community,” Jobs indicated that he “could no longer meet [his] duties and expectations as Apple’s CEO.”
The Apple board quickly elected Jobs chairman and accepted his recommendation to name Chief Operating Officer Tim Cook as his successor. The company didn't reveal why Jobs felt he could no longer fulfill his obligations as CEO, but the obvious reason is his poor health. Jobs has been on medical leave since January of this year.
Jobs rarely makes the details of his medical conditions public. After he was diagnosed with pancreatic cancer in 2003, he had the tumor successfully removed, and returned to work. But the tumor had apparently spread to his liver undetected. In 2009, doctors had to remove his liver and replace it with a transplant, during which Jobs took a six-month sabbatical. He caused quite a stir when he took a medical leave from his position at Apple in January of this year, for undisclosed reasons. Some doctors speculated that the cause for Jobs’s absence was either a recurrence of his pancreatic cancer or a complication with his liver transplant. Jobs turned 56 in February.
Investors have traditionally speculated that the presence of Jobs is intertwined with the price of Apple stock. However, the reaction to Jobs's departure was muted in after-hours trading: Apple stock fell 7 percent.
Cook is well esteemed in the Apple community. During Jobs’s six-month sabbatical in 2009, Cook oversaw a 60 percent increase in the price of Apple shares, after which the board of directors awarded him a $5 million bonus for outstanding performance.
Cook has been a relatively outspoken COO, hinting at one time that Apple products were too expensive, and criticizing Android tablets.

To the Apple Board of Directors and the Apple Community:
I have always said if there ever came a day when I could no longer meet my duties and expectations as Apple’s CEO, I would be the first to let you know. Unfortunately, that day has come.
I hereby resign as CEO of Apple. I would like to serve, if the Board sees fit, as Chairman of the Board, director and Apple employee.
As far as my successor goes, I strongly recommend that we execute our succession plan and name Tim Cook as CEO of Apple.
I believe Apple’s brightest and most innovative days are ahead of it. And I look forward to watching and contributing to its success in a new role.
I have made some of the best friends of my life at Apple, and I thank you all for the many years of being able to work alongside you.
Steve

Apple board members were quick to praise Jobs's tenure as CEO.
"Steve's extraordinary vision and leadership saved Apple and guided it to its position as the world's most innovative and valuable technology company," Art Levinson, chairman of Genentech and an Apple board member, said in a statement.
He said that the board had full confidence in Cook, who has led the company during both of Jobs' leaves of absence. As Apple's chairman, Jobs will continue to serve Apple "with his unique insights, creativity and inspiration." Levinson said.
Jobs is "an icon and what he's done with Apple is something probably unprecedented in business," said IDC analyst Al Hilwa. "It will be a case study in business school books for decades."

Source : http://www.pcworld.com/article/238736/steve_jobs_resigns_as_ceo_of_apple.html?tk=nl_newsalert

Daftar Isi

2011-08-01T03:28:00.000-07:00