belajar dan berbagi

Cara menambah gambar di blog dengan efek autozoom

Cara menambah gambar di blog dengan efek autozoom. pada posting yang lalu saya juga telah membuat posting tentang Cara menambah gambar di blog dengan efek autozoom, yaitu Auto zoom image blogger dengan CSS, dan pada posting Cara menambah gambar di blog dengan efek autozoom kali ini juga sebenarnya hampir sama, hanya saja pada posting Cara menambah gambar di blog dengan efek autozoom kali ini kita tidak perlu memasukkan kode-kode pada yang akan kita beri efek autozoom. Jadi semua gambar yang ada pada posting secara otomatis telah terbuat efek autozoom, baik itu posting lama maupun posting baru.
Kita langsung saja lihat Cara menambah gambar di blog dengan efek autozoom.
1. Tentunya login dulu ke blogspot.com/blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. cari kode ]]></b:skin>
Masukkan kode ini diatasnya :


.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }


4. SImpan template, dan lihat hasil Cara menambah gambar di blog dengan efek autozoom yang telah kita kerjakan
Cara buat background dan border pada sidebar

Cara buat background dan border pada sidebar

Cara buat background dan border pada sidebar. Khusus untuk blog yang dengan sidebar / widget belum ada bordernya, mari kita coba membuat background dan border pada sidebar agar blog sedikit lebih elok.
mari kita mulai Cara buat background dan border pada sidebar
1. Login ke blogspot.com/blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. Cari kode :
/* Widgets
----------------------------------------------- */


lalu tambahkan kode ini dibawahnya :

.sidebar .widget {-moz-border-radius: 2px;-webkit-border-radius: 2px;border:1px solid #C0C0C0;background-color: #transparent;padding:10px;margin:0 0 1.0em;}


Untuk mengganti warna sesuai dengan keinginan silahkan diganti sendiri pada :
solid #C0C0C0
dan
background-color: #transparent

SIMPAN TEMPLATE

Cara membuat multi tab pada blog

Cara membuat multi tab pada blog

Cara membuat multi tab pada blog. Meskipun pada beberapa waktu yang lalu kita telah membahas tentang Cara bikin multi tab view pada blogspot , dan kali ini juga sama, hanya saja cara dan modelnya yang sedikit berbeda, untuk Cara membuat multi tab pada blog kali ini adalah dengan hasil seperti ini :



Mari kita mulai Cara membuat multi tab pada blog
1. Login ke blogspot / blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. Cari kode ]]></b:skin>
Pastekan kode berikut, diatasnya :
/*---- Wordpress Style MBT Menu Tabs----*/
.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

4. Kemudian tambahkan kode ini dibawah ]]></b:skin>


Download Kode Cara membuat multi tab pada blog



