KSKS BLOG

Kata-Kata Bermakna

2013-08-17T15:44:00.003-07:00

Kata-kata dibawah adalah kata-kata dari motivator-motivator yang membuat hidup saya lebih bermakna. Untuk selalu mengingatnya, maka saya membuat postingan ini untuk kata-kata bermakna. Mudah-mudahan berguna untuk diri saya sendiri dan sobat blogger. :)

NB:Akan terus Update.

-Tidak masalah siapa Anda, dari mana Anda berasal. Kemampuan untuk bangkit dan menang berasal dari diri Anda sendiri.

-banyak yang bilang perlahan tapi pasti. kalau bisa cepat dan pasti, kenapa mesti perlahan tapi pasti?

- Bnyk orang yg berlindung dari kalimat 'kita kan orang kecil'.Ingat, orang sukses selalu mencari solusi dari setiap masalah yg menghalanginya.

-Kalau bisa sukses di usia muda, kenapa mesti nunggu tua?

Dirgahayu Republik Indonesia ke 68 Tahun

2013-08-17T02:14:00.000-07:00

Dirgahayu Republik Indonesia ke 68 Tahun. Happy Independence Day Indonesia. MERDEKA!!!
Dengan penuh semangat membuat posting kali ini karena hari ini, Hari Kemerdekaan Republik Indonesia. Mari sobat blogger dan kawan-kawan, kita bangun negara ini menjadi lebih maju lagi, menjadi Generasi Muda yang penuh semangat, mencerdikkan anak bangsa dan lain-lain.
KSKS BLOG mengucapkan Selamat Hari Kemerdekaan Republik Indonesia ke 68 Tahun, semoga negara menjadi lebih baik lagi dari sebelumnya.

Selamat Hari Raya Idul Fitri 1433 H

2013-08-04T15:36:00.000-07:00

Sebelum saya mudik, saya dan keluar besar KSKS BLOG ingin mengucapkan Selamat Hari Raya Idul Fitri 1433 H. Minal Aidzin Wal Faidzin, Mohon Maaf Lahir dan Batin. Kenapa saya buat postingan ini sebelum hari raya Idul Fitri? Karena, saya ingin mudik dan di kampung saya tidak ada koneksi internet. Sebab itu saya membuat postingan ini sebelum hari raya.
Buat yang mudik, mudah-mudahan selamat sampai tujuan dan bisa berkumpul dengan keluarga KSKS BLOG dan sobat blogger yang lainnya :) KAMI KELUARGA BESAR KSKS BLOG INGIN MENGUCAPKAN SELAMAT HARI RAYA IDUL FITRI 1433 H. MINAL AIDZIN WAL FAIDZIN, MOHON MAAF LAHIR DAN BATIN :)

Cara Membuat Readmore

2013-08-03T07:22:00.000-07:00

Sudah kita ketahui Readmore membuat postingan kita di homepage menjadi terlihat singkat, dan simple. Tanpa readmore, pengunjung blog langsung melihat semua isi posting pada homepage.. Supaya pengunjung blog tidak langsung melihat semua isi posting pada homepage, maka kita akan membuat Readmore. Berikut caranya:
1. Cari kode </head>, letakkan kode berikut di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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(thumbnail_mode == "yes") {
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>

2. Cari kode <data:post.body/> , dan ganti kode <data:post.body/> dengan kode berikut:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
</b:if>

NB: KODE <DATA:POST.BODY/> ADA 3, GANTI YANG KE 3.

Semoga bermanfaat :)

Cara Membuat Breadcrumbs SEO Friendly di Blog

2013-07-19T15:49:00.001-07:00

Breadcrumbs SEO Friendly? Siapa yang tidak tahu Breadcrumbs... Yap, Breadcrumbs membuat blog kita menjadi SEO Friendly dan membuat robot Google akan mudah mencari blog kita dengan menggunakan SEO Friendly... Bagi anda yang ingin membuat Breadcrumbs SEO Friendly, simak berikut ini:

1.Login ke Blogger
2.Pilih Template
3.Klik Edit HTML
4.Cari kode ]]></b:skin>
5.Letakkan kode dibawah ini di atas kode ]]></b:skin>

.breadcrumbs{
padding:0px 5px 5px 0;
margin-bottom:20px;
font-size:11px;
color:#5B5B5B;
border-bottom:1px dotted #bbb;
}

7.Cari kode di bawah ini

<b:includable id='post' var='post'>
<div class='post'>

8.Letakkan kode dibawah ini diatas kode diatas

<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<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' title='Home'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' expr:title='data:label.name' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType != "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>

9.Pratinjau untuk melihat hasilnya
10.Jika sudah cocok, Simpan Template

Semoga Bermanfaat :)

Cara Mengatur Jarak Sidebar Pada Blog

2013-07-17T07:33:00.001-07:00

Tentu saja banyak para sobat blogger mengatur jarak sidebarnya masing-masing, supaya terlihat cantik, simple. dan tidak membingungkan bila sidebar dengan jarak yang dekat. Baik langsung saja ke caranya:

1.Login Blogger
2.Pilih Template > Edit HTML
3.Cari kode ]]></b:skin> (CTRL+F SUPAYA MUDAH DAN CEPAT)
4.Jika sudah ketemu , tambahkan kode berikut di atas kode ]]></b:skin>

.main-inner .widget {
margin: 15px 0px;
}

NOTE: SESUAIKAN DENGAN SELERA ANDA

5.Klik Pratinjau untuk melihat hasilnya
6.Jika sudah cocok Simpan Template
7.Selesai

Semoga bermanfaat :)

Daftar Isi

2013-07-15T19:02:00.001-07:00

Memuat...

DTE :]

Cara Membuat Readmore Pada Blog

2013-07-06T17:48:00.000-07:00

Siapa yang tidak tahu ReadMore? Oke, mungkin sedikit sobat blogger itu tidak tahu tentang ReadMore. ReadMore adalah penggalan sebuah artikel/posting, yang mempersingkat kalimat/ isi posting di halaman homepage, contohnya 'ReadMore' 'Baca Selengkapnya' dll.
Banyak yang tidak mengerti cara pemakaian ReadMore atau cara memasang ReadMore pada Blog. Baik langsung saja kita simak berikut ini:

1.Login akun Blogger
2.Klik Template yang ada di Dashboard
3.Pilih Edit HTML
4.Cari kode </head>
5.Jika sudah ketemu, copy kode di bawah ini dan letakkan di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, (for blogspot)
by: http://ksks-blog.blogspot.com/
********************************************/
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>

6.Save Template
7.Kemudian cari kode seperti ini

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>...</b:widget>

atau cari kode seperti gambar di bawah ini:

8.Kalau sudah ketemu klik tanda panah kecil yang berwarna hitam disamping kode tersebut,maka setelah di klik akan muncul seperti gambar di bawah ini

(KLIK GAMBAR INI SUPAYA JELAS CARANYA)

9.Klik tanda panah kecil yang berwarna hitam di samping kode <b:includable id='post' var='post'>...</b:includable> (LIHAT GAMBAR SUPAYA JELAS)
10.Jika sudah di klik, cari kode <data:post.body/> di bawah kode <b:includable id='post' var='post'>...</b:includable>
11.Jika sudah ketemu, ganti kode <data:post.body/> dengan kode di bawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

