Sharing Mie

Membuat Recomended Post Yang Muncul Di Akhir Postingan Blogger

2/04/2013 01:14:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Georgia, Times New Roman, serif;"><span style="line-height: 19px;">Kali ini aku ingin berbagi cara untuk membuat rekomended post yang muncul di akhir artikel kamu. Recomended post ini sanget bermanfaat sekali karena dengan menambahkan widget blogger ini, kamu bisa menghindari bounce visitor yang ada di blog kamu. Widget ini bisa membuat pengunjung blog kamu tertarik karena disitu akan diberikan random artikel yang bisa mereka baca juga setelah membaca artikel kamu sebelumnya. Gambar di bawah ini merupakan Screenshoot dari recomended post :</span></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="line-height: 19px;"><br /></span></span>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09aDppa8kqV5C3728_lnCvwP_wAR54q4p59GOPfn1XCZKICbXc3Hvx-rBd9lz4YjiIwDA65XzLDH7q23lFOrURSClQHHCTkPMmMxLJG1_BHeSE5KgywhfLcr0FU7Zng5RxlKNqZIJqBR6/s400/Cara+membuat+recomended+post+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj09aDppa8kqV5C3728_lnCvwP_wAR54q4p59GOPfn1XCZKICbXc3Hvx-rBd9lz4YjiIwDA65XzLDH7q23lFOrURSClQHHCTkPMmMxLJG1_BHeSE5KgywhfLcr0FU7Zng5RxlKNqZIJqBR6/s320/Cara+membuat+recomended+post+blogger.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Ingin tau cara membuatnya ?</div>
<div class="separator" style="clear: both;">
Membuat Recomended Post dalam Satu Langkah</div>
<div class="separator" style="clear: both;">
Nah, sebenarnya tidak sulit untuk menambahkan widget ini. Untuk menambahkankan widget ini kamu cukup untuk menekan (klik) gambar di bawah ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blogger.com/img/add/add2blogger_lg.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.blogger.com/img/add/add2blogger_lg.gif" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Jika kamu sudah klik gambar tersebut, sebenarnya langkahnya belum selesai sobat. Untuk membuatnya keluar di akhir postingan kamu kamu harus menambahkan Javascript ke dalam template kamu. Langkah ini nggak susah kok. Ikuti tutorial yang akan aku berikan berikut :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
1. Pergi ke Blogger Dashboard > Templates > Edit HTML</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
2. Centang Expand Widget Template !</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
3. Kemudian cari kode berikut ini</div>
<blockquote class="tr_bq">
<p class='post-footer-line post-footer-line-1'></blockquote>
<div class="separator" style="clear: both;">
atau</div>
<blockquote class="tr_bq">
<div class='post-footer-line post-footer-line-1'></blockquote>
<div class="separator" style="clear: both;">
atau</div>
<blockquote class="tr_bq">
<data:post.body/></blockquote>
<div class="separator" style="clear: both;">
Setelah ketemu kode di atas, kamu tambahkan kode script di bawah ini tepat di bawah kode tersebut !</div>
<blockquote class="tr_bq">
<div id='bpslidein_place_holder'></div></blockquote>
<div class="separator" style="clear: both;">
4. Nah, langkah terakhir adalah 'Save Template' </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Sekarang kamu bisa lihat hasilnya, kalau kamu membuka salah satu postingan di blog kamu dan kamu scroll sampai akhir postingan kamu akan mendapatkan kotak rekomended post di kiri bawah layar kamu. </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Kalau kamu merasa artikel ini bermanfaat, luangkan waktu untuk berbagi kepada teman-teman kamu dengan share artikel ini. Kalau ada yang ditanyakan silahkan tinggalkan komentar di bawah.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Semoga bermanfaat </div>
<br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="line-height: 19px;"><br /></span></span></div>

Kali ini aku ingin berbagi cara untuk membuat rekomended post yang muncul di akhir artikel kamu. Recomended post ini sanget bermanfaat seka...

Cara Membuat Komentar Facebook Di Blog Berdampingan Komentar Blogger

