Artikel Terbaru

Cara Mengganti Tulisan Posting Lama, Posting Baru, Beranda Dengan Image dan Tulisan




Posted by Denie Deden_Nz

 

Artikel postingan kali ini saya ambil judul atau tema mengenai " Cara Mengganti Tulisan Posting Lama, Posting Baru, Dan Beranda Dengan Image ". 

Pada intinya tulisan home / beranda, posting lama, posting baru sebenarnya jika tulisan itu tidak di ganti juga tidak apa-apa alias tidak akan menjadi masalah bagi blog kita, namun terkadang setiap orang memiliki selera ( sense of art ).

Kalau di lihat dari segi tampilan memang ada nuansa tersendiri dan kelihatan lebih hidup / menarik dan mengenai fungsi atau manfaat sama saja. Bagi sobat-sobat yang ingin mengganti dan nggak tahu cara pasangnya, akan saya bagi caranya. ikuti langkahnya ya, sob.
Dan kalau sobat penasaran dengan hasilnya, ini screenshot hasil akhir dari pemasangannya.

screenshot image / gambar


( + ) Mengganti dengan image (gambar)
Ikuti cara / langkah di bawah ini :
  • Masuk / Login ke blogger sobat.
  • Masuk ke Template  >>  Edit Html (catatan.sebelum masuk ke edit html sebaiknya sobat membiasakan untuk selalu membackup / unduh template lengkap untuk jaga-jaga apabila terjadi kesalahan dalam memasukan  kode script)
  • Kemudian  cari kode <data:homeMsg/> untuk mengganti tulisan Home / Beranda (sobat akan menemukan dua kode yang sama dan baiknya ganti saja keduanya) dan untuk mempermudah pencarian kode tekan Ctrl F, setelah ketemu kodenya  kemudian ganti dengan kode dibawah ini :

<img border='0' src='http://3.bp.blogspot.com/_3TLQUQnfZ8A/THKxgNOyNgI/AAAAAAAAAnw/dRP1tcNNMj0/s400/home.png'/>

  • Kemudian  cari kode <data:olderPageTitle/> untuk mengganti tulisan Posting Lama dan untuk mempermudah pencarian kode tekan Ctrl F, setelah ketemu kodenya  kemudian ganti dengan kode dibawah ini :


<img border='0' src='http://1.bp.blogspot.com/_3TLQUQnfZ8A/THKxg-fF8-I/AAAAAAAAAoA/2EiWJJ9uPT0/s400/posting+lama.png'/>


  • Kemudian  cari kode <data:newerPageTitle/> untuk mengganti tulisan Posting Baru dan untuk mempermudah pencarian kode tekan Ctrl F, setelah ketemu kodenya  kemudian ganti dengan kode dibawah ini :
  • Untuk Mengganti Tulisan Posting Baru Cari code <data:newerPageTitle/> , kemudian ganti dengan code dibawah ini :

<img border='0' src='http://1.bp.blogspot.com/_3TLQUQnfZ8A/THKxgTiD6_I/AAAAAAAAAn4/WBJ__KUKzgU/s400/posting+baru.png'/>

( + ) Mengganti dengan tulisan (kalimat selera sendiri)
Apabila sobat ingin menggantinya dengan tulisan sesuai selera, cara dan langkahnya sama seperti diatas yang membedakan hanya pada selera apa diganti dengan image atau tulisan. Untuk cara menggantinya ikuti tutorial dibawah ini :
( - )  Sobat cari <data:newerPageTitle/> lalu hapus dan ganti dengan tulisan "Previous" atau dengan kata lain sesuai selera sobat.
( - )  Kemudian cari <data:olderPageTitle/> hapus dan ganti dengan tulisan "Next" atau kata tulisan menurut selera sobat.
( - )  Terakhir cari <data:homeMsg/> pada saat mencari kode ini pasti akan menemukan dua kode yang sama dan sebaiknya ganti saja keduanya dengan tulisan sesuai selera, misal "Beranda" atau lainnya.
  • Klik Save Templates / Simpan
  • Selesai
  • Lihat hasilnya dengan membuka halaman postingan sobat.
Catatan : Tulisan script diatas yang berwarna biru  dapat diganti dengan url gambar/image yang sobat inginkan.

Semoga bermanfaat dan sampai jumpa...



Download Software Mz RAM Booster



Free Memory Booster : Mz RAM BOOSTER
flamboyan 68 - Perangkat lunak Mz RAM Booster adalah sebuah program yang dibuat  atau dirancang untuk meningkatkan kinerja komputer dengan sistem auto-RAM pemulihan dan fine tuning beberapa pengaturan sistem Windows. 

Menggunakan sumber daya yang minim/minimal, meningkatkan kinerja terbaik tanpa menggunakan hardware atau perangkat keras baru, tweak hardware tanpa membatasi sistem stabilitas sistem komputer.
Disamping menunjang kinerja juga mempercepat komputer Anda, menghentikan kebocoran memori dan meningkatkan RAM bebas.
Supported Operating System : 
Window XP / 2003 / Vista
Window 7 ( full Window x64 )

Selamat mencoba, demoga bermanfaat dan happy blogging...............

Silahkan anda klik tautan ini : 

Atau klik di bawah ini : 
  



