KREASI BB.2

Tampilkan postingan dengan label Kreasi. Tampilkan semua postingan

Navbar Auto-Hidden disisi kanan

Screen shot

Sebelumnya saya membahas tentang Cara Membuat Navbar Menu Bertingkat, sekarang kembali saya akan membahas Menu Navigasi yang pada umumnya Navbar berada diatas atau dibawah Header Blog, tapi yang ini letaknya di sisi kanan Blog dengan variasi Auto Hidden :y; [akan keluar kalau mouse komputer kawan dekatkan, dan akan kembali sembunyi bila mouse kawan pindahkan] yang saya beri Nama Menu Navigasi Auto Hiden :z;

Setelah kawan melihat dan mencoba Demonya, mari kita lanjutkan ke Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML/JavaScript atau bisa digabung dengan Gadget yang ada :w;
Copas Script berikut kedalamnya

<style> ul#navigation1 { position: fixed; margin: 0px; padding: 0px; top: 150px; right: 0px; list-style: none; z-index:9999; } ul#navigation1 li { width: 42px; border:0px; display: block; padding:1px; } ul#navigation1 li a { display: block; width: 150px; height: 42px; padding: 20px 5px 0 20px; margin-top: -20px; color: #FFF; text-align: center; font-family:"Tahoma", Verdana; font-size:16px; font-weight:bold; background-color:transparent; background-repeat:no-repeat; background-position:left center; border:0px solid #F00;-moz-border-radius:100px;-khtml-border-radius: 100px;-webkit-border-radius: 100px; opacity: 0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation1 .Home a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDpLqLBB2vZvgTlztslVbXNQ_YLX1gSm1PQ0TGsSM7HXDtU976KvyhNDQTsmilmpL5C_jORWPMmHDj5yUWPeiBUT4NkcnLcN67ROyp_tNBd-jiJ66_i7t91ErlenaGm3p2LomTQaOKK6A/s1600/Home.png); } ul#navigation1 .Kreasi a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrglO5SPJycp1eMlad_ClR3aJUf1WLm4S8mBAgAGb9rYx9VP1jER2P-eatkRGs76cdskcRAXMLlyddEeMH_is0B8hp_rOOf1MS7mApYgAuFDnDoPD3MAkv_QI53yESwtXXFIJguN2qR0/s1600/Kreasi.png); } ul#navigation1 .TipsTrik a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipc6LrULCySu064XlHWcD0N87JmyuELI7vAbxaKrGxJtnDG4N8XmnfYgwAuOEZjmxdxmoI8uGyoCYalScQdcCGrO4uV_f-xYO-PBqAbf93myYPupug2fBe-n0s8hvce2JhhCf9cuRbdws/s1600/Tips+Trik.png); } ul#navigation1 .Tutorial a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9CltV9Ol_GLOJjH22WQvq5gVhKTa1KT62S-9Y-0kI59r6CMHAoAQuGDR9-SnNCKV68nDkN59H1EBkcaggQ5iV2Rf8Yp83RWFIWJtpY1ZY-dO57ydn2FygoSH5S74HBUT5u3W8OQyJxHE/s1600/Tutorial.png); } ul#navigation1 .Widget a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyloyMZ9Y1KV7R33L7RfbZjmt-mOr7bMcGWPGz1u0F_9qh5tt65jyLv-ScbyjArCOLAspY5tQS76mU28sV-xmJDOIEaEGoRS1cC818DRGRkxhzfWaZ2AR-uEg4LsZjVmfa1lAmEdpjZdw/s1600/Widget.png); } ul#navigation1 .Animasi a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCC0-7mEKKAwH3pC4VBemFTERTlec2blxRZYFZWrb9EBjeDqoXs7MbFpM7NzrZ4Zhke-i5GMJ_6rcP_qLniQpIujm_XC60ud1qvVhdoxufyN1XgbD_xZ_b1397SkArsbyUfFj7SIhgRr8/s1600/Navbar.png); } </style> <script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() { $('#navigation1 a').stop().animate({'marginLeft':'5px'},1000); $('#navigation1 > li').hover( function () { $('a',$(this)).stop().animate({'marginLeft':'-112px'},200); }, function () { $('a',$(this)).stop().animate({'marginLeft':'5px'},200); } ); }); </script> <ul id="navigation1"> <li class="Home"><a href="http://blogbego-creation.blogspot.com/" target="_blank" title="Kembali ke Halaman Depan">BERANDA</a></li> <li class="Kreasi"><a href="http://blogbego-creation.blogspot.com/search/label/kreasi" target="_blank" title="Artikel dengan Katagori Kreasi">KREASI</a></li> <li class="TipsTrik"><a href="http://blogbego-creation.blogspot.com/search/label/tips%20trik" target="_blank" title="Artikel dengan Katagori Tips Trik ">TIPS TRIK</a></li> <li class="Tutorial"><a href="http://blogbego-creation.blogspot.com/search/label/tutorial" target="_blank" title="Artikel dengan Katagori Tutorial">TUTORIAL</a></li> <li class="Widget"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Widget">WIDGET</a></li> <li class="Animasi"><a href="http://blogbego-creation.blogspot.com/search/label/widget" target="_blank" title="Artikel dengan Katagori Animasi">ANIMASI</a></li> </ul>