2/04/2013 01:10:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
Hallo sahabat blogger sekarang kita akan belajar untuk membuat komentar facebook berdampingan dengan komentar blogger.  Namun ini merupakan cara baru yang bisa anda terapkan ketika cara yang pertama tidak berhasil di blog anda. Karena memang setiap template blog akan menghasilkan hasil edit yang berbeda.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfdnKIjfZ2p1KfgmcDZZ-WiAPXxDFrp6JBDXyqaIMFTVZFyXysj-XLnN3V_mPBAYl7FUFAMjx1KjHGPwEeS1pgKuXif711-wfikczn5PQ_2XnDbL1fOcCzM6Xm_kRnL4uAMB2YeFwJhTr/s400/membuat+kotak+komentar+facebook+berdampingan+denga+kotak+komentar+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfdnKIjfZ2p1KfgmcDZZ-WiAPXxDFrp6JBDXyqaIMFTVZFyXysj-XLnN3V_mPBAYl7FUFAMjx1KjHGPwEeS1pgKuXif711-wfikczn5PQ_2XnDbL1fOcCzM6Xm_kRnL4uAMB2YeFwJhTr/s320/membuat+kotak+komentar+facebook+berdampingan+denga+kotak+komentar+blogger.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Sebenarnya caranya tidak susah-susah amat kok. Asalkan anda bisa teliti untuk membaca setiap instruksi saya saja. Nah sebelumnya saya akan memberikan hasil dari membuat kotak komentar facebook pada blog saya. Hasilnya Seperti Gambar Yang Di atas</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Berikut adalah langkah langkahnya :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 1 : Pergi ke blogger >> Dashboard >> Template</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Pastikan setiap anda edit HTML blog anda, selalu anda backup terlebih dahulu. Hal ini dikarenakan untuk jaga-jaga ketika hasil edit anda mengalami eror.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 2 : Edit HTML >> Lanjutkan</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 3 : Centang Expand Template Widget</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 4 : Temukan Kode di bawah ini (Ctrl + F) :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<b>]]></b:skin></b></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 5 : Copy kemudian paste kode di bawah ini diatas atau sebelum ]]></b:skin></div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
.comments-page { background-color: #f2f2f2;}<br />#blogger-comments-page { padding: 0px 5px; display: none;}<br />.comments-tab { float: left; padding: 5px; margin-right: 3px;<br />cursor: pointer; background-color: #f2f2f2;}<br />.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}<br />.comments-tab:hover { background-color: #eeeeee;}<br />.inactive-select-tab { background-color: #d1d1d1;}</blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 6 : Jika sudah selesai kemudian lanjutkan untuk mencari kode di bawah ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<b></head></b></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Kemudian copy dan paste kode di bawah ini tepat di atas kode <b></head></b> yang anda temukan :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><br /><script src='http://code.jquery.com/jquery-latest.js'/><br /><meta content='ID FB Anda disini' property='fb:admins'/><br /><script type='text/javascript'><br />function commentToggle(selectTab) {<br />$(".comments-tab").addClass("inactive-select-tab");<br />$(selectTab).removeClass("inactive-select-tab");<br />$(".comments-page").hide();<br />$(selectTab + "-page").show();<br />}<br /></script></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Lanhkah 7 :  Sebelumnya lihat tulisan pada script di atas yang saya beri warna merah 'ID FB Anda disini' . isikan dengan FB Id anda. Jika anda tidak tahu FB Id anda coba perhatikan contoh Comment FB temen gw yang diatas tadi.. Itu bisa anda lihat ketika anda membuka profil Facebook anda. Dan yang saya maksud dengan FB ID Nya.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 8 : Kemudian cari kode seperti ini <b><div class='comments' id='comments'></b> , di blog saya kode tersebut ada dua. Kalau anda juga menemukan ada dua kode tersebut di blog anda, paste kode dibawah ini tepat di bawah kedua kode tersebut!</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><br /><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><br /><fb:comments-count expr:href='data:post.url'/> Comments<br /></div><br /><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><br /><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/><data:post.numComments/> Comments<br /></div><div class='clear'/><br /></div><br /><div class='comments-page' id='fb-comments-page'><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='fb-root'/><br /><fb:comments expr:href='data:post.url' num_posts='2' width='400'/><br /></b:if><br /></div><br /><div class='comments comments-page' id='blogger-comments-page'></blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>Catatan :</b> Perhatikan kode diatas yang saya beri warna. Untuk yang angka 2 merupakan jumlah komentar yang ditampilkan. Kemudian untuk angka 400 merupakan lebar dari kotak komentar facebook yang ada di blog anda.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Untuk kode yang saya beri warna merah <b><div class='comments comments-page' id='blogger-comments-page'> </b> , jika anda menemukan kode yang sama di bawah kode yang anda paste di blog anda, hapus kode tersebut. Jadi pastikan tidak ada kode tersebut sama di bawahnya.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Langkah 9 : Simpan dan lihat hasilnya.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Gimana sahabat blogger, apakah anda berhasil membuat kotak komentar facebook berdampingan dengan kotak komentar blog anda? Beri komentar jika anda berhasil memasangnya. Beri tahu saya bahwa kode di cara di atas benar-benar bekerja pada blog anda.</div>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br /></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Cara Membuat Komentar Facebook Di Blog Berdampingan Komentar Blogger

Hallo sahabat blogger sekarang kita akan belajar untuk membuat komentar facebook berdampingan dengan komentar blogger. Namun ini merupakan...

Tab Menu Scroll Back To Top dan Profiles Social Untuk Blogger

2/04/2013 12:58:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
Tab Menu <b>Scroll Back To Top</b> dan <b>Profiles Social</b> Untuk <b>Blogger</b> - SharingWithMee Blog | Hai sobat blogger, tutorial kali ini saya akan memberikan kepada Anda sebuat tab menu scroll back to top dan profiles <b>Social Bokmark </b>yang bisa Anda gunakan untuk blog blogger Anda.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><br /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://www.fiveforblogger.com/2012/02/5-styles-fluid-search-bar.html" target="_blank">Demo Link</a></td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
<b>Langkah :</b></div>
<div class="separator" style="clear: both;">
<b><br /></b></div>
<div class="separator" style="clear: both;">
1. Buka akun Blogger Anda</div>
<div class="separator" style="clear: both;">
2. Masuk ke menu dit HTML, jangan lupa centang expand template widget</div>
<div class="separator" style="clear: both;">
3. Cari kode dibawah ini :</div>
<blockquote class="tr_bq">
]]></b:skin></blockquote>
<div class="separator" style="clear: both;">
     4.  Pastekan CSS berikut ini, diatas pada kode diatas :</div>
