" C-O-N-D-O-L _ K-D-W,, tutorial blog

Setelah di klik, maka akan mucnul sebuah pop up seperti gambar di bawah ini. Silakan klik tombol PILIH FILE dan cari gambar ikon yang sudah anda siapkan tadi. Setelah anda mendapatkannya, klik tombol SIMPAN dan tunggu prosesnya. (Perlu diingat, hanya gambar berbentuk persegi yang bisa dijadikan sebagai icon.)

Sekarang tunggu sekitar 5 menit dan refresh kembali tampilan blog anda. Pastinya icon blog anda sudah berubah.

Lalu bagaimana jika widget Favicon tidak tersedia di template anda, atau jika cara di atas tidak berfungsi ? Jangan khawatir, saya masih punya cara kedua yang bisa anda coba.

Masih di dashboard blogger, silakan menuju menu TEMPLATE dan pilih EDIT HTML

Cari kode </head> dengan menggunakan CTRL + F. Setelah itu letakan kode di bawah ini tepat di atas kode </head>

<link href='URL GAMBAR' rel ='SHORTCUT ICON'/>

Kemudian simpan template anda dan lihat hasilnya. ( URL GAMBAR silakan diganti dengan link gambar yang anda inginkan)

Rasanya kedua cara tersebut sangat mudah dan tidak begitu sulit. Jika anda mengalami masalah, silakan tanyakan melalui kolom komentar di bawah.

Baiklah, saya rasa artikel kali ini mengenai Cara Mengganti Icon Blogger cukup sampai disini. Semoga bermanfaat dan Happy blogging !

► HomeDesign Blogger Template

Template Features

Platform Type	Blogger / Blogspot
Template Name	HomeDesign Blogger Template
Description	HomeDesign is a free blogger template with 2 columns, right sidebar, rounded corners, exclusive design for Blogger, slideshow and social icons.
Template Author	http://www.deluxetemplates.net
Designer	Deluxe Templates
Instructions URL	DOWNLOAD DISINI

► Mengganti Tampilan Thread Comment

Postingan ini Lanjutan dari Menampilkan Thread Comment pada Custom Template, jika Sobat sudah berhasil Menampilkan Thread Comments biasanya tampilannya polos tanpa variasi. Pada postingan kali ini kita akan meng-edit css Thread Comment agar tampilannya seperti gambar berikut.

Caranya cukup mudah Sob, Sobat cukup menghapus kode css komentar di template Anda, lalu ganti dengan kode berikut :

Kode :

.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #dddddd;
border-top-color: #eeeeee;
border-left-color: #eeeeee;
color: #333333 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #eeeeee;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #eeeeee) );
background: -moz-linear-gradient( center top, white 20%, #eeeeee 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #0099ff;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px;   font-size:12px; background:#bbddff;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .user a {
color:#225577; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
margin:0 0 8px;
}

.comment-header {background-color: #eeeeee;
    border: thin solid #dddddd;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
text-align:none;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #dddddd;
border-top-color: #eeeeee;
border-left-color: #eeeeee;
color: #333333 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #eeeeee;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #eeeeee) );
background: -moz-linear-gradient( center top, white 20%, #eeeeee 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .continue a:hover {
text-decoration: none; background:#fff; border:1px solid #0099ff;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
    margin-left: 0;
}
}

Jika sudah selesai Simpan template Anda dan lihat hasilnya.

Sekian artikel kali ini, Semoga Anda berhasil Mengganti Tampilan Thread Comment.

► Macam Macam Div Style

Pada postingan ini saya akan berbagi tentang beberapa kode untuk membuat Div Style. Langsung saja Sob, berikut kodenya :

Kode :

<div style="border: 2px solid blue;"> <div style="border: 3px solid red;"> <div align="center"> Tulis Text Disini</div> </div> </div>

Hasilnya :

Tulis Text Disini

Kode :

<div style="border: 4px solid yellow;"> <div align="center"> <span style="color: coral;">Tulis Text Disini</span></div> </div>

Hasilnya

