Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Membuat Pesan Formulir Komentar Keren dengan CSS

       Hallo Sobat KPC , Gimana Kabar Kalian Baik Bukan , Tidak Terasa 2012 Sudah Berakhir, Good Bye 2012 -_- Welcome 2013 , Posting ini Sekaligus Posting pertama Saya ditahun 2013 , Ok lah Langsung ke Inti pembicaraan , Pada Kesempatan kali ini Saya akan sharing tentang Blog yaitu "Membuat Pesan Formulir Komentar Keren dengan CSS" , Contohnya Seperti Ini
KevinPramanaCyber
Klik Gambar Untuk Memperbesar !

Ok Berikut Langkah-Langkahnya :
  1. Buka Dasbor Blog Kalian.
  2. Klik Template -> Edit HTML -> Centang "Expand Template Widget".
  3. Cari Kode ]]></b:skin> . Kemudian Pastekan Kode ini diatas kode tadi.
#threaded-comment-form p {
position: relative;
background: #0060FF;
border: 5px solid #FFF;
padding: 10px;
font-size: 13px;
line-height: 1.6em;
color: #FFF;
margin-top: 30px;
}
#threaded-comment-form p::after, #threaded-comment-form p::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none
}
#threaded-comment-form p::before {
border-top-color: #38F;
border-width: 15px;
left: 10%;
margin-left: -36px
}
#threaded-comment-form p::after {
border-top-color: #0060FF;
border-width: 9px;
left: 10%;
margin-left: -30px
}
Sisanya Kalian EDIT Sendiri Yaa !

     4.  Setelah Itu Cari Kode Yang Seperti Ini

<b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='500' id='comment-editor' name='comment-editor' src='' width='100%'/>

 Perhatian ! : Kode Yang Warna Hijau Itu Biasanya ada 2-3 . Tapi Cukup cari Kode yang Berada dibawah <b:else/>
    5. Setelah Ketemua Kalian Ganti Dengan Kode dibawah Ini
 <b:else/>
<div id='threaded-comment-form'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='500' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
   6. Terakhir ! SIMPAN TEMPLATE / SAVE TEMPLATE

Thank's To : System Of Blog

Solusi Mengatasi Edit HTML Yang Redirect Otomatis


    Hallo Sahabat KPC , Gimana kabar kalian , Sudah Hampir 2 Minggu saya Tidak mengurusi Blog ini, akhirnya di kesempatan ini saya bisa posting tentang "Solusi Mengatasi Edit HTML Yang Redirect Otomatis" , Yaudah Langsung ke Topik Pembicaraan. ! xD

     Apakah Kalian Pernah Mengalami Masalah Edit HTML blog?. Masalah ini biasanya terjadi ketika  Kalian  ingin Edit HTML blog yang menggunakan interface / tampilan blogger yang baru. Jika masih menggunakan tampilan yang lama (Old Blogger Interface) masalah ini tidak akan timbul. Dikarenakan Blogger akan mengupgrade semua tampilan blogger ke tampilan baru beberapa waktu kedepan, maka tentu ini akan menjadi masalah buat Kalian.

Masalah ini biasanya terjadi ketika sobat Edit HTML dan halaman tersebut akan langsung redirect ke halaman Blank atau ke url Token secara otomatis, contohnya seperti URL berikut ini :
http://LINKBLOGKALIAN.blogspot.com/b/app-preview?token=gA7xATkBgre.2nIJs5hQg2iRlapmgdg2qJA.Ff1M4i5gfdhh6gak8BIIaA
Penyebabnya :

Sesuai pengalaman Saya sebenarnya penyebab Redirect otomatis ketika Edit HTML ini sangatlah kecil yaitu template yang mengandung "Frame Breaker Image" atau "Kode Frame Gambar" seperti yang saya bahas pada Cara Hapus Google Images Frame dan Pasang di Blog . Jadi inilah satu-satunya masalah yang membuat Redirect otomatis tersebut.


Solusi Pertama Mengatasi Masalah Redirect Otomatis Ketika Edit HTML

Cara paling mudah dan praktis untuk mengatasi masalah ini  Kalian  hanya perlu menghapus "frame breaker image". Silahkan hapus seperti kode berikut ini di template blog Kalian.

