Showing posts with label Widget Blog. Show all posts
Showing posts with label Widget Blog. Show all posts
Saturday, 18 July 2015
BISNIS ONLINE HALAL
Assalamu'alaikum Warahmatullahi Wabaraktu.
Hai sobat yang berminat dan pasti berminat segera bergabung di group SUKSES BISNIS ONLINE INSYAALLAH HALAL BISNISNYA. Baca Petunjuknya dulu ya biar Adrenalin niat berbisnisnya muncak + lebih AFDHOL.
Wapsite 1
http://buzurl.com/ami31 atau
http://goo.gl/TUocy9
Trimakasih sudah mau bergabung.
Wassalamu'alaikum Warahmatullahi Wabarakatu.
ENGLISH VERSION
Assalamu'alaikum Warahmatullahi Wabaraktu.
TRUST. BELIEVABLE. WORKING. HALAL FOR BEING BUSSINISSMENT. PLEASE READ THE INSTRUCTION FIRSTLY TO GET RIDHO OF GOD.
Wapsite 1
http://buzurl.com/ami31 or
goo.gl/TUocy9
THANKS FOR JOING US. [[KEEP GOING WITH THE PROCESS by SIR GUNTAR]].
Wassalamu'alaikum Warahmatullahi Wabarakatu.
Saturday, 11 May 2013
Cara Membuat Recent Comment dengan Avatar (Image Unik)
Buat sobat blogger yang ingin menampilkan komentar terakhir di blognya
bisa mencoba widget yang satu ini. menurut saya widget recent comments
ini cukup unik karena juga menampilkan avatar image. Sobat blogger bisa
melihat tampilannya seperti pada gambar di bawah.
][> tata letak
][> add gadget
][> HTML/Javascript
][> Setelah itu tinggal masukkan saja kode widget recent comments dibawah ini;
][> Terakhir pratinjau, lalu simpan template.
Modifikasi;
1. angka 5 (warna biru adalah jumlah komentar terakhir yang ingin ditampilkan)
2. angka 60 dan 40 adalah ukuran image avatar komentar postingan blog.
3. Silahkan mencoba bereksperimen sendiri untuk hal-hal lainnya, cobalah.
4. Ganti http://pangeranthumberslikers.blogspot.com dengan nama blog sobat
Monggo dicoba mas dan mbak bro..
_________Step________
][> Masuk ke akun blogger][> tata letak
][> add gadget
][> HTML/Javascript
][> Setelah itu tinggal masukkan saja kode widget recent comments dibawah ini;
<style
type="text/css">
ul.md_recent_comments{list-style:none;margin:0;padding:0;}
.md_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;}
.md_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;}
.md_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.md_recent_comments li span{margin-top:4px;color: #666;display:
block;font-size: 13px;font-style: italic;line-height:
1.4;}</style><script
type="text/javascript">//<![CDATA[ // Recent
Comments Settings var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
showMorelink = true,
moreLinktext = "More »",
defaultAvatar =
"http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;//]]></script><script
type="text/javascript"
src="http://julak-project.googlecode.com/files/recent%20comments%20.js"></script><script
type="text/javascript" src="http://pangeranthumberslikers.blogspot.com/feeds/comments/default?alt=json&callback=md_recent_comments&max-results=5"></script>
|
][> Terakhir pratinjau, lalu simpan template.
Modifikasi;
1. angka 5 (warna biru adalah jumlah komentar terakhir yang ingin ditampilkan)
2. angka 60 dan 40 adalah ukuran image avatar komentar postingan blog.
3. Silahkan mencoba bereksperimen sendiri untuk hal-hal lainnya, cobalah.
4. Ganti http://pangeranthumberslikers.blogspot.com dengan nama blog sobat
Monggo dicoba mas dan mbak bro..
Cara Membuat Share Button Like, Share dan Twitter di Sisi Blog
baru beberapa menit slamat tinggal uda nongol alias slamat datang lagi ..
Like, Share dan Twitter Button
- Untuk meningkatkan lalu lintas kunjungan ke blog kita, selain upaya
optimasi SEO , perlu juga kiranya kita mengintegrasikan blog kita dengan
media jejaring sosial populer seperti facebook dan twitter.
Jika kita meremehkan "kekuatan" share button / tombol berbagi ini, sama
saja kita menyiakan-nyiakan peluang untuk menambah kunjungan ke blog
kita.
Jika pada posting sebelumnya kita membuat share button di bawah posting, pada tutorial kali ini, Julak mau berbagi sama temen-temen bagaimana membuat salah satu widget share button melayang di sisi kanan blog. Widget kali ini dilengkapi tombol suka dan share Facebook,
Tweet, Digg, stumble Upon dan Google +1 termasuk perhitungannya alias
berapa banyak pengunjung yang membagikannya. Cara pembuatannya sangat
mudah, karena tidak perlu mengedit CSS atau menambahkan kode HTML.
1. Langkah pertama masuk ke akun blogger > Dasbor, > klik design/rancangan > Tata Letak
2. Klik Tambah Gadget, di bagian sidebar.
3. Pilih HTML/Javascript, kemudian masukkan kode di bawah ini:
<!--Widget Share Button Melayang Start-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left;
border: 1px solid black;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0
0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner
{-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px
!important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px
!important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like
layout="box_count" show_faces="false"
font=""></fb:like></div>
<div class='sbutton' id='rt'><a
href="http://twitter.com/share"
class="twitter-share-button" data-count="vertical"
>Tweet</a><script src='http://platform.twitter.com/widgets.js'
type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript"
src="https://apis.google.com/js/plusone.js"></script><g:plusone
size="tall"></g:plusone></div>
<div class='sbutton'
id='su'><script
src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton'
id='digg' style='margin-left:3px;width:48px'><script
src='http://widgets.digg.com/buttons.js'
type='text/javascript'></script><a class="DiggThisButton
DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share"
type="box_count"
href="http://www.facebook.com/sharer.php">Share</a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript"></script></div><br/><div
style="clear: both;font-size: 9px;text-align:center;"><a
href="http://pangeranthumberslikers.blogspot.com/2012/02/cara-membuat-share-button-like-share.html"
target="blank"><font color="blue">[Get
Widget]<font></font></font></a></div></div>
<!--Widget Share Button Melayang End-->
|
5. Simpan widget dan preview Blog Anda
Jika Anda sudah memiliki tombol google + di atas atau di bawah posting Anda, kemungkinan widget tersebut tidak muncul. Silakan hapus kode berwarna merah jika sobat mau menghapusnya, karena mungkin bisa mempercepat loading blog.
Cara Membuat Share Button Like, Share dan Twitter versi template gelap
Jika Anda menggunakan template gelap / dark template, Silakan Anda dapat mencoba kode di bawah ini:
Pengaturan lihat kode-kode warna merah:
Slamat mncoba.. :D
<!--Widget Share Button Melayang Start-->
<style> #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Bagikan ke teman anda"> <div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div> <div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://blogbelajar2.blogspot.com/2012/02/cara-membuat-share-button-like-share.html" target="blank"><font color="white">[Get Widget]<font></font></font></a></div></div> <!--Widget Share Button Melayang End--> |
Pengaturan lihat kode-kode warna merah:
- angka 15% mengatur letak tinggi posisi share button dr sisi bawah blog, silakan dikurangi jika posisinya ingin diturunkan
- angka 10 pixel adalah posisi dari tepi paling kanan blog, ditambah jika sobat ingin mengetengahkan.
- sedangkan border: 1px solid black, adalah ukuran ketebalan batas kotak share button dan warna batas/garis share button itu sendiri.
Slamat mncoba.. :D
Sunday, 24 March 2013
Wednesday, 20 March 2013
Cara Membuat Animasi Favicon di Blog
Cara
Membuat Favicon Animasi - Favicon adalah logo atau gambar yang muncul
di address bar saat url blog sobat blogger dibuka. Ada banyak website
yang menyediakan pembuatan favicon secara online tapi kebanyakan
menyajian dalam bentuk gambar saja, bukan dalam bentuk Animasi. Namun
postingan ini akan menjelaskan bagaimana membuat favicon animasi dengan
Format (Logo kemudian diikuti Text).
Berikut Cara Membuat Favicon Animasi :
1. Kunjungi Favicongenerator
2. Langsung saja ke bagian bawah website kemudian Upload gambar yang ingin anda gunakan untuk membuat favicon.
3. Pada "Scrolling Text (optional)" Masukan text yang ingin digunakan untuk favicon animasi.
4. Klik Generate favicon
5. Setelah gambarnya muncul, Klik kanan > Save image as
Animasi favicon sobbat blogger sudah selesai dibuat dan sekarang sudah tersimpan dilaptop/dikomputer. Sekarang adalah langkah yang harus dilakukan agar favicon bekerja pada blog sobat blogger.
Sebelumnya upload terlebih dahulu faviconnya agar mendapatkan URL yang digunakan nanti.
Sobbat blogger bisa upload favicon animasi di PICASA.
Setelah favicon terupload dan sobbat blogger sudah mempunyai URLnya, Slanjutnya ikuti langkah-langkah berikut :
1. Masuk ke halaman Blogger > Design > Edit HTML
2. Copy kode dibawah ini dan letakkan Sebelum kode <b:skin>
3. Save template dan lihat hasilnya.
Selamat mencoba.. Happy Blogging
Berikut Cara Membuat Favicon Animasi :
1. Kunjungi Favicongenerator
2. Langsung saja ke bagian bawah website kemudian Upload gambar yang ingin anda gunakan untuk membuat favicon.
3. Pada "Scrolling Text (optional)" Masukan text yang ingin digunakan untuk favicon animasi.
4. Klik Generate favicon
5. Setelah gambarnya muncul, Klik kanan > Save image as
Animasi favicon sobbat blogger sudah selesai dibuat dan sekarang sudah tersimpan dilaptop/dikomputer. Sekarang adalah langkah yang harus dilakukan agar favicon bekerja pada blog sobat blogger.
Sebelumnya upload terlebih dahulu faviconnya agar mendapatkan URL yang digunakan nanti.
Sobbat blogger bisa upload favicon animasi di PICASA.
Setelah favicon terupload dan sobbat blogger sudah mempunyai URLnya, Slanjutnya ikuti langkah-langkah berikut :
1. Masuk ke halaman Blogger > Design > Edit HTML
2. Copy kode dibawah ini dan letakkan Sebelum kode <b:skin>
<link href='Masukkan URL favicon disini' rel='icon' type='image/gif'/>
3. Save template dan lihat hasilnya.
Selamat mencoba.. Happy Blogging
Saturday, 9 March 2013
Dua Modifikasi Threaded Comments Menarik Dan Keren
بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم
Saya sematkan kata menarik dan keren pada modifikasi threaded comment kali ini bukan tak beralasan, sebab modifikasi ini telah memikat hati saya dan mungkin hal yang sama akan berlaku bagi anda pecinta warna. Ya karena letak dominan modifikasi kali ini pada permainan CSS background color dan CSS border.
Tertarik untuk mengganti threaded comment default blogger diblog anda dengan modifikasi threaded comment colored style ini? Silahkan ikuti langkah-langkah berikut:
Tutorial berikut hanya untuk blog yang telah mengaktifkan sistem threaded comment blogger. Jika anda belum mengaktifkan sistem threaded comment diblog anda, silahkan ikuti terlebih dahulu tutorial panduannya disini
Cara menambahkan kode CSS modifikasi threaded comment
- Setelah login ke akun blogger anda
- Pada dasbor klik Template --> edit HTML
- Klikk Ctrl+F dan cari kode ]]></b:skin>
- Tambahkan kode CSS berikut diatas kode ]]></b:skin>
Kode CSS Threaded Comment Menarik Versi 3
#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#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 #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}
.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}
Kode CSS Threaded Comment Keren Versi 4
#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#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 #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;- webkit-border-radius:100px;
-moz-border-radius: 100px; border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}
Untuk demo bisa lihat pada blog personal saya disini. Demikian tutorial modifikasi threaded comment menarik dan keren versi 3 dan 4 kali ini. Semoga bermanfaat.
ٱلْحَمْدُ لِلَّهِ رَبِّ
ٱلْعَٰلَمِين
Monday, 18 February 2013
Modifikasi Tampilan Threaded Comments Blogger Versi 1 Dan 2
Modifikasi Threaded Comment Blogger Versi Pertama
- Setelah login ke akun anda, pada sdasbor klik menu template >> edit HTML
- Sekarang cari kode ]]></b:skin> (Gunakan control F untuk memudahkan pencarian)
- Tambahkan semua kode kode CSS berikut diatas kode ]]></b:skin>
.comment-block {border:1px solid #666;border-radius:8px;padding: 3px;}Modifikasi reply comments tambahkan CSS berikut:
.comment-actions {Sekarang modifikasi image avatar komentator tambahkan CSS berikut:
margin-right: -2px;
margin-top: -15px;
font-size: 10px;
text-transform: uppercase;
float: right;
border: 1px #DDD solid;
padding: 3px;
line-height: 1em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #999;
}
.comment-actions:hover {
background: black;
color: white;
}
.avatar-image-container img{border-radius:20px;background: url("http://cdn1.iconfinder.com/data/icons/crystalproject/32x32/apps/personal.png") no-repeat scroll center center;Sekarang reply button dibawah post komentar tambahkan CSS berikut:
}
.continue{Terakhir modifikasi dropdown reply comments tambahkan CSS berikut:
width: 45px;
font-size: 10px;
text-transform: uppercase;
border: 1px #DDD solid;
padding: 3px;
line-height: 1em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #999;
}
.continue:hover {
background: black;
color: white;
}
.thread-count{Sekarang setelah mengikuti semua langkah-langkah diatas, tampilan threaded comments anda akan seperti image berikut:
font-size: 10px;
text-transform: uppercase;
border: 1px #DDD solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
color: #999;
}
.thread-count:hover {
background: black;
color: white;
}
Modifikasi Threaded Comments Blogger Versi kedua
- Tambahkan kode CSS berikut diatas kode ]]></b:skin>
/*=== Threaded Comments ===*/
.comments .comments-content .icon.blog-author {
background-image: url(http://siteexpansion.com/img/smilies/21.gif);/*icon untuk admin*/
background-repeat: no-repeat;
width:38px;
height:20px;
}
.comments .comments-content .loadmore a {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
}
.comments .comment .comment-actions a {
padding-right: 5px;
padding-top: 2px;
}
.comments .continue {
margin-top:2px;
border-top: 2px solid silver;
}
.comments .comments-content .datetime a{
float: right;
font-size:10px;
}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#FAFAFA url(url comment) top repeat-x;
margin:5px auto 0;
padding:5px 5px;
border:1px solid silver;
}
.comment-actions a {
padding:2px 5px;
margin-right:10px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
font: 11px sans-serif;
border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px;
background: #EDEDED;
background: linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -webkit-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -o-linear-gradient( center top, white 20%, #E5E5E5 100% );
background: -ms-linear-gradient( center top, white 20%, #E5E5E5 100% );
}
.comment-actions a:hover {
text-decoration: none !important;
background: #CCC;
background: linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -moz-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -webkit-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -o-linear-gradient(center top,#EEE 20%,#CCC 100%);
background: -ms-linear-gradient(center top,#EEE 20%,#CCC 100%);
}
.comments .avatar-image-container {
margin-left:0px;
}
Catatan:
- Selanjutnya untuk membuat tampilan avatarnya menarik, tambahkan CSS berikut di bawah CSS tadi :
/*=== BOX Avatar dan Blank Avatar ===*/
.avatar-image-container {
box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC;
-webkit-box-shadow: 1px 1px 0 #CCC, 3px 3px 0 #FFF, 4px 4px 0 #CCC, 6px 6px 0 #FFF, 7px 7px 0 #CCC;
}
.avatar-image-container img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJfWc9gTDtCWfl-Moi6EEYYKZhap1n-87MPWDImMRj-_rCFnX900Zbr9RIbYxw6BvNNm0EPQyaHRZOzDX69TVWIeE_s_tERfHL8cMoFUQoTwmr07eu3SOera4oQubupGBntwR1D_vqhSU/s1600/blog-anonim.png);
width:35px; height:35px; border:none;
}
.avatar-image-container img:hover {
transform:scale(1.2) rotate(360deg); -ms-transform:scale(1.2) rotate(360deg); -o-transform:scale(1.2) rotate(360deg); -moz-transform:scale(1.2) rotate(360deg); -webkit-transform:scale(1.2) rotate(360deg);
transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; -webkit-transition:0.5s;
}
- Simpan pekerjaan anda. Maka hasilnya tampilan threaded comments blogger versi kedua ini seperti image berikut;
Thursday, 23 August 2012
Elemen Halaman Mempunyai Fungsi Scroll
Menanggapi salah satu pertanyaan dari pembaca blog ini tentang
“bagaimana cara membuat elemen halaman yang mempunyai fungsi scroll
seperti milik kang Rohman tentang Blog Tutorial untuk pemula
yang ada di bagian atas blog ini?” Jawabannya boleh di bilang
sederhana, sebab untuk membuat halaman seperti itu tidaklah harus
membuat kode html yang sangat banyak, melainkan hanya sedikit kode untuk membuatnya. Penasaran seperti apa kodenya, ini dia yang di maksud.
Untuk membuat halaman seperti itu, anda hanya membuat kode seperti ini :
<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
isi halaman
</div>
Good Luck
Untuk membuat halaman seperti itu, anda hanya membuat kode seperti ini :
<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">
isi halaman
</div>
Good Luck
Membuat Sticky Social Pada Blogspot
Tahu kan sticky social? Saya sendiri tidak tahu "makhluk" apa pula itu. "Makhluk" ini biasanya gentayangan di dunia joomla. Mungkin karena bentuknya seperti tongkat maka disebut stick. Atau mungkin juga karena keadaannya yang melekat maka dinamakan sticky. Entahlah. Yang jelas saya hanya mencoba membuat "makhluk" itu bisa gentayangan di dunia blogger. Kalaupun hasilnya tidak mirip dengan yang di joomla, itu bukan salah saya, tapi salah blogger, hehehe...
Jika sobat ingin melihat sticky social pada blogger, silahkan lihat icon-icon social network pada blog ini atau blog ini. Gimana, tertarik?
Bagi kamu yang tertarik, caranya cukup mudah kok, ikuti saja langkah-langkah berikut:
Jika kamu menginginkan, kamu juga bisa menambah atau mengurangi icon-icon social network lainnya. Atau bisa juga mengubah sumber gambar sesuai gambar yang kamu inginkan.
Ok, segitu aja sob. Semoga bermanfaat .....
Jika sobat ingin melihat sticky social pada blogger, silahkan lihat icon-icon social network pada blog ini atau blog ini. Gimana, tertarik?
Bagi kamu yang tertarik, caranya cukup mudah kok, ikuti saja langkah-langkah berikut:
- Dari dasbor, pilih Rancangan - Edit HTML.
- Lakukan duplikasi template untuk jaga-jaga jika bermasalah.
- Copy-lah script berikut lalu letakkan (paste) di bawah kode <body>:
<!--stickysocial_dock-->
<style type='text/css'>
.stickysocial {
background: transparent;
position: fixed;
top: 35%;
left: 0.25%;
z-index: 100;
vertical-align: bottom;
width: 37px;
text-align: center;
}
.stickysocial a:hover {
opacity: .73;
-moz-opacity: .73;
filter: alpha(opacity=73);
}
</style>
<div class='stickysocial' id='stickysocial_dock'>
<a href='https://plus.google.com/USERID' target='_blank' title='Follow us on Google+'><img alt='Google+' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-google.png' style='position:relative; width:37px'/></a>
<a href='http://www.facebook.com/USERNAME' target='_blank' title='Follow us on Facebook'><img alt='Facebook' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-facebook.png' style='position:relative; width:37px'/></a>
<a href='http://twitter.com/USERNAME' target='_blank' title='Follow us on Twitter'><img alt='Twitter' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-twitter.png' style='position:relative; width:37px'/></a>
<a href='http://www.myspace.com/USERNAME' target='_blank' title='Follow us on MySpace'><img alt='MySpace' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-myspace.png' style='position:relative; width:37px'/></a>
<http://as-jugabisa.blogspot.com/2012/08/membuat-sticky-social-pada-blogspot.html'><img alt='SC' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-rss-feed.png' style='position:relative; width:37px'/></a>
</div> - Ubahlah ukuran top dan left-nya sesuai keinginan.
- Jika ingin menempatkannya di sebelah kanan, ubah left menjadi right.
- Ganti USERID atau USERNAME sesuai User ID/User Name kamu pada akun google+, facebook, twitter, dan myspace.
- Jika sudah selesai, simpanlah dan ucapkan alhamdulillah...
Jika kamu menginginkan, kamu juga bisa menambah atau mengurangi icon-icon social network lainnya. Atau bisa juga mengubah sumber gambar sesuai gambar yang kamu inginkan.
Ok, segitu aja sob. Semoga bermanfaat .....
Wednesday, 22 August 2012
Cara Pasang Shoutbox
Buku tamu (Shoutbox) dalam sebuah blog cukup penting karena merupakan
salah satu forum komunikasi antara pemilik blog dan pengunjung serta
tempat dimana para pengunjung ingin mengajukan pertanyaan ataupun
komentar ke pemilik blog,,untuk membuat dan memasang buku tamu tersebut
ke blog anda silakan ikuti langkah-langkah berikut:
1. Silakan buka http://www.shoutmix.com kemudian daftar terlebih dahulu dengan cara mengklik tulisan Get One now, free, ataupun dengan mengklik tulisan Sign Up,atau create silahkan anda tulis data-data anda pada form yang telah di sediakan.
Jika sudah tedaftar silahkan anda login dengan id anda
2. Pada menu Display pilih Style and Colour, silakan pilih style shoutbox yang anda inginkan kemudian save setting
3. Untuk mendapatkan kode HTML dari shoutbox anda, silahkan ke menu setting->Quick Start ->Get Code kemudian silakan Isi lebar dan tinggi shoutbox yang di inginkan
4. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda
5.Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda.
6.Selesai
Untuk pasang kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.
Untuk blogger dengan template klasik :
1.Log in terlebih dahulu ke blogger.com dengan id anda
2.Klik menu Template
3.Klik Edit HTML
4.Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat yang anda inginkan
5.Klik tombol Preview untuk melihat perubahan yang kita buat.
6.klik Save Template Changes
7.Selesai
Untuk Blogger baru :
1.Silahkan Login dengan id anda
2. Klik menu Layout->Page Element
3. Klik Add a Page Element
4. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
tuliskan judul shoutbox anda pada form title
5. Copy paste kode HTML shoutbox anda di dalam form Content
6. Klik tombol Save Changes
7. Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
kemudian kik tombol Save
8. Selesai
Selamat mencoba !
1. Silakan buka http://www.shoutmix.com kemudian daftar terlebih dahulu dengan cara mengklik tulisan Get One now, free, ataupun dengan mengklik tulisan Sign Up,atau create silahkan anda tulis data-data anda pada form yang telah di sediakan.
Jika sudah tedaftar silahkan anda login dengan id anda
2. Pada menu Display pilih Style and Colour, silakan pilih style shoutbox yang anda inginkan kemudian save setting
3. Untuk mendapatkan kode HTML dari shoutbox anda, silahkan ke menu setting->Quick Start ->Get Code kemudian silakan Isi lebar dan tinggi shoutbox yang di inginkan
4. Copy seluruh kode HTML yang ada pada text area yang berada di bawah tulisan Generated Codes, lalu simpan di program Notepad anda
5.Klik Log out yang berada di atas layar anda untuk keluar dari halaman shoutmix anda.
6.Selesai
Untuk pasang kode HTML shoutbox tadi pada blog anda, silahkan ikuti langkah-langkah berikut ini.
Untuk blogger dengan template klasik :
1.Log in terlebih dahulu ke blogger.com dengan id anda
2.Klik menu Template
3.Klik Edit HTML
4.Paste kode HTML shoutbox anda yang telah di copy pada notepad tadi di tempat yang anda inginkan
5.Klik tombol Preview untuk melihat perubahan yang kita buat.
6.klik Save Template Changes
7.Selesai
Untuk Blogger baru :
1.Silahkan Login dengan id anda
2. Klik menu Layout->Page Element
3. Klik Add a Page Element
4. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript
tuliskan judul shoutbox anda pada form title
5. Copy paste kode HTML shoutbox anda di dalam form Content
6. Klik tombol Save Changes
7. Drag & Drop element yang telah anda buat tadi di tempat yang di sukai
kemudian kik tombol Save
8. Selesai
Selamat mencoba !
Pasang Read More untuk Template Baru
Untuk membuat Read More seperti pada postingan saya,supaya artikel yang tampil lebih pendek ikuti langkah – langkah berikut:
1. Sign in di blogger anda dengan->Setting->Formatting
2.Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi text area kosong tersebut dengan kode di bawah ini :
Pemasangan kode ini supaya pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu ditext area saat posting
Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :
1. Klik menu Dasboard->Layout->Edit HTML
2. Klik tulisan Download Full Template
Silahkan save dulu template tersebut, untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula dgn upload lagi data tersebut
3. Jangan lupa beri tanda centang pada kotak di samping tulisan "Expand Widget Template"
4. Silahkan anda cari kode berikut pada kode template milik sobat :
atau
5. Copy kode HTML di bawah ini kemudian paste di bawah kode diatas
6. Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :
7. Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
anda bisa mengganti kata Read More pada kode ini sesuai keinginan anda
8. klik tombol bertuliskan Save Template
9. Selesai,
Cara Posting Artikel nya
1. Klik menu Posting->jangan lupa tulis posting di Edit HTML bukan di Compose karena kode dibawah ini tidak akan muncul di halamana compose
Secara otomatis akan timbul kode seperti ini
2. Tulisankan artikel yang ingin tampak pada blog sebelum kode dibawah ini
3. Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode dibawah ini :
4. Klik tombol PUBLISH POST->Silakan lihat blog anda,,
Untung postingan yang anda buat sebelum pasang read more silakan edit dan tambahkan kode dibawah ini secara manual dengan format dibawah ini
warna merah adalah kode yang harus anda tambahkan dipostingan yang sedang anda edit
Selamat mencoba!!
1. Sign in di blogger anda dengan->Setting->Formatting
2.Pada layar paling bawah, ada text area kosong disamping tulisan Post Template, isi text area kosong tersebut dengan kode di bawah ini :
<div class="fullpost">
</div>
3. Klik tombol yang bertuliskan Save Settings</div>
Pemasangan kode ini supaya pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu ditext area saat posting
Langkah selanjutnya yaitu menambahkan kode pada template, silahkan ikuti langkah berikut :
1. Klik menu Dasboard->Layout->Edit HTML
2. Klik tulisan Download Full Template
Silahkan save dulu template tersebut, untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula dgn upload lagi data tersebut
3. Jangan lupa beri tanda centang pada kotak di samping tulisan "Expand Widget Template"
4. Silahkan anda cari kode berikut pada kode template milik sobat :
<div class='post-header-line-1'/>
<div class='post-body'>
<div class='post-body'>
atau
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<div class='post-body entry-content'>
5. Copy kode HTML di bawah ini kemudian paste di bawah kode diatas
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;} </style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;} </style>
<style>.fullpost{display:inline;} </style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;} </style>
6. Kemudian lihat kebagian bawah sehingga terlihat kode berikut ini :
<p><data:post.body/></p>
7. Copy kode HTML di bawah ini kemudian paste di bawah kode tadi
<a expr:href='data:post.url'>Read More......
</b:if>
</b:if>
anda bisa mengganti kata Read More pada kode ini sesuai keinginan anda
8. klik tombol bertuliskan Save Template
9. Selesai,
Cara Posting Artikel nya
1. Klik menu Posting->jangan lupa tulis posting di Edit HTML bukan di Compose karena kode dibawah ini tidak akan muncul di halamana compose
Secara otomatis akan timbul kode seperti ini
<div class="fullpost">
</div>
</div>
2. Tulisankan artikel yang ingin tampak pada blog sebelum kode dibawah ini
<div class="fullpost">
3. Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode dibawah ini :
</div>
4. Klik tombol PUBLISH POST->Silakan lihat blog anda,,
Untung postingan yang anda buat sebelum pasang read more silakan edit dan tambahkan kode dibawah ini secara manual dengan format dibawah ini
Artikel yang ingin tampil dipostingan
<div class="fullpost">
Sisa Artikel anda
</div>
<div class="fullpost">
Sisa Artikel anda
</div>
warna merah adalah kode yang harus anda tambahkan dipostingan yang sedang anda edit
Selamat mencoba!!
Pasang Search engine
Selain label, untuk mempercepat pencarian kategori yang kita inginkan
maka dipasang search engine untuk blog anda,caranya sebagai berikut:
1.Login ke blog anda ->Layout->add gadget
2.Pilih HTML/Javascript
3.Masukkan kode berikut
<form id="searchform" action="http://AlamatBlogAnda.blogspot.com/search" name="searchform" method="get"> <br /><input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>
4.Ganti tulisan AlamatBlogAnda dengan URL atau alamat blog anda
5.Kemudian Save Setting
6.Preview dan lihat hasil kerja anda ...GOOD Luck...
1.Login ke blog anda ->Layout->add gadget
2.Pilih HTML/Javascript
3.Masukkan kode berikut
<form id="searchform" action="http://AlamatBlogAnda.blogspot.com/search" name="searchform" method="get"> <br /><input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>
4.Ganti tulisan AlamatBlogAnda dengan URL atau alamat blog anda
5.Kemudian Save Setting
6.Preview dan lihat hasil kerja anda ...GOOD Luck...
Cara Pasang dan Daftar Sitemeter di Blog
Untuk mengetahui berapa banyak pengunjung dan asal pengunjung yang
telah mengunjungi blog anda karna semakin banyak pengunjung yang
mengunjungi blog anda semakin tinggi traffic blog anda maka diperlukan
yang disebut site meter, berikut cara daftar dan pasang sitemeter di
blog:
1. Sign up disini www.sitemeter.com atau klik disini pilih sitemeter basic Free
2. Isikan data2 blog / web anda kemudian next sampai semua data terisi lengkap
3. Setelah semua diisi lengkap akan muncul pesan Success! Thank You.
4 Pilih menu Manager
5. Pilih jenis sitemeter di meter style
6. Untuk mendapatkan kode HTMLnya klik di HTML code pilih Site Meter JavaScript HTML untuk yg pakai new blogger/XML/Java Script
atau Site Meter Regular HTML untuk yg pakai blogger klasik
7. Kemudian copy di blogger anda di layout->add gadget ->pilih edit HTML/Javasricp->copy kode tersebut
8.save setting
Fungsi di menu Site meter
General
Sumary : Jumlah semua pengunjung dari awal kita pasang sitemeter.
Who's On : Jumlah pengunjung pada saat ini.
Traffic Prediction : prediksi Traffic untuk blog/website kita
Recent Visitor
By Details : detail pengunjung sepeti alamat domain/IP, jumlah halaman yang dilihat, waktu kunjungan, dan lama kunjungan.
By Referrals : asal pengunjung.
By World Map : menampilkan asal kota atau negara asal pengunjung dalam bentuk peta.
By Location : menampilkan data kota atau negara asal pengunjung.
By Out Clicks : link yang diklik pengunjung pada saat meninggalkan blog.
By Entry Pages : halaman yang dituju pada saat pengunjung datang.
By Exit Pages : halaman yang terakhir dilihat oleh pengunjung.
Visits : menampilkan data pengunjung dalam bentuk diagram
Current Day : per hari
Previous 7 Days : per minggu
Previous 30 Days : per bulan
Previous 12 Month : per tahun
Visits and page views : menampilkan data kunjungan dan jumlah halaman yang dilihat oleh pengunjung
Current Day : per hari
Previous 7 Days : per minggu
Previous 30 Days : per bulan
Previous 12 Month : per tahun
Page ranking : rangking halaman berdasarkan halaman pada saat masuk (Entry page),
atau keluar (Exit Pages)
Selamat mencoba
1. Sign up disini www.sitemeter.com atau klik disini pilih sitemeter basic Free
2. Isikan data2 blog / web anda kemudian next sampai semua data terisi lengkap
3. Setelah semua diisi lengkap akan muncul pesan Success! Thank You.
4 Pilih menu Manager
5. Pilih jenis sitemeter di meter style
6. Untuk mendapatkan kode HTMLnya klik di HTML code pilih Site Meter JavaScript HTML untuk yg pakai new blogger/XML/Java Script
atau Site Meter Regular HTML untuk yg pakai blogger klasik
7. Kemudian copy di blogger anda di layout->add gadget ->pilih edit HTML/Javasricp->copy kode tersebut
8.save setting
Fungsi di menu Site meter
General
Sumary : Jumlah semua pengunjung dari awal kita pasang sitemeter.
Who's On : Jumlah pengunjung pada saat ini.
Traffic Prediction : prediksi Traffic untuk blog/website kita
Recent Visitor
By Details : detail pengunjung sepeti alamat domain/IP, jumlah halaman yang dilihat, waktu kunjungan, dan lama kunjungan.
By Referrals : asal pengunjung.
By World Map : menampilkan asal kota atau negara asal pengunjung dalam bentuk peta.
By Location : menampilkan data kota atau negara asal pengunjung.
By Out Clicks : link yang diklik pengunjung pada saat meninggalkan blog.
By Entry Pages : halaman yang dituju pada saat pengunjung datang.
By Exit Pages : halaman yang terakhir dilihat oleh pengunjung.
Visits : menampilkan data pengunjung dalam bentuk diagram
Current Day : per hari
Previous 7 Days : per minggu
Previous 30 Days : per bulan
Previous 12 Month : per tahun
Visits and page views : menampilkan data kunjungan dan jumlah halaman yang dilihat oleh pengunjung
Current Day : per hari
Previous 7 Days : per minggu
Previous 30 Days : per bulan
Previous 12 Month : per tahun
Page ranking : rangking halaman berdasarkan halaman pada saat masuk (Entry page),
atau keluar (Exit Pages)
Selamat mencoba
Trik Membuat Kotak Banner
Pada trik blogger kali ini, kita akan mencoba memperbaharui trik sebelumnya dengan menggunakan CSS3. Widget dikustomisasi untuk pemanfaatan banner berukuran 125×125. Setiap kode CSS dapat diletakkan sebelum
]]></b:skin> & HTML dimasukkan ke dalam penambahan gadget atau widget. Mari kita ikuti bersama trik membuat kotak banner yang dimaksud.Widget Banner I
CSS
/* Area yang akan digunakan untuk memasang Banner */
.kotak-banner {
background:#999;
border:2px solid #c3c3c3;
margin:0 auto 1.7143em;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}
/* Tempat untuk memasang Banner di atas kode ini */
.banner {
background:#c3c3c3;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
position:relative;
width:45.5%;
text-align:center;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}
/* Memunculkan title image saat di dekati tetikus (mouse) */
.banner a:hover:after {
background-color:rgba(0,0,0,0.25);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
left:4%;
bottom:3%;
width:92%;
position:absolute;
z-index:1;
}
.banner img {
margin-top:4%;
width:125px;
height:125px;
}
.banner:hover {
background:#f1f1f1;
-webkit-box-shadow:0px 0px 5px #fff;
-moz-box-shadow:0px 0px 5px #fff;
-o-box-shadow:0px 0px 5px #fff;
-ms-box-shadow:0px 0px 5px #fff;
box-shadow:0px 0px 5px #fff;
}
HTML
<div class="kotak-banner">
<div class="banner"><a href="###" title="Banner 125x125"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilLv3Mlz2_-LfDY8915L6xpnKmTlf8jk0_uyUgIHD3p1dl_oCRDHtVlMruh5H0uDZc9wvJ4lBxxYhyphenhyphencuvdcY4wapuVdaFMmMEy90tsryOzqSAjnn97-Px4fejJpASSarqMoRRMMbGJkc4/s800/125x125png.png" alt="Banner"/></a>
</div>
...
</div>
Catatan:- Copy & paste dimulai kode <div class="banner"> … </div> pada titik, titik,titik (...) untuk menambah banner.
- Ganti kode yang dicetak tebal dengan alamat website/halaman blog tujuan banner.
- Rubah title (warna biru) sesuai dengan title banner. Nah, title inilah yang akan muncul nantinya dalam banner kita, ketika banner di hover.
- Ganti gambar (warna ungu) sesuai dengan alamat gambar (banner) disimpan.
- Tambahkan
altseperti yang dicontohkan pada kode yang diberi warna hijau.
Widget Banner II
CSS
cara pengkodean hampir mirip dengan kode CSS pada “Widget Banner I”, cuma merubahbackground, border, dan ditambah sedikit variasi transform:scale (warna orange). Berikut gambaran kode CSS keseluruhannya..kotak-banner {
border:2px solid #444;
margin:0 auto 1.7143em;;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}
.banner {
background:#444;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
text-align:center;
position:relative;
width:45.5%;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.banner a:hover:after {
background-color:rgba(0,0,0,0.15);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
position:absolute;
left:4%;
bottom:3%;
width:92%;
z-index:1;
}
.banner img {
margin-top:4%;
width:125px;
height:125px;
}
.banner:hover {
background:#eee;
-webkit-box-shadow:0px 2px 5px #333;
-moz-box-shadow:0px 2px 5px #333;
-o-box-shadow:0px 2px 5px #333;
-ms-box-shadow:0px 2px 5px #333;
box-shadow:0px 2px 5px #333;
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
z-index:5;
}
HTML
Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “Widget Banner I”.Widget Banner III (Rotasi Banner Random)
CSS
.kotak-banner {
background:#fff;
border:2px solid #d4d4d4;
margin:0 auto 1.7143em;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}
.banner {
background:#fafafa;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
text-align:center;
position:relative;
width:45.5%;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-webkit-transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
-o-transform:rotate(-2deg);
-ms-transform:rotate(-2deg);
transform:rotate(-2deg);
}
.banner:nth-child(even) {
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
-o-transform:rotate(4deg);
-ms-transform:rotate(4deg);
transform:rotate(4deg);
}
.banner:nth-child(3n) {
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
position:relative;
}
.banner:nth-child(4n) {
-webkit-transform:rotate(-4deg);
-moz-transform:rotate(-4deg);
-o-transform:rotate(-4deg);
-ms-transform:rotate(-4deg);
transform:rotate(-4deg);
}
.banner a:hover:after {
background-color:rgba(0,0,0,0.25);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
position:absolute;
left:4%;
bottom:3%;
width:92%;
z-index:1;
}
.banner img {
margin-top:4%;
width:125px;
height:125px;
}
.banner:hover {
background:#fafafa;
-webkit-box-shadow:2px 4px 5px #333;
-moz-box-shadow:2px 4px 5px #333;
-o-box-shadow:2px 4px 5px #333;
-ms-box-shadow:2px 4px 5px #333;
box-shadow:2px 4px 5px #333;
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
position:relative;
z-index:5;
}
HTML
Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “Widget Banner I”.Generalisasi
Anda pun dapat menambah, menghilangkan, & memodifikasi widget banner di atas sehingga sesuai dengan yang Anda inginkan. Berhubungan dengan “Widget Banner III” mungkin akan lebih baik jika diterapkan dalam image gallery. Lebih jelas tentang penggunaan CSS3 transform dalam polaroids—termasuk juga image gallery—dapat dipelajari pada website ZURBexpo.Silakan memilih bentuk widget banner yang Anda kehendaki.
Subscribe to:
Posts (Atom)