Tulis Text Disini
Kode :

<div style="border: 3px double #ff0000; padding: 5px;"><div align="center">Tulis Text Disini</div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border: 3px double #0000ff; padding: 5px;"><div style="border: 2px solid #0077ff; padding: 5px;"><div align="center">Tulis Text Disini</div></div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border-color: lime; border-style: dotted; border-width: 2px; margin: 1px; padding: 1px;"><center>Tulis Text Disini</center></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border-style:inset;border-width:5pt;border-color:black" align="center">Tulis Text Disini</div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="background: #bbddff; border: 5px outset#c0c0c0; margin: 0px; padding: 5px;"><div align="center">Tulis Text Disini</div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border: 2px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 4px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 2px solid#220000;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="background-color: #44ccff;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div></div></div></div></div></div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border: 3px solid#2222ff;"><div style="background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/linerbn.gif'); border: 0px; margin: 2px; padding: 2px;"><div style="background-color: #cccccc;"><div align="center"><span style="color: red;">Tulis Text Disini</span></div></div></div></div>

Hasilnya :

Tulis Text Disini
Kode :

<div style="border: 1px solid#001100;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#00aa00;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#001100;">
<div align="center"><span style="color: red;">Tulis Text Disini</span></div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>

Hasilnya :

Tulis Text Disini

Sepertinya segitu dulu Sob, kalau ada yang mau menambahkan silakan tulis di komentar.

Silakan dicoba dan semoga berhasil...

► Membuat Tombol di Blog

Pada sebuah postingan atau pada widget mungkin kita ingin membuat sebuah entah itu berisi link atau hanya tampilannya saja. Bagi Sobat yang belum tahu caranya silakan baca tutorial kali ini.

Membuat tombol untuk Blogspot :

Login ke blogger Sobat.
Untuk membuat tombol di postingan klik Posting > New Post, lalu pilih tab Edit Html.
Jika Anda ingin menampilkannya di widget klik Design > Page Element > Add a Gadget > HTML/Javascripts.
Lalu letakkan kode untuk menampilkan tombol. (Untuk kodenya saya tulis dibawah tutorial ini)

Untuk Wordpress.com :

Login ke dasboard Anda.
Untuk menampilkan di postingan klik Posts > Add New, lalu pilih tab Html.
Untuk menampilkan di widget klik Appearance > Widgets, lalu letakkan Text pada sidebar.
Selanjutnya letakkan kode untuk menampilkan tombol.

Untuk kodenya dapat Sobat lihat dibawah ini :

kodenya seperti ini :

<button>Tombol</button>
Posisi tombol ditengah :

berikut kodenya :

<div style="text-align: center;"><button>Tombol</button></div>
Untuk tombol yang berisi Link berikut kodenya :
<a href="http://alamatblog.com/"><button>LINK</button></a>
Untuk membuat tombol berisi link yang akan dibuka ditab baru, cukup tambahkan target="_blank"

<a href="http://alamatblog.com/" target="_blank"><button>LINK</button></a>

Gimana Sob, mudah kan ?!?

Sepertinya cukup sekian dulu tutorial tentang Membuat Tombol di Blog.

► HostingPro Blogger Template

Template Features

Platform Type	Blogger / Blogspot
Template Name	HostingPro Blogger Template
Description	HostingPro is a free blogger template adapted from WordPress with 2 columns, right sidebar, space for ads, slideshow, social icons, posts thumbnails, tabs and drop down menu.
Template Author	http://btemplates.com/author/pbtemplates/
Designer	PBTemplates
Instructions URL	DOWNLOAD/install Blogger Template

DOWNLOAD

► SimpleVideoblog Template

Template Features

Platform Type	Blogger / Blogspot
Template Name	SimpleVideoblog Template
Description	SimpleVideoblog is a free blogger template with 2 columns, right sidebar, gallery-styled, perfect for photologs, minimalist, space for ads, footer columns and posts thumbnails.
Template Author	http://btemplates.com/author/free-blogger-template/
Designer	FBTemplate
Instructions URL	DOWNLOAD/install Blogger Template