NB: -KODE <data:post.body/> ADA 2, GANTI KODE YANG KEDUA

13.Save template

Semoga bermanfaat.

Modifikasi Widget Statistik Blog

2013-07-05T18:05:00.000-07:00

Selamat Pagi sobat Blogger :) Di pagi hari ini dengan cuaca yang sedikit mendung, udara sejuk dan di temani dengan secangkir kopi yang hangat, saya siap untuk ngeposting tentang 'Modifikasi Widget Statistik Blog'.
Memodifikasi Widget Statistik Blog sangat enak untuk di lihat bagi para pengunjung yang datang ke blog kita. Makanya perlu kita memodifikasi wiget statistik blog.
Berikut caranya:
1.Login akun Blogger
2.Pada dashboard pilih Tata Letak > Tambahkan Gadget > pilih Statistik Blog (TIDAK USAH DI GANTI NAMA ATAU DI RUBAH MODEL WIDGETNYA, LANGSUNG SAJA KLIK SIMPAN LALU KLIK SIMPAN SETELAN)
3.Masuk ke Template > Edit HTML
4.Letakkan kode berikut di atas kode ]]></b:skin>

#Stats1 ul {
margin: 10px 0;
border: 0;
pandding: 0;
}

#Stats1 li {
border-left: 4px solid #333;
margin: 0;
border: 0;
background-color: #eee;
background-image: url(http://1h3.ggpht.com/-JypPIDhQgEY/UIfUN_w0jkI/AAAAAAAABOM/s_O3VHyQS1w/s194/sprites-stats.png);
background-repeat: no-repeat;
padding: 10px 10px 10px 80px;
list-style-type: none;
}

#Stats1 h4 {
margin: 0;
font-size: 22px;
line-height: 1.2em;
color: #333;
text-shadow: none;
}

#Stats1 span {
font-size: 13px;
color: #333;
text-shadow: none;
}

#totalComments {
background-position: 0 -68px;
}

#totalCount {
backrgound-position: 0 -136px;
}

5.Kemudian cari kode seperti ini

<b:widget id='Stats1' locked='false' title='Total tayangan laman' type='Stats'/>

6.Ganti kode diatas dengan kode dibawah ini

<b:widget id='Stats1' locked='false' title='Statistik' type='Stats'>
  <b:includable id='main'>
    <div class='widget-content'>
      <ul>
        <li>
          <h4 id='Stats1_totalPosts'>&amp;hellip;</h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
          <span>Pageviews</span>
        </li>
      </ul>
      <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
  </b:includable>
</b:widget>

5.Simpan Template

Semoga bermanfaat.

Cara Membuat Komentar Slide Panel Pada Blog

2013-07-04T17:34:00.002-07:00

Mungkin sudah banyak yang tahu tentang 'Komentar Slide Panel' ini. Namun saya disini menjelaskan supaya lebih simple melihat komentar pada blog. 'Komentar Slide Panel' ini akan mempercantik sebuah blog dan terlihat simple. Baik langsung ke cara membuatnya:

1.Login Blogger
2.Template > Edit HTML
3.Cari kode ]]></b:skin>
4.Copy dan letakkan kode di bawah ini di atas kode ]]></b:skin>

a.openpanel {
  display:block;
  clear:both;
  width:auto;
  padding:0px 0px;
  text-align:center;
  font-weight:bold;
  line-height:32px;
  background-color:#39f;
  color:white;
  text-decoration:none;
  margin:0px 0px;
  -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0px 1px 1px rgba(0,0,0,0.2);
  position:relative;
}

a.openpanel em {
  width:0px;
  height:0px;
  display:block;
  position:absolute;
  top:15px;
  right:15px;
  border:6px solid transparent;
  border-top-color:white;
}

a.openpanel.active {background-color:#900;}

a.openpanel.active em {
  top:6px;
  border-color:transparent transparent white transparent;
}

div.paneline {
  height:0px;
  border-bottom:4px solid #39b;
}

div.hompiPanel {
  padding:10px 20px 20px;
  -webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  -moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
  margin:0px 0px !important;
}

5. Cari kode </head>
6.Copy dan letakkan kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var panelSelector       = '#comments',
    openPanelText       = "Poskan Komentar",
    closePanelText      = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed   = 400;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'></script>

7. Simpan Template

Semoga bermanfaat....

Sitemap

2013-07-04T07:51:00.001-07:00

Cara Membuat Tombol Back To Top Pada Blog

2013-07-03T19:24:00.003-07:00

Back to top. Siapa yang tidak tahu Back To Top? Sudah tidak di ragukan lagi Back To Top itu. Tombol Back To Top tombol yang sangat berguna buat kita yang senang blogging. Kegunaannya untuk otomatis untuk scroll ke atas. Jadi, kita tidak usah repot-repot lagi untuk mengscroll sendiri. Back ToTop ini sangat perlu untuk blog, apa lagi bila blognya sering di kunjungin sobat blogger.
Baik, kita langsung menuju cara pembuatannya:

1.Login ke Blogger
2.Pilih Template
3.Masuk ke Edit HTML
4.Cari kode </body> , CTRL+F supaya lebih mudah dan cepat
5.Copy kode di bawah ini dan letakkan di atas kode </body>. (JIKA KODE DIBAWAH INI SUDAH ADA DI TEMPLATE SOBAT BLOGGER SEBAIKNYA TIDAK USAH DI PASANG KODE DI BAWAH INI)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

6.Copy kode dibawah ini dan letakkan di atas kode </body>

<script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/>
<a href='#' style='display:scroll;posisition:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='http://1.bp.blogspot.com/-FjrYiE6C8ZY/TqJMQWu2osI/AAAAAAAAADI/GFdFWFPIO6o/s1600//back-to-top.gif'/></a>

NB: KODE LINK YANG BERWARNA MERAH BISA DI GANTI SESUAI ANDA.

7. Simpan Template

Semoga bermanfaat...

Cara Menghilangkan Tulisan Langgan Entri (Atom)

2013-07-02T16:31:00.002-07:00

Terkadang tulisan 'Langgan: Entri (Atom)' atau tulisan 'Subscribe to: Post (Atom)' mengganggu untuk menampilkan blog yang cantik,simple.
Siapa sih yang tidak mau blognya yang cantik? Blog cantik pasti para pengunjung blog akan tertarik melihat blog kita dan berulang-ulang kali akan mengunjungi blog kita yang cantik.
Sebagian sobat blogger banyak yang ingin menghilangkan tulisan 'Langgan: Entri (Atom)' supaya tidak mengganggu untuk menjadi tampilan menarik dan di sukai pengunjung.
Berikut caranya:

TUTORIAL 1

1.Login Blogger
2.Masuk ke Template
3.Klik Edit HTML
4.Cari kode dibawah ini, CTRL+F supaya cepat

<b:include data='feedLinks' name='feedLinksBody'/>

5.Jika sudah ketemu hapus kode di atas.
6.Simpan Template

TUTORIAL 2

1.Login Blogger
2.Masuk ke Template
3.Klik Edit HTML
4.Cari kode dibawah ini, CTRL+F supaya cepat

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>

5.Jika sudah ketemu hapus kode di atas.
6.Simpan Template.

TUTORIAL 3

1.Login Blogger
2.Masuk ke Template
3.Klik Edit HTML
4.Cari kode dibawah ini, CTRL+F supaya cepat.

]]></b:skin>

