Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Jumat, 02 Januari 2015

Cara Membuat Sitemap Responsive Ala KompiAjaib

Hasil dari jalan-jalan di blog para master bloggers indonesia, banyak menemukan hal-hal yang baru. dan akibat tampilan baru di blog buyasorta, ya walau akan mengalami penurunan akibat ganti template tak majalah, semoga template dan tampilan ini bertahan lama dan dapat dukungan dari pembuatnya terus +Adhy Suryadi  creator KompiAjaib, ini template emang benar-benar ajaib dan mantap sesuai dengan trend blogger era sekarang.



Setelah otak -ati dan pasang beberapa tambahan script untuk komentar faceboo, google + dan blogger, dan juga sitemap semua dari kompi ajaib. Dan ternyata banyak yang tertarik juga sitemap responsive. Cara Membuat Sitemap Responsive Ala KompiAjaib, buta saja halaman baru beri judul sitemap atau daftar isi ini yang umum digunakan oleh para bloggers, klik editor html jangan compose copy paste script dibawah dan jangan lupa ganti alamat url nya

yang belum baca dan coba cara memasang facebook coment, google+ dan blogger komentar 


<div dir="ltr" style="text-align: left;" trbidi="on"> <style scoped="scoped" type="text/css"> #show-cat{float:left;margin-right:20px;width:220px;height:391px;overflow-x:hidden;overflow-y:auto;line-height:18px} #show-cat ul{margin:0;border-top:1px solid #ccc;padding:0} #show-cat ul li{list-style-type:none;margin:0;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-left:1px solid #ccc;padding:0} #show-cat ul li a{display:block;padding:10px} #show-cat ul li a,#navi-cat a{background:#fff;color:#d80556;text-decoration:none} #show-cat ul li a,#navi-cat a,#navi-cat span{font-size:12px} #show-cat ul li a:hover,#navi-cat a:hover{background:#ccc;color:#fff} #show-post{float:left;width:60%} #show-post ul li{list-style-type:none} #navi-cat{padding:20px 0} #navi-cat a{margin-right:10px;border:1px solid #ccc} #navi-cat a,#navi-cat span{padding:5px 10px} #navi-cat span{float:right} </style> <div id="show-cat"> </div> <div id="show-post"> <script type="text/javaScript"> var cat_home='http://blog.buyasorta.com';cat_numb=11;cat_pre='Prev';cat_nex='Next'; var cat_name;var cat_start;var cat_class; function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+=' <li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li> '}dw+='</ul> ';dw+='<div id="navi-cat"> ';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div> ';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+=' <li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li> '}dw+='</ul> ';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>'); </script> </div> <div style="clear: both;"> </div> </div>
Kalau sudah selesai tinggal publish dan nikmati hasilnya, akan seperti yang ada pada blog ini sitemap resposive blogger terima kasih mas Adhy dan selamat mencoba dan berkreasi salam bloggers gresik.

Read more

Selasa, 25 September 2012

Cara Pasang Share Tweet Meme

Jika kita tanya pada mbah google dengan kata kunci Cara Pasang Share Tweet Meme ini mungkin tulisan yang ke sribu kali. Tapi bagi saya tidak apa-apa bagi yang lagi belajar ngeblog ini mungkin bisa membantu dan yang terpenting adalah bisa berbagi bersama. tweet meme adalah layanan yang terkoneksi dengan twitter.
berikut caranya menurut para suhu blogger.
tulisan ini pun saya ambil dari sahabat blogger

tombol tweet meme di bawah judul artikel
1. Login ke blogger.
2. klik ke tab rancangan, lalu masuk ke edit HTML.
3. centang "expand template widget".
4. Cari kode <data:post.title/> (yang paling terakhir), biasanya kode lengkapnya begini:

        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>

5. Setelah ketemu, salin kode berikut lalu paste di bawah kode </b:if> (lihat kode pada no. 4):

    <div style='float:right; padding: 0 5px 5px 0;'>
    <script type='text/javascript'>
    tweetmeme_style = &#39;compact&#39;;
    tweetmeme_url = &#39;<data:post.url/>&#39;;
    tweetmeme_source = &#39;DAW-XP&#39;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
    </div> 

6. Simpan template.

Tombol Tweetmeme di Bawah Artikel
Cari kode <data:post.body/> lalu letakkan kode berikut di bawahnya:

    <div style='float:right; padding: 0 5px 5px 0;'>
    <script type='text/javascript'>
    tweetmeme_style = &#39;compact&#39;;
    tweetmeme_url = &#39;<data:post.url/>&#39;;
    tweetmeme_source = &#39;DAW-XP&#39;;
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
    </div> 

 5. Simpan template.





Read more

Sabtu, 21 Januari 2012

How to add Facebook connect to Blogger (deprecated)