Cara Menghapus Tampilan Showing All Post Di Blog




Flamboyan68 - Apa kabar sobat? kabar baik pastinya. Postingan kali ini saya  ambil tentang Cara Menghapus Tampilan Showing All Post Di Blog. Sumber artikelnya saya mengambil dari blog tetangga dekat siapa lagi kalau bukan kang salman, sobat blogger pasti mengenalnya. 
Awalnya ide untuk memposting artikel ini pada saat saya berniat ingin menghapus/menghilangkan tampilan showing all post pada pencarian per label dan pastinya suatu saat saya pasti membutuhkannya lagi, siapa tahu juga ada sobat blogger yang belum tahu tentang cara seperti ini jadi kita berbagi ya sob heheh maka saya dokumentasikan di blog ini. Ulasan sedikit, langkah dan cara pemasangan kode script ini cukup mudah hanya mengganti kodenya dari kode lama dengan kode baru. Hasil dari pemasangannya saat kita melakukan klik pada suatu label/kategori akan tertuju pada halaman berdasarkan label.
Memasang kode script ini ada plus dan minusnya, cara ini bisa kompatibel dengan template yang tersedia fitur Older Post, Home, New Post, dan sebaliknya. Untuk tampilan tulisan hasil pencarian tinggal mengotak-atik breadcrumb yang ada pada template sobat.

hapus Tulisan Showing All Post

Ikuti cara dan langkah di bawah ini :

( - )  Login ke akun blogger sobat
( - )  Pilih dan klik Template  > Edit HTML  (sebelumnya backup terlebih dahulu template sobat)
( - )  Kemudian sobat cari kode <b:includable id='status-message'> atau kode lainnya di bawah ini :
        ( gunakan Ctrl + F untuk memudahkan pencarian ) 
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
  ( - ) Apabila sudah ketemu dengan kode diatas tadi sobat ganti dengan kode di bawah ini dengan lengkap.
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
( - ) Simpan Template.

( - ) Selesai dan sobat coba klik pada salah satu label atau search box

Selamat mencoba semoga bermanfaat dan happy blogging....................... 
source 
sumber image : Kang Salman (www.kucoba.com)

Cara Membuat Berlangganan RSS Feedburner






Flamboyan68 - Fungsi subscribe (berlangganan) via email  yaitu  untuk memberikan informasi tentang artikel terbaru kepada follower atau teman yang selalu mengikuti update artikel terbaru di blog yang diikutinya. Dengan memasang tombol berlangganan ini jelas sekali manfaatnya baik oleh pemilik blog/web ataupun pengunjung, yang berlangganan update artikel akan selalu mendapatkan update yang dikirim memlalui pesan email.
 
Artikel yang mengupas tentang tutorial ini sudah banyak sekali jumlahnya dan tentunya dengan banyak pilihan modelnya. Dan postingan ini hanya untuk melengkapi dokumentasi artikel blog saya, dan siapa tahu bermanfaat juga buat sobat blogger. 

Untuk pemasangannya cukup mudah dan tidak memeras otak sobat blogger. Bagi sobat yang mau pasang widget ini blognya bisa mengikuti cara dan langkah di bawah ini :
( + ) Masuk ke akun blogger sobat
( + ) Pilihlah tata letak, kemudian klik add gadget  
( + ) Sobat masukan kode dibawah ini : 