Teks yang berwarna merah adalah Image Navbar, silahkan ganti yang sesuai dengan tampilan,
Teks yang berwarna Violet adalah URL saya silahkan ganti dengan URL Blog kawan begitu juga dengan Judulnya
sedangkan untuk Target="_blank" title=".................." silahkan diganti juga dan bisa dihilangkan

Contoh Image Navbar

Selamat Mencoba, sukses selalu :

Selengkapnya.....

Cara membuat Tulisan Berjalan di Blog

Salam Blogger Indonesia, sekarang saya akan berbagi dengan kawan cara membuat Tulisan Berjalan yang mirip merquee yang penempatannya di Tab / tempat Judul Blog kita dan yang bisa ditaruh di sidebar Blog.

Baiklah mari kita bahas satu persatu :

Caranya :

Cara membuat Tulisan Berjalan di Tab.
Cara membuat Tulisan Berjalan di Sidebar

Masuk ke Account Blogger dengan ID kawan
Pada Dasbor / Rancangan pilih tambah gadget
Klik tanda (+) pada HTML / JavaScript
Copas (copy paste) script berikut kedalamnya

Script No. 1

<script type="text/javascript">

//Created by Title bar Maker (http://www.bosiljak.hr/titlemaker)

function tb8_makeArray(n){

this.length = n;

return this.length;

}

tb8_messages = new tb8_makeArray(6);

tb8_messages[0] = "SELAMAT DATANG !!!";

tb8_messages[1] = "DI TIPS-BLOGBEGO";

tb8_messages[2] = "TERIMA KASIH";

tb8_messages[3] = "KUNJUNGAN DAN";

tb8_messages[4] = "KOMENTAR ANDA";

tb8_messages[5] = "DITUNGGU....!!!";

tb8_rptType = 'infinite';

tb8_rptNbr = 5;

tb8_speed = 100;

tb8_delay = 2000;

var tb8_counter=1;

var tb8_currMsg=0;

var tb8_tekst ="";

var tb8_i=0;

var tb8_TID = null;

function tb8_pisi(){

tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);

document.title = tb8_tekst;

tb8_sp=tb8_speed;

tb8_i++;

if (tb8_i==tb8_messages[tb8_currMsg].length){

tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;

}

if (tb8_currMsg == tb8_messages.length){

if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){

clearTimeout(tb8_TID);

return;

}

tb8_counter++;

tb8_currMsg = 0;

}

tb8_TID = setTimeout("tb8_pisi()", tb8_sp);

}

tb8_pisi()

</script></div>

Usahakan kalimatnya jangan panjang-panjang
Angka 6 menyesuaikan dengan banyaknya baris kalimat
Ganti Tulisan yang berwarna merah sesuai dengan selera kawan
Banyaknya / panjangnya tulisan tanpa batas
Demonya bisa kawan lihat disini
Penempatan scriptnya bisa digabung dengan script yang lainnya.
Kalimat / tulisan tsb akan berjalan dari kiri ke kanan.

Sedangkan yang lainnya :

Copas script berikut pada gadget / elemen atau bisa juga digabung,

Script No. 2

<script language="JavaScript">

var txt="SELAMAT DATANG DI BLOG ILUSTRASI.BLOGSPOT.COM - SEMOGA ANDA NYAMAN DAN PUAS - TERIMA KASIH";

var tipsblogbegotutorial=170;

var fress=null;function judulbloggerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

fress=setTimeout("judulbloggerak()",tipsblogbegotutorial);}judulbloggerak();

</script>

Ganti Tulisan yang berwarna merah sesuai dengan selera kawan.
Kalimat / Tulisan akan berjalan dari kanan ke kiri
Script ini bisa juga ditaruh pada Edit HTML template kawan, yaitu tepat diatas kode </body> letaknya paling bawah.
Demonya ; lihat pada Tab Blog ini

sedangkan tulisan yang bisa tampil di sidebar :

Copas (copy-paste) script berikut kedalam gadget / elemen atau bisa digabung dengan script yang lainnya

Script No. 3

<script language="JavaScript">
var max=0;
function textlist()
{
max=textlist.arguments.length; for (i=0; i<max; i++) this[i]=textlist.arguments[i];
}
tl=new textlist
(
" SUATU KEBANGGAAN APABILA DENGAN BERBAGI KAMI DAPAT MEMBANTU KAWAN....!!! " // Geben Sie hier den zu scrollenden Text ein
);
var x=0; pos=0;
var l=tl[0].length;
function textticker()
{
document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
if(pos++==l)
{
pos=0;
setTimeout("textticker()",1000);
x++;
if(x==max)
x=0;
l=tl[x].length;
} else
setTimeout("textticker()",100);
}
// end -->
</script>
<script language="JavaScript">
</script></div></div>