<script language="JavaScript" type="text/javascript">
if (top.location != self.location) top.location = self.location;
</script>
Jika Kalian menggunakan Solusi Pertama ini ada Kerugian/Kerusakan yang  Kalian  dapatkan, yaitu ketika pengunjung datang ke Blog Kalian Melalui Pencarian Gambar maka pengunjung hanya akan melihat Frame Gambar Google


Solusi Kedua mengatasi  Masalah Redirect Otomatis Ketika Edit HTML

Solusi Kedua ini Bisa Kalian akali Ketika Sobat Ingin Edit HTML, Cara ini Sangat simple sehingga tdk Perlu menghapus "code frame breaker image". Tapi Cara Kedua ini harus Dilakukan Dengan CEPAT. Berikut caranya.

1. Biasanya Redirect Otomatis ke Halaman Blank/Token ini ketika Edit HTML Pada Posisi Seperti Gambar Berikut:
Klik Gambar Untuk Memperbesar

2. Nah, Ketika Masih dalam posisi seperti gambar di atas dan halaman tersebut masih loading page, Secepatnya Kalian Klik Tombol "X" atau "Stop Loading This Page" di Browser Kalian (Kalau Saya di Google Chrome) yang pastinya Sebelum Halaman tersebut Redirect ke Halaman Blank/Token.

3. Jika Sudah Berhenti , kalian bisa Klik "Edit HTML" seperti Gambar di Atas tadi , Kalau Masih Redirect ke Halaman Blank/Token , Ulangi Langkah ke-2.

4. Seharusnya dengan cara Pertama & Kedua ini , Masalah Redirect Otomatis di "Edit HTML" , Sudah Teratasi.


Semoga Solusi Mengatasi Edit HTML Yang Redirect Otomatis , Bisa Membantu Kalian Jika Kalian mengalami Masalah ini yang saya Juga Pernah alami.

Sumber

Cara Membuat Tempat Backlink Keren Di Bawah Postingan

Klik Gambar Untuk Memperbesar

     Hallo Sobat BK , sudah lama saya tidak Posting, sudah hampir 1 Minggu saya tidak Meng-Update Blog Ini, di Postingan kemaren saya sudah membahas tentang "Cara Membuat Threaded Comment (Fitur Reply)", dikesempatan kali ini kita akan membahas tentang "Cara Membuat Tempat Backlink Keren Di Bawah Postingan", Ya Udah Langsung ke inti Pembicaraan ! xD

  1. Login ke Blog Masing-Masing
  2. Klik Dasbor->Rancangan->Edit HTML-> Centang  Expand Template Widget
  3. Lalu Copy-Paste kode di Bawah ini di Atas kode ]]></b:skin>