5.Simpan kode dibawah ini diatas kode ]]></b:skin>

.feed-links {display: none;}

6.Simpan Template.

NB: -Pilih salah satu tutorial di atas.

Semoga bermanfaat.

Cara Menyembunyikan Sidebar Di Homepage

2013-07-02T06:55:00.002-07:00

Selamat malam sobat blogger :)
Menyembunyikan sidebar,footer, dll di homepage atau di halaman posting tentu saja akan berguna untuk menampilkan blog menjadi cantik, simple. minimalistic.
Banyak yang bertanya-tanya bagaimana menyembunyikan sidebar,footer, dll di homepage atau di halaman posting, khususnya yang bertanya adalah sobat blogger begitu pula saya sendiri. Dulu saya bingung untuk menyembunyikan sidebar,footer, dll di homepgae atau di halaman posting... Dan saya menemukan caranya untuk menyembunyikannya...
Simak berikut ini:

1.Login ke blogger. kalau belum punya silahkan kesini
2.Masuk ke Template dan pilih Edit HTML
3.Cari kode sidebar,footer,widget yang ingin anda sembunyikan. Saya beri contoh disini Sidebar

4.Tambahkan kode dibawah ini, dan taruh diatas kode <div id='sidebar'>

<b:if cond='data:blog.pageType == "item"'>

5.Tambahkan kode dibawah ini, dan taruh di bawah kode </div>

</b:if>

6.Sehingga hasilnya akan seperti ini

7.Simpan Template.

Begitu saja cara untuk Menyembunyikan Sidebar,Footer, Dll Di Homepage.
Tunggu tutorial-tutorial berikutnya dari KSKS-BLOG .
Semoga bermanfaat :)

Tempat Meletakkan Menu Navigasi Blogger

2013-06-30T19:12:00.002-07:00

Pagi sobat Blogger :)
Pagi-pagi yang sejuk di temani secangkir kopi dan perasaan campur aduk karena tadi pagi telah melihat pertandingan Final konfederensi 2013 antara Brazil vs Spanyol yang di menangkan oleh Brazil :(

Oke langsung saja ya :)

Untuk meletakkan Navigasi di bawah header dan di atas header, cari kode di bawah ini:

<div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1'>
        <b:widget id='Header1' locked='true' title='KSKS-BLOG (Header)' type='Header'/>
    </b:section>
</div>

Disini kamu BUKAN melihat kode <div id='header-wrapper'> dan jangan terfokus pada ID atau CLASS, tetapi fokuslah melihat judul blog kamu atau melihat kode title='KSKS-BLOG (Header)'. Dari situ padangan matamu ke arah atas dan bawah sampai menemukan kode yang di atas yaitu <div dan kode yang di bawah yaitu </div>

Untuk meletakkan Menu Navigasi di atas header, letakkan kode menu navigasi yang sudah kamu salin di atas kode <div id='header-wrapper'>. Sedangkan untuk meletakkan Menu Navigai di bawah header, letakkan kode menu navigasi yang sudah kamu salin di bawah kode </div>.

Meletakkan Navigasi di atas wilayah posting, cari kode di bawah ini:

<div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
</div>

Letakkan kode yang sudah kamu salin di bawah kode <div id='main-wrapper'>.

Sekarang coba klik pratinjau. Jika sudah puas simpan template kamu, lalu masuk ke tahap penyesuaian dan pemahaman lebih lanjut.

PENYESUIAN DAN PEMAHAMAN LEBIH LANJUT.

Setiap unit meu di definisikan sebagai:

<li><a href='#'>Nama Menu'</a></li>
kamu bisa dengab mudah melihat nama menu yang akan tampil nantinya dengan melihat teks di dalam wilayah kekuasaan <a href='#'>teks. . .?</a>

Oleh karena itu:

(Sebagai contoh) untuk membuat menu Beranda, gantilah simbol # dengan URL homepage blog kamu, lalu gantilah Nama Menu menjadi Beranda sehingga menjadi seperti ini:
<li><a href='ksks-blog.blogspot.com'>Beranda</a></li>

Semoga bermanfaat :)

Cerita Singkat KSKS-BLOG Membuat Template Blog Sendiri

2013-06-30T07:05:00.000-07:00

Setelah sudah lama tidak ngeposting dan akhirnya rank yang tadinya paling bawah menjadi lebih paling bawah :d hehe...
Malam-malam begini waktu yang nganggur akhirnya di gunakan untuk ngeposting blog sambil ditemani cemilan+kopi :d

Oke lanjut ke Cerita KSKS-BLOG Membuat Template Blog Sendiri :)

Mungkin banyak sahabat-sahabat saya yang bertanya tentang template blog saya ini...
Banyak yang tanya "Mengapa kok template blog KSKS-BLOG menjadi berubah tampilan bagus sekali?". Saya rasa tampilan blog saya cukup sederhana dan masih di titik terendah tidak seperti blog-blog yang lainnya.
Saya bukan ahli IT, Blogger dll yang bisa membuat template sendiri seperti ahli IT, Blogger yang lainnya. Template blog saya ini hanya meniru dari template blog yang lain. Mungkin sebelumnya saya meminta maaf yang telah meniru blog-blog kalian :) saya hanya seorang yang bukan ahli Blogger, maka dari situ saya suka meniru template-template blog yang lain. Pada saat saya membuka Template > Edit HTML saya mulai terkejut karena saya tidak tahu apa ini dan tidak mengerti cara memodifikasinya. Karena saya belum mengerti apa-apa tentang blog dari situ saya mulai mencari template blog download-tan yang dari google. Dan saya mulai membaca-baca tentang blog di blog orang lain. Hasil dari membaca-baca itu saya mulai sedikit mengerti cara memodifikasinya. Saya perlahan-perlahan membaca tentang blog dan akhirnya menjadi bukit. Dan sekarang saya sudah mulai mengerti tentang blog, tetapi masih pemula :) Ya mungkin Blog saya ini bisa bermanfaat untuk yang lain :) Berkat blog-blog yang lain saya bisa menjadi seperti ini :) Terima Kasih untuk blog-blog yang lain yang sudah membuat saya mulai leluasa di dunia Blogger:) Keep Posting :)

Cara Menambakan Emoticon Pada Posting Blog

2013-06-28T18:44:00.003-07:00

Setelah mendapatkan kejutan yang menarik pagi hari tadi, dan saya juga senang karena Raksasa Jerman Bayer Munchen berhasil mempermalukan Barcelona dengan skor 3-0 tanpa balas dengan begitu Agregat menjadi 7-0 ...
Ok masuk pada pembahasan utama, disini saya akan share cara memunculkan emoticon pada halaman posting sehingga postingan menjadi lebih hidup dan menarik tentunya.. Ini merupakan tutorial lanjutan dari "Menambahkan Emoticon Pada Komentar" sebenarnya mudah saja, jika anda sudah menambahkan emoticon pada komentar blogspot dengan tutorial lanjutan tersebut tidak perlu lagi menambahlan javascript emoticon untuk posting blog, kita hanya tinggal menambahkan kode css ".post-body" saja pada javascript untuk memunculkan emoticonya agar emoticon juga tampil pada postingan.
Kurang lebih seperti ini:


