Sunday, February 19, 2012

Cara Membuat Breadcrumbs Atau Menu Navigasi Di atas Artikel Posting Blog

Breadcrumb-Navigation
Pada Tutorial Blog Sebelumnya Blog Sharing Ilmu Pengetahuan Sudah Menjelaskan Pada Sobat Tentang Bagaiman Cara Membuat Toolbar Atau Navbar Melayang Di Blog..Dan Pada Tutorial Yg Sama Juga Yaitu Tutorial Blog Saya Akan Menjelaskan Pad Sobat Tentang Bagaimana Cara Membuat Breadcrumbs Atau Menu Navigasi Di atas Artikel Posting Blog.  Breadcrumbs Atau Menu Navigasi Di atas Artikel Posting Blog bisa membuat template kita lebih seo friendly, karena akan mempermudah search engine menemukan artikel-artikel kita. Navigasi ini di kenal dengan nama breadcrumb-navigation. Tidak hanya itu dengan adanya breadcrumb-navigation maka pembaca dapat dengan mudah melihat posisi artikel yang di baca serta mencari artikel dalam satu kategori. breadcrumb-navigation bisa di pasang pada template blogger dengan sedikit modifikasi templatenya, dengan begitu breadcrumb-navigation akan lebih mudah jika langsung di praktekkan.




Cara memasang breadcrumb navigation sebagai berikut:

  • Login ke blogger.com
  • Klik Tata Letak.
  • Pilih tab Edit HTML
  • Click Download Full Template and


    please back up your template first.
  • Kemudian beri tanda centang

    pada kotak kecil di samping

    tulisan Expand Template Widget.
  • Silahkan cari kode ]]></b:skin>
  • Copy lalu paste kode di bawah
  • ini persis di atas kode ]]></b:skin>


.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double
#e6e4e3;
}

8. Silahkan cari kode berikut pada

template anda :

<div class='post hentry uncustomized-post-template'>


9. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>



Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>


<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>


&#187; <span><data:post.title/></span>

</b:loop>

</b:if>

</b:loop>

</div>
</b:if>

<b:else/>


<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>

</div>


</b:if>

<b:else/>

<b:if cond='data:navMessage'>

<div class='breadcrumbs'>

<data:navMessage/>

</div>

</b:if>

</b:if>

10. Kemudian Save Template.

Posted By Ekho Renaldy12:28 AM

Thursday, February 16, 2012

Template Blog Keren

Filled under:

Share Template Nih GAN ...

Johny Trilogy Blogger Template terdiri dari tiga tempate yakni Johny Darkgamer, Johny Simple Music dan Johny Magazine Theme yang bisa Sobat pilih sesuai kategori blogger Sobat.

Johny Darkgamer


Johny Simple Music


Johny Magazine Theme

Posted By Ekho Renaldy10:36 PM

Cara Membuat Tag Cloud Versi 2

Filled under: ,

