Tutorial-Harvest

Membuat Author Threaded Comments Highlight Dengan Jquery

View Demo Langsung :

Assalamualaikum . Malam ini saya akan share Membuat Author Threaded Comments Highlight Dengan Jquery .Seperti anda ketahui,banyak cara untuk membuat gambar yang terdapat di posting kita agar lebih menarik.Kali ini saya akan berikan satu lagi tips mengenai gambar di postingan, iaitu membuat author threaded comments on blog :)

Untuk lebih jelasnya anda boleh cuba klik gambar di blog saya, klik salah satu gambar yang ada disitu, maka gambar tersebut akan membesar. Jika anda tertarik, di bawah ini akan saya berikan langkah-langkah untuk membuatnya :

Langkah 1

Login ke Blogger

Langkah 2

Masuk ke Edit HTML

Langkah 3

Cari kode dibawah ini:

]]></b:skin>

Langkah 4

Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3 :

.author-highlight {

background-image: url(https://lh5.googleusercontent.com/_xcD4JK_dIjU/TasKJgjf1FI/AAAAAAAAFEA/pvkcJFnS-DA/s800/author_mark.png);

background-repeat: no-repeat;

background-position: 100% 100%;

background-color: #F0F0F0;

}

Langkah 5

Cari kode dibawah ini:

</head>

atau kode:

</body>

Langkah 6

Masukan (copy paste) kode jQuery dibawah ini diatas kode pada langkah 5 (Lihat Skenario jQuery):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>//<![CDATA[

$(document).ready(function(){

$('.user.blog-author').closest('.comment-block').addClass('author-highlight');

});

//]]></script>

Langkah 7

Simpan template anda dan preview blog...

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Sumber : http://deejayhan.blogspot.com/2012/03/membuat-author-threaded-comments.html

READMORE>>

Cara Membuat Kotak Pemberitahuan Blog

Trik kali ini Membuat Kotak Pemberitahuan Blog. Ada banyak cara untuk melakukan trik ini, di mana saya memperkenalkan sebuah aplikasi kecil Jquery dalam menciptakan Kotak Pesan Blog. Sebuah fitur khusus dari kerangka ini adalah bahwa pembaca dapat mematikannya jika diinginkan, sehingga memastikan estetika blog Anda.

View Demo :

Langsung saja ke langkah-langkahnya.

Langkah 1

Sign In Ke Akun Blog anda

Langkah 2

Masuk ke Rancangan

Langkah 3

Edit HTML

Langkah 4

Copy Kode dibawah ini. dan pastekan diatas kode </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style type='text/css'>

.notification{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}

.notification span{background:url(https://lh5.googleusercontent.com/_U0QaeycS3vw/Taqu74WricI/AAAAAAAAAkE/eEcZwcRj0ko/close.png) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}

.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}

.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}

.warning:before{content:url(https://lh3.googleusercontent.com/_U0QaeycS3vw/Taqu7wyV6rI/AAAAAAAAAkI/726O1B0-O94/warning.png);float:left;margin:15px 15px 0 25px}

.warning strong{color:#e5ac00;margin-right:15px}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){$('.notification').hover(function(){$(this).css('cursor','auto');});$('.notification span').click(function(){$(this).parent().fadeOut(800);});});</script>

<div class='notification warning'><span/>

<p><strong>Warning!</strong>Selamat datang di blog DeeJayHan, Tutorial blog Up To Date</p></div></b:if>

Langkah 5

Ganti tulisan yang dicetak TEBAL dengan sesuka anda.

Langkah 6

Simpan Template anda danlihat hasilnya sungguh sempurna

Sumber : http://deejayhan.blogspot.com

READMORE>>

Membuat “Outside the Box Navigasi” Dengan Jquery

Akhirnya Update Lagi . Sekarang saya mau share tentang Membuat “Outside the Box Navigasi” Untuk Blogger .Untuk lebih jelas silahkan

View Demo :

Boleh tau, setelah jadi, jadi kepikiran, bisa gak dipasang pada blogger?? dan ternyata bisa. OK langsung saja berikut cara memasangnya pada blogger :

Masukkan Script Jquery ini di atas code <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://javascriptcuss.googlecode.com/files/stack-1.js' type='text/javascript'/>

<script src='http://javascriptcuss.googlecode.com/files/fisheye-iutil.min.js' type='text/javascript'/>

Lalu Pasang kode CSSnya yaitu sebelum kode ]]></b:skin>

/************** START:CUSSTACK-CSS *****************/

#stacksNav {

    width: 145px;

    height: 25px;

    position: fixed;

    bottom: 0;

    right: 0;

    padding: 45px 7px 0 0;

    background: #333;

    color: #f5f5f5;

    text-align: center;

    border-top-right-radius: 14px;

    -webkit-border-top-left-radius: 14px;

    -moz-border-radius-topleft: 14px;

    opacity: .65;

    filter: alpha(opacity = 65);

}

.stack { position: fixed; bottom: 28px; right: 40px; }

.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }

.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }

.stack ul li { position: absolute; }

.stack ul li img { border: 0; }

.stack ul li span { display: none; }

.stack .openStack li span {

    font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;

    display:block;

    height: 14px;

    position:absolute;

    top: 17px;

    right:60px;

    line-height: 14px;

    border: 0;

    background-color:#000;

    padding: 3px 10px;

    border-radius: 10px;

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    color: #fcfcfc;

    text-align: center;

    text-shadow: #000 1px 1px 1px;

    opacity: .85;

    filter: alpha(opacity = 85);

}

/* IE Fixes */

#stacksNav { _position: absolute; }

.stack { _position: absolute; }

.stack ul { _z-index:-1; _top:-15px; }

.stack ul li { *right:5px; }

Lalu isikan juga kode HTMLnya untuk bisa tampil di blog, yaitu setelah </head>

<div class='stack'>

        <img alt='stack' src='http://lh6.ggpht.com/_9NxhAFeTmio/TCQyJgd3MII/AAAAAAAAA8E/fdzg67qQ-xI/s800/stack.png'/>

        <ul id='stack'>

            <li><a href='http://feeds.feedburner.com/_deejayHan_'><span>Subscribe</span>

            <img alt='RSS Feed' src='http://lh5.ggpht.com/_9NxhAFeTmio/TCRHPiO-SgI/AAAAAAAAA8s/3EulmPJDk3U/s800/CoffeeCup_Feed_Add_64.png'/></a></li>

            <li><a href='https://plus.google.com/110787383199450518048'><span>buzz</span>

            <img alt='google' src='http://lh4.ggpht.com/_9NxhAFeTmio/TCRFuCzzQwI/AAAAAAAAA8Y/u9HKcCymLRY/s800/buzz_9.png'/></a></li>

            <li><a href='ymsgr:sendim?deejayhan'><span>yahoo</span>

            <img alt='yahoo' src='http://opi.yahoo.com/online?u=supercuss&m=g&t=9'/></a></li>

            <li><a href='http://www.facebook.com/DeeJayHanBlog'><span>Facebook</span>

            <img alt='Facebook' src='http://lh5.ggpht.com/_9NxhAFeTmio/TCRFuvU6BXI/AAAAAAAAA8k/lmQSEi5I09A/s800/facebook.png'/></a></li>

            <li><a href='http://twitter.com/DeeJayHan1'><span>Twitter</span>

            <img alt='Twitter' src='http://lh3.ggpht.com/_9NxhAFeTmio/TCRFuXXhuUI/AAAAAAAAA8g/3l24hD4q0Ug/s800/Twitter.png'/></a></li>

        </ul>

</div>

Pada kode yang diberi warna merah, Silakan ganti alamat Feed, Google Buzz, Yahoo id, Facebook dan Twitter kalian. atau bisa juga menambahi dengan social bookmark yang lain sesuai selera, atau jika ingin merubah gambar, maka silakan isikan kode gambar setelah kode src=