<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {emoticonx({
emoRange:"#comments p, .post-body, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Klik untuk melihat code!",
emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."
})
});
//]]>
</script>

Tambahkan tanda koma ( , ) diakhir .post-body sehingga menjadi seperti ini .post-body,

Kemudian tambahkan kode css berikut ini dibawah kode ]]></b:skin>

<style>

.emo.delayLoad { display:inline; text-align:left; margin:0; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; border:none; background-color:transparent; width:auto; height:auto; border-radius:none; -moz-border-radius:none; -webkit-border-radius:none }

</style>

Tutorial diatas untuk anda yang sudah menerapkan Emoticon pada komentar dengan mengikuti tutorial "Menambahkan Emoticon Pada Komentar Blogspot" dari blog ini ataupun dari MKR-Site.

Tutorial 2

Bagi anda yang hanya ingin menambahkan emoticon pada postingan saja, ikuti langkah-langkah berikut ini:
1. Letakkan kode jquery berikut ini diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Itu merupakan kode jQuery, jika pada template anda sudah terdapat kode jquery maka tidak usah ditambahkan lagi, atau anda juga bisa mengganti jQuery yang ada pada template anda untuk jaga-jaga kalau nanti emoticonya tidak bisa muncul.
Ingat !! saya tidak bosan-bosanya untuk mengingatkan bahwa pada setiap template hanya boleh terdapat satu jQuery-min dan satu jQuery-UI-min.

2. Letakkan kode CSS berikut ini dibawah kode ]]></b:skin>

<style>

.emo.delayLoad { display:inline; text-align:left; margin:0; padding:1px; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border:none; background-color:transparent; border-radius:none; -moz-border-radius:none; -webkit-border-radius:none }

</style>

3. Letakkan kode berikut ini diatas kode </body>

<script type='text/javascript'>

//<![CDATA[

// kode js untuk menampilkan emoticon

jQuery(document).ready(function () {emoticonx({

emoRange:".post-body, div.emoWrap",

})

});

//]]> 

</script>

<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>

Simpel kan?? hanya saja saya tidak menggunakan hosting untuk java scriptnya karena itu bisa terhapus kapan saja, saya lebih memilihnya untuk menguraikan saja kodenya dan meletakkannya didalam template jadi lebih aman..

Semoga bermanfaat :)

Cara Menambahkan Emoticon Pada Komentar Blogspot

2013-06-28T18:39:00.001-07:00

Menambahkan Emoticon pada komentar bertujuan agar komentator bisa mengekxpresikan diri dengan emoticon yang ada agar suasana pada saat berkomentar menjadi lebih hidup. Kode Emoticon dari MKR-Site dan saya beri sedikit tambahan CSS agar lebih menarik;
Berikut cara memasang Emoticon pada komentar Blogspot:
1. Login Akun Blogger anda
2. Pada Dashboard pilih Template » Edit HTML
3. Cari kode </body> kemudian letakkan kode berikut ini diatasnya!


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

<script type='text/javascript'>

//<![CDATA[

jQuery(document).ready(function () {emoticonx({

emoRange:"#comments p, div.emoWrap",

putEmoAbove:"iframe#comment-editor",

topText:"Klik untuk melihat code!",

emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."

})

});

//]]>

</script>

<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>

</b:if>

4. Untuk lebih menarik tambahkan kode CSS berikut ini dan letakkan diatas kode ]]></b:skin>


.emoWrap {

  position:relative;

  padding:10px;

  margin-bottom:7px;

  background:#fff;

/* IE10 Consumer Preview */ 

background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);

/* Mozilla Firefox */ 

background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);

/* Opera */ 

background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);

/* Webkit (Safari/Chrome 10) */ 

background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));

/* Webkit (Chrome 11+) */ 

background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);

/* W3C Markup, IE10 Release Preview */ 

background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);

  border:3px solid #860000;

  -moz-border-radius:5px;

  -webkit-border-radius:5px;

  border-radius:5px;

  box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);

  -moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);

  -webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);

  box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);

  font-weight:normal;

  color:#333;

}

.emoWrap:after {

  content:"";

  position:absolute;

  bottom:-10px;

  left:10px;

  border-top:10px solid #860000;

  border-right:20px solid transparent;

  width:0;

  height:0;

  line-height:0;

}

5. Simpan Template

Pembaharuan tutorial 22 Maret 2013
» Jika di klik emoticonnya dan kodenya tidak muncul.. ganti jQuery pada template anda dengan jQuery dibawah ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Letakkan jQuery tersebut diatas kode </head>
NB: Tidak boleh lebih dari satu kode jQuery pada template.

Update Artikel, 11 April 2013
// Cara menambahkan/mengganti emoticon yang sudah ada..
Syarat: Harus pasang emoticon terlebih dahulu dengan mengikuti cara diatas.

1. Ganti kode <script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>
dengan kode yang sudah di uraikan seperti ini


<script type='text/javascript'>

//<![CDATA[