<style>
.form{border:2px solid #FF3300;background:#FFFFFF; padding:3px;width:595px;height:196px;-moz-border-radius:6px;-webkit-border-radius: 6px;}.rss{background:url("http://i1358.photobucket.com/albums/q770/Deniededen/CaraSubmitSitemapBlogkeGoogleBingMneggunakanSubmitRSS30_zpsaa49db15.png") no-repeat center right;padding:1px;}.button{background:#9b9b9b;color:#FFF;font-size:11,5px;font-family:Arial,Tahoma,Verdana;margin-left:5px;border:2px solid #fff;padding:3px 5px 3px 5px;font-weight:normal;-moz-border-radius:5px;-webkit-border-radius: 5px;}
</style>
<div class="form">
<div class="rss">
<div style="font-weight:normal; color:#FA0404; font-size:11px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/~fc/DenieNz"><img src="http://feedburner.google.com/fb/lib/images/icons/feed-icon-16x16-gray.gif" /></a> <a href="http://feeds.feedburner.com/DenieNz"><b>Update Artikel Via Pesan Email</b></a></div>
<div style="font-weight:normal; padding:10px 10px;">Blog <b>flamboyan68.blogspot.com</b></div>
<div style="padding-left:10px;font-size:12px">Apabila anda ingin mendapatkan artikel terbaru dari <b>blog flamboyan68</b> lewat pesan email <b>gratis</b>. Silahkan tulis alamat email anda di kotak yang tersedia bawah ini</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=DenieNz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini" /> <input type="hidden" value="DenieNz" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="Daftar" /></div></form>
 <p><a href="http://feeds.feedburner.com/DenieNz"><img src="http://feeds.feedburner.com/~fc/DenieNz?bg=#99CCFF&amp;fg=#444444&amp;anim=0&amp;label=listeners" height="26" width="88" style="border:2" alt="" /></a></p></div></div>



keterangan :
( - )  Warna merah  = Silahkan sobat ganti dengan URL feedburner sobat.
( - )  Warna biru = Silahkan ganti dengan kata-kata yang sobat kehendaki.

( - )  Warna Orange = Sobat bisa menggantinya dengan image yang dikehendaki.

( + ) Langkah terakhir simpan.

Untuk selanjutnya sobat bisa memodifikasi sendiri kode scriptnya baik untuk merubah logo feedburner, kata yang di kehendaki, ataupun backgroundnya. Dan untuk melihat penampakan atau screenshotnya sobat bisa tengok imagenya di bawah postingan ini.


Selamat mencoba semoga bermanfaat dan happy blogging........................

Cara Mudah Cari Teman Blogger

Cara  Mudah Cari Teman Blogger



bloggerkotasukabumidocs photo flamboyan68docs_zps35281e13.jpg

flamboyan68 - Pertama kali yang terlintas di benak kita dalam membuat suatu blog tentunya adalah untuk berbagi pengetahuan/ilmu yang dimiliki dengan yang lain yang di dokumentasikan di dalam web blog, blog sebagai media untuk curahan hati (curhat) tentang pengalaman atau hobi yang tentunya menarik/unik untuk di posting di web blog, ataupun sebagai penyedia jasa atau informasi tertentu misalnya informasi dalam hal komputer, jasa download film atau musik dll dan yang terakhir mungkin dalam rangka mencari teman  lama atau sahabat baru dan tidak tertutup kemungkinan salah satu teman mempunyai aktivitas yang sama yaitu blogging dan tentunya ini menarik apalagi teman satu daerah.

Artikel yang akan saya share di sini adalah cara mencari teman komunitas blogger yang telah disediakan oleh blogspot. Teman yang kita cari bisa satu daerah atau lain daerah/kota, dan sobat bisa mencoba cara sederhana ini :

 
Tautan/link diatas pada saat di klik sobat secara otomatis akan dibawa ke suatu halaman blogspot blogger yang telah sesuai dengan daerah/kota yang diinginkan, dan sobat hanya merubah sedikit ikuti cara di bawah ini :
 
ID = Kode untuk Indonesia 
jawa+tengah = Nama Provinsi (harus ditambah tanda + dan di sesuaikan dengan panjang nama prov.)
semarang= Kota tujuan yang dikehendaki.

Selamat mencoba semoga bermanfaat, dan happy blogging...........................





Cara Mudah Membuat Widget Headline News di Blog




flamboyan68 - Fungsi dari widget Headline News  adalah untuk menampilkan sejumlah artikel atau konten di blog dalam satu baris dan di tampilkan secara bergantian dengan otomatis sesuai jumlah yang diinginkan. Para blogger banyak yang tertarik dengan widget ini dan di pasang di blog dan selalu di pasang pada bagian atas  header blog.
Bagi sobat yang belum dan berminat pasang bisa mengikuti cara dan langkah di bawah ini :

1. Masuk ke akun blogger sobat.
2. Klik  > Template (backup template sobat terlebih untuk menghindari kegagalan pasang kode)
3. Pilih  > Edit HTML.
4. Kemudian sobat cari kode ]]></b:skin> gunakan Ctrl + F untuk mempermudah pencarian
    copy kode di bawah ini dan paste tepat diatas ]]></b:skin>

.newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia59cYvcs0SP28ZvAPTqRv5RgWofBhS9Ft_lpTfcE_aAWBo7jhtITBMie5-mdj366WDMQlTPH01Otyj1nCvfLqQA2YmSpWFNwhLZFFkrfIF9MRUDUHHYGu62gMo4NNLCC6F-RQxMHOw4M/s1600/BRK+NW.png) no-repeat top left;width:1000px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
.news {width: 1000px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000000;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}

Keterangan :
Kode warna biru sobat ubah sesuai dengan selera sobat. Kode warna merah ubah sesuai dengan lebar blog sobat.
 
5. Setelah itu sobat cari kode </head>
    apabila ketemu dengan kode tadi sobat copykode di bawah ini dan paste tepat diatas  </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 16px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>

6. Cari lagi kode  <div id='header'> atau <div id='header-wrapper'> atau <div id='header-outer'>
    copy kode dibawah ini dan paste tepat di atas kode <div id='header'> atau <div id='header-wrapper'>     atau <div id='header-outer'>.

<div class='newspic'>
<div style='float:left;width:1000px;padding:1px 0 6px 130px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://flamboyan68.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 5 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

Keterangan :
Kode warna merah sobat sesuaikan width / lebar dengan lebar blog. silahkan sobat ubah url  yang berwarna merah dengan url blog sobat. Tentukan jumlah artikel yang akan ditampilkan pada Headline News, silahkan ganti angka 5 dengan angka yang diinginkan.

7. Simpan Template.


Selamat mencoba, semoga bermanfaat dan happy blogging............................


Cara Membuat Script Widget Kode Warna HTML 4 Di Blog




Postingan kali ini saya akan berbagi khususnya para newbie seperti saya yaitu cara membuat script widget kode warna HTML 4 di blog. Mungkin postingan saya sudah basi kalii yah..dan sering ditemukan pada postingan teman-teman semua, ya walau malu-malu saya share buat teman-temen yang belum dapat kebagian scriptnya, yuu cekidoot…