5. Lanjutkan dengan mencari kode <div id='sidebar-wrapper'> jika tidak ketemu coba cari <div class='column-right-inner'>
pastekan kode berikut dibawahnya.
<div class='MBT-tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
$(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
$(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
$(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
$(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
$(this).addClass(&quot;MBT-tabs-current&quot;);
$(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>

<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='clear:both;'/>

Simpan hasil Cara membuat multi tab pada blog, dengan klik SIMPAN TEMPLATE


pengertian css

pengertian css

CSS adalah singkatan dari Cascading Style Sheets.

CSS adalah sebuah singkatan yang mendefinisikan tentang tata letak dokumen HTML. Misalnya : CSS meliputi font, warna, margin, garis, tinggi, lebar, gambar latar belakang, posisi maju dan banyak hal lainnya.
kode html pada postingan

kode html pada postingan

kode html pada postingan. Berikut ini adalah beberapa kode html yang sertinng kita gunakan dalam postingan, kode tersebut diantaranya : kode garis bawah, kode huruf tebal, kode huruf miring dll
mari kita lihat :



<STRONG> ISI TEKS </STRONG>
UNTUK MEMBUAT TEKS JADI TEBAL

<I> ISI TEKS </I>
UNTUK MEMBUAT TEKS MIRING

<font size=UKURAN TEKS>TEKS</font>
UNTUK MENENTUKAN UKURAN TEKS SESUAI SELERA


<u>TEKS</u>
UNTUK MEMBUAT GARIS BAWAH.

<s>TEKS</s>
UNTUK MEMBUAT TEKS DI CORET

<blink>isi tulisan</blink>
UNTUK MEMBUAT TEKS BLINK, KEDAP KEDIP

<pre>TEKS</pre>
UNTUK MENENTUKAN POSISI TEKS

<p>TEKS</p>
BIKIN PARAGRAF

<center>TEKS</center>
UNTUK MEMBUAT TEKS RATA TENGAH / TEKS JADI DI TENGAH

<p align=”left”>TEKS</p>
UNTUK MEMBUAT RATA KIRI.

<p align=”right”>TEKS</p>
UNTUK MEMBUAT RATA KANAN

<p align=”center”>TEKS</p>
UNTUK MEMBUAT PARAGRAF RATA KANAN.

<br>isi tulisan<br/>
UNTUK MEMBUAT TEKS TURUN 1 KALI ENTER.

<big>ISI TEKS</big>
UNTUK MEMBUAT TEKS DENGAN UKURAN AGAK BESAR.

<small> ISI TEKS</small>
UNTUK MEMBUAT TEKS DALAM UKURAN KECIL.

<font color=WARNA TEKS>ISI TEKS</font>
Memberi warna pada tulisan. Ganti kalimat warna tulisan dengan warna yang kita sukai (menggunakan bahasa inggris).

&nbsp;
MEMBUAT 1 SPASI.

Cara menggunakan kode html pada postingan

Cara menggunakan kode html pada postingan agar lebih mudah. Sering kita membutuhkan kode html pada setiap posting, seperti kode link :
<a href="http://ikhsanu.blogspot.com/" title="ikhsanudin.com">ikhsanudin.com</a>
contohnya saat kita akan menggunakannya untuk membuat link : Cara menggunakan kode html pada postingan agar lebih mudah
bagi pemula, kode seperti itu sepertinya sulit untuk dihapal
atau mungkin kode Auto zoom image blogger dengan CSS seperti ini:
<a class="hovergallery" href="http://ikhsanu.blogspot.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiZxLwDoJNJ8EtPxmTsdl0XC1mInQQMyN3TBkWXneywfWe31V-OEzqJEYL2_ZodlISXQ6XSLEtx-VVBV0zL6QIqlxKULq6dm7ExcLpZK9Vj_DbhKyxzVfApWMyAWy3TxE25J4cmjZ6w/s912/bismillahirrahmanirrahim.png" /></a>
dan kode-kode html lainnya yang sering digunakan, tergantung kebutuhan......

Untuk memudahkan agar kita tidak repot mencari kode-kode tersebut maka hendaknya setiap kita akan membuat posting baru , kode tersebut telah ada di halaman posting baru. Dan cara membuatnnya adalah :
1. Login ke blogspot / blogger.com
2. Pilih Setting / Setelan
3. Pos dan komentar
4. Template Entri
5. Masukkan kode html yang akan ditampilkan pada halaman posting baru ;
berikut ini gambarnya:

6. Setelah dimasukkan kodenya, lalu simpan setelan

Auto zoom image blogger dengan CSS

Auto zoom image blogger dengan CSS. Auto zoom image dimaksud adalah, jika mouse kita arahkan diatas gambar, maka gambar secara otomatis akan membesar, dan jika mouse kita jauhkan dari gambar, maka gambar akan terlihat normal kembali.
Lalu bagaimana cara buat Auto zoom image blogger dengan CSS tersebut?
Berikut ini kita akan coba membuat Auto zoom image blogger dengan CSS
1. Login ke blogger.com lagi ya.....
2. Template > Edit html dan centang Expant Templat Widget
3. Temukan kode ]]></b:skin>
4. kopi Copy dan paste kode berikut ini diatasnya :
.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

5. Simpan template
6. cara diatas adalah cara memasukkan kodenya pada template blog, lalu cara memposting atau membuat atau mengaktifkan atau menfungsikan Autozoom ini adalah : saat kita memasukkan gambar pada posting diharuskan dengan menggunakan kode ini :


<a class="hovergallery" href="http://ikhsanu.blogspot.com/" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiZxLwDoJNJ8EtPxmTsdl0XC1mInQQMyN3TBkWXneywfWe31V-OEzqJEYL2_ZodlISXQ6XSLEtx-VVBV0zL6QIqlxKULq6dm7ExcLpZK9Vj_DbhKyxzVfApWMyAWy3TxE25J4cmjZ6w/s912/bismillahirrahmanirrahim.png" /></a>

berikut contoh hasil Auto zoom image blogger dengan CSS



Buat link otomatis saat artikel di copy paste

Buat link otomatis saat artikel di copy paste. Mungkin itulah judul yang tepat, dan saya tidak akan bercerita tentang kenapa dan mengapa harus kita buat link otomatis saat artikel di copy paste. Tapi yang jelas, pada posting ini hanya akan bercerita tentang cara buat link otomatis saat artikel di copy paste
Mari kita ikuti langkah demi langkah untuk Buat link otomatis saat artikel di copy paste
1. seperi biasa kita harus login ke blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. cari kode </head>, dan tambahkan kode berikut diatasnya:

<script type='text/javascript'>
function addLink() {
var body_element = document.getElementsByTagName('body')[0];
var selection;
selection = window.getSelection();
var pagelink = "<br/><br/> Diambil Dari: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Ikhsanudin Blog"; // change this if you want
var copytext = selection + pagelink;
var newdiv = document.createElement('div');
newdiv.style.position='absolute';
newdiv.style.left='-99999px';
body_element.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function() {
body_element.removeChild(newdiv);
},0);
}document.oncopy = addLink;
</script>

*Ganti : Ikhsanudin Blog dengan nama blog Anda
Simpan Template, dan silahkan lihat hasil Buat link otomatis saat artikel di copy paste
Silahkan lihat gambar hasil dari Buat link otomatis saat artikel di copy paste:

Buat link otomatis saat artikel di copy paste
Menambah 3 widget di footer

Menambah 3 widget di footer

pada posting terdahulu saya telah mebuat sebuah posting yang berjudul Cara menambah gadget dibawah footer jadi 3 kolom, kali ini juga hampir sama yaitu
Menambah 2 widget di footer, Menambah 4 widget di footer, Menambah 4 widget di footer .
langsungkita mulai :
1. login ke blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. cari ]]> , masukkan kode berikut diatasnya:

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

4. Cari kode : <div id='footer-wrapper'> / <div class='footer-outer'>

5. Copy kode berikut, dan Paste di bawah kode <div id='footer-wrapper'> / <div class='footer-outer'>

Silahkan pilih anda mau Menambah 2 widget di footer, Menambah 4 widget di footer, Menambah 4 widget di footer.

- Untuk 2 kolom
<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>



- Untuk 3 kolom
<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>


- Untuk 4 kolom

<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left; margin:0; text-align:left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>


Setelah memilih satu kode dan tentunya telah di pastekan di tempatnya, lalu KLIK SIMPAN TEMPLATE, dan jika sudah save template, silahkan lihat haisl Cara menambah gadget dibawah footer jadi 3 kolom

Cara menghilangkan attribut blog

Cara menghilangkan attribut blog. Biasanya setelah kita baru membuat blog, pada footer / halaman paling bawah blog terdapat powered by blogger / Diberdayakan oleh Blogger. Ada beberapa para blogger, yang tidak ingin kata-kata "powered by blogger / Diberdayakan oleh Blogger" tidak tampil pada halaman blog, entah apa apalasannya, tapi yang jelas kata : powered by blogger / Diberdayakan oleh Blogger tersebut bisa disembunyikan. Lalu bagaimana Cara menghilangkan attribut blog tersebut. Mari kita ikuti Cara menghilangkan attribut blog
1. Tak bosan-bosannya, kita harus login dulu ke blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. Cari kode ]]></b:skin>
Copy dan pastekan kode berikut di bawah ]]></b:skin>

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

LALU SIMPAN TEMPLATE, silahkan lihat hasil dari Cara menghilangkan attribut blog.

Cara menghilangkan attribut blog

Menyembunyikan Footer Post dalam readmore