window.emoticonx = (function () {

    var b = function  {

        var j = m || {}, l = j.emoRange || "#comments p, div.emoWrap",

            k = j.putEmoAbove || "iframe#comment-editor",

            h = j.topText || "Klik untuk melihat kode!",

            a = j.emoMessage || "Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon.";

        $(k).before('<div style="text-align:center" class="emoWrap"> :)            :&gt;)                      <br/><b>' + h + "</b><br/>" + a + "</div>");

        var i = function (c, d, e) {

            $(l).each(function () {

                $(this).html($(this).html().replace(/<br>:/g, "<br> :").replace(/<br>;/g, "<br> ;").replace(/<br>=/g, "<br> =").replace(/<br>\^/g, "<br> ^").replace(c, " <img style='max-height:24px' src='" + d + "' class='emo delayLoad' alt='" + e + "' />"))

            })

        };

        i(/\s:\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmkKBeCyhLRC0y4nAeLmjLK4Sl1rW8znLz7ixait47sMAiYlxWU2zVevtYf_wnBL1bZLvn5HRdTc_EismWRdw4Kq-I8QA64llHwyxfbBDxv0f2YajrGIF2QF4LUN9cMC9_xhRL4RunDU/s36/03.gif", ":))");

        i(/\s;\(\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaQ9grsPp1E3opG6jX_EJL2dFtf-uHEsbXXwl_y9DsV9ULyMcpmu1V_59GmDjILo4_WtJg9e6bbxcgT97JCTg68u3egsyL9HV6uoVEf0YGBPYn7GXEQ7cQgzQOh4vYxfr9rBkyntbqwT4/s47/06.gif", ";((");

        i(/\s:\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikbqJmid0kz8y60BqDvrIq0VgHrGWwU1qk8bpkZsJwiCHgMOypm_m5lKRvR-CPHVv6zVgYSEdqn8MvQMB2wgd6Hw6dvBU2tZsQBVXiiYZZ8n2o9Mp_BqGYEOHH6s8CVjbfI_2j1FjqDUI/s36/01.gif", ":)");

        i(/\s:-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_T_PSL0zhTY6bEEXR251KGeplAdvYnymNevXOis5j_bnjH2b5QqbNlbEcqmN8VTbSfqPav83agK_n9GhBFuLIG9h8bXwFQEYh3firZPxXQEO_eGkPXGTHMJpxqORhdULeAA9NKBwN7FU/s36/02.gif", ":-)");

        i(/\s=\)\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnseLjmj7I0tBo1VjeiZTMR4zItU3vmY9wVH0FOViDUSx6b7qFGwh7tAxdOTISKGT8nh1Cc41daq3VngAgUOEahHyso64_FVRZf5_zsVBMEp4-jo_R35xRSmLXU7rslqmI2OxVcibLTak/s36/03a.gif", "=))");

        i(/\s;\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6gdc6tQdnATDPa1AgLXI4LlsBGCgL1C0J4LAOxrwN1JrE97By6WRXnwUxCAC4qG69ImJT8BhOUWxldIq1dbhrz-RqqPjzrkKWPipm5JT6SGLgPsw2fnHd9jiOXPp3JC4amWL4Hwy8oWw/s36/04.gif", ";(");

        i(/\s;-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis5j8WEiYh8yusSQBdlswi2pIqMZuOwotg9wYui8kiolrdOh-jLKSOc0vcr0YEG4QY7UkgYYLjD8ZpOccd2skP4MLD1cmwejahJwiVS1ARQPyKnZp_LQkkkSL3W0oqREKHWCmZclMlUj4/s36/05.gif", ";-(");

        i(/\s:d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCox1Fhh1YLPNzQ0LMcKohDEB45hqinR2pApnqeDhyphenhyphenhbjOcy_ZmLe08veGfxCkoB2ih5md9OTzRQ9cac_JP2_PmlekFyrwjiOgvGuBpsxUSIY9pfp0h04nvySe52Cr2rX_ERqNHr0Hpbg/s36/7.gif", ":d");

        i(/\s:-d/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzIqf5lxG7SiT8u5SYz3okYf2XitUVrygj0pdFWWbE51DKU8LwtEu1b5cc6eOHhLfV1E7JbURAfaeU5v5mojgw0CpXzzncXSvT6yEbzFRMmf-Li4NxAExciySuQ9jkcd1kvoyyavbahug/s36/8.gif", ":-d");

        i(/\s@-\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIByqQbCiJBekkwk5JIsh3S8eEry8igH1b5PUK8n2sDhboHC2lt5Ju3_r1pLczq0dtMXICWUfRVv3Zua6rc529FTMe3jiFPds2N4mAG5Ga1ToD6B3AKNE2_9RgHBQxqJVN2tEaVS9sFxY/s36/09.gif", "@-)");

        i(/\s:p/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXjS5-FWsGg0NaY4OQ5j5xLa6AHw-yzPvhW-8mcShIQJr9IE4BBRL4Og4qWxqDT2AyT8FkNT6x_zdCm2zYTiItYRqsbundM0TRuxdr07JQaSOoziwXRsQuG0MqLEfGgDyJ3xEeQc2exQ/s36/10.gif", ":p");

        i(/\s:o/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgviDFsHEpKMX1pXVPEYAGkSaNi3A2m1H1vMlL7VKMheCLZcKlJGH_Ss8NnHwFxuBP7YrSFx0nvplmABIRoi4uUHJM5-SOPIKyfMz0SKrsvUD16Pq5cjpg09ttffhxeAEXXp8YEDYWOqbE/s36/11.gif", ":o");

        i(/\s:&gt;\)+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi84J78J-rCjk_2KZRIZlWLWjaVW6JrkpSmBtZt49bS95t9ZDxKW6JFRu-VeNeBD2hqwF4LM7GB4ZufdYb5Pn4M62fQR2brQCMck_00bNRiyY1si8LmvBwGxsCcAEYgUpnTXBLmsqU4wtQ/s36/12.gif", ":&gt;)");

        i(/\s\(o\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vA7A5EZfhmi1r0NtTJWNXTXw_F25PJQmwENi_DZx0dxA6nXpB3tEV9Rb8i_4oV1mCy7NqLqn21ANeycpX8SxThvehOC9I9K79CNS6hx4TPJuij_v8ug43lOlfP6yz9ZTvE6T449J78Y/s36/13.gif", "(o)");

        i(/\s\[-\(+/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhteRTXZL80Xt41Ctw-M0tvWlkz7sPEjGlCmEC9-64AU-SGZS91Re1koQ5jLq_H-bsxPgVT7lHeP4p0B3LwHHuMGB2o0V7PYd1t8Ml00qVtkf3uJWbMYnxwTAqXbTRSkas-OdliCVXf7x4/s36/14.gif", "[-(");

        i(/\s:-\?/g, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg21lFgo93txKko9jAvOrSX_hCDsQRVYxQq102x8nZc3IZt7mXjaijvuK57LVa_1pL4vS-ERuwUqm0u5P1u0Sa1RpnjpEoWLuGx8ADc3Se5rxmbYffMifLESwox-EYehd3peaiBumPyS-c/s36/15.gif", ":-?");

        i(/\s\(p\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAbfjxK1m1xEyPvKrfExrL6pqH92kGZ61m3weFdAYDNfxkUaJZwavRSFQcV9Gg74v5cNLygEvNDEcQg0Leacx8vM4vznT-dVBR-uRa2dyHJyd38zndXrbWtg_5PsYwrFHkZmZ1ZdZnVB4/s36/16.gif", "(p)");

        i(/\s:-s/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEift5rsstJeJkVfDKem2RblW1CtONqQ8RkViIhsnbBDmtIuspTboAZGfB7vNRPP1xsNAWou7mYV8QTMwGybYqipowEvJrrSX9CAN8_U-Y76oB3N0KtVb1VEOIVnDY141aziX2wHaf_hOI8/s36/17.gif", ":-s");

        i(/\s\(m\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMCem2TGjUGpPd6-FgzIx_fWUtC2zYVXyaHdskthAX73QmeR2jX8InQmz7jX4nKvrlZVNokwmuqJFGIGHu-AjrxsOOAn8eFu2IjvXH01CHSxqddM1YxUVoqnwjQ-BUbZbuvsUTmo44LEE/s36/18.gif", "(m)");

        i(/\s8-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzKJe8dtPXNGBs5-R732DIH7dI0iNFdzOnlRVplvbGaZcwi-DvHU6J__UMtiJ5CL83dwgxqJ_9QNkuUZ8Vz42rzEAb5Kepb9d3zcQW34r6rOWRWLOK4VYRBspKBekt1go32X_gRaoR0fA/s36/19.gif", "8-)");

        i(/\s:-t/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Gv-AD4IWbdMmdqoAs8tAYuZz618jQ7DYp1W0VipUvEGvAAUNQ5hPVi7nki5BMwqsoxUfqMFTvFDCiUJHN11MdRmLSkqpNNs2AXIkOr-yavi48si07T_UTfZ0CE9072MRK3C7jLJpc1U/s36/20.gif", ":-t");

        i(/\s:-b/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3bOMEHE9kzovTVlOr9LulCpnivG5FgthDzpMqAqYxCEFrhJhIWrsS_pOfl80UHl295pAWakbDPO5iATfUfvtfVdrHd8HqJ56My3TqxYfPDzbMn_u5G2887lpuvC8-bSprT3orSG4nA34/s36/21.gif", ":-b");

        i(/\sb-\(+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1KgDyWvg_jJewSb7I4dx3_lv7UYMvf0x9UfktFxff9C718wu49d8yLE03CXnD3NLYJ8C7ILhWnp99tsOqE18r9tHdiejBoPPA9UERUObbuNOtYennNimFpg3Dd5bSOX8VHxruftmUSCU/s35/22.gif", "b-(");

        i(/\s:-#/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcxdER_ojh_tmcj8FkEZ8neWamllhUw8BMu7en60VP6gsvyvYKQd1KNO2fmXo1iRK87XN6EbYEcKgAHsRjP9GO3R23Bb8lVNYimKvDtnWQGuhizJEM9yQQnVEBf8u0KfSThWRgTC2271U/s36/23.gif", ":-#");

        i(/\s=p~/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWkSBTQiae_s-2m2fTNRl0T7vrdjEp7HsgJzq6YVMvZT25kgBcgsshnWe8MWJ9BxGv8oUu-KMDa0vBj1KmgJbX4ydSc5zz2RHZs7RTyZo6lJPzACMgS4zlnStSeGYXLsCDGKzAM_injWU/s36/24.gif", "=p~");

        i(/\s\$-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4ymDeFwjMXDero-KVsmlaP-iRy1YFo5Dq9N7AciL18PaZ64wYSIBvTJ4NmvBvM_3hhCyb3g02Rwy-Lzv1QL4lV_a1cii3RKwv6XiOSXV_7pFL7DRRBwE2Z1JKz-7e6hgzfarnH2z2ek/s36/25.gif", "$-)");

        i(/\s\(b\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3WJLsRp04b9lgkqUaZeVOQ2daAammu-gw2JvXlW0apsFbvI16MzUZftsqjIdqjoTeYzS_fpKymQEvPxGbPMob-9-K9KjFuxoFhYKS-uDu-HZDcVUdYAGG_tX4NjHbbvsb4DCMsIhlpTw/s36/26.gif", "(b)");

        i(/\s\(f\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhko95gLqpICyqMYnWblC-liR2zIZeC4Lpbj2Z7TlipfZf0PBEuaxuE-sGxTCRzbo6WBD8pvKQaQR9jIgwfyv_Rn3fpOtVeo4zP_JzLeB6YJWoCnJCYc37VHIy1HJae9QIQ_-ia7CiIeks/s36/27.gif'", "(f)");

        i(/\sx-\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5B2xsFA67GeY6ush4oGxJeUx9DMA_Y4RGF66Kr0-IeBqYZuAXiet-xeXfLsFsP7Rc_OMT1Cj01cNGsBFSKd66avbYhTJhYhTAH1xjNFsC9kIWuh8RIsqDmWjCvsbXlXx6ManTI9SP7tY/s36/28.gif", "x-)");

        i(/\s\(k\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilrX1Vkx24ZOQUsYYHXayd0i7GluItMzOQx2ph_P_lkpAPDpVlnMA12NFpfc3avvKlr42U7lvURECaNUWiGog4m8ChuLvJtX0-5kdhhUEGlKyq54viCvaDiTr9NxER6Sc36pYjEOdi18s/s36/29.gif", "(k)");

        i(/\s\(h\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjACJZ7PrqPmR38kve88CESnT6ShFdXSnTpumWYYz-N86emihunDVtSE7KooYcz94BFgemIhY-cp0vyAz5KaZ9mxiHbyETJL1tz5rkLhSESlN-t6WsgLwhld8Kd2Vfbi6VSS1nYYX-6MZc/s36/30.gif", "(h)");

        i(/\s\(c\)+/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zBipJczxQNgB7gSE1NnITrjNGmcfAJuA0sEDRZY9Q3b-sF5oEInzRPSEttNjIOLrWbUwhWd381VzuQ-WSXDOsgd4jQZ6wRMkM_jw4DLyukC9zjVi4ae_GHNKKPrajp22aiLM3HeFwEY/s36/31.gif", "(c)");

        i(/\scheer/ig, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1nhpakyNzH7_Q48kxKQt7vGS_BqCcd9VpwkrBmBECYdFhgURc9Q5y_ksJTFGJvygZy8FOm-XXmPP5-nV4zdNA5XNOssQHXv4lQs1sPf0ufKu-50bahJfxBA1nwhQetxwZ8Tn1vRZEzGA/s36/32.gif", "cheer");

        $("div.emoWrap").one("click", function () {

            if (a) {

                alert(a)

            }

        });

        $(".emo").css("cursor", "pointer").live("click", function  {

            $(".emoKey").remove();

            $(this).after('<input class="emoKey" type="text" size="' + this.alt.length + '" value=" ' + this.alt + '" />');

            $(".emoKey").trigger("select");

            c.stopPropagation()

        });

        $(".emoKey").live("click", function () {

            $(this).focus().select()

        })

    };

    return function (a) {

        b(a)

    }

})();

//]]>

</script>

2. Kode yang berwarna MERAH itu merupakan simbol untuk emoticon. Jika ingin ditambahkan beri jarak atau satu spasi dibelakang simbol yang ada. Contoh seperti ini


:)            :&gt;)                      (12) (13)

angka (12) dan (13) merupakan simbol untuk emoticon baru.
3. Lihat kode yang berwarna BIRU, itu merupakan kode emoticon. jika ingin menambahkan emoticonya lihat contoh seperti ini


        i(/\scheer/ig,  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1nhpakyNzH7_Q48kxKQt7vGS_BqCcd9VpwkrBmBECYdFhgURc9Q5y_ksJTFGJvygZy8FOm-XXmPP5-nV4zdNA5XNOssQHXv4lQs1sPf0ufKu-50bahJfxBA1nwhQetxwZ8Tn1vRZEzGA/s36/32.gif",  "cheer");

        i(/\s\(12\)+/ig, "URL EMOTICON ANDA", "(12)");

        i(/\s\(13\)+/ig, "URL EMOTICON ANDA", "(13)");

(12) dan (13) itu merupakan simbol untuk memunculkan emoticonya dan ganti URL EMOTICON ANDA dengan URL gambar emoticon anda.

Silahkan anda sesuaikan sendiri, Semoga Bermanfaat..:)

Cara Membuat Sidebar Accordion dengan jQuery

2013-06-28T18:34:00.000-07:00

Setelah kemarin membahas tentang "Membuat Daftar Isi Accordion dengan jQuery", kali ini say akan membahas cara Membuat Sidebar Accordion dengan jQuery. Mungkin ini bisa jadi solusi bagi anda yang mempunyai banyak widget pada blog, karena kalau mempunyai banyak widget tentu template menjadi tinggi, nah dengan tips ini kita bisa meminimalisir hal tersebut. Seperti contoh gambar diatas.

Berikut langkap Membuat Sidebar Accordion dengan jQuery:
- Masuk pada bagian Template » Edit HTML
Kemudian Letakkan kode berikut ini bawah kode ]]></b:skin>


<style>

#sidebar-wrapper h2 {

  margin:0 2px;

  padding:3px 7px 3px 13px;

  text-shadow:0 1px 0 black;

  background-color:#AD3000;

  border:1px solid #ccc;

  font:normal bold 12px "Trebuchet MS",Trebuchet,sans-serif;

  color:#fff;

  text-transform:uppercase;

}

#sidebar-wrapper h2:hover {

  margin:0 2px;

  padding:3px 7px 3px 13px;

  background:#860000;

  font:normal bold 12px "Trebuchet MS",Trebuchet,sans-serif;

  color:#fff;

  text-transform:uppercase;

  border-bottom:1px solid #404040;

}

#sidebar-wrapper h2.active {

  background-color:#B60000;

  color:#FFF;

}

#sidebar-wrapper .widget {

  margin:0 0;

  padding:0 0;

}

#sidebar-wrapper .widget-content {

  padding:5px 5px 5px 13px;

  max-height:auto;

  overflow:auto;

}

#sidebar-wrapper1 .widget-content ul li {

  border-top:1px solid #444;

  border-bottom:1px solid #222;

} 

</style>

- Selanjutnya Letakkan kode berikut ini diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

$(function() {

    $('#sidebar-wrapper .widget-content').hide();

    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');

    $('#sidebar-wrapper  h2').css('cursor', 'pointer').click(function() {

        if($(this).next().is(':hidden')) {

            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');

            $(this).toggleClass('active').next().slideDown('slow');

        }

    });

});

//]]>

</script>

-Simpan Template.

Semoga bermanfaat :)

Cara Memasukan Item Pada Komentar (Video, Gambar, Emoticon, Kode)

2013-06-28T18:30:00.000-07:00


<script type='text/javascript'>

//<![CDATA[

jQuery(document).ready(function () {emoticonx({

emoRange:"#comments p, .post-body, div.emoWrap",

putEmoAbove:"iframe#comment-editor",

topText:"Klik untuk melihat code!",

emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."

})

});

//]]>

</script>

Tambahkan tanda koma ( , ) diakhir .post-body sehingga menjadi seperti ini .post-body,

Kemudian tambahkan kode css berikut ini dibawah kode ]]></b:skin>

<style>

.emo.delayLoad { display:inline; text-align:left; margin:0; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; border:none; background-color:transparent; width:auto; height:auto; border-radius:none; -moz-border-radius:none; -webkit-border-radius:none }

</style>

Tutorial diatas untuk anda yang sudah menerapkan Emoticon pada komentar dengan mengikuti tutorial "Menambahkan Emoticon Pada Komentar Blogspot" dari blog ini ataupun dari MKR-Site.

Tutorial 2

Bagi anda yang hanya ingin menambahkan emoticon pada postingan saja, ikuti langkah-langkah berikut ini:
1. Letakkan kode jquery berikut ini diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

<style>

.emo.delayLoad { display:inline; text-align:left; margin:0; padding:1px; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; border:none; background-color:transparent; border-radius:none; -moz-border-radius:none; -webkit-border-radius:none }

</style>

3. Letakkan kode berikut ini diatas kode </body>

<script type='text/javascript'>

//<![CDATA[

// kode js untuk menampilkan emoticon

jQuery(document).ready(function () {emoticonx({

emoRange:".post-body, div.emoWrap",

})

});

//]]> 

</script>

<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

// kode js untuk menampilkan emoticon

jQuery(document).ready(function () {emoticonx({

emoRange:".post-body, div.emoWrap",

})

});

//]]> 

</script>

<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript

Halaman Utama dan Halaman Label Hanya Tampil Judul Posting

2013-06-28T18:26:00.002-07:00

Halaman Utama (Homepage) dan Halaman Label (Label Page) merupakan halaman yang menampilkan beberapa posting dengan ringkasan dan juga menampilkan gambar posting tersebut. Terkadang untuk membuka sebuah halaman utama atau halaman label waktu yang dibutuhkan cukup lama karena harus menampilkan gambar posting dengan ukuran tertentu (bila ada gambarnya). Tentu bagi kamu yang memiliki koneksi internet yang (maaf) agak lambat untuk membuka halaman label waktunya cukup lama apalagi kalau menampilkan lebih dari 10 posting yang mengandung gambar, sampai sedikit membuat kesal.. seperti saya tidak sabaran.. . Untuk mengatasai masalah tersebut kita hanya sedikit memasukan beberapa Tag Conditional dan kode CSS sehingga pada waktu membuka halaman utama (homepage) dan halaman label hanya menampilkan judul posting yang akan mengurangi waktu loading ketika membuka halaman tersebut.

Sebenarnya bukan hanya pada 2 halaman tersebut tetapi juga pada halaman arsip (archive page) dan halaman pencarian (search page).

Langkah langkah penerapanya:

> Login akun Blogger anda.
> Di halaman Dasbor, anda pilih Template.
> Kemudian pilih Edit HTML
> Beritandacentang pada Expand Template Widget

> Cari kode <b:include data='post' name='post'/>

lalu ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>         
<a expr:href='data:post.url'>   
<div style='padding:5px 0 5px 10px;box-shadow:5px 6px 2px #808080;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;margin-bottom:2px;color:#333;text-shadow: 1px -1px 0px #E0E0E0;font-size:20px;'>
<data:post.title/></div></a>     
<b:else/>         
<b:include data='post' name='post'/>     
</b:if> 
<b:else/>     
<b:include data='post' name='post'/> 
</b:if>

kode ini merupakan untuk menampilkan hanya judul posting pada semua halaman kecuali halaman posting dan halaman statis.

Kode yang warna hijau merupakan kode CSS silahkan kamu sesuaikan sendiri.

Kalau kamu hanya ingin merubah halaman utama atau halaman label saja ganti kode Tag Conditionalnya saja.

Untuk Halaman Utama

ganti kode

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

dengan kode dibawah ini


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

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

dan Untuk Halaman Label saja

ganti dengan kode dibawah ini


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

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

Semoga Bermanfaat :)

Cara Membuat Tombol & Modif didalam pesan komentar dan di Blog

2013-06-28T18:15:00.000-07:00

Membuat Tombol & Modif didalam pesan komentar dan di Blog contoh : Tombol Konversi , OOT , Top Komentator , Cara berkomentar . "

Selamat Sore teman2 semua .. kali ini saya akan share Cara Membuat Tombol & Modif didalam pesan komentar dan di Blog . Apa itu Tombol didalam pesan komentar di Blog ?
demo tombol + modifikasi ada di blog saya ini :D atau lihat saja gambar diatas :)

Langkah 1 ~
Dalam langkah pertama ini , sobat harus membuat pesan diatas Form Komentar Blogger .
dengan cara Setelan -> Pos dan Komentar -> Pesan Formulir Komentar

Langkah ke 2 ~
Copy CSS dibawah ini dan masukkan tepat di atas ]]></b:skin>

#dtkmodif-comment{
position: relative; 
background:#BFE3FE;
width:100%;
padding:10px; 
font:normal 12px trebuchet ms; 
text-align:justify; 
border:3px solid #00477D;
margin:0 10px 10px 0; 
margin-top: 10px; 
line-height: 1.3em; 
} 
#dtkmodif-comment::after, #dtkmodif-comment::before { 
top: 100%; 
border: solid transparent; 
content: " ";
height: 0; 
width: 0; 
position: absolute; 
pointer-events: none 
} 
#dtkmodif-comment::before { 
border-top-color: #00477D; 
border-width: 15px; 
left: 10%; 
margin-left: -36px 
}
#dtkmodif-comment::after { 
border-top-color: #BFE3FE; /* Samakan dengan warna background */
border-width: 9px; 
left: 10%; 
margin-left: -30px
}

.tombol-konversi {
border: 1px solid #555;
color: #111;
cursor: pointer;
font-size: 13px;
font-weight: normal;
margin-top: 15px;
margin-bottom: 10px;
margin-right:5px;
padding:4px 10px;
text-decoration: none;
text-shadow: 1px 1px 0 #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 0 #ffffff;
box-shadow: inset 0 1px 0 0 #ffffff;
background: -webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );
background: -moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #ededed' ,endColorstr=' #dfdfdf' );
background-color: #ededed;
}
.tombol-konversi:hover {
text-shadow: 1px 1px 0 #f0f7ff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: inline-block;
-webkit-box-shadow: inset 0 1px 0 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 0 #ffffff;
box-shadow: inset 0 1px 0 0 #ffffff;
background-color:#FF0000;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#cde1fc', endColorstr='#90c3eb');
background-image:-webkit-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:-moz-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:-ms-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:-o-linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
background-image:linear-gradient(top, #FE8080 0%, #FEBFBF 50%, #FE8080 100%);
}

Langkah ke 3 ~
Cari kode <data:blogCommentMessage/> kemudian ganti dengan kode dibawah ini

<div id='dtkmodif-comment'><span><data:blogCommentMessage/></span><a class='tombol-konversi' href='https://dtk-site.googlecode.com/svn/trunk/Konversi%20Kode%20HTML.html' onclick='window.open(this.href, &quot;popupwindow&quot;, &quot;status=0, height=420, width=400, resizable=0, top=50, left=100&quot;);return false;' target='_blank'>Konversi Kode di Sini !</a></div>

kode tersebut di bungkus dengan tag span kemudian link kode konversinya di letakkan setelahnya .
biasanya ada 4 buah kode ini <data:blogCommentMessage/> . Lebih baiknya diganti semua saja .

semoga bermanfaat :)

Template Modifikasi Ala KSKS-BLOG

2013-06-01T19:49:00.001-07:00

Hal-hal yang sangat ditunggu oleh saya yaitu Memodifikasinya template bawaan blogger. Kali ini saya akan memberikan template bawaan blogger yang sudah saya modifikasi dan anda tinggal mengedit-ngedit menu-menunya sesuai keinginan anda sendiri. Di bawah ini beberapa foto Template bawaan blogger yang sudah saya modifikasi, Cekidot:

Atau melihat demonya Disini

Beberapa Fitur yang dapat saya jelaskan :

-ReadMore Versi Lama

-Terdapat Menu dibawah Header

-Menu Pull Down

-Navbar yang sudah diedit menjadi Menu

-Navigasi Halaman

Link Download Template bawaan blogger yang sudah saya modifikasi : Download

NB:

-Buka file dengan Wordpad atau sejenisnya

Cara Membuat Tanda Anak Panah Di Sebelah Menu Utama

2013-06-01T05:00:00.002-07:00

Gambar tanda anak panah seperti yang tampak pada bilah menu di atas, pada umumnya dipakai untuk menandai bahwa menu yang dimaksud merupakan sebuah menu pull down yang memiliki sub atau tingkatan level berikutnya.

Langsung saja kita ke pokok pembahasannya, yaitu mengenai Cara Membuat Tanda Anak Panah Di Sebelah Menu Utama.

1. Buka Edit Template dengan cara mengklik menu Template > Edit HTML > Lanjutkan > Expand Widget Template

2. cari kode ]]></b:skin> dan kemudian sisipkan kode CSS berikut tepat di atasnya kode ]]></b:skin>

.lambang-panah {
position: relative;
top: -1px;
font-size: 0px;
height: 0px;
line-height: 0;
widht: 0px;
border-widht: 4px 4px 0px;
padding-top: 1px;
left: 4px;
border-style: solid dashed dashed;
border-right: 4px dashed transparent;
border-color: #ffffff transparent transparent;
}

3. Cari kode HTML dari menu yang akan ditambahkan dengan tanda anak panah di sebelahnya kemudian tambahkan kode <span class="lambang-panah"></span> dalam kode yang dimaksud. Sebagai contoh misalnya perhatikan kode HTML untuk menu 'Android' di bawah ini.

<a href="#">Android</a>

Kode HTML di atas hanya akan menghasilkan menu dalam bentuk tautan teks bertuliskan 'Android'. Nah, agar muncul tanda anak panah, maka tambahkan kode <span class="lambang-panah"></span> didalamnya sehingga menjadi seperti kode HTML dibawah ini

<a href="#">Android<span class="lambang-panah"></span></a>

Sehingga akhirnya kode tersebut akan menghasilkan tautan teks dengan tanda anak panah berwarna putih di sebelah kanan menu, seperti yang tampak pada gambar dibawah ini

4. Simpan Template

Semoga berguna dan bermanfaat :)

Cara membuat menu pada template bawaan

2013-06-01T03:40:00.002-07:00

Menu adalah elemen yang selalu dipasang Blogger diblognya. Menu untuk mempermudah mengunjungi blog yang kita inginkan dengan cara cursor disentuhkan pada salah satu Menu lalu tampil di bawahnya. Langsung simak Cara membuat menu pada template bawaan yang saya akan jelaskan. Jadi gini Cara membuat menu pada template bawaan :

1. Atur dan aktifkan setelan tab menu dan menu halaman yang akan di tampilkan. Caranya seperti berikut ini: 'Masuk ke Laman > Laman baru (terserah mau Laman Kosong atau Alamat Web > Tampilkan Lama Sebagai Tab atas' atau dengan cara gambar dibawah ini:

2. Buka edit template dengan cara "Template > Edit HTML > Centang Expand Template Widget"

3. cari kode ]]></b:skin> , gunakan CTRL+F supaya cepat dan mudah. Sisipkan kode CSS di bawah ini dan sisipkan diatas kode ]]></b:skin>.

.tabs-inner .widget li ul {
z-index: 100; position: absolute;
left: -999em; height: auto; margin: 0; padding: 0;
border: 1px solid #999999;
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
-moz-border-radius: 0px; -webkit-border-radius: 0px;
-goog-ms-border-radius: 0px; border-radius: 0px;
}

.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
left: auto;
}

.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
color: #ffffff; background: rgb(51, 102, 153);
}

.tabs-inner .widget li ul a {
display: block; padding-left: 1.25em; padding-right: 1.25em;
margin-left: 0px; margin-right: 0px; border: none;
color: #000000; background: rgb(243, 244, 246);
}

.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
width: 220px;
}

Anda dapat merubah beberapa kode diatas yang sudah saya tandai dengan sesuka anda.

4. Cari Kode <li><a expr:href='data:link.href'><data:link.title/></a></li> , agar lebih mudah dan cepat gunakan CTRL+F. Kemudian perhatikan kode <b:/loop> yang terdapat beberapa baris dibawah kode <li><a expr:href='data:link.href'><data:link.title/></a></li> . Sisipkan kode dibawah ini dan taruh di bawah kode <b:/loop> .

<li><a href='#'>Main Menu</a>
<ul>
<li><a href='http://robotic-android.blogspot.com'>Menu1</a></li>
<li><a href='http://robotic-android.blogspot.com'>Menu2</a></li>
<li><a href='http://robotic-android.blogspot.com'>Menu3</a></li>
< /ul>
</li>

Note: -Ubah tulisan yang berwarna merah dengan nama/URL yang anda inginkan.

5. Simpan Template

Note: -Klik gambar untuk mempebesar

Selamat mencoba :)