tag cloud / label berputar
Hai kawan aku pengen posting nich tentang bagaimana cara membuat tag cloud berputar di blog, atau label berputar, tapi baru bisa saat ini. Memang sulit tapi aku gak nyerah untuk belajar membuat label berputar pada blog. Nah berikut ini adalah hasil dari apa yang aku pelajari , yaitu membuat tag cloud bisa berputar..kamu bisa lihat hasil cara membuat label berputar pada blog punyaku ini. Kalu dah bisa sebenarnya mudah untuk bikin label berputar. 
CATATAN : Tidak semua template dapat mendukung untuk dikasih tag cloud. Dan sebelum kamu nyoba bikin label berputar, mending kamu download template punyamu dulu. 
Okey...mari belajar bersama blog "CARAPADA", langkah-langkahnya :
Lihat Demo Blogspot yang sudah ada tag cloudnya di Buat Radio
1. Login ke  blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Templates Widget,
3. Cari kode : <b:section class='sidebar' id='sidebar' preferred='yes'> ( kalau mau lebih cepat nyarinya pakai F3 aja.
4. Lalu copy paste kode di bawah ini tepat berada di bawah kode tadi,
<b:widget id='Label99' locked='false' title='Tag Cloud Comulus Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
 ==================================================
5. Sebelum kamu save, alangkah baiknya kamu priview dulu, kalau dah berhasil , baru kamu save .

CATATAN
1. Warna Merah : Ganti untuk merubah ukuran tag cloud
2. Warna Hijau : Ganti untuk merubah warna background tag cloud
3. Warna Biru : Ganti untuk merubah ukuran font
4. Tag Cloud akan berjalan apabila komputer sudah terinstal adobe flash player.
Bagimana, apakah ingin nyoba cara bikin label berputar biar blog kelihatan keren ...?
Selamat mencoba....aja yach ...

Posted By Ekho Renaldy10:15 PM

Membuat Animasi Pada Sidebar Widget

Filled under: ,

Sepertinya ketagihan neh buat Tutorial Blog hehehe kali ini tentang Membuat Animasi Pada Sidebar Widget ... tapi sebelum dimulai ketawa dulu .. wakakakakak .. hahaha .. hihihi ... huhuhu .. itu artinya ucapan terimakasih buat sobat-sobat eRGe semua, karena udah ngasih respon pada artikel sebelum nya tentang Membuat Animasi Judul Blog. Untuk Posting kali ini tetap gak jauh benda ama yang lalu masih diseputaran kilometer Animasi (hehehe) tapi yang ini buat Sidebar Widget sob, untuk contoh nya bisa dilihat pada Blog ini itupun kalo masih ada hehehe mana tau nanti di copot (halah melenceng terus neh). ini dikarenakan ada direquest ama temen lewat shoutmix makanya dipostingin, padahal caranya sangat mudah tidak butuh waktu lama sampai bermenit-menit tapi cukup dengan 5 menit saja paling lama (bagi yang tau maksudnya ... hehehe .. halah sok-sok an)


Untuk Penerapan Tip ini saya pilih Template buatan Anak Negeri sendiri yaitu Megazine R 1-3 madein nya Kang Rohman The Master Of Blog, bagi sobat yang pengen pinter kunjungi aja blog Beliau ini, disana puluhan Tips dan Triks Ngeblog sudah menanti sobat, nah bagi sobat yang masih bingung atau pengen bertanya, langsung aja chat karena fasilitas nya sudah disediakan, para pakar Blog yg ada disana pun siap mengajari sobat ini pun kalo mereka tau (hehehe) seperti Kang Abeh atau Tutor, aaLiL Master Seo, easyblogtrick, noe, Chempluk, Yoyok, Otak's, GONDES, KOESnadi dan masih banyak yang lain, gak rugi deh kalo mampir kesana .. ilmu semua.
Sekarang langsung pada pokok pembicaraan Membuat Animasi Pada Sidebar Widget .. sebenar nya Animasi ini tidak memakai script tapi Animasi image gif sebelum nya sobat harus menyediakan dulu image nya .. nah untuk itu saya ngasih 2 contoh Image gif dibawah ini

Side Bar Photobucket
Alamat Link Image 1 : http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif
Alamat Link Image 2 : http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif

Langkah Pertama :
Login dulu ke bloger > Tata Letak > Edit HTML > Kemudian cari Kode seperti di bawah ini

pake ctrl + f supaya cepet nyari kemudian isikan
.sidebar h2

.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
}

Nah kalo udah ketemu sobat tinggal tambahin aja Background nya seperti dibawah ini

background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif?imgmax=800)repeat;

atau

background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif?imgmax=800)repeat;


terserah yang mana dipakai image nya ... jadi kodenya seperti di bawah ini

.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif?imgmax=800)repeat;
}

kalau udah selesai simpan template kemudian liat blognya .. kalau gak ada aral melintang pasti sidebar nya udah berubah ada lampu-lampu nya .. hehehe

Mudah-mudah tip ini ada mamfaat nya bagi kita semua ... amin, sebelum nya terima kasih bagi sobat-sobat yang mau mengomentari artikel ini ... salam.

Posted By Ekho Renaldy10:12 PM

Navbar Di Atas Header