Ganti tulisan warna merah sesuai dengan selera kawan
Angka 90 warna biru disesuaikan dengan panjangnya kalimat / tulisan yang kawan buat
Tulisan akan tampil dari kiri ke kanan seperti kita sedang menulis
Penempatannya bebas asal panjang tulisan disesuaikan dengan lebar tempat menaruhnya
Demonya : silahkan lihat di atas tempat postingan

Dari ketiga Script tersebut diatas (script No.1 dan Script No. 2) tidak bisa digabung, karena tampilannya sama-sama di Tab Blog (pilih salah satu).

Oh ya simpan Blog kawan dan lihat hasilnya.

Selengkapnya.....

Cara Membuat Pojok Blog Menggulung

Sudah banyak para Blogger membahas cara membuat Pojok Halaman Blog seperti Menggulung yang dalam bahasanya mbah Google dikatakan Pagepeel, disini saya akan berbagi dengan kawan yang saya beri judul Cara Buat Pojok Blog Menggulung :z

Cara Membuatnya :

Masuk ke Account Blogger dengan ID kawan
Pada Dasbor pilih Template
Cari Tag ]]></b:skin>
Copas Script berikut dibawah ]]></b:skin>

<script type='text/javascript'>var untuk ='http://Nama Blog kawan.blogspot.com/'</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/PagePeel.js' type='text/javascript'/>

Ganti text yang berwarna merah [Nama Blog kawan] dengan URL blog kawan
Simpan Template kawan

screenshot

Sekarang buka Blog kawan untuk melihat hasilnya :y
Kalau tak ada masalah hasilnya seperti pada Blog Demo saya itu

Karena sekarang saya sedikit ada kesibukan untuk peng-Editan lebih lanjut tunggu postingan saya berikutnya, tapi jangan lupa berikan Pendapat / Komentar / Saran kawan :r

Selengkapnya.....

Slide sebagai Background Blog

1 komentar

Tempo hari ada kawan Blogger menanyakan cara menampilkan Slide / Animasi pada background Blog, karena kesibukan saya yang paling senang utak-utik Template makanya kelupaan [kejelekan saya sering ganti Template untuk kawan jangan diikuti, karena sangat jelek search engine] :w hehehe lupa nggak nyambung ya............!!!

Kembali ke pokok Artikel yaitu Cara Menampilkan Slide pada background Blog. :z

Sebenarnya kalau kita mau mencoba saya rasa Slide dimana saja bisa ditampilkan sebagai Background, misalnya pada latar belakang Blog, Postingan, Sidebar caranyapun sangat mudah asal sabar dan belajar dari kesalahan yang kita temui :x

OK langsung saja ke Cara dan persiapan yang diperlukan :

Siapkan Image / Gambar dengan ukuran minimal 1020px x 700px paling sedikit 2 Gambar untuk dijadikan Slide [atau dengan kata lain siapkan sebuah slide width=1020px; height=700px;]
Copy Link Slide kawan pada tempat penyimpanan
Masuk Account Blogger ID kawan
Pada Dasbor pilih Template - Edit HTML - lanjutkan
Simpan Template kawan dulu untuk jaga-jaga
Scroll kebawah pelan-pelan sampai pada » body {
Kawan bisa menempatkan Link Slide yang sudah dipersiapkan tadi pada background.

Contoh :

body {

color: #333;

font-family: Cherry Cream Soda, Arial, Tahoma, Verdana;

font-size:13px;

background: rgba(0,16,107,1) none repeat scroll 0 0; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0,16,107,1)', endColorstr='rgba(217,235,249,1)');background:-moz-radial-gradient(top, rgba(0,16,107,1), rgba(217,235,249,1));background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,16,107,1)), to( rgba(217,235,249,1))) no-repeat top center;
}

atau seperti ini :

body{

margin:0 auto 0;

font-family: Cherry Cream Soda, Arial, Tahoma, Verdana;

font-size:13px;
color: #333;

background: #236C95;

}

Kawan cukup mengganti backgroundnya saja dengan Link Slide tadi, maka selengkapnya menjadi :

