Articles by "TutorialBlogger"

Tampilkan postingan dengan label TutorialBlogger. Tampilkan semua postingan

Cara membuat kotak komentar terbaru 2016 dengan scroll di blog - AnthzoBlog. Sudah lama saya gk posting tentang tutorial blog ya guys, karena sekarang saya sudah mulai mau ngeblog lagi nih setelah sekian lama vakum kliner. Kenapa saya posting tentang ini? Karena ketika saya coba dengan tutorial terdahulu ternyata gagal dan yang jadi titik permasalahan adalah pada file .js nya yang sudah tidak dapat dibuka, maka dari itu saya cari jalan lain supaya komentar pada widget blog bisa kembali terlihat.

Langkah-langkah :
1. Login ke aku Blogger
2. Pilih Tata Letak → Tambahkan Gadget → Pilih HTML/Javascript
3. Masukan kode di bawah ini :
<div style="overflow:auto;width:100%px;height:300px;padding:10px;border:1px solid #555;"><script type="text/javascript" src="http://yourjavascript.com/2951164625/recentcomment-anthzoblog.js"></script>
<script style=text/javascript >var a_rc=25;
var m_rc=true;var n_rc=true;var o_rc=10;</script>
<script src=http://anthzoblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
<style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;} </style></div>
4. Simpan dan lihat hasilnya :D

Keterangan:
  • Red ( tinggi kotak komentar )
  • Orange ( ganti dengan Blog Sobat )

Cara Simple Membuat Widget Musik di Blog - Anthzo Blog. Cara ini memang sangat mudah tidak perlu ke Template terus Edit HTML, ini langsung saja ke HTML/JS nya. Terus karena sekarang itu lagi bulan puasa gue pasang aja lagunya Ramadhan Tiba oke. Tapi kalau mau beda ya tinggal unggah aja musik/mp3 yang lo suuka, caranya bisa baca: Cara Upload musik ke Sites Google.

Langkah-langkah:
1. Login ke akun Blogger
2. Pilih Tata Letak » Tambahkan Gadget » Pilih HTML/Javascript
3. Masukan kode berikut:
<script src="http://anthzoblog.googlecode.com/svn/trunk/MP3AutoPlayer.js" type="text/javascript"></script>
<script type="text/javascript">musikDongBang('https://sites.google.com/site/anthzoblog/anthzoblogmusik/Ramadhan%20Tiba.mp3','Ramadhan Tiba'); </script>
4. Simpan dan lihat hasilnya.
Sumber: http://irvan-efendy.blogspot.com/2014/06/membuat-widget-music-diblog-ala-bie.html

Cara Membuat SPOILER di Blog - Anthzo Blog. SPOILER berfungsi sebagai tempat penempatan suatu teks, video, gambar yang dijadikan tersembunyi (hide) yang dapat memperkecil ukuran postingan agar tidak terlalu terlihat banyak.

Langkah-langkah :
1. Login ke akun Blogger.com
2. Pilih buat entri baru
3. Masukan kode di bawah ini pada bagian HTML entri :
Code:
<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> <div style="text-align: left;">Disini loh tempat yang mau disembunyikannya<br> </div> </div> </div> </div>
4. Publikasikan dan beres deh

Keterangan:
  • Red (judul dari apa yang mau disembunyikan)
  • Orange (lokasi apa yang mau disembunyikan, center = tengah)
  • Lime (Teks/video/gambar yang mau disembunyikan)

Cara Pasang Kotak Komentar Facebook dan Blog Berdampingan dengan Tampilan Keren - Anthzo Blog. Nah kali ini Anthzo Blog share update an dari Cara memasang kotak komentar Facebook dan Twitter di blog New yang sekarang icon facebook nya jadi terlihat, karena pada postingan sebelumnya icon facebook nya tidak ada alis menghilang. Keunggulan dari kotak komentar isi adalah tampilannya yang rapih dan enak untuk dilihat. Siapa yang mau pasang diblog kesayangannya? Langsung saja ikuti tutorialnya.