#BKbacklinks{overflow:hidden;margin-top:5px;border:4px solid white;box-shadow:0 0 20px #000;border-radius:5px;height:45px;width:540px;-webkit-transition:all 0.4s ease-in-out;}
#BKbacklinks:hover{height:185px;-webkit-transition:all 0.7s ease-in-out;}
.BKbkl{margin-top:3px;float:left;color:black;width:517px;border:1px solid #fff;background:transparent;-moz-border-radius:3px;transition:all .9s ease-in-out;}
.BKbkl:hover{color:black;border:1px solid #fff;background:transparent;}
#BKbacklinksTitle{border:4px solid white;border-radius:5px;width:500px;height:20px;text-align:center;font-family:Black Ops One;font-size:20px;font-style:normal;font-weight:normal;color:White;margin:5px;padding:2px 10px;}

    4. Kemudian cari Kode <data:post.body/> ,dan Paste kode ini dibawahnya


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='BKbacklinks' style='margin-top:30px;'>
<div id='BKbacklinksTitle'>Backlink Please !</div>
<table border='0' height='140' style='margin-left:7px;' width='260'>
<tr><td>URL<br/><input class='BKbkl' expr:value='data:post.url' onclick='this.focus();this.select();' readonly='readonly' title='Press CTRL+C to copy' type='text'/></td></tr>
<tr><td>Code For Forum<br/><input class='BKbkl' expr:value='&quot; [URL=&quot; + data:post.url + &quot;]&quot; + data:post.title + &quot;[/URL] &quot;' onclick='this.focus();this.select();' readonly='readonly' title='Press CTRL+C to copy' type='text'/></td></tr>
<tr><td>HTML Code<br/><textarea class='BKbkl' onclick='this.focus();this.select();' readonly='readonly' style='height:18px;' title='Press CTRL+C to copy'><a expr:href='data:post.url' target='_blank'><data:post.title/></a></textarea></td></tr>
<tr><td/></tr>
</table>
</div>
</b:if>
    5. Terakhir "SAVE TEMPLATE" Cukup Mudah kan !

SELAMAT MENCOBA 

Cara Membuat Threaded Comment (Fitur Reply)

Klik Gambar Untuk Memperbesar

Hallo Sahabat BK, Sudah Lama Sekali Blog Ini Tidak Saya Update , Sudah Hampir 2 Minggu , Kali Ini Saya akan Membahas Tentang "Cara Membuat Threaded Comment (Fitur Reply)" , Seperti Gambar di Atas Contohnya , Tapi Nanti Tidak Terlalu Mirip dengan Saya , Karna Punya Saya Sudah Saya Modifikasi ! , Yasudalah Langsung ke Topik Pembicaraan , XD !

  1. Login ke Blogger Sobat -> Dasbor -> Rancangan -> Edit HTML -> Centang   Expand Template Widget .
  2. Cari Kode .
<b:include data='post' name='comments'/>
Biasanya Kalian Mendapatkan 2-5 Kode Tsb.

     3. Ganti Semua Kode Tersebut dengan kode dibawah ini.

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
     4. Terakhir "SAVE TEMPLATE"


SELAMAT MENCOBA !

Cara Membuat Show Hide Komentar

    Hallo Sobat , Gimana Kabar Kalian ? Sudah Lama Kevin tidak Posting , dikarenakan Urusan Sekolah. 
    Kali ini Kevin akan Sharing Tentang dunia Blogging , yg Berjudul "Cara Membuat Show Hide Komentar". ini dia Contohnya


Klik Gambar Untuk Memperbesar

   Berikut Tutorial / Caranya 

1.) Login ke Akun Blogger Sobat.
2.) Masuk ke Dasbor -> Rancangan -> Edit HTML -> Centang "Expand Template Widget"
3.) Cari kode ]]></b:skin> , Gunakan F3/CTRL+F.
4.) Kemudian Letakan kode dibawah ini diatas kode ]]></b:skin>
a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;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:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}
5.) Kemudian Cari kode </head> , dan Letakan kode dibawah ini diAtasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Show Comment",
closePanelText = "Hide Comment",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/slide-blogger-comment-box.js' type='text/javascript'/>
6.) Terakhir Tinggal SAVE TEMPLATE


Catatan : Ganti Text Yang Berwarna MERAH dengan Text Kalian Sendiri

Membuat Like Box Facebook Tersembunyi

      Facebook dapat di jadikan sumber promosi para blogger, karena pengguna facebook kian hari kian banyak maka tidak ada salahnya mempromosikan blog kita di facebook. Like box fb di blog bisa membuat orang yang berkunjung ke blog kalian bisa sekalian mengLike FansPage Blog sobat, tetapi agar tidak memakan tempat Like Box FB dapat disembunyikan seperti tutorial berikut.

1. Masuk ke blogger.
2. Klik Rancangan/Design  » Tambah Gadget » HTML/Java Script
3. Pastekan kode di bawah ini pada kolom yang sudah disediakan.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWtld83U3ENzz5Xil9BmqNyxDFm35M-vdxXD6kdLwIwyxD3xzOcw6jn7tDSAU_C92ptrU4RWnUBA06pRtfr4OsYZs2L5uTNqMDTSrwhUg5kLnx3MTrdvaS142BJZ2mydGFHOrpbg4dMO0/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Blogs.Kevin&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://kevin-thereds.blogspot.com/2012/07/membuat-like-box-facebook-tersembunyi.html " target="_blank">+ Get This</a></span></div></div>
4. Pergi ke-Tab Edit HTML dan Pastekan Kode dibawah ini tepat diatas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script>
5. Terakhir "SAVE TEMPLATE"

Keterangan :
- Ganti Kode Yang BerWarna HIJAU dengan URL FansPage Sobat


Cara Membuat Permalink di Bawah Postingan

    Hallo Sahabat "Blog's Kevin" kali ini Kevin akan memPost "Cara Membuat Permalink di Bawah Postingan" , bagi yang Belum Tahu Apa Itu Permalink,Nahh Seperti Ini Bentuknya