<blockquote class="tr_bq">
#fixed-bar {<br />
    position: fixed;<br />
    bottom: 0;<br />
    z-index: 100;<br />
    width: 100%;<br />
    height: 38px;<br />
    clear: both;<br />
    margin: 0;<br />
    padding-bottom: 4px;<br />
    background-color: #333;<br />
    overflow: hidden;<br />
}<br />
#fixed-bar a {<br />
    float: right;<br />
    margin: 0;<br />
    padding: 0;<br />
    background-color: #333;<br />
}<br />
#fixed-bar a.first {<br />
    float: left;<br />
    margin-top: -1px;<br />
}<br />
.bottom-wrapper {<br />
    max-width: 92%;<br />
    width: 960px;<br />
    margin: 0 auto;<br />
}</blockquote>
<div class="separator" style="clear: both;">
    5.  Lalu cari kode dibawah ini :</div>
<blockquote class="tr_bq">
</body></blockquote>
<div class="separator" style="clear: both;">
    6.  Pastekan kode dibawah ini, diatas pada kode diatas :</div>
<blockquote class="tr_bq">
<div id='fixed-bar'><br />
<div class='bottom-wrapper'><br />
<a class='go-top first' href='#page-header'><img alt='go top' src='http://3.bp.blogspot.com/-cBnkdgGehf4/TzyKY265xwI/AAAAAAAACfQ/ZZvzUQrG7m4/s1600/up_3038.png'/></a><br />
<a href='https://plus.google.com/111920657633787249674' target='_blank' title='see on google+'><img alt='google+ page' src='http://2.bp.blogspot.com/-BOc1ZCoB-Jw/TzyKYBnrVyI/AAAAAAAACe4/QgKgsc7um4c/s1600/gplus_3838.png'/></a><br />
<a href='http://www.facebook.com/sharer.php?' target='_blank' title='share with friends'><img alt='facebook' src='http://4.bp.blogspot.com/-lDVnV-OnEv4/TzyLhYc4yPI/AAAAAAAACfc/I7_buv1xxEM/s1600/facebook_3838.png'/></a><br />
<a href='http://twitter.com/54Blogger' target='_blank' title='follow me'><img alt='twitter' src='http://1.bp.blogspot.com/-mtVDHUkGUJs/TzyKYrJkNbI/AAAAAAAACfI/zXM9SKO2BFU/s1600/twitter_3838.png'/></a><br />
<a href='/feeds/posts/default' title='get updates'><img alt='rss' src='http://1.bp.blogspot.com/-l4C-DinWEr4/TzyKX4M7TvI/AAAAAAAACes/YDtzN-oPjYs/s1600/rss_3838.png'/></a><br />
</div><br />
</div><br />
<script>$('#fixed-bar').hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>600){$('#fixed-bar').slideDown(200)}else{$('#fixed-bar').slideUp(200)}});$('.go-top').click(function(){$('html,body').animate({scrollTop:0},1000);return false})});</script></blockquote>
<div class="separator" style="clear: both;">
     7.  Save template Anda.</div>
