Tekhnik Membuat Newsticker Berita Berjalan Untuk Blogger

Pernahkah anda mengunjungi sebuah blog dengan newsticker berjalan di bawah blogger? mungkin contohnya dapat dilihat pada gambar dibawah ini :

newsticker ini berisi tentang cuplikan berita pendek yang mewakili berita secara keseluruhan sehingga bisa memberikan informasi terbaru kepada pengunjung blog arbakid tentang peristiwa yang sedang terjadi saat ini dan pada akhirnya pengunjung dari blog arbakid tidak akan ketinggalan informasi terbaru.

Cara membuat berita berjalan pun sangat mudah, untuk membuat berita berjalan atau newsticker diblogspot tinggal ikuti saja langkah-langkah dibawah ini :

1. login ke blogger
2. masuk ke edit HTML dan cari kode berikut ini : ]]></b:skin>
3. Copast script dibawah ini dan letakkan di atas kode tersebut
4. #berita {
   position:fixed;_position:absolute;bottom:0px; center:0px;
   clip:inherit;
   _top:expression(document.documentElement.scrollTop+
   document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
5. langkah berikutnya, pada Edit HTML cari kode berikut ini : </body>
6. Copast script dibawah ini dan letakkan di atas kode tersebut
7. <div id=' berita '>
   <iframe allowtransparency='true' frameborder='0' height='17' id='NewsWindow' marginheight='0' marginwidth='0' scrolling='no' src='http://www.elshinta.com/v2003a/scrolling.htm' style='background-color: transparent;' width='1200'/>
   </div>
8. secara otomatis berita ini akan tampil di posisi bawah blog
9. untuk merubahnya tinggal diganti saja script pada langkah ke 4 dengan script berikut ini
10. #berita {
    position:fixed;_position:absolute;top:0px; center:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
11. Selesai

Semoga bermanfaat. Salam..

source : here

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...

Read more

Tampilan Popular Post Bulat Berubah dengan Animasi Kotak

Salam blogger, kali saya mencoba sharing artikel dari mas Zel Afriad, tentang cara membuat Tampilan Popular Post menjadi keren. Saya telah menerapkannya untuk blog saungjiwa ini, mungkin para sahabat blogger tertarik juga untuk menerapkannya di blog sobat. Langsung saja cara membuatnya :

1. Login akun blogger sobat.
2. Menuju Ke menu Tata Letak
3. Sebelumnya Tambahkan Widget Popular Post Terlebih Dahulu pada blog sobat dengan cara Klik Menu Tata letak, Tambah Gadget, Popular post / Entri Popular, Pilih 7 Hari Terakhir, Centang Thumbnail gambar Dan Jangan Centang Cuplikan ! Jika sudah, simpan
4. Kemudian, Tambah gadget kembali, Pilih Html Javascript.
5. Masukan Semua kode dibawah ini.     

<script language='Javascript'>document.write(unescape('%3C%73%74%79%6C%65%3E%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%2E%69%74%65%6D%2D%74%69%74%6C%65%7B%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%7B%62%61%63%6B%67%72%6F%75%6E%64%3A%20%6E%6F%6E%65%20%72%65%70%65%61%74%20%73%63%72%6F%6C%6C%20%30%20%30%20%74%72%61%6E%73%70%61%72%65%6E%74%3B%66%6C%6F%61%74%3A%20%6C%65%66%74%3B%6C%69%73%74%2D%73%74%79%6C%65%3A%20%6E%6F%6E%65%20%6F%75%74%73%69%64%65%20%6E%6F%6E%65%3B%6D%61%72%67%69%6E%3A%20%33%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%70%61%64%64%69%6E%67%3A%20%30%20%21%69%6D%70%6F%72%74%61%6E%74%3B%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%69%6D%67%20%7B%70%61%64%64%69%6E%67%3A%33%70%78%3B%62%61%63%6B%67%72%6F%75%6E%64%3A%23%66%65%66%65%66%65%3B%2D%77%65%62%6B%69%74%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%2D%6D%6F%7A%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%66%6C%6F%61%74%3A%6C%65%66%74%3B%6D%61%72%67%69%6E%3A%30%20%36%70%78%20%30%20%30%3B%70%6F%73%69%74%69%6F%6E%3A%72%65%6C%61%74%69%76%65%3B%6F%76%65%72%66%6C%6F%77%3A%68%69%64%64%65%6E%3B%2D%77%65%62%6B%69%74%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%2D%6D%6F%7A%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%20%2D%6F%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%69%6D%67%3A%68%6F%76%65%72%20%7B%70%61%64%64%69%6E%67%3A%33%70%78%3B%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%35%70%78%3B%2D%6F%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%20%20%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%6F%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%2D%77%65%62%6B%69%74%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%7D%0A%3C%2F%73%74%79%6C%65%3E%0A%3C%64%69%76%20%73%74%79%6C%65%3D%22%70%6F%73%69%74%69%6F%6E%3A%20%66%69%78%65%64%3B%20%62%6F%74%74%6F%6D%3A%20%30%70%78%3B%20%72%69%67%68%74%3A%20%30%70%78%3B%22%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%68%65%72%6D%61%6E%62%61%67%75%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%20%72%65%6C%3D%22%64%6F%66%6F%6C%6C%6F%77%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%73%74%79%6C%65%3D%22%6D%61%72%67%69%6E%2D%74%6F%70%3A%2D%32%35%70%78%22%3E%2E%3C%2F%61%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%68%65%72%6D%61%6E%62%61%67%75%7A%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%20%72%65%6C%3D%22%64%6F%66%6F%6C%6C%6F%77%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%73%74%79%6C%65%3D%22%6D%61%72%67%69%6E%2D%74%6F%70%3A%2D%32%35%70%78%22%3E%2E%3C%2F%61%3E%0A%3C%2F%64%69%76%3E'));</script>
     6. Dan kemudian simpan, dan lihat hasilnya.

Semoga Membuat tampilan blog sobat menjadi lebih keren dapat bermanfaat, Salam Saung Jiwa Pangkalpinang  :) 

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...

