Zhoppenk BlogSpot: Tips Blogger

Home » Posts filed under Tips Blogger

Showing posts with label Tips Blogger. Show all posts

Tuesday, 27 May 2014

Cara Membuat Emoticon Kaskus Di Postingan Blog

Cara Membuat Emoticon Kaskus Di Postingan Blog - Sepertinya Sampai sekarang masih banyak blogger yang kepengen banget memasang emoticon kaskus di blog nya, terutama di postingan. Namun saya perhatikan di pencarian google dengan keyword Cara Membuat Emoticon Kaskus Di Postingan Blog, Tidak Ada ? adapun rata ratanya hanya membahas cara memasang emoticon di komentar blog doang.

Ya memang kita ketahui emoticon kaskus itu begitu menarik dan lucu-lucu, bahkan imut imut, saya pun sangat suka dengan emoticon tersebut, gak cuman emoticon nya nya aja, website nya pun saya suka, yang beralamat kaskus.co.id.

Dengan rasa suka dan tertarik melihat emoticon kaskus, saya pun mencari cari cara nya agar bisa di pasangin dipostingan blog saya, ya paling gak bisa membuat para pengunjung senang dan tertarik dengan blog Pengguna Blogger Indonesia ini. Namun pada waktu itu memang belum ada tutorial nya yang membahas cara memasang emoticon kaskus di artikel blog. Dan sampai sekarang pun. *Kayak nya* eh, tapi sekarang udah ada loh, ‘artikel ini misal nya’.

Karena tidak ada yang membahas caranya, akhir nya saya memikirkan sendiri gimana cara nya biar bisa memasang emoticon kaskus dipostingan dengan mudah dan gak cuman mudah, tapi juga gampang. Dan alhamdulilah dengan pikiran saya yang bersih dan juga bening dengan konsentrasi yang sangat luar biasa , saya akhir nya menemukan cara nya.

Dengan begitu saya Mr.Kopral(inisial baru pandu) Dengan senang hati membagikan cara nya kepada sobat blogger sekalian, yang memang kepengen banget memasang emoticon ini, cara nya hampir sama saat kita mengupload gambar postingan pada artikel yang mau diPublikasikan. Yang di perlukan adalah cuman gambar emoticon kaskus nya aja, jadi ambil dulu di sini gan! Kalau udah, file rar nya tinggal di extract biar muncul beberapa gambar emoticon nya. dengan cara klik kanan pilih extract here!

Bagi yang belum ngerti maksud nya, berikut ini langkah- langkah cara memasukan emoticon kaskus di postingan:

1. login Ke akun Blogger.

2. Buat Postingan Baru, atau gak Buka Postingan Lama.

3. Klik Icon Untuk Upload Gambar

4. Lalu Pilih Emoticon mana yang mau dimasukin. Yang tadi udah di extract.

5. Udah selesai, Begitulah kurang lebih cara nya gan.

Cara Memasang Emoticon Kaskus Di Postingan Blog

Selanjutnya

Friday, 13 September 2013

Download Template Naruto Keren Untuk Blog

Sudah lama saya tidak posting akibat banyak pelajaran dan kesibukan saya.Tetapi sekarang saya akan memposting "Download Template Naruto Keren Untuk Blog"
Bagi yang mau mendownload silahkan :
1.Anime Naruto Uniqx

Download : [Click Here]

Demo : [Click Here]

2.Naruto Fight

Download : [Click Here]

Demo : [Click Here]

3.Naruto Blog

Download : [Click Here]
Demo : [Click Here]

4.Naruto VS Sasuke

Download : [Click Here]
Demo : [Click Here]

Bagi Yang Ingin Men-Copy Tolong Menyertakan Sumber-nya

Selanjutnya

Tuesday, 20 August 2013

Cara Membuat Meta Keyword Pada Blog

Meta keyword merupakan salah satu cara efektif untuk menambah pundi-pundi SEO pada blog.

Cara untuk menambahkan meta keyword di blogspot :

1. Buka "Template" pada dashbord blogspot Anda kemudian klik "Edit Html"

2. Letakkan kode berikut di bawah <head>