Untuk Merubah icon YM bisa diganti dari t=9 menjadi t=1, atau 2 dst... (untuk list icon default YM ~~akan ditulis nanti - Insya Allah~~)

Selesai, silakan disave dan dilihat.

Selamat Mencoba.

Sumber : http://deejayhan.blogspot.com

READMORE>>

Mengganti Older, Newer dengan Gambar Melayang

Pada kesempatan kali ini saya akan share "Mengganti Older, Newer dengan Gambar Melayang" nah sebelumnya post ini adalah requestan dari sobat blogger.. nah bagi yang belum tau gimana itu "Older, Newer dengan Gambar Melayang" silahkan lihat di blog ini atau bisa lihat ss atau screenshot dibawah ini :

http://i1132.photobucket.com/albums/m571/deejayhan/older.jpg

1. Login ke blogger.
2. Pada Dasbor klik Rancangan, kemudian klik Edit HTML.
3. Lalu carilah kode ]]></b:skin>
setelah mencari kode ]]></b:skin>
silahkan masukan kode dibawah ini tepat di atas kode ]]></b:skin>
ini :

#blog-pager a{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;height:80px;opacity:0.4;overflow:hidden;position:fixed;text-indent:-9999px;top:40%;width:80px;z-index:9;margin:0 0 0 5px}.blog-pager-older-link{background:url(http://4.bp.blogspot.com/-18bHuKvg5ao/TnGg6N1EtWI/AAAAAAAAA6A/ZhKPackZ4WQ/s400/Next.png) no-repeat scroll 0 0 transparent;right:5px;-moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}.blog-pager-newer-link{background:url(http://4.bp.blogspot.com/-QbeWH7P8OSE/TnGg_zIB6nI/AAAAAAAAA6I/TmNTauVcj3U/s400/Prev.png) no-repeat scroll 0 0 transparent;left:0;-moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}#blog-pager a:hover{opacity:1}

4. Simpan deh :D

NB : Jangan lupa delete blog-pager-newer-link dan blog-pager-older-link yang agan gunakan sebelumnya :)

Semoga Bermanfaat :)

READMORE>>

Cara Memodifiksi threaded comments

ahmadanakindonesia.blogspot.com - hi.... Sobat kali Ini saya akan membagi tips untuk sobat blogger yang ingin memodifikasi threaded comments . ini hanya memodifikasi bukan membuat kalo membuat bisa di cari di mbah google maksud dari memodifikasi threaded comments yang lama menjadi yang baru

nanti threaded comments yang lama akan berubah menjadi seperti ini :

Note:
Jika Anda Belum pernah memasang threaded comments bisa di cari di Google di posting ini bukan membuat Threaded Comments tetapi Memodifikasi threaded comments sobat

Ok Udah tahu Kan Syaratnya Sekarang Tinggal trick nya :

i,Login ke Blogger >> Rancangan >> Edit HTML
ii, Centang Expand Template Widget
iii,lalu cari kode <b:include data='post' name='comments'/> (gunakan Ctrl + F untuk mempermudah mencari kode tersebut) yang biasanya ada 4 pada 2 tempat, seandainya ada 3 tambahkan biar menjadi 4.
iiii,dan ganti semuanya dengan :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