Read more

Cara Mudah Membuat tombol 'Share' melayang Shareaholic Sassy

Mungkin sobat blogger banyak menemukan widget sahreholic sassy ini, namun yang saya akan terapkan ini tidak melalui edit tamplate HTML, namun cukup memasukan kode HTML ke Tab HTML/JavaScript, jadi tanpa harus mengedit isi tamplate blog.

Langsung saja caranya :

1. Log-in akun blogger

2. Masuk tab 'Tata Letak', dan klik link 'Tambahkan Gadget'.

3. Lalu pilih HTML/JavaScript

4. Lalu, masukkan kode CSS berikut:

<!-- Start Shareaholic Sassy Bookmarks HTML widget by :<a href="http://www.pangkal.biz/">T11U</a>-->

    <div class='shr_ss shr_publisher'>

    </div>

    <!-- End Shareaholic Sassy Bookmarks HTML -->

    <!-- Start Shareaholic Sassy Bookmarks settings -->

    <script type='text/javascript'>

    var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey"

:"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"

bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black",

"tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};

    </script>

    <!-- End Shareaholic Sassy Bookmarks settings -->

    <!-- Start Shareaholic Sassy Bookmarks script -->

    <script type='text/javascript'>

    (function() {

    var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;

    sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";

    var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);

    })();

    </script>

    <!-- End Shareaholic Sassy Bookmarks widget by : <a href="http://www.pangkal.biz/">T11U</a> -->

5. Lalu klik Simpan atau Save.

Berkomentarlah dengan Sopan, Sara, SPAM akan dihapus...

Read more

Pasang Share Lengkap di Bawah Judul Postingan Blogger

Share icon berlangganan sangat penting untuk sebuah blog dalam mencapai SEO blog yang natural. Saya telah menerapkan nya untuk blog saungjiwa ini. Seperti dibawah ini contohnya :

Tertarik untuk menerapkannya di Blog sobat, silahkan lihat dibawah ini cara membuatnya :

1. Masuk ke akun blogger sobat
2. Pilih kode Tamplate dan buka edit HTML
3. Centang expand widget untuk memasang widget share
4. Cari kode ini, <h2 class='date-header'>, atau <div class='post-header-line-1'/>
5. Lalu copy script css dibawah ini tepat dibawah kode no. 4 tadi