Langkah-langkah:
1. Login ke blogger
2. Masuk ke edit HTML --> Centang 'Expand Template Widget'
3. Masukkan kode berikut tepat di bawah kode <head>
<meta content='Profile_ID' property='fb:admins'/>
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://anthzo.webs.com/2013/commentspages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://anthzo.webs.com/2014/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_KEY&amp;v=1'/>
Keterangan :
4. Masukkan kode berikut tepat di bawah kode <div class='comments' id='comments'>
<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Comments Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Comments Facebook
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</div>
<div class='comments-page' id='fb-comments-page'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='10' width='500px'/>
  </b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'> 
5. Selesai

Keterangan :
  • Angka 10 ( jumlah komentar facebook yang ingin ditampilkan )
  • Angka 500 ( ukuran lebar kotak komentar )

Langkah-langkah:
1. Masuk ke akun Blogger
2. Pilih Template --> Edit HTML
3. Cari (Ctrl+F) kode ]]></b:skin> dan pastekan kode dibawah ini di atas kode tersebut:
/* Efek Tanda Khusus www.anthzoblog.blogspot.com
-------------------------------------------------------------------- */
tanda{
background:#ABCDEF;
border:1px solid #589BDF;
font-size:1em;
color:red;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
margin:1px 3px;
padding:2px 5px;
}
4. Simpan Template

Keterangan:
  • Untuk membuat tanda yang berbeda pada teks atau kode tertentu cukup tambah kan kode <tanda> diawal dan </tanda> diakhir. Contoh: <tanda>Disini masukan teks/kode khusus yang ingin dibedakan</tanda>
  • Green (background/latar dari tanda tersebut)
  • Blue (border/garis luar dari tanda tersebut)
  • Jika kesulitan dalam hal kode warna bisa kunjungi KODE WARNA HTML GENERATOR

Langkah-langkah :
1. Login ke aku Blogger
2. Pilih Tata Letak → Tambahkan Gadget → Pilih HTML/Javascript
3. Masukan kode di bawah ini :
<audio controls><source src="https://sites.google.com/site/anthzoblog/anthzoblogmusik/NICO%20Touches%20the%20Walls%20-%20Hologram.m4a?attredirects=0&d=1" />
</source></audio>
4. Simpan

Keterangan:
  • Red ( jika ingin auto play ganti saja dengan: <audio controls autoplay> )
  • Orange ( untuk mengganti dengan musik keinginan silahkan baca Cara Upload musik ke Sites Google )
  • Kelebiha: cepat dalam buferring
  • Widget musik ini hanya berjalan pada Google Chrome

Langkah-langkah :
1. Login ke aku Blogger
2. Pilih Tata Letak → Tambahkan Gadget → Pilih HTML/Javascript
3. Masukan kode di bawah ini :
<div style="overflow:auto;width:100%px;height:300px;padding:10px;border:1px solid #555;"><script style=text/javascript src= http://anthzoblog.googlecode.com/svn/trunk/recentcomment.js></script>
<script style=text/javascript >var a_rc=25;
var m_rc=true;var n_rc=true;var o_rc=10;</script>
<script src=http://anthzoblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
<style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;} </style></div>
4. Simpan dan lihat hasilnya :D

Keterangan:
  • Red ( tinggi kotak komentar )
  • Orange ( ganti dengan Blog Sobat )

Langkah-langkah:
  1. Login ke akun facebook
  2. Klik link berikut : https://developers.facebook.com/docs/plugins/comments
  3. Masukan alamat Fanspage Anda. Contoh : https://www.facebook.com/pages/Anthzo-Blog/630182290412017
  4. Atur lebar dan sebagainya sesuai dengan keinginan --> GET CODE
  1. Masuk ke akun Blogger
  2. Pilih Template --> Edit HTML
  3. Cari (Ctrl+F) kode </head> dan paste Script 1 dibawah kode tersebut
  4. Cari (Ctrl+F) kode <div class='post-footer-line post-footer-line-3'> atau jika tidak ketemu code ini saja post-footer-line-3 dan pastekan Script 2 dibawah kode tersebut
  5. Simpan Template.
