Page Navigasi Untuk Blogger

Posted by sunariyo Kamis, 25 September 2008 0 komentar
Akhirnya setelah lama menunggu saya mendapatkan hal yang menarik yaitu menampilkan Page Navigasi yang letaknya pada footer. Caranya mudah tinggal memasukkan kode-kode yang ada, dan mengikuti langkah-langkah yang akan saya berikan nah Untuk lebih jelas seperti apa bentuknya Page Navigasi itu.

Page Navigation Hack

Nah sekarang mulai langkah-langkahnya :
1. log in ke akun blogger anda dan pilih layout --> Edit html
2. Cari kode ]]></b:skin>
3. Letakkan Kode CSS ini di atasnya :

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}



4. Cari Kode ini :
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

5. Masukkan kode ini dibawah </b:section>

&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;


var pageCount=5;
var displayPageNum=3;
var firstPageWord = &#39;First&#39;;
var endPageWord = &#39;Last&#39;;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=&#39;&#39;){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39; &lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+labelHtml + firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#39;+thisNum+&#39; of &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
html += &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[htmlMap.length-1]+&#39;&quot;&gt; &#39;+endPageWord+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-
script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;


<div style='text-align:right;font-size:10px;color:000000;margin-top:15px;
display:none;'> <a href='http://rias-techno-wizard.blogspot.com/2008/07/
page-navigation-hack-for-blogger.html'>Grab this Widget ~ Blogger Accessories</a></div>



6. Untuk Mengganti seberapa banyak angka/page yang muncul, yaitu dengan mengganti
1 : var pageCount = 5; angka 5 sesuai dengan keinginan anda.

7. selesai

Silahkan coba dan rasakan kenikmatannya...

Merujuk dari Rias techno Wizard


Laba-laba Jalan-jalan

Posted by sunariyo Rabu, 24 September 2008 0 komentar

Oppssss...!!! ada laba-laba jalan....
Mau yang seperti di atas.. ada laba-laba jalan, mungkin dia mo beli baju LEBARAN, sebentar lagi kan mo idul fitri jadi biarin aja laba-labanya jalan-jalan supaya ga' stress...

<embed type="application/x-shockwave-flash" allowscriptaccess="always" src="http://spidergadget.googlecode.com/svn/trunk/spider.swf" wmode="opaque" flashvars="up_bellyColor=666666&up_backgroundColor=FFFFFF&up_spiderName=
Spider&up_backgroundImage=http://&up_original=&up_speed=1&up_headColor=
FA0C28&up_legColor=333333&up_size=1&" height="200" width="480"></embed>


Copy paste aja source kode diatas.. langsung pada tempatnya.

By : Abowman.com

SILAHKAN MENCOBA!!!



Membuat Sidebar terpisah dan Berkotak-kotak

Posted by sunariyo Sabtu, 20 September 2008 0 komentar
wah udah lama nih.. ga' mengisi dan mengotak-atik siblog.. soalnya saya beberapa hari ini lagi sibuk.. jadi baru bisa nge-Blog lagi seperti biasayanya.. beberapa waktu lalu saya mengunjungi blognya kang-rohman disana kang- rohman menulis artikel tentang cara membuat sidebar agar terlihat terpisah-pisah, persis kayak blog milik kang rohman, Nah dari situ saya menulis artikel ini ya itung-itung penyebar ilmu yang baek biar yang baca dapat berguna dan bisa dipaktekin.Nah nih gambar blog kang rohman... Sidebarnya terlihat terpisah-pisah kan..

sidebar-kotak

Dari gambar diatas.. bisa di lihat sidebarnya terpisah dan seperti kotak-kotak lagi, jadi terkesan rapi blognya mo tau cara buatnya biar bisa jadi kayak gitu?? ha.. baca terus ya biar ngerti...

Nah cari kode Sidebar Widgetnya seperti:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Pisah ketiga kode ini.. biar ga' bingung jadinya.. (kode ini terdapat pada template minima) tapi bila sidebar widget dengan main widgetnya udah terpisah.. dibiarrin aja, nah setelah dipisah maka jadinya seperti ini:

.sidebar .widget{
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}



Jadi untuk terlihat terpisah maka ada yang harus dimodifikasi yaitu:
kode pada Sidebar . Widger dimodifikasi jadi

.sidebar .widget{
background:#fff;
border:1px dotted #6c6b6b;
margin:0 0 1.5em;
padding:0.5em;
}



1. Background merupakan latar belakang blog bisa diganti dengan warna yang sesuai
2. Border 1 px dotted #6c6b6b; merupakan garis yang mengelilingi wiget sebesar 1pixel
3. Margin merupakan jarak kebawah antara widget yang 1 dengan yang lainnya sebesar 1,5em
4. Padding memberikan sela 0,5em