Filled under: ,

 
@- Login Blog seperti biasa dengan ID Blog milik Anda.
@- Terus Klick TATA LETAK / LAYOUT.
@- Klick EDIT HTML.
@- Lakukan back-up Template dengan mengklick Download Full Template, di maksud untuk memudahkan pengembalian Template seperti semula jika terjadi kesalahan.
@- Kemudian beri tanda Centang pada kotakan kecil di sebelah kiri Expand Widget Templates, dan tunggu sesaat biarkan Loading selesai.
@- Lalu cari Kode yang seperti ini : ]]></b:skin>
@- Jika sudah, silahkan Copy Kode CSS dibawah ini dan Pastekan di atas kode ini >> ]]></b:skin>

#top-panel{
background:#000000 url();
border-bottom:5px solid #363636;
padding:10px 10px;
text-align:left;
font-family: Verdana, Trebuchet, Trebuchet MS, Arial, sans-serif;
font-size:12px;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:0px;
float:right;
color:#FF0000;
text-decoration:none;
margin-right:30px;
margin-top:-45px;
font-size:10px;
font-weight:bold;
background:url() bottom left no-repeat;
}
#sub-panel a span{
padding:-10px;
background:url() right bottom no-repeat;
display:block;
}
strong{color:#FFFFFF;}
.face{border:solid 0px #a6c34e; margin:-2px 10px 0px 0; float:left;}
@- Setelah itu silahkan Sobat cari Kode </head>
@- Kemudian Copy Kode Script dibawah ini lalu Pastekan di atas Kode </head>

<script src='http://iyang.googlecode.com/files/toolbarHDR.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent(&#39;domready&#39;, function(){
var mySlide = new Fx.Slide(&#39;top-panel&#39;);
$(&#39;toggle&#39;).addEvent(&#39;click&#39;, function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
@- Dan yang terakhir silahkan Sobat Copy Kode dibawah ini lalu Pastekan di bawah Kode <body>

<div id='top-panel'>
<img class='face' height='47' src='URL GAMBAR' width='50'/>
ISI KATA-KATA DISINI
<br/>
<span style='color: #1422DB;'>
ISI KATA-KATA DISINI
</span>
<br/><span style='color: #1422DB;'><data:blog.pageTitle/></span></div>
<div id='sub-panel'><a href='/#' id='toggle'><span><img src='http://i377.photobucket.com/albums/oo215/momospeed/hide-tab.gif'/></span></a></div>

@- Jika sudah jangan lupa untuk klick SAVE TEMPLATE
@- Selesai, dan selamat mencoba kawan.
NB : Soal background alias warna latar toolbar, silahkan Sobat atur saja sesuai selera.

Tab Header

Posted By Ekho Renaldy10:09 PM

Two People Template

Filled under:

Posted By Ekho Renaldy10:09 PM

Aspireport Template 3 Colomn

Filled under:

Posted By Ekho Renaldy10:08 PM

Template 3 colom

Filled under:

Posted By Ekho Renaldy10:06 PM

Terminal Display Template 3 Colomn

Filled under:

Posted By Ekho Renaldy8:58 PM

Butter Fly Template 3 Colomn

Filled under:

Posted By Ekho Renaldy8:57 PM

Diary Template 2 colomn

Filled under:

Posted By Ekho Renaldy8:56 PM

Andreas Template 3 colom

Filled under:

Posted By Ekho Renaldy8:55 PM

Sunset Template

Filled under:

Posted By Ekho Renaldy8:54 PM

Vinery Template 2 Colomn

Filled under:

Vinery Template 2 Colomn

Posted By Ekho Renaldy8:53 PM

Zen Template

Filled under:

Zen Template





Posted By Ekho Renaldy8:53 PM

Wordpress Admin Blogger

Filled under:

Posted By Ekho Renaldy8:52 PM

Revolution Lifestyle

Filled under:

Posted By Ekho Renaldy8:51 PM

Genesis Blogger

Filled under:

Posted By Ekho Renaldy8:49 PM

Dy 2008 Template

Filled under:

Posted By Ekho Renaldy8:49 PM

Firebug

Filled under:

Posted By Ekho Renaldy8:48 PM

Blue Steel

Filled under:

Posted By Ekho Renaldy8:48 PM

Arthemia Blogger

Filled under:

Posted By Ekho Renaldy8:47 PM

Blogy Styleicious

Filled under:

Posted By Ekho Renaldy8:47 PM

Notepad Chaos Template

Filled under:

Posted By Ekho Renaldy8:45 PM