<meta content='DESKRIPSI BLOG ANDA' name='description'/>
<meta content='KEYWORD ATAU KATA KUNCI BLOG ANDA' name='keywords'/>

Contoh :

<meta content='Tips dan Trik untuk Blog, Sesepuh-ilmu' name='description'/>
<meta content='tutorial komputer, cara sevis komputer, artikel tentang komputer, cara membuat blog, modifikasi blog' name='keywords'/>

3. Untuk keyword postingan artikel blog Anda, letakkan kode berikut dibawah "<b:include data='blog' name='all-head-content'/>"

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

<b:if cond='data:blog.url == "http://blogAnda.blogspot.com/artikel1.html"'>
<meta content='DESKRIPSI ARTIKEL 1 BLOG ANDA' name='description'/>
<meta content='KATA KUNCI ARTIKEL 1 BLOG ANDA' name='keywords'/></b:if>
<b:if cond='data:blog.url == "http://blogAnda.blogspot.com/artikel2.html"'>
<meta content='DESKRIPSI ARTIKEL 2 BLOG ANDA' name='description'/>
<meta content='KATA KUNCI ARTIKEL 2 BLOG ANDA' name='keywords'/></b:if>
<b:if cond='data:blog.url == "http://blogAnda.blogspot.com/artikel3.html"'>
<meta content='DESKRIPSI ARTIKEL 3 BLOG ANDA' name='description'/>
<meta content='KATA KUNCI ARTIKEL 3 BLOG ANDA' name='keywords'/></b:if>

Dan seterusnya sesuai jumlah artikel yang akan dipublikasikan

4. Klik "Save" - See more at: http://sesepuh-ilmu.blogspot.com/2013/05/cara-membuat-meta-keyword-di-blog.html#sthash.A40mllVZ.dpuf

Selanjutnya

Monday, 19 August 2013

Cara Membuat Recent Comment Pada Blog

Recent comment ini dilengkapi avatar yang menarik. Daftar komentar berbentuk thumbnail, kotak-kotak kecil disertai review komentar. Berikut langkah-langkah cara bagaimana memasang Recent comment pada blog:
1. Setelah sobat 'stand by' pada akun blogger, pergi ke Tata Letak,

Tata letak

2. Tentukan posisi tepat meletakkan Recent comment sesuai selera sobat. Kemudian,
klik Tambahkan Gadget, pilih HTML/JavaScript. Optional, beri judul. Copykan
semua kode di bawah ini:

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin-top:15px;padding:0;}
.tb_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;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
characters = 100,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://script-seo.googlecode.com/files/rcntcomment.js"></script>
<script type="text/javascript" src="http://www.zhoppenkbs.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=10"></script>

4. Pada url berwarna merah, ganti dengan alamat url sobat,
3. Simpan hasil kode Recent comment, dan lihat hasilnya.

Selanjutnya

Sunday, 9 June 2013

Cara Mengganti Older Post Menjadi Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini

1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>

Kalau sudah silahkan dilihat hasilnya.

Selanjutnya

Saturday, 8 June 2013

Cara Membuat Animasi Loading Pada Blog

Cara Membuat Animasi Loading Blog Lebih Menarik - Tips Blog Banyak hal menarik dan efek/plugin yang dapat dipakai atau diberikan oleh blogger...

Nah pagi ini saya mau mencoba share bagaimana caranya membuat efek loading pada blog, agar terlihat lebih menarik, biasanya ini sangat disukai bagi yang suka ngoprek dan yang ingin blognya terlihat cantik dan keren.

Ok tanpa basa-basi simak langkahnya berikut ini :

Sebaiknya anda membaca dengan baik langkah yang telah diberikan dan jangan lupa backup template anda.

ANIMASI LOADING PART 1, BERWARNA MERAH

1. Login ke akun blogger anda

2. Klik Template » Edit HTML » Lanjutkan » Klik Expand Template Widget

3. Tambahkan kode CSS berikut ini diatas ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

4. Kemudian tambahkan kode jquery ini diatas kode </head>, jika dalam template kalian sudah terpasang jquery maka tidak perlu lagi tambahan jquery tersebut, aga proses efek loading lancar