Dibawah ini adalah script kode warna HTML V 4, anda  tinggal meng-copy script ini ke dalam postingan blog dan berada di posisi mode HTML untuk melihat contoh warna klik disini.

-------------------------------------------------------------------------------------------------------------
<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="420"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie">
<param value="High" name="quality">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="420" height="420"> </object>

<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess">
<param value="http://www.2createawebsite.com/build/col.swf" name="movie">
<param value="high" name="quality">
<param value="#ffffff" name="bgcolor">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>

-------------------------------------------------------------------------------------------------------------

Untuk penempatan atau menyimpanya script kode-kode warna HTML V 4 ini,  anda bisa menyimpannya  di widget ataupun di laman

Sekian dulu postingan kali ini semoga bermanfaat dan sampai jumpa di postingan berikutnya.terima kasih..

Cara Membuat Button Like Facebook, Twitter, G+ Dan Share


Posted by Denie Deden_Nz






Hallo..sob apa kabar? sehat-sehat khan? Pada postingan kali ini saya akan share " Cara Membuat Button Like Facebook, Twitter, G +, Dan Share ". Membuat tombol like Facebook, Twitter dan Google Plus (G+) semuanya bisa kita pasang diatas atau di bawah judul postingan.  

Manfaat dari pemasangan button ini bagi blog sangat besar sekali, yaitu membantu penyebaran link artikel kita di media jejaring sosial. Sebenarnya artikel ini cenderungnya dikategorikan dalam SEO Optimisasi OFFpage karena lebih pada menyebarkan link artikel kita. Tetapi karena dalam rangka mengolah blog makanya bisa juga sih di kategorikan dalam kategori Onpage saja. Begitu sob...

Pada postingan ini saya akan share memasang Tombol Like Facebook, Twitter dan G + di Bawah Judul Posting. Sekedar mengingatkan saja pada bagian akhir postingan / bawah tombol serupa yang  yang telah disediakan blogger. 
Sobat semua bisa mengikuti cara-cara dibawah ini;
  • Masuk ke blog sobat
  • Klik Template
  • Masuk ke Edit HTML
  • Cari kode di bawah ini dan untuk mempermudah pencarian kode pakai Ctrl F:
 <data:post.body/>

Note: Sobat semua pasti akan menemukan kode tersebut diatas lebih dari satu menurut pengalaman yang sudah-sudah pilih yang pertama saja / di coba semua.

  • Letakkan Kode berikut ini diatas kode <data:post.body/> 

 <table border='0'><tbody><tr>
<td><a class='twitter-share-button' data-count='horizontal' data-via='MkZHackers' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp; font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
<td><div class='addthis_toolbox addthis_default_style '><a class='addthis_counter addthis_pill_style addthis_nonzero' href='#' style='display: block;'><a class='atc_s addthis_button_compact'><span/></a></a><div class='atclear'/></div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/></td>
</tr></tbody></table>

  • Simpan Template
  • Selesai
  • Kemudian sobat klik salah satu artikel blog sobat, untuk melihat berhasil tidaknya pemasangan kode tadi. 
Sekian dulu postingan kali ini selamat mencoba dan semoga bermanfaat bagi sobat-sobat semua....

Sumber image: www.hongkiat.com

Cara menambah gadget di atas header


Posted by Denie Deden_Nz, Sabtu 18 Mei 13

Bagi para blogger  master postingan ini yaitu mengenai "Cara menambah gadget di atas header" bukan persoalan lagi. Postingan ini yah ane ditujukan untuk blogger newbie kayak ane gituu kekeke...pada dasarnya template bawaan memang sudah default so.. jadinya widget di atas header memang tidak ada. Well.. ane akan coba ng_share postingan dengan harapan dapat bermanfaat bagi agan dan sobat semua siapa tau ada yang ingin menambahkan widget. Caranya gampang sob, nggk usah deg..deg an lah santai aja, udah dulu basa basinya kelamaan mending kita langsung ke tempat  perkaranya hehe..;

Cara menambah gadget di atas header:


  • Masuk ke blog sobat  >> Dashbord  >>  Klik Template  >> Klik  Edit template  / HTML 
  • Untuk mempercepat pencarian pakai CTRL + F lalu cari kode seperti di bawah ini:

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

  • Ganti kode diatas dengan kode seperti di bawah ini:

<b:section class='header' id='header1' preferred='yes'>


  • Sebelum di save lebih baik klik Pratinjau dulu biar manteep sob, biar terhindar dari kesalahan pasang. Kalau semuanya beres nggk ada peringatan kesalahan tekan save/simpan template.
Demikian postingan kali ini selamat mencoba semoga bermanfaat bagi sobat-sobat semua dan sampai jumpa....bye

Cara Memasang Widget Popular Post Berwarna Di Blog


screenshot widget warna-warni

