Ada banyak jenis gaya CSS Border Style yang bisa kita buat. CSS Border Style lebih jadi menarik dan cantik jika dipadukan dengan banyak warna / kombinasi CSS Border Style yang satu dengan yang lain.Berikut macam-macam CSS Border Style dan contoh nya:
CSS Border Style-solid
<div style="border: 2px solid #909090; padding: 10px; width: 500px; background:#0F192A; ">CSS Border Style-solid</div>
CSS Border Style-double
<div style="border: 4px double #909090; padding: 10px; width: 500px;background:#0F192A;">CSS Border Style-double</div>
CSS Border Style-groove
<div style="border: 4px groove #909090; padding: 10px; width: 500px;background:#0F192A;">CSS Border Style-groove</div>
CSS Border Style-dotted
<div style="border: 4px dotted #909090; padding: 10px; width: 500px;background:#0F192A;">CSS Border Style-dotted</div>
CSS Border Style-dashed
<div style="border: 2px dashed #909090; padding: 10px; width: 500px;background:#0F192A;">CSS Border Style-dashed</div>
CSS Border Style-inset
<div style="border: 4px inset #909090; padding: 10px; width: 500px;background:#0F192A;">CSS Border Style-inset</div>
CSS Border Style-outset
<div style="border: 4px outset #909090; padding: 10px; width: 500px;background:#0F192A;">CSS Border Style-outset</div>
CSS Border Style-ridge
<div style="border: 4px ridge #909090; padding: 10px; width: 500px;background:#0F192A;">CSS Border Style-ridge</div>
Ket:
- border: 4px atau border: 2px adalah tebal dari border.
- background:#0F192A adalah kode untuk warna background.
- padding: 10px adalah jarak antara tulisan dengan border.
- width: 500px adalah lebar dari kotak.
"Breadcrumbs" biasanya terletak pada bagian atas halaman web atau biasanya di bawah header nav bar. Breadcrumbs manampilkan link ke setiap halaman sebelumnya dan memberikan link terkait ke halaman sebelumnya. Breadcrumbs memberikan jejak bagi user untuk mengikuti kembali ke awal atau beranda. Antara link tersebut dipisahkan oleh tanda (seperti »).Berikut langkah-langkah menambah "Breadcrumbs" di samping judul:
1. Pergi ke Layout> Edit HTML> Klik "Expand Template Widget"
2. Cari kode dibawah ini:
]]></b:skin>
Letakkan kode dibawah ini tepat "diatas" kode langkah 2:
.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef}
3. Setelah itu, cari kode seperti ini :
<div class='post hentry uncustomized-post-template'>
Letakkan kode berikut ini tepat "dibawah" kode langkah :
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'> , </b:if> </b:loop> </b:if> » <data:post.title/> </div> </b:if> </b:if>
Simpan Template.
Seperti yang sama-sama kita ketahui, bagi para sobat blogger yang tidak ingin orang lain meng copas isi artikel nya bisa pakai scrip ini.Langkah-langkah nya cukup Tambah Gadget baru dan masukkan scrip dibawah ini.
Anda juga bisa meletakkan scrip nya diatas kode </head> di dalam edit HTML.
Berikut scrip ny:
<script>
var message="Maaf, Klik Kanan Tidak Diperbolehkan !";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>
var message="Maaf, Klik Kanan Tidak Diperbolehkan !";
Anda bisa mengganti kata-kata yang bewarna dengan kata-kata anda sendiri...
Semoga bermanfaat....
Apa Itu -border-radius? -border-radius adalah salah satu property css3, sedangkan fungsi dari border-radius adalah untuk membuat lengkungan pada box-box tag html! -border-radius properti digunakan dalam CSS dan beberapa tag HTML khusus untuk membuat perbatasan bulat objek tertentu. Tapi efeknya hanya dapat dilihat dalam browser tertenu, seperti Mozilla Firefox dan Safari, seperti berdirinya moz untuk Mozilla. Ini hanya akan membuat perbatasan jika ada background-color/image tertentu pada objek. Untuk fungsionalitas pada browser yang lain, gunakan properti perbatasan-radius. MozBorderRadius untuk Mozilla and webkitBorderRadius untuk Safari.
Mari lihat contoh:Apa Itu Border-Radius?
Kodenya:
<div style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; color:#fff; -moz-border-radius:10px;">Apa Itu Border-Radius?</div>
<div style=" (kode ini membuat kotak border otomatis melebar)
border: 1px solid #2C97F3; (kode ini untuk memberi warna border seperti contoh diatas)
padding: 8px; (kode ini untuk memberi jarak antara tulisan ke border)
background-color: #0F192A; (kode ini untuk memberi warna latar)
color:#fff; (kode ini untuk memberi warna pada tulisan)
-moz-border-radius:10px; (kode ini memberi lengkungan pada ujung border sebesar 10px)
">
Apa Itu Border-Radius?
</div> (tutup kembali dengan div)
border: 1px solid #2C97F3; (kode ini untuk memberi warna border seperti contoh diatas)
padding: 8px; (kode ini untuk memberi jarak antara tulisan ke border)
background-color: #0F192A; (kode ini untuk memberi warna latar)
color:#fff; (kode ini untuk memberi warna pada tulisan)
-moz-border-radius:10px; (kode ini memberi lengkungan pada ujung border sebesar 10px)
">
Apa Itu Border-Radius?
</div> (tutup kembali dengan div)
Apa Itu Border-Radius?
Kodenya:
<span style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; color:#fff; -moz-border-radius:10px;">Apa Itu Border-Radius?</span>
(penjelasan nya sama dengan yang diatas, tetapi beda ny pada kata SPAN. Kode ini memberikan efek dimana border yang ditampilkan sesuai dengan kata kita....)
Lihat contoh diatas....
"Penggunaannya bisa dimodifikasi sebagai berikut"
Apa Itu Border-Radius?
<div style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; -moz-border-radius-topleft: 10px;">Apa Itu Border-Radius?</div>
Apa Itu Border-Radius?
<div style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; -moz-border-radius-topright: 10px; ">Apa Itu Border-Radius?</div>
Apa Itu Border-Radius?
<div style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; -moz-border-radius-bottomright: 10px;">Apa Itu Border-Radius?</div>
Apa Itu Border-Radius?
<div style="border: 1px solid #2C97F3; padding: 8px; background-color: #0F192A; -moz-border-radius-bottomleft: 10px;">Apa Itu Border-Radius?</div>
Comment Bubble merupakan lingkaran bulat seperti balon di pojok kanan judul posting yang sangat membantu kita seberapa comment yang ada dalam postingan kita. Hal ini sangat membantu pada saat kita tidak sempat Login ke akun kita untuk mengcek comment yang ada dikarenakan dot dot dotSebelum mengedit template Anda mulai menyimpan cadangan dulu untuk jaga-jaga dengan meng-klik "Download Template Lengkap".
Sudah siap apa belum??
Berikut langkah-langkah menambah "Comment Bubble" di samping judul:
1. Pergi ke Layout> Edit HTML> Klik "Expand Template Widget"
2. Cari kode dibawah ini:
]]></b:skin>
3.Copy paste kode dibawah ini tepat "diatas" langkah 2
/*------Commment Bubble Start------*/
.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs4m4DunajkHQbiHjo_x2LNRIL_5kTnWI18Pv2bLT017HL8m6CC6HYaq9DYNxFnxf_zitn7eUmbg4WZ0TsDehPRG680bzelilyspFB489p5jVZICOuSUVmATnVtMzjFeLtgb08eNLdmnq7/s128/bubble9.png) no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
padding:0px 0px 0px 0px;
}
/*------Commment Bubble End AmirOktavia------*/
4. Sekarang cari kode:
<h3 class='title'><data:title/>
Jika anda tidak menemukan cari kode di bawah ini:
<h2 class='title'><data:title/>
5. Copy paste kode dibawah ini tepat sesudah kode pada langkah 4:
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
Save dan lihat hasil nya....
Sobat bisa menukar gambar background "Comment Bubble" dengan mengganti
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs4m4DunajkHQbiHjo_x2LNRIL_5kTnWI18Pv2bLT017HL8m6CC6HYaq9DYNxFnxf_zitn7eUmbg4WZ0TsDehPRG680bzelilyspFB489p5jVZICOuSUVmATnVtMzjFeLtgb08eNLdmnq7/s128/bubble9.png) no-repeat;
Anda tidak perlu membuang waktu Anda untuk mencari gambar "Comment Bubble", saya sudah pasang link supaya Anda dapat mendownload koleksi gambar "Comment Bubble"
Download Comment Bubble.rar
Facebook telah datang dengan satu set baru plugin Sosial yang memungkinkan Anda untuk memberikan pengalaman menarik sosial kepada pengguna dengan hanya garis dari HTML. Facebook Like Button salah satu nya. Anda dapat melihat demo dari tombol seperti pada halaman ini. Facebook seperti tombol akan memungkinkan pembaca Anda dengan cepat berbagi posting Anda dengan teman Facebook mereka. Anda juga dapat mengetahui berapa banyak orang yang menyukai Posting Blog Anda. Berikut ini adalah sedikit Demo.Berikut langkah-langkah nya:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML" "Expand your Widget Templates"
Langkah 3
Cari kode dibawah ini:
<data:post.body/>
Letakkan script dibawah ini "diatas" kode langkah 3:
<b:if cond='data:blog.pageType == "item"'>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</b:if>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexample.com%2Fpage%2Fto%2Flike&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</b:if>
Para sobat bisa meletakkan didalam posting dengan menghilangkan kode warna hijau diatas.
Happy Blogging....
Dengan adanya fitur ini berbagi di blogger menjadi semakin mudah dengan menyelipkan ikon-ikon dibawah atau di atas postingan.
Kode nya:
Kode nya:
Kode nya:
Kode nya:
Kode nya:
Kode nya:
Letakkan script diatas sebelum
Semoga bermanfaat dan membuat blog Anda lebih cantik juga memudahkan orang membagi artikel Anda.
[[..selengkapnya..]]
Kode nya:
<div style="text-align: right;">
<a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="Post to Google Buzz"></a></div>
<div style="text-align: right;">
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script></div>
<a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="Post to Google Buzz"></a></div>
<div style="text-align: right;">
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script></div>
Kode nya:
<div style="text-align: right;">
<a class="google-buzz-button" style="" href="http://www.google.com/buzz/post" title="Post to Google Buzz"></a></div>
<div style="text-align: right;">
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript"><br /></script></div>
<a class="google-buzz-button" style="" href="http://www.google.com/buzz/post" title="Post to Google Buzz"></a></div>
<div style="text-align: right;">
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript"><br /></script></div>
Kode nya:
<div style="text-align: right;">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Bagikan</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"><br /></script></div>
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Bagikan</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"><br /></script></div>
Kode nya:
<div style="text-align: right;">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="button_count">Bagikan</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script></div>
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="button_count">Bagikan</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script></div>
Kode nya:
<div style='float:right; margin-right:10px;'>
<script>var twittleystyle = "1";</script><script src='http://twittley.com/button/button.js'/>
</div>
<script>var twittleystyle = "1";</script><script src='http://twittley.com/button/button.js'/>
</div>
Kode nya:
<div style="text-align: right;">
<script type="text/javascript">
tweetmeme_style = 'compact';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script></div>
<script type="text/javascript">
tweetmeme_style = 'compact';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
</script></div>
Letakkan script diatas sebelum
<data:post.body/>
Semoga bermanfaat dan membuat blog Anda lebih cantik juga memudahkan orang membagi artikel Anda.
Ini adalah tutorial tentang cara menambahkan yang sederhana untuk menambahkan "Aboout Author" di bawah setiap posting di Blogger yang hanya muncul di halaman posting. Pertama saya bingung cara membuat nya padahal saya ongin bangat ada itu, setelah saya pelajari dari blog teman2 saya bisa menerapkan nya.... Saya yakin bahwa kita semua akan melihat fitur ini terutama di blog Wordpress. Tapi sekarang, pengguna Blogger dapat memiliki fitur ini juga. Ikuti langkah di bawah ini untuk menambahkannya:Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML"
Langkah 3
Backup Template Blog untuk mengantisipasi kegagalan modifikasi template
Langkah 4
Jangan lupa check "Expand widget template"
Langkah 5
Cari kode dibawah ini :
]]></b:skin>
Copy Paste (CoPas) kode dibawah ini tepat diatasnya :
.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
Sekarang cari kode berikut:
<div class='post-footer-line post-footer-line-1'>
Copy Paste (CoPas) kode dibawah ini tepat dibawahnya :
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJAH9mMhiubyZN_WafPx9HH2oWECCj2HPKfoX2xdbbHAeeQvRnb7GsKOJvmbwfbw4mDlpOZamMYRjvsTUEqsPi4N6IQpCvW1Ni58I052ADI1xRM1m2RWujlcO0kkPiS7om5teRR65HrVrt/s128/My.JPG' width='70'/><b>Nama _Anda</b><br/>
Nama saya AmirOktavia, saya seorang mahasiswa di salah satu Universitas Swasta Padang. Blog ini berisi tips, trik seputar Blog, Internet, Software. Saya belajar blog dari tutorial teman-teman. Sebagian besar tutorial yang ada di blog ini berasar dari blog teman-teman. Jika ada saya yg salah, mohon di koreksi<br/></p>
</div>
</b:if>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJAH9mMhiubyZN_WafPx9HH2oWECCj2HPKfoX2xdbbHAeeQvRnb7GsKOJvmbwfbw4mDlpOZamMYRjvsTUEqsPi4N6IQpCvW1Ni58I052ADI1xRM1m2RWujlcO0kkPiS7om5teRR65HrVrt/s128/My.JPG' width='70'/><b>Nama _Anda</b><br/>
Nama saya AmirOktavia, saya seorang mahasiswa di salah satu Universitas Swasta Padang. Blog ini berisi tips, trik seputar Blog, Internet, Software. Saya belajar blog dari tutorial teman-teman. Sebagian besar tutorial yang ada di blog ini berasar dari blog teman-teman. Jika ada saya yg salah, mohon di koreksi<br/></p>
</div>
</b:if>
Sesuaikan kata yang saya tandai dengan gambar, nama dan tentang diri anda.....
Happy Blogging....
Jika blog Anda mendapatkan pengunjung dari seluruh dunia, maka lebih baik untuk menempatkan sebuah widget terjemahan. Sehingga, mereka akan tinggal lebih lama di halaman Anda dan mereka dapat mengunjungi blog Anda lagi. Berikut ini adalah koleksi terjemahan 5 widget keren untuk blog Anda.1. Google Translation Widget
<div id="google_translate_element"></div><script><br /> function googleTranslateElementInit() {<br /> new google.translate.TranslateElement({<br /> pageLanguage: 'en'<br /> }, 'google_translate_element');<br /> }<br /> </script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>2. "Translate This" Button
On Mauseover......
<!-- Begin TranslateThis Button --><br /> <br /> <div id="translate-this"><a href="http://translateth.is/" class="translate-this-button">Translate</a></div><br /> <br /> <script type="text/javascript" src="http://www.google.com/jsapi"></script><br /> <script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script><br /> <script type="text/javascript"><br /> TranslateThis();<br /> </script><br /> <br /> <!-- End TranslateThis Button --><br />
3. Microsoft Translator Widget
<script type="text/javascript" src="http://www.microsofttranslator.com/translatepagelink.aspx?pl=en"></script>
4. Yahoo Babelfish Widget
<script type="text/javascript" charset="UTF-8" language="JavaScript1.2" src="http://uk.babelfish.yahoo.com/free_trans_service/babelfish2.js?from_lang=en®ion=us"></script>
5. Widget by AllBlogTools
<style><br /> <br /> .google_translate img {<br /> filter:alpha(opacity=100);<br /> -moz-opacity: 1.0;<br /> opacity: 1.0;<br /> border:0;<br /> }<br /> .google_translate:hover img {<br /> filter:alpha(opacity=30);<br /> -moz-opacity: 0.30;<br /> opacity: 0.30;<br /> border:0;<br /> }<br /> .google_translatextra:hover img {<br /> filter:alpha(opacity=0.30);<br /> -moz-opacity: 0.30;<br /> opacity: 0.30;<br /> border:0;<br /> }<br /> </style><br /> <br /> <div><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcWvX9GbuP6z7rh-2RCZ7gFTOFZdemOd7VdSvTcY2b68zbKA2jq0K68ZVotjWOltw8kTuylvq45D6rXAUZHw7fI5CxBRWJOj00BQlK7wz2bSQ86jsIHtHCqZqKf3NJ32KtX3pZkr0iAzw/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNWExihOgqKpS8-IGwEupJqds9SzWYFJZ1FRon9pn8ddN0rsySvrTzjRGfdYsKircwrzVB9BmjVGj-H4DvpLIw7MJMgtLH_BZCkt-LfPV6HYxWBUvLmDjAlp7QLLn5NBh0JqUvUeNYhGI/s200/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCWJKhJJgK9qxQZala-o4mwSGhECktj85pwzptLDx7CaPgutsPcGYjGVODNHzkZIDNO_hsFqTkl2OG1gC5ELFir0lxeWNg8wQzdcuQOVw9_7GBVsddLPklTDnxcSv2juom985KKJmbLdg/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzrnJ66O8h09dLhOg90jfrAu1YYfVpbrDyGN8hG3whziZbwdg87aStp84SedbOD3SDyjSLK-Juje7wmWyMx_RtBVWHi0dNm1b3_1XyiMdQQQ19kGinv8W4aUmPH1gwE8blbqnHkTNO1FE/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIvcMPLleY2lsENr1iIIAfuLrLrux9jFmZ39nXZKO8-0iUDxSptHsHU-2HhPTWIjOkjJdHJTJmOOJBJ47zEdEGT1lqydbxYf_xIQgDkegFed0VCxtzbCUJ0oyTCFz_qP5fftZOA7pEX_E/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEJRD-k_pwAyclYorBOsL6jGD7wg1H3up9-MqFzddidsMRJ7GERY2CqST7VdEe9r0HgqaJyZvpXaoko_UWUV_wkqGGD72AKXU0y1o6r4uX8cBPKGgzpjb84ZJKtIotj6XjQ6ST1PrS60c/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSwl3W5pX7y-C1xG8i9oRzRoOjxgFzG2rkZEYjU9i3BlJEZP-F9dY3RZOC7JkS8Wa4ZNpQ87io7treLOxPtDGXx9QXwBbhlLZukIySVJ5XEP3loA4rKSmwVBwh9zWuRcgoVOaIbM_Ugdo/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFSQx6NNG79O-FdDX_NuDN6vA8d6-KkjZrruD-y33VD6QUiK1xamk46hyphenhyphen7V022sf5xUJLNuZ4wQkQzMdHieDxqDuApm6NGCrm5KMk6tZ7aQeEmAV2phB6pHBPOlwMNP2jo0ASv0vGXDY/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnodIMF178TURSxNWVfbbyaQbJnb_METr8lx18RwqmhCwXx3yCNRzN6Em55bJ2x7_7lSzyocehxcu1fioHZfwRMweDOA9Ir2cYd0LuJY75kRgVfrD7P51pM18PxxKMmSJ3PoNXYpCj0Lo/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtRIWaMt6RDLU3wZ0TnxHtEwlN9Fz9dyj5KxjhcNvdr_IRPKTog5CFGnpU2ySN_U6-UVodKSmOjsKJlduJkTZmErGrKY4ZIm_BsT5g0Jy2668lOnIFUFGFROGnhyphenhyphenf9Z0xi6WGbCMF6Lr0/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizY96oyas9f0lpSDAJLbcwBx9FY8M7Rqg2gl1ZlT8zlxHY_3zBgQunY-Ww6shG7tDt80m94ExiQmFGur70NzK5NUL5utMAoiSQbUTA3ztgISi4JV8eyJzAoiwpmVT7AS0zUP7JUsdmiY8/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a><br /> <br /> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLi2Rx0PxEQdxJToGj-xUTNwQy13sMlK0U5HdY1jeAtlbBCU1MUOSgHOlMP-EUk79yB1V8t5j_DjgabXOYyLSrDY9VZLSEcHWtE-4Dfeg3d-SR7Lwrg_eWvH0XhQ7PzePsQ1zYanJKHxU/s200/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a> </div> <br /> <div 0px 0pxâ?? style="â??font-size:10px;margin:8px" 3px></div><br /> <br /> <br/><br /> <a href="http://www.bloggerarticle.com/"><font size="1px">this widget by www.AllBlogTools.com</font></a><br />
Menampilkan link ke posting terkait bersama dengan thumbnail pos yang sesuai akan membantu Anda meningkatkan tampilan halaman blog anda. Pengguna akan tergoda untuk pergi untuk posting yang bersangkutan pada saat mereka disajikan menarik dengan thumbnail.Berikut adalah langkah-langkah rinci untuk menginstal widget posting terkait untuk blogger dengan thumbnail:
Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML"
Langkah 3
Backup Template Blog untuk mengantisipasi kegagalan modifikasi template
Langkah 4
Jangan lupa check "Expand widget template"
Langkah 5
Cari kode dibawah ini :
</head>
Copy Paste (CoPas) kode dibawah ini tepat diatasnya :<!--Related Posts with thumbnails Scripts and Styles Start-->Sekarang cari kode berikut:
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8kj4WptLgL0zb8rgaaPkcNQ-hxK5op0kHxtwR1Z_Q67j_ZypVyTYl-qRSslYYNzl-euQGtmPVrHU2HqW1_hy2SE5US8Z2vbZAMImHpcGkPp3jNK95oM_ziy86RCnb0g0UQWckLN4pJA/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
<div class='post-footer-line post-footer-line-1'>
Jika tidak ditemukan cari kode dibawah ini:<p class='post-footer-line post-footer-line-1'>
Copy Paste (CoPas) kode dibawah ini tepat diatasnya :<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Anda dapat menyesuaikan jumlah maksimum posting terkait yang ditampilkan dengan mengedit baris ini dalam kode berikut:
var maxresults=5;
Untuk mengedit judul widget Anda dapat mengubah baris kode ini berikut:
var relatedpoststitle="Related Posts";
Untuk mengubah gambar thumbnail, Anda dapat mengedit baris kode ini:
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8kj4WptLgL0zb8rgaaPkcNQ-hxK5op0kHxtwR1Z_Q67j_ZypVyTYl-qRSslYYNzl-euQGtmPVrHU2HqW1_hy2SE5US8Z2vbZAMImHpcGkPp3jNK95oM_ziy86RCnb0g0UQWckLN4pJA/s400/noimage.png";
Untuk Mengubah Warna Garis Splitter, anda bisa mengedit kode ini:
var splittercolor="#d4eaf2";
Selamat mencoba........
Berikut ini adalah kumpulan widget shoutbox untuk blog. A shoutbox, yang juga dikenal sebagai buku tamu, Chatbox, saybox adalah sebuah platform komunikasi yang memungkinkan pengunjung untuk meninggalkan pesan untuk Anda dan Anda dapat meninggalkan pesan untuk mereka di blog / situs web, seperti forum atau layanan olah pesan cepat.1. Sbox
2. Shoutmix
3. Yellbox
4. Free-Shoutbox
5. IShoutBox
6. Free-Shoutbox.co.uk
7. Shoutjax
8. Flashboon
9. Shootbox
Ada 2 cara untuk membuat label pada blog, yaitu:
A.melalui menu posting
1.login ke blogger.com
2.klik new post
2.sekarang anda ada didalam menu posting.lihat dibagian paling bawah kiri.disana ada tulisan label
3.anda bisa menuliskan label di kolom tersebut.nanti label yang telah anda tulis disana otomatis akan langsung tersimpan dengan sendirinya.
B.melalui menu dasboard
1.login ke blogger.com
2.anda akan langsung masuk ke menu dasborad.klick edit post di bagian blog yang akan anda tambahkan label
3.di menu edit post akan muncul daftar tampilan semua tulisan/postingan anda
4.centang setiap postingan yang ingin anda tambahkan label
5.setelah itu klik bagian atas yang bertuliskan label.pilih new label..tuliskan nama label yang ingin anda gunakan.maka otomatis postingan yang tadi anda pilih telah tertempel label.
setelah pembuatan label selesai,sekarang kita akan memunculkan label-label yang telah kita buat ke dalam blog dengan cara:
1.masuk ke bagian layout-page/tata letak.
2. Pilih add gadget/tambah gadget, nanti akan muncul banyak sekali gadgets..
3.pilih "label"
4. atur letak label sesuai dengan yang anda inginkan.
5.kemudian save perubahan yang telah anda buat
[[..selengkapnya..]]
A.melalui menu posting
1.login ke blogger.com
2.klik new post
2.sekarang anda ada didalam menu posting.lihat dibagian paling bawah kiri.disana ada tulisan label
3.anda bisa menuliskan label di kolom tersebut.nanti label yang telah anda tulis disana otomatis akan langsung tersimpan dengan sendirinya.
B.melalui menu dasboard
1.login ke blogger.com
2.anda akan langsung masuk ke menu dasborad.klick edit post di bagian blog yang akan anda tambahkan label
3.di menu edit post akan muncul daftar tampilan semua tulisan/postingan anda
4.centang setiap postingan yang ingin anda tambahkan label
5.setelah itu klik bagian atas yang bertuliskan label.pilih new label..tuliskan nama label yang ingin anda gunakan.maka otomatis postingan yang tadi anda pilih telah tertempel label.
setelah pembuatan label selesai,sekarang kita akan memunculkan label-label yang telah kita buat ke dalam blog dengan cara:
1.masuk ke bagian layout-page/tata letak.
2. Pilih add gadget/tambah gadget, nanti akan muncul banyak sekali gadgets..
3.pilih "label"
4. atur letak label sesuai dengan yang anda inginkan.
5.kemudian save perubahan yang telah anda buat
Bagi para sobat yang baru membuat blog, ada beberapa settingan / pengaturan yang harus di lakukan agar blog kita bisa di kenali mesin pencari semisal Google,yahoo, Msn serta teman-temannya yang lain. Bila belum tahu apa yang harus di setting, silahkan ikuti langkah-langkahnya :1. Silahkan sobat Login ke blogger.com dengan user name dan password milik sobat
2. Klik judul blog yang mau di setting ( jika sobat sudah mempunyai beberapa blog)
3. Klik Pengaturan, trus klik Dasar. Beberapa form yang harus di isi pada menu Dasar :
* Judul ⇒ isi dengan judul blog sobat. Contoh : Blogspot Tutorial
* Uraian ⇒ isi dengan deskripsi blog sobat. Contoh : disini kita akan berbagi pengalaman dan pengetahuan seputar Blog
* Tambahkan blog Anda ke daftar kami? ⇒ pilih ya agar setiap posting kita selalu masuk di daftar Blogger.com.
* Biarkan mesin pencari menemukan blog Anda? ⇒ pilih ya
* Tampilkan Editing Cepat di Blog Anda? ⇒ pilih Ya
* Tampilkan Link Posting Email? ⇒ Sebaiknya pilih ya, tapi pilih tidak juga tidak apa-apa
* Konten Dewasa? ⇒ Pilih tidak. Kalau pilih ya berarti blog anda di anggap blog untuk dewasa (semacam blog porno)
* Tampilkan Mode Compose untuk semua blog Anda? ⇒ pilih Ya
* Aktifkan transliterasi? ⇒ pilih Tidak, jika anda ingin ada button untuk mengubah biasa ke hurup hindi (India), pilih ya jika sebaliknya)
* Klik tombol Simpan Pengaturan . Selesai
4. Klik Publikasi untuk mengatur menu Publikasi :
* Alamat Blog*Spot ⇒ isi dengan nama blog sobat. Contoh : kolom-tutorial. Biasanya alamat yang tercantum adalah langsung alamat blog anda, jadi jangan di ubah aja.
* Klik tombolSimpan pengaturan. Selesai
5. Klik Format untuk mengatur menu format :
* Tampilkan ⇒ pilih angka posting yang ingin anda tampilkan. Missal : Tampilkan : 6 posting, berarti posting yang akan tampil di halaman blog sobat adalah sebanyak enam posting. Pilih posting (jangan hari) pada menu pulldown.
* Format Header Tanggal ⇒ pilih model tanggal/bulan yang anda sukai, Format tanggal/bulan ini akan selalu muncul diatas postingan kita.
* Format tanggal Index Arsip ⇒ pilih model untuk peng-arsip-an yang anda sukai.
* Format Timestamp ⇒ Pilih bentuk waktu yang anda sukai.
* Zona Waktu ⇒ Pilih zona waktu yang sesuai. Contoh untuk WIB : [UTC-+7.00]Asia/Jakarta.
* Bahasa ⇒ Pilih bahasa yang di inginkan.
* Tampilkan Field judul ⇒ Pilih ya
atau tidakpun tidak apa-apa
* Tampilkan kolom link ⇒ pilih ya, tapi seandainya pilih tidak juga tidak apa-apa.
* Aktifkan perataan float ⇒ pilih ya, tapi seandainya mau pilih tidak juga tidak apa-apa
* Klik tombol Simpan Pengaturan. Selesai
6. Klik Komentar Untuk mengatur menu komentar :
* Komentar ⇒ pilih tampilkan, ini agar artikel anda dapat di komentari oleh pengunjung
* Siapa yang Bisa Berkomentar ? ⇒ Pilih Siapa pun - termasuk Pengguna Anonim. Ini di maksudkan agar setiap orang bisa berkomentar tidak terbatas kepada anggota blogspot saja.
* Default Komentar untuk Posting ⇒ pilih Posting baru memiliki komentar.
* Link balik ⇒ Pilih tampilkan. Ini dimaksudkan agar kita mengetahui apabila ada yang memasang link pada artikel kita.
* Default Link Balik untuk Posting ⇒ pilih Posting baru Memiliki Link Balik.
* Format Timestamp Komentar ⇒ pilih format jam yg singkat. Contoh: 8.00 PM.
* Tampilkan komentar dalam sebuah window popup? ⇒ pilih Ya. Supaya ketika di klik oleh pengunjung, halaman blog anda tidak menghilang/tertimpa halaman komntar.
* Aktifkan moderasi komentar? ⇒ pilih Tidak (sebaiknya).
* Tampilkan verifikasi kata untuk komentar? ⇒ pilih Ya. ini di maksudkan agar terhindar dari software robot dengan tujuan melakukan spam.
* Tampilkan gambar profil dalam komentar? ⇒ pilih ya. Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya.
* Email Pemberitahuan Komentar ⇒ isi dg alamat email anda, ini di maksudkan agar setiap ada yang berkomentar pada artikel anda, anda dapat kiriman email dari blogger.com sebagai pemberitahuan.
* Klik tombol Simpan Pengaturan. Selesai
7. Klik Arsipkan Untuk mengatur menu Arsipkan :
* Frekuensi Arsip ⇒ pilih Bulanan.
* Aktifkan Halaman Posting? ⇒ pilih ya.
* Klik tombol Simpan Pengaturan . Selesai.
8. Klik Fedd Situs untuk mengatur menu feed situs :
* Izinkan Feed Blog ⇒ pilih Penuh.
* Posting URL Pengubahan Arah Feed ⇒ di isi dengan alamat feed penggati semisal alamat feed dari feed burner, jika belum punya, di kosongkan saja.
* Footer Feed Posting ⇒ Silahkan di isi dengan kode iklan yang anda punya, misal kode iklan dari Google adsense dsb, namun jika tidak punya, silahkan kosongkan saja.
* Klik tombol Simpan Perubahan. Selesai.
Satu pekerjaan sudah selesai, tinggal menyongsong pekerjaan lainnya
Lansung saja cara nya yah....
Pertama anda Login terlebih dahulu ke blogger,com kemudian masuk ke Dasboard pilih Tata Letak lalu masuk menu EditHTML
1. Cara pertama, tambahkan kode di bawah ini diatas kode ]]></b:skin>:
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
height:0px;
visibility:hidden;
display:none
}
2. Cara kedua, Bisa juga menaruh kode script berikut ini di bawah kode <body>
<style type='text/css'>
#navbar-iframe {display:none;}
</style>
#navbar-iframe {display:none;}
</style>
Setelah anda menyimpan template dengan cara save template. Coba anda login ke blog anda dan Navigasi Bar Blogger tersebut telah hilang. Simpan tips ini bila dikemudian hari anda ingin memunculkan kembali Navigasi Bar Blogger.
Note: sebenarnya menghilangkan navbar melanggar TOS blogger, tapi bila anda bersikeras ingin menghapus silahkan pakai cara diatas tapi dengan syarat segala resiko menjadi tanggung anda.
Kalau dulu kita sudah mempelajari tentang membuat tampilan berbeda antara homepage dan isi dengan menyembunyikan widget, sekarang kita akan mencoba bereksperiment untuk memunculkan gadget hanya pada Static Page, Postingan, Halaman Arsip, bahkan pada Postingan tertentu.
Sebenarnya caranya sama dengan memunculkan widget di home saja, cuma kita lakukan sedikit modifikasi pada HTML penyembunyi widgetnya
Okay berikut tutorialnya:
Menampilkan Widget Hanya di Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>
..........................
</b:if>
Menampilkan Widget selain di Homepage
<b:if cond='data:blog.url != data:blog.homepageUrl'>
.....................................
</b:if>
Menampilkan Widget hanya di Archivepages
<b:if cond='data:blog.pageType == "archive"'>
......................................
</b:if>
Menampilkan Widget selain di Archivepages
<b:if cond='data:blog.pageType != "archive"'>
....................................................
</b:if>
Menampilkan Widget hanya di Itempages / Postingan
<b:if cond='data:blog.pageType == "item"'>
............................................
</b:if>
Menampilkan widget selain di Itempages
<b:if cond='data:blog.pageType != "item"'>
....................................
</b:if>
Menampilkan widget hanya di Staticpages
<b:if cond='data:blog.pageType == "static_page"'>
..................................
</b:if>
Menampilkan widget selain di staticpages
<b:if cond='data:blog.pageType != "static_page"'>
............................
</b:if>
Menampilkan widget pada URL Postingan Tertentu
<b:if cond='data:blog.url == "alamatpostingan"'>
.........................................
</b:if>
nb: pada "alamat posting", ganti dengan url postingmu
Menampilkan widget selain di URL postingan tertentu
<b:if cond='data:blog.url != "alamaatpostingan"'>
................................................
</b:if>
nb: pada "alamat posting", ganti dengan url postingmu
Sekarang Cara mengaplikasikannya adalah dengan menaruh kodenya dengan susunan sebagai berikut:
Misal Judul Gadgetku adalah "translator"
Maka kode keseluruhan:
(Kode ini di dapat dengan mencontreng "Expand Template Widget")
Uhm... Tanda strip yang berwarna merah adalah tempat kamu harus meletakkan kode penyembunyi gadgetnya
Sebagai contoh, aku punya widget yang kuberi nama "Translator"
Maka kode keseluruhan pada templatenya adalah:
<b:widget id='HTML2' locked='false' title='Translator' type='HTML'>
<b:includable id='main'>
..................................................kode penyembunyi widget
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
.............................................. kode penutup
</b:includable>
</b:widget>
nb: kode ini di dapat dengan mencenthang "Expand Widget Template"
Contoh:
<b:widget id='HTML2' locked='false' title='Translator' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
[[..selengkapnya..]]
Sebenarnya caranya sama dengan memunculkan widget di home saja, cuma kita lakukan sedikit modifikasi pada HTML penyembunyi widgetnya
Okay berikut tutorialnya:
Menampilkan Widget Hanya di Homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>
..........................
</b:if>
Menampilkan Widget selain di Homepage
<b:if cond='data:blog.url != data:blog.homepageUrl'>
.....................................
</b:if>
Menampilkan Widget hanya di Archivepages
<b:if cond='data:blog.pageType == "archive"'>
......................................
</b:if>
Menampilkan Widget selain di Archivepages
<b:if cond='data:blog.pageType != "archive"'>
....................................................
</b:if>
Menampilkan Widget hanya di Itempages / Postingan
<b:if cond='data:blog.pageType == "item"'>
............................................
</b:if>
Menampilkan widget selain di Itempages
<b:if cond='data:blog.pageType != "item"'>
....................................
</b:if>
Menampilkan widget hanya di Staticpages
<b:if cond='data:blog.pageType == "static_page"'>
..................................
</b:if>
Menampilkan widget selain di staticpages
<b:if cond='data:blog.pageType != "static_page"'>
............................
</b:if>
Menampilkan widget pada URL Postingan Tertentu
<b:if cond='data:blog.url == "alamatpostingan"'>
.........................................
</b:if>
nb: pada "alamat posting", ganti dengan url postingmu
Menampilkan widget selain di URL postingan tertentu
<b:if cond='data:blog.url != "alamaatpostingan"'>
................................................
</b:if>
nb: pada "alamat posting", ganti dengan url postingmu
Sekarang Cara mengaplikasikannya adalah dengan menaruh kodenya dengan susunan sebagai berikut:
Misal Judul Gadgetku adalah "translator"
Maka kode keseluruhan:
(Kode ini di dapat dengan mencontreng "Expand Template Widget")
Uhm... Tanda strip yang berwarna merah adalah tempat kamu harus meletakkan kode penyembunyi gadgetnya
Sebagai contoh, aku punya widget yang kuberi nama "Translator"
Maka kode keseluruhan pada templatenya adalah:
<b:widget id='HTML2' locked='false' title='Translator' type='HTML'>
<b:includable id='main'>
..................................................kode penyembunyi widget
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
.............................................. kode penutup
</b:includable>
</b:widget>
nb: kode ini di dapat dengan mencenthang "Expand Widget Template"
Contoh:
<b:widget id='HTML2' locked='false' title='Translator' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
Silahkan lihat contoh Daftar Isi Efek jQuery Accordion disini.
Berikut langkah-langkah membuat Daftar Isi Efek jQuery Accordion:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada Langkah 3:
#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada Langkah 5:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
Perhatian! Ingat jika pada bagian tag head pada template blogger anda sudah pernah/ada framework jQuery maka lewati Langkah 6 ini
Langkah 7
Simpan template blogger...
Cara membuat Daftar Isi dengan Efek jQuery Accordion pada Artikel:
Langkah 1
Buat sebuah artikel dengan judul terserah anda (misal; Label dan Isi Artikel)
Langkah 2
Pindahkan mode Editor artikel ke mode Edit HTML
Langkah 3
Masukan (copy paste) kode dibawah ini ke dalam artikel :
<script type="text/javascript" src="http://hensblog.googlecode.com/files/dafis_accv1.js"></script>
<script src="http://amiroktavia.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script src="http://amiroktavia.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
Langkah 4
Ubah URL blog pada langkah 3 (warna biru) sesuai dengan URL Blog anda
Langkah 5
Terbitkan artikel dan preview artikel tersebut...
tutorial "Daftar Isi Efek jQuery Accordion" diambil dari "http://modification-blog.blogspot.com/"
Cara nya mudah untuk mengganti icon Blogger.
Cari gambar atau icon yang mau diganti untuk blog kita, setelah itu copy URL gambar tersebut. Untuk memasukkan ke blog anda silakan kembali ke Dasboard blogger anda,silakan ke menu Layout->Edit HTML->jangan lupa klik Expand Widget kemudian temukan kode berikut </head>
Setelah itu letakkan kode dibawah ini sebelum kode diatas
<link href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyG_-KsgFlLafy7bd0nQFVvaL9IEV7hJr4zwO0bdRF-K3qRpGA9DUKGqLOYYkykKqgs87-rhn78_9IVbKYUy-xjqzROPmDr5Q9u8wls3dKaHwKU_n_iQjHKK2v4v-mCwOod0vPblohDNgz/s1600-r/blogger+copy.png" rel="SHORTCUT ICON">
Silakan ganti kode yang berwarna dengan URL gambar yang akan anda gunakan anda
Kemudian Save Setting,,Selesai,,
Membuat arsip blog menjadi scroll. Trik ini sama seperti model scroll yang lain, contohnya Label Scroll dan Scrolling pada Box Comments. Kita hanya menambahkan script berikut:
<div style='overflow:auto; width:ancho; height:100px;'>
....
</div>
Untuk letaknya apa udah pada tau? Kalo belum, ayo kita lihat caranya:....
</div>
1. Login - Layout - Elemen halaman
2. Buat widget Arsip dengan nama Arsip Blog
3. Pilih model Hirearchy untuk model ini
4. Save
5. Masuk ke Edit HTML - cek kotak Expand Template Widget
6. Cari 'Arsip Blog'. Selengkapnya begini:
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>javascript:void(0)
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
Tambahkan kode warna biru pada teamplates anda.<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>javascript:void(0)
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
warna hijau anda sesuaikan berapa tinggi kotak scrool.
7. Sebelumnya tidak ada kode merah di template Anda. Tambahkan kode itu untuk mengaktifkan scrolling-nya
8. Simpan template Anda dan lihat hasilnya
Semoga bermanfaat!!!
Nah mungkin tutorial ini dapat membantu, meskipun ini sederhana namun cukup cantik bila dipasang di blog kita. Manfaatnya juga agar tampilan lebih minimalis. Jadi jika kita memiliki Link yang cukup banyak tak kan jadi masalah.
1. Blogroll dengan Drop down menu
<form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option> - Blogroll - </option>
<option value="#">Amir Oktavia Blogspot</option>
<option value="#">Free Blog Teamplates</option>
<option value="#">Siska Blog</option>
</select>
</form>
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
<option> - Blogroll - </option>
<option value="#">Amir Oktavia Blogspot</option>
<option value="#">Free Blog Teamplates</option>
<option value="#">Siska Blog</option>
</select>
</form>
Lihat hasilnya:
2. Blogroll Urut kebawah
<option selected="selected" style="font-weight: normal; font-size: 11px; color: rgb(204, 204, 204); font-family: Verdana,Tahoma,Arial;" value="#"/>Sahabatku
<option value="#">Amir Oktavia Blogspot
<option value="#">Free Blog Teamplates
<option value="#">Siska Blog
<option value="#">Catatan Oktavia
<option value="#">Faisal Blog
</select>
<option value="#">Amir Oktavia Blogspot
<option value="#">Free Blog Teamplates
<option value="#">Siska Blog
<option value="#">Catatan Oktavia
<option value="#">Faisal Blog
</select>
Lihat hasilnya:
3. Blogroll Dengan Marquee
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="300px" height="100px">
<a href="#" target="_blank">Amir Oktavia Blogspot</a>
<br/><br/>
<a href="#"_blank">Free Blog Teamplates</a>
<br/><br/>
<a href="#" target="_blank">Siska Blog</a>
<br/><br/>
</marquee>
<a href="#" target="_blank">Amir Oktavia Blogspot</a>
<br/><br/>
<a href="#"_blank">Free Blog Teamplates</a>
<br/><br/>
<a href="#" target="_blank">Siska Blog</a>
<br/><br/>
</marquee>
Ganti tanda # dengan target url blog teman anda....
scrollamount="2" => angka "2" menunjukkan kecepatan, apabila ingin lebih cepat ganti aja dengan 3 berapapun yang anda suka.
direction="down" => menunjukkan arah gerakannya kebawah, apabila ingin yang lain ganti aja dengan up, left, ataupun right
width="300px" => "300px" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, anda bisa menggantinya dengan 30%, 100% atau berapapun yang anda inginkan.
height="100px" => "100px" menunjukan tinggi dari marquee sebesar 200px, anda juga bisa menggantinya dengan berapapun yang anda inginkan.
Lihat hasilnya:
Tiap bloger pasti ingin tampilan blog nya terlihat rapi,begitu bukan? Ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"? Jika tulisan itu yang menurut kita tidak penting dan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya agar lebih rapi. Sehingga blog kita diharapkan bisa lebih rapi lagi, dan menarik pengunjung untuk berlama-lama di blog kitaCara Menghilangkan Tulisan "Langgan: Entri (Atom)"
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
6. Hapus (delete) kode tersebut.
7. Simpan template jika sudah selesai.
Gak usah panjang lebar sob, langsung saja sobat copy paste code dibawah ini di ADD PAGE ELEMENT ..
<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #bbb;
background-color:#bbb;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #fff;
background: #000;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Home';
var endPageWord = 'End';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"></div>
Jangan lupa pindah page element tadi ke bawah post kita seperti gambar di atas ...
Secara default, setiap template blogger akan dilengkapi dengan older post dan newer post yang masing-masing berfungsi untuk menampilkan postingan lama dan baru.
Agar tampilannya lebih menarik, anda bisa menggantinya dengan icon.
Caranya:
1. Pada menu klik Layout -> Edit HTML
2. Biar aman backup dulu template anda dengan klik Download Full Template
3. Beri tanda centang pada kotak "Expand Widget Template"
4. Lalu cari kode
<data:olderpagetitle/> Posting Lama
<data:newerPageTitle/> Posting Lebih Baru
<data:homeMsg/> Beranda/Home
<data:newerPageTitle/> Posting Lebih Baru
<data:homeMsg/> Beranda/Home
5. Kalau sudah ketemu ganti kode tersebut dengan Url icon dibawah ini.
Contohnya seperti gambar dibawah ini.
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMccvHs7VbSfSpylkGb8tmgPlZ3H2oDOPG9BPi3DF4n9RxTZrQvt1EBfLBbwyaaydtULpfxojnhgF8cqX_jwrsAxxQQd3Q81-IApOdp2oa6l7TaKZ1voRt8MktgH4y5jXWWAQiXOeddIN3/s128/back-icon.png" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinQHEwhcwCTh7FCOs0AZvn4-MSHhEkVjbbMj37VpD6z-ftF-mm4kRI6tcdb_86N5OVyB5ybDC6cq5LVmG7scexI__aTBL3_9yp3AnlXvDsQ0PwHTHsCWVIyLjy8CXzWUM5jooNQ7ReiGNr/s128/home-icon.png" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKxEhoGVB4Ji-uWoMYvL3ehcdIOhMHsEpQcuKhPmaLLCG9xmPNIxIlxemTBg6wWWMB7J7RFjMwa6Im36P892jM8FDiQBh-kO6OemWxmPzJ498r55CsT3dPvBqvfchhqLZHMMZDjUGlNtcX/s128/next-icon.png" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqVSEE3oCmR0nvA0RTNK9j_1ib6-vv983J3TISSokJMxcrS15on75rrGQxlN1UQcnuLNNRV1lwJe892GnJKOIHnb83UmdKfE3vRoJkcYySoAusdy2M-DrWqj5CJoS4riYUQ4_OUMyU3XmS/s128/Copy%20of%20next.png" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglybBvB6XY-rSQYtbjtXB-zKguY8eUj7vZafmFe_OIjkr1BPTWW_DAk6qvBqsc58Hxmy2Rxa9wszrz6ng4VNeUop67ta_AN6Bl7cYpSDZpgnd4bXIkMGr_JT9_LWUwXAfg64qlDpsZwElT/s128/Home.png" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2gpBntf56WPvvG2Kd3OQWSJobfZmxZE_-D85tjL0CWcrL4qJAHJ0gsDdcXcDHjuy_dls2QYrmesMeQ-7lTg75A_6Qp5ds0rY7uw-8BBLlGPMbmuQpHnzsQNEA8-3Jh17W42YPB9q5UUIF/s128/next.png" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd9ogDtnd5PX4kqIT7EaAaT5mGIagvAC1b9_NDA5G9q-yczpSbvT2TtUvTdEz3PE5m8sCGmDFrhXpXnaPT9B8qPIdVR_TenTFgovo5YdWu2jJtiZlQ1e6PfvCQ_pA4TYbj8ICjkNgqOCai/s128/28.png" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCINC-4oX-Wsh_ZZiEI99227AX7-esRHK6_9dTIDS_XnkAHQrFv6fN_FiUOjN5Mov5A46rm0SmEVIKWQws0qIZ67EVm1iR34DJ0dvvzyMvotyN7QjfErucgNFBiOqocw-169tf9oQZoK1x/s128/22.png" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaH3yAKbBPvk7pIJDXI-6fcdLHhrOhtE5Ix6n4T6xhiLSiAJADWtdXmjtzya4aNmpzPmZF9OpEd-BkXMliwu1ERXtAG5NxK1t_YRx67UJW-LV09y9j17AjoZB9SX-QB5vIEkPAjLxvDce/s128/23.png" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg82NtAoAhI1qMcwOpWuVaRq-80B2sQkFRAdFjSAXoIMGGYH3DNjUhU3D0hneFeBhsHmT7UO_oNUMP19aEqA6EiNly6LFNcW55Gr9xFyAOrL4b747eF_h1lv2CYdGlAmBv6GTUAAao2ytug/s128/blue_arrow_up.png" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10ub5MwV3NwgvE4vELXL4JfZaBgvQWZ04hXAGn3qE5dG6ZCHu-aUJ8ZBLlQDR2qzbSPXm_tXrCZpgvnkepmOGKPraSXjrWaYgo1QxhFRKBZLr54_HSVPDz-OSIM5g5PE-ELuaOQdqP3Uu/s128/computer.png" />
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-uu22gDN-jkh9Wj3Vvc-FIPhX55OEOBHVpakaBlWuZuX8_5WjVpVQOqVSE0VLWjjiPGJyE-ec4YR3hsC0BEq9WzLQwgshqNXgYxQtvxjtCqdZ8xN02Kpn9qwObRCYU_1-vNME_E6m15Mo/s128/blue_arrow_down.png" />