Menyembunyikan Footer Post dalam readmore, Pada umunya setelah kita mempunyai blog, kita ingin blog kita tampil dengan readmore, agar tampilan blog terlihat semakin simple dan tidak terlihat panjang ke bawah. namun pada beberapa template standar, setelah kita membuat readmore terkadang footer post masih terlihat saat kita klik HOMe. Nah bagaimana caranya agar foother tersembunyi dalam readmore?
berikut ini cara Menyembunyikan Footer Post dalam readmore
1. Login ke blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. Cari kode ]]></b:skin>
Copy dan pastekan kode berikut di bawah ]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType == "index"'>
.post-footer {display:none;}
</b:if>
</style>

SIMPAN TEMPATE, dan silahkan lihat hasilnya
Agar cepat tidur

Agar cepat tidur

Ini Dia Metode 10 Menit Agar Cepat Tidur Pulas

Jakarta, Beberapa orang seringkali perlu waktu berjam-jam agar dapat tidur nyenyak. Pada penderita insomnia, bisa jadi waktunya lebih lama lagi. Untungnya sebuah penelitian menemukan ada suatu metode sederhana untuk mengurangi ketegangan dan membuat orang cepat tidur pulas.

Metode yang dilakukan selama 10 menit ini dirancang dilakukan sebelum tidur. Praktiknya dengan berfokus pada tempat yang tenang dan menyenangkan seperti pantai atau danau yang dikelilingi pohon-pohon tinggi. Setelah itu, tarik napas dalam perlahan-lahan.

"Teknik ini didasarkan pada penelitian sebelumnya yang menunjukkan bahwa stres negatif dapat mempengaruhi tidur. Kita tahu ada banyak faktor risiko penyakit jantung seperti merokok, diabetes dan kolesterol tinggi. Tetapi baru sedikit yang mengerti tentang stres," kata Dr Arn Eliasson, konsultan di Walter Reed National Military Medical Center seperti dilansir Health Day, Senin (12/11/2012).

Penelitian ini akan disajikan dalam pertemuan American College of Chest Physicians dan menunjukkan bahwa teknik ini mengurangi waktu yang dibutuhkan Iuntuk dapat tertidur, meningkatkan kualitas tidur dan mengurangi kelelahan.

Untuk merumuskan metode ini, peneliti melibatkan 135 orang pria dan 199 orang wanita dengan usia rata-rata 56 tahun. Sebagian kecil peserta mengidap post-traumatic stress disorder (PTSD), yaitu gangguan kecemasan parah yang muncul setelah menyaksikan peristiwa traumatis.

Para peserta diminta mengisi kuesioner yang terdiri atas 14 pertanyaan untuk mengukur tingkat stres. Peserta juga diminta mengisi survei tentang kualitas tidur dan ditanya berapa lama waktu tidurnya, gangguan tidur yang dialami, penggunaan obat tidur serta seberapa sering merasa kelelahan di siang hari.

Peserta kemudian diminta menghadiri program bernama 'Tension Tamer' atau penjinak ketegangan lewat workshop selama 30 menit, kemudian diikuti 4 kali kunjungan selama 30 menit dengan seorang spesialis manajemen stres untuk berlatih teknik pereda stres. Setelah menyelesaikan program ini, para peserta diminta mengikuti survei lagi.

Hasil penelitian menunjukkan bahwa sebanyak 65 persen peserta mengaku stresnya berkurang sebesar 6,6 poin. Namun di sisi lain, sebanyak 34 persen peserta mengaku stresnya malah makin memburuk sebesar 4,6 poin. Pada peserta yang berkurang stresnya, ada perbaikan kualitas tidur, makin sedikit waktu yang diperlukan untuk tertidur dan berkurangnya rasa kelelahan.

"Ini bukan teknik baru. Terapi pengurangan stres selalu berperan untuk membantu orang tertidur. Mengurangi stres dengan cara apapun jelas akan membantu, namun yang paling penting adalah mempelajari mengapa orang tersebut mengalami kesulitan tidur," kata Dr Aparajitha Verma, direktur medis Methodist Hospital Comprehensive Sleep Disorders Program.

Verma menjelaskan bahwa teknik ini memang dapat membantu cepat tidur pulas, tetapi tidak akan menjamin dapat memperoleh kualitas tidur yang baik. Ia menyarankan untuk bersantai sebelum tidur, menyelesaikan masalah yang mengganggu dan mematikan segala sesuatu yang dapat merangsang kesadaran atau membuat terjaga.
sumber

Cara buat Penulis, Tanggal, Label Dan Komentar dibawah judul posting

Cara buat Penulis, Tanggal, Label Dan Komentar dibawah judul posting. Pada beberapa template standar masih banyak yang meletakkan Author/Penulis, Tanggal, Label Dan Komentar dibawah posting / footer post. bagaimana jika ingin memindahkan author / Penulis, Tanggal, Label Dan Komentar dibawah judul posting? Nah berikut ini saya coba posting tentang Cara buat Penulis, Tanggal, Label Dan Komentar dibawah judul posting.
Mari kita mulai Cara buat Penulis, Tanggal, Label Dan Komentar dibawah judul posting
1. Login ke blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. Cari kode <div class='post-header-line-1'>
4. Letakkan kode berikut diatas <div class='post-header-line-1'>


<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrGTqTrcpke5zpPZUf8H53zUtcppDHrfMGGqq77lg6cMNAXaS0Yvo4cdbulNnJ_e33iLfWYHrEWZgy4-8_297MOH9FGNlBsLidiNM6HKqwlkLX4c2q5R5cz3B7cvpDH-ezlr32blr-aA/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsSoqyDx9ek1SqJsdEAp9nel-r22uT6xKu4FGXw0eP63VN8SXq9ggAEegqsrxsIpJ2icDw6MJ8etTm1-ilHfsHr2vakFpmqHBbKsiy5mbVy2Mzs8YdOlDie0kyxU9g5Pnh9i5EICFz7A/s1600/clock-icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWh5HW40OcNh8PlHyaSzyDr1pUK6rB33jNup_OE5JLL5xvdM5Ec8sfY4aDG5qlq_WRsvJCJrdjbF0JB-JaCskzbhvLcUtIP8MLErCnrkOqQa8mbCA8bPvwra9xaA34Cq-eMeh6gUXFtA/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNAhS483fPG-z_h-QhigGAcPh4kd7RompGQLz_sUE6XL8w5pCU4_n7PG5_wEAEhulJdWX39xgmdiHCqejyOcSmZmco8-35lts-1cuPz7cMt_BYVvLykUDTNK2r_pBc9Rasx4cYhyphenhyphenYW-g/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
</b:if>
</b:if>
</span>