Keterangan:
  • Jika ada eror pada Script 1 silahkan masuk ke link ini : Parse HTML kemudian Copy Paste script 1 dan klik PARSE. Nah ganti semua kode Script 1 dengan hasil parse tadi.

Contoh :

Caranya mudah, tinggal tempatkan code berikut pada postingan :
<div dir="ltr" style="text-align: left;" trbidi="on">
<script language="JavaScript">
var text="ANIMASI TEXT DISINI MASBRO";
var delay=10;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</script>
<b></b>
<br />
<div 0px="" 10px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="">
</div>
<script language="JavaScript">
javascript:startTyping(text, 50, "textDestination");
</script></div>
Simpan dan selesai.

Selamat pagi sobat Anthzo's Blog
Kali ini Mimin mau share tentang Cara Membuat Kotak Script Berwarna Keren di Postingan Blog yang dimana fungsinya sebagai tempat buat teks/script dengan tampilan yang menarik. Kalau mau lihat contohnya bisa klik demo!
Langkah-langkah :
1. Login ke akun Blogger.com
2. Pilih buat entri baru
3. Masukan kode di bawah ini pada bagian HTML entri :
<div style="background-color: #ffa66f; border: 2px #6E2222 dashed; padding: 10px; t-align: left;">
Kode Script Anda Disini Sobat Anthzo's Blog</div>
<div style="background-color: #ffc7c7; border: 2px #6E2222 dotted; padding: 10px; text-align: left;">
Kode Script Anda Disini Sobat Anthzo's Blog</div>
<div style="background-color: #82cafa; border: 3px #6E2222 double; padding: 10px; text-align: left;">
Kode Script Anda Disini Sobat Anthzo's Blog</div>
<div style="background-color: #6eb76a; border: 2px #6E2222 inset; padding: 10px; text-align: left;">
Kode Script Anda Disini Sobat Anthzo's Blog</div>
<div style="background-color: #c2c2c2; border: 2px #6E2222 ridge; padding: 10px; text-align: left;">
Kode Script Anda Disini Sobat Anthzo's Blog</div>
<div style="background-color: #d9da81; border: 2px #6E2222 solid; padding: 10px; text-align: left;">
Kode Script Anda Disini Sobat Anthzo's Blog</div>
4. Publikasikan dan lihat hasilnya

Keterangan :
  • Ganti "Kode Script Anda Disini Sobat Anthzo's Blog" dengan kesinginan sobat

Mimin share ini ya biar para copas nyadar aja kalau ngambil postingan dari web orang harus pake sumbernya sebagai tanda menghargai. Pikirin deh kalau masbro nulis artikel yang banyaknya minta ampiyun, terus pas masbro searching di google eh ketemu artikel yang sama persis tanpa menuliskan sumbernya, nah gimana lho rasanya? pasti nyesek kan? ya makanya ini gunanya buat ntu juga sih. Nih demo nya!