Flamboyan68 - Hallo! bagaimana kabarnya, sob? pastinya sehat-sehat saja ya. Malam menjelang subuh ini saya akan men_share postingan buat agan-agan newbie / pemula kayak ane hehe tentang " Cara Memasang Widget Popular Post Berwarna Di Blog ". Blogger pemula seperti halnya saya, suka sekali dengan memasang widget-widget cerah seperti halnya postingan ini.
Widget popular post / artikel populer warna-warni ini tidak di lengkapi dengan efek slide, tampilan warna setiap popular postnya  berbeda-beda (tidak ada warna ganda) sampai 10 artikel dikarenakan terbatasnya widget popular post. Pemasangan widget warna-warni ini sangat cocok alias matching apabila diterapkan pada blog yang bertemplate cerah.
Biar agan-agan tidak penasaran dengan gambarnya, agan-agan bisa melihat pada screenshot diatas. Agan semua pasti tanya-tanya dalam hati hehehe..sebenarnya nomor yang nempel itu apa yah maksudnya? seperti yang saya terangkan diatas tadi bahwa widget ini hanya bisa menampilkan popular post sampai 10 artikel dan disebelah judul artikelnya akan ditampilkan nomor urut dari 1 sampai 10 yang maksudnya adalah menandakan ke-populeran artikel blog agan. Dan satu hal lagi tampilan warna-warna pada widget ini bisa di ubah / dimodif lagi sesuai selera agan. Basa basinya udah dulu ya, sob? kita langsung sedot saja ke cara pemasangannya.
  • Masuk / Login ke  >> Blogger sobat.
  • Pilihlah  >> Tata Letak.
  • Pilihl  >> Add Gadget.
  • Pilih >> Entri Populer.
  • Selanjutnya lakukan Setting pada widget Entri Populer 
          - Hilangkan >> Thumbnail Gambar dan Cuplikan.
          - Silahkan pilih Entri / Artikel yang ingin ditampilkan (diposkan)
  • Klik Save / Simpan 
  • Masih dalam posisi di Tata Letak, Kemudian pilih Add Gadget 
  • Klik pilih HTML / Javascript.
  • Letakan kode di bawah ini kedalam kotak "HTML / Javascript 


        <style type='text/css'>
        /*----- popular post warna warni by farhanshare.blogspot.com-----*/
        #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
        #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
        #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
        #PopularPosts1 ul li:first-child:after,
        #PopularPosts1 ul li:first-child + li:after,
        #PopularPosts1 ul li:first-child + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
        #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
        #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
        #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
        #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
        #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
        #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
        #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
        #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
        #PopularPosts1 ul li:first-child + li:after{content:"2"}
        #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
        #PopularPosts1 ul li:first-child:after{content:"1"}
        #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
        #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
        </style>

        • Setelah selesai mem_pastekan kode tadi selanjutnya klik ' Save / simpan '. 
        • Masuk ke blog agan dan bukalah salah satu artikel dan lihat hasilnya
        • Selesai

        Bagaimana, gan? pastinya ringan alias mudah, selamat mencoba senantiasa bermanfaat dan sampai jumpa.

        Cara Menampilkan Menu Scroll Pada Arsip Blog


        Flamboyan68 - Pada postingan kali ini saya akan berbagi dengan sobat nubie semua yaitu bagaimana " Cara Menampilkan Menu Scroll Pada Arsip Blog ". Keberadaan dari widget arsip blog adalah menu penting yang harus sobat pasang di blog, karena eksistensi arsip blog ini akan memudahkan pengunjung menemukan semua artikel yang ada di blog kita.


        Walaupun penting tapi tidak semua  para blogger enggan untuk memasangnya dikarenakan  memakan banyak tempat apalagi jika artikelnya sudah banyak tentuk membutuhkan tempat yang luas.


        Di bawah ini ada cara dan langkah untuk menampilkan menu scroll pada arsip blog:
        • Masuk / Login ke  Blog sobat
        • Pilih Menu Design  > > Seting Elemen Widget Arsip Blog pakai model Hierarki
        • Lalu Simpan / Save 
        • Selanjutnya sobat masuk ke menu >> pilih  Edit HTML
        • Kemudian cari kode seperti dibawah ini, untuk mempermudah pencarian gunakan Ctrl + F dengan memasukan salah satu kode <div id='ArchiveList'> ke dalam kotak pencarian.
        <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
                  <b:includable id='main'>
                  <b:if cond='data:title'>
                  <h2><data:title/></h2>
                  </b:if>
                  <div class='widget-content'>
                  <div id='ArchiveList'>
                  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
                  <b:if cond='data:style == &quot;HIERARCHY&quot;'>
                  <b:include data='data' name='interval'/>
                  </b:if>
                  <b:if cond='data:style == &quot;FLAT&quot;'>
                  <b:include data='data' name='flat'/>
                  </b:if>
                  <b:if cond='data:style == &quot;MENU&quot;'>
                  <b:include data='data' name='menu'/>
                  </b:if>
                  </div>
                  </div>
                  <b:include name='quickedit'/>
        • Setelah ketemu  kode tadi sisipkan kode dibawah ini tepat diatas kode <div id='ArchiveList'>
        <div style='overflow:auto; width:ancho; height:100px;'>
        • Tambahkan kode </div> diatas <b:include name='quickedit'/>
        • Tampilan keseluruhan kode setelah di sisipkan kode tambahan tadi menjadi:
        <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
                  <b:includable id='main'>
                  <b:if cond='data:title'>
                  <h2><data:title/></h2>
                  </b:if>
                  <div class='widget-content'>
                  <div style='overflow:auto; width:ancho; height:100px;'>
                  <div id='ArchiveList'>
                  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
                  <b:if cond='data:style == &quot;HIERARCHY&quot;'>
                  <b:include data='data' name='interval'/>
                  </b:if>
                  <b:if cond='data:style == &quot;FLAT&quot;'>
                  <b:include data='data' name='flat'/>
                  </b:if>
                  <b:if cond='data:style == &quot;MENU&quot;'>
                  <b:include data='data' name='menu'/>
                  </b:if>
                  </div>
                  </div></div>
                  <b:include name='quickedit'/>
        • Klik Save / Simpan Template. 
        • Selasai.
        Tampilan Arsip Blog setelah di pasang kode model menu scroll, seperti dibawah ini:

        arsip blog menu scroll
        Catatan:
        • Sebelum melakukan Edit HTML Template blog, selalu  membiasakan back up template dengan cara unduh template lengkap terlebih dahulu  untuk menjaga apabila terjadi  kegagalan pasang saat proses edit HTML berlangsung.
        • Kode yang ditambahkan berikut ini, <div style='overflow:auto; width:ancho; height:100px;'>, angka 100px pada height menunjukan tinggi dari scroll. Silahkan atur sesuai selera sobat.
        • Sebelum melakukan edit HTML untuk merubah tampilan arsip blog dengan model scroll, pastikan kita telah merubah model arsip blog kita menjadi model hierarki terlebih dahulu. Untuk tampilannya apakah dimuat perbulan atau perminggu tidak masalah.
        Semoga bermanfaat dan sampai jumpa..

        Sumber: http://panduansederhana.blogspot.com/2012/03/cara-membuat-tampilan-menu-scroll-pada.html

        Cara Membuat Related Post Scroll Di Blog


        Flamboyan68 - Apa kabarnya, sob? Saya kembali untuk share ria dengan sobat semua dengan postingan kali ini tentang Cara Membuat Related Post Scroll Di Blog, Related Post.

        Atau dalam bahasa sehari-harinya tiada lain adalah Artikel Terkait yang merupakan sebuah elemen pada blogger yang berfungsi untuk menampilkan beberapa judul Artikel lain yang tentunya masih berkaitan dengan artikel yang sedang dibaca oleh pengunjung.  

        Related Post sangat bermanfaat sekali untuk meningkatkan PageView pada Blog dan  banyak manfaat lainnya.

        Untuk itulah saya akan share dengan sobat semua,  dan bagi sobat yang berminat silahkan ikuti cara dan langkah dibawah ini :
        1. Login / Masuk ke akun blogger sobat
        2. Kemudian masuk ke >  Template  lalu pilih > Edit HTML
        3. Dan carilah kode <div class='post-footer-line post-footer-line-1'> pakailah CTRL + F untuk mempermudah pencarian.
        4. Apabila sudah menemukan kode tadi, sobat akan menemukan 2 kode dan pilihlah yang pertama.
        5. Selanjutnya copy kode script dibawah ini:

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


        6. Dan paste kode script tadi tepat di bawah kode <div class='post-footer-line post-footer-line-1'>.
        7. Simpan / Save template.
        8. Selesai.
        9. Untuk melihat hasilnya sobat bukalah salah satu artikel sobat. 

        Note:

        * <h2>Artikel Terkait:</h2> sobat bisa menggantinya sesuai selera seperti Related Post.

        * <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas, 1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.

        * maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan

          Selamat mencoba dan semoga bermanfaat...

          Cara Membuat Kotak Admin Di Blog

          Flamboyan68  - Ada banyak cara yang bisa kita lakukan dalam memperindah blog seperti halnya sebuah rumah, diperindah, dipercantik sehingga membuat penghuni dan tamu yang datang bisa berlama-lama dan betah untuk tinggal. Lho kok ngelantur hehehe....postingan kali ini saya akan share tentang " Cara Membuat kotak Admin Di Blog " buat sobat nubie semua. Sobat-sobat semua bisa mengikuti cara dan langkah di bawah ini bila berkenan dan berniat untuk memasangnya di blog sobat, yu ikutin saya......
          • Seperti biasa Masuk / Login Ke Blogger sobat
          • Klik  Template  >> Edit HTML  ( tapi sebelumnya sobat backup dulu template nya dengan unduh template lengkap untuk jaga-jaga apabila terjadi kegagalan dalam edit html nya )
          • Klik  Edit HTML 
          • Kemudian cari kode ]]></b:skin> untuk mempermudah pencarian kode pakailah Ctrl + F
          • Apabila sudah menemukan kode tadi, copy kan kode di bawah ini dan letakan tepat diatas kode ]]></b:skin>

           .admin-text{
          display:block;
          width:auto;
          background:#CFE2E0;
          border:2px solid #fff;
          box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;
          padding:0;
          margin:30px 0 10px 0;
          font:normal 12px Arial, Sans-Serif;
          color:#222;
          }
          .admin-text .kontainer{padding:5px;}
          .admin-text h4{
          background:#3D3D3D;
          border:none;
          border-bottom:1px solid #FFFFFF;
          color:#fff;
          text-transform:normal;
          text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
          font:bold 12px Arial,Sans-Serif;
          padding:5px 10px;
          margin:0 0 0 0;
          display:block;
          }
          .admin-text h4 a{color:##FFFFFF;}
          .admin-text img{
          width:70px;
          height:70px;
          margin:0 10px 0 0;
          float:left;
          border:1px solid #FFFFFF;
          padding:2px;
          background:#3D3D3D;
          box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
          }
           




          • Kemudian cari lahi kode <div class='post-footer'> untuk mempermudah pencarian kode pakailah Ctrl + F sobat pasti akan menemukan lebih dari 1 kode tersebut.
          • Apabila sudah menemukan kode tadi, copy kan kode di bawah ini dan letakan tepat diatas kode <div class='post-footer'>



          <!-- Box Admin -->
          <b:if cond='data:blog.pageType == "item"'>
          <div class='admin-text'>
          <h4>
          Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~Anda sedang membaca Artikel tentang</h4>
          <div class='kontainer'>
          <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN1VuaETKpmY7HKQApyA-zvZAqTuluhCAmahhllt1SCN4JKRAzfzt09VXhIfxvawnxEN7PdOuWKTLy0VWCoNSFfHwXPep72L6girOhKyAOO9WMkiBUTklQ8olnGbT7Tek196yR3_HugNY/s1600/IMG00266-20120908-1639.jpg'/>
          Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> Pada Tanggal <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan Saran dapat Anda sampaikan melalui kotak komentar. Dilarang Mengcopy Artikel Tanpa sepenge tahuan Admin atau Tidak menyertakan Link Sumber Dimana Artikel Berasal. Jika, Melanggar, Link Akan Di laporkan dan Akan Di hapus.
          <div class='backlink'>
          <textarea  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>
          </div>
          <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
          <a href='http://your-belajarblog.blogspot.com/2013/01/cara-membuat-kotak-admin-di-blogger.html' target='_blank'>:: Get this widget ! ::</a></span></p>
          <div style='clear:both;'/>
          </div>
          </div>
          </b:if>
          <!-- Box Admin -->
          • Terakhir Save / Simpan Template sobat
          • Selesai
          • Untuk melihat hasil sobat klik sembarang salah satu artikel blog sobat, untuk melihat munculnya kotak admin di bawah postingan.
          Demikian postingan ini saya akhiri semoga bermanfaat, selamat mencoba dan sampai jumpa...


          sumber: http://your-belajarblog.blogspot.com/2013/01/cara-membuat-kotak-admin-di-blogger.html

          Kotak Komentar Bergaya Warna Dengan CSS3 Di Blog

          Screenshot Gaya Warna CSS3


          Flamboyan68 - Pada saat sobat membaca artikel di sebuah blog, sobat semua pasti akan akan menjumpai yang namanya kotak komentar yang disediakan khusus bagi pembaca atau pengunjung untuk meninggalkan komentar sebagai respons terhadap artikel tersebut. Komentar blog salah satu bagian penting dari blog,  pengunjung bisa menyuarakan opininya pada postingan artikel di blog. Manfaat komentar blog bagi blogger ibaratnya darah bagi sebuah blog hehehe..pilosofis banget.  Dengan mendorong pembaca blog untuk meninggalkan komentar serta memberikan respons yang cepat terhadap komentar yang ditinggalkan oleh pembaca sobat sehingga mereka merasa dihargai. Ibaratnya anda tidak suka ketika diabaikan apabila anda menyapa seseorang, maka jangan mengabaikan pembaca blog anda ketika mereka menyapa anda melalui sebuah komentar.

          Maka untuk postingan kali ini saya akan berbagi dengan sobat semua tentang memperindah kotak komentar dengan gaya warna komentar blogger. Gaya Warna Komentar Blogger ini menggunakan kode-kode CSS3 untuk bisa menghiasinya dengan warna yang cukup beragam, dan terdapat 3 warna. Fitur yang terdapat pada komentar ini adalah terdapat nomor komentar yang diterbitkan, 3 Gaya warna sebagai penghias komentar, dan Pita Pemilik blog yang muncul jika sobat semua berkomentar terletak di atas kanan.

          Apabila sobat semua tertarik bisa mengikuti cara dan langkah di bawah ini :

          * Masuk ke akun Dashboard Blogger sobat.
          * Kemudian klik menu Template  >> seperti biasa backup dulu template sobat guna menghindari kegagalan  pasang.
          * Lalu klik >> Edit HTML.
          * Dan sobat cari kode ]]></b:skin> untuk mempermudah pencarian gunakan CTRL+F.
          * Setelah ketemu kode tadi, masuk Kode dibawah ini tepat diatas kode ]]></b:skin> :
          1. Kotak komentar bergaya warna biru :
          Masukan Kode Berikut ini:

          /*Start Blogger Threaded Comments Stylish Colors*/
          #comments{overflow:hidden}
          #comments h4{display:inline;padding:10px;line-height:40px}
          #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
          #comments h4,.comments .continue a{background:#1e05d8}
          #comments h4,.comments .user a,.comments .continue a{font-size:16px}
          #comments h4,.comments .continue a{font-weight:normal;color:#fff}
          #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}
          #comments .avatar-image-container img{border:0}
          .comment-thread{color:#111}
          .comment-thread a{color:#777}
          .comment-thread ol{margin:0 0 20px}
          .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
          .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
          .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
          .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
          .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
          .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsCntPfDf0wE-bAKYGcwzYMsBJl66uy1bY2UhoSwF7vhZNzFMgwkvojjWRoSL4vw2phC4IOd_JAij1Zyd_o-ERYs3Yn3PzK4M_KjK7C4oRmCYWcwuSqYiog5_O1ElSGgl0eJZOAwH1m58/h120/pita+berwarna+biru.gif);width:36px;height:36px}
          .comments .comments-content .inline-thread{padding:0 0 0 20px}
          .comments .comments-content .comment-replies{margin-top:0}
          .comments .comment-content{padding:5px 0;line-height:1.4em}
          .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
          .comments .comment-thread.inline-thread .comment{width:auto}
          .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
          .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
          .comments .comment-thread.inline-thread .comment-block{margin-left:48px}
          .comments .comment-thread.inline-thread .user a{font-size:13px}
          .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
          .comments .continue{border-top:0;width:100%}
          .comments .continue a{padding:10px 0;text-align:center}
          .comment .continue{display:none}
          #comment-editor{width:103%!important}
          .comment-form{width:100%;max-width:100%}
          /*End Blogger Threaded Comments Stylish Colors*/


          2. Kotak komentar bergaya warna merah muda :
          Masukan Kode Berikut ini:

          /*Start Blogger Threaded Comments Stylish Colors*/
          #comments{overflow:hidden}
          #comments h4{display:inline;padding:10px;line-height:40px}
          #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
          #comments h4,.comments .continue a{background:#d80556}
          #comments h4,.comments .user a,.comments .continue a{font-size:16px}
          #comments h4,.comments .continue a{font-weight:normal;color:#fff}
          #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
          #comments .avatar-image-container img{border:0}
          .comment-thread{color:#111}
          .comment-thread a{color:#777}
          .comment-thread ol{margin:0 0 20px}
          .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
          .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
          .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
          .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
          .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
          .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDsgSzm9Tu8QqLRfWX1e2Ed-v1SLVBYHRqrET6KzoZxQsWRhY5Ad_INBhahA8m4F0wYW0hxEPIbV2ny_ZjTelSvQ69Pgb_X7yaebg_RADi4L9-MJY0DoAbLBjryFR6auQn8o0iCniH9-M8/h120/pita+berwarna+merah+muda.png);width:36px;height:36px}
          .comments .comments-content .inline-thread{padding:0 0 0 20px}
          .comments .comments-content .comment-replies{margin-top:0}
          .comments .comment-content{padding:5px 0;line-height:1.4em}
          .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
          .comments .comment-thread.inline-thread .comment{width:auto}
          .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
          .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
          .comments .comment-thread.inline-thread .comment-block{margin-left:48px}
          .comments .comment-thread.inline-thread .user a{font-size:13px}
          .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
          .comments .continue{border-top:0;width:100%}
          .comments .continue a{padding:10px 0;text-align:center}
          .comment .continue{display:none}
          #comment-editor{width:103%!important}
          .comment-form{width:100%;max-width:100%}
          /*End Blogger Threaded Comments Stylish Colors*/

          3. Kotak komentar bergaya warna merah muda :
          Masukan Kode Berikut ini:

          #comments{overflow:hidden}
          #comments h4{display:inline;padding:10px;line-height:40px}
          #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
          #comments h4,.comments .continue a{background:#56d805}
          #comments h4,.comments .user a,.comments .continue a{font-size:16px}
          #comments h4,.comments .continue a{font-weight:normal;color:#fff}
          #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}
          #comments .avatar-image-container img{border:0}
          .comment-thread{color:#111}
          .comment-thread a{color:#777}
          .comment-thread ol{margin:0 0 20px}
          .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
          .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
          .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
          .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
          .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
          .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5d5nbv5c2n5Gkqd1BBipppPZu4gKMMiualsbmdEnm8JL0miFB00wLrpp8sT4gbJ_GsSRCGU3lXEj2s16IuUw-d1cPRbPQBz2kqARv6puiqBSzMSckykweaeshrZpLIrsQyAhDiT8Jy5vT/h120/pita+berwarna+hijau.gif);width:36px;height:36px}
          .comments .comments-content .inline-thread{padding:0 0 0 20px}
          .comments .comments-content .comment-replies{margin-top:0}
          .comments .comment-content{padding:5px 0;line-height:1.4em}
          .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
          .comments .comment-thread.inline-thread .comment{width:auto}
          .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
          .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
          .comments .comment-thread.inline-thread .comment-block{margin-left:48px}
          .comments .comment-thread.inline-thread .user a{font-size:13px}
          .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
          .comments .continue{border-top:0;width:100%}
          .comments .continue a{padding:10px 0;text-align:center}
          .comment .continue{display:none}
          #comment-editor{width:103%!important}
          .comment-form{width:100%;max-width:100%}

          * Terakhir Simpan / Save Template. Lebih bagusnya sobat Pratinjau dulu sebelum di simpan/save.
          Selamat mencoba dan semoga bermanfaat....

          http://your-belajarblog.blogspot.com/2013/06/cara-menambahkan-gaya-warna-dengan-css3.html 
          Blog flamboyan68.blogspot.com
          Apabila anda ingin mendapatkan artikel terbaru dari blog flamboyan68 lewat pesan email gratis. Silahkan tulis alamat email anda di kotak yang tersedia bawah ini


          Supported by Blogaul

          Sobat Blogger