Blog Deniededen : 12/18/13

Home » Archive for 12/18/13

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.

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

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

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='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=90&action=like& font=arial&colorscheme=light&height=21"' 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 + "_ArchiveList"'>
          <b:if cond='data:style == "HIERARCHY"'>
          <b:include data='data' name='interval'/>
          </b:if>
          <b:if cond='data:style == "FLAT"'>
          <b:include data='data' name='flat'/>
          </b:if>
          <b:if cond='data:style == "MENU"'>
          <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 + "_ArchiveList"'>
          <b:if cond='data:style == "HIERARCHY"'>
          <b:include data='data' name='interval'/>
          </b:if>
          <b:if cond='data:style == "FLAT"'>
          <b:include data='data' name='flat'/>
          </b:if>
          <b:if cond='data:style == "MENU"'>
          <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 == "item"'>
<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 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < 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'>

<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>

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

Cara Membuat Satu Kolom Diatas Footer Pada Blog

Flamboyan68 - Apa kabar sobat? kabar baik pastinya postingan ini masih lanjutan dari cara membuat 2 kolom footer di blog pada dasarnya sama yang membedakan hanya pada banyaknya kolom/ruang widget. Widget ini bisa di samakan dengan cara membuat satu kolom dibawah header dan penerapannya cukup mudah. Sobat blogger yang memasang iklan di blognya pastinya memerlukan widget ini untuk memasang iklan ukuran 726x90 atau untuk memasang widget lainnya.

Untuk pemasangan kode harap diperhatikan dimana setiap template mempunyai kode css yang berbeda, saran saya silahkan sobat sesuaikan kode blog template dengan kode yang akan di pasang berikut ini, dengan harapan pemasangannya dapat berjalan dengan sempurna, perfect!! he...he..ck..ck..

Untuk pemasangannya sobat bisa mengikuti cara dan langkah di bawah ini:

Klik template > edit html ( backup terlebih dahulu template sobat )

Kemudian sobat cari kode ]]></b:skin> gunakan ctrl + F untuk mempermudah pencarian

Apabila sudah ketemu sobat copy kode di bawah ini dan paste tepat diatas kode ]]></b:skin>

#oneupperfooter{margin:10px 0;padding:2px;width:100%;}

Lalu sobat cari kembali kode <div id='footer'>

Bila sudah ketemu copy kode di bawah ini dan paste tepat dibawah <div id='footer'>

<b:section class='footer' id='oneupperfooter' preferred='yes'/>

Simpan template

Untuk melihat hasil sobat kembali ke halaman tata letak dan lakukan refresh / reload untuk melihat kolom baru. Dan hasilnya akan terlihat seperti gambar di bawah ini :

Satu kolom di atas footer

Demikian sobat selamat mencoba dan semoga bermanfaat..
Happy blogging...........

Cara Membuat Menu dan Sub Menu Dropdown di Blog

Flamboyan68 - Menu dropdown pada umumnya berisikan link untuk bisa akses ke suatu halaman tertentu. Menu dropdown memiliki sub menu yang tampilannya memanjang ke bawah makanya menu ini di sebut menu dropdown.

Fitur menu dropdown ini menggunakan sedikit tambahan pada bagian style CSS, menggunakan efek melengkung pada sisi kiri kanan ujungnya dan tidak membentuk siku. Cara pemasangannya mudah dan sobat bisa mengikuti cara dan langkah di bawah ini.

Login ke akun blogger sobat
Lalu klik template > edit html
Kemudian sobat cari kode ]]></b:skin> gunakan CTRL+F untuk memudahkan pencarian
Setelah ketemu copy kode dibawah ini dan paste tepat di atas kode ]]></b:skin>

#DropdownMenu {
    background:#ff6803;
border-radius:6px;
    width: 880px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color:#FFFFFF;
    font-weight: bold;
    margin-bottom: 30px;
    padding: 2px;


} 
#Dropdownbox {
    width: 875px;
border-radius:6px;
    float: left;
    margin: 0;
    padding: 0;
}

#strike { 
border-radius:6px;
    margin: 0;
    padding: 0;
}
#strike ul {
border-radius:6px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li {
border-radius:6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
    color:#FFFFFF;
    display: block;
    font-size: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    margin: 0;
    padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
    background:#FFFFFF;
    color:#ff6803;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
      background:#ff6803;
    width: 150px;
    color:#FFFFFF;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
     background:#FFFFFF;
    color:#ff6803;
    padding: 7px 10px;
}
#strike li {
border-radius:6px;
    float: left;
    padding: 0;
}
#strike li ul {
border-radius:6px;
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;
}
#strike li ul a {
border-radius:6px;
    width: 140px;
}
#strike li ul ul {
border-radius:6px;
    margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
    left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
    left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
    position: static;
}

Kode warna merah #ff6803 dan putih itu adalah kode warna background silahkan ganti sesuai keinginan sobat. Kode #FFFFFF adalah kode untuk warna tulisan di menu. Silahkan anda ganti bila memang diperlukan. Untuk menentukan kode warna silahkan sobat cari disini Kode Warna/Hex Code.
Simpan template

Langkah selanjutnya yaitu ;