All of you know that seems impossible to add Facebook connect to Blogger especially when you can’t upload file or even creating full HTML customized pages. or to implant Facebook connect to your website, you need to upload or create a cross-domain communication channel file called “xd_receiver.htm” under your domain, and I said Blogger don’t let you to do that . So how can we add it ?
Connect_white_large_long
To add Facebook connect into your blogs, you need to put a few snippets of  code in your template and create an application on Facebook. Those operations will take a couple of minutes then you are ready to write your own codes. (Visit Facebook Developer for more information). 

Create an application

we start with the creation of a new application :
  1. Go to http://www.facebook.com/developers/createapp.php to create a new application.
    Set up a new application
  2. Enter a name for your application in the Application Name field (The same name of your Blog). And agree Facebook terms then “save changes”.
    Application Name
  3. Take note of the API Key, you'll need this shortly.
  4. Click the Connect tab. Set Connect URL to “Your_Blog.blogspot.com”. now “save changes”
    Connect URL 

Adding a few snippets of code to your template

Blogger-HTML-Edit1
Now go to your Blog Dashboard> Layout > Edit HTML :
  1. Look for this tag in the top of your template code source :

    <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'xmlns:b='http://www.google.com/2005/gml/b'xmlns:data='http://www.google.com/2005/gml/data'xmlns:expr='http://www.google.com/2005/gml/expr' >

    and add the code : “ xmlns:fb='http://www.facebook.com/2008/fbml' 

    <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'xmlns:b='http://www.google.com/2005/gml/b'xmlns:data='http://www.google.com/2005/gml/data'xmlns:expr='http://www.google.com/2005/gml/expr'xmlns:fb='http://www.facebook.com/2008/fbml'>
  2. Put the following code just before </head> tag :

    <script src='http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php'type='text/javascript'/>

    PIC for step 1 & step 2
  3. Put the following code just before </body> tag : (Updated)

    <script type='text/javascript'> //<![CDATA[
       
    FB.init("YOUR_API_KEY_HERE"" ")//]]> </script> 

    PIC for step 3
  4. Save changes. now you are ready to add Facebook connect to your blog.
    PIC for step 4

Add Facebook connect

Login-Button :
<fb:login-button autologoutlink="True" length="short" background="white" size="large"></fb:login-button>
Profile Picture :
<fb:profile-pic uid="loggedinuser" facebook-logo="true" linked="false"></fb:profile-pic>
User Name :
<fb:name uid="loggedinuser" useyou="false"/></fb:name>
Live Stream Box :
<fb:live-stream event_app_id="YOUR_APPLICATION_ID" width="400" height="500">
Comments Box :
<fb:comments width='480'/>
Fan Box :
<fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections="10" width="300"></fb:fan>
For more help please visit http://wiki.developers.facebook.com/. as you can see it work correctly in my blog. try it out in your blogs on Blogger and don’t forget please to leave a link to your blog  to share your experience with Facebook Connect with other readers.
Read more

Jumat, 18 Februari 2011

Google Books Widget

Want to share your library with friends, family and even the rest of the world? If that's the case, you can use my new Google Books Library Widget. Please take a look and experiment with this new widget, and let me know what you think about it.


Google Books

In Google Books you can create your own Library. Take a look here to see my small test library. As you can see, there are 2 books in this library, and I have written a small review for each of them. Creating your own Google Books Library is very easy. First of all, you need to have a Google account. As a Blogger user, you probably have one. After signing in on your Google account, select "more" from the menubar on the Google main page. This opens a small pop-up menu, where you can select "Books". This brings you to the Books-page, where you start creating your Library by "Importing Books". You can easily add books to your Library by entering a list of ISBN-numbers. Google will look up all bookdata. After importing some books, return to the Library page (click on "My Library" in the menubar), to see your Library Listing. Now you can add comments, reviews, and a ranking (0-5 stars) to your books. After setting up your Library, it is time to move on to creating the Google Books Library Widget.


Creating the Widget
Creating the Widget is done in a few easy steps:
  1. Get the URL of your Google Books Library;
  2. Create a Widget with Yahoo Pipes;
  3. Add the Widget to your Blog.

It will take less than a minute to set it up.

1. Get your Google Books Library URL
Go to your Google Books Library page. Select the contents from your browser's address bar by right-clicking on it and selecting "copy" from the popup menu.

2. Create the Widget with Yahoo Pipes
Go to my Google Books Library Pipe by clinking on the link. In the entry-field, enter the URL by right-clicking and pasting the URL you just copied. Click the "Run Pipe" button. Your Library data are retrieved, and displayed as a list of titles and descriptions.
If the output is as you expected, go on to the next step.