<br />
<br />
<div>
<br /></div>
</div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Tab Menu Scroll Back To Top dan Profiles Social Untuk Blogger

Tab Menu Scroll Back To Top dan Profiles Social Untuk Blogger - SharingWithMee Blog | Hai sobat blogger, tutorial kali ini saya akan me...

Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script

2/04/2013 12:55:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script Untuk Blogger | Hai sobat blogger, seperti pada tutorial seelumnya yang membahas auto readmore dengan javascript namun kali ini kita akan membahas tanpa javascipt. *Apa sih perbedaan menggunakan javascipt dengan tanpa javascript? Auto readmore dengan javascipt memakan waktu loading yang lebih lama lagi ketimbang tanpa java script. Nah, 1 lagi, katanya javascript membuat duplikat kontent yang akan membuat masalah lebih banyak lagi yang akan diberitahukan di Google Web Master.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Langkah :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
    1. Buka akun Blogger Anda</div>
<div class="separator" style="clear: both;">
    2. Masuk ke menu edit HTML, centang expand template widget</div>
<div class="separator" style="clear: both;">
    3. Cari kode dibawah ini :</div>
<blockquote class="tr_bq">
<data:post.body/></blockquote>
<div class="separator" style="clear: both;">
Catatan : Biasanya kode diatas ada 3 sampai 4 pada template blogger, silahkan Anda tempatkan kode dibawah ini pada kode 2/3/4.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
     4.  Ganti kode diatas, dengan kode dibawah ini :</div>
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br />
<data:post.body/><br />
<b:else/><br />
<b:if cond='data:blog.pageType != &quot;item&quot;'><br />
<b:if cond='data:post.snippet'><br />
<b:if cond='data:post.thumbnailUrl'><br />
<div class='Image thumb'><br />
<a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a><br />
</div><br />
<b:else/><br />
    <a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAwfrRJZFdeo4VVI7xBsGum8AwsigKCLn9awc_Tes8zxr8ZH2E6p95o4G1KOLVpEVAhOhVkrkvXcoCenVFh4pdMRp0pNaF8niFoplkYPlQDkKCqbYuaUumkaCxBPk_MjckV3AsQKHmSBCD/s0/no-image.png'/></a><br />
</b:if><br />
<data:post.snippet/><br />
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'><br />
<div class='jump-link' style='float:right'><br />
<a expr:href='data:post.url' expr:title='data:post.title'>Readmore &#187;</a><br />
</div></b:if><b:else/><br />
<data:post.body/></b:if><b:else/><br />
<data:post.body/></b:if></b:if></blockquote>
<div class="separator" style="clear: both;">
     5.  Cari kode dibawah ini :</div>
<blockquote class="tr_bq">
]]></b:skin></blockquote>
<div class="separator" style="clear: both;">
     6.  Pastekan CSS dibawah ini diatas pada kode diatas :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
.post-thumbnail {width:72px; height:72px; float:left; margin:0px 10px 0px 0px;}</blockquote>
<div class="separator" style="clear: both;">
     7.  Preview dahulu template Anda, dan save.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Catatan : Pada langkah 7 diatas,</div>
<div class="separator" style="clear: both;">
 saat Anda preview pastikan sudah sesuai dengan yang Anda harapkan.</div>
<div class="separator" style="clear: both;">
 Jika belum perhatikan langkah 3 diatas.</div>
<br />
<br /></div>

Blogger CSS HTML jQuery Tips'N'Trik Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script

Cara Membuat Auto Readmore Dengan Gambar Tanpa Java Script Untuk Blogger | Hai sobat blogger, seperti pada tutorial seelumnya yang membahas...

Cara Buat Block Quote Dengan Efek Keren di Blogger

