Tutorial Blog | SEO | Free Software

Free Template : ads themes pro

noreply@blogger.com (Lucky) — Fri, 13 Apr 2012 23:37:00 +0000

Free Template - Pada posting sebelumnya saya sudah membahas Cara Membuat Tooltips Gelembung 100% Menggunakan Css yang berlabel Tutorial Blogspot berbeda pada kesempatan kali ini saya akan membagi Template secara Free.

Sudah lama sekali saya tidak update posting di blog ini,ya di karenakan sibuk dengan dunia asli tapi saya tetap sempatkan untuk sharing.Bicara soal sharing kebetulan pada posting ini saya ingin sharing template yang menurut saya lumayan Seo Friendly langsung aje deh gan.

Cara Membuat Tooltips Gelembung 100% Menggunakan Css

noreply@blogger.com (Lucky) — Sat, 20 Aug 2011 01:48:00 +0000

Tutorial Blogspot - Pada posting sebelumnya saya telah membahas Cara Membuat Share Melayang yang berlabel Tutorial Blogspot dan pada kesempatan kali ini saya juga masih sama membahas label tersebut.

Para blogger biasa nya memanfaatkan cara ini untuk menjelaskan suatu link (Bisa link refferal begitu banyak orang yang mengikuti) yang bertujuan ke halaman lain nya (Hover) secara otomatis buble tooltips akan muncul dengan semua penjelasan yang ditulis tetapi banyak para blogger yang mengecam bahwa trik ini menyebut java sript yang nanti nya akan membebani blog dengan ukuran yang besar.Yah trik ini murni menggunakan kode css sebagai kode panggilan nya,untuk demo nya silahkan sobat lihat gambar dibawah ini :

Sekarang silahkan perhatikan kode css berikut :

/*———- balon tips ———–*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}

a.bt span{ display: none; }

/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}

a.bt:hover span.balontips{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}

a.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPqVKvRUK2HIEMDPj5lrfXEP4jtJ32JpgQ0qo6f0yrbonL71Pxol10fuYEB7X6AS622NGDc7nBIfzwKr3jvBzuaQ6aUCk6Q3LrEjBm2jZ7gSTiY2brzTT2vt25kSUMsbR6DidC-v0a3so/) no-repeat top;
}

a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPeqhBYkVAUSSK1-0ZUiDIDNr3trNmaYte5V9ZI8A8xzbvNmI41EfeQPwCfBaR-BktERcI1Ntm6Wl3yWvGbZIRk5dKpGWtAwWcHC1IbxW9ZDDolOpDTGKb_9TwcW41CE9uS4JnShOjom8/) repeat bottom;
}

a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPqVKvRUK2HIEMDPj5lrfXEP4jtJ32JpgQ0qo6f0yrbonL71Pxol10fuYEB7X6AS622NGDc7nBIfzwKr3jvBzuaQ6aUCk6Q3LrEjBm2jZ7gSTiY2brzTT2vt25kSUMsbR6DidC-v0a3so/) no-repeat bottom;
}

/*———- balon tips END———–*/

Cara Untuk menggunakan:
1. Link yang telah dibuat di kelas deklarasi diberikan = "bt".
Link dalam kode HTML terlihat seperti <a ini href="http://dindingcoret.com"> </ a> Setelah diberi deklarasi akan seperti ini: <a href="http://dindingcoret.com"> < / a>
2. Menyatakan balontips. Panggilan balontips dengan menulis kode <span="balontips"> </ span>. Masukkan hubungan antara kode.
3. Panggil gambar di atas dengan mengetik <span="atas"> </ span>. Masukkan kode antara "balontips".
4. Panggil tengah gambar dengan mengetik <span="tengah"> </ span>. Masukkan kode antara "balontips" di bawah kode "atas". Tempat ini sobat sobat menulis komentar.
5. Panggil gambar di bawah ini dengan mengetikkan <span="bawah"> </ span>. Masukkan kode antara "balontips" di bawah kode "tengah".
Contoh kode dapat ditemukan di sini:
<a href=" URL "> Sobat
Judul di sini ..
<span>
<span>
</ Span>
<span>
Description here ..
</ Span>
<span>
</ Span>
</ Span>
</ A>

Sumber : Zoom Blog

Cara Membuat Share Melayang

noreply@blogger.com (Lucky) — Sun, 07 Aug 2011 00:32:00 +0000