Langkah-langkah :
1. Masuk ke akun Blogger
2. Klik Template → Edit HTML
3. Cari kode (Ctrl+F) : <body> atau <body dan tambahkan kode di bawah ini di atasnya :
<script type='text/javascript'> if(document.location.protocol==&#39;http:&#39;){ var Tynt=Tynt||[];Tynt.push(&#39;cXIEhKYVSr4lJ5adbi-bpO&#39;);Tynt.i={&quot;ap&quot;:&quot;Sumber :&quot;}; (function(){var s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;http://anthzoblog.googlecode.com/svn/trunk/sumber-otomatis.js&#39;;var h=document.getElementsByTagName(&#39;script&#39;)[0];h.parentNode.insertBefore(s,h);})(); } </script>
4. Simpan Template

Ingat! Pengunjung yang kece adalah pengunjung yang memfollow dan komentar di Anthzo's Blog :v

Saya yakin meskipun di berikan pembukaan yang banyak sobat2 pasti udah enggak sabat pengen langsung ke tutorialnya -_- maka dari itu mending mimin langsungin aja deh ke tutorialnya.
Bahan-bahan :
1. Musik dengan format .swf (rekomendasi)
2. Software MP3 to SWF Converter, jika belum punya bisa download di [ Cara Mengubah Format .mp3 ke .swf dengan MP3 to SWF Converter ]
3. Upload musiknya ke https://sites.google.com/, jika kurang faham bisa lihat di [ Cara Upload musik ke Sites Google ]
4. Ambil url nya

Langkah-langkah :
1. Masuk ke akun Blogger
2. Klik Template → Edit HTML
3. Cari kode (Ctrl+F) : </body> dan tambahkan kode di bawah ini di atasnya :
<div style='text-align: center;'><embed height='0' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='high' src='http://anthzoblog.blogspot.com/' type='application/x-shockwave-flash' width='0'/> </div>
4. Simpan Template

Keterangan :
  1. Orange = ( ganti dengan url musik yang tadi sudah di upload )
  2. Bisa juga di pasang di widget dan postingan.
Tambahan :
Jika sobat Anthzo's Blog ingin menggunakan musik yang telah mimin upload, berikut url yang telah Anthzo's Blog upload : 

1. [Fullmetal Alchemist 2 OP2] - Hologram
https://sites.google.com/site/anthzoblog/anthzoblogmusik/%5BFullmetal%20Alchemist%202%20OP2%5D%20-%20Hologram.swf?attredirects=0

Dari pada males pasang Widget Follow original dari blogger yang suka bikin sedikit lemod mending pake ini aja masbro. Caranya cukup simple ko, kalau mau lihat contohnya tinggal klik aja demo nya.

Langkah-langkah :
1. Login ke aku Blogger
2. Pilih Tata Letak → Tambahkan Gadget → Pilih HTML/Javascript
3. Masukan kode di bawah ini :
<div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=4060396276883191908" target="_blank" rel="dofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://i.imgur.com/ETOUfro.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://anthzoblog.blogspot.com/" rel="dofollow" title="Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.imgur.com/RuIvOhN.png" /></a></div></div>
4. Simpan dan lihat hasilnya

Keterangan :
  1. Red = ( ganti dengan ID blog masbro, ketika lagi bikin ini lihat saja ke tab browsernya disitu ada keterangannya blogID=nah yang ini masbro )
  2. Orange = ( ganti dengan url blog masbro )


Kadang-kadang kita pengen tahu nih siapa aja yang sudah berkomentar di blog kita, tapi jadi males karena ribet harus login dl terus lihat tab komentar. Nah disini ada solusnya lhooo, caranya cukup pasang widget ini dan nanti sobat tinggal buka blog sobat kemudian tinggal di lihat.

Langkah-langkah :
1. Login ke aku Blogger
2. Pilih Tata Letak → Tambahkan Gadget → Pilih HTML/Javascript
3. Masukan kode di bawah ini :
<style type="text/css">
ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;}
.sakahayang_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;}
.sakahayang_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;}
.sakahayang_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.sakahayang_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 11px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=20,
adminBlog='Anto Sharpshooter';
//]]>
</script>
<script type="text/javascript" src="http://anthzoblog.googlecode.com/svn/trunk/kotakkomen.js"></script>
<script type="text/javascript" src="http://anthzoblog.blogspot.com/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&&max-results=20"></script>
4. Simpan dan lihat hasilnya :D

Keterangan :
  1. Red = ( jumlah komentar yang tampil )
  2. Orange = ( ukuran avatar )
  3. Lime = ( jumlah kata yang tampil )
  4. Blue = ( nama yang akan di hide/tidak di tampilkan )
  5. Purple = ( ganti dengan url blog sobat )

Pasti para sobat Anthzo's Blog suka bt, kesel, gk enak liat postingan sobat yang panjangnya minta ampun karena srcipt kode yang banyak. Nah caranya cukup gampang, hanya dengan mengatur saja tinggi untuk quotenya.

