DeddyCamp.com

Tips Blogger Sitemap Generator
Pasang Artikel Terkait Pengganti LinkWithin
Pasang Avatar Pada Kotak Komentar
Membuat Menu Slider Pada Blog

Posted: 17 Jul 2010 01:03 AM PDT

Sebelumnya saya sudah pernah membahas tentang cara submit sitmap ke google webmaster. Namun yang saya jelaskan waktu itu hanya tentang cara submit saja, posting kali ini hanya memperjelasnya saja.

Jika anda submit sitemap manual dengan sitemap dasar, yaitu atom.xml atau rss.xml maka yang akan anda temukan sewaktu input sitemap di google webmaster adalah ketidakpuasan, kenapa? karena google webmaster hanya membaca 26 artikel anda saja. Lantas bagaimana jika punya 100 artikel atau lebih? maka dari itu dengan blogger sitemap generator ini mudah-mudahan bisa mengatasi permasalahan tersebut.

Buat anda yang sudah paham cara mensubmit sitemap ke google wabmaster, bisa langsung ke blogger sitemap generator, silahkan klik disini. Kemudian masukkan alamat url milik anda, jangan lupa tutup dengan tanda slash ( / ).

Untuk lebih jelasnya, silahkan anda lihat videonya dibawah ini.

Mantab kan..silahkan dicoba deh !

This posting includes an audio/video/photo media file: Download Now

Pasang Artikel Terkait Pengganti LinkWithin

Posted: 17 Jul 2010 12:46 AM PDT

Widget artikel terkait (related posts) yang disertai dengan thumbnail ini memang sangat mirip dengan widget dari LinkWithin. Sudah pernah menggunakan LinkWithin ? jika belum, anda bisa lihat contoh gambar dibawah, nah seperti itu kira-kira bentuknya. Setiap bagian akan disorot dalam warna pelengkap ketika mouse berada di atasnya, dan ketika seluruh bagian ini di klik akan mengarah ke URL dari "pos terkait" yang ditampilkan.

Berbeda dengan LinkWithin yang mengacak semua post yang ada untuk ditampilkan, widget ini sesuai dengan label atau kategori dari blog kita. Jadi sama halnya dengan artikel terkait yang pernah saya jelaskan dulu,. Namun artikel terkait model pertama yang sekarang masih saya gunakan tersebut, tidak menggunakan thumbnail.

Gambar thumbnail ditampilkan untuk masing-masing pos terkait yang dihasilkan dari thumbnail posting yang bersangkutan. Oleh karena itu, hanya gambar yang telah Anda upload ke setiap blog post yang akan ditampilkan. Secara keseluruhan, saya sangat suka dengan script buatan Aneesh ini, selain bagus dan rapi, script ini tidak membuat blog menjadi berat.

Oke deh, langsung ke lokasi aja. Seperti biasa silahkan login dulu ke Blogger. Sip ! sekarang ikuti langkah-langkahnya berikut ini :

1. Sekarang tuju Edit HTML.

2. Jangan lupa backup template anda dulu dengan mengklik Download Template Lengkap.

3. Klik Expand Template Widget.

4. Kemudian letakkan kode berikut ini, tepat diatas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

5. Kemudian cari kode berikut ini :

atau jika tidak ada, cari kode seperti dibawah ini :

6. Jika sudah ketemu, kemudian letakkan kode berikut tepat setelah kode diatas :

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

7. Setelah selesai semua, jangan lupa Simpan Template.

Untuk mengganti jumlah related posts-nya, silahkan edit var maxresults=5, ganti angka 5 dengan angka yang sesuai lebar postingan blog anda. Sedangkan untuk mengganti judul dari related posts, silahkan edit var relatedpoststitle="Related Posts", ganti dengan judul yang anda inginkan.

Semoga bermanfaat !

Pasang Avatar Pada Kotak Komentar

Posted: 17 Jul 2010 12:25 AM PDT