iiiii,Selanjutnya Copy Kode berikut Dan paste diatas kode ]]></b:skin>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
}
.comments .comment .comment-actions a {
padding: 5px 5px 0 0;
}
.comments .comment .comment-actions a:hover {
text-decoration: none;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 1px 0 1px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: -2px;
margin-left: 36px;
width: 501px;
}
.comments .comments-content .comment {
margin-bottom: 0;
}
.comments .comments-content .comment:first-child {
padding-top:1px;
}
.comments .comments-content .comment:last-child {
border-bottom: 0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
font-size: 14px;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0;
}
.comments .comments-content .datetime {
float: right;
margin-right:5px;
font-size: 11px;
color: #00F;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin: 0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
background: transparent;
cursor: pointer;
text-align: center;
}
.comments .continue a {
display: block;
padding: 0.5em;
margin: 0 340px 0 48px;
font-weight: bold;
background: #699AB8 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#236C95', endColorstr='#7CA9C0');background:-moz-radial-gradient(top, #236C95, #7CA9C0);background:-webkit-gradient(linear, left top, left bottom, from(#236C95), to( #7CA9C0))repeat-x top left;
border: 1px solid #ccc;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px;
color: #FFF;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: inline-block;
}
.comments .thread-toggle {
background: #00FF00 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#006400');background:-moz-radial-gradient(top, #00FF00, #006400);background:-webkit-gradient(linear, left top, left bottom, from(#00FF00), to( #006400))repeat-x top left;
border: 1px solid #006400;-webkit-border-radius:15px; -moz-border-radius: 15px; border-radius: 15px;
display: inline-block;
padding: 3px 0;
width: 80px;
height: 20px;
text-align: center;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 0;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
margin: 4px 2px 2px;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
background: rgb(99,147,193) none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(99,147,193)', endColorstr='rgb(207,231,250)');background:-moz-radial-gradient(top, rgb(99,147,193), rgb(207,231,250));background:-webkit-gradient(linear, left top, left bottom, from(rgb(99,147,193)), to( rgb(207,231,250))) no-repeat left top;
border: 1px solid #FFF;-webkit-border-radius:5px; -moz-border-radius: 5px; border-radius: 5px;
margin-left: 48px;
padding: 5px;
position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
Dan Terakhir Save template Dan Lihat hasilnya ......!!!
Sumber : http://ahmadanakindonesia.blogspot.com/2012/03/cara-memodifiksi-threaded-comments.html

READMORE>>

Cara membuat Facebook Fans Page Tersembunyi di Blog Part II

sekarang saya akan membagi part II by andi Hasbi HTC penasaran...??? nanti contohnya akan seperti ini :

Sekarang cara pemasangannya :

1. Masuk ke blogger dengan akun kamu.

2. Klik tab Design > Edit HTML

3. Cari kode </head>

4. Copy kode di bawah ini dan pastekan tepat di atas kode </head>

     <script src="http://trikdantutorialblog.googlecode.com/files/slidboxordinary.js" type="text/javascript"></script> <div id="fbslidebox" style="position: fixed; width: 342px; overflow: hidden; bottom: 20px; right: 10px; background: url(&quot;http://sdn06.files.wordpress.com/2012/03/cats4.jpg&quot;) repeat scroll 0% 0% transparent; -moz-border-radius: 15px 15px 15px 15px; border: 2px solid rgb(255, 51, 0); display: block;">

    <div style=';width: 320px; padding: 10px; margin: 0pt auto; overflow: hidden;'>

    <a id="fbcloseslidebox" style="float: right; color: rgb(153, 153, 153); padding: 0pt 3px; border: 1px solid rgb(204, 204, 204); text-decoration: none; font-size: 9px; font-family: Verdana,Geneva,sans-serif;" href="#">Exit</a>

    <strong style="color: rgb(0, 0, 0);">Terima kasih Banyak,Bagi yang mau Like/Suka </strong>

    <iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/AhmadBlogOrMuliadiBlog&amp;width=295&amp;height=200&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=273090679394325" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:295px; height:200px;" allowTransparency="true"></iframe> </div></div>

5. Dan Terakhir Save Template....

Perhatian :
-Tulisan yang berwarna biru itu adalah url backgroundnya bisa di ganti atau dibiarin aja
-Tulisan Yang Berwarna orange itu adalah deskripsinya
-Tulisan yang Berwarna merah itu adalah URL Fans Page Facebook Kamu

READMORE>>