Langkah-langkah :
1. Loggin ke akun Blogger
2. Pergi ke Template bawahnya Tata Letak itu lhoooo
3. Cari kode (Ctrl+F) .post blockquote {
4. Tambahkan kode : height:300px; 
maka akan menjadi seperti berikut :
blockquote { position:relative; overflow:auto; background-color:#F4F4F4; line-height:1.3em; font:12px &quot;Courier 10 Pitch&quot;,Courier,monospace; margin-top:5px; margin-bottom:5px; padding:5px; border-left:4px solid #666; border-top:1px solid #eee; height:300px; border-right:1px solid #eee; border-bottom:1px solid #eee; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px }
5. Simpan Template

Siapa yang tidak kenal dengan nama daftar isi, tapi bagaimana tampilannya? nah Anthzo's Blog kali ini posting mengenai Cara Membuat Daftar Isi Keren Menurut Label V.2. Lihat saja DEMO nya jika ingin melihat hasil.
Langkah-langkah :
1. Loggin ke akun Blogger
2. Klik Laman/Entri baru
3. Klik Laman Baru lalu pilih HTML [ jangan lupa beri judul ]
4. Copy paste kan code di bawah ini :
<style type="text/css">
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #444444;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#444444;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:3px solid #444444;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#00000;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:3px solid #444444;
    color:#444444;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:100px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#444444; /* warna judul awal */}
#feedContainer li a:hover {
    text-decoration:none;
    color:#ff0000; /* warna judul akhir */}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:13px; /* ukuran font judul  */    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:2px 2px;
    background-color:#444444; /* warna kotak gambar dalam */    border:1px solid #ff0000; /* warna kotak gambar luar */    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 13px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#444444;
    padding:0 0;
    color:#444444;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:30px 30px;
    margin:10px 10px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:1px 1px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#444444; /* warna kategori */    text-shadow:0 0px 0 rgba(0, 0, 0, .0);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#444444;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 12px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#FFFFFF;
    outline:none;
    -webkit-box-shadow:inset 0 1px 1px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 1px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 1px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:1px 1px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#444444
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
 url: "http://anthzoblog.blogspot.com/",
 feedNum: 5,
 labelName: false,
 numChars: 100,
 thumbWidth: 40,
 navText: "Berikutnya &#9660;",
 frontText: "Atas &uArr;",
 resetToc: "Reset",
 noImage: "http://i.imgur.com/pneHqAV.png",
 loading: "<span>Memuat...</span>",
 searching: "<span>Mencari...</span>",
 noResult: "Sorry Bro enggak ada."
};
//]]>
</script>
<br />
<div id="table-outer">
<table border="0">
        <tbody>
<tr>
                <td><label for="orderFeedBy">Urutkan artikel berdasarkan:</label>
                </td>
                <td><select id="orderFeedBy">
                        <option selected="" value="published">POSTING TERBARU</option>
                        <option value="updated">POSTING DIPERBAHARUI</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="labelSorterSelect">Kategori:</label>
                </td>
                <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">MEMUAT...</option></select></span>
                </td>
            </tr>
<tr>
                <td><label for="feed-q-box">Cari pake kata konci:</label>
                </td>
                <td><form id="postSearcher">
<input id="feed-q-box" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<br />
<br />
<br />
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script src="http://anthzoblog.googlecode.com/svn/trunk/daftarisiefek.js" type="text/javascript"></script>
6. Publikasikan dan Lihat

Keterangan :

  • Warna merah ganti dengan url blog sobat
  • Keterangan tambahan agar lebih mengerti berwarna cokelat

Cara membuat efek zoom keren dengan Jquery, dari namanya saja sudah jelas kalau tutorial kali ini mengenai efek zoom ketika kita mengklik gambar pada salah satu postingan blog dan tentunya dengan efek yang keren, sebagai contoh teman2 bisa klik gambar di atas untuk mengetahui penampaka (bukan kunti) nya.

Langkah-langkah :
1. Loggin ke blogger
2. Pergi ke Template bawahnya Tata Letak
3. Cari kode (Ctrl+F) ]]></b:skin> 
4. Masukan kode di bawah ini diatas kode tsb :
div.jquery-image-zoom { line-height: 0; font-size: 0; z-index: 10; border: 5px solid #fff; margin: -5px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } div.jquery-image-zoom a { background: url(https://lh4.googleusercontent.com/-J7LgRRCCYPQ/U3Fx004_tHI/AAAAAAAAAKg/2AJo-yFVMCw/h120/SK_imagezoom.png) no-repeat; display: block; width: 25px; height: 25px; position: absolute; right: -17px; top: -17px; /* IE-users are prolly used to close-link in right-hand corner */ *right: auto; *left: -17px; text-decoration: none; text-indent: -100000px; outline: 0; z-index: 11; } div.jquery-image-zoom a:hover { background-position: right -25px; } div.jquery-image-zoom img, div.jquery-image-zoom embed, div.jquery-image-zoom object, div.jquery-image-zoom div { width: 100%; height: 100%; margin: 0; }
5. Cari kode (Ctrl+F) </head>
6. Masukan kode di bawah ini di atas kode tsb :
<script src='https://susanto-kun.googlecode.com/svn/trunk/SK_jquery132.js' type='text/javascript'/>
<script src='https://susanto-kun.googlecode.com/svn/trunk/SK_imagezoom.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document.body).imageZoom(); </script> 
7. Simpan Template

Cara mengganti warna background blokquote/kotak sript pada blog berguna mempercantik blog teman2 agar lebih indah untuk dilihat. Dalam menggantinya pun cukup simple, lihat tutorial di bawah ini.

Langkah-langkah :
1. Blogger >> Klik Design -> Edit HTML
3. Cari kode (Ctrl+F) .post-body blockquote
4. Kemudian tambahkan kode berikut di bawah kode .post-body blockquote
.post-footer{color:#666;text-transform:none;letter-spacing:.01em;font:12px Arial;line-height:1.4em;margin:.75em 0}
.comment-link{margin-left:.1em}
.post blockquote {
margin:1em 20px;
border: 3px #5f200e double; padding: 10px; text-align: left;
background:#92BBEA;
padding: 10px;
}
5. Simpan Template

Klik gambar untuk memperbesar!
Cara membuat tabel keren dengan Highlight di blog ini berbeda dengan tabel standar yang biasanya teman2 lihat. Tabel ini mempunya efek Highlight yang bisa memberikan petunjuk/arah pada cursor ketika di sorot, sebagai contoh teman2 bisa lihat pada artikel Biodata Admin disana coba arahkan cursor ke tabelnya.

Langkah-langkah :
1. Buka blogger dan Entri Baru
2. Plilih HTML bukan yang Compse
3. Masukan kode berikut :
<!-- Row Highlight Javascript -->
<script type="text/javascript">
 window.onload=function(){
 var tfrow = document.getElementById('tfhover').rows.length;
 var tbRow=[];
 for (var i=1;i<tfrow;i++) {
  tbRow[i]=document.getElementById('tfhover').rows[i];
  tbRow[i].onmouseover = function(){
    this.style.backgroundColor = '#000000';
  };
  tbRow[i].onmouseout = function() {
    this.style.backgroundColor = 'transparent';
  };
 }
};
</script>
<style type="text/css">
table.tftable tr {background-color:transparent;}
</style>
<br />
<table border="1" class="tftable" id="tfhover">
<tbody>
<tr><th>Nama 1</th><th>Nama 2</th></tr>
<tr><td>Alamat 1</td><td>Alamat 2</td></tr>
</tbody></table>
4. Edit sesuai keinginan
5. Publikasikan!

Keterangan :
  • Warna Merah adalah warna yang akan muncul pada saat disorot kursor
  • Warna Biru menandakan tulisan Blod pada tulisannya
  • Warna Hijau menandakan tulisan biasa
Apabila ada yang perlu di tanyakan silahkan komentari saja artikel ini. Dan ane ucapkan terima kasih atas kunjungannya.

Image 1 Title

Image 1 Title
Sesuatu yang sangat berharga

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.