Memperingati ulang tahun Blogger yang ke-10 pada bulan agustus Tahun kemarin, blogger manambah fitur baru yaitu avatar pada komentar. sehingga pengunjung dapat menampilkan foto profil mereka saat berkomentar.

Sebelum ini saya pernah membahas cara menampilkan avatar mybloglog di kotak komentar, hampir sama dengan yang pertama, namun sayangnya avatar ini hanya akan muncul jika si komentator dalam status login di blogger.

Untuk mengaktifkannya, silahkan anda masuk ke halaman Pengaturan –> klik tombol Komentar –> Lalu klik tanda check "Ya" pada "Tampilkan gambar profil dalam komentar?"

Blogger juga memberikan kemudahan buat pengunjung blog untuk mengupload langsung foto pada kotak komentar. Untuk mengupload fotonya, saat sebelum publish komentar klik Pratinjau terlebih dahulu kemudian klik Add Photo, maka foto anda akan muncul disebelah kotak komentar.

Sekedar informasi, untuk template yang sudah di modifikasi, fasilitas avatar dari blogger ini mungkin tidak akan berhasil, karena saya sudah mencobanya dibeberapa blog saya yang lain, termasuk blog saya yang saya cintai ini.

Semoga bermanfaat !

Membuat Menu Slider Pada Blog

Posted: 16 Jul 2010 07:48 PM PDT

Menu slider ini sebenarnya dapat anda temukan di template zinmag-primus yang dapat anda download di beberapa situs yang menyediakan layanan template gratis.

Menu silder ala zinmag-primus ini cukup menarik untuk diletakkan dibawah header. Selain atraktif karena bentuknya yang dinamis, menu slider ini cukup efektif mengundang pengunjung blog untuk melihat dan mengklik post yang anda letakkan di menu slider tersebut.

Ada beberapa perubahan yang saya lakukan dalam menu ini, selain warna background, model tulisan, dan warna tulisan, saya juga merubah waktu jeda ( Delay ) antara post yang satu dengan yang lain.

Baiklah, langsung pada tutorialnya aja ya, langsung ke setting HTML template blog anda :

1. Login ke Blogger.

2. Langsung tuju ke Edit HTML.

3. Jangan lupa backup template anda terlebih dahulu.

4. Kemudian klik Expand Template Widget.

5. Letakkan kode berikut ini diatas / sebelum kode ]]></b:skin>

/*Menu Slider*/

#slider {
background:#FFF; height:254px; overflow:hidden; position:relative; margin:5px 0}

#mover {width:auto; position:absolute; overflow:hidden}

.slide {padding: 20px 0px; width:980px;float:left; position:relative; height:200px}