simpan template. dan silahkan lihat hasilnya
Cara pasang widget dengan Scroll

Cara pasang widget dengan Scroll

Cara pasang widget dengan Scroll, terkadang kita ingin meletakkan banner yang kecil-kecil seperti counter, backlink, banner autoping atau apa saja yang terlalu banyak, sehingga kita butuh tempat yang cukup luas, sedangkan widget seperti ppc, popular post atau recent post dan lain-lainnya kita juga ungin meletakkannya pada widget, lalu untuk menghemat tempat kita butuhkan widget dengan Scroll, dan posting berikut ini adalah tentang Cara pasang widget dengan Scroll
mari kita mulai Cara pasang widget dengan Scroll
1. Login ke blogspot / blogger.com
2. Tata Letak > Tambahkan Gadget > HTML/JavaScript
3. Masukkan kode berikut:

<div style="border: 0px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 250px; background-color: #FFFFFF;">

PASTE ISNYA DISINI
</div>

jadinya akan seperti ini:
Cara ganti Favicon blogspot

Cara ganti Favicon blogspot

Cara ganti Favicon blogspot, jika ingin mengganti favicon blogspot dengan gambar bergerak .*gif atau gambar jpg maka kita dapat menggantinya dengan cara:

1. login ke blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. cari ]]> <b:skin> , masukkan kode berikut diatasnya:

<link href='alamat gambar' rel='shortcut icon' type='image/vnd.microsoft.icon'/>


<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkpQ5_794idrVgWKJJRAuWRkfIhkHwlABHyrITwlRU9INz7eRZkAMBDrPHMvu6iq6SQPV1iA-wesAnEpa5qYnqmous-QRFE4_n1qyf6Ft_GUKwRydw0n5lXL1HYJEjSn94etIAj0VztE/s1600/globemuter.gif' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkpQ5_794idrVgWKJJRAuWRkfIhkHwlABHyrITwlRU9INz7eRZkAMBDrPHMvu6iq6SQPV1iA-wesAnEpa5qYnqmous-QRFE4_n1qyf6Ft_GUKwRydw0n5lXL1HYJEjSn94etIAj0VztE/s1600/globemuter.gif' rel='icon' type='image/gif'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkpQ5_794idrVgWKJJRAuWRkfIhkHwlABHyrITwlRU9INz7eRZkAMBDrPHMvu6iq6SQPV1iA-wesAnEpa5qYnqmous-QRFE4_n1qyf6Ft_GUKwRydw0n5lXL1HYJEjSn94etIAj0VztE/s1600/globemuter.gif' rel='shotcut icon'/>


ganti alamat gambar dengan url gambar yang akan digunakan menjadi Favicon blogspot
lalu SIMPAN
Cara menambah gadget dibawah footer jadi 3  kolom

Cara menambah gadget dibawah footer jadi 3 kolom

Cara menambah gadget dibawah footer jadi 3 kolom, pada beberapa tempate blogspot ada yang sudah tersedia gadget 3 kolom dibawah footer, tetapi ada pula beberapa template blogspot yang belum, bahkan ada beberapa template blogspot yang hanya menyediakan 1 kolom gadget pada footer. Nah bagaimana jika kita menginginkan gadget jadi 3 kolom. gadget 3 kolom pada footer sebenarnya bisa tambahkan. lalu Cara menambah gadget dibawah footer jadi 3 kolom adalah sebagai berikut:
ayo kita mulai Cara menambah gadget dibawah footer jadi 3 kolom.
1. login ke blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. cari ]]> , masukkan kode berikut diatasnya:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}


4. Lanjut denganmencari kode


ganti dengan kode :

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

silahkan lihat hasilnya.
Symantec definitions update free download 2013

Symantec definitions update free download 2013

Symantec definitions update free download 2013, berikut ini link download Symantec definitions update.
20130314-004-v5i32.exe
Support
Norton AntiVirus (later than 2012) for Windows XP/Vista/7/8
Norton Internet Security (later than 2012) for Windows XP/Vista/7/8
Norton AntiVirus 2012 for Windows XP/Vista/7
Norton Internet Security 2012 for Windows XP/Vista/7
Norton AntiVirus 2011 for Windows XP/Vista/7
Norton Internet Security 2011 for Windows XP/Vista/7
Norton AntiVirus 2010 for Windows XP/Vista/7
Norton Internet Security 2010 for Windows XP/Vista/7
Norton AntiVirus 2009 for Windows XP Home/XP Pro/Vista
Norton Internet Security 2009 for Windows XP Home/XP Pro/Vista
Norton AntiVirus 2008 for Windows XP Home/XP Pro/Vista
Norton Internet Security 2008 for Windows XP Home/XP Pro/Vista
Norton 360 (later than 6.0) for Windows XP/Vista/7/8
Norton 360 version 6.0 for Windows XP/Vista/7
Norton 360 version 5.0 for Windows XP/Vista/7
Norton 360 version 4.0 for Windows XP/Vista/7
Norton 360 version 3.0 for Windows XP/Vista
Norton 360 version 2.0 for Windows XP/Vista
Symantec Endpoint Protection 11.0
Symantec Endpoint Protection Small Business Edition 12.0
Symantec Endpoint Protection 12.1
Symantec Protection Engine 7.x for Windows


20130314-004-v5i64.exe
Support