Yaudah Langsung Aja Kita Ke Tutorial nya !!!
  1. Login Ke Blog Sobat -> Masuk ke Edit HTML -> Centang
  2. Cari kode ]]><b:skin> Gunakan CTRL+F / F3, Untuk Mempermudah,lalu pastekan kode dibawah ini diatas kode ]]><b:skin>
.permalink{border:3px dotted #FFD700; padding:5px; background:#000; -moz-border-radius:5px}
.permalink a{background:none}
img.float-right{margin:5px 0px 0 10px}
img.float-left{margin:5px 10px 0 0px}

   3. Selanjutnya Cari kode <data:post.body/> 
   4. Pastekan kode dibawah ini tepat dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='permalink'> <center><small>Anda Sekarang Sedang Baca Artikel Tentang <strong><u><data:blog.pageName/></u></strong> Anda Bisa Menemukan Artikel <data:blog.pageName/>Saya Ini, dengan url <strong><u><data:post.url/></u></strong>, Kamu Juga Boleh Menyebar Luaskan Artikel Ini Atau MengCopy Paste Artikel <strong><data:blog.pageName/></strong> ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> Sumbernya. Thank&#39;s <img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/></small></center></div></b:if>
    Keterangan Sobat Bisa Mengganti Kata Yang Berwarna BIRU dengan kata-kata sobat sendiri

    5. Terakhir "SAVE TEMPLATE"

Cara Mengganti Warna Scrollbar Di Blog

      Pada Postingan Sebelumnya Saya Mempost Tentang Olahraga , Sekarang Kevin Akan Mempost Tentang Blog , Tepatnya Yaitu "Mengganti Warna Scroll Di Blog" 

      Ok Langsung Saja Kita Menuju Ke TKP , !
  1. Masuk Ke Tab Rancangan --> Pilih "Edit HTML"
  2. Centang "Expand Template Widget"
  3. Pastekan Kode Di Bawah Ini di Atas kode ]]></b:skin>

