Blog Deniededen : Widget

Home » Widget

Showing posts with label Widget. Show all posts

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

Cara Membuat Widget Auto Ping dan Ping Fast

Flamboyan68 - Postingan kali ini saya akan berbagi tentang bagaimana cara membuat widget auto ping dan ping fast. Widget ini merupakan media / alat untuk memberitahukan kepada Search Engine agar postingan artikel yang baru kita buat cepat di ketahui oleh google dan berada di halaman pertama google.

Cara memasang dan menggunakannya pun mudah sekali, yaitu ketika kita telah selesai mempublikasikan artikel postingan lalu kita pergi ke halaman artikel yang telah dibuat tadi, lalu klik widget ping fast atau widget auto ping yang telah di pasang di blog kita.

Manfaat memasang auto ping sangat besar bagi blog kita, selain ping secara otomatis widget auto ping ini dapat meningkatkan pengunjung blog kita dan lebih penting lagi mengoptimalkan, meningkatkan ranking SEO blog. Berikut ini ada cara dan langkah-langkah yang bisa sobat ikuti, antara lain :

Login / Masuk ke Blog sobat
Pilih Tata Letak >> add gadget / tambah gadget >> Klik HTML Javascript

Meletakan widget ini terserah dan sesuai selera sobat

Copy kode script di bawah ini dan paste kan script pada kolom html javascript

Widget auto ping

<a href="http://www.auto-ping.com/pinger"><img src="http://www.auto-ping.com/iping.php?

aut=EF14380489BD68920487F89D5739455201155A64B924

A54A750E6D8DD2AD0BC1854A7AD421A02FC8C1" alt="Ping your blog, website, or RSS feed for Free" style="border:0px solid;" /></a>

Widget ping fast

<a href="http://www.ping-fast.com/ping-my-blog6721"><img src="http://www.ping-fast.com/iping.php?aut=EC153B028BB768920487F89D5739455201155

A64B924A54A750E6D8DD2AD0BC1854A7AD421A02FC8C1" alt="ping fast my blog, website, or RSS feed for Free" style="border:0px solid;" /></a>

Selanjutnya klik simpan
Selesai

Sekian dulu postingan kali ini ya, sob. Semoga bermanfaat dan sampai jumpa..

Cara Membuat Berita News Ticker Di Blog

Flamboyan68 - Apa kabarnya, sobat?kabar baik tentunya. Saya masih menyelesaikan acara kemarin yaitu bersih-bersih dan mengeluarkan semua artikel yang lama mengendap di draft jadwal posting hehe..biar lebih bersih gitu. Sebenarnya widget ini nggak penting amat sih cuma nggak ada salahnya saya posting dan backup apabila nanti membutuh widget ini jadi nggak usah wara-wiri essensi memasang widget ini sih biar enggak ketinggalan informasi terkini sambil blogging bisa dapat berita terbaru lewat rss feed-nya portal - portal berita terbesar di indonesia, Kompas, Liputan 6, Metro TV News, Detik, Vivanews, Republika Online, Tribunnews, JPNN, Okezone dan lain-lain. Selain itu tentunya juga membuat blog sobat semakin dinamis dengan update berita terkini. Gambar atau screenshot widget ini sobat bisa tengok seperti di bawah ini :

Widget ini diambil dari rss feed dari seluruh portal berita yang terindeks di Google, walaupun sederhana tapi manfaatnya sangat besar buat saya, sobat dan pengunjung blog sobat tentunya. Pemasangnya pun sangat mudah, cukup sobat tambahkan atau add Gadget, kemudian pilih HTML/JavaScript, setelah itu masukkan kode dibawah ini dan lalu simpan / save dan selesai nggak repot kan, sob?

Memasang Widget Headline News OnLine Di Blog

Flamboyan68 - Robert Tyell mengemukakan definisi tentang arti berita. Berita adalah informasi yang baru, menarik perhatian, mempengaruhi orang banyak, dan mampu membangkitkan selera masyarakat untuk mengikutinya. Pengertian diatas mengandung makna bahwa informasi-indormasi yang terangkum dalam sebuah berita dapat mempengaruhi dan menjadi bagian dari aktifitas kehidupan manusia sehari-hari. Rangkuman informasi yang menjadi sebuah berita itu meliputi; tentang politik, ekonomi, kesehatan, olahraga, entertainment dan lain-lain. Semakin gencarnya berita membuat para media salah satunya blogger untuk berlomba-lomba menampilkan berita-berita update dari berita online dengan memasang widget di blog masing-masing, seperti halnya saya yang kali ini akan memposting tentang "Memasang Widget Headline News Online Di Blog"