Tutorial Blogspot - Sebelumnya kita telah membahas tutorial Cara Membuat Komentar Admin Berbeda tetapi berbeda dengan posting kali ini yang lebih menuju ke Share.

Share dalam bahasa indonesia nya adalah berbagi yang berarti berbagi hal apa saja ke siapapun dan widget share sangat berguna di kalangan para blogger,biasanya mereka (Para Blogger) menyuruh share artikel blog mereka ke situs-situs ternama seperti facebook,twitter dan lain-lain hal itu dilakukan agar blog nya para blogger bisa rame karena mendapat backlink dari share yang dilakukan oleh si pembaca.

Untuk demo nya : Mr.Black Hats Informasi
Nb : Perhatikan widget share melayang yang berada disebelah kiri blog.

Untuk cara nya silahkan lihat tutorial dibawah ini.

Login ke blogger
Klik rancangan
Klik tambah gadget
Pilih html/java script
masukkan kode berikut ke dalamnya :

<style>
#pageshare {position:fixed; bottom:35%; margin-left:-111px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from bloghats.blogspot.com">

<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>

<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

<div class='sbutton' id='rt'>

<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>

<div class='sbutton' id='gb'>

<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>

<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></div>

<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>

<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>

<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://bloghats.blogspot.com/2011/08/cara-membuat-share-melayang.html">widget</a></div>
</div>

Nb:Kode yang berwarna merah untuk mengatur posisi tampilan :
Sebagai contoh sobat tentang posisi tampilan sedikit saya jelaskan
Bottom : 35% artinya posisi tampilan nya semakin mendekati ke atas,kesimpulan nya semakin kecil persen nya tersebut posisinya makin kebawah.
sedangkan untuk margin-left : -111px maka tampilan nya akan mepet ke kiri dan semakin kecil nilainya maka posisinya semakin ke kanan tapi tetap masih di posisi kiri.
Jika sobat ingin tampilan nya berada disebelah kanan tinggal ganti saja angka -111px nya menjadi 800px tanpa [-Min].

Jika ada pertanyaan silahkan berkomentar dibawah ini.

Cara Membuat Komentar Admin Berbeda

noreply@blogger.com (Lucky) — Sat, 06 Aug 2011 00:10:00 +0000

Tutorial Blogspot - Sebelum nya kita telah membahas trik navbar yaitu Cara Menghapus Navbar dan Membuat Navbar Blog Menjadi Autohide berbeda dengan tutorial atau trik kali ini yang lebih mendekat ke persoalan kolom komentar.

Komentar adalah sebuat tulisan yang mengandung dari 'kritik,saran dan pertanyaan' berkomentar di dunia blogger itu bukan lah hal asing lagi,gimana jadinya kalau blog enggak ada komentar dari pembaca ataupun blog itu kurang menarik bagi pengunjung lalu jika seperti itu trik atau tutorial inilah yang kita pakai.

Untuk contohnya silahkan kalian komentar dulu dibawah ini nanti saya akan berkomentar juga lalu sobat lihat perbedaan kolom atau kotak komentar dengan punya saya [Admin] dibandingkan kotak komentar pembaca [pengunjung].Trik ini memang belum agak jadul bangat tapi sudah banyak para blogger yang memakai trik atau tutorial ini dan banyak juga sebagian dari mereka memodifikasi nya lagi apa salahnya kalau kita ikut memodifikasi nya sendiri,berikut kode dasar nya :

Kode Html Dasar

.comment-body-author { <<<<[Kode Dasar,Perintah atau Pembuka nya]
background: #ebebeb; <<<<[Kode untuk mengatur warna dari kotak komentar milik admin]
border:1px dotted #000000; <<<<[Kode untuk mengatur warna dari border kotak milik admin]
margin:0; <<<<[Margin nya.Tidak usah di otak-atik]
padding:0 0 0 20px; <<<<[Padding,Tidak usah di otak-atik]
} <<<[Kode Penutup nya]

Langkah-langkah

Login ke blogger
Klik rancangan
Centang expand widget
Klik download template lengkap

Nb:Sewaktu-waktu jika tutorial tidak berhasil dan template berantakan tapi kita masih punya back up template nya.

Pastekan kode berikut diatas kode ]]</b:skin>

.comment-body-author {
background: #cccccc;
border:1px dotted #000000;
margin:0;
padding:0 0 0 20px;
}