Norton AntiVirus (later than 2012) for Windows XP/Vista/7/8 for 64-bit OS only
Norton Internet Security (later than 2012) for Windows XP/Vista/7/8 for 64-bit OS only
Norton AntiVirus 2012 for Windows XP/Vista/7 for 64-bit OS only
Norton Internet Security 2012 for Windows XP/Vista/7 for 64-bit OS only
Norton AntiVirus 2011 for Windows XP/Vista/7 for 64-bit OS only
Norton Internet Security 2011 for Windows XP/Vista/7 for 64-bit OS only
Norton AntiVirus 2010 for Windows XP/Vista/7 for 64-bit OS only
Norton Internet Security 2010 for Windows XP/Vista/7 for 64-bit OS only
Norton AntiVirus 2009 for Windows XP/Vista for 64-bit OS only
Norton Internet Security 2009 for Windows XP/Vista for 64-bit OS only
Norton AntiVirus 2008 for Windows XP/Vista for 64-bit OS only
Norton Internet Security 2008 for Windows XP/Vista for 64-bit OS only
Norton 360 (later than 6.0) for Windows XP/Vista/7/8 for 64-bit OS only
Norton 360 version 6.0 for Windows XP/Vista/7 for 64-bit OS only
Norton 360 version 5.0 for Windows XP/Vista/7 for 64-bit OS only
Norton 360 version 4.0 for Windows XP/Vista/7 for 64-bit OS only
Norton 360 version 3.0 for Windows XP/Vista for 64-bit OS only
Norton 360 version 2.0 for Windows XP/Vista for 64-bit OS only
Symantec Endpoint Protection 11.0 for 64-bit OS only
Symantec Endpoint Protection Small Business Edition 12.0 for 64-bit OS only
Symantec Endpoint Protection 12.1 for 64-bit OS only
Symantec Mail Security for Domino (64-bit) v 8.0.5
Symantec Protection Engine 7.x for Windows (64-bit)


vd3cdc04.jdb
Support

Symantec Endpoint Protection 11.0
Symantec Endpoint Protection Small Business Edition 12.0
Symantec Endpoint Protection 12.1


20130314-004-i32.exe
Support
Norton AntiVirus 2006 for Windows 2000/XP Home/XP Pro
Norton AntiVirus 2007 for Windows XP Home/XP Pro/Vista
Norton 360 version 1.0 for Windows XP/Vista
Norton SystemWorks (all versions)
Symantec Mail Security for Domino v 5.x
Symantec Mail Security for Domino v 7.x
Symantec Mail Security for Domino (32-bit) v 8.0.x
Symantec Mail Security for Microsoft Exchange (32-bit)
Symantec Scan Engine 5.x for Windows
Symantec AntiVirus for Caching/Messaging/NAS for Windows


20130314-004-v5i64.exe
Support

Norton AntiVirus 2007 for Windows Vista 64-bit OS only
Norton Internet Security 2007 for Windows Vista 64-bit OS only
Norton 360 version 1.0 for Windows XP/Vista 64-bit OS only



vd3cdc04.xdb
Support
Symantec AntiVirus 10.0 Corporate Edition Server
Symantec AntiVirus 10.1 Corporate Edition Server
Symantec AntiVirus 10.2 Corporate Edition Server

20130314-004-unix.sh
Support
Symantec AntiVirus/Filtering 3.2 for Domino (AIX, Solaris, Linux)
Symantec AntiVirus for Linux (32-bit and 64-bit)
Symantec Mail Security for SMTP v 5.x for Linux/Solaris
Symantec Scan Engine 5.x for Linux/Solaris
Symantec AntiVirus for Caching/Messaging/NAS for Linux/Solaris
Symantec Mail Security for Domino (32-bit) v 8.0.x for AIX
Symantec Protection Engine 7.x for Linux/Solaris
Untuk periode berikutnya silahkan klik disini

Cara menyisipkan gambar berputar dengan background

Cara menyisipkan gambar berputar dengan background, bagaiaman caranya ya...?
Cara menyisipkan gambar berputar dengan background pada blog sebenarnya sangat mudah. kita hanya cukup menyisipkan beberapa kode, dan diantara beberapa kode tersebut kita tinggal masukkan url gambar dalam kode yang ada.
langsung saya kita coba: Cara menyisipkan gambar berputar dengan background
- Jika gambar akan disisipkan pada widget maka caranya adalah :
1. Login ke blogspot / blogger.com
2. Tata Letak > Tambahkan Gadget > HTML/JavaScript
3. Masukkan kode berikut:
/* ---------------------- nduwur ikhsanudin blog ---------------------- */
<style>
@-webkit-keyframes imgrotazione {
from { -webkit-transform: rotateY(0deg); }
to { -webkit-transform: rotateY(-360deg); }
}
@-moz-keyframes imgrotazione {
from { -moz-transform: rotateY(0deg); }
to { -moz-transform: rotateY(-360deg); }
}
#imgrotazione {
-webkit-animation-name: imgrotazione;
-moz-animation-name: imgrotazione;
animation-name: imgrotazione;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
-moz-animation-duration: 20s;
animation-duration: 20s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
</style>
<a href="URL_DEL_LINK"/><div style="background:url(https://lh6.googleusercontent.com/-ZSQasjChWg8/UUE9zgrXX7E/AAAAAAAAD4c/5OkPzSdaHCQ/w385-h274-p/SamplePost);width: 100%;border-left:1px solid #000000;border-right:1px solid #000000;">
<hr style="width: 100%; height: 5px; color: #FFC63C; background: #000000;-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);" />
<center><span style="color:#F7F679;font-size:23px;font-family:century gothic;text-shadow: 1px 1px 1px #000, -1px -1px 0px #000;"><b>Awali semua dengan..<br/>Bismillah</b></span>
<br/>
<img id="imgrotazione" style="-moz-border-radius: 150px; -webkit-border-radius: 150px; border-radius: 150px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiZxLwDoJNJ8EtPxmTsdl0XC1mInQQMyN3TBkWXneywfWe31V-OEzqJEYL2_ZodlISXQ6XSLEtx-VVBV0zL6QIqlxKULq6dm7ExcLpZK9Vj_DbhKyxzVfApWMyAWy3TxE25J4cmjZ6w/s912/bismillahirrahmanirrahim.png" height="100" width="250" /></center></div></a>
/* ----------------------Ngisor ikhsanudin blog---------------------- */
(ganti background : https://lh6.googleusercontent.com/-ZSQasjChWg8/UUE9zgrXX7E/AAAAAAAAD4c/5OkPzSdaHCQ/w385-h274-p/SamplePost dengan alamat gambar anda)
(ganti gambar yang berputar : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixiZxLwDoJNJ8EtPxmTsdl0XC1mInQQMyN3TBkWXneywfWe31V-OEzqJEYL2_ZodlISXQ6XSLEtx-VVBV0zL6QIqlxKULq6dm7ExcLpZK9Vj_DbhKyxzVfApWMyAWy3TxE25J4cmjZ6w/s912/bismillahirrahmanirrahim.png dengan url gambar anda
ganti teks : Awali semua dengan.. dengan teks yang anda inginkan
ganti : Bismillah dengan teks yang anda inginkan

- Jika inging menyisipkan pada posting, tentunya kode tersebut di copy dan paste dalam posting
dan inilah contohnya :



Membuat Kotak Pencarian dengan CSS

Seperti telah di jelaskan pada posting sebelumnya tentang Cara buat Widget Search Box, maka kali ini saya mengulang kembali posting yang hampir sama dengan yang lalu. bedanya apa ya lihat saja nanti.


<style>
#namanyay-search-btn {
background:#0099ff;
color:white;
font: 'trebuchet ms', trebuchet;
padding:10px 20px;
border-radius:0 10px 10px 0;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border:0 none;
font-weight:bold;
}

#namanyay-search-box {
background: #eee;
padding:10px;
border-radius:10px 0 0 10px;
-moz-border-radius:10px 0 0 10px;
-webkit-border-radius:10px 0 0 10px;
-o-border-radius:10px 0 0 10px;
border:0 none;
width:160px;
}