5. Dan langkah yang terakhir, pasang kode berikut diatas tag </body>

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
});

// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>

ANIMASI LOADING PART 2, BERWARNA BIRU

HTML

CSS

.ball {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);

Selanjutnya

Cara Membuat Nama Judul Bergerak Di Blog

Mari kita lihat Tutorialnya :

Masuk di Blogger.com
Pilih Tata Letak
Add a gadget >> Html/Javascript

Copy dan paste code berikut di HTML/Javascript :

    <script language=javascript>
    msg = "Tulis DI SINI ...Tulis DI SINI...";

    msg = "..." + msg;pos = 0;
    function scrollMSG() {
    document.title = msg.substring(pos, msg.length) + msg.substring(0,

    pos);
    pos++;
    if (pos > msg.length) pos = 0
    window.setTimeout("scrollMSG()",200);
    }
    scrollMSG();
    </script>

Note: Ganti 'Tulis DI SINI...Tulis DI SINI.' dengan teks yang diinginkan.

    Setelah sudah klik SIMPAN..
    Lihat hasilnya.

Selanjutnya

Cara Membuat Cursor Bertabur Bintang

Mempercantik atau memperindah tampilan Blog adalah naluri dari setiap blogger .dan jikalau tampilan blog seorang blogger telah mencapai tahap yang paling indah nantinya juga sang pemilik akan bangga terhadap blognya.hehehe jangan kaya tampilan blog klinik-it ini yang terlihat semerawut .hehehe nah...dalam postingan kali ini klinik-it akan menjelaskan tentang bagaimana Cara Membuat Cursor Bertabur Bintang.Cursor yang bertabur bintang adalah salah satu cara untuk mempercantik tampilan blog.karena saat cursor di geser kursor tersebut akan mengeluarkan bintang-bintang. Contohnya Bisa kamu lihat disini.

Setelah melihat Contohnya Tertarik tidak sobat untuk membuatnya ?jika tertarik silakan ikuti tutorial Cara Membuat Cursor Bertabur Bintang di bawah ini untuk Membuat Cursor Bertabur Bintang.

1.Login ke blogger.

2.Klik Tatat Letak.

3.Klik Tambah Gadget.

4.Pilih HTML/javascript.

5.Pilih lalu Copy dan paste kode di bawah ini ke dalah kotak HTML/javascript tadi .

Bintang Biru

Bintang Hijau

Bintang Merah

Bintang Putih

Bintang Ungu

6.Kalo sudah selesai jangan lupa klik SIMPAN...

7.Selanjutnya silkan sobat lihat hasilnya...

Selanjutnya

Friday, 7 June 2013

Nonton TV Online

Selanjutnya

Cara Membuat Teks Berjalan Pada Blog

Jika sobat Zhoppenk BS juga ingin memasang Widget Teks Berjalan yang keren seperti itu caranya mudah dengan langkah-langkah sebagai berikut :

Kunjungi webnya di Widgeo.net
Ada akan menjumpai halaman web Widgeo.net seperti berikut

Jika sudah Flash Massage

No.1 silahkan masukan Teks atau tulisan yang sobat inginkan
No.2 adalah model-model widgetnya silahkan pilih sesuai kriteria sobat
No.3 adalah ukuran widget silahkan sesuaikan
No.4 adalah kategori blog sobat silahkan sesuaikan
No.5 Pilih No

Jika semua sudah diatur centang kotak kecil yang ditunjuka anak panah kemudian klik tombol Get Widget
Tunggu beberapa saat akan muncul kode untuk menampilkannya kehalaman blog seperti berikut

Sekarang Copy code tersebut masukan kehalaman blog anda dengan cara menambahkan Widget HTML/JavaScript -->Paste Code --> Simpan
Selesai deh

Selanjutnya

Cara Membuat Popular Post Bergerak Ke Bawah

Ikuti langkah-langkah di bawah ini :
1. Pertama sobat harus log-in dulu ke blog
2. kalau sobat sudah log-in. lalu masuk ke menu Tata letak.
3. lalu Click Add Gadget , lalu sobat pilih Entri Populer

4. Kemudian Pilih kembali Add Gadget, dan sekarang kita pilih HTML/JavaScript
5. Kemudian Copas ( Copy Paste ) kode di bawah ini

