Cara menambahkan gadget (tambah gadget) di Header

Pada template default terkadang tidak ada fasilitas tambah elemen (tambah gadget) dibawah atau diatas header, sehingga kita akan kesulitan untuk memasang aksesoris berupa gambar, iklan, Menu bar atau lainnya yang kira-kira sangat bagus untuk ditempatkan di bawah header.
untuk memunculkannya sebagai berikut :
1. Login ke dashboard => Tata Letak => Edit HTML "centang pada "Expand widget template"
2. Cari kode berikut :


<div id='header-wrapper'>
< b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


3. Ganti tulisan angka '1' menjadi 2 atau lebih, dan tulisan 'no' dirubah menjadi 'yes'
4. Simpan template

Lihat perbedaannnya :

sebelum

sesudah

Cara Membuat Related Post di Bawah Posting

Berhubung saya lagi capek + tidakl terlalu semangat untuk menulis atau mencari sesuatu, maka dari itu saya memposting saja cara membuat related post, gimana ya sob emang saya orangnya gitu hehe agak pemalas tapi ya kalau mau rajin pasti ranking 1 terus, mungkin hehe. karena agak malas langsung saja sob... Check This Out....

Pertama-tama seperti biasanya login ke blogger lalu Edit Html
Yang kedua cari kode dibawah ini

<p><data:post.body/></p>

Trus taruh kode dibawah ini dibawah kode <p><data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<DIV class='rbbox'>
<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<DIV id='albri'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>

Jika sudah cari kode dibawah ini

]]></b:skin>

Setelah ketemu, letakkan kode di bawah ini diatas kode ]]></b:skin>

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}

Lalu letakkan kode dibawah ini dibawah ]]></b:skin>

<SCRIPT src='http://strip-ads.googlecode.com/files/relatedpost-versi2.js' type='text/javascript'/>

Selesai

Semoga berhasil dan bermanfaat...:D

Cara Membuat Hidden ShoutBox

Terima kasih sobat, Karena soabat request ingin widget shoutbox seperti punya saya, maka kali ini saya akan menerangkan cara membuat hidden shoutmix atau shoutbox versi 1, kenapa versi 1?? karena masih ada shoutmix yang lebih canggih, kalu tidak salah nama lainnya hidden shoutghost sebab jika di klik maka akan muncul perlahan-lahan, namun kali ini saya akan menerangkan mengenai hidden shoutmix versi 1, langsung saja.

1. Login ke Blogger seperti biasanya
2. Klik Ta.ta Letak dan Pilih Tambah Gadget
3. Pilih html/javascript dan Copy Paste kode di bawah ini

<style type="text/css"> #hitsukeFX{ position:fixed; top:50px; z-index:+1000; } * html #hitsukeFX{position:relative;} .hitsukeFXtab{ height:550px; width:35px; float:left; cursor:pointer; background:url('http://i642.photobucket.com/albums/uu147/remoxp/Chatbox.png') no-repeat; } .hitsukeFXcontent{ float:left; border:2px solid #ffffff;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:5px;-moz-border-radius-topleft:10px;-moz-border-radius-topright:5px; -webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:5px;background:#000000; padding:10px; } </style> <script type="text/javascript"> function showHidehitsukeFX(){ var hitsukeFX = document.getElementById("hitsukeFX"); var w = hitsukeFX.offsetWidth; hitsukeFX.opened ? movehitsukeFX(0, 40-w) : movehitsukeFX(40-w, 0); hitsukeFX.opened = !hitsukeFX.opened; } function movehitsukeFX(x0, xf){ var hitsukeFX = document.getElementById("hitsukeFX"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hitsukeFX.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("movehitsukeFX("+x+", "+xf+")", 10);} } </script> <div id="hitsukeFX"> <div class="hitsukeFXtab" onclick="showHidehitsukeFX()"> </div> <div class="hitsukeFXcontent">

-----TARUH KODE SHOUTMIX ATAU SHOUTBOX SOBAT DISINI-----