Perhatikan kode yang berwarna Merah tebal dan Hitam tebal kalian bisa menggantinya dengan warna yang kalian suka!

Kemudian cari kode berikut ini dan fokuskan mata kalian ke tulisan yang berwarna Hitam tebal.

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'
rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Untuk kode yang berwarna merah adalah kode yang harus di tambahkan ke template anda sesuai dengan posisi kode yang diatas.

Klik simpan template

Jika kalian mengikuti tutorial dengan baik maka akan berjalan lancar,silahkan bertanya lewat form komentar dibawah ini.

Cara Menghapus Navbar Blog

noreply@blogger.com (Lucky) — Fri, 05 Aug 2011 05:39:00 +0000

Tutorial Blogspot - Posting ini merupakan lanjutan dari posting sebelumnya yaitu Membuat Navbar Menjadi Autohide,kalau di posting tersebut merupakan panduan supaya navbar jadi autohide berbeda dengan posting ini yang membuat navbar menjadi hilang permanent.

Navbar adalah sebuah menu navigasi original bawaan blogger,navbar berguna mencari blog lain,lompat ke dasbor dan lain-lain tetapi banyak para blogger yang tidak menyukainya berbagai cara para blogger mengakali navbar dengan cara menghapusnya,membuat menjadi autohide atau pun menutupnya dengan menu navigasi ala kita sendiri,berikut cara menghapus Navbar blog :

Login ke blogger
Klik rancangan
Klik edit html
Centang expand widget
Pastekan kode berikut ini dibawah <Head>

#navbar-iframe{
height:0px;
visibility:hidden;
display:none
}

Klik simpan template

Jika ada pertanyaan silahkan berkomentar.

Membuat Navbar Blog Menjadi Autohide

noreply@blogger.com (Lucky) — Fri, 05 Aug 2011 05:25:00 +0000

Tutorial Blogspot - Belum juga beberapa jam dari artikel sebelum nya yaitu Menanam Backlink Pada Artikel dan sekarang mau update tentang membuat navbar blog menjadi autohide.

Autohide adalah jika cursor kita arah kan ke navbar ia akan muncul tetapi jika kita keluar dari area navbar ia akan menghilang dan itu disebut autohide di posting ini lah kita akan membuat navbar blog sobat menjadi autohide.Navbar sama hal nya seperti icon obeng dan tang mengganggu pemandangan di halaman depan atau home blog kita maka dari itu kita bisa membuat Autohide navbar nya dengan cara berikut ini :

Login ke blogger
Klik edit html
Centang expand widget
Cari lah kode ]]></b:skin> lalu pastekan kode berikut ini diatas kode tadi

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Klik simpan template

Jika sobat ingin menghapus navbar nya silahkan lihat artikel ini Cara Menghapus Navbar Blog

Menanam Backlink Pada Artikel

noreply@blogger.com (Lucky) — Fri, 05 Aug 2011 04:13:00 +0000

SEO - Ini adalah artikel SEO (adalah singkatan dari Search Engine Optimazation) yang di tulis oleh lucky pertama kali di blog ini.

Backlink adalah sebuah link balik yang menuju blog atau website kita biasanya para blogger melakukan hal ini dengan cara tukar link dengan blogger lain nya memakai widget Mr.Linky yang mungkin nanti kita akan membahas nya.

Menanam Backlink Pada Artikel
Contoh nya saja ada pada blog ini biasanya lucky menaruh backlink dibagian atas artikel dan lucky selalu membuat artikel didahulukan basa-basi dahulu yang berisi backlink ke artikel sebelumnya,hal itu agar pembaca atau pengunjung bisa lebih lama di blog kita dan google pun sangat mendukung blogger yang banyak backlink.

Tujuan Menanam Backlink Pada Artikel
Seperti yang saya katakan diatas hal ini berguna agar posting kita lebih cepat terindex oleh search engine milik google dan bukan cuma itu aja agar pembaca mudah menemui apa yang dicarinya lewat backlink yang sudah kita tanam di artikel tersebut.

Kesimpulan Menanam Backlink Pada Artikel

Untuk blog baru di anjurkan memperkuat pondasi pada halaman utama atau home dahulu yaitu dengan cara memberikan widget daftar isi,widget label dan widget lain nya yang mempunyai link menuju artikel kita,hal itu agar backlink blog kita teratur di artikel maupun di home dan hal ini agar semakin cepat blog kita terindex dan memiliki posisi bagus pada SERP.