body {
margin: 0 auto 0;
color: #333;
font-family: Cherry Cream Soda, Arial, Tahoma, Verdana;
font-size:13px;
background: url(http://2.bp.blogspot.com/-tMY2Y27rvM4/T-CCPOsXfBI/AAAAAAAAC4Q/4pt6uzJsItc/s1600/background.gif) no-repeat fixed center center;
}

Jangan lupa simpan Template kawan

Selengkapnya.....

Buat Slide dengan PhotoScape Free

1 komentar

Membuat Slide dengan Photo / Gambar kepunyaan kita sendiri merupakan suatu kebanggan bagi kita sendiri, cuma bagaimana caranya ??? :y

Banyak bertebaran Program / Software tersebut di Dunia Maya yang kita geluti ini, apalagi kalau kita punya dana lebih untuk membelinya, :z Untuk kawan yang seperti saya ini, jangankan untuk membeli Software, untuk agar bisa Internet saja pakai Program Unlimated, tapi kawan jangan berkecil hati karena sekarang saya akan berbagi cara mendapatkan Software Gratis [Free] seperti yang saya pakai ini, namanya » PhotoScape sekali lagi saya sampaikan banyak sekali ada Software seperti ini, cuma yang paling simple dan gampang bagi saya yang bodoh ini PhotoScape sekali lagi maaf bukan Promosi :a

Sebelum kawan mulai membuat Slide / Animasi atau sejenisnya silahkan Download dulu softwarenya atau bisa » disini kawan akan langsung diberikan 3 pilihan Download seperti slide saya diatas

Hasil Download tadi silahkan di Install di Komputer kawan
Selesai di Install, silahkan kawan mencobanya

Perhatikan tanda panah biru dengan bingkai merah untuk membuat Slide / Animasi

Gambar / Image yang saya kurung dengan warna merah [sebelah kanan] adalah untuk memanggil Photo / Image, untuk banyaknya photo bebas dan bisa ditambahkan lagi nanti, dan untuk setting seperti : durasi, ukuran photo, warna latar slide dan sebagainya, termasuk juga seandainya Slide sudah jadi kawan pilih simpan [save] di Komputer dengan nama default Anigif [Ganti sendiri Namanya]
Gambar / Image diatas yang sebelah kiri untuk setting Slide caranya Klik kanan pada salah satu Photo Slide maka akan keluar banyak pilihan seperti : Hapus salah satu photo / semua, memutar photo, maupun merubah tampilan Slide [keatas, kebawah, kanan dan kiri].
Hampir lupa PhotoScape teranyar adalah PhotoScape_V3.6.2,

Selamat ber-Kreasi agar tampilan Blog lebih Menarik

Selengkapnya.....

Slide Daftar Isi Plus Summary

Slide Daftar Isi Plus Summary yang akan saya bahas sekarang hampir sama dengan yang sebelumnya, cuma yang ini punya kelebihan ada Summary [beberapa suku kata isi] :o Berjalan , sekarang saya akan lanjutkan lagi berbagi dengan Artikel yang hampir sama, cuma bedanya kalau yang ini model slide :y
Model ini di publish oleh System of Blog dan sekarang saya akan publish di Blog ini dengan sedikit pengeditan tentunya.
Okey cukup sekian ceritanya, mari kita lanjutkan ke »

Cara membuatnya :

» Masuk Account Blogger dengan ID kawan
» Pada Dasbor pilih Template
» Cari ]]></b:skin>
» Copas script berikut dibawahnya

<style>
#blogbegowrapper{
width: 300px;
height: 110px;
border: 2px solid black;
background-color: #CED0D1;
padding: 10px;
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-border-radius: 5px;
}
.billcontent{
width: 100%;
display:block;
}
</style>

» Simpan Template kawan

Selanjutnya kawan pilih Tata Letak untuk memanggilnya :r

Pilih Tambah Gadget
Pilih tanda Plus [+] pada HTML / JavaScript
Copas Script berikut kedalamnya

<script type="text/javascript">
var billboardeffects=["GradientWipe(GradientSize=1.0 Duration=0.7)", "Inset", "Iris", "Pixelate(MaxSquare=5 enabled=false)", "RadialWipe", "RandomBars", "Slide(slideStyle='push')", "Spiral", "Stretch", "Strips", "Wheel", "ZigZag"]
//var billboardeffects=["Iris"] //Uncomment this line and input one of the effects above (ie: "Iris") for single effect.
var tickspeed=5000 //ticker speed in miliseconds (2000=2 seconds)
var effectduration=500 //Transitional effect duration in miliseconds
var hidecontent_from_legacy=1 //Should content be hidden in legacy browsers- IE4/NS4 (0=no, 1=yes).
var filterid=Math.floor(Math.random()*billboardeffects.length)
document.write('<style type="text/css">\n')
if (document.getElementById)
document.write('.billcontent{display:none;\n'+'filter:progid:DXImageTransform.Microsoft.'+billboardeffects[filterid]+'}\n')
else if (hidecontent_from_legacy)
document.write('#blogbegowrapper{display:none;}')
document.write('</style>\n')
var selectedDiv=0
var totalDivs=0
function contractboard(){
var inc=0
while (document.getElementById("billboard"+inc)){
document.getElementById("billboard"+inc).style.display="none"
inc++
}
}
function expandboard(){
var selectedDivObj=document.getElementById("billboard"+selectedDiv)
contractboard()
if (selectedDivObj.filters){
if (billboardeffects.length>=2){
filterid=Math.floor(Math.random()*billboardeffects.length)
selectedDivObj.style.filter="progid:DXImageTransform.Microsoft."+billboardeffects[filterid]
}
selectedDivObj.filters[0].duration=effectduration/1000
selectedDivObj.filters[0].Apply()
}
selectedDivObj.style.display="block"
if (selectedDivObj.filters)
selectedDivObj.filters[0].Play()
selectedDiv=(selectedDiv<=totalDivs-2)? selectedDiv+1 : 0
setTimeout("expandboard()",tickspeed)
}
function startbill(){
while (document.getElementById("billboard"+totalDivs)!=null)
totalDivs++
if (document.getElementById("billboard0").filters)
tickspeed+=effectduration
expandboard()
}
if (window.addEventListener)
window.addEventListener("load", startbill, false)
else if (window.attachEvent)
window.attachEvent("onload", startbill)
else if (document.getElementById)
window.onload=startbill
</script>
<script>
function rp(json) {
document.write('<div id="blogbegowrapper">');
for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {
document.write('<div id="billboard' + i + '" class="billcontent">');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k <= entry.link.length - 1; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdday = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdyear = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);
if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);
if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</div>');
}
document.write('</div>');
}
</script>
<script>
var showpostdate = true;
var showpostsummary = true;
var numchars = 150;
</script>
<script src="http://blogbego-creation.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