<div style="text-align:right"> <a href="javascript:showHidehitsukeFX()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var hitsukeFX = document.getElementById("hitsukeFX"); hitsukeFX.style.right = (40-hitsukeFX.offsetWidth).toString() + "px"; </script>

CATATAN :

• Untuk mengganti posisi shoutbox menjadi di sebelah kiri ganti left menjadi right
• Untuk kode yang berwarna merah berfungsi sebagai warna border
• Untuk kode yang berwarna hijau berfungsi sebagai background shoutbox
• Untuk kode yang berwarna kuning berfungsi untuk mengatur ketinggian widget
• Sedangkan yang berwarna biru berfungsi sebagai url gambar sobat bisa menggantinya sesuai keinginan

4. Simpan dan Selesai

Berhubung saya lagi capek + tidakl terlalu semangat untuk menulis atau mencari sesuatu, maka dari itu saya memposting saja cara membuat related post, gimana ya sob emang saya orangnya gitu hehe agak pemalas tapi ya kalau mau rajin pasti ranking 1 terus, mungkin hehe. karena agak malas langsung saja sob... Check This Out....

Pertama-tama seperti biasanya login ke blogger lalu Edit Html
Yang kedua cari kode dibawah ini

<p><data:post.body/></p>

Trus taruh kode dibawah ini dibawah kode <p><data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<DIV class='rbbox'>
<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<DIV id='albri'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>

Jika sudah cari kode dibawah ini

]]></b:skin>

Setelah ketemu, letakkan kode di bawah ini diatas kode ]]></b:skin>

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}

Lalu letakkan kode dibawah ini dibawah ]]></b:skin>

<SCRIPT src='http://strip-ads.googlecode.com/files/relatedpost-versi2.js' type='text/javascript'/>

Selesai

Semoga berhasil dan bermanfaat...:D

Cara membuat Kotak Banner Iklan

Mungkin sobat-sobat banyak yang bertanya-tanya bagaimana cara membuat kotak iklan seperti yang ada pada blog top markotop hehe, namun bagi yang belum tahu caranya disini saya punya solusinya sob. Ok langsung saja...To the TKP


1. Login ke Blogger
2. Kemudian Edit Html
3. Setelah itu masukan kode CSS dibawah ini dibawah kode <b:skin><![CDATA[

#Box-Banner-ads {

margin: 0px;

padding: 5px;

text-align: center;

}

#Box-Banner-ads img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Box-Banner-ads img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

4.Simpan Template

5.Eit blum selesai, Jika sudah, Buat Page Element baru dan kemudian taruh atau masukkan kode dibawah ini.

<div id="Box-Banner-ads">
<a target="_blank" href="http://portablectech.blogspot.com/"><img
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ20igS7pcjj3otUU8ZTm_Sc9ZNZ8y8_mJZwXIOCruKZb65NQzBzRFvKU42Dyr2L4VeHNLjAlPPbNV8dfp7UlvyXpQumCZb__oOghL1XdcuaKpDUFk_tEf4cQhyzdVDjiHgWiqnPaekR0/s200/Iklan.gif"/></a>
<a target="_blank" href="http://portablectech.blogspot.com/"><img
border="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ20igS7pcjj3otUU8ZTm_Sc9ZNZ8y8_mJZwXIOCruKZb65NQzBzRFvKU42Dyr2L4VeHNLjAlPPbNV8dfp7UlvyXpQumCZb__oOghL1XdcuaKpDUFk_tEf4cQhyzdVDjiHgWiqnPaekR0/s200/Iklan.gif"/></a><a target="_blank" href="http://portablectech.blogspot.com/"><imgborder="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ20igS7pcjj3otUU8ZTm_Sc9ZNZ8y8_mJZwXIOCruKZb65NQzBzRFvKU42Dyr2L4VeHNLjAlPPbNV8dfp7UlvyXpQumCZb__oOghL1XdcuaKpDUFk_tEf4cQhyzdVDjiHgWiqnPaekR0/s200/Iklan.gif"/></a><a target="_blank" href="http://portablectech.blogspot.com/"><imgborder="0" alt="ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ20igS7pcjj3otUU8ZTm_Sc9ZNZ8y8_mJZwXIOCruKZb65NQzBzRFvKU42Dyr2L4VeHNLjAlPPbNV8dfp7UlvyXpQumCZb__oOghL1XdcuaKpDUFk_tEf4cQhyzdVDjiHgWiqnPaekR0/s200/Iklan.gif"/></a></div>

CATATAN:

• Silahkan ganti kode warna merah dengan url iklan sobat
• Ganti kode warna hijau dengan gambar url iklan sobat

6. Simpan dan Selesai...

Semoga Bermanfaat :D

Cara Membuat Head Line News

Assalamu'alaikum

1. Login ke Blogger
2. klik Menu Edit Html kemudian cari kode ]]></b:skin>. Gunakanlah fasilitas search untuk memudahkan mencarinya dengan menekan CTRL+F.
Copy scipt dibawah ini, lalu paste diatas code ]]></b:skin> yang tadi.