<!-- ShareThis Button BEGIN --> <div class='sharethis_toolbox addthis_default_style '> <b>Share On:</b> <span class='st_fblike_hcount' displayText='Facebook Like'/> <span class='st_facebook_hcount' displayText='Facebook'/> <span class='st_twitter_hcount' displayText='Tweet'/> <span class='st_googleplus_hcount' displayText='Google +'/> <center> <span class='st_tumblr_large' displayText='Tumblr'/> <span class='st_digg_large' displayText='Digg'/> <span class='st_linkedin_large' displayText='LinkedIn'/> <span class='st_stumbleupon_large' displayText='StumbleUpon'/> <span class='st_pinterest_large' displayText='Pinterest'/> <span class='st_technorati_large' displayText='Technorati'/> <span class='st_sharethis_large' displayText='ShareThis'/></center> </div> <script type='text/javascript'>var switchTo5x=false;</script> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> <script type='text/javascript'>stLight.options({publisher: "b9f38387-a316-49bb-b119-fec472075cf9"});</script> <!-- ShareThis Button END -->

• Save Tamplete, dan selesai.

Semoga artikel ini bermanfaat. Salam Saung Jiwa

Read more

Related Post Dibawah Postingan Dengan Gambar

Cara ini mungkin sudah banyak yang menerapkannya, mungkin saja ada teman-teman blogger yang ingin mengetahui dari blog saungjiwa ini. Langsung saja cara pembuatan Related Post atau artikel terkait Dibawah Posting Dengan Thumbnail Gambar :

• Sobat Login ke akun blog sobat.

• Pilih Template =>> Edit HTML. (Saya sarankan untuk mem-backup dulu template sobat untuk menghindari hal-hal yang tidak diinginkah / error)

• Sobat cari kode berikut </head> Untuk mempercepat pencarian sobat tekan Ctrl+F di kotak script Edit HTML sobat.

• Kemudian letakan kode dibawah ini tepat diatas kode </head>

<!--Related Posts mari-berbagi244.blogspot.com Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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 src='http://my-project-favicon.googlecode.com/files/relatedposts.js.txt' type='text/javascript'/>
</b:if>
<!--Related Posts mari-berbagi244.blogspot.com Styles End-->

• Jangan disimpan dulu template sobat.

• Kemudian sobat cari lagi kode <data:post.body/> Untuk mempermudah pencarian gunakan Ctrl+F di kotak Edit HTML. (biasanya ada 3 kode seperti ini. Jika memang benar, pilih kode yang ke 2)

• Copy kode berikut, dan letakan di bawah kode <data:post.body/>

<!--Related Posts mari-berbagi244.blogspot.com Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://saungjiwa2012.blogspot.com/' style='display:none;'></a>
</b:if>
</b:if>
<!--Related Posts mari-berbagi244.blogspot.com Styles End-->

• Kode yang berwarna Orange bisa sobat ganti dengan kata-kata sobat sendiri apakah Artikel Terkait / Related Post.

• Kode yang berwarna Merah adalah kode banyaknya artikel terkait yang akan di tampilkan di blog sobat, jadi modifikasikan sesuai dengan keinginan dan kebutuhan sobat.

• Kode yang berwarna Biru sobat ganti dengan alamat URL blog sobat.

• Kemudian Simpan Template dan lihat hasilnya.

Semoga artikel ini dapat bermanfaat dan berguna buat sobat blogger yang membutuhkan. Jika ada yang ingin ditanyakan atau mengalami error dalam pembuatan silahkan berkomentar di kolom komentar atau di chatbox. Terima kasih dan Salam blogger.

Read more

Membuat TAB Menu 2 Kolom Untuk Blog

Cara membuat 2 tab menu pada blog tidak begitu sulit. apabila kalian mengerti pemrograman CSS, kalian bisa memodifikasi tampilannya hingga sedemikian rupa. tab menu pada blog juga dapat digunakan untuk mempercantik blog. banyak cara yang bisa dilakukan untuk mempercantik blog, salah satunya adalah memasang tab menu.
Contohnya, kalian bisa lihat di sidebar blognyaipank ini atau gambarnya di bawah ini :