</style>


<form id="searchthis" action="/search" style="display:inline;" method="get">
<!-- Search box for blogger by Namanyay Goel //-->
<input id="namanyay-search-box" name="q" size="40" type="text" placeholder=" Type! :D "/>
<input id="namanyay-search-btn" value="Search" type="submit"/>
</form>

sumber

Cara buat Widget Search Box

Cara buat Widget Search Box, Widget Search Box pada sebuah blog sangat penting gunanya, karena Widget Search Box berfungi untuk memudahkan para pengunjung dalam mencari artikel yang ada pada blog, sebelum mereka meninggalkan blog yang sedang di kunjungi.
dan tanpa memperpanjang penjelasan tentang Widget Search Box, sebaiknya kita langsung saja menuju ke Widget Search Box.
Mari kita mulai Cara buat Widget Search Box

1. Login ke blogspot / blogger.com
2. Tata Letak > Tambahkan Gadget > HTML/JavaScript
3. Masukkan kode berikut:

<form id="search" method="get" action="http://ikhsanu.blogspot.com/search?q">

<input type="text" size="20" name="q" value=""/><input type="submit" value="search"/></form>

Ganti http://ikhsanu.blogspot.com dengan alamat blog sampeyan.
Klik SIMPAN

cara memasukkan kode dalam posting lagi

cara memasukkan kode dalam posting lagi, sebenarnya pada poting yang telah lalu saya telah membuat posting tentang cara memasukkan kode dalam posting. dengan judul posting cara posting kode html. namu kali ini saya mencoba lagi membuat posting yang sama tetapi kali ini caranya saja yang lain.

Copy code yang akan dimasukkan dalam posting, lalu pastekan pada kolom di bawah ini. Setalah kode dipaste pada kolom yang diatas, maka secara otomatis kode yang sudah di parse akan muncul pada kolom di bawahnya.


 

Parsed Code
hasil Siap digunakan (ready to be used)


atau cara lain bisa gunakan jasa di bawah ini: Pertama silahkan buka Simplecode Kedua Pastekan kode pada kolom Enter Markup Ketiga Copy kode yang dihasilkan, lalu pastekan pada posting
cara memasukkan kode ke dalam posting lagi
cara memasukkan kode dalam posting
atau bisa juga menggunakan cara ini : http://www.ikhsanudin.com/2013/03/cara-posting-kode-html.html

robot blogspot

robot blogspot pengaturannya terdapat pada halaman Setelan › Preferensi penelusuran pada setting robot blogspot kita dapat menggunakan robots.txt khusus, maksudnya kita dapat meng custom-nya sendiri.
berikut sedikit cara setting robots.txt khusus.
1. Login ke blogger
2. Setelan › Preferensi penelusuran

3. di ujung robots.txt khusus ada tulis Edit, jadi silahkan klik Edit
4. Aktifkan konten robots.txt khusus? klik Yes
pada kolom dibawah Aktifkan konten robots.txt khusus? silahkan di isi dengan
User-agent: *
Disallow: /search
Allow: /

Sitemap: http://ikhsanu.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
Sitemap: http://ikhsanu.blogspot.com/atom.xml?redirect=false&start-index=501&max-results=500
Sitemap: http://ikhsanu.blogspot.com/atom.xml?redirect=false&start-index=1001&max-results=500
Sitemap: http://ikhsanu.blogspot.com/atom.xml?redirect=false&start-index=1501&max-results=500


Ganti http://ikhsanu.blogspot.com dengan alamat url blog sampeyan.


untuk melihat hasilnya, masukkan url blog sampeyan pada browser yang sampeyan gunakan, kemudian tambahkan /robot.txt
contohnya seperti ini:
http://ikhsanu.blogspot.com/robots.txt
maka hasilnya (robot blogspot) akan seperti ini

Cara buat menu share melayang pada blogger