Nah, keempat hal inilah yang dapat membuat sidebar seakan-akan terpisah dan berkotak-kotak..

Nah silahkan mecoba ya...

Mengganti Nama Author

Posted by sunariyo Kamis, 11 September 2008 0 komentar
Merubah Nama Author itu dapat di lakukan dengan mudah lho.. ya tinggal dari kode script dibawah ini :

<p class=�post-footer-line post-footer-line-1�>
<span class=�post-author�>
<b:if cond=�data:top.showAuthor�>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>


cara mencari nya mudah ko':
1. Masuk ke akun blogger anda.
2. Klik Layout --> edit Html
3. Centang Box pada tuisan Expand Widget.
4. Ganti Kode berwarna merah dengan nama yang anda inginkan.
5. Save template.

Mudah kan sekarang nama author milik anda sudah terganti..



CSS Dock Menu

Posted by sunariyo Sabtu, 06 September 2008 0 komentar
Dock Menu Merupakan menu Horizontal yang disertai gambar-gambar dan apabila menunya disentuh maka akan menampilakan efek berubah size/ukurannya. Nah dibawah ini contoh gambar dari CSS Dock Menu ini. N-design-studio.com situs ini merupakan situs yang menyediakan Trick Dock Menu menggunakan script CSS. o-om.com saya jadikan sebagai rujukan untuk menuliskan artikel ini.. mungkin berguna untuk anda.

CSS dock menu

Untuk mengetahui bagaimana cara kerja CSS Dock Menu ini, silahkan klik disini! sebagai sample, dan mungkin saja anda tertarik untuk mencoba.

Langkah yang perlu dilakukan untuk membuat CSS Dock Menu ada pada blog anda ialah:

1. Download Script code CSS nya Disini!.

2. Lihat Disana anda Folder JS (terdapat 2 file Script) yaitu Interface.js dan jquery.js Buka Juga folder Images untuk mendapatkan icon menunya. Upload semua File tersebut dan simpan pada Host Directorynya masing-masing.. Boleh juga anda menyimpannya pada Google Page Creator

3. Kalau sudah menyelesaikan Semua pengUploadtan filenya.. Silahkan masukke langkah selanjutnya

Cara Pemasangannya Pada Blogger

1. Masukke Edit Html dan cari kode <head> Kalau sudah ketemu Letakkan script ini dibawahnya:

<head>
<script src='http://google.pages.com/jquery.js' type='text/javascript'/>
<script src='http://google.pages.com/interface.js' type='text/javascript'/>
<link href='http://google.pages.com/style.css' rel='stylesheet' type='text/css'/>

Warna ungu merupakan alamat directory, ubahlah alamat tersebut sesuai dengan path directory masing-masing


2. Selanjutnya cari kode </body> Letakkan script yang ada dibawah ini, diatas kode </body>. Seperti ini:

<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>

</body>
</html>



3. Proses pemasangan menu terserah pada anda mau diletakkan pada Page Element atau edit html. Pasang kode ini disana :

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="http://www.tipsblogspot.blogspot.com"><img src="http://google.pages.com/rss.png" alt="rss" /><span>RSS</span></a>
</div>

Warna Hijau Menunjukan alamat URL yang dituju ganti sesuai alamat URL yang anda tuju dan warna Merah Menujukkan path directory untuk warna merah ganti sesuai path directory anda.

Mengerti Programming dapat mempermudah anda mengerti pemasangan dan peletakkan script-script code.


Mengganti label Menjadi Tag Cloud

Posted by sunariyo Jumat, 05 September 2008 0 komentar
Tag Cloud sudah biasa kita liahat pada blog lainnya,, tapi biasanya mereka mendapatkan itu dengan memanfaatkan sebuah situs untuk mendapatkan Tags Cloud yang di pasang pada blog kita ,, merujuk dari phydeaux3
dan Bloggerplungin saya menuliskan ini agar tanpa bantuan sebuah situs kita dapat menampilkan tag clouds dengan fasilitas yang disediakan oleh blogger dengan mengganti sedikit kode html/javascriptnya saja..

Untuk mendapatkan itu anda harus menampilkan label pada blog anda.. dengan cara pilih layout-->Page Element-->Add Page Element.. Pilih Label dan Save.
Kalau sudah Ikuti Cara yang berikut :
1. Pilih Layout lagi terus pilih edit html... (tidak usah di Expand Widget).
2. Cari Kode

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>


3. Ganri Kode tersebut dengan kode yang di bawah ini:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [0,255,0];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;