berikut ini tutorial cara membuat tab menu (versi 2) :
1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Copy Paste kode berikut di atas kode ]]></b:skin> :

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
font-family: "verdana", Serif;
font-weight: 900;
color: #1E62B6;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E2EAF0;
}
div.TabView div.Pages
{
clear: both;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
overflow: hidden;
background-color: #E2EAF0;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

3. Copy Paste script tab menu di bawah ini di atas </head> :

<script>
//<![CDATA[
/******************************************
menu tab script
********************************************/
function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }

//]]></script>

4. Klik Simpan.

Untuk menambahkan tab menu pada sidebar, caranya adalah sebagai berikut :

1. klik tata Letak, Tambah Gadget, Tambah Html/Javascript.

2. Copy paste kode berikut ini :

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 320px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width: 315px; height: 270px;" class="Pages">

<div class="Page">
<div class="Pad">

(isi konten judul 1)

</div>
</div>


<div class="Page">
<div class="Pad">

(isi konten judul 2)

</div>
</div>


<div class="Page">
<div class="Pad">

(isi konten judul 3)

</div>
</div>

</div></div></form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

3. Klik Simpan.

Penjelasan kodenya adalah sebagai berikut :

• -kode yang berwarna hijau adalah judul tab.
• -kode yang berwarna biru adalah isi konten dari setiap judul tab.
• -kode yang berwarna merah adalah untuk mengatur lebar dan tinggi widget tab menu.

Sekian cara membuat tab menu pada blog. semoga artikel ini bermanfaat  Ya... Salam, salam.........:)

Read more

Script Alert Pada Untuk Blog

Gimana cara pasang script alert di blog, Ini tips bagaimana memasang script alert pada blog. Script alert bisa berguna buat ngingetin pengunjung buat ninggalin coment, dll. seperti itulah contohnya sebagian..disini akan dijelasin 4 jenis script alert. biar lengkapya... oke sob, langsung tancep aja ke cara pasang script alert pada blog..

1. Menu Dashboard, klik Tata Letak, klik Tambah Gadget, HTML/Javascript.
2. masukkan kode berikut ini:

Script alert welcome text.
contohnya :



kode :

<SCRIPT language='JavaScript'>alert("PESAN ANDA");</SCRIPT>

Script alert submit name.
contohnya :



kode :

<script type="text/javascript">
var yourName = prompt("Boleh Tahu Namanya?", "Nama Anda");
</script>

Script alert visitor pergi.
contohnya :



kode :

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('PESAN ANDA');
}
parent.window.onunload=goodbye;

Script alert dengan tombol.
contohnya :



kode :

<script type="text/javascript">
function selamat(){alert("PESAN ANDA")}
</script>
<input value="JUDUL TOMBOL" onclick="selamat()" type="button"/>

Demikian tips seputar script alert..hehe..kalian juga bisa pake semuanya.. tinggal dicopy semua sob..hehe..kalian ganti teks kode yang berwarna merah sesuai kebutuhan kalia.


Semoga bermanffat Ya........ Salam,salam....

Read more

Membuat Tabel Multi Kolom Psoting Blog

Menu Multi Kolom disini maksudnya agar bisa menghemat space blog anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot disamping :

Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas (diatas kode ]]></b:skin>)

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Keterangan :

- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama

Untuk mengetahui kode-kode warna silahkan klik disini

5. Silahkan masukkan kode dibawah ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian Save

Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript

Silahkan masukkan script menu multi kolom dibawah ini:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda

Silahkan dicoba ya, semoga berhasil !!!

Read more

Cara Cepat mengetahui Kode Warna Untuk Blog

Warna itu sangat penting dan sangat berpengaruh terhadap penampilan sebuah blog ataupun website. Warna-warna biasanya digunakan untuk background, text, links, table dll. Kalo kombinasi warna pada web/blog kita tidak sesuai, atau tidak enak dipandang mata mata, maka hal itu akan membuat pengungjung web/blog kita menjadi kurang nyaman, dan kemungkinan akan malas untuk mengunjungi blog kita lagi. Tapi karena untuk untuk membuat warna-warna ini harus menggunakan kode-kode warna, maka bagi yang tidak begitu mahir tentang html akan kesulitan untuk mendapatkan kode-kode warna ini.