berikut ini Cara buat menu share melayang pada blogger, share yang dimaksud disini adalah share facebook, twitter, google plus, email, dan pinterest.
sudah lihat gambarnya? skarang lasngung ke cara buatnya:
1. Login ke blogspot / blogger.com
2. Template > Edit HTML > Tick the expand widget templates
3. cari kode <b:includable id="post" var="post">
</b:includable>
4. Copy dan pastekan kode berikut dibawahnya:
<!--Floating Sharing Widget by eBlogger Tips-->

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.esg_social_floating{
position:fixed; bottom:10%; margin-left:-75px; float:left;
width:60px;
background-color:#f7f7f7;
padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.esg_social_floating .esg_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.esg_social_floating .st_twitter_vcount, .esg_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.esg_social_floating .st_fblike_vcount{
margin-left:5px;
}
.esg_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.esg_social_floating .chicklets, .esg_social_floating .stMainServices {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcEEVK-7d1v00cdY97UiFtwFzTIHxgPO3t1957QeRGIJiaM-QzPWsjBYfVEw6SY0_9MfGJkCMpOYdHkHgYYXRYpQTVSGk9JPJ3NH-1Vvheg7ZoHGvQThkGM1ETo6wHuP9yPtfAhCVN07c/s400/gc_social_sprite.gif') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcEEVK-7d1v00cdY97UiFtwFzTIHxgPO3t1957QeRGIJiaM-QzPWsjBYfVEw6SY0_9MfGJkCMpOYdHkHgYYXRYpQTVSGk9JPJ3NH-1Vvheg7ZoHGvQThkGM1ETo6wHuP9yPtfAhCVN07c/s400/gc_social_sprite.gif') !important;
}
.esg_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.esg_social_floating .stButton_gradient{
border:none !important;
}
.esg_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.esg_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}

.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}

.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.esg_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}
</style>

<div class='esg_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='ebloggertipz'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "eBlogger Tips",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.ebloggertips.com/2012/11/floating-share-bar-for-blogger.html' style='color:#CAC8C8;'>Get This</a></p>
</div>
</b:if></b:if>

<!--Floating Sharing Widget by eBlogger Tips-->

lalu klik SAVE TEMPLATE. sbr

Membuat halaman blogspot

Pada dasarnya sebuah blog di blogspot belum ada terdapat menu halaman, tetapi tidak jarang kita melihat beberapa blog yang terdapat menu halaman yang terletak di bawah blog, sekarang mari kita lihat contoh halaman yang akan kita buat.


kira-kira seperti itulah halaman yang akan kita buat. Ayo sekarang kita mulai Membuat halaman blogspot.
1. Kita login dulu ke blogspot / blogger.com
2. Template > Edit HTML > Centang expand template widget
3. Cari kode ]]></b:skin>, dan letakkan kode berikut diatasnya

/* Page Navigation
-----------------------------------------------*/
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
color:#a9a9a9;
font-weight: bold;
border:1px solid #ccc;
border-radius:2px;
background:#cfcfcf;
}
.showpageOf {
margin:0 8px 0 0;
color:#999;
}
.showpageNum a:hover {
border:1px solid #ccc;
border-radius:2px;
color:#045090;
font-weight: bold;
text-decoration: none;
background:#cfcfcf;
}
.showpagePoint {
color:#000000;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border:1px solid #ccc;
background:#cfcfcf;
border-radius:2px;
text-decoration: none;
}

4. Cari lagi </body>, lalu copy dan pastekan kode berikut diatasnya


<!--kode awal halaman blogspot ikhsanu.blogspot.com-->
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=6;
var numshowpage=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>

<script type='text/javascript'>

//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('5 G;5 i;5 b;5 n;1f();x 1g(15){5 6=\'\';H=I(K/2);3(H==K-H){K=H*2+1}J=b-H;3(J<1)J=1;o=I(15/j)+1;3(o-1==15/j)o=o-1;L=J+K-1;3(L>o)L=o;6+="<4 e=\'1y\'>1z "+b+\' 1A \'+o+"</4>";5 16=I(b)-1;3(b>1){3(b==2){3(i=="w"){6+=\'<4 e="1B"><a f="\'+y+\'">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">\'+M+\'</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+16+\');A B">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+16+\');A B">\'+M+\'</a></4>\'}}}1h(5 g=J;g<=L;g++){3(b==g){6+=\'<4 e="1C">\'+g+\'</4>\'}c 3(g==1){3(i=="w"){6+=\'<4 e="k"><a f="\'+y+\'">1</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">1</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+g+\');A B">\'+g+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+g+\');A B">\'+g+\'</a></4>\'}}}5 17=I(b)+1;3(b<o){3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+17+\');A B">\'+1i+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+17+\');A B">\'+1i+\'</a></4>\'}}5 C=u.1D("C");5 18=u.1E("1F-1G");1h(5 p=0;p<C.P;p++){C[p].1j=6}3(C&&C.P>0){6=\'\'}3(18){18.1j=6}}x 1a(Q){5 R=Q.R;5 1k=I(R.1H$1I.$t,10);1g(1k)}x 1f(){5 d=m;3(d.9("/r/s/")!=-1){3(d.9("?S-7")!=-1){n=d.D(d.9("/r/s/")+14,d.9("?S-7"))}c{n=d.D(d.9("/r/s/")+14,d.9("?&7"))}}3(d.9("?q=")==-1&&d.9(".6")==-1){3(d.9("/r/s/")==-1){i="w";3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l("<h T=\\""+y+"U/V/W?7-l=1&X=Y-Z-h&11=1a\\"><\\/h>")}c{i="s";3(d.9("&7-l=")==-1){j=1J}3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l(\'<h T="\'+y+\'U/V/W/-/\'+n+\'?X=Y-Z-h&11=1a&7-l=1" ><\\/h>\')}}}x N(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x O(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W/-/"+n+"?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x 1b(Q){1c=Q.R.1K[0];5 1w=1c.1x.$t.D(0,19)+1c.1x.$t.D(1L,1M);5 1d=1N(1w);3(i=="w"){5 1e="/r?S-7="+1d+"&7-l="+j+"#E="+G}c{5 1e="/r/s/"+n+"?S-7="+1d+"&7-l="+j+"#E="+G}1O.f=1e}',62,113,'|||if|span|var|html|max||indexOf||nomerhal|else|thisUrl|class|href|jj|script|jenis|postperpage|showpageNum|results|urlactivepage|lblname1|maksimal|||search|label||document|newInclude|page|function|home_page|onclick|return|false|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|mulai|numshowpage|akhir|upPageWord|redirectpage|redirectlabel|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))

//]]>

</script>
<!--kode akhir halaman blogspot ikhsanu.blogspot.com -->

SIMPAN TEMPLATE, Semoga berhasil
Cara buat teks area

Cara buat teks area