Kesimpulan utama nya adalah 'Agar blog baru memberikan atau memperkuat backlink di halaman utama'.

Untuk blog yang sudah agak lama sebaiknya membuat backlink menuju halaman posting lain nya,hal ini sangat ampuh dan sudah banyak para blogger master mencoba nya seperti Blog Juragan,O-om dan Mas Doyok,Hal ini agar memperkokoh halaman posting kita pada SERP di google.

Kesimpulan kedua nya adalah 'Agar posting kita bisa dapat posisi bagus di SERP'

Bila ada pertanyaan mengenai SEO silahkan berkomentar dibawah ini.

Menghilangkan Border Gambar

noreply@blogger.com (Lucky) — Fri, 05 Aug 2011 02:50:00 +0000

Tutorial Blogspot - Beberapa menit yang lalu kita telah membahas Cara Menghilangkan Icon Obeng dan Tang tidak jauh beda judul nya dengan judul posting ini yang berjudul Menghilangkan Border Gambar.

Secara dasar border adalah sebuah kotak atau bingkai gambar yang berada pada gambar,contohnya saja berada pada gambar diatas lihat lah garis-garis kotak berwarna hitam itulah yang disebut border sama halnya kaya posting sebelum nya hal ini mengganggu pemandangan kita melihat gambar maka dari itu kita harus menghapus garis-garis pinggir atau kotak hitam itu,berikut cara menghapus border :

Login ke blogger.
Klik rancangan
Klik edit html
Centang expand widget
Cari kode :

.post img [Perhatikan kode ini]
padding:4px;
border:1px solid $bordercolor; [Kode ini yang akan di edit]
}

Rubah angka 1 yang berwarna merah menjadi 0
Klik simpan template

Jika ada kritik,saran atau pertanyaan silahkan berkomentar

Cara Menghilangkan Icon Obeng dan Tang

noreply@blogger.com (Lucky) — Fri, 05 Aug 2011 01:23:00 +0000

Tutorial Blogspot - Setelah beberapa menit yang lalu lucky membahas Mengganti Favicon Blog,Saat ini juga lucy akan membahas Tutorial Blogspot yang berjudul Cara Menghilangkan Icon Obeng dan Tang.

Mungkin trik ini sudah jadul karena sudah banyak para blogger yang membahas nya tapi lucky hanya share ulang saja yang penting kan share dan update nya hehe.Gambar icon tang dan obeng atau quick edit ini memang sangat menggangu pemandangan pada blog itu menurut lucky walaupun hanya kita saja yang bisa melihat icon itu,berikut cara menghilangkan icon obeng dan tang.

Login ke blogger.
Klik edit html
Centang expand widget
Cari kode ]]></b:skin>
Pastekan kode berikut di atas kode ]]></b:skin>

.quickedit{
display:none;
}

Klik Simpan template
Selesai

Untuk kritik,saran dan pertanyaan silahkan berkomentar dibawah ini.

Mengganti Favicon Blog

noreply@blogger.com (Lucky) — Thu, 04 Aug 2011 23:50:00 +0000

Tutorial Blogspot - Favicon adalah sebuah icon pada blog maupun pada website,secara default icon blog adalah seperti ini ► kita bisa menggantinya dengan kreasi kita sendiri.Letak favicon berada di sebelah kiri address bar dan adress bar adalah kotak tempat dimana kita menaruh link disebut address bar,sudah banyak para blogger yang sudah mengganti favicon blog nya dan termasuk blog saya sekarang pun blogger sendiri sudah mensupport blogger agar mempermudah mengganti favicon dengan feature terbaru nya.

1.Cara mengganti favicon blog dengan cara manual

Login ke blogger.
Klik rancangan
Klik edit html
Centang expand widget
Pastekan kode berikut diatas kode <head>

<link href='http://i56.tinypic.com/opda9.gif' rel='shortcut icon'/>

Ganti tulisan yang berwarna merah dengan link gambar sobat sendiri
Terakhir silahkan klik simpan template

2.Cara mengganti favicon blog dengan cara otomatis

Login ke blogger.
Klik rancangan
Klik edit pada feature terbaru blogspot letaknya di bagian header element,pojok sebelah kiri.

Upload gambar favicon sobat
selesai

Itulah dua cara mengganti favicon blog,jika ada pertanyaan,saran dan kritik silahkan berkomentar di bawah ini.