DOWNLOAD/install Blogger Template

► Membuat Tombol To Page Down di WordPress.com

Beberapa waktu yang lalu saya pernah posting tentang Membuat Tombol Back To Top di WordPress.com, pada postingan tersebut ada pertanyaan dari sobat ibnzuhri tentang membuat tombol back to down atau to page down di wordpress.com. Jadi pada postingan kali ini akan saya buat tutorial tentang Membuat Tombol To Page Down di WordPress.com.

Berikut tutorialnya :

Login ke Wordpess Anda, Klik Appearance > Widgets.
Drag Text ke Sidebar.
Lalu letakkan kode berikut pada area Text.
<div style="display:scroll;position:fixed;top:300px;left:10px;"><a href='#footer' title='to page down'><img src='URL Icon' /></a></div>

Ganti URL Icon dengan URL Image, Contoh :

<div style="display:scroll;position:fixed;top:300px;left:10px;"><a href='#footer' title='to page down'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png' /></a></div>

Untuk URL Icon, dapat Sobat gunakan Url yang lain. Jika sobat ingin memasang tombol page down dan page up sekaligus, Sobat dapat menggunakan kode berikut

<div style="display:scroll;position:fixed;top:300px;left:10px;"><div><a href='#' title='to page up'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-top.png' /></a></div><div><a href='#footer' title='to page down'><img src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/to-bottom.png' /></a></div></div>
Terakhir klik Save.

Catatan : Karena setiap template berbeda, ada kemungkinan kode diatas tidak bekerja, namun pada blog wordpress.com saya cara ini sudah berhasil.

Semoga tutorial ini bisa membantu Sobat dalam membuat Tombol To Page Down di WordPress.com

► FreeDream Blogger Template

Template Features

Platform Type	Blogger / Blogspot
Template Name	FreeDream Blogger Template
Description	FreeDream is a free blogger template adapted from WordPress with 2 columns, right sidebar, rounded corners, minimalist, simple look, geometric motifs and vectorial elements.
Template Author	http://btemplates.com/designer/dreamweaver-gratuit/
Designer	Dreamweaver Gratuit
Instructions URL	DOWNLOAD DISINI

► Membuat Template Blog Secara Online

Cara yang satu ini banyak digunakan para blogger untuk mengganti template, walaupun ada cara yang lebih mudah yaitu dengan mendownload template jadi dan langsung menguploadnya, atau dengan menggunakan fasilitas Blogger template designer, namun dengan template hasil karya sendiri tentunya Anda memiliki kebanggaan tersendiri.

Dibawah ini ada beberapa situs online gratis yang dapat sobat gunakan untuk membuat template sendiri. Situs yang menyediakan fasilitas membuat template biasanya sudah menyediakan template template tertentu yang nantinya bisa anda edit sendiri. berikut ini situs yang menyediakan editing template secara online.