2/04/2013 12:31:00 PM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>SharingWithMee</b> | Jika Anda sering mengunjungi blog terkenal yaitu <a href="http://comunity-anaksibolga.blogspot.com/" target="_blank">CAS_BSP</a>  Cheats maka Anda akan melihat blogquote yang akan kita bahas ini. Pada postingan sebelumnya yaiut cara buat <b>block quote</b> Facebook di <b>Blogger</b> maka kali ini saya memposting tentang Blockquote dengan efek bergantian bila disorot mouse.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<div class="separator" style="clear: both;">
Ok langsung saja :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Buka akun Blogger Anda</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Masuk ke Menu Edit HTML</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Temukan <b>blockquote</b> atau sperti Ini <b>/* Blockquote */</b> Anda bila Anda telah menggunakan blockqute standard atau editan di blog Anda, kode nya akan mirip seperti ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
.post blockquote {<br />
background: -------------------<br />
url(------------------------------;<br />
margin:------------;<br />
padding:---------------------;<br />
border-top:---------------------------------;<br />
border-right:-------------------------;<br />
border-left: ------------------------;<br />
border-bottom: ----------------------;<br />
font-size:--------------------------;<br />
}</blockquote>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
    4.  Ganti kode diatas dengan kode dibawah ini :</div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq">
.post blockquote {<br />
background: #F2F1F1 url(<b><span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFKfzeM3pRHf3MlG6a1c3c3MYCJbiC59Wv3vLnBtgXPJhJLfBTFLDr2Lq8XgwAs1xlaf3OMdTXpEKWMDguUhHYEdD3Sf9JQNXYiOrEcBCiAzad9rXCzzLbvXyxxXOO-WVd63WTNdy0Yg/s400/quote1.gif</span></b>)top left repeat-y;<br />
margin: 0 20px;<br />
padding: 10px 20px 10px 45px;<br />
border-top: 1px solid #DDD;<br />
border-right: 1px solid #666;<br />
border-left: 1px solid #DDD;<br />
border-bottom: 1px solid #666;<br />
font-size: 0.9em;<br />
}<br />
.post blockquote p {<br />
margin: 0;<br />
padding: 0 0 15px;<br />
}<br />
.post blockquote:hover {<br />
background: #F2F1F1 url(<span style="color: red;"><b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxBp6ADTk6A_nzCf4kYb43UEWiklOOsrdMZ7AbGCPlxjkGyxAZ6B3Q1TV5sE4chIyW7lemgFxcR_YqfkXgH04VbIG1rxQMlOq_W0TEgSSdXxyCDDqTl-ZXGk1KbU3vRLBTgWAr5ug-61M/s400/quote2.gif</b></span>)top left repeat-y;<br />
}</blockquote>
<br />
<div class="notice" style="background-attachment: scroll; background-color: #fff6bf; background-image: url(http://1.bp.blogspot.com/-axW-b4k19rA/UD-xrlRIRCI/AAAAAAAAA20/WyWG5-lKfJw/s1600/MBT+notice.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(255, 211, 36); color: #514721; font-family: 'Trebuchet MS'; font-size: 15px; font-weight: bold; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em; text-align: justify;">
Keterangan :<br />
<ul>
<li>Ganti kode merah diatas dengan URL sesuai dengan gambar yang Anda inginkan.</li>
<li>Tapi Yang Harus Sesuai Dengan Ukuran Gambar Nya dan Bentuk Nya OK.</li>
</ul>
</div>
<br />
<br />
<br /></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik Cara Buat Block Quote Dengan Efek Keren di Blogger

SharingWithMee | Jika Anda sering mengunjungi blog terkenal yaitu CAS_BSP Cheats maka Anda akan melihat blogquote yang akan kita bahas ...

CARA MEMBUAT EFEK JATUH JUMLAH ARTIKEL PADA LABEL

2/04/2013 04:41:00 AM Palma Hutabarat 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Alhamdulillah. Bismillah. SharingWithMee - Efek Jatuh Jumlah Artikel Pada Label. Sudah tau maksud judul pada postingan kali ini? Kalau belum, silahkan diliat foto dibawah ini. Atau mungkin langsung di liat pada widget Category disamping :)</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><br /></span></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFX1v4clGQsI3dLyx1ICOd8OgrHBWQ_W4cq0W-Cw7qr7XuBgvmuAXKuPJgqM2EgldipORkdJkNOJX2DlWv4Wxos9NVDK5WI8eUKDbCYyB5aKVGT6Saelhp2Yw1Xga7c_SNUa4rg0HLpomR/s320/dropjumlah_artikel.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFX1v4clGQsI3dLyx1ICOd8OgrHBWQ_W4cq0W-Cw7qr7XuBgvmuAXKuPJgqM2EgldipORkdJkNOJX2DlWv4Wxos9NVDK5WI8eUKDbCYyB5aKVGT6Saelhp2Yw1Xga7c_SNUa4rg0HLpomR/s320/dropjumlah_artikel.PNG" /></a></div>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><br /></span></span>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><br /></span></span>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Tutorial :</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Pasang permanggil jquerynya dahulu (kalau sudah ada, tidak usah dipasang lagi) :</span></span><br />
<blockquote class="tr_bq">
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><script src='http://programisjs.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script></span></span></blockquote>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Pasang widget label terlebih dahulu, dengan settingan / konfigurasi Tampilkan jumlah entri per label dan juga ber Daftar bukan cloud.</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Setelah dipasang, masuk ke editor template anda. Checklist Expand Template Widget.</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Cari kode dibawah (tidak harus sama persis, yg penting ada di dalam tag <ul> :</span></span><br />
<blockquote class="tr_bq">
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><ul></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  <b:loop values='data:labels' var='label'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    <li></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      <b:if cond='data:blog.url == data:label.url'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        <span expr:dir='data:blog.languageDirection'><data:label.name/></span></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      <b:else/></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        <b:if cond='data:showFreqNumbers'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">          <span class='label-count' dir='ltr'><data:label.count/> Artikel</span></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        </b:if></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      </b:if></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    </li></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  </b:loop></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"></ul></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Ganti dengan kode dibawah ini :</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><ul></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  <b:loop values='data:labels' var='label'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    <li></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      <b:if cond='data:blog.url == data:label.url'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        <span expr:dir='data:blog.languageDirection'><data:label.name/></span></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      <b:else/></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">          <b:if cond='data:showFreqNumbers'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">            <span class='label-count' dir='ltr'><data:label.count/> Artikel</span></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">          </b:if></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">        </a></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">      </b:if></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    </li></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  </b:loop></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"></ul></span></span></blockquote>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Kemudian pasang kode jQuery nya diatas tag </body> :</span></span><br />
<blockquote class="tr_bq">
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><script type='text/javascript'></span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">$('#ID-WIDGET-LABEL li a').hover(function() {</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    $('span.label-count',this).slideDown(500,'easeOutBounce');</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">},function() {</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">    $('span.label-count',this).fadeOut(400,'easeOutQuart');</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">});</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"></script></span></span></blockquote>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">NB : ID-WIDGET-LABEL adalah kode ID yang ada di widget Labelmu, jadi silahkan diganti dengan ID label widget anda. Biasanya ber-ID Label1 easeOutBounce daneaseOutBounce adalah jquery easingnya, Cek dan perlajari di [Link]</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Pasang juga CSS nya (hampir lupa) :</span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><br /></span></span>
<br />
<blockquote class="tr_bq">
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">span.label-count {</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  position:fixed;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  background:#000;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  color:#FFF;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  font-size:25px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  font-weight:700;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  top:0;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  right:20px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  margin-top:250px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  width:auto;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  height:auto;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  text-align:center;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  opacity:0.7;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  border-radius:10px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  display:none;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  padding:20px 40px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">}</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">span.label-count:before {</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  content:"";</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  width:0px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  height:0px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  position:absolute;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  right:100%;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  top:20px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  border-width:10px;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  border-style:solid;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">  border-color:transparent black transparent transparent;</span></span><span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">}</span></span></blockquote>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;"><br /></span></span>
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Untuk membuat panah / mengganti arah panah bisa liat dan pelajari di Dunia Maya Oke . Google Maksud nya </span></span><br />
<span style="font-family: helvetica, arial, sans-serif;"><span style="font-size: 14px; line-height: 21px;">Oke, Silahkan dicoba. Kalau ada masalah, silahkan tinggalkan komentar anda :)</span></span></div>

Blogger CSS HTML Javascript jQuery Tips'N'Trik CARA MEMBUAT EFEK JATUH JUMLAH ARTIKEL PADA LABEL

Alhamdulillah. Bismillah. SharingWithMee - Efek Jatuh Jumlah Artikel Pada Label. Sudah tau maksud judul pada postingan kali ini? Kalau bel...