.slide h2 {font-family:verdana,georgia,helvetica,Sans-Serif; font-size:20px;color: #ac0000; padding:0px 0px 0px 30px; margin:0px 0px; width:500px; overflow:hidden}

.slide h2 a:link, .slide h2 a:visited {color:#000; background-color:transparent}

.slide h2 a:hover {color:#0B0B61; background-color:transparent}

span.slmet {color:#0B0B61; font-size:10px; font-family:verdana, georgia, helvetica,Sans-Serif; line-height:20px; width:500px; padding:0px 0px 0px 30px; margin:0px 0px; text-transform:uppercase}

.slide p {color:#000; font-size:12px; font-family:verdana,georgia,helvetica,Sans-Serif;line-height:20px; width:500px; padding:0px 0px 0px 30px; margin:0px 0px}

.slide img {position:absolute; top:20px; left:577px; background:#2E2E2E; padding:10px 10px}

#slider-stopper {position: absolute;font-family: verdana, georgia, helvetica, Sans-Serif;top:10px; right:10px; color:#B40404; padding:3px 8px; font-size:14px; font-style:bold; text-transform:uppercase; z-index:1000}

6. kemudian letakkan kode berikut dibawah / setelah kode ]]></b:skin>

Silahkan anda Download Kodenya Disini

7. Setelah itu cari bagian header yang letaknya setelah <body>, atau kira-kira seperti ini kode-nya :

<div id='header-wrapper'>
..........
.........
</b:section>

8. Letakkan kode berikut ini dibawah / setelah kode header ( seperti diatas ) :


<div id='casing'>

<div id='slider'>
<div id='mover'>

<div class='slide'>
<span class='slmet'> Posted by DeddyCamp </span>
<h2><a href='http://deddycamp.com/2010/03/memilih-template-untuk-blog.html'>Tips Memilih Template ( Free Blogger Template )</a></h2>
<p>Sekilas Tentang Template
Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang sobat lihat sekarang, seperti Background warna putih, kolom-kolom di samping kanan, serta semua yang anda lihat sekarang adalah salah satu bentuk dari desain template. Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik untuk di lihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang.</p>
<img alt='' src='http://lh5.ggpht.com/_7Y9pl24WpQY/StDT8ObEDDI/AAAAAAAACBk/iQrI6pf269w/RED%20-%20H%20Image_thumb%5B1%5D.jpg?imgmax=800'/>
</div>

<div class='slide'>
<span class='slmet'> Posted by DeddyCamp </span>
<h2><a href='http://www.deddycamp.com/2010/06/pasang-avatar-mybloglog-di-kotak.html'>Avatar Mybloglog di Kotak Komentar</a></h2>
<p>Tutorial cara memasang avatar mybloglog di kotak komentar sebenarnya sudah lama, tapi dari beberapa kali saya berkunjung ke beberapa blog anda, jarang sekali yang mengaplikasikannya. Padahal menurut saya, tutorial memasang avatar di kotak komentar yang di populerkan oleh Amanda ini sangat bagus, karena kita bs melihat wajah yang memberi komentar dengan syarat telah menjadi member mybloglog.</p>
<img alt='' src='http://lh5.ggpht.com/_7Y9pl24WpQY/Sqf1T4ve8NI/AAAAAAAAA3k/Nv9CaQU17us/Avatar_thumb%5B2%5D.jpg?imgmax=800'/>
</div>
</div>


</div>

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

9. Kemudian Simpan Template.

Sekarang coba lihat hasilnya, jika berhasil maka menu slider akan berada dibawah header pada blog anda.

Apa saja yang harus anda edit ?

1. Kode javascript diatas menggunakan delay waktu var delayLength = 5000 yang berarti 5 detik, silahkan anda buka kode javascript yang diatas kemudian ubah delay waktu sesuai keinginan anda. Sebagai catatan, 1 detik = 1000 (jika sudah sesuai, tidak usah dirubah)

2. Silahkan anda ubah tulisan dan url-nya dengan milik anda :

<div class='slide'>
<span class='slmet'> Posted by DeddyCamp </span>
<h2><a href='http://deddycamp.com/2010/03/memilih-template-untuk-blog.html'>Tips Memilih Template ( Free Blogger Template )</a></h2>
<p>Sekilas Tentang Template
Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang sobat lihat sekarang, seperti Background warna putih, kolom-kolom di samping kanan, serta semua yang anda lihat sekarang adalah salah satu bentuk dari desain template. Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik untuk di lihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang.</p>
<img alt='' src='http://lh5.ggpht.com/_7Y9pl24WpQY/StDT8ObEDDI/AAAAAAAACBk/iQrI6pf269w/RED%20-%20H%20Image_thumb%5B1%5D.jpg?imgmax=800'/>
</div>

Untuk kode berwarna merah yang pertama adalah untuk url yang hendak dituju, sedangkan kode berwarna merah yang kedua adalah alamat url dari gambar. Tulisan yang saya tandai tebal adalah judul tulisan, dan huruf miring dibawahnya adalah isi dari tulisan anda.

Klik disini untuk melihat demo menu slider. Selamat berpusing ria

Selamat Mencoba ya

Info Satpol

Halaman

Sabtu, 17 Juli 2010

DeddyCamp.com

DeddyCamp.com

0 komentar:

Posting Komentar

Menu Blog Ini

Info Satpol

Posting Gratis Di Sini

INSPIRASI

Ikuti beritaku