Profilebrand : menyediakan fasilitas edit template gratis, kebanyakan template yang disediakan untuk kita edit bertema jaringan sosial ( facebook, twitter, myspace dll )
Pimp my Profile : Untuk situs ini anda bisa membuat template blog, Myspace, dan friendster. Silahkan langsung saja ke situsnya.
DoTemplate : Dotemplate ini menyediakan 12 template XHTML dan CSS compliant dasar gratis yang bisa anda pilih sendiri. Anda bisa memilih salah satu dan kemudian mengkustomisasinya dengan mengubah warna, font, teks, posisi teks dan lain sebagainya pada background, container, footer, menu dan boks. Selain itu anda juga bisa menambahkan efek seperti drop shadow, gradien dan round corner. Layanan ini sangat menarik karena tidak memerlukan pengetahuan html yang terlalu banyak untuk mempergunakannya, selain itu ada pilihan untuk mengupload gambar anda sendiri. Setelah anda selesai membuat template blognya, anda bisa langsung mendownloadnya disana.
CSSEZ : ini adalah generator template online untuk blog wordpress dan movable type. Jika anda ingin menggunakan layanan ini, anda perlu registrasi gratis disini. Beberapa fiturnya yang bagus adalah memilih antara satu sampai empat kolom template, mengatur lebar kolom, padding, margin, border, font dan style link. Anda juga dapat mengupload gambar atau membuat sendiri dengan image maker.
Drupal Theme Generator : Generator ini adalah generator theme berbasis MS Excel untuk situs atau blog drupal yang menggunakan template PHP dan Xtemplate. Layanan ini gratis dan memiliki fitur yang kaya seperti generator theme random color, preview theme langsung, html color assistant, dan integrasi CSS, javascript, PHP dan kode html pada theme dari file eksternal dan lain sebagainya. Selain itu ada 9 theme yang bisa anda dapatkan ketika mendownload generator ini.
Eris Template Generator : Generator ini menyediakan 11 skin untuk blog anda dengan tiga pilihan kolom untuk setiap skinnya. Saat ini layanan ini mendukung diaryland, diary-x, movabletype, blogger, wordpress, b2 dan free html site template lainnya. Anda bisa menambahkan tagline, meta tag dan termasuk link ke index, arsip, email, notes, profile, buddylist dan juga 5 entri untuk diaryland, 10 entri untuk movable type, kalender untuk b2, blogroll untuk wordpress, XHTML compliant dan content copyright, webring, chat screen name dan button.
Firdamatic : Generator template online untuk blogger dan movable type ini memiliki pilihan dua dan tiga kolom, anda bisa memasukkan sendiri informasi pada boks relevan pada form online yang tersedian dan klik generate template, selain itu anda juga bisa menambahkan judul situs, url gambar dan memilih huruf dan warnanya.
www.maketemplate.com : Online generator ini mampu membuat template situs PHP, bersamaan dengan file CSS dan HTML. Anda juga bisa mengkustomisasi style sheet, header, sidebar, dan footer dengan menambahkan sendiri font, warna, margin dan alignment pada form online template generator. ANda juga bisa membuat sendiri scriptnya yang bisa anda kopi dan simpan untuk keperluan anda nanti.
PsycHo : Generator online template open source ini dapat diaplikasikan pada platform blogger, persian blog, dan blogFa. Anda bisa mengatur sendiri judul halaman, warna background body template, judul background, deskripsi, teks, spacing dan memilih hingga 4 pilihan kolom. Anda juga bisa preview template anda dan menyimpan kodenya. Layanan ini mudah digunakan tanpa pengetahuan html yang terlalu banyak.
Templatr : Templatr ini menyediakan lebih dari 20 layout dan pilihan formatting untuk berbagai elemen halaman termasuk halaman utama, header, footer, titles, margin, padding, border dan banyak lagi untuk keperluan wordpress blog. Selain itu, layanan ini juga menyediakan upload dimana anda bisa mengupload grafis/gambar . Setelah itu anda bisa mendownload template jika anda telah selesai dan mengaplikasikannya pada blog anda.
Weebly : Generator template yang rapi ini memiliki 15 desain pre-built yang bisa dikustomisasi dengan menambahkan elemen seperti iklan, feed icon, map, contact form, teks dan layout gambar, kolom google dan youtube video dan lain sebagainya. Jika anda sudah selesai anda bisa mempublikasikan situs/blog tersebut pada platform anda.
WordPress Theme Generator : Layanan generator online dapat membantu anda untuk membuat sendiri theme wordpress anda dengan mudah tanpa pengetahuan html dan css language. Layanan ini menyediakan pilihan untuk memilih sendiri nama blog, ukuran body, lokasi sidebar dan ukurannya, menambahkan kolom ketiga, layout menu, warna dan skema teks, anda juga bisa menambahkan tag cloud, arsip dan kotak pencarian. Selain itu anda bisa mengupload logo situs anda online dan membuat link-nya dari template. Jika anda telah selesai anda bisa melihat hasil kreasi anda dan mendownloadnya dalam file zip.

Selamat mencoba dan semoga sukses Membuat Template Blog Secara Online.