6.Kalau sudah di Copas , Sobat Pilih Simpan dan lihat hasilnya

::Semoga Bermanfaat dan Selamat Mencoba::

Selanjutnya

Cara Membuat Buku Tamu Melayang Pada Blog

Langkah Pertama pergi ke Cbox
Lalu masuk akun Cbox atau jika belum punya daftar ke Sign Up Cbox
Jika Sudah mendaftar Cbox lalu pemirsa disuruh masuk Cbox
Setelah sudah masuk edit sendiri Cbox anda sendiri

dan Langkah berikutnya Copy-Paste HTML dibawah ini

Cara menaruh html di atas

Masuk akun blogger siapa ajah boleh
Ke tata letak
Add gadget atau Tambah gadget
Edit html/javascript
Masukan html di atas
Selesai

dan ganti tulisan yang biru dengan html/javascript Cbox/buku tamu
yang tadi

Selanjutnya

Cara Menambah Twitter Follow Box di Blog

Assalamualaykum sahabat, Alhamdulillah setelah dua tips yang lalu admin membahas tentang seo tentang cara mendapat baclink dari web terbaik di mata google dan cara mudah merampingkan alexa dengan cepat dan mudah,Dan untuk pertemuan kali ini admin ingin berbagi tips tentang cara membuat cara menambahkan facebook blog.

Bagaimana caranya, Oh iya untuk demonya sahabat bisa lihat like box yang admin pakai pada blog sederhana admin ini,Untuk caranya sangat sederhana sahabat hanya menambahkan code di html/javascript
Ok kita menuju tkp ya sahabat.

Untuk caranya pertama:

Pertama sahabat login di akun sahabat,Setelah sahabat masuk dasbor sahabat pilih tata letak,Kemudian click tambahkan gadget,Kemudian sahabat cari/pilih Html/javascript.
hingga seperti gambar di bawah ini:

Selanjutnya sahabat copy code di bawah ini dan pastekan di area konten seperti gambar di atas.

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>

<center><a class="murub">Jangan Lupa Like ya sahabat</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Tips-Blogger-dan-Computer/240673399395615?ref=hl&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>

<br/>
<div class="twitter">
 <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=ID&link_color=&screen_name=sartonowadowo&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>×</a>
</div>

Seperti yang sahabat lihat ada 3 warna yang admin tandai di code like box.

Untuk yang berwarna merah sahabat bisa ganti dengan kata-kata yang sahabat inginkan.
Yang berwana kuning sahabat ganti dengan code like box facebook sahabat.
Dan yang terakhir warna hijau ganti dengan nama akun twiter sahabat.

Mungkin itu yang bisa admin bagikan cara menambahkan facebook di blog pada kesempatan kali ini,Mudah-mudahan bermanfaat dan ahir coretan wassalam.

Selanjutnya

Zhoppenk BlogSpot

Translate

Tuesday, 27 May 2014

Cara Membuat Emoticon Kaskus Di Postingan Blog

Friday, 13 September 2013

Download Template Naruto Keren Untuk Blog

Tuesday, 20 August 2013

Cara Membuat Meta Keyword Pada Blog

Monday, 19 August 2013

Cara Membuat Recent Comment Pada Blog

Sunday, 9 June 2013

Cara Mengganti Older Post Menjadi Angka

Saturday, 8 June 2013

Cara Membuat Animasi Loading Pada Blog

ANIMASI LOADING PART 1, BERWARNA MERAH

ANIMASI LOADING PART 2, BERWARNA BIRU

Cara Membuat Nama Judul Bergerak Di Blog

Cara Membuat Cursor Bertabur Bintang

Friday, 7 June 2013

Nonton TV Online

Cara Membuat Teks Berjalan Pada Blog

Cara Membuat Popular Post Bergerak Ke Bawah

Cara Membuat Buku Tamu Melayang Pada Blog

Cara Menambah Twitter Follow Box di Blog

Untuk caranya pertama:

Seperti yang sahabat lihat ada 3 warna yang admin tandai di code like box.

Visitor :

Popular Posts

Komentar

About Me

Labels

Like this