3. Add the Widget to your Blog
Now click on "Get as a Badge". Badge is the Yahoo-word for Widgets. This will bring up the Badge Configuration Window. In this window, click on "Customize the size, type and settings of your Badge". In the entry-field again paste your Google Books URL and click "Next". Now select "Blogger" as the destination for your Badge. This brings you to the familiar Blogger-screen, where you can select the Blog, and enter the heading for the new Page Element. Click on "Add Widget", and afterwards view your Blog.
Read more

Selective display of widgets

Here is a small tutorial on how to display your blog's widgets selectively on your pages.

Let's suppose you only want to show your Profile Widget on your blog's Homepage, but not on the other pages. This is how it is done.



Step 1: Back up your template
Go to your blog's Layout Page, and enter HTML-edit mode. Download your template as an XML-file and store it in a safe place. In case template-hacking takes a wrong turn somewhere, you can upload your template-file again and you are back to normal.

Step 2: Find the Profile Widget
Expand the widget-code by checking the checkbox on the HTML-edit page. Now scroll down and look for the Profile Widget, that looks like this:

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
</div>
</b:includable>
</b:widget>



Step 3: Modify the widget code
Now we only want to display this widget if the page that we are looking at is our blog's Homepage. We will use a <b:if>-statement to check for this situation.
Insert the following (red) lines of code into the widget code:
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
...
...
</div>
</b:if>.na
</b:includable>
</b:widget>

The datafield data:blog.homepageUrl contains the url of your blog's homepage. The datafield data:blog.url holds the url of the current page. If they are the same (==) we are on the homepage and the widget should be displayed. If they are not the same, the widgetcode is skipped.

Step 4: Save your template
Save your template and display your blog.
by@hans
Read more

Post Summary And Read More

My old friends here are very well aware of the Peek-A-Boo-Posts hack that Ramani and I came up with several years ago. It required quite some template hacking and javascript too.

In this tutorial you will learn how to tweak your blog without any javascript to get a similar effect. On our homepage, all posts will show a short summary, followed by a "Read More" link. Clicking the "Read More"-link will bring up the post page with the full post text.

Step 1: Back up your
template
Open the Layout|Edit HTML-tab on your Dashboard, and download the
template as an XML-file to your harddisk. If anything goes wrong, upload it again and there will be no problem at all.





Step 2: Modify the
template code
Scroll down and look for the following piece of code:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

This is the piece of template code that displays the post-body on the screen. We have to add a few lines of code here:
<div class='post-body entry-content'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<style type='text/css'>.restofpost {display:none;}</style>
</b:if>

<data:post.body/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>Read more...</a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Now save your template

Step 3: Modify your post template
In your Blog Settings you can modify the post template. Change it to:
<div class="summary">Type summary here</div>
<div class="restofpost">Type rest of post here</div>

And save your settings.
This will take care of all new posts. Type the summary text in between the summary-div-tags. Type the rest of the post between the other div-tags, and publish!

Step 4: Modify old posts
If you want older posts to have summaries as well, change every post and add a summary-div and restofpost-div.

And furthermore...
The summary-div is not really necessary, as the code only hides the restofpost-div if we are on the homepage. If you want some other styling for the summary, add CSS-tags to the skin-part of your blog.
by@hans
Read more

BlogToC Widget Released

The job is done. We now have a complete interactive Table Of Contents. Click the button in my sidebar to display the TOC. You can sort the TOC by Post Title by clicking the column header. Click it again, and it is sorted in reversed order. The same way if you want to sort the posts by date: newest first, or oldest first. And by clicking on one of the labels in the TOC filters all posts with that label. Click the column header to return to the full ToC.

Here is how to install it to your Blog.

Step 1: Back Up your Template.

Step 2: Add a HTML Page Element
Edit your template in HTML-mode, and look for the <b:section> with id=main. This is the section that holds the Blog posts.
Change that line as follows:

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Save the template and switch to the Page Elements Tab.
Add a HTML page element above your Blog Posts element.
Leave the title blank. Add the following html:
<div id="toc"></div>

Save your template.

Step 3: Add a Sidebar HTML-element
Now add a HTML-element to the sidebar. Set the title to "TOC".
For the contents, enter:
<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://kpn.planet.nl/oosti468/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>


Replace YOURBLOG with the name of ...... exactly.
Oh yes, and save.

Step 4: Add custom styles to the skin of your template.
New id's and classes are:
#toc : the div-wrapper that contains the TOC
.toc-header-col1 : header of column 1
.toc-header-col2 : header of column 2
.toc-header-col3 : header of column 3
.toc-entry-col1 : cell in column 1
.toc-entry-col2 : cell in column 2
.toc-entry-col3 : cell in column 3

For your convenience: Beautiful Beta uses the following styling:
<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>


You can add this to the <b:skin>-part of the template, or insert it in the sidebar widget.

Enjoy! by hans
Read more