Nah... oleh karena itulah dibawah ini telah aku buat Chart HTML Kode Warna bagi yang tidak tahu atau bagi yangg pingin tahu kode-kode warna. 

 

 

 

Cara penggunaannya cukup mudah, km tinggal klik warna yang kamu pilih, maka kode warnanya akan tampil di kotak "kode warna:". Ok silahkan dicoba.

Tabel Warna

Kode warna :

Nah! Mudah bukan untuk mendapatkan kode HTML dari warna tertentu?. Semoga artikel ini bermanfaat bagi anda. Selamat bereksperimen. apabila di link ini bermaslah untuk menentukan warna silahkan klik link ini Blog Teman

Selamat Mewarnai dan berkreasi untuk warya yang indah... Salam...salam..............

Read more

Cara Clasik Mempromosikan Blog Kita

Hal pertama setelah kita membuat sebuah blog adalah mempromosikan dan memperkenalkannya ke search engine di internet. Sangat klasik memang berbicara tentang promosi blog, tapi ini salah satu cara untuk meningkatkan pengunjung ke blog anda karena dengan banyaknya pengunjung ke blog anda meningkatkan popularitas suatu blog.

dibawah ini beberapa cara promosi blog yang mungkin sudah banyak anda lakukan yaitu dengan memasukkan URL anda ke :

- Forum
- Newsgroups
- Blogs
- Discussion Groups
- Direktory artikel

- Mendaftarkan website URL anda ke Google, Yahoo, MSN

Berikut salah satu cara promosi blog yang sangat efektif untuk meningkatkan banyak pengunjung dengan cara mendaftarkan URL anda ke situs direktori link yaitu www.growurl.com
disitus tersebut anda bisa mempromosikan blog anda secara gratis ataupun dengan membeli kredit, anda juga bisa mendapatkan free kredit dengan mengikuti persyaratan yang ada diwebsite tersebut

silahkan mulai sekarang promosikan blog anda dan tingkatkan banyak pengunjung dengan daftar di sini atau bisa langsung klik banner dibawah ini

Read more

Tempatkan Iklan Di Bawah Posting Blog

Anda punya iklan yang bagus yntuk di promosikan?? berikut cara membuat dan menempatkan iklan tersebut agar tampil di setiap postingan kita. Hal ini membantu supaya iklan anda lebih sering dilihat oleh pengunjung, untuk membuatnya anda tinggal mengedit HTML layout nya saja secara otomatis iklan anda akan muncul disetiap postingan anda.

Silahkan ikuti langkah-langkah dibawah ini untuk pasang iklan di bawah postingan:

1. Sepert biasa silahkan sign in di blogger

2. pada halaman Dasboard--> Layout-->Edit HTML-->jangan lupa klik "Expand Widget Template"

 

3.Silahkan temukan kode dibawah ini (berwarna hitam)

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>


Kode iklan yang sudah di parse


<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Kode iklan yang akan dimasukkan harus diparse terlebih dahulu
untuk parse kode HTML silakan kunjungi disini

4.Langkah terakhir Save template

Selamat Mencoba, Salam.....

Read more

Membuat SITEMAP untuk BLOG

Bikin Sitemap yuk di Blog kita... Sitemap atau yang sering disebut oleh orang awam sebagai daftar isi ini sangat berguna untuk blog kita, ketika pengunjung ingin menjelajahi blog kita maka inilah peran yang harus hadir untuk mempermudah penjelajah blog kita. "Sitemap for Blogger".

Nah pada kesempatan kali ini Saya kan mengulas bagimana caranya memasang itu kedalam halaman pages blog kita.

1. Langkah pertama masuk blogger.com

2. Ccopy source code seperti dibawah ini :

 

 

 

 

 

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.saungjiwa2012.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Copy code diatas dan ingat ganti http://www.saungjiwa2012.blogspot.com dengan alamat blog Anda

3. Pada Dashboard draft.blogger.com masuk pada bagian "Posting" lalu "Edit Pages"

4. Lalu klik tombol "New Pages" lalu paste code tadi kedalam post editornya

5. Setelah di SAVE akhirnya jadi juga dan sisipkan link pagesnya tadi kedalam daftar menu di blog Anda   untuk navigasinya