a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Posts in &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(&#39; &#39;);
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
</p>
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<br/>Powered By:<small><a href='http://www.tipsblogspot.blogspot.com'>Blogger Widgets</a></small>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>


5. DAn Cari Kode :

]]></b:skin>


6. Ganti KOde tersebut menjadi :

#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:&quot;&quot; !important}
]]></b:skin>


7. Save dan lihat hasilnya..

Sebagai catatan sebelum anda mengganti semuanya ada baiknya untuk membackup dahulu template anda, jadi kalau ada hal yang dapat merusak blog anda dapat dihindari, karena anda telah membackupnya lebih dahulu.




Menampilakan Adsense pada Postingan

Posted by sunariyo Rabu, 03 September 2008 0 komentar
Salah satu cara mengOptimalkan Adsense ialah dengan cara meletakkan kode-kode adsense pada tempat-tempat yang strategis seperti pada Header, Body, Sidebar, bahkan dilatakkan kedalam postingan kita.. Nah dengan mengOptimalkan kode-kode tersebut kedalama blog kita maka kita akan mendapatkan hasil yang Optimal juga dari "tuan" google. nah Mo tahu caranya meletakkan kode adsense anda ke dalam potingan yang anda buat...

Klo menginginkan letak Adsensenya di sebelah kiri maka..
Cara yang perlu ditempuh ialah :
1. Masuk ke Akun blogger anda.
2. Pilih Layout-->Edit Html.

3. Cari kode

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

4. klo sudah dapet..masukkan kode adsensenya seperti ini..

<div class='post-header-line-1'/>
<div style='float:left;'>
AdSense Code
</div>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

5. Selesai deh..

Tapi klo mo Letak Adsensenya di sebelah kanan Lihat Pada Gambar Yang dibawah INi:

Caranya Ga'Susah Tinggal Ganti Kodenya saja..jadi

<div class='post-header-line-1'/>
<div style='float:Right;'>
AdSense Code
</div>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Ganti yang bertanda : Merah pada kode yang petama yang letaknya pada sebelah kiri Tertulis Left dan untuk sebelah kanan ganti left menjadi right.

Peletakkan Kode Adsensenya Anda Harus mengganti tanda seperti tanda < > dan tanda ". Untuk Mengantinya anda tinggal masukkan kode tersebut kedalam Centricle Kode.. Anda tinggal masukkan kode Adsensenya kedalam kotak yang ada pada Centricle dan Klik Encode.. Nah Setelah itu Baru masukkan kode tersebut kedalam Script diatas tadi.



Pilihan Menu dengan Icon

Posted by sunariyo Senin, 01 September 2008 0 komentar
Wuih.. blognya keren mana dihiasi dengan menu bergambar lagi.. wah pengen nih.. tapi gimana cara buatnya.. ya??
Sering kita lihat kalo pemilihan menu yang ada pada header yang terdapat pada blog biasanya hanya tulisan dan warna-warna bila disetuh.. tapi kadang kala kita pengen dengan suasana laen misalnya, dengan gambar-gambar yang uniks.. seperti yang terlihat pada gambar dibwah ini :


Nah langkah membuatnya mudah kok' ga' susah amat dan ga' ribet..
Gini caranya:

Langkah Pertama :
1. Masuk ke akun google kmu.
2. Pilih menu Layout --> Edit html.
3. Masukkan kode ini :




#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}

4. Masukkan kode tersebut Dibawah /* Header */ letaknya dibagian tengah Template.
5. Save.

Langkah Kedua :
1. Pilih Page Element dan kli Add Pege Element.
2. Pilih Html/Javascript.

3. Masukkan kode dibwah ini kedalam konten box..



<div id='newnavbar'>
<ul>
<li><a href="URL "><img src="URL Image"></a></li>
<li><a href="URL "><img src="URL Image"></a></li>
<li><a href="URL "><img src="URL Image"></a></li>
<li><a href="URL "><img src="URL Image"></a></li>
<li><a href="URL "><img src="URL Image"></a></li>
</ul></div>

4. Save Dan lihat hasilnya.

Untuk Peletakkan terserah anda mau meletakkan dimana saja... Klo mo Meletakkannya pada header tapi ga' ada add page elementnya nah lihat Add Page element pada Header
Dan URL diisi dengan alamat blog anda/Home Page anda
URL image diisi dengan lokasi ICON /image anda..
Gambar/icon dapat diambil pada ICONARCHIVE
Cara Pengambilan Lokasi Icon:


1. Masuk ke icon archive
2. Pilih Icon yang kmu suka.. dan klik kanan pada download as ico.file. Pilih Copy Image Location
3. Pastekan URL tersebut ke URL image yang ada pada kode tadi..
4. Selesai..
Ping your blog, website, or RSS feed for Free