Berikut ini adalah cara buat teks area, baik itu teks area yang akan dimasukkan dalam posting maupun teks area yang akan dimasukkan pada widget. Ada juga yang menggunakan teks area untuk meletakkan kode banner agar mudah untuk di select & copy.
Langsung saja ke cara buat teks area, Untuk membuat text area masukkan kode pembuka <TEXTAREA> dan kode penutup </TEXTAREA> masukkan teks diantara <TEXTAREA> dan </TEXTAREA>, jadinya seperti dibawah ini.

<TEXTAREA>
MASUKKAN KODENYA DISINI
</TEXTAREA>

contoh teks area

Cara memasukkan kode html ke postingan

Cara memasukkan kode html ke postingan. Pada blog-blog yang memuat tentang tutorial, tips dan trik tentang blogspot, wordpress, atau apa saja yang memberikan panduan tentang kode html tentunya selalu memasukkan kode html pada posting tersebut. Tanpa kata pengantar dan tanpa pendahuluan yang panjang lebar, berikut ini adalah tentang : Cara memasukkan kode html ke postingan / cara menulis kode html di postingan.
Untuk memasukkan kode html pada posting sebenarnya sangat mudah, caranya adalah dengan memparse kode html yang akan dimasukkan dalam posting, misalnya <data:post.body/> jika langsung kita masukkan kode tersebut pada posting, maka <data:post.body/> tidak akan terbaca/terlihat. jadi agar bisa terbaca/terlihat maka kita harus memparsenya terlebih dahulu.
Cara memasukkan kode html ke postingan
Untuk memparse kode html tersebut bisa gunakan tool dibawah ini. Caranya masukkan kode yang akan di parse lalu klik Convert, setelah klik convert, kode yang telah dimasukkan telah berubah, lalu copy kode html tersebut dan pastekan pada ke dalam posting

Enter Code:
  Parsed Code

Cara bikin artikel terkait di blog

Cara bikin artikel terkait di blog

Cara bikin artikel terkait di blog. artikel terkait / related posts adalah sebuah menu / alat untuk memudahkan pengunjung dalam mencari artikel yang mirip atau berhubungan dengan artikel yang sedang dibaca, atau bahkan mungkin sama dengan artikel yang sedang dibaca tetapi beda versi. Misalnya Cara bikin artikel terkait di blog versi 1 kemudian artikel yang terkait adalah Cara bikin artikel terkait di blog versi 2, cara cepat bikin Cara cepat bikin artikel terkait di blog atau yang lainnya. Bisa juga penampakan artikel terkait / related posts adalah artikel-artikel dalam 1 label.
mari kita mulai Cara bikin artikel terkait di blog.
1. seperti biasa, kita harus login ke blogspot /blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. Cari kode </head>
4. Masukkan kode dibawah ini tepat diatas kode </head>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;}
function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; }
else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>

5. Lanjut, cari kode <data:post.body/>, dan copy lalu paste kode berikut dibawah kode <data:post.body/>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15"' type='text/javascript'/> </b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait <b:loop values='data:post.labels' var='label'><data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></h4>
<script type="text/javascript"> removeRelatedDuplicates(); printRelatedLabels();
</script>
</b:if>

6. Simpan hasil kerja kita dengan klik, SIMPAN TEMPLATE, silahkan lihat hasil kerja Cara bikin artikel terkait di blog. mudahan Cara bikin artikel terkait di blog telah berhasil

cara bikin read more pada blogspot tanpa file.js

Cara bikin read more pada blog

1. Login ke blogspot / blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. Cari </b:template-skin>, copy dan pastekan kode berikut dibawahnya :
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
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>


4. kita lanjutkan dengan mencari kode <data:post.body/>, ganti kode tersebut dengan kode di bawah ini:


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b>Baca Lanjutan : <i><data:post.title/></i></b>&#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Simpan dan silahkan lihat hasilnya.

cara bikin breadcrumbs di blogspot

cara bikin breadcrumbs di blogspot, berikut cara singkat tentang cara bikin breadcrumbs di blogspot.

1. Login ke blogspot / blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. Cari ]]></b:skin>, copy dan paste kode berikut diatas ]]></b:skin>

/* Breadcrumbs
----------------------------------------------- */
.breadcrumbs { background:#fff; text-align: left; padding:3px 0; margin:0 0 2px 0; font-size:13px; line-height: 1.4em; border-top:3px double #ccc; border-bottom:3px double #ccc;
}


4. Lanjutkan dengan mencari kode <b:includable id='main' var='top'> dan copy dan paste kode berikut diatasnya

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>



5. cari lagi kode <b:include data='top' name='status-message'/>, copy dan paste kode berikut diatasnya:
<b:include data='posts' name='breadcrumb'/>

6. Simpan template, silahkan lihat hasil bikin breadcrumbs di blogspot yang telah kita kerjakan


bikin permanent link blogspot

bikin permanent link blogspot

bikin permanent link blogspot, berikut cara singkat bikin permanent link blogspot.

dan langsung saja kita mulai cara bikin permanent link blogspot:
1. tentunya login ke blogger.com
2. Template > Edit html dan centang Expant Templat Widget
3. cari ]]></b:skin> , masukkan kode berikut diatasnya


/* Permanent Link
----------------------------------------------- */
.permalinkblogspot {border: 1px solid #A9AAAB; font-family: verdana; padding: 5px; background: #FFFFFF;-moz-border-radius:5px;} .permalinkblogspot a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

4. laju kita cari <data:post.body/>, / <p><data:post.body/></p> dan masukkan kode berikut dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='permalinkblogspot'>
<div style='text-align: justify;'>
<i><small>Terima kasih atas waktunya untuk membaca <strong><u><data:blog.pageName/></u></strong> ini, dengan harapan semoga artikel <strong> <data:blog.pageName/></strong> ini bermanfaat adanya. Dan mohon maaf jika pada artikel<u> <a expr:href='data:post.url'><data:blog.pageName/></a></u> terdapat kesalahan atau kurang memuaskan. Jangan lupa untuk berkunjung kembali ke <data:blog.title/> pada lain kesempatan</small></i></div>
</div>
</b:if>




5. Simpan template, jika sudah di simpan berarti cara bikin permanent link blogspot sudah selesai, lalu silahkan lihat hasilnya, apakah cara bikin permanent link blogspot yang telah dikerjakan sudah berhasil.
Back To Top