► Menampilkan Smiley Pada Postingan Blogger

Sebenarnya sudah banyak postingan dari para blogger master tentang Menampilkan Smiley Pada Postingan, namun tidak ada salahnya saya memposting ini, kali aja masih ada yang belum tau.

Trik ini dapat membuat tampilan postingan sobat menjadi lebih menarik, karena kita dapat menampilkan pic smile seperti Menampilkan Smiley Pada Postingan

dan lain lain.

Caranya gampang Sob, silakan ikuti tutorial berikut :

Login ke blogger trus pilih Layout > Edit HTML.
Beri tanda centang pada Expand Widget Templates.
Cari kode ini ]]></b:skin> .
Masukkan script berikut ini dibawah kode ]]></b:skin>
<script src='http://wadah-tutorial.googlecode.com/files/ysmileys.js' type='text/javascript'/>
Terakhir klik Save Template. Selesai...

Berikut beberapa kode yang dapat Anda gunakan :

:D		:P
:)		;)
:-S		:-B
:-h		:-a
:x		:(
:-t		:-bd
:-c		:-*
8-7		8-\|
7:P		=D7
8-}		X(

Sebenarnya masih ada beberapa kode lagi, berhubung saya sudah lupa jadi segitu dulu, jika ada yang mau menambahkan silakan tulis di kolom komentar.

Selamat mencoba dan semoga berhasil...

► Outubro Blogger Template

Template Features

Platform Type	Blogger / Blogspot
Template Name	Outubro Blogger Template
Description	Outubro is a free blogger template with 2 columns, right sidebar, neutral colors and posts thumbnails.
Template Author	http://btemplates.com/author/templates-novo-blogger/
Designer	Templates Novo Blogger
DOWNLOAD URL	DOWNLOAD/install Blogger Template

► Membuat Recent Comments Blogger dengan Avatar

Tutorial kali ini sama saja dengan tutorial memasang Widget Recent Comment Valid XHTML, cuman kodenya aja yang berbeda. Jadi untuk tutorial yang lebih jelas silakan baca Widget Recent Comment Valid XHTML. Untuk postingan ini saya buat singkat saja.

Berikut caranya :

Buat widget HTML/JavaScript.
Beri judul Recent Comments atau apalah terserah Anda.

Lalu masukkan kode berikut :

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 30,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://wadahtutorial.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

Keterangan :

numComments : 5, jumlah komentar yang ditampilkan

avatarSize : 30, ukuran avatar dalam pixel

characters : 60, jumlah karakter yang ditampilkan

wadahtutorial.blogspot.com ganti dengan URL blog Anda.

max-results=5, jumlah komentar yang ditampilkan, ganti sesuai keinginan Anda.

Terakhir klik Save. Selesai...

Selamat mencoba Membuat Recent Comments Blogger dengan Avatar.

► MusicBlog Blogger Template

Template Features

Platform Type	Blogger / Blogspot
Template Name	MusicBlog Blogger Template
Description	MusicBlog is a free blogger template with 2 columns, right sidebar, exclusive design for Blogger, slideshow, social icons and vectorial elements. Excellent layout for blogs about girls or music.
Template Author	http://btemplates.com/author/deluxe-templates/
Designer	Deluxe Templates
Instructions URL	DOWNLOADinstall Blogger Template

► Optimasi SEO pada Image

Image dapat menjadi salah satu sumber traffic dalam optimasi seo. Namun Image tersebut harus kita optimalkan, maksudnya Image yang kita beri "ALT TAG", hal ini merupakan bagian dari optimasi seo on page. Sama halnya seperti tag HTML normal lainnya yang digunakan sebagai teks alternatif ketika image/gambar tidak dapat ditampilkan.

Untuk mengoptimalkan image, dapat kita lakukan melalui dua cara, yaitu melalui nama file dan penggunaan alt tag. Alt berasal dari kata alternatif, hal ini memungkinkan kita untuk menentukan teks alternatif bagi gambar jika tidak dapat ditampilkan karena bermacam alasan, juga sebagai identitas gambar/image di search engine, misalkan saat kita mencari pada Google Image, maka Alt tag tersebut sangat berfungsi pada hasil pencarian. Ketika search engine menjelajah halaman web atau blog, mereka menganggap nama file dan alt tag sebagai isi gambar.

Berikut beberapa Tips yang mungkin bisa Anda gunakan dalam Optimasi SEO pada Image :

Jangan gunakan "gambar1.png" atau "gambar2.jpg" sebagai nama file. Cobalah gunakan nama file Anda sebagai kata kunci atau keyword, contoh, "seo-on-page.png" atau "alt-tag.jpg"
Gunakan nama file dan alt tag yang singkat tapi deskriptif, hindari penulisan alt tag yang panjang, karena terkadang mungkin bisa dianggap spam
Pasokan alt tag bisa menggunakan gambar sebagai link, hal ini bekerja sebagai anchor text
Format gambar dengan jenis file - JPEG, GIF, PNG, dan BMP
Simpan semua gambar dalam direktori yang sama.

Contoh penggunaan Alt tag pada Image / gambar

Semoga artikel ini berguna bagi kita dalam meningkatkan Optimasi SEO.

► Masunurin Blogger Template

Template Features

Platform Type	Blogger / Blogspot
Template Name	Masunurin Blogger Template
Description	Masunurin is a free premium blogger template adapted from WordPress with 2 columns, right sidebar, rounded corners, space for ads and neutral colors.
Template Author	http://btemplates.com/author/themecraft/
Designer	Padd IT Solutions
Instructions URL	DOWNLOADinstall Blogger Template

Source : btemplates.com

► Menampilkan Tag Clouds di Blogger

Selain label dalam bentuk daftar, blogger juga menyediakan label dalam bentuk Cloud, jika fitur ini diaktifkan, label yang lebih populer muncul dalam font yang lebih besar daripada label yang kurang populer.

Berikut cara Menampilkan Tag Clouds di Blogger :

Login ke akun anda klik Dasbor > Design > Page Elements > Add a Gadget.
Kemudian pilih Label. Pada display ganti dari Daftar menjadi Cloud.
Lalu klik Save.

Sekarang Lihat blog anda, label clouds harusnya sudah di tampilkan. Kalau belum berhasil, lanjutkan dengan langkah berikut :

Klik Design > Edit HTML, beri centang pada Expand Template Widget.
Copy kode dibawah ini, letakkan tepat di atas kode ]]></b:skin>
/* Label Cloud Styles */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
Copy kode dibawah ini, letakkan tepat di bawah kode ]]></b:skin>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Simpan template Anda dan lihat hasilnya!.