Pemasangan widget ini bisa dilakukan dengan cara :

Default News Blogger yang sudah tersedia di blog yang disediakan oleh pihak google, caranya ringan dengan langkah-langkah sebagai berikut:
- Masuk ke rancangan pada blogger.
- Pilih add gadget / tambahkan gadget
- Setelah itu akan muncul pilihan apa yang ingin anda tambahkan.
- Pilih dan klik Newsreel
- Pada setingan default blogger akan terlihat Apple,google,microsoft. anda tinggal mengganti atau menambahkan pakai koma dan tuliskan sumber beritanya.
  contoh : detik,okezone,vivanews,liputan6
Selanjutnya memasang headlines news lewat rss di rsspump
rsspump merupakan situs yang menyediakan atau memberikan kode script untuk berita yang kita inginkan. Yang kita butuhkan di sini cukup alamat URL rss dari situs berita yang ingin anda tayangkan di blog, tetapi sebelum menuju rsspump kita harus membutuhkan URL rss terlebih dahulu.

Contoh URL rss :

http://www.liputan6.com/feed/rss2/

http://www.metrotvnews.com/rss/berita.asp

http://www.okezone.com/rss

http://news.okezone.com/rss

http://economy.okezone.com/rss

http://lifestyle.okezone.com/rss

http://celebrity.okezone.com/rss

http://sports.okezone.com/rss

http://techno.okezone.com/rss

gambar rsspump.com

Apabila semuanya sudah ok, langsung masuk ke alamatnya.
- Klik http://www.rsspump.com/
- Paste kan alamat Url rss, pada gambar terletak di bawah alamat url rss yang bertulis merah.
- Klik tombol add.
- Penyesuian Set Options & Layout, anda tinggal menentukan sendiri sesuai keinginan.
- Preview tampilan berita yang akan muncul di blog sobat.
- Untuk kode javascript silahkan di copy dan paste kan pada widget html / javascript pada blogger.
- Kemudian Simpan / Save
- Selesai.
Demikian langkah pemasangan widget headlines news online di blog, semoga bermanfaat bagi anda selamat mencoba dan sampai jumpa..

sumber : http://ariskoerniawan.blogspot.com/2011/04/pasang-berita-headline-news-online.html

Cara Membuat 2 Kolom Footer Di Blog

Flamboyan68 - Postingan kali ini yaitu kembali lagi ke awal pada saat belajar ng_blog, dimana pada masa-masa itu sebagai blogger baru selalu dan selalu mencari kode script untuk di tempel di blogku tentunya. Dari hilir mudiknya saya mencari script ada yang terlupakan dan sangat saya butuhkan pada saat dibuatnya postingan ini, yaitu cara membuat 2 kolom footer di blog.

Dan postingan ini sudah lama sekali bersemedi di ruangan draft, hehehe..essensi dari artikel ini dirasa cukup penting bagi yang mengoleksi beragam iklan di blognya termasuk saya, untuk mengatur letak/posisi iklan/widgets dan akan di bagi menjadi 2 bagian yang setiap bagian bisa sobat isi dengan script iklan/widget.

Silahkan sobat ikuti cara dan langkah di bawah ini :

Login ke akun blogger sobat
Lalu pilih template > edit html
Setelah itu cari kode ]]></b:skin> Untuk mempermudah sobat bisa gunakan F3 atau Ctrl+F
Copy lalu Pastekan kode berikut tepat di atas kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

Setelah itu sobat cari kode :

Atau

Copy dan Pastekan kode di bawah ini tepat di bawah kode diatas tadi :

Simpan template sobat

Selamat mencoba dan semoga bermanfaat.

happy blogging....

Blog Deniededen

Pageviews - Info Blog

Visitor Blog

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

Cara Membuat Widget Auto Ping dan Ping Fast

Cara Membuat Berita News Ticker Di Blog

Memasang Widget Headline News OnLine Di Blog

Cara Membuat 2 Kolom Footer Di Blog

Sobat Blogger

Translator

Cari Artikel

Rekomendasi Artikel

Arsip Blog

Labels Blog

Pengelola Blog