Selanjutnya sobat menuju ke menu blogger klik Tata Letak
Klik Tambah Gadget > Pilih Html/Javascript
Copy kode script di bawah ini dan paste di kolom html/javascript

<div id="DropdownMenu">
       <div id="Dropdownbox">
      <ul id="strike">
        <li><a href="#">Menu1</a></li>
        <li>
          <a href="#">Menu2</a>
          <ul>
            <li>
              <a href="#">Sub Menu 2</a>
              <ul>
                <li><a href="#">Sub Sub Menu 2</a></li>
                <li><a href="#">Sub Sub Menu 2</a></li>
                <li><a href="#">Sub Sub Menu 2</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Menu 3</a></li>
            <li><a href="#">Sub Menu 4</a></li>
            <li><a href="#">Sub Menu 5</a></li>
            <li><a href="#">Sub Menu 6</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
      </ul>
    </div>
  </div>

Silahkan sobat ganti tulisan Menu1, Menu 2 dan seterusnya dengan nama menu yang sobat inginkan dan tanda pagar "#" ini adalah alamat link dari menu yang sobat buat.
Langkah terakhir simpan.

Selamat mencoba dan semoga bermanfaat.
source

Cara Mudah Membuat Menu Bar Dropdown Di Blog

Flamboyan68 - Para blogger dalam setiap aktivitas blogging pastinya selalu menyempatkan diri untuk mengevaluasi perfomance/tampilan template blognya. Apa yang kurang atau yang harus di tambah perfomance blog dengan harapan supaya para visitor betah untuk berlama-lama dan lebih penting lagi adalah memberikan kemudahan kepada visitor untuk mengeksplore semua artikel blog kita. Salah satunya adalah tampilan menu bar dengan style dropdown yang merupakan salah satu opsi baik apabila sobat menginginkan tampilan semua halaman blog di lihat dengan mudah oleh visitor.

Dan pada kesempatan jumat pagi yang cerah ini saya akan berbagi artikel dengan sobat blogger tentang Cara Mudah Membuat Menu Bar Dropdown Di Blog. Di bawah ini ada cara dan langkah yang bisa sobat ikuti apabila sobat akan bereksperimen, silahkan sobat simak dan harapan saya semoga bermanfaat :

( + ) Login ke akun blogger sobat.

( + ) Klik template > edit HTML (cat : terlebih dahulu backup templat sobat).

( + ) Kemudian sobat cari kode ]]></b:skin> gunakan Ctrl + F untuk mempermudah pencarian.

( + ) Silahkan copy kode script di bawah ini dan paste/letakan tepat di atas kode ]]></b:skin>

#menubar{
border-bottom:4px solid #ff0000;
width:1025px;
height:32px;
background:#000000;
float:center;
margin-bottom:3px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a {
background: #ff0000;
color: #fff;
text-decoration:none;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #ff0000;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #000000;
color: #ffffff;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##ff0000;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}

6. Selanjutnya sobat cari kode <div id="content-wrapper">

7. Copy kode script di bawah ini dan paste/letakan di atas kode <div id="content-wrapper">

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://flamboyan68.blogspot.com/2013/05/sitemap_10.html'>Sitemap</a></li>
<li><a href='http://flamboyan68.blogspot.com/2013/05/blog.html'>Tutorial Blog</a>
<ul>
<li><a href='http://flamboyan68.blogspot.com/2013/06/seo-friendly.html'>SEO</a></li>
<li><a href='http://flamboyan68.blogspot.com/2013/05/artikel-computer.html'>Computer</a></li>
<li><a href='http://flamboyan68.blogspot.com/2013/05/health.html'>Health</a></li>
</ul></li>
</ul>
</div>

8. Simpan Template.

Ket :

Silahkan sobat sesuaikan kode warna garis pada bawah menu bar #ff0000, lebar menu bar: 1025px, warna latar/background menu bar #000000.
Sobat ganti tulisan warna biru yaitu nama menu bar sesuai dengan selera sobat.
Ganti link warna merah dengan link sobat.
selebihnya silahkan sobat modifikasi sendiri sesuai selera

Demikian ulasan saya mengenai Cara Mudah Membuat Menu Bar Dropdown Di Blog, selamaat mencoba dan semoga bermanfaat.

happy blogging.............................

Blog Deniededen

Pageviews - Info Blog

Visitor Blog

Cara Membuat Script Widget Kode Warna HTML 4 Di Blog

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

Cara menambah gadget di atas header

Cara Memasang Widget Popular Post Berwarna Di Blog

Cara Menampilkan Menu Scroll Pada Arsip Blog

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

Cara Membuat Related Post Scroll Di Blog

Cara Membuat Kotak Admin Di Blog

Kotak Komentar Bergaya Warna Dengan CSS3 Di Blog

Cara Membuat Satu Kolom Diatas Footer Pada Blog

Cara Membuat Menu dan Sub Menu Dropdown di Blog

Cara Mudah Membuat Menu Bar Dropdown Di Blog

Sobat Blogger

Translator

Cari Artikel

Rekomendasi Artikel

Arsip Blog

Labels Blog

Pengelola Blog