Sekian tutorial tentang Menampilkan Tag Clouds di Blogger.

► Web Blog Blogger Template

Template Features

Platform Type	Blogger / Blogspot
Template Name	Web Blog Blogger Template
Description	Web Blog is a free blogger template with 2 columns, right sidebar, slideshow and abstract.
Template Author	http://btemplates.com/author/alexiel/
Designer	Template Mo
Instructions URL	DOWNLOAD/install Blogger Template

Source : btemplates.com

► Menu Dropdown dengan Background

Dulu saya pernah posting cara Membuat Menu Dropdown, pada postingan ini kita akan membuat menu dropdown dengan background image.

Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :

Login ke blogger Anda, klik menu Design > Edit HTML.
Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.
Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut diatasnya.
<script>
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}
</script>
Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.
.dropdown-b {
background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
margin-top: 4px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.dropdown-bg {
background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.hide{
display: none;
}
.show{
display: block;
}
a{cursor: hand}
Lalu klik Save Template.
Kemudian klik menu Design > Page Element > Add a Gadget.
Pilih HTML/Javascript, lalu masukkan kode berikut ini :
<a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
<div id="dropdown-b-1" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
<a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
<div id="dropdown-b-2" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
<div id="dropdown-b-3" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
<div id="dropdown-b-4" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
Terakhir klik tombol Save. Selesai...

Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.

► Memberi Efek Hujan Salju di Blog

Rasanya udah lama saya ga post, baru sekarang bisa update blog, jadi pada kesempatan ini saya akan berbagi salah satu cara untuk mempercantik blog, tutorial singkat kali ini tentang Memberi Efek Hujan Salju di Blog. Efek ini akan sangat bagus jika ditampilkan pada background(latar belakang) blog berwarna gelap. jika background blog sobat berwarna terang atau mungkin putih, maka efek hujan saljunya akan tidak jelas malah mungkin tidak terlihat.

Langsung aja sob, berikut tutorialnya :

Login ke dashboard blogger sobat.
Pilih Layout > Add gadget > HTML/JavaScript.

Spoiler :
Letakkan script dibawah ini pada gadget.

<script src='http://wadah-tutorial.googlecode.com/files/snow.js.txt' type="text/javascript"></script>
Save dan lihat hasilnya.

Spoiler :

Ok sob, sekian dulu tutorial tentang Memberi Efek Hujan Salju di Blog.

► Membuat Efek Daun Berjatuhan di Blog

Seperti halnya Memberi Efek Hujan Salju di Blog, efek daun jatuh ini juga menambah daya tarik buat pengunjung blog, trik ini menggunakan kode javascript, jadi sedikit memperberat loading blog.
Sebaiknya jangan tambahkan efek ini kalau di blog sobat sudah menggunakan efek video slide, pemutar music mp3 online atau penggunaan script animasi yang lain. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript.

Berikut Cara Membuat Efek Daun Berjatuhan :

Login ke dashboard blogger anda.
Klik Template > Edit HTML.
Lalu klik Proceed dan centang Expand widget template.
Cari kode </head> pada template dengan menggunakan Ctrl+F.
Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head>.

<script src='http://wadah-tutorial.googlecode.com/files/leaf.js' type='text/javascript'/>
Save template anda dan lihat hasilnya.

Segitu aja Sob, selamat mencoba Membuat Efek Daun Berjatuhan di Blog.

► Membuat Text Area dengan Tombol Highlight All

Tutorial kali ini saya akan coba berbagi tentang cara Membuat Text Area dengan tombol Highlight All. Dengan menggunakan Highlight All akan lebih memudahkan mengcopy kalimat/kode script yang ada di dalam text area.

Untuk membuatnya cukup mudah, silahkan copy kode dibawah ini :

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
<textarea cols="20" name="txt" rows="4" style="height: 80px; width: 180px;" wrap="VIRTUAL"><a href="http://wadahtutorial.blogspot.com/" rel="dofollow" target="_blank">Tutorial Blog</a></textarea></div>
</form>
</div>

Silahkan ganti tulisan yang berwarna biru dengan tulisan/ kode script yang anda inginkan. hasilnya akan seperti dibawah ini :

Sekian penjelasan singkat mengenai cara Membuat Text Area dengan tombol Highlight All.
Semoga bermanfaat . . .

► RSS Feeds Dari Google Plus

Google Plus merupakan salah satu jaringan sosial yang sedang ramai di gunakan oleh blogger-blogger untuk sekedar mencari teman atau untuk mempromosikan artikel blog. Saya akan berbagi tentang RSS feed dan perangkat gratis untuk menambahkan fitur di jaringan Google Plus. Ini akan mempermudah membaca RSS Feeds melalui Google+ to RSS.

Google+ to RSS adalah alat online gratis yang memungkinkan sobat menghasilkan RSS feed dari Google+ akun sobat.

Berikut cara mendaftar di Google+ to RSS :

Masuk ke akun Google Sobat.
Silahkan sobat kunjungi situs Google+ to RSS.
Pada halaman awal klik Login Via Google +.
Lalu Klik Izinkan Akses.
Setelah selesai, maka Google+ to RSS otomatis akan membuat RSS feed dan lihat hasil RSS dari Google Plus.

Silahkan dicoba dulu Sob, dan semoga berhasil.

► Upgrade Profile Blogger Ke Profile Google Plus

Google+ adalah salah satu social media yang terus berkembang, dan hebatnya lagi, memiliki keunggulan dalam hal peningkatkan visibilitas di hasil pencarian Google.

Pada Tutorial kali ini saya akan berbagi cara meng-Upgrade Profile Blogger Ke Profile Google Plus. Dengan meng-Upgrade Profile Blogger kita mendapatkan beberapa manfaat, antara lain :

Menambah jumlah teman di Google Plus dengan cepat.
Meningkatkan traffic blog.
Interaksi antara kita dan pengunjung blog kita sangat penting, maka menggunakan akun Google plus menjadi salah satu solusi yang tepat.
Kita dapat dengan mudah berbagi posting, juga menshare artikel kita pada google plus. Share box secara otomatis akan muncul ketika Anda mempublikasikan posting, Anda dapat segera berbagi konten dengan orang lain.
Sobat bisa membuat efek bintang google snippet, atau menambah photo Anda di sebelah kiri hasil penelusuran google.

Jika sobat tertarik untuk meng-upgrade profile blogger ke Profile Google Plus, silahkan ikuti langkah-langkah berikut :

Login blogger
Pada dashboard blogger pilih Google+
Lalu Klik upgrade to Google+.
Centang pada kotak I've read the above and ....... lalu Klik switch now.
Kemudian Klik Add Blogs.
Selesai.

Silakan di coba Sob, semoga berhasil.

	Home
	Daftar Isi
	Download Template Blog
	Tutorial Blog
	Tips Blog
	Kode Warna
	Twitter
	Tukar Link
	Facebook
	Advertise
	Feedburner
	Kumpulan Icon
	Contact Us

	google_chrome
	download_IDM full pat
	download_avira
	download_firefox
	download_flashplayer
	download_java
	download_comodo
	download_avant_browser
	download_comodo_dragon
	download_adobe_air
	download_safar
	download_maxthon
	download_netscape
	download_seamonkey
	download_adobe_reader
	download_vlc_32
	download_winrar_32
	download_utorrent
	download_avast_antivirus
	download_adobe_reader
	download_ccleaner
	download_skype
	download_kmplayer
	download_total_commander
	download_phraseexpress
	download_nvidia_forceware_vista
	download_windows_7_codecs
	download_syncback
	download_teamspeak_server_32
	download_picasa/56670
	download_dropbox
	download_punkbuster
	download_notepad++ 6.5.3
	download_rainlendar
	download_kingsoft_office_suite
	download_mediaportal
	download_foxit Reader
	download_peazip
	download ICQ 8.2.6893
	download_xbmc_media_center

Pages

" C-O-N-D-O-L _ K-D-W,, tutorial blog

Tutorial Membuat Blog Pemula 2014

► Cara Mengganti Icon Blogger 2014

► ebit gad - iwan fals

music rock-pop-regge

► HomeDesign Blogger Template

► Mengganti Tampilan Thread Comment

► Macam Macam Div Style

► Membuat Tombol di Blog

► HostingPro Blogger Template

► SimpleVideoblog Template

► Membuat Tombol To Page Down di WordPress.com

► FreeDream Blogger Template

► Membuat Template Blog Secara Online

► Menampilkan Smiley Pada Postingan Blogger

► Outubro Blogger Template

► Membuat Recent Comments Blogger dengan Avatar

► MusicBlog Blogger Template

► Optimasi SEO pada Image

► Masunurin Blogger Template

► Menampilkan Tag Clouds di Blogger

► Web Blog Blogger Template

► Menu Dropdown dengan Background

► Memberi Efek Hujan Salju di Blog

► Membuat Efek Daun Berjatuhan di Blog

► Membuat Text Area dengan Tombol Highlight All

► RSS Feeds Dari Google Plus

► Upgrade Profile Blogger Ke Profile Google Plus

HALAMAN

DOWNLOAD SOFTWERE

Popular Posts

ARSIP HALAMAN BLOG

Blogger templates

Jayesslee in Taiwan

DOWNLOAD GAME A ************* Z