Ganti URL saya dengan URL Blog kawan
Simpan Blog kawan dan lihat hasilnya :z

Selengkapnya.....

Slide Daftar Isi Blog

Sebelumnya saya berbagi dengan kawan Cara Membuat Daftar Isi Plus Komentar Berjalan, sekarang saya akan lanjutkan lagi berbagi dengan Artikel yang hampir sama, cuma bedanya kalau yang ini model slide :y
Model ini di publish oleh System of Blog dan sekarang saya akan publish di Blog ini dengan sedikit pengeditan tentunya.
Okey cukup sekian ceritanya, mari kita lanjutkan ke »

Cara membuatnya :

» Masuk Account Blogger dengan ID kawan
» Pada Dasbor pilih Template
» Cari ]]></b:skin>
» Copas script berikut diatasnya

.titlefield {
text-decoration: none;
color: #09F;
font-size: 16px;
}
.titlefield:hover {
text-decoration: none;
font-size: 16px;
text-shadow:2px 2px 2px #09f;
}
.labelfield {
color: brown;
font-size: 14px;
}
.datefield {
color: #333;
font-size: 14px;
padding-left: 30px;
}

#data {
width: 100%;
height: 17px;
border-top: 3px solid black;
padding: 5px 20px;
background-color: #CED0D1;
margin: 5px auto 0 auto;
-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.16);
position: fixed;
bottom: 0;
left: 0;
overflow: hidden;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
}

#data img {
display: block;
margin: 0 auto 0;
text-align: center;
}

Ganti teks yang berwarna merah agar sesuai dengan selera kawan, misalnya agar tampil diatas Header [top menjadi bottom, 5px menjadi 0 dan bottom menjadi top]

» Selanjutnya Copas Kode berikut dibawah ]]></b:skin> atau diatas </head>

» Simpan Template kawan
Selanjutnya kawan pilih Tata Letak untuk memanggilnya :r

Pilih Tambah Gadget
Pilih tanda Plus [+] pada HTML / JavaScript
Copas Script berikut kedalamnya

<script type="text/javascript">
var cssfeed=new gfeedpausescroller("data", "posting", 2000, "_new")
cssfeed.addFeed("System", "http://blogbego-creation.blogspot.com/feeds/posts/default")
cssfeed.displayoptions("date")
cssfeed.setentrycontainer("div")
cssfeed.filterfeed(100, "date")
cssfeed.entries_per_page(1)
cssfeed.init()
</script>

Ganti Angka 100 dengan jumlah Judul Blog yang mau kawan tampilkan sebagai Slide
Simpan Blog kawan dan lihat hasilnya :z

Selengkapnya.....

Daftar Isi Plus Komentar Berjalan

Sekarang saya akan berbagi dengan kawan Cara Membuat Daftar Isi Plus Jumlah Komentar di masing-masing Artikel berjalan [Marquee] pada SideBar Blog :o

Kelebihan dari Daftar isi [Artikel] Plus Jumlah Komentar ini diurut berdasarkan Abjad dari huruf awal Judul Artikel atau Artikel paling akhir yang kita posting tidak harus pada urutan Pertama

Cara membuatnya :

Masuk Account Blogger dengan ID kawan » Pada Tata Letak pilih » Tambah Gadget » Pilih Tanda Tambah [+] pada HTML/JavaScript » Copas kode berikut kedalamnya