Nah Selesai dech... semoga bermanfaat bagi Anda. Salam... salam....

Read more

Membuat Link Blogroll untuk Teman (tukaran link)

Blogroll maksudnya adalah media untuk menghubungkan link-link teman blogger kita, apabila anda punya teman blogger banyak sekali dan teman anda minta menyisipkan link blognya di blog anda apa yang terjadi...? blog kita akan sesak akan link-link teman blog anda jika kita tidak membuat blogroll dengan ringkas.. tul gak... ini aku punya contoh dibawah kotak bloggroll yang tidak banyak memakan tempat di blog anda.

1. Model Text area
2. Model Marque (efek texs bergerak)
3. Penggabungan Text Area dan Marque

 

 

dari ketiga diatas anda bisa meilih yang mana yang anda suka...
Sekarang kita beranjak pergi ke cara pembuatnya... siap gak... hoi.. siap gak... siap yaa

• Buka menu Layout
• Page Elements
• Kemudian Add A Gadget dan pilih HTML/JavaScript
• kemudian taruh deh salah satu cara dibawah ini
  

1. Model Text Area

Model ini jika linknya banyak tidak akan buat blog jadi sesak karena jika link melebihi batas text area akan ada roll bar disampingnya jadi ada batas tempatnya gitu dehh pokoknya kurang lebih kaya itu penjelasanya. Nah sekarang kita beranjak ke cara pembuatanya

Copy Code dibawah ke HTML/JavaSCript

 

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#alamat link <br />
#alamat link2 <br />
#alamat link3 <br />
#link... seterusnya

</div>

keteranganya:

 
width: 200px; : Adalah ukuran panjang text area tersebut
height: 200px; : Adalah Ukuruan lebar text area tersebut
#alamat link <br /> : itu adalah link teman blog kamu yang kamu mau pasang di blogroll kamu, jika link tidak ingin berada di garis baru buang saja code <br />

Linknya kamu harus isi dengan HTML seperi dibawah

<a href="http://tutorial-jitu.blogspot.com">tutorial blog</a>
atau jika ingin membuka di tabel baru tambahkan target="_blank" Jadinya Seperti ini <a href="http://tutorial-jitu.blogspot.com"target="_blank">tutorial blog</a>
Ingat kamu harus ganti link dan judul linknya teman blog kamu okey

2. Model Marque

Model marque ini link-linknya akan bergerak dari atas ke bawah/dari bawah ke atas dan juga bisa dari kiri ke kanan juga bisa sebaliknya

Cara pemasanganya taruh Code dibawah Di HTML/JavaScript

<MARQUEE align="center" direction="up" height="100" scrollamount= "2"

onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>

Keteranganya: 

 
Up adalah pergerakan link bisa kamu ganti dengan down, left, right
100 adalah tinggi batas blogrollnya

Linknya kamu harus isi dengan HTML seperi dibawah

<a href="http://tutorial-jitu.blogspot.com">tutorial blog</a>
atau jika ingin membuka di tabel baru tambahkan target="_blank" Jadinya Seperti ini <a href="http://tutorial-jitu.blogspot.com"target="_blank">tutorial blog</a>

3. Penggabungan Text Area Dan Marque

Ini adalah penggabungan dari text area dan marque bloggroll

cara pemasanganya:

taruh Code dibawah di HTML/JavaScript

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">
<marquee direction="up" width="95%" scrollamount="2"

onmouseover="this.stop()" onmouseout="this.start()" height="200" align="center">

Link
Link
Link


</marquee>
</div>

Keteranganya:

width: 200px; height: 200px; adalah panjang dan lebar batas text area
height="200" dan kalau yang tercetak biru ini adalah tinggi batas marque areanya

Linknya kamu harus isi dengan HTML seperi dibawah :

<a href="http://tutorial-jitu.blogspot.com">tutorial blog</a>
atau jika ingin membuka di tabel baru tambahkan target="_blank" Jadinya Seperti ini

 <a href="http://tutorial-jitu.blogspot.com"target="_blank">tutorial blog</a>

 

 Selamat Mencoba Ya....

kutip by: http://aulia-agusta.blogspot.com

Read more