::-webkit-scrollbar{height:12px; width:12px; background:#000}
::-webkit-scrollbar-thumb{background-color:#FFD700; -moz-border-radius:10px; border-radius:10px}
Ubah Kode Yang Berwarna MERAH , Dengan Sesuka kalian

   4. Terakhir Tinggal "Save Template"

Membuat BlogRoll



Langsung Saja Kita ke TKP !!

Caranya sangat Mudah !


  • Untuk kode Dropdown :


<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1name=menu><option># Dropdown # </option><option value="http://kevin-thereds.blogspot.com.">Contoh 1</option><option value="http://kevin-thereds..blogspot.com">Contoh 2</option><option value="http://kevin-thereds.blogspot.com">Contoh 3</option><option value="http://kevin-thereds.blogspot.com">Contoh 4</option><option value="http://kevin-thereds.blogspot.com">Contoh 5</option></select></form>

Hasilnya seperti di bawah ini :



  • Untuk kode Marquee :




<marquee onmouseover="this.stop()"onmouseout="this.start()" scrollamount="2"direction="up" width="100%" height="200"><a href=" http://kevin-thereds.blogspot.com "target="_blank">Contoh 1</a><br/><br/><a href=" http://kevin-thereds.blogspot.com "target="_blank">Contoh 2</a><br/><br/><a href="http://kevin-thereds.blogspot.com "target="_blank">Contoh 3</a><br/><br/><a href=" http://kevin-thereds.blogspot.com "target="_blank">Contoh 4</a><br/><br/><a href=" http://kevin-thereds.blogspot.com "target="_blank">Contoh 5</a><br/><br/></marquee>


Hasilnya akan seperti di bawah ini :


  • Untuk kode Marquee dalam tabel/kotak :




<table border="2"width="155" height="130" cellpadding="2"><tr><td align="left"><marquee onmouseover="this.stop()" onmouseout="this.start()"scrollamount="2" direction="up" width="100%"height="200"><a href=" http://kevin-thereds.blogspot.com "target="_blank">Contoh 1</a><br/><br/><a href=" http://kevin-thereds.blogspot.com "target="_blank">Contoh 2</a><br/><br/><a href=" http://kevin-thereds.blogspot.com "target="_blank">Contoh 3</a><br/><br/><a href=" http://kevin-thereds.blogspot.com "target="_blank">Contoh 4</a><br/><br/><a href=" http://kevin-thereds.blogspot.com "target="_blank">Contoh 5</a><br/><br/></marquee></td></tr></table>

Hasilnya seperti di bawah ini :

Anda coba dulu baru tahu hasilnya 
Silahkan Di Pilih mana Yang Sobat suka


NB : Ubah Text Yang Berwarna MERAH dengan URL sobat
      Ubah Text Yang Berwarna BIRU dengan Keyword sobat


source : pelajaran-blog

Cara Mengetahui Blog Terindeks Google





Langsung Saja Ke TKP !

Cara Mengetahui Bahwa Blog Kita Sudah Terindeks Oleh Google Ikuti Langkah" Di Bawah Ini

Seperti Ini Contohnya :

site:kevin-thereds.blogspot.com

Code² Gaya Text Cbox



Kali ini Blog's Kevin akan membuat post yang berjudul Code Code Gaya Text Cbox. Anda sudah maksut kan dengan judulnya?Jika belom saya akan jelaskan, penjelasan : pernahkah anda melihat di buku tamu blog ada pesan dari blogwalking yang mungkin gaya textnya berbeda dengan yang lain. Contoh : Ada yang tebal, textnya berwarna warni, textnya bisa bergerak, textnya rata tengah. Pastinya pernah kan? Nah itulah yang akan Blog's Kevin bahas.


Berikut caranya :


  • Untuk kode text tebal atau bold : [b]Tulisan anda disini[/b]
  • Untuk kode text miring atau italic : [i]Tulisan anda disini[/i]
  • Untuk kode text bergaris bawah : [u]Tulisan anda disini[/u]
  • Untuk kode text rata tengah : [center]Tulisan anda disini[/center]
  • Untuk kode text font besar : [big]Tulisan anda disini[/big]
  • Untuk kode text yang mencoreng, seperti ini Blog's Kevin : [s]Tulisan anda disini[/s]
  • Untuk kode text yang berwarna : [color=red]Tulisan anda disini[/color]
  • Untuk kode text bergerak kekanan kekiri : [scroll]Tulisan anda disini[/scroll]
  • Untuk kode text ber-link : [url=http://alamat blog anda]Tulisan anda disini[/url]

NB: Ganti Text Yang BerWarna MERAH ,Dengan Text Anda !!!

Sekian.Semoga Bermanfaat..Ayo Berkomentar :)


Thank's To : Mas Yusa 
Visit : Blog's Kevin

Cara Membuat Link Selalu Open In New Tab

Seperti biasa. Blog's Kevin update post Di sore hari ini saya akan membuat post tentang tutorial blog, yaitu Cara Membuat Link Blog Selalu Open In New Tab. Apa itu open In New Tab? Anda para penggunna internet dan browser (ex: Mozilla firefox, Opera dan Google chrome) pasti sudah tau. Contoh: misalnya anda sedang berkunjung di sebuah blog, dan ada menemukan sebuah link. Coba anda klik kanan link tersebut, nah nanti akan muncul beberapa perintah termasuk Open In New Tab. Tapi cara yang Mas Yusa berikan ini tidak perlu ribet ribet klik kanan, cukup di klik dan link akan otomatis open In New Tab. Ingin tahu caranya :

Berikut caranya :
  • Masuk ke Kamar Mandi...eits,masuk ke akun blogger kalian.
  • Pilih menu Rancangan atau Tata letak
  • Pikih tab Edit Html
  • Cari kode <head> dengan cara Ctrl+F saja biar cepat.
  • Pastekan kode dibawah ini tepat dibawah kode <head>
<base target='_blank'> 
  • Kalo sudah,tinggal anda simpan saja template anda.

Semoga Bermanfaat ! Give Your Comment's !




Thank's To : Mas Yusa 
Visit : -= Blog's Kevin =-

Membuat Daftar Isi di Postingan Blog

Daftar isi sangatlah penting di semua wacana seperti di buku articel maupun di blogger ataupun website, daftar isi guna mempermudah pengunjung untuk menemukan daftar yang mereka inginkan dan memudahkan untuk pencarian isi blog yang ada di blog kita. Posting kali ini saya akan berbagi tips membuat daftar isi blog pada postingan, dengan fasilitas terdapat kata new!! bila anda update articel terbaru....


Unruk contohnya anda bisa lihat di sini: DEMO


langsung aja ikuti langkah-langkah ini untuk pembuatannya :
Contohnya : Klik diSini
1. login ke blogger
2.Pilih Posting trus entri baru.
3.Pilih Edit HTML dan copas script dibawah ini di dalamnya.




<div ;="" margin="3px" style="-moz-border-radius: 5px; border: 1px solid #32A50C; height: 500px; overflow: auto;">
<script src="http://amminessalafy.googlecode.com/files/daftarisi.js">
</script>
<script src="http://kevin-thereds.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>


4. Ganti tulisan yang berwarna Biru dengan alamat blog Anda.
5. Ubah tanggal penerbitan pada tanggal pertama kali anda mulai menulis artikel dengan mengeklik Opsi entri.
6. Kemudian Terbitkan dan lihat hasilnya.
7. Selesai, dan lihat hasilnya.




Credit : Amminessalafy
Visit : Blog's Kevin

Anti Klik Kanan Dengan Gambar



Langsung Saja Ke TKP !!!

Contoh Klick Kanan Bergambar : Click Here

1. Pertama, masuk ke Rancangan / Design.
2. Klik Tambah Gadget / Add Gadget.
3. Pilih HTML / JavaScript.
4. Edit dan masukkan kode dibawah ini:
<script type='text/javascript'>
var KPCrightclicktheme = 'Dark';
var KPCrightclickimage = ' http://i.imgur.com/jwU8h.jpg ';
</script>
<script type='text/javascript' src="http://antirightclickbykpc.googlecode.com/files/AntiRightClickByKPC.js"> </script>
Kamu ganti kode yang berwarna biru dengan skema blog kamu. Jika blog kamu bertema gelap / berwarna hitam, isikan Dark. Jika blog kamu berwarna putih atau berwarna terang, isikan Light.
Kamu ganti kode yang berwarna hijau dengan URL gambar Anti Klik Kanan mu.

5. Kemudian SAVE TEMPLATE dan lihat hasilnya :D


Sumber

Cara Membuat Menu Slide Info di Blog


Kali Ini Saya Akan Memberitahukan Cara Membuat Menu Slide Info Dengan CSS
Contoh nya : Klik diSini

  1. Login Ke Akun Blog Sobat
  2. Pilih Rancangan --> Kemudian Pilh EDIT HTML Dan Jangan Lupa Untuk Mencentang Kolom Expand Template Widget.
  3. Copas KOde Berikut Tepat Di Bawh Kode <body>
<style type='text/css'>#info-teja {z-index: 1000;background:-moz-linear-gradient(top,  #1F2326,  #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;width:400px;position: fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#info-teja{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #info-teja:hover{width:400px;opacity:1.0;margin-left:0;}.Tejainbox {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#ffffff; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}.Tejainbox:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}.Tejainbox2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}.teja15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.Teja2 ul.bom {margin: 0; padding: 0;}.Tejainbox2 li {margin-left:20px;}.Tejainbox2 li a {color: #FFFFF; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.Tejainbox2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.Tejainbox2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}.Tejatouch {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.Tejatouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: red;}</style>


<div id='info-teja'><span class='Tejatouch'>Info</span><div class='Tejainbox'><div class='Tejainbox2 teja15'><h2>SELAMAT DATANG</h2>Selamat datang di Blog's Kevin - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan Berlama - Lama di sini dan membaca lebih lanjut tentang artikel dunia teknik (Blogging, Trik&quot; handphone Dan Lain Lain) yang Kami susun. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik<h2>Sekilas Tentang Blog's Kevin</h2><img height='130x' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdzh9RaStrpcEFYkKsBPnASw3RXDzNc0_UMwbMyvMXNbuUfGPnlSwzeTMOdC2UuHtsao0XIY1CVWEBpuhDr6EQeORNFtiGBPUUQU8AiVwE7qDbqdW1_B_6rBcu45aPFyIxQUzs-o9nSpuu/s1600/author.png' width='100px'/><p style='text-align:justify'>Nama saya Kevin Pramana, Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...</p></div></div></div>

  4 . Ubah Kata Atau Judul Yg Berwarna KUNING Dengan Judul atau Kata-kata Sobat Sendiri
Dan Yg Terakhir Simpan Templatenya...

SELAMAT MENCOBA DAN SEMOGA BERHASIL


Credit : Teja HTC
Visit : Blog's Kevin

 

Copyright @ 2013 Pramana Cyber.