<div style="position:fixed;bottom:0px;border: 1px dotted white; background: #0F0; padding:5px 10px; margin:0; width:98%; font-size: 14px; color:red;"><b>
<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">');
var i;
for (i = 1; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title + "</a> » ";
var pComment = " $" + feed.value.items[i].commentcount + " komentar$ «  ";
var pList = "</a>" + "<a href="+ href + '"target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</marquee>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://blogbego-creation.blogspot.com
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json"
type="text/javascript"></script>
<span style="font-size: 8px; float:right;"> </span>
</b></div>

Silahkan mengadakan perubahan khususnya pada teks yang berwarna merah agar sesuai selera dan serasi dengan tampilan Blog kawan :y

scrennshot

Selengkapnya.....

Cara Membuat Rekapitulasi Komentar

Setelah sebelumnya saya berbagi dengan kawan Cara Membuat Kumpulan Komentar I, II, III sekarang saya akan berbagi lagi yang saya beri judul Cara Membuat Rekapitulasi Komentar yaitu Rekapitulasi Komentar Blogger masing-masing Artikel :r
Bagaimana kawan berminat, kalau kawan berminat mari langsung ke Cara membuatnya

Seperti biasa silahkan masuk ke Blogger Account dengan ID kawan
Pada Perancang Template pilih tambah Gadget
Copas Kode berikut kedalamnya

<div style="overflow:auto;width:100%; height:200px;padding:5px;border:1px solid #369;background:#fff;">
<script language='javascript'>
aBold = false;
numposts=100;
maxshowresult=100;
home_page = "http://NAMA BLOG KAWAN.blogspot.com/";
</script>
<script type='text/javascript'>
//<![CDATA[
var postTitlear=new Array();var postUrlar=new Array();var postCommentar=new Array();var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" ("+postCommentar[f]+" comments)</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>

Keterangan :

Silahkan ganti Nama Blog Kawan dengan URL Blog Kawan

Artikel dengan Komentar paling banyak akan berada paling dan Komentar paling sedikit [tanpa Komentar] akan berada paling bawah

Jangan lupa simpan Blog kawan

Selengkapnya.....

Tampilkan Iklan diatas Thread Comment

Sebelumnya saya sudah publish tentang Cara Pasang Iklan diatas Form Komentar, tapi setelah bergulirnya Thread Comment pada Blogspot maka tampilan Iklan dimaksud menjadi berpindah-pindah [kadang tampil kadang tidak atau bisa diatas maupun dibawah Form Komentar] karena Template Blog kawan sudah memakai Thread Comment :z
Sekarang saya akan memberikan solusinya bagi kawan yang ingin menampilkan Iklan Sponsor di atas Komentar

Caranya sangat simple :

Siapkan script Iklan Sponsor yang sudah di Parse » disini
Masuk ke account Blogger dengan ID kawan
Untuk jaga-jaga Simpan Template kawan dulu
Beri tanda centang disamping Expand Template Widget
Cari Kode <data:post.numComments/> <data:commentLabelPlural/> (kalau pada template kawan ada 2 atau lebih kode tersebut pakai yang pertama :r
Taruh script Iklan Sponsor dibawahnya, seandainya tampilannya agak rapat diatas script Iklan Sponsor tambahkan &ltbr/&gt
selengkapnya sebagai berikut :

<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> </b:if>
</h4>
<br/> <a target="_blank" href="http://www.ppcindo.com/click.php?a=6963&x=TVRNd09UQTFOekExTkMweU1qSXVNVEkwTGpFMU5pNHlNekE9&d=1&adurl=296234426&url=http%3A%2F%2Fpaydotcom.net%2Fr%2F59708%2Fbnp%2F26662416%2F5%2F"><img src="http://www.omniforexsignals.com/banners/468x60.gif" width="468" height="60" border="0" style="top: 40.857074455015095px; "></a>

Teks yang berwarna biru adalah contoh script Iklan, tapi di Parse dulu sebelum disimpan / ditaruh disana :x

Tampilan Iklan

Jangan lupa simpan Template kawan :y

Selengkapnya.....

Mengatasi Masalah Iklan di Kanan Komentar

Kreasi saya sebelumnya tentang Tempatkan Iklan disamping kanan Kotak Komentar, masalah yang kawan temukan yaitu Kotak Komentar akan selalu berada dibawah Iklan yang di sebelah kanan Komentar :r

Cara mengatasinya sebagai berikut :

Masuk ke Account Blogger dengan ID kawan
Pada Perancang template pilih Edit HTML
Beri tanda cek pada Radio disamping Expand Widget Templates
Cari <p><data:blogCommentMessage/></p> yang terakhir

Kode selengkapnya seperti berikut :

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

Silahkan dipindahkan atau dipotong [cut] semuanya jangan "di delete" dan Paste-kan diantara </dl> </div> diatas </td><td valign='top'> seperti postingan saya sebelumnya atau selengkapnya sebagai berikut :

<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>
</b:loop>
</dl>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/></div>

</div>
</td><td valign='top'>
<div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:#FFF;'>
SIMPAN SCRIPT IKLAN / BANNER DISINI
<br/>
</div>
</td></tr></table>
</div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>

Simpan Template kawan, mudah-mudahan masalah tersebut teratasi :r

Selengkapnya.....

Tampilkan Iklan disamping Kanan Komentar

Sekarang saya akan mencoba berbagi dengan kawan sesuai Judul yang saya berikan yaitu Simpan Iklan Sponsor disamping kanan Kotak Komentar :a mengapa harus disana ?

jawabannya sangat simple dan sangat realistis, coba kawan perhatikan Komentar Blog kawan, banyak tempat kosong disebelah kanannya, benar kan :z

Caranya sangat mudah, masih ingat dengan Kreasi saya sebelumnya yaitu Cara Pasang Iklan diatas Kotak Komentar. Oke langsung saja ke cara pembuatannya :

Masuk pada Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Beri tanda cek disamping Expand Template Widget
Cari <b:loop values='data:post.comments' var='comment'>

Selengkapnya kurang lebih seperti ini :

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

Copy-paste kode berikut diatasnya,

maka selengkapnya akan menjadi seperti berikut :

<table border='0' cellpadding='1' height='auto' width='800'>
<tr><td valign='top'>
<div style='width:480px;height:auto;padding:1px; align:left; border:0px solid #999'>
<br/>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

width='800' silahkan disesuaikan dengan lebar postingan blog kawan
width=480px; disesuaikan dengan pengurangan tempat iklan
selanjutnya cari <data:comment.body/> yang terakhir
selengkapnya kurang lebih seperti berikut :

<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>
</b:loop>
</dl>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>

Maka selengkapnya akan menjadi seperti berikut :

<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>
</b:loop>
</dl>
</div> </td><td valign='top'> <div style='width:210px;height:auto;padding:5px; align:right;border:0px solid #F00;background:#FFF;'>

SIMPAN SCRIPT IKLAN / BANNER DISINI
<br/></div> </td></tr></table> </div>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>

Teks yang berwarna biru adalah kode tambahan
Tempatkan script iklan pada teks warna merah tersebut :r
Simpan Template kawan.

Apa yang saya sampaikan ini hanya sebagai gambaran saja, dikarenakan Struktur Template berbeda-beda disamping keterbatasan saya sebagai Admin [Penulis].
Artikel ini tidak bisa untuk Template Blog dengan Thread Comments

Selengkapnya.....

Tampilkan Iklan diatas Komentar Blog

Sekarang saya akan mencoba berbagi dengan kawan cara menampilkan Banner atau Teks Iklan Sponsor diatas kotak editor Komentar Blog, :r

Caranya :

Siapkan script Iklan Sponsor yang sudah di Parse » disini
Masuk ke account Blogger dengan ID kawan
Untuk jaga-jaga Simpan Template kawan dulu
Beri tanda centang disamping Expand Template Widget
Cari Kode <p><data:blogCommentMessage/></p> (kalau pada template kawan ada 3 atau 4 kode tersebut pakai yang kedua atau diatasnya ada kode seperti ini :

<h4 id='comment-post-message'><data:postCommentMsg/></h4>
[SIMPAN DISINI - KODE IKLAN]
Tampilan Iklan seperti berikut :

atau
<p><data:blogCommentMessage/></p>
[KODE IKLAN - SIMPAN DISINI]
Tampilan Iklan seperti berikut :

Kawan bisa berkreasi menaruh Banner Iklan Sponsor diatas atau dibawah Poskan Komentar dan atau diatas Post Editor Komentar
Simpan template kawan

Selengkapnya.....

Cara Membuat Kumpulan Komentar Bag-III

Melanjutkan Cara Membuat Kumpulan Komentar Bag-I, dan Cara Membuat Kumpulan Komentar Bag-II sekarang saya akan lanjutkan berbagi lagi Cara Membuat Kumpulan Komentar Bag-III yang punya kelebihan tersendiri yaitu ada Avatarnya kawan Blogger yang memberikan Komentar :z

Script Widget ini saya dapatkan dari Blogger W2B, OK langsung saja ke cara membuatnya :y

Caranya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript
Copas script berikut kedalamnya

<style type="text/css">
ul.w2b_recent_comments{
list-style:none;
margin:0;
padding:0;
}
.w2b_recent_comments li{
background:none !important;
margin:0 0 6px !important;
padding:0 0 6px 0 !important;
display:block;
clear:both;
overflow:hidden;
list-style:none;
}
.w2b_recent_comments li .avatarImage{
padding:3px;
background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;
float:left;
margin:0 6px 0 0;
position:relative;
overflow:hidden;
}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px; }
.w2b_recent_comments li img{
padding:0px;
position:relative;
overflow:hidden;
display:block;
}
.w2b_recent_comments li span{
margin-top:4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments= 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 80,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "URL No Avatar",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://blogbego-creation.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=25"></script>

Silahkan Edit seperlunya seperti :

.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px; artinya avatar akan dikelilingi dengan bingkai lingkaran, seandainya kawan menginginkan Avatar apa adanya angka 100 tersebut bisa dikecilkan sampai angka 0 [kosong/Nol]
numComments= 5, artinya jumlah Komentar yang akan kawan tampilkan
defaultAvatar = "URL No Avatar", bisa kawan tambahkan dengan URL Avatar / Gambar punya kawan, karena yang memberikan Komentar tidak ada Avatarnya.
Ganti Teks yang berwarna merah URL Blog saya dengan URL Blog kawan
Simpan Blog kawan

Selengkapnya.....

Cara Membuat Kumpulan Komentar Bag-II

1 komentar

Seperti janji saya sebelumnya bahwa saya sudah posting Cara Membuat Kumpulan Komentar Bag-1, sekarang saya akan lanjutkan berbagi lagi Cara Membuat Kumpulan Komentar Bag-2 yang bentuk dan prinsip dasarnya hampir sama dengan yang terdahulu, tinggal sekarang kawan mau pakai yang mana :w itu semua sesuai selera masing-masing

OK saya cukupkan sekian basa-basinya biar jangan ngelantur, langsung saja ke cara membuatnya sangat simple seperti script sebelumnya :z

Caranya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript
Copas script berikut kedalamnya

<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentcommentswidgetv1.js"></script>
<script style="text/javascript">
var a_rc=6;
var m_rc=true;
var n_rc=true;
var o_rc=100;
</script><script src="http://NAMABLOG KAWAN.blogspot.com/feeds/comments/default?alt=json-in-script&max-results=6&callback=showrecentcomments"></script>

Silahkan Edit seperlunya dan ganti Teks yang berwarna merah dengan URL Blog kawan
Simpan Blog kawan

Kalau kawan ingin memberikan sedikit polesan garis pinggir [Tabel] untuk mengurangi tempat yang ada, kawan cukup menambahkan seperti script sebelumnya

<div style="border: 1px solid black; height: 200px; overflow: auto; padding: 10px; width: 300px;">
SCRIPT KUMPULAN KOMENTAR DISINI
</div>

Simpan kembali Blog kawan dan semoga ada manfaatnya

Selengkapnya.....

Membuat Kumpulan Komentar Blog Bag-I

Pengunjung Blog yang memberikan Komentar tidak mesti pada Artikel terakhir yang kita publish, dan tidak menutup kemungkinan para Pengunjung memberikan komentar pada Artikel lawas [lama] :x
Untuk mengetahui si Pengunjung memberikan Komentar di Blog kita maka diperlukan Rekapan Komentar yang bisa kita tampilkan di Home Page [Beranda Blog] :z
Modelnyapun ada bermacam-macam, dan disini saya akan mencoba membahas satu-persatu
Caranya sebagai berikut :

Masuk ke account Blogger dengan ID kawan.
Pada Tata Letak pilih tambah gadget
Klik tanda (+) pada HTML/JavaScript
Copas (copy-paste) kode berikut ke dalamnya

<script style="text/javascript" src="https://sites.google.com/site/tipsblogbegoku/arsip/showrecentcomments.js">
</script><script style="text/javascript">
var numcomments = 25;var displaymore = true;
var showcommentdate = true;
var showposttitle = true;
var numchars = 80;var standardstyling = true;</script>
<script src="http://Nama Blog Kawan.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Penjelasan :

Silahkan kawan ganti angka maupun Nama Blog Kawan yang berwarna merah menyesuaikan dengan kebutuhan kawan :y

Angka 25 menunjukkan jumlah komentar yang akan kawan tampilkan
Angka 80 menunjukkan jumlah sukun kata komentar (apa hanya judul artikel yang diberikan komentar saja atau sampai isi komentarnya). Kalau dipakai 150 seperti contoh disamping ini hasilnya
Kalau semuanya sudah disesuaikan, silahkan simpan hasil kerja kawan dan lihat hasilnya
Seandainya kawan menginginkan biar kelihatan elegant dengan memberikan sedikit polesan border [table] dengan kode berikut dan diakhiri dengan

<div style="border: 1px solid black; height: 200px; overflow: auto; padding: 10px; width: 300px;"><script style="text/javascript" src="https://sites.google.com/site/tipsblogbegoku/arsip/showrecentcomments.js">
</script><script style="text/javascript">
var numcomments = 25;var displaymore = true;
var showcommentdate = true;
var showposttitle = true;
var numchars = 80;var standardstyling = true;</script>
<script src="http://Nama Blog Kawan.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>

Mudah-mudahan apa yang saya sampaikan ini bisa membantu dan ada manfaatnya buat kawan

Keterangan :

height:200px adalah ketinggian dan width:300px adalah lebar

silahkan sesuaikan dengan penempatannya di Blog kawan

Selengkapnya.....

My Blog

Template

Navbar Auto-Hidden disisi kanan

Cara membuat Tulisan Berjalan di Blog

Cara Membuat Pojok Blog Menggulung

Slide sebagai Background Blog

Buat Slide dengan PhotoScape Free

Slide Daftar Isi Plus Summary

Slide Daftar Isi Blog

Daftar Isi Plus Komentar Berjalan

Cara Membuat Rekapitulasi Komentar

Tampilkan Iklan diatas Thread Comment

Mengatasi Masalah Iklan di Kanan Komentar

Tampilkan Iklan disamping Kanan Komentar

Tampilkan Iklan diatas Komentar Blog

Cara Membuat Kumpulan Komentar Bag-III

Cara Membuat Kumpulan Komentar Bag-II

Membuat Kumpulan Komentar Blog Bag-I

About Me

Komentar Blogger

Daftar Isi

Kawan FB