#anima_sudut {
position:fixed;_position:relative;bottom:5px; right:0px;
clip:inherit;
_bottom:expression(document.documentElement.scrollbottom+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#anima_sudut a:link {
color:#000000;}
#anima_sudut a:visited {
color: #FFFFFF;
text-decoration:none;}
#anima_sudut a:hover {
color: #000000;}

CATATAN :

• Untuk menuntukan posisinya, sobat bisa merubah top:10px; left:10px; .( top=atas, bottom=bawah, right=kanan, left=kiri)

• Untuk kode yang berwarna merah berfungsi sebagai atau untuk membuat link berwarna

• Untuk kode yang berwarna hijau berfungsi sebagai atau untuk membuat text berubah warna ketika link yang berada pada head line news disorot mouse

• Kalau sobat sudah punya script( #anima_sudut) di html blog sobat, tambahkan angka dibelakangnya atau semacamnya untuk membedakan nya.

Contoh : #anima_sudutcr7, #anima_suduti, #anima_sudut2, atau yang lain pokoknya tidak sama

Kemudian copy-paste code dibawah ini diatas code </body>.

<div id="anima_sudut">
&lt;font COLOR="#000000"&gt;
&lt;B&gt;&lt;MARQUEE onmouseover="this.stop()" onmouseout="this.start()" direction="left" BGCOLOR="#80ff00" width= 100%px scrollamount="3"&gt;
WELCOME TO PORTABLECTECH | SILAHKAN GANTI DENGAN TEXT ANDA
&lt;/MARQUEE&gt;&lt;/b&gt;&lt;/font&gt;
</div>

CATATAN :

• Jangan lupa samakan variabel script di atas dengan yang dibawah.
  Misalnya, yang diatas menggunakan nama #anima_sudut2 maka yang di bawah otomatis harus disamakan juga menjadi anima_sudut2.
  Jangan lupa ganti height dan width nya sesuai dengan ukuran blog anda. tidak diganti juga tidak apa-apa hehe...

• Untuk kode yang berwarna biru berfungsi sebagai warna teks pada head line news

• Untuk kode yang berwarna kuning berfungsi sebagai background head line news

Cara Membuat Addres Bar Icon Pada Blog atau Website Anda

Assalamu'alaikum..!!
Gimana kabarnya?? Baik bukan??
Disini saya akan membagikan secuil ilmu saya kepada anda yang telah beruntung membaca artikel saya ini. Disini saya akan membahas tentang bagaimana membuat icon atau gambar yang ada pada address bar kreasi kita sendiri sebagai seorang kreatif.

Nah pertama-tama anda kunjungi http://www.favicon.cc yang ada di bawah dan silahkan daftar.
Kemudian lihat panduan gambar di atas.


Mudah Bukan?? Apa perlu bantuan saya???
Tenang saja, setiap artikel yang saya tulis adalah berdasarkan pengalaman saya dan sudah saya praktekkan. Jadi jangan khawatir.
Kalo mau copy paste ijin dulu ya atau ga kasih alamat blog saya di artikel blog anda.
Terima Kasih...!!!


Wassalamu'alaikum..!!!